feat ✨ 参数模块优化

package.json

@@ -108,6 +108,7 @@
     "connect": "3.7.0",
     "eslint": "7.6.0",
     "eslint-plugin-vue": "6.2.2",
+    "form-gen-parser": "^1.0.3",
     "html-webpack-plugin": "4.3.0",
     "husky": "4.2.5",
     "lint-staged": "10.2.11",

src/views/admin/sys-config/index.vue

@@ -2,28 +2,28 @@
   <BasicLayout>
     <template #wrapper>
       <el-card class="box-card">
-        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="68px">
-          <el-form-item label="参数名称" prop="configName">
+        <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="48px">
+          <el-form-item label="名称" prop="configName">
             <el-input
               v-model="queryParams.configName"
               placeholder="请输入参数名称"
               clearable
               size="small"
-              style="width: 240px"
+              style="width: 160px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="参数键名" prop="configKey">
+          <el-form-item label="键名" prop="configKey">
             <el-input
               v-model="queryParams.configKey"
               placeholder="请输入参数键名"
               clearable
               size="small"
-              style="width: 240px"
+              style="width: 160px"
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
-          <el-form-item label="系统内置" prop="configType">
+          <el-form-item label="内置" prop="configType">
             <el-select v-model="queryParams.configType" placeholder="系统内置" clearable size="small">
               <el-option
                 v-for="dict in typeOptions"
@@ -80,20 +80,75 @@
           </el-col>
         </el-row>
 
-        <el-table v-loading="loading" :data="configList" @selection-change="handleSelectionChange">
+        <el-table
+          v-loading="loading"
+          :data="configList"
+          border
+          @selection-change="handleSelectionChange"
+          @sort-change="handleSortChang"
+        >
           <el-table-column type="selection" width="55" align="center" />
-          <el-table-column label="参数主键" width="80" align="center" prop="id" />
-          <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" />
-          <el-table-column label="系统内置" align="center" prop="configType" :formatter="typeFormat" />
-          <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
-          <el-table-column label="创建时间" align="center" prop="createdAt" width="180">
+          <el-table-column
+            label="编码"
+            sortable="custom"
+            width="75"
+            prop="id"
+          />
+          <el-table-column
+            label="名称"
+            sortable="custom"
+            prop="configName"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="键名"
+            sortable="custom"
+            prop="configKey"
+          >
+            <template slot-scope="scope">
+              <el-popover trigger="hover" placement="top">
+                <p>键值: {{ scope.row.configValue }}</p>
+                <p>UI:  <el-tag v-if="scope.row.isFrontend=='0'">{{ scope.row.isFrontend }}</el-tag>
+                  <el-tag v-if="scope.row.isFrontend=='1'" type="success">{{ scope.row.isFrontend }}</el-tag>
+                  {{ scope.row.isFrontend }}</p>
+                <div slot="reference" class="name-wrapper">
+                  {{ scope.row.configKey }}
+                </div>
+              </el-popover>
+            </template>
+          </el-table-column>
+          <!-- <el-table-column
+            label="参数键值"
+            align="center"
+            prop="configValue"
+          /> -->
+          <el-table-column
+            label="内置"
+            sortable="custom"
+            prop="configType"
+            :formatter="typeFormat"
+            width="80"
+          />
+          <el-table-column
+            label="备注"
+            prop="remark"
+            :show-overflow-tooltip="true"
+          />
+          <el-table-column
+            label="创建时间"
+            sortable="custom"
+            prop="createdAt"
+            width="160"
+          >
             <template slot-scope="scope">
               <span>{{ parseTime(scope.row.createdAt) }}</span>
             </template>
           </el-table-column>
-          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+          <el-table-column
+            label="操作"
+            class-name="small-padding fixed-width"
+            width="120"
+          >
             <template slot-scope="scope">
               <el-button
                 v-permisaction="['admin:sysConfig:edit']"
