dict add parentId

src/views/setting/systemManagement/list.vue

@@ -48,14 +48,14 @@
             v-if="selectedDict"
             ref="multipleTable"
             :key="$i18n.locale && selectedDict"
+            row-key="itemValue"
             class="multipleTable"
             :columns="columns"
             :get-list-action="getDictItems"
             :pagination="true"
+            :pagination-auto="true"
             :default-filter-data="{'dictId': selectedDict}"
             list-key="list"
-            page-key="pageNum"
-            limit-key="pageSize"
             tooltip-effect="dark"
           />
         </el-card>
@@ -110,6 +110,22 @@
     </el-dialog>
     <el-dialog v-if="dialogItemFormVisible" :close-on-click-modal="false" :title="(isEditItem?$t('page.edit'):$t('page.add'))+$t('page.dictItem')" :visible.sync="dialogItemFormVisible">
       <el-form ref="editItemForm" label-width="auto" :model="editItemForm">
+        <el-form-item
+          prop="fatherNode"
+          :label="$t('permission.fatherNode')"
+        >
+          <el-cascader
+            ref="cascader"
+            v-model="editItemForm.fatherNode"
+            style="width: 100%;"
+            class="cascader-box"
+            :options="dictItemList"
+            :props="{ value: 'id', label: 'itemText', checkStrictly: true, expandTrigger: 'hover' }"
+            :show-all-levels="false"
+            clearable
+            @change="handleCascader"
+          />
+        </el-form-item>
         <el-form-item
           prop="itemText"
           :label="$t('page.dictItem')"
@@ -182,7 +198,8 @@ export default {
       isEditItem: false,
       dialogItemFormVisible: false,
       editItemForm: {},
-      labelWidth: ''
+      labelWidth: '',
+      dictItemList: []
       // columns: []
     }
   },
@@ -203,6 +220,11 @@ export default {
     //   console.log('fff')
     //   this.setColumn()
     // }
+    selectedDict(val) {
+      getDictItems({ page: 1, limit: 10, dictId: val }).then(res => {
+        this.dictItemList = res.data.list
+      })
+    }
   },
   mounted() {
     // this.setColumn()
@@ -210,6 +232,9 @@ export default {
     this.labelWidth = Math.round(document.body.offsetHeight / 1048 * 100) + 'px'
   },
   methods: {
+    handleCascader(val) {
+      this.editItemForm.parentId = val[0]
+    },
     getList() {
       getDictList({ pageSize: 1000, pageNum: 1 }).then(e => {
         this.dictionaryData = e.data.list
@@ -218,8 +243,8 @@ export default {
     },
     setColumn() {
       return [
-        { prop: 'itemText', label: this.$t('page.showValue'), sortable: true },
         { prop: 'itemValue', label: this.$t('page.dictValue'), width: 80 },
+        { prop: 'itemText', label: this.$t('page.showValue'), sortable: true },
         { prop: 'description', label: this.$t('page.description') },
         { prop: 'status', label: this.$t('page.status'), formatter: row => { return <div>{row.type === '0' ? this.$t('page.unAvailable') : this.$t('page.available')}</div> } },
         { prop: 'type', label: this.$t('page.type'), formatter: row => { return <div>{row.type === '0' ? this.$t('page.character') : this.$t('page.number')}</div> } },
@@ -296,6 +321,7 @@ export default {
     editItem(item) {
       this.isEditItem = true
       this.editItemForm = item
+      this.editItemForm.fatherNode = [item.parentId]
       this.dialogItemFormVisible = true
     },
     deleteItem(item) {