分类管理

src/api/classifyManage/index.js

@@ -16,3 +16,29 @@ export async function saveOrUpdate (data) {
   }
   return Promise.reject(new Error(res.data.message));
 }
+
+// 根据父级id查分类树
+export async function getTreeByPid (parentId) {
+  const res = await request.get(`/main/categoryLevel/getTreeByPid/${parentId}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+
+// 删除分类
+export async function deleteCategory (id) {
+  const res = await request.get(`/main/categoryLevel/delete/${id}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}
+//根据ID查询分类详情系信息
+export async function getInfoById (id) {
+  const res = await request.get(`/main/categoryLevel/getById/${id}`);
+  if (res.data.code == 0) {
+    return res.data;
+  }
+  return Promise.reject(new Error(res.data.message));
+}

src/components/Dict/DictSelection.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-select
+    v-model="selectVal"
+    size="small"
+    style="width: 100%"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <el-option
+      v-for="item in dictList"
+      :key="item[valueName]"
+      :value="item[valueName]"
+      :label="item[labelName]"
+    ></el-option>
+  </el-select>
+</template>
+
+<script>
+  import dictEnum from '@/enum/dict';
+  import { mapActions, mapGetters } from 'vuex';
+  export default {
+    model: {
+      prop: 'value',
+      event: 'updateVal'
+    },
+    props: {
+      value: {
+        type: [String, Number],
+        default: ''
+      },
+      dictName: {
+        type: String,
+        required: true
+      },
+      labelName: {
+        type: String,
+        default: 'dictValue'
+      },
+      valueName: {
+        type: String,
+        default: 'dictCode'
+      }
+    },
+    data () {
+      return {};
+    },
+    computed: {
+      ...mapGetters(['dict', 'getDict']),
+      dictList () {
+        return this.dict[dictEnum[this.dictName]] || [];
+      },
+      selectVal: {
+        set (val) {
+          this.$emit('updateVal', val);
+          // change获取选中项所有数据
+
+          this.$emit('itemChange', this.getDict(this.dictName, val));
+        },
+        get () {
+          return this.value;
+        }
+      }
+    },
+    created () {
+      if (this.dictName) {
+        this.requestDict(this.dictName);
+      }
+    },
+    methods: {
+      ...mapActions('dict', ['requestDict'])
+    }
+  };
+</script>

src/enum/dict.js

@@ -0,0 +1,6 @@
+export default {
+  类型用途: 'type_use',
+  条码分类: 'BARCODE',
+  资产类型: 'ASSECTSTYPE',
+  物品类型: 'classify'
+};

src/main.js

@@ -8,7 +8,9 @@ import EleAdmin from 'ele-admin';
 import VueClipboard from 'vue-clipboard2';
 import i18n from './i18n';
 import './styles/index.scss';
+import DictSelection from '@/components/Dict/DictSelection';
 
+Vue.component('DictSelection', DictSelection);
 Vue.config.productionTip = false;
 
 Vue.use(EleAdmin, {

src/mixins/dictMixins.js

@@ -0,0 +1,16 @@
+import { mapGetters, mapActions } from 'vuex';
+import dictEnum from '@/enum/dict';
+
+export default {
+  data () {
+    return {
+      dictEnum
+    };
+  },
+  computed: {
+    ...mapGetters(['getDictValue', 'dict', 'getDict'])
+  },
+  methods: {
+    ...mapActions('dict', ['requestDict'])
+  }
+};

src/store/getters.js

@@ -1,7 +1,22 @@
 /**
  * vuex getter
  */
+import dictEnum from '@/enum/dict';
 export default {
   user: (state) => state.user,
-  theme: (state) => state.theme
+  theme: (state) => state.theme,
+  dict: (state) => state.dict,
+  // 根据字典enumName  和 dictCode 获取字典项
+  getDict: (state) => (enumName, dictCode) =>
+    (state.dict[dictEnum[enumName]] || []).find(
+      (item) => item.dictCode === dictCode
+    ) || {},
+  // 根据字典enumName  和 dictCode 获取字典 值（名称
+  getDictValue: (state) => (enumName, dictCode) => {
+    const obj = (state.dict[dictEnum[enumName]] || []).find(
+      (item) => item.dictCode === dictCode
+    );
+
+    return obj && obj.dictValue;
+  }
 };

src/store/index.js

@@ -4,6 +4,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import getters from './getters';
+import dict from './modules/dict';
 import user from './modules/user';
 import theme from './modules/theme';
 // import createPersistedState from 'vuex-persistedstate';
@@ -15,6 +16,7 @@ export default new Vuex.Store({
   mutations: {},
   actions: {},
   modules: {
+    dict,
     user,
     theme
   },

src/store/modules/dict.js

@@ -0,0 +1,98 @@
+import dictEnum from '@/enum/dict';
+import Vue from 'vue';
+import { pageDictionaryData } from '@/api/system/dictionary-data';
+//非枚举定义
+const otherDictConfig = {
+  //   [dictEnum.物品类型]: {
+  //     request: getSubListByParentId,
+  //     dictCode: 'type',
+  //     dictValue: 'name',
+  //     resKey: '' //为空选 data
+  //   }
+};
+
+const state = {};
+
+const mutations = {
+  //根据字典code 添加字典
+  ADD_DICT: (state, { code, dict }) => {
+    Vue.set(state, code, dict);
+  }
+
+  // // 根据字典enumName  和 dictCode 获取字典项
+  // GET_DICT (state, { enumName, dictCode }) {
+  //   return (
+  //     (state[dictEnum[enumName]] || []).find(
+  //       item => item.dictCode === dictCode
+  //     ) || {}
+  //   )
+  // },
+  // // 根据字典enumName  和 dictCode 获取字典 值（名称
+  // GET_DICT_VALUE (state, { enumName, dictCode }) {
+  //   const obj = (state[dictEnum[enumName]] || []).find(
+  //     item => item.dictCode === dictCode
+  //   )
+
+  //   return obj && obj.dictValue
+  // }
+};
+
+const actions = {
+  // 根据字典enumName请求字典 已获取的不做重复请求
+  async requestDict ({ commit, state }, enumName) {
+    const code = dictEnum[enumName];
+
+    if (state[code]?.length) return state[code];
+    let res;
+    if (otherDictConfig[dictEnum[enumName]]) {
+      const config = otherDictConfig[dictEnum[enumName]];
+      console.log(config);
+      //非枚举定义
+      res = await config.request();
+      if (res?.success) {
+        let list = config.resKey ? res.data[config.resKey] : res.data;
+        commit('ADD_DICT', {
+          code,
+          dict: list.map((item) => ({
+            ...item,
+            dictCode: item[config.dictCode],
+            dictValue: item[config.dictValue]
+          }))
+        });
+        return res.list;
+      }
+    } else {
+      res = await pageDictionaryData(code);
+      if (res?.success) {
+        commit('ADD_DICT', {
+          code,
+          dict: res.data
+        });
+        return res.data;
+      }
+    }
+
+    return [];
+  },
+  // 更新字典
+  async reloadRequestDict ({ commit }, enumName) {
+    const code = dictEnum[enumName];
+    const res = await pageDictionaryData(code);
+    if (res?.success) {
+      commit('ADD_DICT', {
+        code,
+        dict: res.data
+      });
+      return res.data;
+    }
+
+    return [];
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions
+};

src/styles/transition/common.scss

@@ -0,0 +1,3 @@
+.w100 {
+  width: 100%;
+}

src/styles/transition/index.scss

@@ -1,3 +1,4 @@
 @import './fade.scss';
 @import './slide.scss';
 @import './zoom.scss';
+@import './common.scss';

src/views/classifyManage/components/classifyManageEdit.vue

@@ -1,130 +1,147 @@
 <!-- 字典项编辑弹窗 -->
 <template>
   <ele-modal
-    width="460px"
+    width="500px"
     :visible="visible"
     :close-on-click-modal="true"
-    :title="isUpdate ? '修改字典项' : '添加字典项'"
+    :title="isUpdate ? '编辑分类信息' : '新增分类信息'"
     @update:visible="updateVisible"
   >
-    <el-form :model="form" ref="form" :rules="rules" label-width="96px">
-      <el-form-item label="字典项名称:" prop="dictDataName">
+    <el-form :model="formData" ref="formRef" :rules="rules" label-width="96px">
+      <el-form-item label="父级节点:" prop="code">
         <el-input
           clearable
           :maxlength="20"
-          v-model="form.dictDataName"
-          placeholder="请输入字典项名称"
+          v-model="formData.code"
+          placeholder="请输入"
         />
       </el-form-item>
-      <el-form-item label="字典项值:" prop="dictDataCode">
+      <el-form-item label="层级全览:" prop="name">
         <el-input
           clearable
           :maxlength="20"
-          v-model="form.dictDataCode"
-          placeholder="请输入字典项值"
+          v-model="formData.name"
+          placeholder="请输入"
         />
       </el-form-item>
-      <el-form-item label="排序号:" prop="sortNumber">
-        <el-input-number
-          :min="0"
-          :max="9999"
-          v-model="form.sortNumber"
-          placeholder="请输入排序号"
-          controls-position="right"
-          class="ele-fluid ele-text-left"
+      <el-form-item label="节点编码:" prop="type">
+        <el-select
+          clearable
+          :maxlength="20"
+          v-model="formData.type"
+          placeholder="请选择"
+        >
+          <el-option
+            v-for="item in typeList"
+            :key="item.code"
+            :label="item.label"
+            :value="item.code"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="节点名称:" prop="remark">
+        <el-input
+          clearable
+          type="textarea"
+          :maxlength="20"
+          v-model="formData.remark"
+          placeholder="请输入"
         />
       </el-form-item>
-      <el-form-item label="备注:">
+      <el-form-item label="与下层分隔:" prop="remark">
         <el-input
-          :rows="4"
+          clearable
           type="textarea"
-          :maxlength="200"
-          v-model="form.comments"
-          placeholder="请输入备注"
+          :maxlength="20"
+          v-model="formData.remark"
+          placeholder="请输入"
+        />
+      </el-form-item>
+      <el-form-item label="本层排序:" prop="remark">
+        <el-input
+          clearable
+          type="textarea"
+          :maxlength="20"
+          v-model="formData.remark"
+          placeholder="请输入"
         />
       </el-form-item>
     </el-form>
     <template v-slot:footer>
-      <el-button @click="updateVisible(false)">取消 </el-button>
       <el-button type="primary" :loading="loading" @click="save">
         保存
       </el-button>
+      <el-button @click="updateVisible(false)">返回 </el-button>
     </template>
   </ele-modal>
 </template>
 
 <script>
-  import {
-    addDictionaryData,
-    updateDictionaryData
-  } from '@/api/system/dictionary-data';
+  import { saveOrUpdate } from '@/api/classifyManage';
 
   export default {
-    // props: {
-    //   // 弹窗是否打开
-    //   visible: Boolean,
-    //   // 修改回显的数据
-    //   data: Object,
-    //   // 字典id
-    //   dictId: Object
-    // },
-    props: ['visible', 'data', 'dictId'],
+    props: {},
     data () {
       const defaultForm = {
-        dictDataId: null,
-        dictDataName: '',
-        dictDataCode: '',
-        sortNumber: '',
-        comments: ''
+        name: '',
+        code: '',
+        type: '',
+        remark: '',
+        parentId: 0
       };
       return {
+        visible: false,
         defaultForm,
         // 表单数据
-        form: { ...defaultForm },
+        formData: { ...defaultForm },
+        typeList: [{ label: '产品分类', code: 3 }],
         // 表单验证规则
         rules: {
-          dictDataName: [
+          name: [
             {
               required: true,
-              message: '请输入字典项名称',
+              message: '请输入类型名称',
               trigger: 'blur'
             }
           ],
-          dictDataCode: [
+          code: [
             {
               required: true,
-              message: '请输入字典项值',
+              message: '请输入类型编码',
               trigger: 'blur'
             }
           ],
-          sortNumber: [
+          type: [
             {
               required: true,
-              message: '请输入排序号',
-              trigger: 'blur'
+              message: '请选择类型用途',
+              trigger: 'change'
             }
           ]
         },
         // 提交状态
         loading: false,
         // 是否是修改
-        isUpdate: false
+        isUpdate: false,
+        parentData: {}
       };
     },
     methods: {
+      open (parentData, data) {
+        this.parentData = parentData;
+        this.data = data;
+        this.visible = true;
+      },
       /* 保存编辑 */
       save () {
-        this.$refs.form.validate((valid) => {
+        this.$refs.formRef.validate((valid) => {
           if (!valid) {
             return false;
           }
           this.loading = true;
-          const saveOrUpdate = this.isUpdate
-            ? updateDictionaryData
-            : addDictionaryData;
           saveOrUpdate({
-            ...this.form,
-            dictId: this.dictId
+            ...this.formData
           })
             .then((msg) => {
               this.loading = false;
@@ -140,21 +157,21 @@
       },
       /* 更新visible */
       updateVisible (value) {
-        this.$emit('update:visible', value);
+        this.visible = value;
       }
     },
     watch: {
       visible (visible) {
         if (visible) {
           if (this.data) {
-            this.$util.assignObject(this.form, this.data);
+            this.$util.assignObject(this.formData, this.data);
             this.isUpdate = true;
           } else {
             this.isUpdate = false;
           }
         } else {
-          this.$refs.form.clearValidate();
-          this.form = { ...this.defaultForm };
+          this.$refs.formRef.clearValidate();
+          this.formData = { ...this.defaultForm };
         }
       }
     }

src/views/classifyManage/components/classifyManageSearch.vue

@@ -12,7 +12,7 @@
           <el-input
             clearable
             placeholder="请输入"
-            v-model.trim="params.name"
+            v-model.trim="params.code"
           ></el-input>
         </el-form-item>
       </el-col>
@@ -20,7 +20,7 @@
         <el-form-item label="类型名称：">
           <el-input
             clearable
-            v-model="params.url"
+            v-model="params.name"
             placeholder="请输入"
           ></el-input>
         </el-form-item>
@@ -47,7 +47,7 @@
       // 默认表单数据
       const defaultParams = {
         name: '',
-        url: ''
+        code: ''
       };
       return {
         // 表单数据

src/views/classifyManage/components/list-edit.vue

@@ -8,47 +8,114 @@
     @update:visible="updateVisible"
   >
     <el-form :model="formData" ref="formRef" :rules="rules" label-width="96px">
-      <el-form-item label="类型编码:" prop="code">
-        <el-input
-          clearable
-          :maxlength="20"
-          v-model="formData.code"
-          placeholder="请输入"
-        />
-      </el-form-item>
-      <el-form-item label="类型名称:" prop="name">
-        <el-input
-          clearable
-          :maxlength="20"
-          v-model="formData.name"
-          placeholder="请输入"
-        />
-      </el-form-item>
-      <el-form-item label="类型用途:" prop="type">
-        <el-select
-          clearable
-          :maxlength="20"
-          v-model="formData.type"
-          placeholder="请选择"
-        >
-          <el-option
-            v-for="item in typeList"
-            :key="item.code"
-            :label="item.label"
-            :value="item.code"
+      <!-- 根节点 -->
+      <template v-if="!rootId || (data && data.id == rootId)">
+        <el-form-item label="类型编码:" prop="code">
+          <el-input
+            clearable
+            :maxlength="20"
+            v-model="formData.code"
+            placeholder="请输入"
+          />
+        </el-form-item>
+        <el-form-item label="类型名称:" prop="name">
+          <el-input
+            clearable
+            :maxlength="20"
+            v-model="formData.name"
+            placeholder="请输入"
+          />
+        </el-form-item>
+        <el-form-item label="类型用途:" prop="type">
+          <DictSelection dictName="类型用途" clearable v-model="formData.type">
+          </DictSelection>
+          <!-- <el-select
+            clearable
+            class="w100"
+            :maxlength="20"
+            v-model="formData.type"
+            placeholder="请选择"
           >
-          </el-option>
-        </el-select>
-      </el-form-item>
-      <el-form-item label="描述:" prop="remark">
-        <el-input
-          clearable
-          type="textarea"
-          :maxlength="20"
-          v-model="formData.remark"
-          placeholder="请输入"
-        />
-      </el-form-item>
+            <el-option
+              v-for="item in typeList"
+              :key="item.code"
+              :label="item.label"
+              :value="item.code"
+            >
+            </el-option>
+          </el-select> -->
+        </el-form-item>
+        <el-form-item label="描述:" prop="remark">
+          <el-input
+            clearable
+            type="textarea"
+            :maxlength="20"
+            v-model="formData.remark"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </template>
+
+      <!-- 子节点 -->
+      <template v-else>
+        <el-form-item label="父级节点:">
+          {{ parentData.name }}
+        </el-form-item>
+        <el-form-item label="层级全览:" prop="name">
+          {{ fullName }}
+        </el-form-item>
+        <el-form-item label="节点编码:" prop="code">
+          <el-select
+            clearable
+            class="w100"
+            :maxlength="20"
+            v-model="formData.code"
+            placeholder="请选择"
+          >
+            <el-option
+              v-for="item in typeList"
+              :key="item.code"
+              :label="item.label"
+              :value="item.code"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="节点名称:" prop="name">
+          <el-input
+            clearable
+            :maxlength="20"
+            v-model="formData.name"
+            placeholder="请输入"
+          />
+        </el-form-item>
+        <el-form-item label="与下层分隔:" prop="remark">
+          <el-select
+            class="w100"
+            clearable
+            type="textarea"
+            :maxlength="20"
+            v-model="formData.remark"
+            placeholder="请输入"
+          >
+            <el-option
+              v-for="item in splitList"
+              :key="item.code"
+              :label="item.label"
+              :value="item.code"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="本层排序:" prop="remark">
+          <el-input
+            clearable
+            type="textarea"
+            :maxlength="20"
+            v-model="formData.remark"
+            placeholder="请输入"
+          />
+        </el-form-item>
+      </template>
     </el-form>
     <template v-slot:footer>
       <el-button @click="updateVisible(false)">返回 </el-button>
@@ -64,10 +131,11 @@
 
   export default {
     props: {
-      // 弹窗是否打开
-      visible: Boolean,
-      // 修改回显的数据
-      data: Object
+      rootId: [String, Number],
+      curNode: {
+        type: Object,
+        default: () => ({})
+      }
     },
     data () {
       const defaultForm = {
@@ -78,10 +146,22 @@
         parentId: 0
       };
       return {
+        visible: false,
         defaultForm,
         // 表单数据
         formData: { ...defaultForm },
-        typeList: [{ label: '产品分类', code: 3 }],
+        typeList: [
+          { label: '产品分类', code: 3 },
+          { label: '摸具分类', code: 4 },
+          { label: '设备分类', code: 5 },
+          { label: '舟皿分类', code: 6 }
+        ],
+        splitList: [
+          { label: '无分隔符', code: '' },
+          { label: '-', code: '-' },
+          { label: '~', code: '~' },
+          { label: '/', code: '/' }
+        ],
         // 表单验证规则
         rules: {
           name: [
@@ -109,10 +189,30 @@
         // 提交状态
         loading: false,
         // 是否是修改
-        isUpdate: false
+        isUpdate: false,
+        data: null,
+        parentData: {}
       };
     },
+    computed: {
+      fullName () {
+        let str = '';
+        let node = this.curNode;
+
+        while (node?.data?.name) {
+          str = node.data.name + '-' + str;
+          node = node?.parent;
+        }
+
+        return str;
+      }
+    },
     methods: {
+      open (data, parentData) {
+        this.parentData = parentData;
+        this.data = data;
+        this.visible = true;
+      },
       /* 保存编辑 */
       save () {
         this.$refs.formRef.validate((valid) => {
@@ -127,7 +227,7 @@
               this.loading = false;
               this.$message.success(msg);
               this.updateVisible(false);
-              this.$emit('done');
+              this.$emit('done', !!this.data);
             })
             .catch((e) => {
               this.loading = false;
@@ -137,7 +237,7 @@
       },
       /* 更新visible */
       updateVisible (value) {
-        this.$emit('update:visible', value);
+        this.visible = value;
       }
     },
     watch: {

src/views/classifyManage/details.vue

@@ -15,7 +15,7 @@
                 type="primary"
                 icon="el-icon-plus"
                 class="ele-btn-icon"
-                @click="openEdit()"
+                @click="openEdit(true)"
               >
                 新建下级节点
               </el-button>
@@ -25,7 +25,7 @@
                 icon="el-icon-edit"
                 class="ele-btn-icon"
                 :disabled="!current"
-                @click="openEdit(current)"
+                @click="openEdit(false)"
               >
                 编辑节点
               </el-button>
@@ -34,8 +34,8 @@
                 type="danger"
                 icon="el-icon-delete"
                 class="ele-btn-icon"
-                :disabled="!current"
-                @click="remove"
+                :disabled="!current.id || current.id == rootId"
+                @click="deleteCategory"
               >
                 删除
               </el-button>
@@ -45,18 +45,51 @@
             <el-tree
               :data="treeData"
               :props="defaultProps"
+              ref="treeRef"
+              :highlight-current="true"
+              node-key="id"
               @node-click="handleNodeClick"
             ></el-tree>
           </div>
         </div>
         <template v-slot:content>
-          <div class="ele-border-lighter form-content">
+          <div class="ele-border-lighter form-content" v-loading="loading">
             <ele-toolbar class="ele-toolbar-actions">
               <h4 style="margin: 5px 0"> 节点信息 </h4>
             </ele-toolbar>
             <div class="form-wrapper">
               <el-form size="mini" label-width="100px" class="ele-form-detail">
-                <el-row :gutter="15">
+                <el-row :gutter="15" v-if="current.id == rootId">
+                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+                    <el-form-item label="类型编码:">
+                      <div class="ele-text-secondary">
+                        {{ current.code }}
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+                    <el-form-item label="类型名称:">
+                      <div class="ele-text-secondary">
+                        {{ current.name }}
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+                    <el-form-item label="类型用途:">
+                      <div class="ele-text-secondary">
+                        {{ current.type }}
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                  <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
+                    <el-form-item label="描述:">
+                      <div class="ele-text-secondary">
+                        {{ current.remark }}
+                      </div>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row :gutter="15" v-else>
                   <el-col v-bind="styleResponsive ? { sm: 12 } : { span: 12 }">
                     <el-form-item label="父级节点:">
                       <div class="ele-text-secondary">
@@ -99,113 +132,39 @@
         </template>
       </ele-split-layout>
     </el-card>
-
-    <!-- <el-card shadow="never">
-      <div class="container-main">
-        <div class="tree-wrap"> </div>
-        <div class="main-wrap">
-          <div class="top-bar">
-            <el-button size="medium" class="btn" @click="handlOpen"
-              >新建下级节点</el-button
-            >
-            <el-button size="medium" class="btn">编辑节点</el-button>
-          </div>
-          <div class="basic-details-title">
-            <span class="border-span">基本信息</span>
-          </div>
-          <el-descriptions size="medium">
-            <el-descriptions-item label=""
-              >自用合金（002）</el-descriptions-item
-            >
-            <el-descriptions-item label=""
-              >硬质合金-自用合金-研磨棒（121-002-501）</el-descriptions-item
-            >
-            <el-descriptions-item label="">501</el-descriptions-item>
-            <el-descriptions-item label=""></el-descriptions-item>
-            <el-descriptions-item label="">-</el-descriptions-item>
-          </el-descriptions>
-          <div class="fhlb-wrap">
-            <el-button size="medium">返回列表</el-button>
-          </div>
-        </div>
-      </div>
-      <addDialog ref="addDialog"></addDialog>
-    </el-card> -->
     <!-- 编辑弹窗 -->
-    <classify-manage-edit :visible.sync="showEdit" @done="reload" />
+    <list-edit
+      ref="editRef"
+      @done="reload"
+      :rootId="rootId"
+      :curNode="curNode"
+    />
+    <!-- <classify-manage-edit ref="editRef" @done="reload" /> -->
   </div>
 </template>
 <script>
+  import ListEdit from './components/list-edit.vue';
   import classifyManageEdit from './components/classifyManageEdit.vue';
+  import {
+    getTreeByPid,
+    getInfoById,
+    deleteCategory
+  } from '@/api/classifyManage';
   export default {
     components: {
-      classifyManageEdit
+      classifyManageEdit,
+      ListEdit
     },
     data () {
       return {
-        showEdit: false,
+        loading: false,
         current: {},
-        treeData: [
-          {
-            label: '一级 1',
-            children: [
-              {
-                label: '二级 1-1',
-                children: [
-                  {
-                    label: '三级 1-1-1'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            label: '一级 2',
-            children: [
-              {
-                label: '二级 2-1',
-                children: [
-                  {
-                    label: '三级 2-1-1'
-                  }
-                ]
-              },
-              {
-                label: '二级 2-2',
-                children: [
-                  {
-                    label: '三级 2-2-1'
-                  }
-                ]
-              }
-            ]
-          },
-          {
-            label: '一级 3',
-            children: [
-              {
-                label: '二级 3-1',
-                children: [
-                  {
-                    label: '三级 3-1-1'
-                  }
-                ]
-              },
-              {
-                label: '二级 3-2',
-                children: [
-                  {
-                    label: '三级 3-2-1'
-                  }
-                ]
-              }
-            ]
-          }
-        ],
+        curNode: {},
+        treeData: [],
         formData: {},
         defaultProps: {
           children: 'children',
-          label: 'label'
+          label: 'name'
         }
       };
     },
@@ -214,16 +173,75 @@
       // 是否开启响应式布局
       styleResponsive () {
         return this.$store.state.theme.styleResponsive;
+      },
+      rootId () {
+        return this.$route.query.id;
       }
     },
+    created () {
+      this.getTree().then(() => {
+        this.$nextTick(() => {
+          console.log(this.treeData[0]?.id);
+          this.$refs.treeRef.setCurrentKey(this.treeData[0]?.id);
+          this.current = this.treeData[0];
+        });
+      });
+    },
     methods: {
-      reload () {},
+      reload (isEdit) {
+        if (isEdit) {
+          this.getDetail(this.current.id);
+        } else {
+          this.getTree();
+          0;
+        }
+      },
       handlOpen () {
         this.$refs.addDialog.open();
       },
-      openEdit () {},
-      remove () {},
-      handleNodeClick () {}
+      deleteCategory () {
+        this.$confirm('确定要删除选中节点吗?', '提示', {
+          type: 'warning'
+        }).then(async () => {
+          const res = await deleteCategory(this.current.id);
+          if (res?.code == '0') {
+            this.getTree().then(() => {
+              this.$nextTick(() => {
+                console.log(this.treeData[0]?.id);
+                this.$refs.treeRef.setCurrentKey(this.treeData[0]?.id);
+                this.current = this.treeData[0];
+              });
+            });
+            this.$message.success('删除成功！');
+          }
+        });
+      },
+      async getTree () {
+        const res = await getTreeByPid(this.rootId);
+
+        if (res.code == '0') {
+          this.treeData = res.data;
+          return;
+        }
+
+        return Promise.reject();
+      },
+      async getDetail (id) {
+        this.loading = true;
+        const res = await getInfoById(id);
+        this.loading = false;
+        if (res?.success) {
+          console.log(res);
+        }
+      },
+      openEdit (isAdd = true) {
+        this.$refs.editRef.open(isAdd ? null : this.current, this.current);
+      },
+      handleNodeClick (data, node) {
+        this.current = data;
+        this.curNode = node;
+        console.log(node);
+      }
     }
   };
 </script>

src/views/classifyManage/index.vue

@@ -29,7 +29,7 @@
       </ele-pro-table>
     </el-card>
 
-    <list-edit :visible.sync="editVisible" :data="editData" />
+    <list-edit ref="editRef" @done="reload" />
   </div>
 </template>
 <script>
@@ -41,7 +41,6 @@
     data () {
       return {
         editData: null,
-        editVisible: false,
         columns: [
           {
             prop: 'code',
@@ -77,7 +76,7 @@
     },
     methods: {
       openAddDialog (editData = null) {
-        (this.editData = editData), (this.editVisible = true);
+        this.$refs.editRef.open(editData);
       },
       reload (params) {
         this.$refs.table.reload({ pageNum: 1, where: params });
@@ -92,9 +91,12 @@
       },
       reset () {},
       // 编辑
-      junmpEdit (row) {
+      junmpEdit ({ id }) {
         this.$router.push({
-          path: '/classifyManage/details'
+          path: '/classifyManage/details',
+          query: {
+            id
+          }
         });
       }
     }