update 修改参数设置页面布局

src/views/system/config/index.vue

@@ -27,22 +27,6 @@
               @keyup.enter="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="系统内置" prop="configType">
-            <el-select v-model="queryParams.configType" placeholder="系统内置" clearable>
-              <el-option v-for="dict in sys_yes_no" :key="dict.value" :label="dict.label" :value="dict.value" />
-            </el-select>
-          </el-form-item>
-          <el-form-item label="创建时间" style="width: 308px">
-            <el-date-picker
-              v-model="dateRange"
-              value-format="YYYY-MM-DD HH:mm:ss"
-              type="daterange"
-              range-separator="-"
-              start-placeholder="开始日期"
-              end-placeholder="结束日期"
-              :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
-            ></el-date-picker>
-          </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
             <el-button icon="Refresh" @click="resetQuery">重置</el-button>
@@ -51,7 +35,7 @@
       </el-card>
     </div>
 
-    <el-card shadow="hover" class="table-panel">
+    <el-card v-loading="loading" shadow="hover" class="table-panel config-panel">
       <template #header>
         <div class="toolbar-shell">
           <div class="table-heading">
@@ -63,26 +47,6 @@
             <el-button v-hasPermi="['system:config:add']" type="primary" plain icon="Plus" @click="handleAdd">
               新增
             </el-button>
-            <el-button
-              v-hasPermi="['system:config:edit']"
-              type="success"
-              plain
-              icon="Edit"
-              :disabled="single"
-              @click="handleUpdate()"
-            >
-              修改
-            </el-button>
-            <el-button
-              v-hasPermi="['system:config:remove']"
-              type="danger"
-              plain
-              icon="Delete"
-              :disabled="multiple"
-              @click="handleDelete()"
-            >
-              删除
-            </el-button>
             <el-button v-hasPermi="['system:config:export']" type="warning" plain icon="Download" @click="handleExport">
               导出
             </el-button>
@@ -100,59 +64,64 @@
         </div>
       </template>
 
