page select 9/10

package.json

@@ -30,6 +30,7 @@
     "nprogress": "0.2.0",
     "pinia": "2.0.22",
     "pinia-plugin-persistedstate": "^3.1.0",
+    "v3-infinite-loading": "^1.2.2",
     "vue": "3.2.45",
     "vue-cropper": "1.0.3",
     "vue-router": "4.1.4"

src/api/login.js

@@ -1,6 +1,4 @@
 import request from "@/utils/request";
-import usePermissionStore from "@/store/modules/permission";
-import useUserStore from "@/store/modules/user";
 
 // 登录方法
 export function login(username, password, code, uuid) {
@@ -77,3 +75,14 @@ export const getRouters = () => {
     method: "get",
   });
 };
+
+export const getTenantNormalList = (query) => {
+  return request({
+    url: "/tenant/normal-list",
+    headers: {
+      isToken: false,
+    },
+    params: query,
+    method: "get",
+  });
+};

src/api/system/dict/data.js

@@ -1,52 +1,52 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询字典数据列表
 export function listData(query) {
   return request({
-    url: '/system/dict/data/list',
+    url: "/system/dict/data/list",
-    method: 'get',
+    method: "get",
-    params: query
+    params: query,
-  })
+  });
 }
 
 // 查询字典数据详细
 export function getData(dictCode) {
   return request({
-    url: '/system/dict/data/' + dictCode,
+    url: "/system/dict/data/" + dictCode,
-    method: 'get'
+    method: "get",
-  })
+  });
 }
 
 // 根据字典类型查询字典数据信息
 export function getDicts(dictType) {
   return request({
-    url: '/system/dict/data/type/' + dictType,
+    url: "/system/dict/data/type/" + dictType,
-    method: 'get'
+    method: "get",
-  })
+  });
 }
 
 // 新增字典数据
 export function addData(data) {
   return request({
-    url: '/system/dict/data',
+    url: "/system/dict/data",
-    method: 'post',
+    method: "post",
-    data: data
+    data: data,
-  })
+  });
 }
 
 // 修改字典数据
 export function updateData(data) {
   return request({
-    url: '/system/dict/data',
+    url: "/system/dict/data",
-    method: 'put',
+    method: "put",
-    data: data
+    data: data,
-  })
+  });
 }
 
 // 删除字典数据
 export function delData(dictCode) {
   return request({
-    url: '/system/dict/data/' + dictCode,
+    url: "/system/dict/data/" + dictCode,
-    method: 'delete'
+    method: "delete",
-  })
+  });
 }

src/api/system/dict/type.js

@@ -1,60 +1,60 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询字典类型列表
 export function listType(query) {
   return request({
-    url: '/system/dict/type/list',
+    url: "/system/dict/type/list",
-    method: 'get',
+    method: "get",
-    params: query
+    params: query,
-  })
+  });
 }
 
 // 查询字典类型详细
 export function getType(dictId) {
   return request({
-    url: '/system/dict/type/' + dictId,
+    url: "/system/dict/type/" + dictId,
-    method: 'get'
+    method: "get",
-  })
+  });
 }
 
 // 新增字典类型
 export function addType(data) {
   return request({
-    url: '/system/dict/type',
+    url: "/system/dict/type",
-    method: 'post',
+    method: "post",
-    data: data
+    data: data,
-  })
+  });
 }
 
 // 修改字典类型
 export function updateType(data) {
   return request({
-    url: '/system/dict/type',
+    url: "/system/dict/type",
-    method: 'put',
+    method: "put",
-    data: data
+    data: data,
-  })
+  });
 }
 
 // 删除字典类型
 export function delType(dictId) {
   return request({
-    url: '/system/dict/type/' + dictId,
+    url: "/system/dict/type/" + dictId,
-    method: 'delete'
+    method: "delete",
-  })
+  });
 }
 
 // 刷新字典缓存
 export function refreshCache() {
   return request({
-    url: '/system/dict/type/refreshCache',
+    url: "/system/dict/type/refreshCache",
-    method: 'delete'
+    method: "delete",
-  })
+  });
 }
 
 // 获取字典选择框列表
 export function optionselect() {
   return request({
-    url: '/system/dict/type/optionselect',
+    url: "/system/dict/type/optionselect",
-    method: 'get'
+    method: "get",
-  })
+  });
 }

src/api/tenant/tenant.js

