数据字典树形

src/views/system/dictionary.vue

@@ -15,7 +15,7 @@
       </div>
       <div class="table-tree">
         <el-table :data="tableData" :height="tableHeight" class="v-table" style="width: 100%;margin-bottom: 20px;"
-          row-key="id" border default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+          row-key="id" border :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
           <el-table-column type="index" align="center">
           </el-table-column>
           <el-table-column prop="number" label="字典编码" sortable width="180">
@@ -79,11 +79,22 @@
           <div style="display: flex;justify-content: flex-end;margin-right: 20px;margin-bottom: 10px;">
             <Button type="primary" @click="addRow()" size="small" style="margin-left: 10px;" ghost>新增参数</Button>
           </div>
-          <el-table :data="this.form.detail_list" height="400" class="v-table" style="width: 100%;margin-bottom: 20px;">
+          <el-table :data="this.form.detail_list"
+               row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}" height="400" class="v-table"
+               style="width: 100%;margin-bottom: 20px;">
             <el-table-column type="index" align="center">
             </el-table-column>
             <el-table-column prop="id" align="center" label="主健ID" width="120">
             </el-table-column>
+            <el-table-column prop="value" label="父级" width="320">
+              <template slot-scope="scope">
+                <el-cascader
+                    v-model="scope.row.pid"
+                    :options="pTreeData"
+                    @change="(e)=>{changePtree(e,scope.row)}"
+                    :props="{label:'value',value:'id',checkStrictly: true }"></el-cascader>
+              </template>
+            </el-table-column>
             <el-table-column prop="value" label="数据值Text" width="320">
               <template slot-scope="scope">
                 <el-input v-model="scope.row.value" />
@@ -110,7 +121,9 @@
             </el-table-column>
             <el-table-column label="操作" width="100" align="center">
               <template slot-scope="scope">
-                <Button type="error" @click="delRow(scope.row,scope.$index)" size="small" style="margin-left: 10px;"
+                <!-- <Button type="primary" @click="addRow()" size="small" style="margin-left: 10px;" ghost>新增参数</Button> -->
+
+                <Button type="error" @click="delRow(scope.row, scope.$index)" size="small" style="margin-left: 10px;"
                   ghost>删除</Button>
               </template>
             </el-table-column>
@@ -128,6 +141,7 @@
 </template>
 <script>
   import LxHeader from "@/components/LxHeader/index.vue";
+  import {buildTree,requestToForm} from "@/utils/index.js"
   import {
     save,
     listparameter,
@@ -147,8 +161,11 @@
     mounted() {},
     data() {
       return {
+        rowShow:false,
         dialogFormVisible: false,
         formLabelWidth: "120px",
+        objid:'',
+        pTreeData:[],
         form: {
           pname: "根级别",
           number: "",
@@ -195,28 +212,54 @@
       addRow() {
         var len = this.form.detail_list.length;
         this.form.detail_list.push({
+          pid:0,
           value: "",
           sort: len + 1,
           status: true,
           remark: ""
         })
       },
-      delRow(obj, index) {
+      changePtree(e,row){
-        if (obj.id) {
+        console.log("e",e)
-          delDetail(obj.id).then(response => {
+        this.$set(row,'pid',e[e.length-1])
+      },
+      delRow(node) {
+        let that = this
+        this.$confirm('确认删除该节点？', '提示', {
+          confirmButtonText: '确定',
+          cancelButtonText: '取消',
+          type: 'warning'
+        }).then(() => {
+            if (node.id) {
+              delDetail(node.id).then(response => {
+                that.$message.success("操作成功");
+                that.info(that.objid);
+              }).catch(error => {
+                //reject(error)
+                that.$message.error("操作失败");
+              })
+            } else {
+              that.info(that.objid);
+            }
+        })
+      },
+      // delRow(obj, index) {
+      //   if (obj.id) {
+      //     delDetail(obj.id).then(response => {
 
-            this.$message.success("操作成功");
+      //       this.$message.success("操作成功");
-            this.form.detail_list.splice(index, 1);
+      //       this.form.detail_list.splice(index, 1);
-          }).catch(error => {
+      //     }).catch(error => {
-            //reject(error)
+      //       //reject(error)
-            this.$message.error("操作失败");
+      //       this.$message.error("操作失败");
-          })
+      //     })
-        } else {
+      //   } else {
-          this.form.detail_list.splice(index, 1);
+      //     console.log("123",index,this.form.detail_list,this.form.detail_list.splice(index, 1))
-        }
+      //     this.form.detail_list.splice(index, 1);
+      //   }
 
 
-      },
+      // },
       initLoad() {
         var that = this;
         var clientHeight = document.documentElement.clientHeight
@@ -238,6 +281,8 @@
 
       },
       show(obj) {
+        this.objid = obj
+        console.log("this.objid",obj)
         this.clientHeight = document.documentElement.clientHeight - 84 - 110;
         this.dialogViewVisible = true;
         this.info(obj);
@@ -250,8 +295,18 @@
           for (var m of response.detail) {
             m.status = m.status == 1;
           }
-          response.detail_list = response.detail;
+          response.detail_list = buildTree(response.detail);
-          let result = Object.assign(that.form, response);
+
+          console.log("this.buildTree(response.detail)",buildTree(response.detail))
+          let result = requestToForm(response,that.form);
+          that.form = result
+          that.pTreeData = []
+          that.pTreeData = requestToForm(response.detail_list,that.pTreeData)
+          that.pTreeData.unshift({
+            id:0,
+            value:'根目录'
+          })
+          that.form.detail_list = response.detail_list
 
         }).catch(error => {
           //reject(error)
@@ -261,7 +316,9 @@
         this.form = this.$options.data().form;
         this.clientHeight = document.documentElement.clientHeight - 84 - 110;
         if (obj) {
+
           var that = this;
+          that.objid = obj
           that.info(obj);
         } else {}
         this.dialogFormVisible = true;
@@ -279,7 +336,12 @@
         this.$refs[formName].validate((valid) => {
           if (valid) {
             if (that.form.id) {
-              save(that.form).then(response => {
+              let _arr = this.treeToFlat(that.form.detail_list)
+              console.log("that.form.detail_list",that.form.detail_list)
+              save({
+                ...that.form,
+                detail_list:_arr
+              }).then(response => {
                 console.log(response)
                 this.$Message.success('操作成功');
                 that.dialogFormVisible = false;
@@ -300,6 +362,24 @@
           }
         });
       },
+      treeToFlat(tree, result = []) {
+        tree.forEach(node => {
+          // 复制当前节点（避免修改原数据）
+          const flatNode = { ...node };
+
+          // 删除 children 字段（如需保留层级信息，可跳过）
+          delete flatNode.children;
+
+          // 将当前节点加入结果数组
+          result.push(flatNode);
+
+          // 递归处理子节点
+          if (node.children && node.children.length > 0) {
+            this.treeToFlat(node.children, result);
+          }
+        });
+        return result;
+      },
       resetForm(formName) {
         var that = this;
         this.$refs[formName].resetFields();