perf: dict perfect

src/views/system/dict/config.vue

@@ -0,0 +1,177 @@
+<template>
+  <div class="config">
+    <el-drawer
+      :model-value="drawer"
+      :title="drawTitle"
+      :direction="direction"
+      :before-close="handleClose"
+      destroy-on-close
+      size="620px"
+    >
+      <el-divider></el-divider>
+      <!-- 列表 -->
+      <div class="list">
+        <vxe-table
+          ref="xTable"
+          border
+          :data="tableData"
+          @checkbox-change="checkboxChangeEvent"
+          @checkbox-all="checkboxChangeEvent"
+        >
+          <vxe-table-column type="checkbox" width="60"></vxe-table-column>
+          <vxe-table-column field="name" title="名称"></vxe-table-column>
+          <vxe-table-column field="dataval" title="数据值"></vxe-table-column>
+          <vxe-table-column title="操作" fixed="right">
+            <template #default="{ row }">
+              <vxe-button type="text" icon="el-icon-edit" @click="editConfig(row)">编辑</vxe-button>
+              <vxe-button type="text" icon="el-icon-delete" @click="delConfig(row)">删除</vxe-button>
+            </template>
+          </vxe-table-column>
+        </vxe-table>
+        <vxe-pager
+          perfect
+          v-model:current-page="tablePage.currentPage"
+          v-model:page-size="tablePage.pageSize"
+          :total="tablePage.total"
+          :layouts="['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
+        >
+          <template #left>
+            <span class="page-left">
+              <vxe-checkbox
+                v-model="isAllChecked"
+                :indeterminate="isIndeterminate"
+                @change="changeAllEvent"
+              ></vxe-checkbox>
+              <span class="select-count">已选中{{ selectRecords.length }}条</span>
+              <vxe-button>删除</vxe-button>
+            </span>
+          </template>
+        </vxe-pager>
+      </div>
+    </el-drawer>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref } from "vue";
+import { propTypes } from "/@/utils/propTypes";
+import { VxeTableEvents } from "vxe-table";
+import { templateRef } from "@vueuse/core";
+
+export default defineComponent({
+  props: {
+    drawer: propTypes.bool.def(false),
+    drawTitle: propTypes.string.def(""),
+    direction: propTypes.string.def("rtl")
+  },
+  emits: ["handleClose"],
+  setup(props, ctx) {
+    const { emit } = ctx;
+
+    const xTable = templateRef<any>("xTable", null);
+
+    const configData = reactive({
+      tableData: [
+        {
+          name: "禁用",
+          dataval: "0"
+        },
+        {
+          name: "启用",
+          dataval: "1"
+        }
+      ],
+      isAllChecked: false,
+      isIndeterminate: false,
+      selectRecords: [] as any[],
+      tablePage: {
+        total: 0,
+        currentPage: 1,
+        pageSize: 10
+      }
+    });
+
+    // 抽屉关闭
+    function handleClose(done) {
+      configData.isAllChecked = false;
+      configData.isIndeterminate = false;
+      emit("handleClose");
+    }
+
+    function editConfig(row) {
+      console.log(
+        "%crow===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        row
+      );
+    }
+
+    function delConfig(row) {
+      console.log(
+        "%crow===>>>: ",
+        "color: MidnightBlue; background: Aquamarine; font-size: 20px;",
+        row
+      );
+    }
+
+    const changeAllEvent = () => {
+      setTimeout(() => {
+        console.log(xTable);
+      }, 1000);
+      const $table = xTable.value;
+      $table.setAllCheckboxRow(configData.isAllChecked);
+      configData.selectRecords = $table.getCheckboxRecords();
+    };
+
+    const checkboxChangeEvent: VxeTableEvents.CheckboxChange = ({
+      records
+    }) => {
+      const $table = xTable.value;
+      configData.isAllChecked = $table.isAllCheckboxChecked();
+      configData.isIndeterminate = $table.isCheckboxIndeterminate();
+      configData.selectRecords = records;
+    };
+
+    return {
+      ...toRefs(configData),
+      handleClose,
+      editConfig,
+      delConfig,
+      changeAllEvent,
+      checkboxChangeEvent
+    };
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.list {
+  padding: 10px;
+  .page-left {
+    position: absolute;
+    left: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 10;
+  }
+}
+:deep(.select-count) {
+  margin-right: 5px;
+}
+:deep(.el-drawer__header) {
+  margin-bottom: 0;
+}
+:deep(.el-drawer__header span) {
+  color: rgba(0, 0, 0, 0.85);
+  font-weight: 500;
+  font-size: 16px;
+}
+:deep(.el-divider--horizontal) {
+  margin: 13px 0;
+}
+:deep(.el-icon-close) {
+  &:hover {
+    color: red;
+  }
+}
+</style>

src/views/system/dict/index.vue

@@ -1,13 +1,9 @@
-<template>
+.<template>
   <div class="dict-container">
     <!-- 工具栏 -->
     <vxe-toolbar>
       <template #buttons>
-        <vxe-input
-          v-model="dictData.filterName"
-          :placeholder="$t('message.hssearch')"
-          @keyup="searchEvent"
-        ></vxe-input>
+        <vxe-input v-model="filterName" :placeholder="$t('message.hssearch')" @keyup="searchEvent"></vxe-input>
       </template>
       <template #tools>
         <vxe-button
@@ -34,13 +30,13 @@
       border
       resizable
       :tree-config="{children: 'children', iconOpen: 'fa fa-minus-square-o', iconClose: 'fa fa-plus-square-o'}"
-      :data="dictData.tableData"
+      :data="tableData"
       @cell-dblclick="cellDBLClickEvent"
     >
       <vxe-table-column tree-node field="name" title="字典名称"></vxe-table-column>
       <vxe-table-column title="字典类型">
         <template #default="{ row }">
-          <el-tooltip effect="dark" :content="'双击复制：'+row.model" placement="top-end">
+          <el-tooltip effect="dark" :content="'双击复制：'+row.model" placement="right">
             <span class="text-model">{{ row.model }}</span>
           </el-tooltip>
         </template>
@@ -49,36 +45,43 @@
         <template #default="{ row }">
           <vxe-button type="text" icon="el-icon-edit" @click="onEdit(row)">编辑</vxe-button>
           <vxe-button type="text" icon="el-icon-circle-plus-outline" @click="onAddChild(row)">新增子类型</vxe-button>
-          <vxe-button v-show="row.model" type="text" icon="el-icon-setting">字典配置</vxe-button>
+          <vxe-button
+            v-show="row.model"
+            type="text"
+            icon="el-icon-setting"
+            @click="onDeploy(row)"
+          >字典配置</vxe-button>
           <vxe-button type="text" icon="el-icon-delete" @click="confirmEvent">删除</vxe-button>
         </template>
       </vxe-table-column>
     </vxe-table>
 
-    <!-- 配置弹框 -->
+    <!-- 修改、添加弹框 -->
     <vxe-modal
       resize
       width="450"
-      v-model="dictData.showEdit"
-      :title="dictData.selectRow ? '编辑' : '新增'"
-      :loading="dictData.submitLoading"
+      v-model="showEdit"
+      :title="selectRow ? '编辑' : '新增'"
+      :loading="submitLoading"
       @hide="$refs.xForm.reset();"
     >
       <template #default>
         <vxe-form
           ref="xForm"
-          :data="dictData.formData"
-          :items="dictData.formItems"
+          :data="formData"
+          :items="formItems"
           title-align="right"
           title-width="100"
-          @submit="dictData.submitEvent"
+          @submit="submitEvent"
         ></vxe-form>
       </template>
     </vxe-modal>
+
+    <Config :drawer="drawer" drawTitle="字典列表" @handleClose="handleClose" />
   </div>
 </template>
 <script  lang="ts">
-import { reactive, ref, unref, nextTick } from "vue";
+import { reactive, ref, unref, nextTick, toRefs } from "vue";
 import XEUtils from "xe-utils";
 import { cloneDeep } from "lodash-es";
 import { templateRef } from "@vueuse/core";
@@ -90,8 +93,12 @@ import {
   VxeTablePropTypes,
   VxeFormPropTypes
 } from "vxe-table";
+import Config from "./config.vue";
 
 export default {
+  components: {
+    Config
+  },
   setup() {
     const dictData = reactive({
       submitLoading: false,
@@ -129,7 +136,7 @@ export default {
           span: 24,
           itemRender: {
             name: "$input",
-            props: { placeholder: "请输入字典名称", clearable: true }
+            props: { placeholder: "请输入字典名称" }
           }
         },
         {
@@ -141,8 +148,7 @@ export default {
             props: {
               placeholder: "请输入字典类型",
               //这里vxe-table文档并没有提到，可以配置所选组件的所有属性，比如这里可以配置关于vxe-input的所有属性
-              disabled: true,
-              clearable: true
+              disabled: true
             }
           }
         },
@@ -270,8 +276,18 @@ export default {
       }, 500);
     };
 
+    let drawer = ref(false);
+
+    function onDeploy(row: any) {
+      drawer.value = true;
+    }
+
+    function handleClose() {
+      drawer.value = false;
+    }
+
     return {
-      dictData,
+      ...toRefs(dictData),
       formatDate,
       searchEvent,
       confirmEvent,
@@ -279,7 +295,10 @@ export default {
       submitEvent,
       onEdit,
       onAddChild,
-      onAdd
+      onAdd,
+      onDeploy,
+      drawer,
+      handleClose
     };
   }
 };