feat: 添加数据字典维护 / 修改操作记录查询全局封装

src/api/dataDictionary2.js

@@ -0,0 +1,65 @@
+import request, { postBlob } from '@/utils/request'
+
+export function getDataDictionary(data) {
+  return request({
+    url: `/dict/page?moduleId=${data.moduleId}`,
+    method: 'post',
+    data
+  })
+}
+
+export function getDataDictionaryExport(data, name) {
+  return postBlob({
+    url: '/dict/page/export',
+    data,
+    name
+  })
+}
+
+export function addDataDictionary(data) {
+  return request({
+    url: `/dict/add`,
+    method: 'post',
+    data
+  })
+}
+
+export function updateDataDictionary(data) {
+  return request({
+    url: `/dict/update`,
+    method: 'post',
+    data
+  })
+}
+
+export function delDataDictionary(params) {
+  return request({
+    url: `/dict/del`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictDetail(params) {
+  return request({
+    url: `/dict/detail`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictListDict(params) {
+  return request({
+    url: `/dict/listDict`,
+    method: 'post',
+    params
+  })
+}
+
+export function dictTypeList(data) {
+  return request({
+    url: `/dict/type/list`,
+    method: 'post',
+    data
+  })
+}

src/components/template/template-page-1.vue

@@ -10,8 +10,8 @@
       :columnParsing="columnParsing"
       :reduction="reduction"
       :plan="[...defaultPlan, ...morePlan]"
-      :operation="caozuojl"
-      :operationColumnWidth="operationColumnWidth + 50"
+      :operation="operationShow ? caozuojl : operation"
+      :operationColumnWidth="(operation ? operationColumnWidth : 0) + (operationShow ? 70 : 0)"
       :showTable="showTable"
       :codeGather="codeGather"
       :loading="loading"
@@ -69,28 +69,40 @@ export default {
     exportList: {
       type: Function
     },
+    // 更多方案
     morePlan: {
       type: Array,
       default: () => []
     },
+    // 操作按钮
     operation: {
       type: Function
     },
+    // 是否显示操作记录
+    operationShow: {
+      type: Boolean,
+      default: true
+    },
+    // 获取操作记录的主键字段
     operationRecordkey: {
       type: String,
       default: 'id'
     },
-    cstomClumn: {
-      type: Function
-    },
+    // 操作按钮单元格宽度
     operationColumnWidth: {
       type: Number,
       default: 140
     },
+    // 自定义列
+    cstomClumn: {
+      type: Function
+    },
+    // 菜单名称
     customModuleName: {
       type: String,
       default: ''
     },
+    // 默认方案
     defaultPlan: {
       type: Array,
       default: () => [
@@ -157,7 +169,7 @@ export default {
           >
             操作记录
           </el-button>
-          {this.operation(h, { row, index, column })}
+          {this.operation ? this.operation(h, { row, index, column }) : null}
         </div>
       )
     },

src/views/setting/components/addDataDictionary.vue

@@ -0,0 +1,205 @@
+<template>
+  <el-dialog
+    title="数据字典"
+    :visible.sync="dialogVisible"
+    width="460px"
+    :before-close="handleClose"
+    :destroy-on-close="true"
+  >
+    <el-form
+      v-if="visible"
+      size="mini"
+      :model="ruleForm"
+      :rules="rules"
+      ref="ruleForm"
+      label-width="100px"
+      class="demo-ruleForm"
+    >
+      <el-form-item label="父字典类型" prop="parentDictType">
+        <el-select v-model="ruleForm.parentDictType" placeholder="请选择" style="width: 100%" @change="updatedata">
+          <el-option
+            v-for="(item, index) in typeList"
+            :key="index"
+            :label="item.remark"
+            :value="item.dictType"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="父字典值" prop="parentDictCode">
+        <el-select v-model="ruleForm.parentDictCode" placeholder="请选择" style="width: 100%">
+          <el-option
+            v-for="(item, index) in parentDict"
+            :key="index"
+            :label="item.dictValue"
+            :value="item.dictCode"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="父字典编码" prop="parentDictCode">
+        <el-input
+          :disabled="true"
+          :value="
+            ruleForm.parentDictCode
+              ? (parentDict.find(item => item.dictCode === ruleForm.parentDictCode) || {}).dictCode
+              : ''
+          "
+        ></el-input>
+      </el-form-item>
+      <el-form-item label="字典类型" prop="dictType">
+        <el-select v-model="ruleForm.dictType" placeholder="请选择" style="width: 100%">
+          <el-option
+            v-for="(item, index) in typeList"
+            :key="index"
+            :label="item.remark"
+            :value="item.dictType"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="字典值" prop="dictValue">
+        <el-input v-model="ruleForm.dictValue"></el-input>
+      </el-form-item>
+      <el-form-item label="字典编码" prop="dictCode">
+        <el-input v-model="ruleForm.dictCode"></el-input>
+      </el-form-item>
+      <el-form-item label="排序">
+        <el-input v-model="ruleForm.sortNum"></el-input>
+      </el-form-item>
+      <el-form-item label="说明">
+        <el-input v-model="ruleForm.remark"></el-input>
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-switch
+          v-model="ruleForm.status"
+          active-value="ON"
+          inactive-value="OFF"
+          active-color="#13ce66"
+          inactive-color="#ff4949"
+        >
+        </el-switch>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="mini" type="primary" @click="submitForm('ruleForm')">确定</el-button>
+        <el-button size="mini" @click="resetForm('ruleForm')">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script>
+import {
+  dictTypeList,
+  dictDetail,
+  addDataDictionary,
+  updateDataDictionary,
+  dictListDict
+} from '@/api/dataDictionary2.js'
+export default {
+  props: {
+    item: {
+      type: Object,
+      default: null
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogVisible: this.visible,
+      typeList: [],
+      parentDict: [],
+      ruleForm: {
+        dictValue: '',
+        dictCode: '',
+        dictType: '',
+        parentDictCode: '',
+        parentDictType: '',
+        sortNum: '',
+        remark: '',
+        status: 'ON'
+      },
+      rules: {
+        dictValue: [{ required: true, message: '必填', trigger: 'blur' }],
+        dictCode: [{ required: true, message: '必填', trigger: 'blur' }],
+        dictType: [{ required: true, message: '必填', trigger: 'blur' }],
+        status: [{ required: true, message: '必填', trigger: 'blur' }]
+      }
+    }
+  },
+  watch: {
+    item() {
+      if (this.item !== null) {
+        dictDetail({ id: this.item.sysDictId }).then(res => {
+          for (var key in this.ruleForm) {
+            this.ruleForm[key] = res.data[key]
+            if (key === 'parentDictType' && res.data[key]) {
+              this.updatedata('nolo')
+            }
+          }
+        })
+      }
+    },
+    visible() {
+      if (this.visible) {
+        dictTypeList().then(res => {
+          this.typeList = res.data
+        })
+      }
+      this.dialogVisible = this.visible
+    },
+    dialogVisible() {
+      this.$emit('setVisible', this.dialogVisible)
+      if (!this.dialogVisible) {
+        this.$nextTick(() => {
+          Object.assign(this.$data, this.$options.data())
+        })
+      }
+    }
+  },
+  methods: {
+    updatedata(type) {
+      if (type !== 'nolo') {
+        this.ruleForm.parentDictCode = ''
+      }
+      if (this.ruleForm.parentDictType) {
+        dictListDict({ dictType: this.ruleForm.parentDictType }).then(res => {
+          this.parentDict = res.data
+        })
+      }
+    },
+    handleClose(done) {
+      done()
+    },
+    submitForm(formName) {
+      this.$refs[formName].validate(valid => {
+        if (valid) {
+          ;[addDataDictionary, updateDataDictionary]
+            [this.item ? 1 : 0]({
+              ...this.ruleForm,
+              sysDictId: this.item ? this.item.sysDictId : undefined
+            })
+            .then(res => {
+              this.$emit('success')
+              this.$message({
+                type: 'success',
+                message: `保存成功!`
+              })
+              this.dialogVisible = false
+            })
+            .catch(err => {
+              console.log(err)
+            })
+        } else {
+          return false
+        }
+      })
+    },
+    resetForm(formName) {
+      this.dialogVisible = false
+    }
+  }
+}
+</script>
+
+<style></style>

src/views/setting/dataDictionary.vue

@@ -0,0 +1,138 @@
+<template>
+  <!-- :exportList="exportList" -->
+  <template-page
+    ref="pageRef"
+    :getList="getList"
+    :columnParsing="columnParsing"
+    :optionsEvensGroup="optionsEvensGroup"
+    :tableAttributes="tableAttributes"
+    :tableEvents="tableEvents"
+    :operationColumnWidth="200"
+    :operation="operation()"
+  >
+    <AddDataDictionary
+      :visible="visible"
+      :item="item"
+      @setVisible="
+        bool => {
+          visible = bool
+          if (!bool && item) {
+            item = null
+          }
+        }
+      "
+      @success="
+        () => {
+          $refs.pageRef.refreshList()
+        }
+      "
+    />
+  </template-page>
+</template>
+
+<script>
+import TemplatePage from '@/components/template/template-page-1.vue'
+import AddDataDictionary from './components/addDataDictionary.vue'
+import { getDataDictionaryExport, getDataDictionary, delDataDictionary } from '@/api/dataDictionary2.js'
+export default {
+  components: {
+    TemplatePage,
+    AddDataDictionary
+  },
+  data() {
+    return {
+      // 事件组合
+      optionsEvensGroup: [
+        [
+          [
+            {
+              name: '新增',
+              click: () => {
+                this.visible = true
+              }
+            }
+          ]
+        ]
+      ],
+      // 表格属性
+      tableAttributes: {},
+      // 表格事件
+      tableEvents: {},
+      visible: false,
+      item: null
+    }
+  },
+  methods: {
+    // 列表请求函数
+    getList: getDataDictionary,
+    // 列表导出函数
+    exportList: getDataDictionaryExport,
+    // 表格列解析渲染数据更改
+    columnParsing(item, defaultData) {
+      return defaultData
+    },
+    operation() {
+      if (true) {
+        return (h, { row, index, column }) => {
+          return (
+            <div class="operation-btns">
+              {true ? (
+                <zj-button
+                  useLoading={false}
+                  parameter={[row]}
+                  buttonAttributes={{
+                    size: 'mini',
+                    type: 'primary'
+                  }}
+                  buttonEvents={{
+                    click: (...p) => {
+                      var [row] = p
+                      this.item = row
+                      this.visible = true
+                    }
+                  }}
+                >
+                  编辑
+                </zj-button>
+              ) : null}
+              {true ? (
+                <el-popconfirm
+                  icon="el-icon-info"
+                  icon-color="red"
+                  title="这是一段内容确定删除吗？"
+                  onConfirm={() => {
+                    delDataDictionary({ id: row.sysDictId })
+                      .then(res => {
+                        this.$refs.pageRef.refreshList()
+                        this.$message({
+                          type: 'success',
+                          message: `删除成功!`
+                        })
+                      })
+                      .catch(err => {
+                        console.log(err)
+                      })
+                  }}
+                >
+                  <zj-button
+                    slot="reference"
+                    buttonAttributes={{
+                      size: 'mini',
+                      type: 'danger'
+                    }}
+                  >
+                    删除
+                  </zj-button>
+                </el-popconfirm>
+              ) : null}
+            </div>
+          )
+        }
+      }
+      return undefined
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped></style>