feat: 字典管理

public/index.html

@@ -27,5 +27,6 @@
     <script src="//web-1251519181.file.myqcloud.com/lib-4.0/vuex/3.0.1/vuex.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/lib-4.0/axios/0.19.0/axios.min.js"></script>
     <script src="//web-1251519181.file.myqcloud.com/components/layout.1.2.46.js"></script>
+    <script src="//web-1251519181.file.myqcloud.com/components/editor.1.1.11.js"></script>
   </body>
 </html>

src/api/dictionary.js

+import getFetch from './get-fetch';
+
+let api = {
+  getDictList: '/dict-list', // 字典-字典列表
+  saveDict: '/save-dict', // 字典-新增(保存)字典
+  delDict: '/del-dict', // 字典-删除字典
+  dictDetail: '/dict-detail', // 字典-字典详情
+};
+
+api = getFetch(api, '/hb-manage-web');
+
+export default api;

src/router/routes.js

@@ -16,44 +16,54 @@ export const routes = [
     children: [
       {
         path: '/enterprise-list',
-        name: '企业管理',
+        meta: { name: '企业管理' },
         component: () => import('@/views/enterprise/enterprise-list.vue')
       },
       {
         path: '/enterprise-detail',
-        name: '企业详情',
+        meta: { name: '企业详情' },
         component: () => import('@/views/enterprise/enterprise-detail.vue')
       },
       {
         path: '/menu-config',
-        name: '菜单配置',
+        meta: { name: '菜单配置' },
         component: () => import('@/views/permission/menu-config.vue')
       },
       {
         path: '/permission-list',
-        name: '权限项列表',
+        meta: { name: '权限项列表' },
         component: () => import('@/views/permission/permission-list.vue')
       },
       {
         path: '/operation-list',
-        name: '操作项列表',
+        meta: { name: '操作项列表' },
         component: () => import('@/views/permission/operation-list.vue')
+      },
+      {
+        path: '/dictionary-list',
+        meta: { name: '字典管理' },
+        component: () => import('@/views/dictionary/dictionary-list.vue')
+      },
+      {
+        path: '/create-dictionary',
+        meta: { name: '新建、编辑字典' },
+        component: () => import('@/views/dictionary/create-dictionary.vue')
       }
     ]
   },
   {
     path: '/403',
-    name: '无权访问',
+    meta: { name: '无权访问' },
     component: () => import('@/views/error-page/index.vue')
   },
   {
     path: '/404',
-    name: 'error404',
+    meta: { name: 'error404' },
     component: () => import('@/views/error-page/index.vue')
   },
   {
     path: '/500',
-    name: 'error500',
+    meta: { name: 'error500' },
     component: () => import('@/views/error-page/index.vue')
   },
   {

src/views/dictionary/create-dictionary.vue

+<template>
+  <el-form :model="dictData" :rules="dictRule" ref="dictData" label-width="165px" style="padding-top: 20px">
+    <el-form-item label="字典名称" prop="dictName">
+      <el-input placeholder="请输入内容" v-model.trim="dictData.dictName" maxlength="20" show-word-limit style="width: 400px"></el-input>
+    </el-form-item>
+    <el-form-item label="key" prop="dictKey">
+      <el-input placeholder="请输入内容" v-model.trim="dictData.dictKey" maxlength="50" show-word-limit style="width: 400px"></el-input>
+    </el-form-item>
+    <el-form-item label="字段描述">
+      <el-input placeholder="请输入内容" type="textarea" v-model.trim="dictData.dictDesc" maxlength="50" rows="4" show-word-limit style="width: 400px"></el-input>
+    </el-form-item>
+    <el-form-item label="内容" prop="dictContent">
+      <dm-editor :value="dictData.dictContent" width="575px" height="326px" @change="val => dictData.dictContent = val"></dm-editor>
+    </el-form-item>
+    <el-form-item style="margin-top: 50px">
+      <el-button type="primary" :loading="loading" @click="onSave">{{ dictData.dictId ? '保存' : '确认新建' }}</el-button>
+    </el-form-item>
+  </el-form>
+</template>
+
+<script>
+import fetch from '@/api/dictionary';
+
+const { saveDict, dictDetail } = fetch;
+export default {
+  name: 'CreateDictionary',
+  data() {
+    return {
+      bread: [ { name: '业务字典', path: '/dictionary-list' } ],
+      loading: false,
+      dictData: {
+        dictName: '',
+        dictKey: '',
+        dictDesc: '',
+        dictContent: '',
+        dictId: ''
+      },
+      dictRule: {
+        dictName: [ { required: true, message: '请输入字典名称', trigger: 'blur' } ],
+        dictKey: [ { required: true, message: '请输入字典key', trigger: 'blur' } ],
+        dictContent: [ { required: true, message: '请输入内容', trigger: 'blur' } ],
+      }
+    };
+  },
+  mounted() {
+    const dictId = this.$route.query.dictId;
+    if (dictId) {
+      this.getDictDetail(dictId);
+      this.bread.push({ name: '编辑字典' });;
+    } else {
+      this.bread.push({ name: '新建字典' });;
+    }
+    this.$emit('updateBread', this.bread);
+  },
+  methods: {
+    // 编辑字典时获取字典数据
+    getDictDetail(dictId) {
+      dictDetail({ dictId }).then(res => {
+        const { dictName, dictKey, dictDesc, dictContent, dictId } = res.result;
+        Object.assign(this.dictData, { dictName, dictKey, dictDesc, dictContent, dictId });
+      });
+    },
+    // 新建、编辑字典 保存
+    onSave() {
+      this.$refs.dictData.validate(vali => {
+        if (!vali) return;
+        const { dictName, dictKey, dictDesc, dictContent, dictId } = this.dictData;
+        const params = { dictName, dictKey, dictDesc, dictContent };
+        this.loading = true;
+        if (dictId) {
+          Object.assign(params, { dictId });
+        }
+        saveDict(params).then(res => {
+          this.$message.success(dictId ? '保存成功！' : '新建成功！' );
+          this.$router.go(-1);
+        }).finally(() => this.loading = false);
+      });
+    }
+  }
+};
+</script>

src/views/dictionary/dictionary-list.vue

+<template>
+  <div style="padding: 20px">
+    <div class="dirction-header">
+      <el-alert type="info" :closable="false" style="width: 332px" show-icon title="用于好办小程序业务字典提示编辑"></el-alert>
+      <el-button type="primary" @click="toCreate">新建字典</el-button>
+    </div>
+    <el-table :data="dictionaryList">
+      <el-table-column label="字典名称" prop="dictName" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="key" prop="dictKey" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="最近编辑时间">
+        <div slot-scope="{ row }" style="line-height: normal">
+          <p>{{ row.updateTime | timeStampToYmd }}</p>
+          <p>{{ row.updateTime | timeStampToHms }}</p>
+        </div>
+      </el-table-column>
+      <el-table-column label="最近编辑人" prop="staffName" :formatter="(row, col, val) => val || '--'"></el-table-column>
+      <el-table-column label="操作">
+        <template slot-scope="{ row }">
+          <el-button type="text" @click="toCreate(row)">编辑</el-button>
+          <el-button type="text" :loading="row.loading" @click="onDelDict(row)">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      v-if="pager.total > 0"
+      background
+      style="text-align: right"
+      layout="total,sizes,prev,pager,next"
+      :total="pager.total"
+      :page-sizes="pager.pageSizes"
+      :page-size="pager.pageSize"
+      :current-page="pager.currentPage"
+      @current-change="onCurrentChange"
+      @size-change="onSizeChange"></el-pagination>
+  </div>
+</template>
+
+<script>
+import fetch from '@/api/dictionary';
+
+const { getDictList, delDict } = fetch;
+
+export default {
+  name: 'DictionaryList',
+  data() {
+    return {
+      pager: {
+        total: 0,
+        pageSizes: [ 20, 40, 60, 80 ],
+        pageSize: 20,
+        currentPage: 1
+      },
+      dictionaryList: []
+    };
+  },
+  created() {
+    // this.getDictionaryList();
+  },
+  methods: {
+    // 获取字典列表
+    getDictionaryList() {
+      const { pageSize, currentPage } = this.pager;
+      getDictList({ pageNum: currentPage, pageSize }).then(res => {
+        const { totalCount, result } = res.result || {};
+        this.pager.total = totalCount || 0;
+        this.dictionaryList = result || [];
+      });
+    },
+    onCurrentChange(currentPage) {
+      this.pager.currentPage = currentPage;
+      this.getDictionaryList();
+    },
+    onSizeChange(pageSize) {
+      this.pager.pageSize = pageSize;
+      this.onCurrentChange(1);
+    },
+    // 跳转到新建、编辑字典页
+    toCreate(dictData) {
+      const { dictId } = dictData || {};
+      const url = '/create-dictionary';
+      this.$router.push(dictId ? `${url}?dictId=${dictId}` : url);
+    },
+    // 删除字典
+    onDelDict(dictData) {
+      const { dictId, dictName } = dictData || {};
+      this.$confirm(`确定删除【 ${dictName} 】吗？`, '提示', { type: 'warning' }).then(() => {
+        this.$set(dictData, 'loading', true);
+        delDict({ dictId }).then(res => {
+          this.$message.success('删除成功！');
+          if (this.pager.currentPage > 1 && this.dictionaryList.length == 1) {
+            this.pager.currentPage--;
+          }
+          this.getDictionaryList();
+        }).finally(() => dictData.loading = false);
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.dirction-header {
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+</style>