style:系统管理

 <template>
-  <!-- 编辑 -->
-  <dialogBox submitForm="submitForm" @closeDialog="closeDialog" @submitForm="handleSubmit" width="80%" v-model="myValue"
-    :isSave="details.isenable == 1" title="字典信息">
+  <div>
     <el-form :model="ruleForm" ref="ruleForm" label-width="100px">
       <el-row :gutter="20">
         <el-col :span="4">
@@ -19,319 +17,313 @@
     <lb-table :column="column" class="loadingtext" :heightNum="420" :key="key" :expand-row-keys="keyList"
       row-key="bsmDict" :tree-props="{ children: 'children' }" :pagination="false" :data="tableData">
     </lb-table>
-  </dialogBox>
+
+    <div class="text-center">
+      <el-button @click="$popupCacel">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">确定</el-button>
+    </div>
+  </div>
 </template>
 
 <script>
-  import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation'
-  import { editDictNode, getChildDictList } from '@/api/user'
-  export default {
-    props: {
-      value: { type: Boolean, default: false },
-      details: {
-        type: Object,
-        default: {}
-      }
-    },
-    data () {
-      return {
-        key: 0,
-        myValue: this.value,
-        keyList: [],
-        ruleForm: {
-          dcode: '',
-          dname: ''
-        },
-        column: [],
-        columns: [
-          {
-            width: '70',
-            renderHeader: (h, scope) => {
-              return (<div>
-                {
-                  this.details.isenable === '0' ?
-                    <span>序号</span> :
-                    <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i>
-                }
-              </div>)
-            },
-            render: (h, scope) => {
-              return (
-                <span>{scope.row.index}</span>
-              )
-            }
+import { getUuid, judgeSort, realMove, findParents, removeTreeListItem } from '@/utils/operation'
+import { editDictNode, getChildDictList } from '@/api/user'
+export default {
+  props: {
+    formData: {
+      type: Object,
+      default: () => { }
+    }
+  },
+  data () {
+    return {
+      key: 0,
+      keyList: [],
+      ruleForm: {
+        dcode: '',
+        dname: ''
+      },
+      column: [],
+      columns: [
+        {
+          width: '70',
+          renderHeader: (h, scope) => {
+            return (<div>
+              {
+                this.formData.isenable === '0' ?
+                  <span>序号</span> :
+                  <i class="el-icon-plus" onClick={() => { this.handleAdd() }} style="cursor:pointer;color:#409EFF"></i>
+              }
+            </div>)
           },
-          {
-            prop: 'dcode',
-            width: '100',
-            label: '字典项编码',
-            render: (h, scope) => {
-              return (
-                <div>
-                  <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
-
+          render: (h, scope) => {
+            return (
+              <span>{scope.row.index}</span>
+            )
+          }
+        },
+        {
+          prop: 'dcode',
+          width: '100',
+          label: '字典项编码',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-input placeholder="字典项编码" disabled={this.formData.isenable == 2} v-show={scope.row.codeShow} v-fo value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
 
-                  <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={!scope.row.codeShow} value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
-                </div>
-              )
-            }
-          },
-          {
-            prop: 'dname',
-            label: '字典项名称',
-            render: (h, scope) => {
-              return (
-                <div>
-                  <el-input placeholder="字典项编码" disabled={this.details.isenable == 2} v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
 
-                  <el-input placeholder="字典项名称" disabled={this.details.isenable == 2} v-show={!scope.row.nameShow} value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
-                </div>
-              )
-            }
-          },
-          {
-            prop: 'normcode',
-            label: '部标编码',
-            width: '100',
-            render: (h, scope) => {
-              return (
-                <div>
-                  <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={scope.row.normcodeShow} v-fo value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
+                <el-input placeholder="字典项编码" disabled={this.formData.isenable == 2} v-show={!scope.row.codeShow} value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.codeShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
+              </div>
+            )
+          }
+        },
+        {
+          prop: 'dname',
+          label: '字典项名称',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-input placeholder="字典项编码" disabled={this.formData.isenable == 2} v-show={scope.row.nameShow} v-fo value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
 
-                  <el-input placeholder="部标编码" disabled={this.details.isenable == 2} v-show={!scope.row.normcodeShow} value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
-                </div>
-              )
-            }
-          },
-          {
-            prop: 'normname',
-            label: '部标名称',
-            render: (h, scope) => {
-              return (
-                <div>
-                  <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={scope.row.normnameShow} v-fo value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
+                <el-input placeholder="字典项名称" disabled={this.formData.isenable == 2} v-show={!scope.row.nameShow} value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.nameShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
+              </div>
+            )
+          }
+        },
+        {
+          prop: 'normcode',
+          label: '部标编码',
+          width: '100',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-input placeholder="部标编码" disabled={this.formData.isenable == 2} v-show={scope.row.normcodeShow} v-fo value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
 
-                  <el-input placeholder="部标名称" disabled={this.details.isenable == 2} v-show={!scope.row.normnameShow} value={scope.row[scope.column.property]}
-                    onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }}
-                    onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
-                </div>
-              )
-            }
-          },
-          {
-            prop: 'isenable',
-            width: '160',
-            label: '是否禁用',
-            render: (h, scope) => {
-              return (
-                <el-radio-group disabled={this.details.isenable == 2} v-model={scope.row.isenable}>
-                  <el-radio label="1">启用</el-radio>
-                  <el-radio label="0">禁用</el-radio>
-                </el-radio-group>
-              )
-            }
-          },
-          {
-            width: '130',
-            label: '移动',
-            render: (h, scope) => {
-              return (
-                <div>
-                  <el-button type='text' disabled={scope.row.isTop} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
-                  <el-button type='text' disabled={scope.row.isBottom} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
-                </div >
-              )
-            }
-          },
-          {
-            width: '150',
-            label: '操作',
-            render: (h, scope) => {
-              return (
-                <div>
-                  <el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button>
-                  <el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button>
-                </div>
-              )
-            }
+                <el-input placeholder="部标编码" disabled={this.formData.isenable == 2} v-show={!scope.row.normcodeShow} value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.normcodeShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }} maxlength='8'></el-input>
+              </div>
+            )
           }
-        ],
-        tableData: []
-      }
-    },
-    watch: {
-      value (val) {
-        this.myValue = val
-      },
-      'details.bsmDict': {
-        handler: function (newValue) {
-          if (!this.value) return
-          this.$startLoading();
-          getChildDictList(newValue).then(res => {
-            this.$endLoading();
-            let { result } = res
-            this.tableData = result ? result : []
-            this.tableData.forEach((item, index) => {
-              item.index = index + 1
-            })
-          })
         },
-        immediate: true
-      },
-      details: {
-        handler: function (newValue) {
-          if (newValue.isenable == 2) {
-            this.column = this.columns.slice(0, 6)
-          } else {
-            this.column = this.columns
+        {
+          prop: 'normname',
+          label: '部标名称',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-input placeholder="部标名称" disabled={this.formData.isenable == 2} v-show={scope.row.normnameShow} v-fo value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
+
+                <el-input placeholder="部标名称" disabled={this.formData.isenable == 2} v-show={!scope.row.normnameShow} value={scope.row[scope.column.property]}
+                  onFocus={() => { this.itemShowFalse(); scope.row.normnameShow = true; }}
+                  onInput={(val) => { scope.row[scope.column.property] = val; this.itemShowFalse(); scope.row.codeShow = true; }}></el-input>
+              </div>
+            )
           }
-          this.ruleForm = newValue.rowData
-          this.addIndexes()
-          this.key++
         },
-        deep: true
-      }
-    },
-    methods: {
-      // 添加索引
-      addIndexes (data = this.tableData, isAdd = true) {
-        data.forEach((item, index) => {
-          if (index == 0) {
-            item.codeShow = true
-            item.nameShow = false
-            item.normcodeShow = false
-            item.normnameShow = false
-          } else {
-            item.codeShow = false
-            item.nameShow = false
-            item.normcodeShow = false
-            item.normnameShow = false
+        {
+          prop: 'isenable',
+          width: '160',
+          label: '是否禁用',
+          render: (h, scope) => {
+            return (
+              <el-radio-group disabled={this.formData.isenable == 2} v-model={scope.row.isenable}>
+                <el-radio label="1">启用</el-radio>
+                <el-radio label="0">禁用</el-radio>
+              </el-radio-group>
+            )
           }
-          if (isAdd) {
-            item.index = index + 1
+        },
+        {
+          width: '130',
+          label: '移动',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-button type='text' disabled={scope.row.isTop} onClick={() => { this.moveUpward(scope.$index, scope.row) }}>上移</el-button>
+                <el-button type='text' disabled={scope.row.isBottom} onClick={() => { this.moveDown(scope.$index, scope.row) }}>下移</el-button >
+              </div >
+            )
           }
-          if (item.children) {
-            this.addIndexes(item.children, false)
+        },
+        {
+          width: '150',
+          label: '操作',
+          render: (h, scope) => {
+            return (
+              <div>
+                <el-button type="text" style="margin-right:10px" onClick={() => { this.handleAddSubordinate(scope.row) }}>增加下级</el-button>
+                <el-button type="text" style="margin-left:0" onClick={() => { this.handleMinus(scope.$index, scope.row) }}>删除</el-button>
+              </div>
+            )
           }
-        })
-      },
-      itemShowFalse () {
+        }
+      ],
+      tableData: []
+    }
+  },
+  mounted () {
+    if (this.formData?.bsmDict) {
+      this.$startLoading();
+      getChildDictList(this.formData.bsmDict).then(res => {
+        this.$endLoading();
+        let { result } = res
+        this.tableData = result ? result : []
         this.tableData.forEach((item, index) => {
+          item.index = index + 1
+        })
+        this.tableData = judgeSort(this.tableData)
+      })
+    }
+    if (this.formData?.isenable == 2) {
+      this.column = this.columns.slice(0, 6)
+    } else {
+      this.column = this.columns
+    }
+    this.ruleForm = this.formData.rowData
+    this.addIndexes()
+    this.key++
+  },
+  methods: {
+    // 添加索引
+    addIndexes (data = this.tableData, isAdd = true) {
+      data.forEach((item, index) => {
+        if (index == 0) {
+          item.codeShow = true
+          item.nameShow = false
+          item.normcodeShow = false
+          item.normnameShow = false
+        } else {
           item.codeShow = false
           item.nameShow = false
           item.normcodeShow = false
           item.normnameShow = false
+        }
+        if (isAdd) {
+          item.index = index + 1
+        }
+        if (item.children) {
+          this.addIndexes(item.children, false)
+        }
+      })
+    },
+    itemShowFalse () {
+      this.tableData.forEach((item, index) => {
+        item.codeShow = false
+        item.nameShow = false
+        item.normcodeShow = false
+        item.normnameShow = false
+      })
+    },
+    handleMinus (index, row) {
+      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        removeTreeListItem(this.tableData, row.bsmDict)
+        this.$message({
+          type: 'success',
+          message: '删除成功!'
         })
-      },
-      handleMinus (index, row) {
-        this.$confirm('此操作将永久删除, 是否继续?', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
-        }).then(() => {
-          removeTreeListItem(this.tableData, row.bsmDict)
-          this.$message({
-            type: 'success',
-            message: '删除成功!'
-          })
-        }).catch(() => {
+      }).catch(() => {
+        this.$message({
+          type: 'info',
+          message: '已取消删除'
+        })
+      })
+    },
+    handleSubmit () {
+      this.$startLoading();
+      editDictNode({
+        bsmDict: this.formData.rowData.bsmDict,
+        typeid: this.formData.rowData.typeid,
+        children: this.tableData
+      }).then(res => {
+        this.$endLoading();
+        if (res.code === 200) {
           this.$message({
-            type: 'info',
-            message: '已取消删除'
+            message: '修改成功',
+            type: 'success'
           })
-        })
-      },
-      handleSubmit () {
-        editDictNode({
-          bsmDict: this.details.rowData.bsmDict,
-          typeid: this.details.rowData.typeid,
-          children: this.tableData
-        }).then(res => {
-          if (res.code === 200) {
-            this.$message({
-              message: '修改成功',
-              type: 'success'
-            })
-            this.$emit('input', false)
-          }
-        })
-      },
-      closeDialog () {
-        this.$emit('input', false)
-      },
-      // 增加下级
-      handleAddSubordinate (row) {
-        if (!row.children) {
-          row.children = []
+          this.$emit('input', false)
         }
-        row.children.push(
-          {
-            dcode: '',
-            dname: '',
-            isenable: '1',
-            normcode: '',
-            normname: '',
-            bsmDict: getUuid(32),
-            typeid: row.typeid,
-          }
-        )
-        this.keyList = [];
-        this.keyList.push(row.bsmDict)
-      },
-      // 增加
-      handleAdd () {
-        this.$nextTick(() => {
-          let container = this.$el.querySelector('.el-table__body-wrapper');
-          container.scrollTop = container.scrollHeight;
-        })
-        this.tableData.push(
-          {
-            dcode: '',
-            dname: '',
-            isenable: '1',
-            normcode: '',
-            normname: '',
-            bsmDict: getUuid(32),
-            typeid: this.ruleForm.typeid,
-          }
-        )
-        this.addIndexes()
-        this.key++
-      },
-      // 上移下移
-      moveUpward (index, row) {
-        realMove(row.bsmDict, 'UP', this.tableData)
-        this.key++
-        let id = findParents(this.tableData, row.bsmDict)
-        this.keyList = id
-      },
-      moveDown (index, row) {
-        realMove(row.bsmDict, 'DOWN', this.tableData)
-        this.key++
-        let id = findParents(this.tableData, row.bsmDict)
-        this.keyList = id
+      }).catch((error) => {
+        this.$endLoading();
+      })
+    },
+    // 增加下级
+    handleAddSubordinate (row) {
+      if (!row.children) {
+        row.children = []
       }
+      row.children.push(
+        {
+          dcode: '',
+          dname: '',
+          isenable: '1',
+          normcode: '',
+          normname: '',
+          bsmDict: getUuid(32),
+          typeid: row.typeid,
+        }
+      )
+      this.keyList = [];
+      this.keyList.push(row.bsmDict)
+    },
+    // 增加
+    handleAdd () {
+      this.$nextTick(() => {
+        let container = this.$el.querySelector('.el-table__body-wrapper');
+        container.scrollTop = container.scrollHeight;
+      })
+      this.tableData.push(
+        {
+          dcode: '',
+          dname: '',
+          isenable: '1',
+          normcode: '',
+          normname: '',
+          bsmDict: getUuid(32),
+          typeid: this.ruleForm.typeid,
+        }
+      )
+      this.addIndexes()
+      this.key++
+    },
+    // 上移下移
+    moveUpward (index, row) {
+      realMove(row.bsmDict, 'UP', this.tableData)
+      this.key++
+      let id = findParents(this.tableData, row.bsmDict)
+      this.keyList = id
+    },
+    moveDown (index, row) {
+      realMove(row.bsmDict, 'DOWN', this.tableData)
+      this.key++
+      let id = findParents(this.tableData, row.bsmDict)
+      this.keyList = id
     }
   }
