feat: #修正

src/containers/issueType/IssueTypeSelect.vue

@@ -1,54 +1,86 @@
 <template>
-  <el-select v-model="value" :clearable="true" placeholder="请选择分类">
-    <el-option
-      v-for="item in options"
-      :key="item.value"
-      :label="item.label"
-      :value="item.value"
-    >
-    </el-option>
-  </el-select>
+  <el-cascader
+    :value="vModel"
+    :options="options"
+    :clearable="true"
+    :show-all-levels="false"
+    @change="onChange"
+  ></el-cascader>
 </template>
 
 <script>
+import { getList } from '@/api/help/type';
+
+const resetList = (arr = []) => {
+  const reuslt = arr.map(x => ({
+    value: x.id,
+    label: x.name,
+    children: x.children && x.children.length > 0 ? resetList(x.children) : null
+  }));
+  return reuslt;
+};
+
+const checkList = (list = []) => {
+  list = list.reduce((init, item) => {
+    if (item.children) {
+      init.push(item);
+    }
+    return init;
+  }, []);
+  return list;
+};
+
 export default {
   name: 'IssueTypeSelect',
 
-  model: {
-    prop: 'value',
-    event: 'change'
-  },
-
   props: {
     value: {
       type: String,
       default: ''
-    },
-    params: {
-      type: Object,
-      default: () => {}
     }
   },
 
   data() {
     return {
+      vModel: this.value,
       options: []
     };
   },
 
-  // mounted() {
-  //   this.loadData()
-  // },
+  watch: {
+    value: {
+      handler(val) {
+        this.vModel = val;
+      },
+      immediate: true
+    }
+  },
+
+  mounted() {
+    this.loadData();
+  },
 
   methods: {
-    // async loadData() {
-    //   const { success, data, msg } = await (params)
-    //   if (success) {
-    //     this.options = data
-    //   } else {
-    //     this.$error(msg)
-    //   }
-    // }
+    onChange(value) {
+      console.log(value);
+      this.$emit('input', value[1] || null);
+    },
+
+    async loadData() {
+      const { success, data, msg } = await getList({
+        data: {
+          isShow: null
+        },
+        limit: 999999,
+        start: 1
+      });
+      if (success) {
+        let result = resetList(data.data);
+        this.options = checkList(result);
+      } else {
+        this.$error(msg);
+      }
+    }
   }
 };
 </script>

src/main.js

@@ -23,6 +23,19 @@ import '@/plugins/viewerjs';
 
 import message from '@/utils/message';
 
+import bus from './utils/bus';
+
+Vue.prototype.$Bus = bus;
+Vue.prototype.$g_emit = (eventName, payload) => {
+  bus.$emit(eventName, payload);
+};
+Vue.prototype.$g_on = (eventName, func) => {
+  bus.$on(eventName, func);
+};
+Vue.prototype.$g_off = (eventName, func) => {
+  bus.$off(eventName, func);
+};
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/mixins/filterList.js

@@ -44,7 +44,7 @@ const filterList = (params = {}) => ({
         limit: this.pagination.pageSize,
         start: this.pagination.page
       });
