添加字典表

src/plugins/components.js

@@ -3,6 +3,7 @@ import animates from '@f/components/animates.vue';
 import filterPageTable from '@f/components/filter-page-table.vue';
 import form from '@f/components/form.vue';
 import pagination from '@f/components/pagination.vue';
+import alert from '@f/components/alert.vue';
 
 const components = {
   install: (Vue, options) => {
@@ -10,6 +11,7 @@ const components = {
     Vue.component('DataTable', filterPageTable);
     Vue.component('DataForm', form);
     Vue.component('Pagination', pagination);
+    Vue.component('Alert', alert);
   },
 };
 Vue.use(components);

src/store/index.js

@@ -7,6 +7,7 @@ import menu from '@f/store/auth/menu';
 import role from '@f/store/auth/role';
 import userMenu from '@f/store/auth/userMenu';
 import login from '@f/store/auth/login';
+import dictionary from '@f/store/system/dictionary';
 import util from '@f/store/util';
 import { menuParams, setMenuParams } from '@f/store/auth/menuParams';
 
@@ -23,5 +24,6 @@ export default new Vuex.Store({
     menu,
     role,
     userMenu,
+    dictionary,
   },
 });

src/views/system/dictionary.vue

@@ -1,5 +1,6 @@
 <template>
   <div id="dictionary">
+    <alert :content="alertInfo"></alert>
     <el-row type="flex" justify="end" align="middle" class="btn_bar">
       <el-col :span="2">
         <el-button type="primary" @click="toAppend(null, 'main')">添加主字典目录</el-button>
@@ -13,13 +14,13 @@
       <el-table-column align="center" label="操作">
         <template v-slot="{ row }">
           <el-row :gutter="10" type="flex">
-            <el-col :span="8">
+            <el-col :span="8" v-if="canOpera(row)">
               <el-link align="center" size="mini" type="primary" @click="toAppend(row, 'update')">修改</el-link>
             </el-col>
             <el-col :span="8">
               <el-link align="center" size="mini" type="success" @click="toAppend(row, 'append')">添加子项</el-link>
             </el-col>
-            <el-col :span="8">
+            <el-col :span="8" v-if="canOpera(row)">
               <el-link align="center" size="mini" type="danger" @click="toRemove(row)">删除</el-link>
             </el-col>
           </el-row>
@@ -33,21 +34,25 @@
         </el-form-item>
         <el-form-item label="字典代码" prop="categroy" required>
           <el-select v-model="form.categroy" filterable allow-create default-first-option>
-            <el-option v-for="(i, index) in categroyList" :key="`main-${index}`" :label="i.label" :value="i.label"></el-option>
+            <el-option v-for="(i, index) in categroyList" :key="`main-${index}`" :label="i" :value="i"></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="显示内容" required prop="label">
+        <el-form-item label="显示内容" prop="label">
           <el-input v-model="form.label"></el-input>
         </el-form-item>
-        <el-form-item label="存储内容" required prop="value">
-          <el-input v-model="form.value"></el-input>
-        </el-form-item>
+        <el-form-item label="存储内容" prop="value"> <el-input v-model="form.value"></el-input> </el-form-item>
         <el-form-item label="是否使用" v-if="form.id">
           <el-radio-group v-model="form.status">
             <el-radio label="使用"></el-radio>
             <el-radio label="禁用"></el-radio>
           </el-radio-group>
         </el-form-item>
+        <el-form-item label="只在开发模式允许操作" v-if="devMode">
+          <el-radio-group v-model="form.dstatus">
+            <el-radio :label="true">是</el-radio>
+            <el-radio :label="false">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
         <el-form-item>
           <el-button type="primary" @click="toSave">保存</el-button>
         </el-form-item>
@@ -60,12 +65,17 @@
 const _ = require('lodash');
 import cardRL from '@f/layouts/cardRL.vue';
 import { mapState, createNamespacedHelpers } from 'vuex';
+const { mapActions: dictionary } = createNamespacedHelpers('dictionary');
 export default {
   name: 'dictionary',
   props: {},
   components: {}, //cardRL
   data: function() {
     return {
+      alertInfo: [
+        '1.主目录的字典代码不要<span style="color:red">轻易</span>进行变更,会导致该目录无法正常查询',
+        '2.新添加主目录需要联系开发人员,并告知在何处使用该目录',
+      ],
       dialog: false,
       defaultProps: { children: 'children', hasChildren: 'hasChildren' },
       list: [],
@@ -73,18 +83,19 @@ export default {
       form: {},
       rules: {
         categroy: [{ required: true, message: '字典代码不能为空', trigger: 'blur' }],
-        label: [{ required: true, message: '显示内容不能为空', trigger: 'blur' }],
-        value: [{ required: true, message: '存储内容不能为空', trigger: 'blur' }],
       },
     };
   },
   created() {
     this.initForm();
+    this.search();
   },
   methods: {
+    ...dictionary(['query', 'tree', 'create', 'update', 'delete']),
     async search() {
-      const res = await this.query();
+      const res = await this.tree();
       if (this.$checkRes(res)) {
+        console.log(res);
         this.$set(this, `list`, res);
         this.initCateList();
       }
@@ -110,7 +121,7 @@ export default {
       let obj = { status: '使用', id: new Date().getTime() };
       if (type === 'append') {
         obj.pid = data.id;
-        obj.plabel = data.label || data.value;
+        obj.pname = `${data.categroy || ''}  ${data.label || data.value || ''}`;
       } else if (type == 'update') {
         obj = _.cloneDeep(data);
       }
@@ -144,12 +155,23 @@ export default {
       this.dialog = false;
       this.form = {};
     },
+    // 删除,修改功能判断当前环境与设置是否允许使用
+    canOpera(data) {
+      if (this.devMode) return true;
+      else {
+        const { dstatus } = data;
+        return !dstatus;
+      }
+    },
   },
   computed: {
     ...mapState(['user']),
     pageTitle() {
       return `${this.$route.meta.title}`;
     },
+    devMode() {
+      return process.env.NODE_ENV === 'development';
+    },
   },
   metaInfo() {
     return { title: this.$route.meta.title };