-      <el-table
-        v-loading="loading"
-        border
-        class="data-table"
-        :data="configList"
-        @selection-change="handleSelectionChange"
-      >
-        <el-table-column type="selection" width="55" align="center" />
-        <el-table-column v-if="false" label="参数主键" align="center" prop="configId" />
-        <el-table-column label="参数名称" align="center" prop="configName" :show-overflow-tooltip="true" />
-        <el-table-column label="参数键名" align="center" prop="configKey" :show-overflow-tooltip="true" />
-        <el-table-column label="参数键值" align="center" prop="configValue" :show-overflow-tooltip="true" />
-        <el-table-column label="系统内置" align="center" prop="configType">
-          <template #default="scope">
-            <dict-tag :options="sys_yes_no" :value="scope.row.configType" />
-          </template>
-        </el-table-column>
-        <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-        <el-table-column label="创建时间" align="center" prop="createTime" width="180">
-          <template #default="scope">
-            <span>{{ parseTime(scope.row.createTime) }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
-          <template #default="scope">
-            <el-tooltip content="修改" placement="top">
-              <el-button
-                v-hasPermi="['system:config:edit']"
-                link
-                type="primary"
-                icon="Edit"
-                @click="handleUpdate(scope.row)"
-              ></el-button>
-            </el-tooltip>
-            <el-tooltip content="删除" placement="top">
-              <el-button
-                v-hasPermi="['system:config:remove']"
-                link
-                type="primary"
-                icon="Delete"
-                @click="handleDelete(scope.row)"
-              ></el-button>
-            </el-tooltip>
-          </template>
-        </el-table-column>
-      </el-table>
-      <pagination
-        v-show="total > 0"
-        v-model:page="queryParams.pageNum"
-        v-model:limit="queryParams.pageSize"
-        :total="total"
-        @pagination="getList"
-      />
+      <div class="config-body">
+        <el-tabs v-model="activeTab" tab-position="left" class="config-tabs" @tab-change="handleTabChange">
+          <el-tab-pane label="全部" name="" />
+          <el-tab-pane label="系统内置" name="Y" />
+          <el-tab-pane label="自定义配置" name="N" />
+        </el-tabs>
+
+        <div class="config-content">
+          <el-table :data="configList" :border="false">
+            <el-table-column label="参数名称" prop="configName" min-width="160" />
+            <el-table-column label="参数键名" prop="configKey" min-width="160" />
+            <el-table-column label="参数键值" min-width="160">
+              <template #default="{ row }">
+                <el-input
+                  v-model="row.configValue"
+                  placeholder="请输入参数键值"
+                  @blur="handleInlineSave(row)"
+                  @keyup.enter="handleInlineSave(row)"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column label="备注" prop="remark" min-width="180" show-overflow-tooltip>
+              <template #default="{ row }">
+                {{ row.remark || '-' }}
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" width="80" align="center">
+              <template #default="{ row }">
+                <el-tooltip content="修改" placement="top">
+                  <el-button
+                    v-hasPermi="['system:config:edit']"
+                    link
+                    type="primary"
+                    icon="Edit"
+                    @click="handleUpdate(row)"
+                  ></el-button>
+                </el-tooltip>
+                <el-tooltip content="删除" placement="top">
+                  <el-button
+                    v-hasPermi="['system:config:remove']"
+                    link
+                    type="danger"
+                    icon="Delete"
+                    @click="handleDelete(row)"
+                  ></el-button>
+                </el-tooltip>
+              </template>
+            </el-table-column>
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            :total="total"
+            @pagination="getList"
+          />
+        </div>
+      </div>
     </el-card>
 
     <!-- 添加或修改参数配置对话框 -->
@@ -187,27 +156,23 @@
 </template>
 
 <script setup name="Config" lang="ts">
-import { listConfig, getConfig, delConfig, addConfig, updateConfig, refreshCache } from '@/api/system/config';
+import { listConfig, getConfig, delConfig, addConfig, updateConfig, updateConfigByKey, refreshCache } from '@/api/system/config';
 import { ConfigForm, ConfigQuery, ConfigVO } from '@/api/system/config/types';
 import { useLoading } from '@/hooks/async/useLoading';
 import { useFormDialog } from '@/hooks/dialog/useFormDialog';
-import { useDateRangeQuery } from '@/hooks/form/useDateRangeQuery';
 import { useSearchReset } from '@/hooks/form/useSearchReset';
 import { useSearchToggle } from '@/hooks/form/useSearchToggle';
-import { useTableSelection } from '@/hooks/table/useTableSelection';
 import modal from '@/plugins/modal';
 import { useDict } from '@/utils/dict';
 import { download as requestDownload } from '@/utils/request';
-import { parseTime } from '@/utils/ruoyi';
 
 const { sys_yes_no } = toRefs<any>(useDict('sys_yes_no'));
 
 const configList = ref<ConfigVO[]>([]);
 const { loading, withLoading } = useLoading(true);
 const { showSearch } = useSearchToggle();
-const { ids, single, multiple, handleSelectionChange } = useTableSelection<ConfigVO>(item => item.configId);
 const total = ref(0);
-const { dateRange, applyDateRange, resetDateRange } = useDateRangeQuery();
+const activeTab = ref('');
 
 const queryFormRef = ref<ElFormInstance>();
 const configFormRef = ref<ElFormInstance>();
@@ -245,9 +210,6 @@ const { resetQuery } = useSearchReset({
   queryFormRef,
   queryParams,
   pageNumKey: 'pageNum',
-  resetExtras: () => {
-    resetDateRange();
-  },
   afterReset: () => {
     handleQuery();
   }
@@ -256,7 +218,7 @@ const { resetQuery } = useSearchReset({
 /** 查询参数列表 */
 const getList = async () => {
   await withLoading(async () => {
-    const res = await listConfig(applyDateRange(queryParams.value));
+    const res = await listConfig({ ...queryParams.value });
     configList.value = res.data?.rows;
     total.value = res.data?.total;
   });
@@ -271,6 +233,12 @@ const handleQuery = () => {
   queryParams.value.pageNum = 1;
   getList();
 };
+/** tab 切换 */
+const handleTabChange = (tab: string | number) => {
+  queryParams.value.configType = tab as string;
+  queryParams.value.pageNum = 1;
+  getList();
+};
 /** 新增按钮操作 */
 const handleAdd = () => {
   openDialog('添加参数');
@@ -278,11 +246,17 @@ const handleAdd = () => {
 /** 修改按钮操作 */
 const handleUpdate = async (row?: Partial<ConfigVO>) => {
   resetForm();
-  const configId = row?.configId || ids.value[0];
-  const res = await getConfig(configId);
+  const configId = row?.configId;
+  const res = await getConfig(configId!);
   Object.assign(form.value, res.data);
   showDialog('修改参数');
 };
+/** 内联保存参数值 */
+const handleInlineSave = async (row: ConfigVO) => {
+  await modal.confirm('确认要保存对参数"' + row.configKey + '"的修改吗？');
+  await updateConfigByKey(row.configKey, row.configValue);
+  modal.msgSuccess('修改成功');
+};
 /** 提交按钮 */
 const submitForm = () => {
   configFormRef.value?.validate(async (valid: boolean) => {
@@ -296,9 +270,9 @@ const submitForm = () => {
 };
 /** 删除按钮操作 */
 const handleDelete = async (row?: Partial<ConfigVO>) => {
-  const configIds = row?.configId || ids.value;
+  const configIds = row?.configId;
   await modal.confirm('是否确认删除参数编号为"' + configIds + '"的数据项？');
-  await delConfig(configIds);
+  await delConfig(configIds!);
   await getList();
   modal.msgSuccess('删除成功');
 };
@@ -326,5 +300,44 @@ onMounted(() => {
 <style lang="scss" scoped>
 @use '@/assets/styles/components/page-shell' as pageShell;
 
-@include pageShell.table-crud-page;
+@include pageShell.toolbar-responsive;
+
+.config-body {
+  display: flex;
+}
+
+.config-tabs {
+  flex-shrink: 0;
+}
+
+.config-tabs :deep(.el-tabs__header.is-left) {
+  margin-right: 0;
+}
+
+.config-tabs :deep(.el-tabs__nav-wrap.is-left::after) {
+  width: 1px;
+  background: var(--el-border-color-lighter);
+}
+
+.config-tabs :deep(.el-tabs__content) {
+  display: none;
+}
+
+.config-tabs :deep(.el-tabs__item) {
+  height: 36px;
+  padding: 0 16px;
+  font-size: 14px;
+  color: var(--el-text-color-regular);
+}
+
+.config-tabs :deep(.el-tabs__item.is-active) {
+  color: var(--el-color-primary);
+  font-weight: 500;
+}
+
+.config-content {
+  flex: 1;
+  min-width: 0;
+  padding-left: 16px;
+}
 </style>