perf: dict perfect

src/layout/components/Navbar.vue

@@ -49,12 +49,15 @@ import { useMapGetters } from "../store";
 import { useRouter, useRoute } from "vue-router";
 import { useStore } from "vuex";
 import { storageSession } from "/@/utils/storage";
-import { useI18n } from "vue-i18n";
 import ch from "/@/assets/ch.png";
 import en from "/@/assets/en.png";
 import favicon from "/favicon.ico";
 import { emitter } from "/@/utils/mitt";
 import { deviceDetection } from "/@/utils/deviceDetection";
+import { useI18n } from "vue-i18n";
+import { locale as eleplusLocale } from "element-plus";
+import enLocale from "element-plus/lib/locale/lang/en";
+import zhLocale from "element-plus/lib/locale/lang/zh-cn";
 
 export default defineComponent({
   name: "Navbar",
@@ -77,7 +80,13 @@ export default defineComponent({
     // 国际化语言切换
     const toggleLang = (): void => {
       langs.value = !langs.value;
-      langs.value ? (locale.value = "zh") : (locale.value = "en");
+      if (langs.value) {
+        locale.value = "zh";
+        eleplusLocale(zhLocale);
+      } else {
+        locale.value = "en";
+        eleplusLocale(enLocale);
+      }
     };
 
     watch(
@@ -121,7 +130,9 @@ export default defineComponent({
       en,
       favicon,
       onPanel,
-      deviceDetection
+      deviceDetection,
+      locale,
+      t
     };
   }
 });

src/plugins/element-plus/index.ts

@@ -26,6 +26,8 @@ import {
   ElPopover,
   ElPopper,
   ElTooltip,
+  ElDrawer,
+  ElPagination,
 } from "element-plus";
 
 const components = [
@@ -54,6 +56,8 @@ const components = [
   ElPopover,
   ElPopper,
   ElTooltip,
+  ElDrawer,
+  ElPagination,
 ];
 
 const plugins = [ElLoading];

src/plugins/i18n/config.ts

@@ -3,6 +3,12 @@
 import zhVxeTable from "vxe-table/lib/locale/lang/zh-CN";
 import enVxeTable from "vxe-table/lib/locale/lang/en-US";
 
+// element-plus国际化
+import { locale } from "element-plus";
+import enLocale from "element-plus/lib/locale/lang/en";
+import zhLocale from "element-plus/lib/locale/lang/zh-cn";
+locale(zhLocale);
+
 export const menusConfig = {
   zh: {
     message: {
@@ -106,9 +112,11 @@ export const localesConfigs = {
   zh: {
     message: Object.assign({}, ...localesList.map((v) => v.zh.message)),
     ...zhVxeTable,
+    ...zhLocale,
   },
   en: {
     message: Object.assign({}, ...localesList.map((v) => v.en.message)),
     ...enVxeTable,
+    ...enLocale,
   },
 };

src/plugins/i18n/index.ts

@@ -5,7 +5,7 @@ import { localesConfigs } from "./config";
 
 export const i18n = createI18n({
   locale: "zh", // set locale
-  fallbackLocale: "zh", // set fallback locale
+  fallbackLocale: "en", // set fallback locale
   messages: localesConfigs,
 });
 

src/plugins/vxe-table/index.ts

@@ -58,6 +58,9 @@ VXETable.setup({
     // 鼠标移到行是否要高亮显示
     highlightHoverRow: true,
   },
+  input: {
+    clearable: true,
+  },
   // 对组件内置的提示语进行国际化翻译
   i18n: (key, args) => i18n.global.t(key, args),
   // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
@@ -66,6 +69,9 @@ VXETable.setup({
     if (key && key.indexOf("message.") > -1) {
       return i18n.global.t(key, args);
     }
+    if (key && key.indexOf("el.") > -1) {
+      return i18n.global.t(key, args);
+    }
     return key;
   },
 });

src/router/index.ts

@@ -233,7 +233,9 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: "/system/dict",
         component: () =>
-          import(/* webpackChunkName: "system" */ "../views/system/dict.vue"),
+          import(
+            /* webpackChunkName: "system" */ "../views/system/dict/index.vue"
+          ),
         meta: {
           // icon: '',
           title: "message.hsDict",

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
     };
   }
 };