From 6fdae97b95a8923d2c9dcba4ebd2ae2c65266fe0 Mon Sep 17 00:00:00 2001
From: smallchill <smallchill@163.com>
Date: Wed, 19 May 2021 15:26:10 +0800
Subject: [PATCH] =?UTF-8?q?:recycle:=20=E9=87=8D=E6=9E=84=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E7=AE=A1=E7=90=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/option/system/dict.js       |  12 +-
 src/option/system/dictbiz.js    |  11 +-
 src/views/system/dict.vue       | 807 ++++++++++++++++----------------
 src/views/system/dictbiz.vue    | 237 +++++-----
 src/views/util/demo/dict.vue    | 454 ++++++++++++++++++
 src/views/util/demo/dictbiz.vue | 447 ++++++++++++++++++
 6 files changed, 1427 insertions(+), 541 deletions(-)
 create mode 100644 src/views/util/demo/dict.vue
 create mode 100644 src/views/util/demo/dictbiz.vue

diff --git a/src/option/system/dict.js b/src/option/system/dict.js
index 86f309b..f90d3c3 100644
--- a/src/option/system/dict.js
+++ b/src/option/system/dict.js
@@ -1,6 +1,6 @@
 export const optionParent = {
   height: 'auto',
-  calcHeight: 95,
+  calcHeight: 30,
   tip: false,
   searchShow: true,
   searchMenuSpan: 10,
@@ -8,7 +8,7 @@ export const optionParent = {
   index: true,
   selection: true,
   viewBtn: true,
-  menuWidth: 150,
+  menuWidth: 250,
   dialogWidth: 880,
   dialogClickModal: false,
   column: [
@@ -16,6 +16,7 @@ export const optionParent = {
       label: "字典编号",
       prop: "code",
       search: true,
+      slot: true,
       span: 24,
       rules: [
         {
@@ -43,8 +44,7 @@ export const optionParent = {
       prop: "sort",
       type: "number",
       align: "right",
-      width: 80,
-      hide: true,
+      width: 100,
       rules: [
         {
           required: true,
@@ -58,7 +58,7 @@ export const optionParent = {
       prop: "isSealed",
       type: "switch",
       align: "center",
-      width: 80,
+      width: 100,
       dicData: [
         {
           label: "否",
@@ -98,7 +98,7 @@ export const optionChild = {
   index: true,
   selection: true,
   viewBtn: true,
-  menuWidth: 220,
+  menuWidth: 300,
   dialogWidth: 880,
   dialogClickModal: false,
   column: [
diff --git a/src/option/system/dictbiz.js b/src/option/system/dictbiz.js
index 86f309b..277f520 100644
--- a/src/option/system/dictbiz.js
+++ b/src/option/system/dictbiz.js
@@ -1,6 +1,6 @@
 export const optionParent = {
   height: 'auto',
-  calcHeight: 95,
+  calcHeight: 30,
   tip: false,
   searchShow: true,
   searchMenuSpan: 10,
@@ -8,7 +8,7 @@ export const optionParent = {
   index: true,
   selection: true,
   viewBtn: true,
-  menuWidth: 150,
+  menuWidth: 250,
   dialogWidth: 880,
   dialogClickModal: false,
   column: [
@@ -16,6 +16,7 @@ export const optionParent = {
       label: "字典编号",
       prop: "code",
       search: true,
+      slot: true,
       span: 24,
       rules: [
         {
@@ -43,7 +44,7 @@ export const optionParent = {
       prop: "sort",
       type: "number",
       align: "right",
-      width: 80,
+      width: 100,
       hide: true,
       rules: [
         {
@@ -58,7 +59,7 @@ export const optionParent = {
       prop: "isSealed",
       type: "switch",
       align: "center",
-      width: 80,
+      width: 100,
       dicData: [
         {
           label: "否",
@@ -98,7 +99,7 @@ export const optionChild = {
   index: true,
   selection: true,
   viewBtn: true,
-  menuWidth: 220,
+  menuWidth: 300,
   dialogWidth: 880,
   dialogClickModal: false,
   column: [
diff --git a/src/views/system/dict.vue b/src/views/system/dict.vue
index b1d5536..1355028 100644
--- a/src/views/system/dict.vue
+++ b/src/views/system/dict.vue
@@ -1,454 +1,443 @@
 <template>
-  <el-row>
-    <el-col :span="11">
-      <basic-container>
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>字典列表</span>
-          </div>
-          <div class="clearfix">
-            <avue-crud
-              :option="optionParent"
-              :table-loading="loading"
-              :data="dataParent"
-              :page="pageParent"
-              ref="crud"
-              v-model="formParent"
-              :permission="permissionList"
-              :before-open="beforeOpen"
-              @row-del="rowDel"
-              @row-update="rowUpdate"
-              @row-save="rowSave"
-              @row-click="handleRowClick"
-              @search-change="searchChange"
-              @search-reset="searchReset"
-              @selection-change="selectionChange"
-              @current-change="currentChange"
-              @size-change="sizeChange"
-              @refresh-change="refreshChange"
-              @on-load="onLoadParent"
-            >
-              <template slot="menuLeft">
-                <el-button
-                  type="danger"
-                  size="small"
-                  icon="el-icon-delete"
-                  v-if="permission.dict_delete"
-                  plain
-                  @click="handleDelete"
-                >删 除
-                </el-button>
-              </template>
-              <template slot-scope="{row}" slot="isSealed">
-                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
-              </template>
-            </avue-crud>
-          </div>
-        </el-card>
-      </basic-container>
-    </el-col>
-    <el-col :span="13">
-      <basic-container>
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>[{{dictValue}}] 字典详情</span>
-          </div>
-          <div class="clearfix">
-            <avue-crud
-              :option="optionChild"
-              :table-loading="loadingChild"
-              :data="dataChild"
-              ref="crudChild"
-              v-model="formChild"
-              :permission="permissionList"
-              :before-open="beforeOpenChild"
-              :before-close="beforeCloseChild"
-              @row-del="rowDelChild"
-              @row-update="rowUpdateChild"
-              @row-save="rowSaveChild"
-              @search-change="searchChangeChild"
-              @search-reset="searchResetChild"
-              @selection-change="selectionChangeChild"
-              @current-change="currentChangeChild"
-              @size-change="sizeChangeChild"
-              @refresh-change="refreshChangeChild"
-              @on-load="onLoadChild"
-            >
-              <template slot="menuLeft">
-                <el-button
-                  type="danger"
-                  size="small"
-                  icon="el-icon-delete"
-                  v-if="permission.dict_delete"
-                  plain
-                  @click="handleDelete"
-                >删 除
-                </el-button>
-              </template>
-              <template slot-scope="scope" slot="menu">
-                <el-button
-                  type="text"
-                  icon="el-icon-circle-plus-outline"
-                  size="small"
-                  @click.stop="handleAdd(scope.row,scope.index)"
-                  v-if="userInfo.role_name.includes('admin')"
-                >新增子项
-                </el-button>
-              </template>
-              <template slot-scope="{row}" slot="isSealed">
-                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
-              </template>
-            </avue-crud>
-          </div>
-        </el-card>
-      </basic-container>
-    </el-col>
-  </el-row>
+  <basic-container>
+    <avue-crud
+      :option="optionParent"
+      :table-loading="loading"
+      :data="dataParent"
+      :page="pageParent"
+      ref="crud"
+      v-model="formParent"
+      :permission="permissionList"
+      :before-open="beforeOpen"
+      @row-del="rowDel"
+      @row-update="rowUpdate"
+      @row-save="rowSave"
+      @row-click="handleRowClick"
+      @search-change="searchChange"
+      @search-reset="searchReset"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @refresh-change="refreshChange"
+      @on-load="onLoadParent"
+    >
+      <template slot="menuLeft">
+        <el-button
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          v-if="permission.dict_delete"
+          plain
+          @click="handleDelete"
+        >删 除
+        </el-button>
+      </template>
+      <template slot-scope="scope" slot="menu">
+        <el-button
+          type="text"
+          icon="el-icon-setting"
+          size="small"
+          @click.stop="handleRowClick(scope.row)"
+          v-if="userInfo.role_name.includes('admin')"
+        >字典配置
+        </el-button>
+      </template>
+      <template slot-scope="{row}" slot="code">
+        <el-tag @click="handleRowClick(row)" style="cursor:pointer">{{ row.code }}</el-tag>
+      </template>
+      <template slot-scope="{row}" slot="isSealed">
+        <el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
+      </template>
+    </avue-crud>
+    <el-dialog :title="`[${dictValue}]字典配置`"
+               append-to-body
+               :visible.sync="box"
+               width="1000px">
+      <avue-crud
+        :option="optionChild"
+        :table-loading="loadingChild"
+        :data="dataChild"
+        ref="crudChild"
+        v-model="formChild"
+        :permission="permissionList"
+        :before-open="beforeOpenChild"
+        :before-close="beforeCloseChild"
+        @row-del="rowDelChild"
+        @row-update="rowUpdateChild"
+        @row-save="rowSaveChild"
+        @search-change="searchChangeChild"
+        @search-reset="searchResetChild"
+        @selection-change="selectionChangeChild"
+        @current-change="currentChangeChild"
+        @size-change="sizeChangeChild"
+        @refresh-change="refreshChangeChild"
+        @on-load="onLoadChild"
+      >
+        <template slot="menuLeft">
+          <el-button
+            type="danger"
+            size="small"
+            icon="el-icon-delete"
+            v-if="permission.dict_delete"
+            plain
+            @click="handleDelete"
+          >删 除
+          </el-button>
+        </template>
+        <template slot-scope="scope" slot="menu">
+          <el-button
+            type="text"
+            icon="el-icon-circle-plus-outline"
+            size="small"
+            @click.stop="handleAdd(scope.row,scope.index)"
+            v-if="userInfo.role_name.includes('admin')"
+          >新增子项
+          </el-button>
+        </template>
+        <template slot-scope="{row}" slot="isSealed">
+          <el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
+        </template>
+      </avue-crud>
+    </el-dialog>
+  </basic-container>
 </template>
 
 <script>
-  import {
-    getParentList,
-    getChildList,
-    remove,
-    update,
-    add,
-    getDict,
-    getDictTree
-  } from "@/api/system/dict";
-  import {optionParent, optionChild} from "@/option/system/dict";
-  import {mapGetters} from "vuex";
+import {
+  getParentList,
+  getChildList,
+  remove,
+  update,
+  add,
+  getDict,
+  getDictTree
+} from "@/api/system/dict";
+import {optionParent, optionChild} from "@/option/system/dict";
+import {mapGetters} from "vuex";
 
-  export default {
-    data() {
+export default {
+  data() {
+    return {
+      dictValue: '暂无',
+      parentId: -1,
+      formParent: {},
+      formChild: {},
+      selectionList: [],
+      query: {},
+      box: false,
+      loading: true,
+      loadingChild: true,
+      pageParent: {
+        pageSize: 10,
+        pageSizes: [10, 30, 50, 100, 200],
+        currentPage: 1,
+        total: 0
+      },
+      pageChild: {
+        pageSize: 10,
+        pageSizes: [10, 30, 50, 100, 200],
+        currentPage: 1,
+        total: 0
+      },
+      dataParent: [],
+      dataChild: [],
+      optionParent: optionParent,
+      optionChild: optionChild,
+    };
+  },
+  computed: {
+    ...mapGetters(["userInfo", "permission"]),
+    permissionList() {
       return {
-        dictValue: '暂无',
-        parentId: -1,
-        formParent: {},
-        formChild: {},
-        selectionList: [],
-        query: {},
-        loading: true,
-        loadingChild: true,
-        pageParent: {
-          pageSize: 10,
-          pageSizes: [10, 30, 50, 100, 200],
-          currentPage: 1,
-          total: 0
-        },
-        pageChild: {
-          pageSize: 10,
-          pageSizes: [10, 30, 50, 100, 200],
-          currentPage: 1,
-          total: 0
-        },
-        dataParent: [],
-        dataChild: [],
-        optionParent: optionParent,
-        optionChild: optionChild,
+        addBtn: this.vaildData(this.permission.dict_add, false),
+        delBtn: this.vaildData(this.permission.dict_delete, false),
+        editBtn: this.vaildData(this.permission.dict_edit, false),
+        viewBtn: false,
       };
     },
-    computed: {
-      ...mapGetters(["userInfo", "permission"]),
-      permissionList() {
-        return {
-          addBtn: this.vaildData(this.permission.dict_add, false),
-          delBtn: this.vaildData(this.permission.dict_delete, false),
-          editBtn: this.vaildData(this.permission.dict_edit, false),
-          viewBtn: false,
-        };
-      },
-      ids() {
-        let ids = [];
-        this.selectionList.forEach(ele => {
-          ids.push(ele.id);
-        });
-        return ids.join(",");
-      }
+    ids() {
+      let ids = [];
+      this.selectionList.forEach(ele => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
+    }
+  },
+  mounted() {
+    this.initData();
+  },
+  methods: {
+    initData() {
+      getDictTree().then(res => {
+        const column = this.findObject(this.optionChild.column, "parentId");
+        column.dicData = res.data.data;
+      });
     },
-    mounted() {
-      this.initData();
+    handleAdd(row) {
+      this.formChild.dictValue = "";
+      this.formChild.dictKey = "";
+      this.formChild.sort = 0;
+      this.formChild.isSealed = 0;
+      this.formChild.remark = "";
+      this.formChild.parentId = row.id;
+      this.$refs.crudChild.rowAdd();
     },
-    methods: {
-      initData() {
-        getDictTree().then(res => {
-          const column = this.findObject(this.optionChild.column, "parentId");
-          column.dicData = res.data.data;
+    rowSave(row, done, loading) {
+      const form = {
+        ...row,
+        dictKey: -1,
+      };
+      add(form).then(() => {
+        this.onLoadParent(this.pageParent);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
         });
-      },
-      handleAdd(row) {
-        this.$refs.crudChild.value.dictValue = "";
-        this.$refs.crudChild.value.dictKey = "";
-        this.$refs.crudChild.value.sort = 0;
-        this.$refs.crudChild.value.isSealed = 0;
-        this.$refs.crudChild.value.remark = "";
-        this.$refs.crudChild.value.parentId = row.id;
-        this.$refs.crudChild.option.column.filter(item => {
-          if (item.prop === "parentId") {
-            item.value = row.id;
-          }
+        done();
+      }, error => {
+        window.console.log(error);
+        loading();
+      });
+    },
+    rowUpdate(row, index, done, loading) {
+      update(row).then(() => {
+        this.onLoadParent(this.pageParent);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
         });
-        this.$refs.crudChild.rowAdd();
-      },
-      rowSave(row, done, loading) {
-        const form = {
-          ...row,
-          dictKey: -1,
-        };
-        add(form).then(() => {
+        this.onLoadChild(this.pageChild);
+        done();
+      }, error => {
+        window.console.log(error);
+        loading();
+      });
+    },
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
           this.onLoadParent(this.pageParent);
           this.$message({
             type: "success",
             message: "操作成功!"
           });
-          done();
-        }, error => {
-          window.console.log(error);
-          loading();
         });
-      },
-      rowUpdate(row, index, done, loading) {
-        update(row).then(() => {
+    },
+    handleRowClick(row) {
+      this.query = {};
+      this.parentId = row.id;
+      this.dictValue = row.dictValue;
+
+      const code = this.findObject(this.optionChild.column, "code");
+      code.value = row.code;
+      const parentId = this.findObject(this.optionChild.column, "parentId");
+      parentId.value = row.id;
+
+      this.box = true;
+      this.onLoadChild(this.pageChild);
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoadParent(this.pageParent);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.pageParent.currentPage = 1;
+      this.onLoadParent(this.pageParent, params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
           this.onLoadParent(this.pageParent);
           this.$message({
             type: "success",
             message: "操作成功!"
           });
-          this.onLoadChild(this.pageChild);
-          done();
-        }, error => {
-          window.console.log(error);
-          loading();
+          this.$refs.crud.toggleSelection();
         });
-      },
-      rowDel(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(row.id);
-          })
-          .then(() => {
-            this.onLoadParent(this.pageParent);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      handleRowClick(row) {
-        this.query = {};
-        this.parentId = row.id;
-        this.dictValue = row.dictValue;
-        this.$refs.crudChild.value.code = row.code;
-        this.$refs.crudChild.value.parentId = row.id;
-        this.$refs.crudChild.option.column.filter(item => {
-          if (item.prop === "code") {
-            item.value = row.code;
-          }
-          if (item.prop === "parentId") {
-            item.value = row.id;
-          }
+    },
+    beforeOpen(done, type) {
+      if (["edit", "view"].includes(type)) {
+        getDict(this.formParent.id).then(res => {
+          this.formParent = res.data.data;
         });
+      }
+      done();
+    },
+    currentChange(currentPage) {
+      this.pageParent.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.pageParent.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoadParent(this.pageParent, this.query);
+    },
+    rowSaveChild(row, done, loading) {
+      add(row).then(() => {
         this.onLoadChild(this.pageChild);
-      },
-      searchReset() {
-        this.query = {};
-        this.onLoadParent(this.pageParent);
-      },
-      searchChange(params, done) {
-        this.query = params;
-        this.pageParent.currentPage = 1;
-        this.onLoadParent(this.pageParent, params);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
         done();
-      },
-      selectionChange(list) {
-        this.selectionList = list;
-      },
-      selectionClear() {
-        this.selectionList = [];
-        this.$refs.crud.toggleSelection();
-      },
-      handleDelete() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
-        }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(this.ids);
-          })
-          .then(() => {
-            this.onLoadParent(this.pageParent);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crud.toggleSelection();
-          });
-      },
-      beforeOpen(done, type) {
-        if (["edit", "view"].includes(type)) {
-          getDict(this.formParent.id).then(res => {
-            this.formParent = res.data.data;
-          });
-        }
+      }, error => {
+        window.console.log(error);
+        loading();
+      });
+    },
+    rowUpdateChild(row, index, done, loading) {
+      update(row).then(() => {
+        this.onLoadChild(this.pageChild);
+        this.$message({
+          type: "success",
+          message: "操作成功!"
+        });
         done();
-      },
-      currentChange(currentPage) {
-        this.pageParent.currentPage = currentPage;
-      },
-      sizeChange(pageSize) {
-        this.pageParent.pageSize = pageSize;
-      },
-      refreshChange() {
-        this.onLoadParent(this.pageParent, this.query);
-      },
-      rowSaveChild(row, done, loading) {
-        add(row).then(() => {
+      }, error => {
+        window.console.log(error);
+        loading();
+      });
+    },
+    rowDelChild(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
           this.onLoadChild(this.pageChild);
           this.$message({
             type: "success",
             message: "操作成功!"
           });
-          done();
-        }, error => {
-          window.console.log(error);
-          loading();
         });
-      },
-      rowUpdateChild(row, index, done, loading) {
-        update(row).then(() => {
+    },
+    searchResetChild() {
+      this.query = {};
+      this.onLoadChild(this.pageChild);
+    },
+    searchChangeChild(params, done) {
+      this.query = params;
+      this.pageChild.currentPage = 1;
+      this.onLoadChild(this.pageChild, params);
+      done();
+    },
+    selectionChangeChild(list) {
+      this.selectionList = list;
+    },
+    selectionClearChild() {
+      this.selectionList = [];
+      this.$refs.crudChild.toggleSelection();
+    },
+    handleDeleteChild() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
           this.onLoadChild(this.pageChild);
           this.$message({
             type: "success",
             message: "操作成功!"
           });
-          done();
-        }, error => {
-          window.console.log(error);
-          loading();
-        });
-      },
-      rowDelChild(row) {
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(row.id);
-          })
-          .then(() => {
-            this.onLoadChild(this.pageChild);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-          });
-      },
-      searchResetChild() {
-        this.query = {};
-        this.onLoadChild(this.pageChild);
-      },
-      searchChangeChild(params, done) {
-        this.query = params;
-        this.pageChild.currentPage = 1;
-        this.onLoadChild(this.pageChild, params);
-        done();
-      },
-      selectionChangeChild(list) {
-        this.selectionList = list;
-      },
-      selectionClearChild() {
-        this.selectionList = [];
-        this.$refs.crudChild.toggleSelection();
-      },
-      handleDeleteChild() {
-        if (this.selectionList.length === 0) {
-          this.$message.warning("请选择至少一条数据");
-          return;
-        }
-        this.$confirm("确定将选择数据删除?", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            return remove(this.ids);
-          })
-          .then(() => {
-            this.onLoadChild(this.pageChild);
-            this.$message({
-              type: "success",
-              message: "操作成功!"
-            });
-            this.$refs.crudChild.toggleSelection();
-          });
-      },
-      beforeOpenChild(done, type) {
-        if (["add", "edit"].includes(type)) {
-          this.initData();
-        }
-        if (["edit", "view"].includes(type)) {
-          getDict(this.formChild.id).then(res => {
-            this.formChild = res.data.data;
-          });
-        }
-        done();
-      },
-      beforeCloseChild(done) {
-        this.$refs.crudChild.value.parentId = this.parentId;
-        this.$refs.crudChild.option.column.filter(item => {
-          if (item.prop === "parentId") {
-            item.value = this.parentId;
-          }
-        });
-        done();
-      },
-      currentChangeChild(currentPage) {
-        this.pageChild.currentPage = currentPage;
-      },
-      sizeChangeChild(pageSize) {
-        this.pageChild.pageSize = pageSize;
-      },
-      refreshChangeChild() {
-        this.onLoadChild(this.pageChild, this.query);
-      },
-      onLoadParent(page, params = {}) {
-        this.loading = true;
-        getParentList(
-          page.currentPage,
-          page.pageSize,
-          Object.assign(params, this.query)
-        ).then(res => {
-          const data = res.data.data;
-          this.pageParent.total = data.total;
-          this.dataParent = data.records;
-          this.loading = false;
-          this.selectionClear();
+          this.$refs.crudChild.toggleSelection();
         });
-      },
-      onLoadChild(page, params = {}) {
-        this.loadingChild = true;
-        getChildList(
-          page.currentPage,
-          page.pageSize,
-          this.parentId,
-          Object.assign(params, this.query)
-        ).then(res => {
-          this.dataChild = res.data.data;
-          this.loadingChild = false;
-          this.selectionClear();
+    },
+    beforeOpenChild(done, type) {
+      if (["add", "edit"].includes(type)) {
+        this.initData();
+      }
+      if (["edit", "view"].includes(type)) {
+        getDict(this.formChild.id).then(res => {
+          this.formChild = res.data.data;
         });
       }
+      done();
+    },
+    beforeCloseChild(done) {
+      this.$refs.crudChild.value.parentId = this.parentId;
+      this.$refs.crudChild.option.column.filter(item => {
+        if (item.prop === "parentId") {
+          item.value = this.parentId;
+        }
+      });
+      done();
+    },
+    currentChangeChild(currentPage) {
+      this.pageChild.currentPage = currentPage;
+    },
+    sizeChangeChild(pageSize) {
+      this.pageChild.pageSize = pageSize;
+    },
+    refreshChangeChild() {
+      this.onLoadChild(this.pageChild, this.query);
+    },
+    onLoadParent(page, params = {}) {
+      this.loading = true;
+      getParentList(
+        page.currentPage,
+        page.pageSize,
+        Object.assign(params, this.query)
+      ).then(res => {
+        const data = res.data.data;
+        this.pageParent.total = data.total;
+        this.dataParent = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
+    },
+    onLoadChild(page, params = {}) {
+      this.loadingChild = true;
+      getChildList(
+        page.currentPage,
+        page.pageSize,
+        this.parentId,
+        Object.assign(params, this.query)
+      ).then(res => {
+        this.dataChild = res.data.data;
+        this.loadingChild = false;
+        this.selectionClear();
+      });
     }
-  };
+  }
+};
 </script>
 
diff --git a/src/views/system/dictbiz.vue b/src/views/system/dictbiz.vue
index cb7748e..d7772fe 100644
--- a/src/views/system/dictbiz.vue
+++ b/src/views/system/dictbiz.vue
@@ -1,109 +1,105 @@
 <template>
-  <el-row>
-    <el-col :span="11">
-      <basic-container>
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>业务字典列表</span>
-          </div>
-          <div class="clearfix">
-            <avue-crud
-              :option="optionParent"
-              :table-loading="loading"
-              :data="dataParent"
-              :page="pageParent"
-              ref="crud"
-              v-model="formParent"
-              :permission="permissionList"
-              :before-open="beforeOpen"
-              @row-del="rowDel"
-              @row-update="rowUpdate"
-              @row-save="rowSave"
-              @row-click="handleRowClick"
-              @search-change="searchChange"
-              @search-reset="searchReset"
-              @selection-change="selectionChange"
-              @current-change="currentChange"
-              @size-change="sizeChange"
-              @refresh-change="refreshChange"
-              @on-load="onLoadParent"
-            >
-              <template slot="menuLeft">
-                <el-button
-                  type="danger"
-                  size="small"
-                  icon="el-icon-delete"
-                  v-if="permission.dict_delete"
-                  plain
-                  @click="handleDelete"
-                >删 除
-                </el-button>
-              </template>
-              <template slot-scope="{row}" slot="isSealed">
-                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
-              </template>
-            </avue-crud>
-          </div>
-        </el-card>
-      </basic-container>
-    </el-col>
-    <el-col :span="13">
-      <basic-container>
-        <el-card class="box-card">
-          <div slot="header" class="clearfix">
-            <span>[{{dictValue}}] 业务字典详情</span>
-          </div>
-          <div class="clearfix">
-            <avue-crud
-              :option="optionChild"
-              :table-loading="loadingChild"
-              :data="dataChild"
-              ref="crudChild"
-              v-model="formChild"
-              :permission="permissionList"
-              :before-open="beforeOpenChild"
-              :before-close="beforeCloseChild"
-              @row-del="rowDelChild"
-              @row-update="rowUpdateChild"
-              @row-save="rowSaveChild"
-              @search-change="searchChangeChild"
-              @search-reset="searchResetChild"
-              @selection-change="selectionChangeChild"
-              @current-change="currentChangeChild"
-              @size-change="sizeChangeChild"
-              @refresh-change="refreshChangeChild"
-              @on-load="onLoadChild"
-            >
-              <template slot="menuLeft">
-                <el-button
-                  type="danger"
-                  size="small"
-                  icon="el-icon-delete"
-                  v-if="permission.dict_delete"
-                  plain
-                  @click="handleDelete"
-                >删 除
-                </el-button>
-              </template>
-              <template slot-scope="scope" slot="menu">
-                <el-button
-                  type="text"
-                  icon="el-icon-circle-plus-outline"
-                  size="small"
-                  @click.stop="handleAdd(scope.row,scope.index)"
-                  v-if="userInfo.role_name.includes('admin')"
-                >新增子项
-                </el-button>
-              </template>
-              <template slot-scope="{row}" slot="isSealed">
-                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
-              </template>
-            </avue-crud>
-          </div>
-        </el-card>
-      </basic-container>
-    </el-col>
-  </el-row>
+  <basic-container>
+    <avue-crud
+      :option="optionParent"
+      :table-loading="loading"
+      :data="dataParent"
+      :page="pageParent"
+      ref="crud"
+      v-model="formParent"
+      :permission="permissionList"
+      :before-open="beforeOpen"
+      @row-del="rowDel"
+      @row-update="rowUpdate"
+      @row-save="rowSave"
+      @row-click="handleRowClick"
+      @search-change="searchChange"
+      @search-reset="searchReset"
+      @selection-change="selectionChange"
+      @current-change="currentChange"
+      @size-change="sizeChange"
+      @refresh-change="refreshChange"
+      @on-load="onLoadParent"
+    >
+      <template slot="menuLeft">
+        <el-button
+          type="danger"
+          size="small"
+          icon="el-icon-delete"
+          v-if="permission.dictbiz_delete"
+          plain
+          @click="handleDelete"
+        >删 除
+        </el-button>
+      </template>
+      <template slot-scope="scope" slot="menu">
+        <el-button
+          type="text"
+          icon="el-icon-setting"
+          size="small"
+          @click.stop="handleRowClick(scope.row)"
+          v-if="userInfo.role_name.includes('admin')"
+        >字典配置
+        </el-button>
+      </template>
+      <template slot-scope="{row}" slot="code">
+        <el-tag @click="handleRowClick(row)" style="cursor:pointer">{{ row.code }}</el-tag>
+      </template>
+      <template slot-scope="{row}" slot="isSealed">
+        <el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
+      </template>
+    </avue-crud>
+    <el-dialog :title="`[${dictValue}]字典配置`"
+               append-to-body
+               :visible.sync="box"
+               width="1000px">
+      <avue-crud
+        :option="optionChild"
+        :table-loading="loadingChild"
+        :data="dataChild"
+        ref="crudChild"
+        v-model="formChild"
+        :permission="permissionList"
+        :before-open="beforeOpenChild"
+        :before-close="beforeCloseChild"
+        @row-del="rowDelChild"
+        @row-update="rowUpdateChild"
+        @row-save="rowSaveChild"
+        @search-change="searchChangeChild"
+        @search-reset="searchResetChild"
+        @selection-change="selectionChangeChild"
+        @current-change="currentChangeChild"
+        @size-change="sizeChangeChild"
+        @refresh-change="refreshChangeChild"
+        @on-load="onLoadChild"
+      >
+        <template slot="menuLeft">
+          <el-button
+            type="danger"
+            size="small"
+            icon="el-icon-delete"
+            v-if="permission.dict_delete"
+            plain
+            @click="handleDelete"
+          >删 除
+          </el-button>
+        </template>
+        <template slot-scope="scope" slot="menu">
+          <el-button
+            type="text"
+            icon="el-icon-circle-plus-outline"
+            size="small"
+            @click.stop="handleAdd(scope.row,scope.index)"
+            v-if="userInfo.role_name.includes('admin')"
+          >新增子项
+          </el-button>
+        </template>
+        <template slot-scope="{row}" slot="isSealed">
+          <el-tag>{{ row.isSealed === 0 ? '否' : '是' }}</el-tag>
+        </template>
+      </avue-crud>
+    </el-dialog>
+  </basic-container>
 </template>
 
 <script>
@@ -128,6 +124,7 @@
         formChild: {},
         selectionList: [],
         query: {},
+        box: false,
         loading: true,
         loadingChild: true,
         pageParent: {
@@ -177,12 +174,12 @@
         });
       },
       handleAdd(row) {
-        this.$refs.crudChild.value.parentId = row.id;
-        this.$refs.crudChild.option.column.filter(item => {
-          if (item.prop === "parentId") {
-            item.value = row.id;
-          }
-        });
+        this.formChild.dictValue = "";
+        this.formChild.dictKey = "";
+        this.formChild.sort = 0;
+        this.formChild.isSealed = 0;
+        this.formChild.remark = "";
+        this.formChild.parentId = row.id;
         this.$refs.crudChild.rowAdd();
       },
       rowSave(row, done, loading) {
@@ -209,6 +206,7 @@
             type: "success",
             message: "操作成功!"
           });
+          this.onLoadChild(this.pageChild);
           done();
         }, error => {
           window.console.log(error);
@@ -236,16 +234,13 @@
         this.query = {};
         this.parentId = row.id;
         this.dictValue = row.dictValue;
-        this.$refs.crudChild.value.code = row.code;
-        this.$refs.crudChild.value.parentId = row.id;
-        this.$refs.crudChild.option.column.filter(item => {
-          if (item.prop === "code") {
-            item.value = row.code;
-          }
-          if (item.prop === "parentId") {
-            item.value = row.id;
-          }
-        });
+
+        const code = this.findObject(this.optionChild.column, "code");
+        code.value = row.code;
+        const parentId = this.findObject(this.optionChild.column, "parentId");
+        parentId.value = row.id;
+
+        this.box = true;
         this.onLoadChild(this.pageChild);
       },
       searchReset() {
diff --git a/src/views/util/demo/dict.vue b/src/views/util/demo/dict.vue
new file mode 100644
index 0000000..b1d5536
--- /dev/null
+++ b/src/views/util/demo/dict.vue
@@ -0,0 +1,454 @@
+<template>
+  <el-row>
+    <el-col :span="11">
+      <basic-container>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>字典列表</span>
+          </div>
+          <div class="clearfix">
+            <avue-crud
+              :option="optionParent"
+              :table-loading="loading"
+              :data="dataParent"
+              :page="pageParent"
+              ref="crud"
+              v-model="formParent"
+              :permission="permissionList"
+              :before-open="beforeOpen"
+              @row-del="rowDel"
+              @row-update="rowUpdate"
+              @row-save="rowSave"
+              @row-click="handleRowClick"
+              @search-change="searchChange"
+              @search-reset="searchReset"
+              @selection-change="selectionChange"
+              @current-change="currentChange"
+              @size-change="sizeChange"
+              @refresh-change="refreshChange"
+              @on-load="onLoadParent"
+            >
+              <template slot="menuLeft">
+                <el-button
+                  type="danger"
+                  size="small"
+                  icon="el-icon-delete"
+                  v-if="permission.dict_delete"
+                  plain
+                  @click="handleDelete"
+                >删 除
+                </el-button>
+              </template>
+              <template slot-scope="{row}" slot="isSealed">
+                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
+              </template>
+            </avue-crud>
+          </div>
+        </el-card>
+      </basic-container>
+    </el-col>
+    <el-col :span="13">
+      <basic-container>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>[{{dictValue}}] 字典详情</span>
+          </div>
+          <div class="clearfix">
+            <avue-crud
+              :option="optionChild"
+              :table-loading="loadingChild"
+              :data="dataChild"
+              ref="crudChild"
+              v-model="formChild"
+              :permission="permissionList"
+              :before-open="beforeOpenChild"
+              :before-close="beforeCloseChild"
+              @row-del="rowDelChild"
+              @row-update="rowUpdateChild"
+              @row-save="rowSaveChild"
+              @search-change="searchChangeChild"
+              @search-reset="searchResetChild"
+              @selection-change="selectionChangeChild"
+              @current-change="currentChangeChild"
+              @size-change="sizeChangeChild"
+              @refresh-change="refreshChangeChild"
+              @on-load="onLoadChild"
+            >
+              <template slot="menuLeft">
+                <el-button
+                  type="danger"
+                  size="small"
+                  icon="el-icon-delete"
+                  v-if="permission.dict_delete"
+                  plain
+                  @click="handleDelete"
+                >删 除
+                </el-button>
+              </template>
+              <template slot-scope="scope" slot="menu">
+                <el-button
+                  type="text"
+                  icon="el-icon-circle-plus-outline"
+                  size="small"
+                  @click.stop="handleAdd(scope.row,scope.index)"
+                  v-if="userInfo.role_name.includes('admin')"
+                >新增子项
+                </el-button>
+              </template>
+              <template slot-scope="{row}" slot="isSealed">
+                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
+              </template>
+            </avue-crud>
+          </div>
+        </el-card>
+      </basic-container>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {
+    getParentList,
+    getChildList,
+    remove,
+    update,
+    add,
+    getDict,
+    getDictTree
+  } from "@/api/system/dict";
+  import {optionParent, optionChild} from "@/option/system/dict";
+  import {mapGetters} from "vuex";
+
+  export default {
+    data() {
+      return {
+        dictValue: '暂无',
+        parentId: -1,
+        formParent: {},
+        formChild: {},
+        selectionList: [],
+        query: {},
+        loading: true,
+        loadingChild: true,
+        pageParent: {
+          pageSize: 10,
+          pageSizes: [10, 30, 50, 100, 200],
+          currentPage: 1,
+          total: 0
+        },
+        pageChild: {
+          pageSize: 10,
+          pageSizes: [10, 30, 50, 100, 200],
+          currentPage: 1,
+          total: 0
+        },
+        dataParent: [],
+        dataChild: [],
+        optionParent: optionParent,
+        optionChild: optionChild,
+      };
+    },
+    computed: {
+      ...mapGetters(["userInfo", "permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.dict_add, false),
+          delBtn: this.vaildData(this.permission.dict_delete, false),
+          editBtn: this.vaildData(this.permission.dict_edit, false),
+          viewBtn: false,
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    mounted() {
+      this.initData();
+    },
+    methods: {
+      initData() {
+        getDictTree().then(res => {
+          const column = this.findObject(this.optionChild.column, "parentId");
+          column.dicData = res.data.data;
+        });
+      },
+      handleAdd(row) {
+        this.$refs.crudChild.value.dictValue = "";
+        this.$refs.crudChild.value.dictKey = "";
+        this.$refs.crudChild.value.sort = 0;
+        this.$refs.crudChild.value.isSealed = 0;
+        this.$refs.crudChild.value.remark = "";
+        this.$refs.crudChild.value.parentId = row.id;
+        this.$refs.crudChild.option.column.filter(item => {
+          if (item.prop === "parentId") {
+            item.value = row.id;
+          }
+        });
+        this.$refs.crudChild.rowAdd();
+      },
+      rowSave(row, done, loading) {
+        const form = {
+          ...row,
+          dictKey: -1,
+        };
+        add(form).then(() => {
+          this.onLoadParent(this.pageParent);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        update(row).then(() => {
+          this.onLoadParent(this.pageParent);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          this.onLoadChild(this.pageChild);
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoadParent(this.pageParent);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleRowClick(row) {
+        this.query = {};
+        this.parentId = row.id;
+        this.dictValue = row.dictValue;
+        this.$refs.crudChild.value.code = row.code;
+        this.$refs.crudChild.value.parentId = row.id;
+        this.$refs.crudChild.option.column.filter(item => {
+          if (item.prop === "code") {
+            item.value = row.code;
+          }
+          if (item.prop === "parentId") {
+            item.value = row.id;
+          }
+        });
+        this.onLoadChild(this.pageChild);
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoadParent(this.pageParent);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.pageParent.currentPage = 1;
+        this.onLoadParent(this.pageParent, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoadParent(this.pageParent);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          getDict(this.formParent.id).then(res => {
+            this.formParent = res.data.data;
+          });
+        }
+        done();
+      },
+      currentChange(currentPage) {
+        this.pageParent.currentPage = currentPage;
+      },
+      sizeChange(pageSize) {
+        this.pageParent.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoadParent(this.pageParent, this.query);
+      },
+      rowSaveChild(row, done, loading) {
+        add(row).then(() => {
+          this.onLoadChild(this.pageChild);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowUpdateChild(row, index, done, loading) {
+        update(row).then(() => {
+          this.onLoadChild(this.pageChild);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowDelChild(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoadChild(this.pageChild);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      searchResetChild() {
+        this.query = {};
+        this.onLoadChild(this.pageChild);
+      },
+      searchChangeChild(params, done) {
+        this.query = params;
+        this.pageChild.currentPage = 1;
+        this.onLoadChild(this.pageChild, params);
+        done();
+      },
+      selectionChangeChild(list) {
+        this.selectionList = list;
+      },
+      selectionClearChild() {
+        this.selectionList = [];
+        this.$refs.crudChild.toggleSelection();
+      },
+      handleDeleteChild() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoadChild(this.pageChild);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crudChild.toggleSelection();
+          });
+      },
+      beforeOpenChild(done, type) {
+        if (["add", "edit"].includes(type)) {
+          this.initData();
+        }
+        if (["edit", "view"].includes(type)) {
+          getDict(this.formChild.id).then(res => {
+            this.formChild = res.data.data;
+          });
+        }
+        done();
+      },
+      beforeCloseChild(done) {
+        this.$refs.crudChild.value.parentId = this.parentId;
+        this.$refs.crudChild.option.column.filter(item => {
+          if (item.prop === "parentId") {
+            item.value = this.parentId;
+          }
+        });
+        done();
+      },
+      currentChangeChild(currentPage) {
+        this.pageChild.currentPage = currentPage;
+      },
+      sizeChangeChild(pageSize) {
+        this.pageChild.pageSize = pageSize;
+      },
+      refreshChangeChild() {
+        this.onLoadChild(this.pageChild, this.query);
+      },
+      onLoadParent(page, params = {}) {
+        this.loading = true;
+        getParentList(
+          page.currentPage,
+          page.pageSize,
+          Object.assign(params, this.query)
+        ).then(res => {
+          const data = res.data.data;
+          this.pageParent.total = data.total;
+          this.dataParent = data.records;
+          this.loading = false;
+          this.selectionClear();
+        });
+      },
+      onLoadChild(page, params = {}) {
+        this.loadingChild = true;
+        getChildList(
+          page.currentPage,
+          page.pageSize,
+          this.parentId,
+          Object.assign(params, this.query)
+        ).then(res => {
+          this.dataChild = res.data.data;
+          this.loadingChild = false;
+          this.selectionClear();
+        });
+      }
+    }
+  };
+</script>
+
diff --git a/src/views/util/demo/dictbiz.vue b/src/views/util/demo/dictbiz.vue
new file mode 100644
index 0000000..cb7748e
--- /dev/null
+++ b/src/views/util/demo/dictbiz.vue
@@ -0,0 +1,447 @@
+<template>
+  <el-row>
+    <el-col :span="11">
+      <basic-container>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>业务字典列表</span>
+          </div>
+          <div class="clearfix">
+            <avue-crud
+              :option="optionParent"
+              :table-loading="loading"
+              :data="dataParent"
+              :page="pageParent"
+              ref="crud"
+              v-model="formParent"
+              :permission="permissionList"
+              :before-open="beforeOpen"
+              @row-del="rowDel"
+              @row-update="rowUpdate"
+              @row-save="rowSave"
+              @row-click="handleRowClick"
+              @search-change="searchChange"
+              @search-reset="searchReset"
+              @selection-change="selectionChange"
+              @current-change="currentChange"
+              @size-change="sizeChange"
+              @refresh-change="refreshChange"
+              @on-load="onLoadParent"
+            >
+              <template slot="menuLeft">
+                <el-button
+                  type="danger"
+                  size="small"
+                  icon="el-icon-delete"
+                  v-if="permission.dict_delete"
+                  plain
+                  @click="handleDelete"
+                >删 除
+                </el-button>
+              </template>
+              <template slot-scope="{row}" slot="isSealed">
+                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
+              </template>
+            </avue-crud>
+          </div>
+        </el-card>
+      </basic-container>
+    </el-col>
+    <el-col :span="13">
+      <basic-container>
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <span>[{{dictValue}}] 业务字典详情</span>
+          </div>
+          <div class="clearfix">
+            <avue-crud
+              :option="optionChild"
+              :table-loading="loadingChild"
+              :data="dataChild"
+              ref="crudChild"
+              v-model="formChild"
+              :permission="permissionList"
+              :before-open="beforeOpenChild"
+              :before-close="beforeCloseChild"
+              @row-del="rowDelChild"
+              @row-update="rowUpdateChild"
+              @row-save="rowSaveChild"
+              @search-change="searchChangeChild"
+              @search-reset="searchResetChild"
+              @selection-change="selectionChangeChild"
+              @current-change="currentChangeChild"
+              @size-change="sizeChangeChild"
+              @refresh-change="refreshChangeChild"
+              @on-load="onLoadChild"
+            >
+              <template slot="menuLeft">
+                <el-button
+                  type="danger"
+                  size="small"
+                  icon="el-icon-delete"
+                  v-if="permission.dict_delete"
+                  plain
+                  @click="handleDelete"
+                >删 除
+                </el-button>
+              </template>
+              <template slot-scope="scope" slot="menu">
+                <el-button
+                  type="text"
+                  icon="el-icon-circle-plus-outline"
+                  size="small"
+                  @click.stop="handleAdd(scope.row,scope.index)"
+                  v-if="userInfo.role_name.includes('admin')"
+                >新增子项
+                </el-button>
+              </template>
+              <template slot-scope="{row}" slot="isSealed">
+                <el-tag>{{row.isSealed===0?'否':'是'}}</el-tag>
+              </template>
+            </avue-crud>
+          </div>
+        </el-card>
+      </basic-container>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+  import {
+    getParentList,
+    getChildList,
+    remove,
+    update,
+    add,
+    getDict,
+    getDictTree
+  } from "@/api/system/dictbiz";
+  import {optionParent, optionChild} from "@/option/system/dictbiz";
+  import {mapGetters} from "vuex";
+
+  export default {
+    data() {
+      return {
+        dictValue: '暂无',
+        parentId: -1,
+        formParent: {},
+        formChild: {},
+        selectionList: [],
+        query: {},
+        loading: true,
+        loadingChild: true,
+        pageParent: {
+          pageSize: 10,
+          pageSizes: [10, 30, 50, 100, 200],
+          currentPage: 1,
+          total: 0
+        },
+        pageChild: {
+          pageSize: 10,
+          pageSizes: [10, 30, 50, 100, 200],
+          currentPage: 1,
+          total: 0
+        },
+        dataParent: [],
+        dataChild: [],
+        optionParent: optionParent,
+        optionChild: optionChild,
+      };
+    },
+    computed: {
+      ...mapGetters(["userInfo", "permission"]),
+      permissionList() {
+        return {
+          addBtn: this.vaildData(this.permission.dictbiz_add, false),
+          delBtn: this.vaildData(this.permission.dictbiz_delete, false),
+          editBtn: this.vaildData(this.permission.dictbiz_edit, false),
+          viewBtn: false,
+        };
+      },
+      ids() {
+        let ids = [];
+        this.selectionList.forEach(ele => {
+          ids.push(ele.id);
+        });
+        return ids.join(",");
+      }
+    },
+    mounted() {
+      this.initData();
+    },
+    methods: {
+      initData() {
+        getDictTree().then(res => {
+          const column = this.findObject(this.optionChild.column, "parentId");
+          column.dicData = res.data.data;
+        });
+      },
+      handleAdd(row) {
+        this.$refs.crudChild.value.parentId = row.id;
+        this.$refs.crudChild.option.column.filter(item => {
+          if (item.prop === "parentId") {
+            item.value = row.id;
+          }
+        });
+        this.$refs.crudChild.rowAdd();
+      },
+      rowSave(row, done, loading) {
+        const form = {
+          ...row,
+          dictKey: -1,
+        };
+        add(form).then(() => {
+          this.onLoadParent(this.pageParent);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowUpdate(row, index, done, loading) {
+        update(row).then(() => {
+          this.onLoadParent(this.pageParent);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowDel(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoadParent(this.pageParent);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      handleRowClick(row) {
+        this.query = {};
+        this.parentId = row.id;
+        this.dictValue = row.dictValue;
+        this.$refs.crudChild.value.code = row.code;
+        this.$refs.crudChild.value.parentId = row.id;
+        this.$refs.crudChild.option.column.filter(item => {
+          if (item.prop === "code") {
+            item.value = row.code;
+          }
+          if (item.prop === "parentId") {
+            item.value = row.id;
+          }
+        });
+        this.onLoadChild(this.pageChild);
+      },
+      searchReset() {
+        this.query = {};
+        this.onLoadParent(this.pageParent);
+      },
+      searchChange(params, done) {
+        this.query = params;
+        this.pageParent.currentPage = 1;
+        this.onLoadParent(this.pageParent, params);
+        done();
+      },
+      selectionChange(list) {
+        this.selectionList = list;
+      },
+      selectionClear() {
+        this.selectionList = [];
+        this.$refs.crud.toggleSelection();
+      },
+      handleDelete() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoadParent(this.pageParent);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crud.toggleSelection();
+          });
+      },
+      beforeOpen(done, type) {
+        if (["edit", "view"].includes(type)) {
+          getDict(this.formParent.id).then(res => {
+            this.formParent = res.data.data;
+          });
+        }
+        done();
+      },
+      currentChange(currentPage) {
+        this.pageParent.currentPage = currentPage;
+      },
+      sizeChange(pageSize) {
+        this.pageParent.pageSize = pageSize;
+      },
+      refreshChange() {
+        this.onLoadParent(this.pageParent, this.query);
+      },
+      rowSaveChild(row, done, loading) {
+        add(row).then(() => {
+          this.onLoadChild(this.pageChild);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowUpdateChild(row, index, done, loading) {
+        update(row).then(() => {
+          this.onLoadChild(this.pageChild);
+          this.$message({
+            type: "success",
+            message: "操作成功!"
+          });
+          done();
+        }, error => {
+          window.console.log(error);
+          loading();
+        });
+      },
+      rowDelChild(row) {
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(row.id);
+          })
+          .then(() => {
+            this.onLoadChild(this.pageChild);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+          });
+      },
+      searchResetChild() {
+        this.query = {};
+        this.onLoadChild(this.pageChild);
+      },
+      searchChangeChild(params, done) {
+        this.query = params;
+        this.pageChild.currentPage = 1;
+        this.onLoadChild(this.pageChild, params);
+        done();
+      },
+      selectionChangeChild(list) {
+        this.selectionList = list;
+      },
+      selectionClearChild() {
+        this.selectionList = [];
+        this.$refs.crudChild.toggleSelection();
+      },
+      handleDeleteChild() {
+        if (this.selectionList.length === 0) {
+          this.$message.warning("请选择至少一条数据");
+          return;
+        }
+        this.$confirm("确定将选择数据删除?", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            return remove(this.ids);
+          })
+          .then(() => {
+            this.onLoadChild(this.pageChild);
+            this.$message({
+              type: "success",
+              message: "操作成功!"
+            });
+            this.$refs.crudChild.toggleSelection();
+          });
+      },
+      beforeOpenChild(done, type) {
+        if (["add", "edit"].includes(type)) {
+          this.initData();
+        }
+        if (["edit", "view"].includes(type)) {
+          getDict(this.formChild.id).then(res => {
+            this.formChild = res.data.data;
+          });
+        }
+        done();
+      },
+      beforeCloseChild(done) {
+        this.$refs.crudChild.value.parentId = this.parentId;
+        this.$refs.crudChild.option.column.filter(item => {
+          if (item.prop === "parentId") {
+            item.value = this.parentId;
+          }
+        });
+        done();
+      },
+      currentChangeChild(currentPage) {
+        this.pageChild.currentPage = currentPage;
+      },
+      sizeChangeChild(pageSize) {
+        this.pageChild.pageSize = pageSize;
+      },
+      refreshChangeChild() {
+        this.onLoadChild(this.pageChild, this.query);
+      },
+      onLoadParent(page, params = {}) {
+        this.loading = true;
+        getParentList(
+          page.currentPage,
+          page.pageSize,
+          Object.assign(params, this.query)
+        ).then(res => {
+          const data = res.data.data;
+          this.pageParent.total = data.total;
+          this.dataParent = data.records;
+          this.loading = false;
+          this.selectionClear();
+        });
+      },
+      onLoadChild(page, params = {}) {
+        this.loadingChild = true;
+        getChildList(
+          page.currentPage,
+          page.pageSize,
+          this.parentId,
+          Object.assign(params, this.query)
+        ).then(res => {
+          this.dataChild = res.data.data;
+          this.loadingChild = false;
+          this.selectionClear();
+        });
+      }
+    }
+  };
+</script>