@@ -182,6 +237,8 @@ export default {
       total: 0,
       // 参数表格数据
       configList: [],
+      // 排序字段
+      order: 'createdAtOrder',
       // 弹出层标题
       title: '',
       isEdit: false,
@@ -197,7 +254,8 @@ export default {
         pageSize: 10,
         configName: undefined,
         configKey: undefined,
-        configType: undefined
+        configType: undefined,
+        createdAtOrder: 'desc'
       },
       // 表单参数
       form: {},
@@ -258,6 +316,7 @@ export default {
     resetQuery() {
       this.dateRange = []
       this.resetForm('queryForm')
+      this.queryParams['createdAtOrderOrder'] = 'desc'
       this.handleQuery()
     },
     /** 新增按钮操作 */
@@ -267,6 +326,23 @@ export default {
       this.title = '添加参数'
       this.isEdit = false
     },
+    handleSortChang(column, prop, order) {
+      prop = column.prop
+      order = column.order
+      if (this.order !== '' && this.order !== prop + 'Order') {
+        this.queryParams[this.order] = undefined
+      }
+      if (order === 'descending') {
+        this.queryParams[prop + 'Order'] = 'desc'
+        this.order = prop + 'Order'
+      } else if (order === 'ascending') {
+        this.queryParams[prop + 'Order'] = 'asc'
+        this.order = prop + 'Order'
+      } else {
+        this.queryParams[prop + 'Order'] = undefined
+      }
+      this.getList()
+    },
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)

src/views/admin/sys-config/set.vue

@@ -0,0 +1,316 @@
+<template>
+  <BasicLayout>
+    <template #wrapper>
+      <el-card class="box-card">
+        <el-tabs tab-position="left" style="height: 100%;">
+          <el-tab-pane label="系统内置">
+            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+              <div class="test-form">
+                <parser :key="key2" :form-conf="formConf" @submit="sumbitForm2" />
+              </div>
+            </el-form>
+          </el-tab-pane>
+          <el-tab-pane label="其他">其他</el-tab-pane>
+        </el-tabs>
+
+      </el-card>
+    </template>
+  </BasicLayout>
+</template>
+
+<script>
+import { listConfig } from '@/api/admin/sys-config'
+import Parser from 'form-gen-parser'
+
+export default {
+  name: 'SysConfigSet',
+  components: {
+    Parser
+  },
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 参数表格数据
+      configList: [],
+      // 类型数据字典
+      typeOptions: [],
+      // 日期范围
+      dateRange: [],
+      // 查询参数
+      queryParams: {
+        pageIndex: 1,
+        pageSize: 10,
+        configName: undefined,
+        configKey: undefined,
+        configType: undefined,
+        createdAtOrder: 'desc'
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        configName: [{ required: true, message: '参数名称不能为空', trigger: 'blur' }],
+        configKey: [{ required: true, message: '参数键名不能为空', trigger: 'blur' }],
+        configValue: [{ required: true, message: '参数键值不能为空', trigger: 'blur' }],
+        isFrontend: [{ required: true, message: '是否前台显示不能为空', trigger: 'blur' }]
+      },
+      key2: +new Date(),
+      formConf: {
+        'fields': [{
+          '__config__': {
+            'label': '系统名称',
+            'labelWidth': null,
+            'showLabel': true,
+            'changeTag': true,
+            'tag': 'el-input',
+            'tagIcon': 'input',
+            'required': true,
+            'layout': 'colFormItem',
+            'span': 24,
+            'document': 'https://element.eleme.cn/#/zh-CN/component/input',
+            'regList': [],
+            'formId': 103,
+            'renderKey': 1621935615221
+          },
+          '__slot__': {
+            'prepend': '',
+            'append': ''
+          },
+          'placeholder': '请输入系统名称',
+          'style': {
+            'width': '100%'
+          },
+          'clearable': true,
+          'prefix-icon': '',
+          'suffix-icon': '',
+          'maxlength': null,
+          'show-word-limit': false,
+          'readonly': false,
+          'disabled': false,
+          '__vModel__': 'sys_app_name'
+        }, {
+          '__config__': {
+            'label': '系统logo',
+            'tag': 'el-upload',
+            'tagIcon': 'upload',
+            'layout': 'colFormItem',
+            'defaultValue': null,
+            'showLabel': true,
+            'labelWidth': null,
+            'required': true,
+            'span': 24,
+            'showTip': false,
+            'buttonText': '点击上传',
+            'regList': [],
+            'changeTag': true,
+            'fileSize': 2,
+            'sizeUnit': 'MB',
+            'document': 'https://element.eleme.cn/#/zh-CN/component/upload',
+            'formId': 102,
+            'renderKey': 1621935611177
+          },
+          '__slot__': {
+            'list-type': true
+          },
+          'action': 'http://localhost:8000/api/v1/public/uploadFile',
+          'disabled': false,
+          'accept': '',
+          'name': 'file',
+          'auto-upload': true,
+          'list-type': 'picture-card',
+          'multiple': false,
+          '__vModel__': 'sys_app_logo'
+        }, {
+          '__config__': {
+            'label': '初始密码',
+            'labelWidth': null,
+            'showLabel': true,
+            'changeTag': true,
+            'tag': 'el-input',
+            'tagIcon': 'input',
+            'required': true,
+            'layout': 'colFormItem',
+            'span': 24,
+            'document': 'https://element.eleme.cn/#/zh-CN/component/input',
+            'regList': [],
+            'formId': 101,
+            'renderKey': 1621935520984
+          },
+          '__slot__': {
+            'prepend': '',
+            'append': ''
+          },
+          'placeholder': '请输入初始密码',
+          'style': {
+            'width': '100%'
+          },
+          'clearable': true,
+          'prefix-icon': 'el-icon-key',
+          'suffix-icon': '',
+          'maxlength': null,
+          'show-word-limit': false,
+          'readonly': false,
+          'disabled': false,
+          '__vModel__': 'sys_user_initPassword'
+        }, {
+          '__config__': {
+            'label': '皮肤样式',
+            'showLabel': true,
+            'labelWidth': null,
+            'tag': 'el-select',
+            'tagIcon': 'select',
+            'layout': 'colFormItem',
+            'span': 24,
+            'required': true,
+            'regList': [],
+            'changeTag': true,
+            'document': 'https://element.eleme.cn/#/zh-CN/component/select',
+            'formId': 104,
+            'renderKey': 1621935674152
+          },
+          '__slot__': {
+            'options': [{
+              'label': '蓝色',
+              'value': 'skin-blue'
+            }, {
+              'label': '绿色',
+              'value': 'skin-green'
+            }, {
+              'label': '紫色',
+              'value': 'skin-purple'
+            }, {
+              'label': '红色',
+              'value': 'skin-red'
+            }, {
+              'label': '黄色',
+              'value': 'skin-yellow'
+            }]
+          },
+          'placeholder': '请选择皮肤样式',
+          'style': {
+            'width': '100%'
+          },
+          'clearable': true,
+          'disabled': false,
+          'filterable': false,
+          'multiple': false,
+          '__vModel__': 'sys_index_skinName'
+        }, {
+          '__config__': {
+            'label': '侧栏主题',
+            'showLabel': true,
+            'labelWidth': null,
+            'tag': 'el-select',
+            'tagIcon': 'select',
+            'layout': 'colFormItem',
+            'span': 24,
+            'required': true,
+            'regList': [],
+            'changeTag': true,
+            'document': 'https://element.eleme.cn/#/zh-CN/component/select',
+            'formId': 106,
+            'renderKey': 1621935704111
+          },
+          '__slot__': {
+            'options': [{
+              'label': '深色主题',
+              'value': 'theme-dark'
+            }, {
+              'label': '浅色主题',
+              'value': 'theme-light'
+            }]
+          },
+          'placeholder': '请选择侧栏主题',
+          'style': {
+            'width': '100%'
+          },
+          'clearable': true,
+          'disabled': false,
+          'filterable': false,
+          'multiple': false,
+          '__vModel__': 'sys_index_sideTheme'
+        }],
+        'formRef': 'elForm',
+        'formModel': 'formData',
+        'size': 'medium',
+        'labelPosition': 'right',
+        'labelWidth': 100,
+        'formRules': 'rules',
+        'gutter': 15,
+        'disabled': false,
+        'span': 24,
+        'formBtns': true
+      }
+
+    }
+  },
+  created() {
+    this.getList()
+    this.getDicts('sys_yes_no').then(response => {
+      this.typeOptions = response.data
+    })
+  },
+  mounted() {
+    // 表单数据回填，模拟异步请求场景
+    setTimeout(() => {
+      // 请求回来的表单数据
+      const data = {
+        mobile: '18836662555'
+      }
+      // 回填数据
+      this.fillFormData(this.formConf, data)
+      // 更新表单
+      this.key2 = +new Date()
+    }, 2000)
+  },
+  methods: {
+    /** 查询参数列表 */
+    getList() {
+      this.loading = true
+      listConfig(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
+        this.configList = response.data.list
+        this.total = response.data.count
+        this.loading = false
+      }
+      )
+    },
+    // 参数系统内置字典翻译
+    typeFormat(row, column) {
+      return this.selectDictLabel(this.typeOptions, row.configType)
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageIndex = 1
+      this.getList()
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.dateRange = []
+      this.resetForm('queryForm')
+      this.queryParams['createdAtOrderOrder'] = 'desc'
+      this.handleQuery()
+    },
+    fillFormData(form, data) {
+      form.fields.forEach(item => {
+        const val = data[item.__vModel__]
+        if (val) {
+          item.__config__.defaultValue = val
+        }
+      })
+    },
+    change() {
+      this.key2 = +new Date()
+      const t = this.formConf
+      this.formConf = this.formConf2
+      this.formConf2 = t
+    },
+    sumbitForm1(data) {
+      console.log('sumbitForm1提交数据：', data)
+    },
+    sumbitForm2(data) {
+      console.log('sumbitForm2提交数据：', data)
+    }
+  }
+}
+</script>