+}
 </script>
 <style rel="stylesheet/scss" lang="scss" scoped>
-  @import "~@/styles/dialogBoxheader.scss";
-  /deep/.el-radio {
-    margin-right: 5px !important;
-  }
+@import "~@/styles/dialogBoxheader.scss";
+
+/deep/.el-radio {
+  margin-right: 5px !important;
+}
 </style>
 

+/*
+ * @Description: 
+ * @Autor: renchao
+ * @LastEditTime: 2023-04-11 10:49:40
+ */
 import filter from '@/utils/filter.js'
 let vm = null
 
@@ -32,7 +37,6 @@ class data extends filter {
       },
       {
         label: "是否允许修改",
-        width: '110',
         render: (h, scope) => {
           return (
             <div>
@@ -47,9 +51,7 @@ class data extends filter {
       },
       {
         label: '操作',
-        width: '150',
-        align: 'center',
-        fixed: 'right',
+        width: '80',
         render: (h, scope) => {
           return (
             <div>
@@ -64,7 +66,6 @@ class data extends filter {
       }
     ]
   }
-
 }
 let datas = new data()
 export {

@@ -30,7 +30,6 @@
         :column="tableData.columns" :data="tableData.data">
       </lb-table>
     </div>
-    <editDialog v-model="isDialog" :details="details" />
   </div>
 </template>
 <script>
@@ -49,7 +48,6 @@ export default {
   },
   data () {
     return {
-      isDialog: false,
       details: {
         bsmDict: '',
         isenable: 1,
@@ -103,11 +101,12 @@ export default {
         });
       });
     },
+    // 修改
     editClick (row, val) {
       this.details.rowData = row
       this.details.isenable = val
       this.details.bsmDict = row.bsmDict
-      this.isDialog = true
+      this.$popupDialog("字典信息", "system/dictionaries/components/editDialog", this.details)
     }
   }
 }