@@ -1,44 +1,44 @@
-import request from '@/utils/request'
+import request from "@/utils/request";
 
 // 查询租户列表
 export function listTenant(query) {
   return request({
-        url: '/tenant/list',
+    url: "/tenant/list",
-        method: 'get',
+    method: "get",
-        params: query
+    params: query,
-    })
+  });
 }
 
 // 查询租户详细
 export function getTenant(tenantId) {
   return request({
-        url: '/tenant/' + tenantId,
+    url: "/tenant/" + tenantId,
-        method: 'get'
+    method: "get",
-    })
+  });
 }
 
 // 新增租户
 export function addTenant(data) {
   return request({
-        url: '/tenant',
+    url: "/tenant",
-        method: 'post',
+    method: "post",
-        data: data
+    data: data,
-    })
+  });
 }
 
 // 修改租户
 export function updateTenant(data) {
   return request({
-        url: '/tenant',
+    url: "/tenant",
-        method: 'put',
+    method: "put",
-        data: data
+    data: data,
-    })
+  });
 }
 
 // 删除租户
 export function delTenant(tenantId) {
   return request({
-        url: '/tenant/' + tenantId,
+    url: "/tenant/" + tenantId,
-        method: 'delete'
+    method: "delete",
-    })
+  });
 }

src/components/PagedSelect/index.vue