-      if (data in data) {
+      if ('data' in data) {
         const items = data.data;
         const total = {
           page: data.page,

src/utils/bus.js

@@ -0,0 +1,3 @@
+import Vue from 'vue';
+
+export default new Vue();

src/views/helpInfo/information/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="">
-    <toolbar @onSearch="filterData" />
+    <toolbar @on-filter="filterData" @on-reset="filterData" />
 
     <div class="m-10 bg-w p-20 br-10">
       <el-button type="primary" icon="el-icon-plus" @click="handleAdd"
@@ -51,14 +51,17 @@ export default {
           minWidth: '120'
         },
         {
-          key: 'region',
+          key: 'createAt',
           name: '创建时间',
           width: '180'
         },
         {
           key: 'isShow',
           name: '状态',
-          width: '180'
+          width: '180',
+          type: 'tag',
+          fetchTagType: val => (val ? 'success' : 'info'),
+          tagName: row => (row.isShow ? '显示' : '隐藏')
         },
         {
           key: 'action',
@@ -108,6 +111,14 @@ export default {
     };
   },
 
+  created() {
+    this.$g_on('information_reload', this.reload);
+  },
+
+  beforeDestroy() {
+    this.$g_off('information_reload', this.reload);
+  },
+
   methods: {
     handleAdd() {
       this.$InformationItemModal();

src/views/helpInfo/information/modal/ItemModal.vue

@@ -16,7 +16,7 @@
       </el-form-item>
       <el-form-item label="内容" prop="content">
         <!-- TODO 富文本编辑框 -->
-        <el-input v-model="form.content"></el-input>
+        <RichText v-model="form.content"></RichText>
       </el-form-item>
       <el-form-item label="分类" prop="helpGroupId">
         <IssueTypeSelect v-model="form.helpGroupId"></IssueTypeSelect>
@@ -121,6 +121,7 @@ export default {
           if (success) {
             this.$success('保存成功！');
             this.modal = false;
+            this.$g_emit('information_reload');
           } else {
             this.$error(msg);
           }

src/views/helpInfo/information/toolbar.vue

@@ -28,7 +28,7 @@ export default {
           label: '状态',
           labelWidth: '100px',
           options: TYPE,
-          format: val => (val !== null ? !!val : null)
+          format: val => (val !== null && val !== '' ? !!val : null)
         }
       ]
     };

src/views/helpInfo/issueType/index.vue

@@ -39,7 +39,7 @@ export default {
         {
           key: 'id',
           name: 'ID',
-          width: '160'
+          width: '200'
         },
         {
           key: 'name',
@@ -88,23 +88,24 @@ export default {
                 '编辑'
               )
             );
-            action.push(
-              h(
-                'el-button',
-                {
-                  props: {
-                    type: 'text'
+            row.parentId == -1 &&
+              action.push(
+                h(
+                  'el-button',
+                  {
+                    props: {
+                      type: 'text'
+                    },
+                    on: {
+                      click: () =>
+                        this.$IssueTypeItemModal({
+                          parentId: row.id
+                        })
+                    }
                   },
-                  on: {
-                    click: () =>
-                      this.$IssueTypeItemModal({
-                        parentId: row.parentId
-                      })
-                  }
-                },
-                '添加下级分类'
-              )
-            );
+                  '添加下级分类'
+                )
+              );
             action.push(
               h(
                 'BaseBtn',
@@ -130,39 +131,12 @@ export default {
     };
   },
 
-  mounted() {
-    setTimeout(() => {
-      this.items = [
-        {
-          id: 998,
-          name: 'sex',
-          isShow: true,
-          sort: 10,
-          children: [
-            {
-              id: 31,
-              name: 'man',
-              isShow: false,
-              sort: 9,
-              children: [
-                {
-                  id: 312,
-                  name: 'man',
-                  isShow: true,
-                  sort: 9
-                }
-              ]
-            },
-            {
-              id: 9,
-              name: 'woman',
-              isShow: true,
-              sort: 7
-            }
-          ]
-        }
-      ];
-    }, 1000);
+  created() {
+    this.$g_on('issue_type_reload', this.reload);
+  },
+
+  beforeDestroy() {
+    this.$g_off('issue_type_reload', this.reload);
   },
 
   methods: {

src/views/helpInfo/issueType/modal/ItemModal.vue

@@ -113,6 +113,7 @@ export default {
           if (success) {
             this.$success('保存成功！');
             this.modal = false;
+            this.$g_emit('issue_type_reload');
           } else {
             this.$error(msg);
           }

src/views/helpInfo/issueType/toolbar.vue

@@ -22,7 +22,7 @@ export default {
           label: '状态',
           labelWidth: '100px',
           options: TYPE,
-          format: val => (val !== null ? !!val : null)
+          format: val => (val !== null && val !== '' ? !!val : null)
         }
       ]
     };