feat(xumu): 添加数据字典

project/xumu/AppDictionary/AppDictionary.vue

@@ -0,0 +1,32 @@
+<template>
+  <section class="AppDictionary">
+    <component :is="currentPage" v-bind="$props"/>
+  </section>
+</template>
+
+<script>
+import DictDetail from "./dictDetail";
+import DictList from "@project/xumu/AppDictionary/dictList.vue";
+
+export default {
+  name: "AppDictionary",
+  label: "数据字典",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  computed: {
+    currentPage() {
+      let {hash} = this.$route
+      return hash == "#add" ? DictDetail : DictList
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.AppDictionary {
+  height: 100%;
+}
+</style>

project/xumu/AppDictionary/dictDetail.vue

@@ -0,0 +1,202 @@
+<template>
+  <section class="dictDetail">
+    <ai-detail>
+      <ai-title slot="title" title="字典信息" isShowBottomBorder isShowBack @onBackClick="$router.push({})"/>
+      <template #content>
+        <ai-card title="基本信息">
+          <template #content>
+            <el-form ref="dictDetailForm" :model="form" :rules="rules" size="small" label-width="110px">
+              <el-form-item required label="数据项：" prop="code">
+                <el-input v-model="form.code" style="width: 259px;" clearable
+                          placeholder="请输入..."/>
+              </el-form-item>
+              <el-form-item required label="数据项名称：" prop="name">
+                <el-input v-model="form.name" style="width: 259px;" clearable
+                          placeholder="请输入..."/>
+              </el-form-item>
+            </el-form>
+          </template>
+        </ai-card>
+        <ai-card title="数据值" v-if="$route.query.id">
+          <template #right>
+            <el-button type="text" icon="iconfont iconAdd"
+                       @click="form.dictionaryDetails.push({name:'',value:'',editable:true})"> 添加
+            </el-button>
+          </template>
+          <template #content>
+            <el-table border :data="form.dictionaryDetails" header-cell-class-name="table-header"
+                      cell-class-name="table-cell">
+              <el-table-column align="center" label="值">
+                <div slot-scope="{row}">
+                  <el-input size="small" v-if="row.editable" v-model="row.value" clearable/>
+                  <span v-else>{{ row.dictValue }}</span>
+                </div>
+              </el-table-column>
+              <el-table-column align="center" label="描述">
+                <div slot-scope="{row}">
+                  <el-input size="small" v-if="row.editable" v-model="row.name" clearable/>
+                  <span v-else>{{ row.dictName }}</span>
+                </div>
+              </el-table-column>
+              <el-table-column align="center" label="颜色">
+                <div slot-scope="{row}">
+                  <el-color-picker v-if="row.editable" v-model="row.dictColor" size="medium"></el-color-picker>
+                  <span v-else>{{ row.dictColor || '未设置' }}</span>
+                </div>
+              </el-table-column>
+              <el-table-column align="center" label="操作" width="109px">
+                <div slot-scope="{row,$index}">
+                  <section v-if="row.editable">
+                    <el-button style="color: #2EA222" type="text" icon="iconfont iconCorrect"
+                               @click="addDict(row)"/>
+                    <el-button style="color: #f46" type="text" icon="iconfont iconClean"
+                               @click="cancelEdit(row,$index)"/>
+                  </section>
+                  <section v-else>
+                    <el-button class="dict-detail-operation" type="text" icon="iconfont iconEdit"
+                               @click="editDetail(row)"/>
+                    <el-button class="dict-detail-operation" type="text" icon="iconfont iconDelete"
+                               @click="delDictValue(row.id)"/>
+                  </section>
+
+                </div>
+              </el-table-column>
+            </el-table>
+          </template>
+        </ai-card>
+      </template>
+      <template #footer>
+        <el-button @click="$router.push({})">返回</el-button>
+        <el-button type="primary" @click="modifyDict">保存</el-button>
+      </template>
+    </ai-detail>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "dictDetail",
+  props: {
+    instance: Function,
+    permissions: Function
+  },
+  computed: {
+    rules() {
+      return {
+        code: [
+          {required: true, message: "请填写数据项"}
+        ],
+        name: [
+          {required: true, message: "请填写数据项名称"}
+        ],
+        // dictionaryDetails: [
+        //   {
+        //     validator: (r, v, cb) => {
+        //       if (v.every(item => item.dictName && item.dictValue)) {
+        //         cb()
+        //       }
+        //     }
+        //   }
+        // ]
+      }
+    }
+  },
+  data() {
+    return {
+      form: {
+        code: "",
+        name: "",
+        dictionaryDetails: []
+      },
+    }
+  },
+  created() {
+    if (this.$route.query.id) this.getDict()
+  },
+  methods: {
+    getDict() {
+      this.instance.post("/admin/dictionary/queryDictDetail", null, {
+        params: {dictionaryId: this.$route.query.id}
+      }).then(res => {
+        if (res?.data) {
+          res.data.dictionaryDetails = res.data.dictionaryDetails.map(d => {
+            return {
+              ...d,
+              editable: false,
+              name: "",
+              value: ""
+            }
+          })
+          this.form = res.data
+        }
+      })
+    },
+    delDictValue(id) {
+      this.$confirm("是否要删除该字典值", {
+        type: 'error'
+      }).then(() => {
+        this.instance.post("/admin/dictionary/deletevalue", null, {
+          params: {id}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.$message.success("删除成功!")
+            this.getDict()
+          }
+        })
+      }).catch(() => 0)
+    },
+    editDetail(row) {
+      row.editable = true
+      row.name = row.dictName
+      row.value = row.dictValue
+    },
+    addDict(row) {
+      row.dictValue = row.value
+      row.dictName = row.name
+      row.dictionaryId = this.form.id
+      this.instance.post("/admin/dictionary/updateDetail", row).then(res => {
+        row.editable = false
+        row = res.data.data
+        this.$message.success("提交成功!")
+      })
+    },
+    cancelEdit(row, index) {
+      if (row.id) {
+        row.editable = false
+      } else {
+        this.form.dictionaryDetails.splice(index, 1)
+      }
+    },
+    modifyDict() {
+      this.$refs.dictDetailForm.validate(v => {
+        if (v) {
+          this.instance.post("/admin/dictionary/updateDict", this.form).then(res => {
+            if (res?.code == 0) {
+              this.$message.success("提交成功!")
+              this.$router.push({})
+            }
+          })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.dictDetail {
+  height: 100%;
+
+  :deep( .el-table__row ){
+
+    .el-input__inner {
+      padding: 0 30px;
+      border: none;
+      text-align: center;
+      background: #ddd;
+      font-size: 14px;
+    }
+  }
+
+}
+</style>

project/xumu/AppDictionary/dictList.vue

@@ -0,0 +1,142 @@
+<script>
+const columns = [
+  {slot: "expand"},
+  {label: "数据项", prop: "code"},
+  {label: "数据项名称", prop: "name"},
+]
+export default {
+  name: "dictList",
+  props: {
+    instance: Function,
+    dict: Object,
+    permissions: Function
+  },
+  data() {
+    return {
+      columns,
+      page: {
+        current: 1,
+        total: 0,
+        size: 10
+      },
+      search: {
+        condition: ""
+      },
+      dictList: [],
+      id: ''
+    }
+  },
+  methods: {
+    resetSearch() {
+      this.page.current = 1;
+      this.search.condition = '';
+      this.getDicts();
+    },
+    getDicts() {
+      this.instance.post("/admin/dictionary/queryDictList", null, {
+        params: {
+          ...this.page,
+          name: this.search.condition
+        }
+      }).then(res => {
+        this.dictList = res.data.records.map(e => {
+          return {...e, detail: []}
+        })
+        this.page.total = res.data.total
+      })
+    },
+    addDict() {
+      this.$router.push({hash: "#add"})
+    },
+    handleDelete(id) {
+      this.$confirm("确定要删除该数据项吗？", {
+        type: "error"
+      }).then(() => {
+        this.instance.post("/admin/dictionary/deleteDict", null, {
+          params: {id}
+        }).then(res => {
+          if (res?.code == 0) {
+            this.getDicts();
+            this.$message.success("删除成功!")
+          }
+        })
+      }).catch(() => 0)
+    },
+    openDetail(id) {
+      this.$router.push({query: {id}, hash: "#add"})
+    },
+    handleSizeChange(val) {
+      this.page.size = val;
+      this.getDicts();
+    },
+    getDictInfo(row) {
+      if (row.detail.length) {
+        row.detail = []
+      } else {
+        this.getDict(row.id).then(res => {
+          if (res && res.data) {
+            row.detail = res.data.dictionaryDetails || []
+          }
+        })
+      }
+    },
+    getDict(dictionaryId) {
+      return this.instance.post("/admin/dictionary/queryDictDetail", null, {
+        params: {dictionaryId}
+      })
+    },
+  },
+  created() {
+    this.getDicts()
+  },
+}
+</script>
+<template>
+  <section class="dictList">
+    <ai-list>
+      <ai-title slot="title" title="数据字典" isShowBottomBorder/>
+      <template #content>
+        <ai-search-bar>
+          <template #left>
+            <el-button type="primary" size="small" icon="iconfont iconAdd" @click="addDict"
+                       v-if="$permissions('admin_sysdictionary_add')">添加
+            </el-button>
+          </template>
+          <template #right>
+            <el-input size="small" v-model="search.condition" placeholder="数据项" clearable
+                      @change="page.current=1,getDicts()" prefix-icon="iconfont iconSearch"/>
+            <el-button type="primary" size="small" icon="iconfont iconSearch"
+                       @click="page.current=1,getDicts()">查询
+            </el-button>
+            <el-button size="small" icon="el-icon-refresh-right" @click="resetSearch">重置</el-button>
+          </template>
+        </ai-search-bar>
+        <ai-table :tableData="dictList" :colConfigs="columns" :dict="dict" @getList="getDicts"
+                  :total="page.total" :current.sync="page.current" :size.sync="page.size" :page-sizes="[10, 20, 50, 100,200]"
+                  @expand-change="getDictInfo">
+          <el-table-column slot="expand" type="expand">
+            <template slot-scope="{row}">
+              <div class="flex" style="gap:4px">
+                <el-tag v-for="(op,i) in row.detail||[]" :key="i">{{ [op.dictValue, op.dictName, op.dictColor].filter(Boolean).join("｜") }}</el-tag>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column slot="options" label="操作" fixed="right" align="center">
+            <template slot-scope="{row}">
+              <div class="table-options">
+                <el-button type="text" @click="openDetail(row.id)" v-if="$permissions('admin_sysdictionary_edit')">编辑</el-button>
+                <el-button type="text" @click="handleDelete(row.id)" v-if="$permissions('admin_sysdictionary_del')">删除</el-button>
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </template>
+    </ai-list>
+  </section>
+</template>
+
+<style scoped lang="scss">
+.dictList {
+  height: 100%;
+}
+</style>