@@ -0,0 +1,306 @@
+<script setup>
+import { onMounted, ref, toRefs, watch, watchEffect } from "vue";
+import InfiniteLoading from "v3-infinite-loading";
+import "v3-infinite-loading/lib/style.css";
+import { debounce } from "lodash-es"; //required if you're not going to override default slots
+
+const props = defineProps({
+  modelValue: {},
+  remoteMethod: {
+    type: Function,
+    required: true,
+  },
+  size: {
+    type: String,
+  },
+  width: {
+    type: Number,
+  },
+  prefixIcon: { type: String },
+  query: {
+    type: Object,
+    required: true,
+  },
+  prop: {
+    type: Object,
+    required: true,
+  },
+  placeholder: {
+    type: String,
+    default: "请选择",
+  },
+  defaultLabel: {
+    type: String,
+  },
+});
+
+const { modelValue } = toRefs(props);
+const loadKey = ref(0);
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const showPopOver = ref(false);
+
+const placeholderWhenShowPop = ref("");
+const placeholderWhenNotShowPop = ref("");
+const optionLabelWhenShowPop = ref("");
+const optionLabelWhenNotShowPop = ref("");
+const echoLabel = ref("");
+const label = ref("");
+const inputRef = ref();
+const options = ref([]);
+const page = ref(0);
+
+const initOptions = (keyword) => {
+  props
+    .remoteMethod({
+      [props.query.page]: page.value,
+      [props.query.size]: 10,
+      [props.query.searchKey]: keyword,
+    })
+    .then((rows) => {
+      options.value = rows;
+    });
+};
+
+const loadMore = async ($state) => {
+  console.log("loadmore");
+  page.value++;
+  props
+    .remoteMethod({
+      [props.query.page]: page.value,
+      [props.query.size]: 10,
+      [props.query.searchKey]: showPopOver.value
+        ? optionLabelWhenShowPop.value
+        : null,
+    })
+    .then((rows) => {
+      options.value.push(...rows);
+      if (rows.length < 10) {
+        $state.complete();
+      } else {
+        $state.loaded();
+      }
+    })
+    .catch(() => {
+      $state.error();
+    });
+};
+
+const handleShow = () => {};
+
+const handleHide = () => {
+  console.log("hide");
+};
+
+const handleInputFocus = () => {
+  console.log("focus");
+};
+const handleInputClick = () => {
+  showPopOver.value = true;
+  // if (label.value) {
+  //   page.value = 0;
+  //   options.value = []
+  //   loadKey.value++;
+  // }
+  placeholderWhenShowPop.value = optionLabelWhenNotShowPop.value;
+};
+
+const handleInputBlur = () => {
+  showPopOver.value = false;
+  if (label.value) {
+    setTimeout(() => {
+      page.value = 1;
+      initOptions();
+      loadKey.value++;
+    }, 1000);
+  }
+  // label.value = placeholder.value;
+  // placeholder.value = "";
+};
+
+/**
+ * 点击选项
+ * @param option
+ */
+const selectOption = (option) => {
+  emit("update:modelValue", option[props.prop.value]);
+
+  /*重新加载选项*/
+  if (optionLabelWhenShowPop.value) {
+    page.value = 0;
+    options.value = [];
+    loadKey.value++;
+  }
+
+  showPopOver.value = false;
+
+  echoLabel.value = option[props.prop.label];
+  optionLabelWhenShowPop.value = "";
+};
+
+/**
+ * 输入时,搜索选项
+ * @type {DebouncedFuncLeading<(function(*): void)|*> | DebouncedFunc<(function(*): void)|*>}
+ */
+const handleInputChange = debounce((value) => {
+  page.value = 0;
+  options.value = [];
+  loadKey.value++;
+}, 500);
+
+watchEffect(() => {
+  if (showPopOver.value) return;
+  if (modelValue.value) {
+    optionLabelWhenNotShowPop.value =
+      options.value.find((el) => el[props.prop.value] === modelValue.value)?.[
+        props.prop.label
+      ] ??
+      echoLabel.value ??
+      props.defaultLabel ??
+      "...";
+  } else {
+    optionLabelWhenNotShowPop.value = "";
+    placeholderWhenNotShowPop.value = props.placeholder;
+  }
+});
+
+watch(modelValue, (value) => {
+  emit("change", value);
+});
+
+/**
+ * 点击空白关闭弹出选项列表
+ * @param event
+ */
+const handleBodyClick = (event) => {
+  if (showPopOver.value) {
+    if (optionLabelWhenShowPop.value) {
+      page.value = 0;
+      options.value = [];
+      loadKey.value++;
+    }
+    showPopOver.value = false;
+    optionLabelWhenShowPop.value = "";
+
+    // optionLabelWhenNotShowPop.value = props.placeholder;
+  }
+};
+
+onMounted(() => {
+  page.value++;
+  initOptions();
+  document.body.addEventListener("click", handleBodyClick);
+});
+</script>
+
+<template>
+  <el-popover
+    :popper-style="{
+      padding: 0,
+    }"
+    :visible="showPopOver"
+    :width="width ?? 240"
+    placement="bottom"
+    @hide="handleHide"
+    @show="handleShow"
+  >
+    <template #reference>
+      <div :style="`width: ${width ?? 240}px`">
+        <!--选项显示时-->
+        <el-input
+          v-if="showPopOver"
+          ref="inputRef"
+          v-model="optionLabelWhenShowPop"
+          :placeholder="placeholderWhenShowPop"
+          :prefix-icon="prefixIcon"
+          :size="size ?? 'default'"
+          class="select-inner"
+          suffix-icon="ArrowUp"
+          @input="handleInputChange"
+          @click.stop
+        >
+          <template #prefix>
+            <slot name="prefix" />
+          </template>
+        </el-input>
+        <!--选项隐藏时-->
+        <el-input
+          v-else
+          ref="inputRef"
+          v-model="optionLabelWhenNotShowPop"
+          :placeholder="placeholderWhenNotShowPop"
+          :prefix-icon="prefixIcon"
+          :size="size ?? 'default'"
+          class="select-inner"
+          suffix-icon="ArrowDown"
+          @click.stop="handleInputClick"
+        >
+          <!--            @blur="handleInputBlur"-->
+          <template #prefix>
+            <slot name="prefix" />
+          </template>
+        </el-input>
+      </div>
+    </template>
+    <el-scrollbar class="options-wrap" height="260" @click.stop>
+      <ul class="options">
+        <li
+          v-for="option in options"
+          :key="option[prop.value]"
+          :class="`option-item ${
+            option[prop.value] === modelValue ? 'selected' : null
+          }`"
+          @click.stop="selectOption(option)"
+        >
+          {{ option[prop.label] }}
+        </li>
+      </ul>
+      <infinite-loading :identifier="loadKey" @infinite="loadMore">
+        <template #spinner>
+          <div style="text-align: center; font-size: 12px">......</div>
+        </template>
+        <template #complete>
+          <div
+            style="display: flex; justify-content: center; align-items: center"
+          >
+            -
+          </div>
+        </template>
+      </infinite-loading>
+    </el-scrollbar>
+  </el-popover>
+</template>
+
+<style lang="scss" scoped>
+.options-wrap {
+  margin: 6px 0;
+
+  .options {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .option-item {
+      height: 32px;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      padding: 0 32px 0 20px;
+      font-weight: 700;
+
+      &.selected {
+        color: #409eff;
+      }
+
+      &:hover {
+        background-color: #f5f7fa;
+      }
+    }
+  }
+}
+
+.select-inner {
+  cursor: pointer;
+}
+</style>

src/router/index.js

@@ -117,18 +117,18 @@ export const dynamicRoutes = [
     ],
   },
   {
-    path: '/system/dict-data',
+    path: "/system/dict-data",
     component: Layout,
     hidden: true,
-    permissions: ['system:dict:list'],
+    permissions: ["system:dict:list"],
     children: [
       {
-        path: 'index/:dictId(\\d+)',
+        path: "index/:dictId(\\d+)",
-        component: () => import('@/views/system/dict/data'),
+        component: () => import("@/views/system/dict/data"),
-        name: 'Data',
+        name: "Data",
-        meta: { title: '字典数据', activeMenu: '/system/dict' }
+        meta: { title: "字典数据", activeMenu: "/system/dict" },
-      }
+      },
-    ]
+    ],
   },
 ];
 

src/views/login.vue

@@ -8,17 +8,33 @@
     >
       <h3 class="title">若依后台管理系统</h3>
       <el-form-item prop="tenant">
-        <el-input
+        <paged-select
           v-model="loginForm.tenant"
-          auto-complete="off"
+          :prop="{
-          placeholder="租户"
+            label: 'companyName',
+            value: 'tenantId',
+          }"
+          :query="{
+            page: 'pageNum',
+            size: 'pageSize',
+            searchKey: 'companyName',
+          }"
+          :remote-method="loadTenantOptions"
+          :width="350"
+          prefix-icon="OfficeBuilding"
           size="large"
-          type="text"
+        />
-        >
+        <!--        <el-input-->
-          <template #prefix>
+        <!--            v-model="loginForm.tenant"-->
-            <svg-icon class="el-input__icon input-icon" icon-class="user" />
+        <!--            auto-complete="off"-->
-          </template>
+        <!--            placeholder="租户"-->
-        </el-input>
+        <!--            size="large"-->
+        <!--            type="text"-->
+        <!--        >-->
+        <!--          <template #prefix>-->
+        <!--            <svg-icon class="el-input__icon input-icon" icon-class="user"/>-->
+        <!--          </template>-->
+        <!--        </el-input>-->
       </el-form-item>
       <el-form-item prop="username">
         <el-input
@@ -70,8 +86,8 @@
       <el-checkbox
         v-model="loginForm.rememberMe"
         style="margin: 0px 0px 25px 0px"
-        >记住密码</el-checkbox
+        >记住密码
-      >
+      </el-checkbox>
       <el-form-item style="width: 100%">
         <el-button
           :loading="loading"
@@ -85,8 +101,8 @@
         </el-button>
         <div v-if="register" style="float: right">
           <router-link :to="'/register'" class="link-type"
-            >立即注册</router-link
+            >立即注册
-          >
+          </router-link>
         </div>
       </el-form-item>
     </el-form>
@@ -98,10 +114,11 @@
 </template>
 
 <script setup>
-import { getCodeImg } from "@/api/login";
+import { getCodeImg, getTenantNormalList } from "@/api/login";
 import Cookies from "js-cookie";
 import { decrypt, encrypt } from "@/utils/jsencrypt";
 import useUserStore from "@/store/modules/user";
+import PagedSelect from "@/components/PagedSelect";
 
 const userStore = useUserStore();
 const router = useRouter();
@@ -117,7 +134,7 @@ const loginForm = ref({
 });
 
 const loginRules = {
-  tenant: [{ required: true, trigger: "blur", message: "请输入租户" }],
+  tenant: [{ required: true, trigger: "change", message: "请选择租户" }],
   username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
   password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
   code: [{ required: true, trigger: "change", message: "请输入验证码" }],
@@ -191,6 +208,9 @@ function getCookie() {
   };
 }
 
+const loadTenantOptions = (query) =>
+  getTenantNormalList(query).then((resp) => resp.rows);
+
 getCode();
 getCookie();
 </script>

src/views/system/config/index.vue

@@ -71,6 +71,7 @@
       </el-col>
       <el-col :span="1.5">
         <el-button
+          prefix=""
           v-hasPermi="['system:config:remove']"
           :disabled="
             multiple ||

src/views/system/dict/data.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+    >
       <el-form-item label="字典标签" prop="dictLabel">
         <el-input
           v-model="queryParams.dictLabel"
@@ -11,7 +16,12 @@
         />
       </el-form-item>
       <el-form-item label="状态" prop="status">
-            <el-select v-model="queryParams.status" placeholder="数据状态" clearable style="width: 200px">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="数据状态"
+          clearable
+          style="width: 200px"
+        >
           <el-option
             v-for="dict in sys_normal_disable"
             :key="dict.value"
@@ -21,7 +31,9 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -34,7 +46,8 @@
           icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
-            >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -44,7 +57,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:dict:edit']"
-            >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -54,7 +68,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:dict:remove']"
-            >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -63,26 +78,38 @@
           icon="Download"
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
-            >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
       <el-col :span="1.5">
-            <el-button
+        <el-button type="warning" plain icon="Close" @click="handleClose"
-               type="warning"
+          >关闭</el-button
-               plain
+        >
-               icon="Close"
-               @click="handleClose"
-            >关闭</el-button>
       </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-      <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="dataList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="字典编码" align="center" prop="dictCode" />
       <el-table-column label="字典标签" align="center" prop="dictLabel">
         <template #default="scope">
-               <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{ scope.row.dictLabel }}</span>
+          <span
-               <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{ scope.row.dictLabel }}</el-tag>
+            v-if="scope.row.listClass == '' || scope.row.listClass == 'default'"
+            >{{ scope.row.dictLabel }}</span
+          >
+          <el-tag
+            v-else
+            :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass"
+            >{{ scope.row.dictLabel }}</el-tag
+          >
         </template>
       </el-table-column>
       <el-table-column label="字典键值" align="center" prop="dictValue" />
@@ -92,16 +119,45 @@
           <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        width="160"
+        class-name="small-padding fixed-width"
+      >
         <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+          <el-button
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+            >修改</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -130,7 +186,11 @@
           <el-input v-model="form.cssClass" placeholder="请输入样式属性" />
         </el-form-item>
         <el-form-item label="显示排序" prop="dictSort">
-               <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
+          <el-input-number
+            v-model="form.dictSort"
+            controls-position="right"
+            :min="0"
+          />
         </el-form-item>
         <el-form-item label="回显样式" prop="listClass">
           <el-select v-model="form.listClass">
@@ -148,11 +208,16 @@
               v-for="dict in sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
-                  >{{ dict.label }}</el-radio>
+              >{{ dict.label }}</el-radio
+            >
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          ></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -166,9 +231,18 @@
 </template>
 
 <script setup name="Data">
-import useDictStore from '@/store/modules/dict'
+import useDictStore from "@/store/modules/dict";
-import { optionselect as getDictOptionselect, getType } from "@/api/system/dict/type";
+import {
-import { listData, getData, delData, addData, updateData } from "@/api/system/dict/data";
+  optionselect as getDictOptionselect,
+  getType,
+} from "@/api/system/dict/type";
+import {
+  listData,
+  getData,
+  delData,
+  addData,
+  updateData,
+} from "@/api/system/dict/data";
 import { sys_normal_disable } from "@/constant/dict";
 
 const { proxy } = getCurrentInstance();
@@ -192,7 +266,7 @@ const listClassOptions = ref([
   { value: "success", label: "成功" },
   { value: "info", label: "信息" },
   { value: "warning", label: "警告" },
-  { value: "danger", label: "危险" }
+  { value: "danger", label: "危险" },
 ]);
 
 const data = reactive({
@@ -202,20 +276,26 @@ const data = reactive({
     pageSize: 10,
     dictName: undefined,
     dictType: undefined,
-    status: undefined
+    status: undefined,
   },
   rules: {
-    dictLabel: [{ required: true, message: "数据标签不能为空", trigger: "blur" }],
+    dictLabel: [
-    dictValue: [{ required: true, message: "数据键值不能为空", trigger: "blur" }],
+      { required: true, message: "数据标签不能为空", trigger: "blur" },
-    dictSort: [{ required: true, message: "数据顺序不能为空", trigger: "blur" }]
+    ],
-  }
+    dictValue: [
+      { required: true, message: "数据键值不能为空", trigger: "blur" },
+    ],
+    dictSort: [
+      { required: true, message: "数据顺序不能为空", trigger: "blur" },
+    ],
+  },
 });
 
 const { queryParams, form, rules } = toRefs(data);
 
 /** 查询字典类型详细 */
 function getTypes(dictId) {
-  getType(dictId).then(response => {
+  getType(dictId).then((response) => {
     queryParams.value.dictType = response.data.dictType;
     defaultDictType.value = response.data.dictType;
     getList();
@@ -224,14 +304,14 @@ function getTypes(dictId) {
 
 /** 查询字典类型列表 */
 function getTypeList() {
-  getDictOptionselect().then(response => {
+  getDictOptionselect().then((response) => {
     typeOptions.value = response.data;
   });
 }
 /** 查询字典数据列表 */
 function getList() {
   loading.value = true;
-  listData(queryParams.value).then(response => {
+  listData(queryParams.value).then((response) => {
     dataList.value = response.rows;
     total.value = response.total;
     loading.value = false;
@@ -252,7 +332,7 @@ function reset() {
     listClass: "default",
     dictSort: 0,
     status: "1",
-    remark: undefined
+    remark: undefined,
   };
   proxy.resetForm("dataRef");
 }
@@ -280,7 +360,7 @@ function handleAdd() {
 }
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictCode);
+  ids.value = selection.map((item) => item.dictCode);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
@@ -288,7 +368,7 @@ function handleSelectionChange(selection) {
 function handleUpdate(row) {
   reset();
   const dictCode = row.dictCode || ids.value;
-  getData(dictCode).then(response => {
+  getData(dictCode).then((response) => {
     form.value = response.data;
     open.value = true;
     title.value = "修改字典数据";
@@ -296,17 +376,17 @@ function handleUpdate(row) {
 }
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["dataRef"].validate(valid => {
+  proxy.$refs["dataRef"].validate((valid) => {
     if (valid) {
       if (form.value.dictCode != undefined) {
-        updateData(form.value).then(response => {
+        updateData(form.value).then((response) => {
           useDictStore().removeDict(queryParams.value.dictType);
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
-        addData(form.value).then(response => {
+        addData(form.value).then((response) => {
           useDictStore().removeDict(queryParams.value.dictType);
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
@@ -319,19 +399,27 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const dictCodes = row.dictCode || ids.value;
-  proxy.$modal.confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？').then(function() {
+  proxy.$modal
+    .confirm('是否确认删除字典编码为"' + dictCodes + '"的数据项？')
+    .then(function () {
       return delData(dictCodes);
-  }).then(() => {
+    })
+    .then(() => {
       getList();
       proxy.$modal.msgSuccess("删除成功");
       useDictStore().removeDict(queryParams.value.dictType);
-  }).catch(() => {});
+    })
+    .catch(() => {});
 }
 /** 导出按钮操作 */
 function handleExport() {
-  proxy.download("system/dict/data/export", {
+  proxy.download(
-    ...queryParams.value
+    "system/dict/data/export",
-  }, `dict_data_${new Date().getTime()}.xlsx`);
+    {
+      ...queryParams.value,
+    },
+    `dict_data_${new Date().getTime()}.xlsx`
+  );
 }
 
 getTypes(route.params && route.params.dictId);

src/views/system/dict/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-      <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="字典名称" prop="dictName">
         <el-input
           v-model="queryParams.dictName"
@@ -35,7 +41,9 @@
         </el-select>
       </el-form-item>
       <el-form-item>
-            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -48,7 +56,8 @@
           icon="Plus"
           @click="handleAdd"
           v-hasPermi="['system:dict:add']"
-            >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -58,7 +67,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['system:dict:edit']"
-            >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -68,7 +78,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['system:dict:remove']"
-            >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -77,7 +88,8 @@
           icon="Download"
           @click="handleExport"
           v-hasPermi="['system:dict:export']"
-            >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -86,18 +98,38 @@
           icon="Refresh"
           @click="handleRefreshCache"
           v-hasPermi="['system:dict:remove']"
-            >刷新缓存</el-button>
+          >刷新缓存</el-button
+        >
       </el-col>
-         <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-      <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="typeList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="字典编号" align="center" prop="dictId" />
-         <el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true"/>
+      <el-table-column
-         <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
+        label="字典名称"
+        align="center"
+        prop="dictName"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="字典类型"
+        align="center"
+        :show-overflow-tooltip="true"
+      >
         <template #default="scope">
-               <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
+          <router-link
+            :to="'/system/dict-data/index/' + scope.row.dictId"
+            class="link-type"
+          >
             <span>{{ scope.row.dictType }}</span>
           </router-link>
         </template>
@@ -107,16 +139,45 @@
           <dict-tag :options="sys_normal_disable" :value="scope.row.status" />
         </template>
       </el-table-column>
-         <el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
+      <el-table-column
-         <el-table-column label="创建时间" align="center" prop="createTime" width="180">
+        label="备注"
+        align="center"
+        prop="remark"
+        :show-overflow-tooltip="true"
+      />
+      <el-table-column
+        label="创建时间"
+        align="center"
+        prop="createTime"
+        width="180"
+      >
         <template #default="scope">
           <span>{{ parseTime(scope.row.createTime) }}</span>
         </template>
       </el-table-column>
-         <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        width="160"
+        class-name="small-padding fixed-width"
+      >
         <template #default="scope">
-               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['system:dict:edit']">修改</el-button>
+          <el-button
-               <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['system:dict:remove']">删除</el-button>
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:dict:edit']"
+            >修改</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:dict:remove']"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -144,11 +205,16 @@
               v-for="dict in sys_normal_disable"
               :key="dict.value"
               :label="dict.value"
-                  >{{ dict.label }}</el-radio>
+              >{{ dict.label }}</el-radio
+            >
           </el-radio-group>
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-               <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          ></el-input>
         </el-form-item>
       </el-form>
       <template #footer>
@@ -162,13 +228,19 @@
 </template>
 
 <script setup name="Dict">
-import useDictStore from '@/store/modules/dict'
+import useDictStore from "@/store/modules/dict";
-import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
+import {
+  listType,
+  getType,
+  delType,
+  addType,
+  updateType,
+  refreshCache,
+} from "@/api/system/dict/type";
 import { sys_normal_disable } from "@/constant/dict";
 
 const { proxy } = getCurrentInstance();
 
-
 const typeList = ref([]);
 const open = ref(false);
 const loading = ref(true);
@@ -187,11 +259,15 @@ const data = reactive({
     pageSize: 10,
     dictName: undefined,
     dictType: undefined,
-    status: undefined
+    status: undefined,
   },
   rules: {
-    dictName: [{ required: true, message: "字典名称不能为空", trigger: "blur" }],
+    dictName: [
-    dictType: [{ required: true, message: "字典类型不能为空", trigger: "blur" }]
+      { required: true, message: "字典名称不能为空", trigger: "blur" },
+    ],
+    dictType: [
+      { required: true, message: "字典类型不能为空", trigger: "blur" },
+    ],
   },
 });
 
@@ -200,11 +276,13 @@ const { queryParams, form, rules } = toRefs(data);
 /** 查询字典类型列表 */
 function getList() {
   loading.value = true;
-  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(response => {
+  listType(proxy.addDateRange(queryParams.value, dateRange.value)).then(
+    (response) => {
       typeList.value = response.rows;
       total.value = response.total;
       loading.value = false;
-  });
+    }
+  );
 }
 /** 取消按钮 */
 function cancel() {
@@ -218,7 +296,7 @@ function reset() {
     dictName: undefined,
     dictType: undefined,
     status: "1",
-    remark: undefined
+    remark: undefined,
   };
   proxy.resetForm("dictRef");
 }
@@ -241,7 +319,7 @@ function handleAdd() {
 }
 /** 多选框选中数据 */
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.dictId);
+  ids.value = selection.map((item) => item.dictId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
@@ -249,7 +327,7 @@ function handleSelectionChange(selection) {
 function handleUpdate(row) {
   reset();
   const dictId = row.dictId || ids.value;
-  getType(dictId).then(response => {
+  getType(dictId).then((response) => {
     form.value = response.data;
     open.value = true;
     title.value = "修改字典类型";
@@ -257,16 +335,16 @@ function handleUpdate(row) {
 }
 /** 提交按钮 */
 function submitForm() {
-  proxy.$refs["dictRef"].validate(valid => {
+  proxy.$refs["dictRef"].validate((valid) => {
     if (valid) {
       if (form.value.dictId != undefined) {
-        updateType(form.value).then(response => {
+        updateType(form.value).then((response) => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
-        addType(form.value).then(response => {
+        addType(form.value).then((response) => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
@@ -278,18 +356,26 @@ function submitForm() {
 /** 删除按钮操作 */
 function handleDelete(row) {
   const dictIds = row.dictId || ids.value;
-  proxy.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？').then(function() {
+  proxy.$modal
+    .confirm('是否确认删除字典编号为"' + dictIds + '"的数据项？')
+    .then(function () {
       return delType(dictIds);
-  }).then(() => {
+    })
+    .then(() => {
       getList();
       proxy.$modal.msgSuccess("删除成功");
-  }).catch(() => {});
+    })
+    .catch(() => {});
 }
 /** 导出按钮操作 */
 function handleExport() {
-  proxy.download("system/dict/type/export", {
+  proxy.download(
-    ...queryParams.value
+    "system/dict/type/export",
-  }, `dict_${new Date().getTime()}.xlsx`);
+    {
+      ...queryParams.value,
+    },
+    `dict_${new Date().getTime()}.xlsx`
+  );
 }
 /** 刷新缓存按钮操作 */
 function handleRefreshCache() {

src/views/tenant/index.vue

@@ -1,6 +1,12 @@
 <template>
   <div class="app-container">
-        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryRef"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="公司名称" prop="companyName">
         <el-input
           v-model="queryParams.companyName"
@@ -18,7 +24,9 @@
         />
       </el-form-item>
       <el-form-item>
-                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button type="primary" icon="Search" @click="handleQuery"
+          >搜索</el-button
+        >
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
@@ -31,7 +39,8 @@
           icon="Plus"
           @click="handleAdd"
           v-hasPermi="['tenant:add']"
-                >新增</el-button>
+          >新增</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -41,7 +50,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['tenant:edit']"
-                >修改</el-button>
+          >修改</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -51,7 +61,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['tenant:remove']"
-                >删除</el-button>
+          >删除</el-button
+        >
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -60,29 +71,60 @@
           icon="Download"
           @click="handleExport"
           v-hasPermi="['tenant:export']"
-                >导出</el-button>
+          >导出</el-button
+        >
       </el-col>
-            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        v-model:showSearch="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
-        <el-table v-loading="loading" :data="tenantList" @selection-change="handleSelectionChange">
+    <el-table
+      v-loading="loading"
+      :data="tenantList"
+      @selection-change="handleSelectionChange"
+    >
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="编码" align="center" prop="tenantId" />
       <el-table-column label="公司名称" align="center" prop="companyName" />
       <el-table-column label="联系人名称" align="center" prop="contactName" />
       <el-table-column label="联系人电话" align="center" prop="contactPhone" />
       <el-table-column label="公司地址" align="center" prop="address" />
-                    <el-table-column label="过期时间" align="center" prop="expireTime" width="180">
+      <el-table-column
+        label="过期时间"
+        align="center"
+        prop="expireTime"
+        width="180"
+      >
         <template #default="scope">
-                            <span>{{ parseTime(scope.row.expireTime, '{y}-{m}-{d}') }}</span>
+          <span>{{ parseTime(scope.row.expireTime, "{y}-{m}-{d}") }}</span>
         </template>
       </el-table-column>
       <el-table-column label="用户数量" align="center" prop="accountCount" />
       <el-table-column label="状态" align="center" prop="status" />
-            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
         <template #default="scope">
-                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['tenant:edit']">修改</el-button>
+          <el-button
-                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['tenant:remove']">删除</el-button>
+            link
+            type="primary"
+            icon="Edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['tenant:edit']"
+            >修改</el-button
+          >
+          <el-button
+            link
+            type="primary"
+            icon="Delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['tenant:remove']"
+            >删除</el-button
+          >
         </template>
       </el-table-column>
     </el-table>
@@ -105,30 +147,46 @@
           <el-input v-model="form.contactName" placeholder="请输入联系人名称" />
         </el-form-item>
         <el-form-item label="联系人电话" prop="contactPhone">
-                                    <el-input v-model="form.contactPhone" placeholder="请输入联系人电话" />
+          <el-input
+            v-model="form.contactPhone"
+            placeholder="请输入联系人电话"
+          />
         </el-form-item>
         <el-form-item label="公司地址" prop="address">
           <el-input v-model="form.address" placeholder="请输入公司地址" />
         </el-form-item>
         <el-form-item label="公司简介" prop="profile">
-                                    <el-input v-model="form.profile" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.profile"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
         <el-form-item label="统一社会信用代码" prop="licenseNumber">
-                                    <el-input v-model="form.licenseNumber" placeholder="请输入统一社会信用代码" />
+          <el-input
+            v-model="form.licenseNumber"
+            placeholder="请输入统一社会信用代码"
+          />
         </el-form-item>
         <el-form-item label="过期时间" prop="expireTime">
-                                    <el-date-picker clearable
+          <el-date-picker
+            clearable
             v-model="form.expireTime"
             type="datetime"
             value-format="YYYY-MM-DD HH:mm:ss"
-                                                    placeholder="请选择过期时间">
+            placeholder="请选择过期时间"
+          >
           </el-date-picker>
         </el-form-item>
         <el-form-item label="用户数量" prop="accountCount">
           <el-input v-model="form.accountCount" placeholder="请输入用户数量" />
         </el-form-item>
         <el-form-item label="备注" prop="remark">
-                                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+          <el-input
+            v-model="form.remark"
+            type="textarea"
+            placeholder="请输入内容"
+          />
         </el-form-item>
       </el-form>
       <template #footer>
@@ -142,7 +200,13 @@
 </template>
 
 <script setup name="Tenant">
-    import { listTenant, getTenant, delTenant, addTenant, updateTenant } from "@/api/tenant/tenant";
+import {
+  listTenant,
+  getTenant,
+  delTenant,
+  addTenant,
+  updateTenant,
+} from "@/api/tenant/tenant";
 
 const { proxy } = getCurrentInstance();
 
@@ -176,9 +240,9 @@
   },
   rules: {
     companyName: [
-                { required: true, message: "公司名称不能为空", trigger: "blur" }
+      { required: true, message: "公司名称不能为空", trigger: "blur" },
     ],
-    }
+  },
 });
 
 const { queryParams, form, rules } = toRefs(data);
@@ -186,7 +250,7 @@
 /** 查询租户列表 */
 function getList() {
   loading.value = true;
-        listTenant(queryParams.value).then(response => {
+  listTenant(queryParams.value).then((response) => {
     tenantList.value = response.rows;
     total.value = response.total;
     loading.value = false;
@@ -217,7 +281,7 @@
     createTime: null,
     updateUser: null,
     updateTime: null,
-                remark: null
+    remark: null,
   };
   proxy.resetForm("tenantRef");
 }
@@ -236,7 +300,7 @@
 
 // 多选框选中数据
 function handleSelectionChange(selection) {
-        ids.value = selection.map(item => item.tenantId);
+  ids.value = selection.map((item) => item.tenantId);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
 }
@@ -251,8 +315,8 @@
 /** 修改按钮操作 */
 function handleUpdate(row) {
   reset();
-        const _tenantId = row.tenantId || ids.value
+  const _tenantId = row.tenantId || ids.value;
-        getTenant(_tenantId).then(response => {
+  getTenant(_tenantId).then((response) => {
     form.value = response.data;
     open.value = true;
     title.value = "修改租户";
@@ -261,16 +325,16 @@
 
 /** 提交按钮 */
 function submitForm() {
-        proxy.$refs["tenantRef"].validate(valid => {
+  proxy.$refs["tenantRef"].validate((valid) => {
     if (valid) {
       if (form.value.tenantId != null) {
-                    updateTenant(form.value).then(response => {
+        updateTenant(form.value).then((response) => {
           proxy.$modal.msgSuccess("修改成功");
           open.value = false;
           getList();
         });
       } else {
-                    addTenant(form.value).then(response => {
+        addTenant(form.value).then((response) => {
           proxy.$modal.msgSuccess("新增成功");
           open.value = false;
           getList();
@@ -283,19 +347,27 @@
 /** 删除按钮操作 */
 function handleDelete(row) {
   const _tenantIds = row.tenantId || ids.value;
-        proxy.$modal.confirm('是否确认删除租户编号为"' + _tenantIds + '"的数据项？').then(function() {
+  proxy.$modal
+    .confirm('是否确认删除租户编号为"' + _tenantIds + '"的数据项？')
+    .then(function () {
       return delTenant(_tenantIds);
-        }).then(() => {
+    })
+    .then(() => {
       getList();
       proxy.$modal.msgSuccess("删除成功");
-    }).catch(() => {});
+    })
+    .catch(() => {});
 }
 
 /** 导出按钮操作 */
 function handleExport() {
-        proxy.download('tenant/tenant/export', {
+  proxy.download(
-            ...queryParams.value
+    "tenant/tenant/export",
-        }, `tenant_${new Date().getTime()}.xlsx`)
+    {
+      ...queryParams.value,
+    },
+    `tenant_${new Date().getTime()}.xlsx`
+  );
 }
 
 getList();