feat: 对接字典数据

src/views/setting/dataDictionary/addDataDictionary.vue

@@ -0,0 +1,173 @@
+<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="请选择" filterable 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" filterable 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="请选择" filterable 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/dataDictionary.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/index.vue

@@ -0,0 +1,123 @@
+<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 './addDataDictionary.vue'
+import { getDataDictionaryExport, getDataDictionary, delDataDictionary } from '@/api/dataDictionary.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>