增加菜单页面，增加小程序管理页面，增加店铺员工页面

src/api/account/menu.ts

@@ -1,14 +1,50 @@
 import request from "@/utils/request";
-const baseURL = "account/admin/";
+import { Account_BaseUrl } from "@/api/config";
-
+const baseURL = Account_BaseUrl + "/admin/menus";
 const MenuApi = {
   /** 获取当前用户菜单列表*/
   getRoutes() {
-    return request<any, RouteVO>({
+    return request<any, RouteVO[]>({
-      url: `${baseURL}menus`,
+      url: `${baseURL}`,
       method: "get",
     });
   },
+  /**获取所有菜单 */
+  getList(data: getListRequest) {
+    return request<any, MenuVO[]>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params: data
+    });
+  },
+  get(id: string) {
+    return request<any, MenuVO>({
+      url: `${baseURL}/detail`,
+      method: "get",
+      data: { id }
+    });
+  },
+  add(data: addRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data
+    });
+  },
+  edit(id: string | number, data: editRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data: { ...data, id }
+    });
+  },
+  delete(id: number) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "delete",
+      data: { id }
+    });
+  },
 };
 
 export default MenuApi;
@@ -27,6 +63,8 @@ export interface RouteVO {
   path?: string;
   /** 跳转链接 */
   redirect?: string;
+  title: string,
+  menuId: string | number,
 }
 /** Meta，路由属性 */
 export interface Meta {
@@ -41,3 +79,230 @@ export interface Meta {
   /** 路由title */
   title?: string;
 }
+
+export interface getListRequest {
+  /**
+   * 结束时间
+   */
+  endTime?: string;
+  /**
+   * 开始时间
+   */
+  startTime?: string;
+  /**
+   * 菜单名称
+   */
+  title?: string;
+  [property: string]: any;
+}
+
+/**
+ * MenuAddDTO
+ */
+export interface addRequest {
+  /**
+   * 是否选中父级菜单
+   */
+  activeMenu?: string;
+  /**
+   * 是否缓存
+   */
+  cache?: number;
+  /**
+   * 组件
+   */
+  component?: string;
+  /**
+   * 是否隐藏
+   */
+  hidden?: number;
+  /**
+   * 图标
+   */
+  icon?: string;
+  /**
+   * 是否外链
+   */
+  iFrame?: number;
+  /**
+   * 菜单排序
+   */
+  menuSort?: number;
+  /**
+   * 链接地址
+   */
+  path?: string;
+  /**
+   * 权限表示
+   */
+  permission?: string;
+  /**
+   * 上级菜单，不传递则为顶级菜单
+   */
+  pid?: number;
+  title: string;
+  /**
+   * 菜单类型 0 菜单 1按钮 2接口
+   */
+  type: number | null;
+  [property: string]: any;
+}
+/**
+ * MenuEditDTO
+ */
+export interface editRequest {
+  /**
+ * 菜单类型 0 菜单 1按钮 2接口
+ */
+  type: number;
+  /**
+   * 是否选中父级菜单
+   */
+  activeMenu?: string;
+  /**
+   * 是否缓存
+   */
+  cache?: number;
+  /**
+   * 组件
+   */
+  component?: string;
+  /**
+   * 是否隐藏
+   */
+  hidden?: number;
+  /**
+   * 图标
+   */
+  icon?: string;
+  id: number | string;
+  /**
+   * 是否外链
+   */
+  iFrame?: number;
+  /**
+   * 菜单排序
+   */
+  menuSort?: number;
+  /**
+   * 链接地址
+   */
+  path?: string;
+  /**
+   * 权限表示
+   */
+  permission?: string;
+  /**
+   * 上级菜单，不传递则为顶级菜单
+   */
+  pid?: number;
+  title: string;
+  [property: string]: any;
+}
+
+/**
+ * 菜单结构
+ *
+ * CzgResult«List«MenuVO»»
+ */
+export interface getListResponse {
+  code?: number | null;
+  data?: MenuVO[] | null;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+/**
+* MenuVO
+*/
+export interface MenuVO {
+  /**
+   * 是否选中父级菜单
+   */
+  activeMenu?: string;
+  /**
+   * 缓存
+   */
+  cache?: boolean;
+  /**
+   * 子菜单
+   */
+  children?: MenuVO[];
+  /**
+   * 组件
+   */
+  component?: string;
+  /**
+   * 创建者
+   */
+  createBy?: string;
+  /**
+   * 创建日期
+   */
+  createTime?: string;
+  /**
+   * 隐藏
+   */
+  hidden?: boolean;
+  /**
+   * 图标
+   */
+  icon?: string;
+  /**
+   * 是否外链
+   */
+  iFrame?: boolean;
+  /**
+   * 商户使用 0：否；1：是；
+   */
+  isShop?: number;
+  /**
+   * ID
+   */
+  menuId?: number;
+  /**
+   * 排序
+   */
+  menuSort?: number;
+  /**
+   * 组件名称
+   */
+  name?: string;
+  /**
+   * 链接地址
+   */
+  path?: string;
+  /**
+   * 权限
+   */
+  permission?: string;
+  /**
+   * 权限集合
+   */
+  permissions?: string[];
+  /**
+   * 上级菜单ID
+   */
+  pid?: number;
+  /**
+   * 子菜单数目
+   */
+  subCount?: number;
+  /**
+   * 菜单标题
+   */
+  title?: string;
+  /**
+   * 菜单类型 0 菜单 1按钮 3接口
+   */
+  type?: number;
+  /**
+   * 更新者
+   */
+  updateBy?: string;
+  /**
+   * 更新时间
+   */
+  updateTime?: string;
+  [property: string]: any;
+}

src/api/account/shopStaff.ts

@@ -0,0 +1,256 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/shopStaff";
+const ShopStaffApi = {
+  getList(params: getListRequest) {
+    return request<any, getListResponse>({
+      url: `${baseURL}`,
+      method: "get",
+      params: params,
+    });
+  },
+  get(id: number | string) {
+    return request<any>({
+      url: `${baseURL}/detail`,
+      method: "get",
+      params: { id }
+    });
+  },
+  add(data: addRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data,
+    });
+  },
+  edit(data: editRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  delete(id: number | string) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "delete",
+      data: {
+        id
+      }
+    });
+  },
+};
+
+export default ShopStaffApi;
+
+export interface getListRequest {
+  /**
+   * 员工编号
+   */
+  code?: string;
+  /**
+   * 账号名
+   */
+  name?: string;
+  [property: string]: any;
+}
+/**
+ * 分页数据
+ *
+ * CzgResult«Page«ShopStaff»»
+ */
+export interface getListResponse {
+  code?: number | null;
+  data?: PageShopStaff;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+/**
+* Page«ShopStaff»
+*/
+export interface PageShopStaff {
+  /**
+   * 每页数据数量最大限制。
+   */
+  maxPageSize?: number | null;
+  /**
+   * 是否优化分页查询 COUNT 语句。
+   */
+  optimizeCountQuery?: boolean | null;
+  /**
+   * 当前页码。
+   */
+  pageNumber?: number | null;
+  /**
+   * 每页数据数量。
+   */
+  pageSize?: number | null;
+  /**
+   * 当前页数据。
+   */
+  records?: ShopStaff[] | null;
+  /**
+   * 总页数。
+   */
+  totalPage?: number | null;
+  /**
+   * 总数据数量。
+   */
+  totalRow?: number | null;
+  [property: string]: any;
+}
+
+/**
+* 店铺员工 实体类。
+*
+* ShopStaff
+*/
+export interface ShopStaff {
+  /**
+   * 员工编号
+   */
+  code?: null | string;
+  createTime?: null | string;
+  /**
+   * 优惠类型 1 折扣 0 金额
+   */
+  discountType?: null | string;
+  /**
+   * 使用系统用户 sys_user id
+   */
+  id?: number | null;
+  /**
+   * 是否允许管理端登录 0：不允许；1：允许
+   */
+  isManage?: number | null;
+  /**
+   * 是否允许pc端登录 0：不允许；1：允许
+   */
+  isPc?: number | null;
+  /**
+   * 最大优惠金额
+   */
+  maxDiscountAmount?: number | null;
+  /**
+   * 员工名称
+   */
+  name?: null | string;
+  /**
+   * shopId
+   */
+  shopId?: number | null;
+  /**
+   * 1启用0不启用
+   */
+  status?: boolean | null;
+  /**
+   * master商户账号staff员工
+   */
+  type?: null | string;
+  updateTime?: null | string;
+  [property: string]: any;
+}
+
+/**
+ * 添加信息
+ *
+ * ShopStaffAddDTO
+ */
+export interface addRequest {
+  /**
+   * 登录账号
+   */
+  accountName: null | string;
+  /**
+   * 登录密码
+   */
+  accountPwd: null | string;
+  /**
+   * 员工编号
+   */
+  code: null | string;
+  /**
+   * 优惠类型 1 折扣 0 金额
+   */
+  discountType?: number | null;
+  /**
+   * 是否允许管理端登录
+   */
+  isManage?: number | null;
+  /**
+   * 是否允许pc登录
+   */
+  isPc?: number | null;
+  /**
+   * 最大优惠金额
+   */
+  maxDiscountAmount?: number | null;
+  /**
+   * 员工姓名
+   */
+  name?: null | string;
+  /**
+   * 手机号
+   */
+  phone: null | string;
+  /**
+   * 角色id
+   */
+  roleId: number | null;
+  /**
+   * 1启用0不启用
+   */
+  status?: number | null;
+  [property: string]: any;
+}
+
+/**
+ * 添加信息
+ *
+ * ShopStaffEditDTO
+ */
+export interface editRequest {
+  /**
+   * 登录密码
+   */
+  accountPwd?: null | string;
+  /**
+   * 员工编号
+   */
+  code?: null | string;
+  /**
+   * 优惠类型 1 折扣 0 金额
+   */
+  discountType?: number | null;
+  id: number | null;
+  /**
+   * 是否允许管理端登录
+   */
+  isManage?: number | null;
+  /**
+   * 是否允许pc登录
+   */
+  isPc?: number | null;
+  /**
+   * 最大优惠金额
+   */
+  maxDiscountAmount?: number | null;
+  /**
+   * 员工姓名
+   */
+  name?: null | string;
+  /**
+   * 手机号
+   */
+  phone?: null | string;
+  /**
+   * 角色id
+   */
+  roleId?: number | null;
+  /**
+   * 1启用0不启用
+   */
+  status?: number | null;
+  [property: string]: any;
+}

src/api/order/order.ts

@@ -1,6 +1,6 @@
 import request from "@/utils/request";
-import { System_BaseUrl } from "@/api/config";
+import { Order_BaseUrl } from "@/api/config";
-const baseURL = System_BaseUrl + "/admin/order";
+const baseURL = Order_BaseUrl + "/admin/order";
 const OrderApi = {
   getList(params: getListRequest) {
     return request<any, getListResponse>({
@@ -9,9 +9,9 @@ const OrderApi = {
       params: params,
     });
   },
-  add() {},
+  add() { },
-  edit() {},
+  edit() { },
-  delete() {},
+  delete() { },
 };
 
 export default OrderApi;

src/api/system/miniAppPages.ts

@@ -0,0 +1,187 @@
+import request from "@/utils/request";
+import { System_BaseUrl } from "@/api/config";
+const baseURL = System_BaseUrl + "/admin/miniAppPages";
+const VersionApi = {
+  getList(data: getListRequest) {
+    return request<any, getListResponse>({
+      url: `${baseURL}/page`,
+      method: "get",
+      params: data
+    });
+  },
+  add(data: addRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data,
+    });
+  },
+  edit(data: editRequest) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  delete(id: string) {
+    return request<any>({
+      url: `${baseURL}/` + id,
+      method: "delete",
+    });
+  },
+};
+
+export default VersionApi;
+
+export interface getListRequest {
+  /**
+   * 小程序页面名称
+   */
+  name?: string;
+  /**
+   * 页码
+   */
+  page?: number;
+  /**
+   * 小程序页面路径
+   */
+  path?: string;
+  /**
+   * 每页数量
+   */
+  size?: number;
+  /**
+   * 小程序页面状态 -1 查全部 1 启用 0 禁用
+   */
+  status?: number;
+  [property: string]: any;
+}
+/**
+ * CzgResultPageMiniAppPagesDTO
+ */
+export interface getListResponse {
+  code?: number;
+  data?: PageMiniAppPagesDTO;
+  msg?: string;
+  [property: string]: any;
+}
+
+/**
+* PageMiniAppPagesDTO
+*/
+export interface PageMiniAppPagesDTO {
+  maxPageSize?: number;
+  optimizeCountQuery?: boolean;
+  pageNumber?: number;
+  pageSize?: number;
+  records?: MiniAppPagesDTO[];
+  totalPage?: number;
+  totalRow?: number;
+  [property: string]: any;
+}
+
+/**
+* MiniAppPagesDTO
+*/
+export interface MiniAppPagesDTO {
+  /**
+   * 页面描述
+   */
+  description?: string;
+  /**
+   * 图标
+   */
+  icon?: string;
+  /**
+   * id
+   */
+  id?: number;
+  /**
+   * 页面名称
+   */
+  name?: string;
+  /**
+   * 页面路径
+   */
+  path?: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态 1:启用 0:禁用
+   */
+  status?: number;
+  [property: string]: any;
+}
+
+
+/**
+ * MiniAppPagesDTOInsertGroup
+ */
+export interface addRequest {
+  /**
+   * 页面描述
+   */
+  description?: string;
+  /**
+   * 图标
+   */
+  icon?: string;
+  /**
+   * id
+   */
+  id?: number;
+  /**
+   * 页面名称
+   */
+  name: string;
+  /**
+   * 页面路径
+   */
+  path: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态 1:启用 0:禁用
+   */
+  status?: number;
+  [property: string]: any;
+}
+
+/**
+ * MiniAppPagesDTOUpdateGroup
+ */
+export interface editRequest {
+  /**
+   * 页面描述
+   */
+  description?: string;
+  /**
+   * 图标
+   */
+  icon?: string;
+  /**
+   * id
+   */
+  id: number;
+  /**
+   * 页面名称
+   */
+  name: string;
+  /**
+   * 页面路径
+   */
+  path: string;
+  /**
+   * 排序
+   */
+  sort?: number;
+  /**
+   * 状态 1:启用 0:禁用
+   */
+  status?: number;
+  [property: string]: any;
+}

src/components/CURD/PageModal.vue

@@ -17,7 +17,10 @@
       >
         <el-row :gutter="20">
           <template v-for="item in formItems" :key="item.prop">
-            <el-col v-show="!item.hidden" v-bind="item.col">
+            <template v-if="item.type === 'title'">
+              <h3>{{ item.label }}</h3>
+            </template>
+            <el-col v-else v-show="!item.hidden" v-bind="item.col">
               <el-form-item :label="item.label" :prop="item.prop">
                 <!-- Label -->
                 <template v-if="item.tips" #label>
@@ -40,7 +43,7 @@
                   <el-input v-model="formData[item.prop]" v-bind="item.attrs" />
                 </template>
                 <!-- textarea 输入框 -->
-                <template v-if="item.type === 'textarea'">
+                <template v-else-if="item.type === 'textarea'">
                   <el-input v-model="formData[item.prop]" v-bind="item.attrs" type="textarea" />
                 </template>
                 <!-- Select 选择器 -->
@@ -51,6 +54,14 @@
                     </template>
                   </el-select>
                 </template>
+                <!-- radio-button 选择器 -->
+                <template v-else-if="item.type === 'radio-button'">
+                  <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
+                    <template v-for="option in item.options" :key="option.value">
+                      <el-radio-button v-bind="option" />
+                    </template>
+                  </el-radio-group>
+                </template>
                 <!-- Radio 单选框 -->
                 <template v-else-if="item.type === 'radio'">
                   <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
@@ -140,7 +151,12 @@
         >
           <el-row :gutter="20">
             <template v-for="item in formItems" :key="item.prop">
-              <el-col v-show="!item.hidden" v-bind="item.col">
+              <template v-if="item.type === 'title'">
+                <el-col :span="24">
+                  <h3>{{ item.label }}</h3>
+                </el-col>
+              </template>
+              <el-col v-else v-show="!item.hidden" v-bind="item.col">
                 <el-form-item :label="item.label" :prop="item.prop">
                   <!-- Label -->
                   <template v-if="item.tips" #label>
@@ -167,9 +183,10 @@
                     />
                   </template>
                   <!-- textarea 输入框 -->
-                  <template v-if="item.type === 'textarea'">
+                  <template v-else-if="item.type === 'textarea'">
                     <el-input v-model="formData[item.prop]" v-bind="item.attrs" type="textarea" />
                   </template>
+
                   <!-- Select 选择器 -->
                   <template v-else-if="item.type === 'select'">
                     <el-select v-model="formData[item.prop]" v-bind="item.attrs">
@@ -178,6 +195,14 @@
                       </template>
                     </el-select>
                   </template>
+                  <!-- radio-button 选择器 -->
+                  <template v-else-if="item.type === 'radio-button'">
+                    <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
+                      <template v-for="option in item.options" :key="option.value">
+                        <el-radio-button v-bind="option" />
+                      </template>
+                    </el-radio-group>
+                  </template>
                   <!-- Radio 单选框 -->
                   <template v-else-if="item.type === 'radio'">
                     <el-radio-group v-model="formData[item.prop]" v-bind="item.attrs">
@@ -390,4 +415,8 @@ function handleDisabled(disable: boolean) {
 defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+h3 {
+  color: rgb(63, 158, 255);
+}
+</style>

src/components/CURD/types.ts

@@ -233,6 +233,8 @@ export type IFormItems<T = any> = Array<{
   | "input-number"
   | "text"
   | "UpImage"
+  | "radio-button"
+  | "title"
   | "custom";
   // 组件属性
   disabled?: boolean;

src/enums/MenuTypeEnum.ts

@@ -1,22 +1,37 @@
 /**
  * 菜单类型枚举
  */
+// export const enum MenuTypeEnum {
+//   /**
+//    * 目录
+//    */
+//   CATALOG = "CATALOG",
+//   /**
+//    * 菜单
+//    */
+//   MENU = "MENU",
+
+//   /**
+//    * 按钮
+//    */
+//   BUTTON = "BUTTON",
+//   /**
+//    * 外链
+//    */
+//   EXTLINK = "EXTLINK",
+// }
 export const enum MenuTypeEnum {
-  /**
-   * 目录
-   */
-  CATALOG = "CATALOG",
   /**
    * 菜单
    */
-  MENU = "MENU",
+  MENU = 0,
 
   /**
    * 按钮
    */
-  BUTTON = "BUTTON",
+  BUTTON = 1,
   /**
-   * 外链
+   * 接口
    */
-  EXTLINK = "EXTLINK",
+  EXTLINK = 2,
 }

src/router/index.ts

@@ -134,7 +134,7 @@ export const constantRoutes: RouteRecordRaw[] = [
       },
       {
         path: "staff",
-        component: () => import("@/views/shop/staff.vue"),
+        component: () => import("@/views/shop/staff/index.vue"),
         name: "shopStaff",
         meta: {
           title: "员工列表",
@@ -189,6 +189,26 @@ export const constantRoutes: RouteRecordRaw[] = [
           keepAlive: true,
         },
       },
+      {
+        path: "menu",
+        component: () => import("@/views/admim/system/menu/index.vue"),
+        name: "adminSysMenu",
+        meta: {
+          title: "菜单管理",
+          affix: false,
+          keepAlive: true,
+        },
+      },
+      {
+        path: "miniAppPages",
+        component: () => import("@/views/admim/system/miniAppPages/index.vue"),
+        name: "adminSysMiniAppPages",
+        meta: {
+          title: "小程序页面",
+          affix: false,
+          keepAlive: true,
+        },
+      },
       {
         path: "version",
         component: () => import("@/views/admim/system/version/index.vue"),

src/types/global.d.ts

@@ -86,6 +86,7 @@ declare global {
     value: string | number;
     /** 文本 */
     label: string;
+    [property: string]: any
     /** 子列表  */
     children?: OptionType[];
   }
@@ -103,4 +104,4 @@ declare global {
     messageList: Array<string>;
   }
 }
-export {};
+export { };

src/views/admim/system/menu/index.vue

@@ -0,0 +1,558 @@
+<template>
+  <div class="app-container">
+    <div class="search-bar">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="title">
+          <el-input
+            v-model="queryParams.title"
+            placeholder="菜单名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
+          <el-button icon="refresh" @click="handleResetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <el-card shadow="never">
+      <div class="mb-10px">
+        <el-button
+          v-hasPerm="['sys:menu:add']"
+          type="success"
+          icon="plus"
+          @click="handleOpenDialog('0')"
+        >
+          新增
+        </el-button>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="menuTableData"
+        highlight-current-row
+        row-key="menuId"
+        :tree-props="{
+          children: 'children',
+          hasChildren: 'hasChildren',
+        }"
+        @row-click="handleRowClick"
+      >
+        <el-table-column label="菜单名称" min-width="100">
+          <template #default="scope">
+            {{ scope.row.title }}
+          </template>
+        </el-table-column>
+
+        <el-table-column label="图标" align="center" width="80">
+          <template #default="scope">
+            <div v-if="scope.row.icon" :class="`i-svg:${scope.row.icon}`" />
+          </template>
+        </el-table-column>
+        <el-table-column label="排序" align="left" width="150" prop="menuSort" />
+        <el-table-column label="权限标识" align="center" width="200" prop="perm" />
+        <el-table-column label="组件路径" align="left" width="250" prop="component" />
+        <el-table-column label="外链" align="left" width="80" prop="iFrame">
+          <template #default="scope">
+            {{ scope.row.iFrame ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="缓存" align="left" width="80" prop="iFrame">
+          <template #default="scope">
+            {{ scope.row.iFrame ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="可见" align="left" width="80" prop="iFrame">
+          <template #default="scope">
+            {{ scope.row.iFrame ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商家可用" align="left" width="80" prop="iFrame">
+          <template #default="scope">
+            {{ scope.row.iFrame ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column label="商家可用" align="left" width="80" prop="iFrame">
+          <template #default="scope">
+            {{ scope.row.iFrame ? "是" : "否" }}
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" align="center" label="操作" width="220">
+          <template #default="scope">
+            <el-button
+              v-if="scope.row.type == 'MENU' || scope.row.type == 'MENU'"
+              v-hasPerm="['sys:menu:add']"
+              type="primary"
+              link
+              size="small"
+              icon="plus"
+              @click.stop="handleOpenDialog(scope.row.id)"
+            >
+              新增
+            </el-button>
+
+            <el-button
+              v-hasPerm="['sys:menu:edit']"
+              type="primary"
+              link
+              size="small"
+              icon="edit"
+              @click.stop="handleOpenDialog(undefined, scope.row.id)"
+            >
+              编辑
+            </el-button>
+            <el-button
+              v-hasPerm="['sys:menu:delete']"
+              type="danger"
+              link
+              size="small"
+              icon="delete"
+              @click.stop="handleDelete(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
+    <el-drawer v-model="dialog.visible" :title="dialog.title" size="50%" @close="handleCloseDialog">
+      <el-form ref="editRequestRef" :model="formData" :rules="rules" label-width="100px">
+        <el-form-item label="父级菜单" prop="pid">
+          <el-tree-select
+            v-model="formData.pid"
+            placeholder="选择上级菜单"
+            :data="menuOptions"
+            filterable
+            check-strictly
+            :render-after-expand="false"
+          />
+        </el-form-item>
+
+        <el-form-item label="菜单名称" prop="title">
+          <el-input v-model="formData.title" placeholder="请输入菜单名称" />
+        </el-form-item>
+
+        <el-form-item label="菜单类型" prop="type">
+          <el-radio-group v-model="formData.type" @change="handleMenuTypeChange">
+            <el-radio :value="0">菜单</el-radio>
+            <el-radio :value="1">按钮</el-radio>
+            <el-radio :value="2">接口</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item v-if="formData.iFrame == 1" label="外链地址" prop="path">
+          <el-input v-model="formData.routePath" placeholder="请输入外链完整路径" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routeName">
+          <template #label>
+            <div class="flex-y-center">
+              路由名称
+              <el-tooltip placement="bottom" effect="light">
+                <template #content>
+                  如果需要开启缓存，需保证页面 defineOptions 中的 name 与此处一致，建议使用驼峰。
+                </template>
+                <el-icon class="ml-1 cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-input v-model="formData.routeName" placeholder="User" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="routePath">
+          <template #label>
+            <div class="flex-y-center">
+              路由路径
+              <el-tooltip placement="bottom" effect="light">
+                <template #content>
+                  定义应用中不同页面对应的 URL 路径，目录需以 / 开头，菜单项不用。例如：系统管理目录
+                  /system，系统管理下的用户管理菜单 user。
+                </template>
+                <el-icon class="ml-1 cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+          <el-input
+            v-if="formData.type == MenuTypeEnum.MENU"
+            v-model="formData.routePath"
+            placeholder="system"
+          />
+          <el-input v-else v-model="formData.routePath" placeholder="user" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" prop="component">
+          <template #label>
+            <div class="flex-y-center">
+              组件路径
+              <el-tooltip placement="bottom" effect="light">
+                <template #content>
+                  组件页面完整路径，相对于 src/views/，如 system/user/index，缺省后缀 .vue
+                </template>
+                <el-icon class="ml-1 cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+
+          <el-input v-model="formData.component" placeholder="system/user/index" style="width: 95%">
+            <template v-if="formData.type == MenuTypeEnum.MENU" #prepend>src/views/</template>
+            <template v-if="formData.type == MenuTypeEnum.MENU" #append>.vue</template>
+          </el-input>
+        </el-form-item>
+
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU">
+          <template #label>
+            <div class="flex-y-center">
+              路由参数
+              <el-tooltip placement="bottom" effect="light">
+                <template #content>
+                  组件页面使用 `useRoute().query.参数名` 获取路由参数值。
+                </template>
+                <el-icon class="ml-1 cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+
+          <div v-if="!formData.params || formData.params.length === 0">
+            <el-button type="success" plain @click="formData.params = [{ key: '', value: '' }]">
+              添加路由参数
+            </el-button>
+          </div>
+
+          <div v-else>
+            <div v-for="(item, index) in formData.params" :key="index">
+              <el-input v-model="item.key" placeholder="参数名" style="width: 100px" />
+
+              <span class="mx-1">=</span>
+
+              <el-input v-model="item.value" placeholder="参数值" style="width: 100px" />
+
+              <el-icon
+                v-if="formData.params.indexOf(item) === formData.params.length - 1"
+                class="ml-2 cursor-pointer color-[var(--el-color-success)]"
+                style="vertical-align: -0.15em"
+                @click="formData.params.push({ key: '', value: '' })"
+              >
+                <CirclePlusFilled />
+              </el-icon>
+              <el-icon
+                class="ml-2 cursor-pointer color-[var(--el-color-danger)]"
+                style="vertical-align: -0.15em"
+                @click="formData.params.splice(formData.params.indexOf(item), 1)"
+              >
+                <DeleteFilled />
+              </el-icon>
+            </div>
+          </div>
+        </el-form-item>
+
+        <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" prop="hidden" label="显示状态">
+          <el-radio-group v-model="formData.hidden">
+            <el-radio :value="1">显示</el-radio>
+            <el-radio :value="0">隐藏</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item
+          v-if="formData.type === MenuTypeEnum.MENU || formData.type === MenuTypeEnum.MENU"
+        >
+          <template #label>
+            <div class="flex-y-center">
+              始终显示
+              <el-tooltip placement="bottom" effect="light">
+                <template #content>
+                  选择“是”，即使目录或菜单下只有一个子节点，也会显示父节点。
+                  <br />
+                  选择“否”，如果目录或菜单下只有一个子节点，则只显示该子节点，隐藏父节点。
+                  <br />
+                  如果是叶子节点，请选择“否”。
+                </template>
+                <el-icon class="ml-1 cursor-pointer">
+                  <QuestionFilled />
+                </el-icon>
+              </el-tooltip>
+            </div>
+          </template>
+
+          <el-radio-group v-model="formData.alwaysShow">
+            <el-radio :value="1">是</el-radio>
+            <el-radio :value="0">否</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item v-if="formData.type === MenuTypeEnum.MENU" label="缓存页面">
+          <el-radio-group v-model="formData.cache">
+            <el-radio :value="1">开启</el-radio>
+            <el-radio :value="0">关闭</el-radio>
+          </el-radio-group>
+        </el-form-item>
+
+        <el-form-item label="排序" prop="menuSort">
+          <el-input-number
+            v-model="formData.menuSort"
+            style="width: 100px"
+            controls-position="right"
+            :min="0"
+          />
+        </el-form-item>
+
+        <!-- 权限标识 -->
+        <el-form-item v-if="formData.type == MenuTypeEnum.BUTTON" label="权限标识" prop="perm">
+          <el-input v-model="formData.perm" placeholder="sys:user:add" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.type !== MenuTypeEnum.BUTTON" label="图标" prop="icon">
+          <!-- 图标选择器 -->
+          <icon-select v-model="formData.icon" />
+        </el-form-item>
+
+        <el-form-item v-if="formData.type == MenuTypeEnum.MENU" label="跳转路由">
+          <el-input v-model="formData.redirect" placeholder="跳转路由" />
+        </el-form-item>
+      </el-form>
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleSubmit">确 定</el-button>
+          <el-button @click="handleCloseDialog">取 消</el-button>
+        </div>
+      </template>
+    </el-drawer>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: "SysMenu",
+  inheritAttrs: false,
+});
+
+import MenuAPI, { getListRequest, editRequest, addRequest, MenuVO } from "@/api/account/menu";
+import { MenuTypeEnum } from "@/enums/MenuTypeEnum";
+
+const queryFormRef = ref();
+const editRequestRef = ref();
+
+const loading = ref(false);
+const dialog = reactive({
+  title: "新增菜单",
+  visible: false,
+});
+
+// 查询参数
+const queryParams = reactive<getListRequest>({});
+// 菜单表格数据
+const menuTableData = ref<MenuVO[]>([]);
+// 顶级菜单下拉选项
+const menuOptions = ref<OptionType[]>([]);
+// 初始菜单表单数据
+{
+}
+const initialeditRequestData = ref<editRequest>({
+  id: "",
+  pid: 0,
+  hidden: 0,
+  menuSort: 1,
+  type: 0, // 默认菜单
+  alwaysShow: 0,
+  cache: 1,
+  params: [],
+  title: "",
+  icon: "",
+  iFrame: 0,
+  permission: "",
+});
+// 菜单表单数据
+const formData = ref({ ...initialeditRequestData.value });
+// 表单验证规则
+const rules = reactive({
+  pid: [{ required: true, message: "请选择父级菜单", trigger: "blur" }],
+  title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
+  type: [{ required: true, message: "请选择菜单类型", trigger: "blur" }],
+  routeName: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
+  routePath: [{ required: true, message: "请输入路由路径", trigger: "blur" }],
+  component: [{ required: true, message: "请输入组件路径", trigger: "blur" }],
+  hidden: [{ required: true, message: "请选择显示状态", trigger: "change" }],
+});
+
+// 选择表格的行菜单ID
+const selectedMenuId = ref<string | undefined>();
+
+// 查询菜单
+function handleQuery() {
+  loading.value = true;
+  MenuAPI.getList(queryParams)
+    .then((data) => {
+      menuTableData.value = data;
+    })
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
+// 重置查询
+function handleResetQuery() {
+  queryFormRef.value.resetFields();
+  handleQuery();
+}
+
+// 行点击事件
+function handleRowClick(row: MenuVO) {
+  selectedMenuId.value = row.id;
+}
+
+/**
+ * 返回格式化后的menus菜单数据
+ */
+function returnFilterMenuData(menus: MenuVO[]): OptionType[] {
+  return menus.map((menu) => {
+    const { title, menuId, children, ...rest } = menu;
+    return {
+      value: menuId,
+      label: title,
+      children: children && returnFilterMenuData(children),
+      ...rest,
+    } as OptionType;
+  });
+}
+
+/**
+ * 打开表单弹窗
+ *
+ * @param pid 父菜单ID
+ * @param menuId 菜单ID
+ */
+function handleOpenDialog(pid?: string, menuId?: string) {
+  MenuAPI.getList({})
+    .then((data) => {
+      menuOptions.value = [{ value: "0", label: "顶级菜单", children: returnFilterMenuData(data) }];
+    })
+    .then(() => {
+      dialog.visible = true;
+      if (menuId) {
+        dialog.title = "编辑菜单";
+        MenuAPI.get(menuId).then((data) => {
+          initialeditRequestData.value = { ...data };
+          formData.value = data;
+        });
+      } else {
+        dialog.title = "新增菜单";
+        formData.value.pid = pid?.toString();
+      }
+    });
+}
+
+// 菜单类型切换
+function handleMenuTypeChange() {
+  // 如果菜单类型改变
+  if (formData.value.type !== initialeditRequestData.value.type) {
+    if (formData.value.type === MenuTypeEnum.MENU) {
+      // 目录切换到菜单时，清空组件路径
+      if (initialeditRequestData.value.type === MenuTypeEnum.MENU) {
+        formData.value.component = "";
+      } else {
+        // 其他情况，保留原有的组件路径
+        formData.value.routePath = initialeditRequestData.value.routePath;
+        formData.value.component = initialeditRequestData.value.component;
+      }
+    }
+  }
+}
+
+/**
+ * 提交表单
+ */
+function handleSubmit() {
+  editRequestRef.value.validate((isValid: boolean) => {
+    if (isValid) {
+      const menuId = formData.value.id;
+      if (menuId) {
+        //修改时父级菜单不能为当前菜单
+        if (formData.value.pid == menuId) {
+          ElMessage.error("父级菜单不能为当前菜单");
+          return;
+        }
+        MenuAPI.edit(menuId, formData.value).then(() => {
+          ElMessage.success("修改成功");
+          handleCloseDialog();
+          handleQuery();
+        });
+      } else {
+        MenuAPI.add(formData.value).then(() => {
+          ElMessage.success("新增成功");
+          handleCloseDialog();
+          handleQuery();
+        });
+      }
+    }
+  });
+}
+
+// 删除菜单
+function handleDelete(menuId: number) {
+  if (!menuId) {
+    ElMessage.warning("请勾选删除项");
+    return false;
+  }
+
+  ElMessageBox.confirm("确认删除已选中的数据项?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(
+    () => {
+      loading.value = true;
+      MenuAPI.delete(menuId)
+        .then(() => {
+          ElMessage.success("删除成功");
+          handleQuery();
+        })
+        .finally(() => {
+          loading.value = false;
+        });
+    },
+    () => {
+      ElMessage.info("已取消删除");
+    }
+  );
+}
+
+function resetForm() {
+  editRequestRef.value.resetFields();
+  editRequestRef.value.clearValidate();
+  formData.value = {
+    id: "",
+    pid: 0,
+    hidden: 0,
+    menuSort: 1,
+    type: 0, // 默认菜单
+    alwaysShow: 0,
+    cache: 1,
+    params: [],
+    title: "",
+    icon: "",
+    iFrame: 0,
+    permission: "",
+  };
+}
+
+// 关闭弹窗
+function handleCloseDialog() {
+  dialog.visible = false;
+  resetForm();
+}
+
+onMounted(() => {
+  handleQuery();
+});
+</script>

src/views/admim/system/miniAppPages/config/add.ts

@@ -0,0 +1,89 @@
+import VersionApi, { type addRequest } from "@/api/system/version";
+import { sourceOptions, typeOptions, isForceOptions } from "./config";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<addRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "新增版本",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return VersionApi.add({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "渠道",
+      prop: "source",
+      rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择渠道",
+      },
+      options: sourceOptions,
+    },
+    {
+      label: "类型",
+      prop: "type",
+      rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择类型",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: typeOptions,
+    },
+    {
+      type: "input",
+      label: "版本号",
+      prop: "version",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+    },
+    {
+      type: "radio",
+      label: "是否强制更新",
+      prop: "isForce",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+      initialValue: 0,
+      options: isForceOptions,
+    },
+    {
+      type: "textarea",
+      label: "更新提示内容",
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入更新提示内容",
+      },
+    },
+    {
+      type: "custom",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传版本文件",
+      },
+      initialValue: [],
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);

src/views/admim/system/miniAppPages/config/config.ts

@@ -0,0 +1,45 @@
+import { property } from "lodash";
+
+export const sourceOptions: options[] = [
+  { label: "桌面端", value: "pc" },
+  { label: "管理端", value: "manager_app" },
+  { label: "电话机点餐", value: "phone_book " },
+];
+export const typeOptions: options[] = [
+  { label: "windows", value: "0" },
+  { label: "安卓", value: "1" },
+  { label: "IOS", value: "2" },
+];
+export const isForceOptions: options[] = [
+  { label: "不强制更新", value: 0 },
+  { label: "强制更新", value: 1 },
+];
+
+export type optionsType = "source" | "type" | "isForce";
+
+export function returnOptions(type: optionsType) {
+  if (type === "source") {
+    return sourceOptions;
+  }
+  if (type === "type") {
+    return typeOptions;
+  }
+  if (type === "isForce") {
+    return isForceOptions;
+  }
+}
+
+export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}
+
+export interface options {
+  label: string;
+  value: string | number;
+  [property: string]: any;
+}

src/views/admim/system/miniAppPages/config/content.ts

@@ -0,0 +1,85 @@
+import VersionApi from "@/api/system/version";
+import type { editRequest } from "@/api/system/version";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig<editRequest> = {
+  pageName: "sys:user",
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  indexAction: function (params) {
+    return VersionApi.getList();
+  },
+  deleteAction: VersionApi.delete,
+  // modifyAction: function (data) {
+  //   // return VersionApi.edit(data);
+  // },
+  pk: "id",
+  toolbar: ["add"],
+  defaultToolbar: ["refresh", "filter", "search"],
+  cols: [
+    { type: "selection", width: 50, align: "center" },
+    { label: "id", align: "center", prop: "id", width: 100, show: true },
+    {
+      label: "渠道",
+      align: "center",
+      prop: "source",
+      width: 120,
+      templet: "custom",
+      slotName: "options",
+    },
+    {
+      label: "类型",
+      align: "center",
+      prop: "type",
+      width: 120,
+      templet: "custom",
+      slotName: "options",
+    },
+    {
+      label: "版本号",
+      align: "center",
+      width: 120,
+      prop: "version",
+    },
+
+    {
+      label: "是否强制升级",
+      align: "center",
+      prop: "isForce",
+      width: 120,
+      templet: "switch",
+      slotName: "isForce",
+    },
+    {
+      label: "更新内容",
+      align: "center",
+      prop: "message",
+      width: 240,
+    },
+    {
+      label: "下载地址",
+      align: "center",
+      prop: "url",
+      templet: "url",
+      slotName: "url",
+    },
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      templet: "tool",
+      operat: ["edit", "delete"],
+    },
+  ],
+};
+
+export default contentConfig;

src/views/admim/system/miniAppPages/config/edit.ts

@@ -0,0 +1,86 @@
+import VersionApi, { type editRequest } from "@/api/system/version";
+import type { IModalConfig } from "@/components/CURD/types";
+import { sourceOptions, typeOptions, isForceOptions } from "./config";
+
+const modalConfig: IModalConfig<editRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "编辑版本",
+    width: 800,
+    draggable: true,
+  },
+  pk: "id",
+  formAction: function (data) {
+    return VersionApi.edit({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "渠道",
+      prop: "source",
+      rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择渠道",
+      },
+      options: sourceOptions,
+    },
+    {
+      label: "类型",
+      prop: "type",
+      rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择类型",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: typeOptions,
+    },
+    {
+      type: "input",
+      label: "版本号",
+      prop: "version",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+    },
+    {
+      type: "radio",
+      label: "是否强制更新",
+      prop: "isForce",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+      initialValue: 0,
+      options: isForceOptions,
+    },
+    {
+      type: "textarea",
+      label: "更新提示内容",
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入更新提示内容",
+      },
+    },
+    {
+      type: "custom",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传版本文件",
+      },
+      initialValue: [],
+    },
+  ],
+};
+
+export default reactive(modalConfig);

src/views/admim/system/miniAppPages/config/search.ts

@@ -0,0 +1,21 @@
+import type { ISearchConfig } from "@/components/CURD/types";
+
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "input",
+      label: "版本号",
+      prop: "keywords",
+      attrs: {
+        placeholder: "请输入版本号",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+  ],
+};
+
+export default searchConfig;

src/views/admim/system/miniAppPages/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <!-- 搜索 -->
+    <page-search
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+    <!-- 列表 -->
+    <page-content
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleAddClick"
+      @edit-click="handleEditClick"
+      @export-click="handleExportClick"
+      @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
+    >
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
+      </template>
+      <template #options="scope">
+        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+      </template>
+      <template #gender="scope">
+        <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+      </template>
+      <template #mobile="scope">
+        <el-text>{{ scope.row[scope.prop] }}</el-text>
+        <copy-button
+          v-if="scope.row[scope.prop]"
+          :text="scope.row[scope.prop]"
+          style="margin-left: 2px"
+        />
+      </template>
+    </page-content>
+
+    <!-- 新增 -->
+    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+      <template #url="scope">
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+      </template>
+    </page-modal>
+
+    <!-- 编辑 -->
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+    >
+      <template #url="scope">
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+      </template>
+    </page-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+// import Api from "@/api/system/miniProgramVersion";
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";
+
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+  // addModalConfig.formItems[2]!.attrs!.data =
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  // const data = await Api.getFormData(row.id);
+  console.log({ ...row, url: [row.url] });
+  editModalRef.value?.setFormData({ ...row, url: [row.url] });
+}
+1;
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {
+  console.log(data);
+}
+</script>

src/views/admim/system/role/index.vue

@@ -31,7 +31,7 @@
         v-loading="loading"
         :data="roleList"
         highlight-current-row
-        border
+        :border="true"
         @selection-change="handleSelectionChange"
       >
         <el-table-column type="selection" width="55" align="center" />
@@ -209,7 +209,7 @@ defineOptions({
 });
 
 import RoleApi, { SysRole, addRequest, getListRequest } from "@/api/account/role";
-import MenuAPI from "@/api/system/menu";
+import MenuAPI, { type RouteVO } from "@/api/account/menu";
 
 const queryFormRef = ref();
 const addRequestRef = ref();
@@ -228,7 +228,7 @@ const queryParams = reactive<getListRequest>({
 // 角色表格数据
 const roleList = ref<SysRole[]>();
 // 菜单权限下拉
-const menuPermOptions = ref<OptionType[]>([]);
+const menuPermOptions = ref<RouteVO[]>([]);
 
 // 弹窗
 const dialog = reactive({
@@ -372,6 +372,23 @@ function handleDelete(roleId?: number) {
   );
 }
 
+interface typeRoute extends RouteVO {
+  label: string | number;
+  value: string | number;
+  children: typeRoute[];
+}
+
+function returnMenu(menu: RouteVO[]): typeRoute[] {
+  return menu.map((v) => {
+    return {
+      ...v,
+      label: v.title,
+      value: v.menuId,
+      children: v.children ? returnMenu(v.children) : [],
+    };
+  });
+}
+
 // 打开分配菜单权限弹窗
 async function handleOpenAssignPermDialog(row: SysRole) {
   const roleId = row.id;
@@ -383,7 +400,8 @@ async function handleOpenAssignPermDialog(row: SysRole) {
     checkedRole.value.name = row.name as string;
 
     // 获取所有的菜单
-    menuPermOptions.value = await MenuAPI.getOptions();
+    let arr: RouteVO[] = await MenuAPI.getRoutes();
+    menuPermOptions.value = returnMenu(arr);
 
     // 回显角色已拥有的菜单
     // RoleApi.getRoleMenuIds(roleId)

src/views/admim/system/version/config/content2.ts

@@ -1,133 +0,0 @@
-import type { IContentConfig } from "@/components/CURD/types";
-
-const contentConfig: IContentConfig = {
-  pageName: "sys:user",
-  table: {
-    showOverflowTooltip: true,
-  },
-  toolbar: [],
-  indexAction: function (params) {
-    // 模拟发起网络请求获取列表数据
-    console.log("indexAction:", params);
-    return Promise.resolve({
-      total: 2,
-      list: [
-        {
-          id: 1,
-          username: "tom",
-          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
-          percent: 99,
-          price: 10,
-          url: "https://www.baidu.com",
-          icon: "el-icon-setting",
-          gender: 1,
-          status: 1,
-          status2: 1,
-          sort: 99,
-          createTime: 1715647982437,
-        },
-        {
-          id: 2,
-          username: "jerry",
-          avatar: "https://foruda.gitee.com/images/1723603502796844527/03cdca2a_716974.gif",
-          percent: 88,
-          price: 999,
-          url: "https://www.google.com",
-          icon: "el-icon-user",
-          gender: 0,
-          status: 0,
-          status2: 0,
-          sort: 0,
-          createTime: 1715648977426,
-        },
-      ],
-    });
-  },
-  modifyAction(data) {
-    // 模拟发起网络请求修改字段
-    // console.log("modifyAction:", data);
-    ElMessage.success(JSON.stringify(data));
-    return Promise.resolve(null);
-  },
-  cols: [
-    { type: "index", width: 50, align: "center" },
-    { label: "ID", align: "center", prop: "id", show: false },
-    { label: "文本", align: "center", prop: "username" },
-    { label: "图片", align: "center", prop: "avatar", templet: "image" },
-    {
-      label: "百分比",
-      align: "center",
-      prop: "percent",
-      templet: "percent",
-    },
-    {
-      label: "货币符",
-      align: "center",
-      prop: "price",
-      templet: "price",
-      priceFormat: "$",
-    },
-    { label: "链接", align: "center", prop: "url", width: 180, templet: "url" },
-    { label: "图标", align: "center", prop: "icon", templet: "icon" },
-    {
-      label: "列表值",
-      align: "center",
-      prop: "gender",
-      templet: "list",
-      selectList: { "0": "女", "1": "男" },
-    },
-    {
-      label: "自定义",
-      align: "center",
-      prop: "status",
-      templet: "custom",
-      slotName: "status",
-    },
-    {
-      label: "Switch",
-      align: "center",
-      prop: "status2",
-      templet: "switch",
-      activeValue: 1,
-      inactiveValue: 0,
-      activeText: "启用",
-      inactiveText: "禁用",
-    },
-    {
-      label: "输入框",
-      align: "center",
-      prop: "sort",
-      templet: "input",
-      inputType: "number",
-    },
-    {
-      label: "日期格式化",
-      align: "center",
-      prop: "createTime",
-      minWidth: 120,
-      templet: "date",
-      dateFormat: "YYYY/MM/DD HH:mm:ss",
-    },
-    {
-      label: "操作栏",
-      align: "center",
-      fixed: "right",
-      width: 220,
-      templet: "tool",
-      operat: [
-        {
-          name: "reset_pwd",
-          auth: "password:reset",
-          icon: "refresh-left",
-          text: "重置密码",
-          type: "primary",
-          render(row) {
-            return row.id === 1;
-          },
-        },
-      ],
-    },
-  ],
-};
-
-export default contentConfig;

src/views/admim/system/version/index.vue

@@ -1,96 +1,74 @@
 <template>
   <div class="app-container">
     <!-- 列表 -->
-    <template v-if="isA">
+    <!-- 搜索 -->
-      <!-- 搜索 -->
+    <page-search
-      <page-search
+      ref="searchRef"
-        ref="searchRef"
+      :search-config="searchConfig"
-        :search-config="searchConfig"
+      @query-click="handleQueryClick"
-        @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
-        @reset-click="handleResetClick"
+    />
-      />
+    <!-- 列表 -->
-      <!-- 列表 -->
+    <page-content
-      <page-content
+      ref="contentRef"
-        ref="contentRef"
+      :content-config="contentConfig"
-        :content-config="contentConfig"
+      @add-click="handleAddClick"
-        @add-click="handleAddClick"
+      @edit-click="handleEditClick"
-        @edit-click="handleEditClick"
+      @export-click="handleExportClick"
-        @export-click="handleExportClick"
+      @search-click="handleSearchClick"
-        @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick"
-        @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
-        @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
-        @filter-change="handleFilterChange"
+    >
-      >
+      <template #status="scope">
-        <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
-          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
-            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
-          </el-tag>
+      </template>
-        </template>
+      <template #options="scope">
-        <template #options="scope">
+        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
-          {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+      </template>
-        </template>
+      <template #gender="scope">
-        <template #gender="scope">
+        <DictLabel v-model="scope.row[scope.prop]" code="gender" />
-          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+      </template>
-        </template>
+      <template #mobile="scope">
-        <template #mobile="scope">
+        <el-text>{{ scope.row[scope.prop] }}</el-text>
-          <el-text>{{ scope.row[scope.prop] }}</el-text>
+        <copy-button
-          <copy-button
+          v-if="scope.row[scope.prop]"
-            v-if="scope.row[scope.prop]"
+          :text="scope.row[scope.prop]"
-            :text="scope.row[scope.prop]"
+          style="margin-left: 2px"
-            style="margin-left: 2px"
+        />
-          />
+      </template>
-        </template>
+    </page-content>
-      </page-content>
 
-      <!-- 新增 -->
+    <!-- 新增 -->
-      <page-modal
+    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
-        ref="addModalRef"
+      <template #url="scope">
-        :modal-config="addModalConfig"
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
-        @submit-click="handleSubmitClick"
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
-      >
+      </template>
-        <template #url="scope">
+    </page-modal>
-          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
-          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
-        </template>
-      </page-modal>
 
-      <!-- 编辑 -->
+    <!-- 编辑 -->
-      <page-modal
+    <page-modal
-        ref="editModalRef"
+      ref="editModalRef"
-        :modal-config="editModalConfig"
+      :modal-config="editModalConfig"
-        @submit-click="handleSubmitClick"
+      @submit-click="handleSubmitClick"
-      >
+    >
-        <template #url="scope">
+      <template #url="scope">
-          <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
-          <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
-        </template>
+      </template>
-      </page-modal>
+    </page-modal>
-    </template>
-    <template v-else>
-      <page-content
-        ref="contentRef"
-        :content-config="contentConfig2"
-        @operat-click="handleOperatClick"
-      >
-        <template #status="scope">
-          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
-            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
-          </el-tag>
-        </template>
-      </page-content>
-    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import VersionApi from "@/api/system/version";
-import DeptAPI from "@/api/system/dept";
-import RoleAPI from "@/api/system/role";
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./config/add";
 import contentConfig from "./config/content";
-import contentConfig2 from "./config/content2";
 import editModalConfig from "./config/edit";
 import searchConfig from "./config/search";
 import { returnOptionsLabel } from "./config/config";
@@ -113,10 +91,7 @@ const {
 // 新增
 async function handleAddClick() {
   addModalRef.value?.setModalVisible();
-  // 加载部门下拉数据源
+  // addModalConfig.formItems[2]!.attrs!.data =
-  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-  // 加载角色下拉数据源
-  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
 }
 // 编辑
 async function handleEditClick(row: IObject) {
@@ -138,38 +113,5 @@ function handleToolbarClick(name: string) {
 // 其他操作列
 async function handleOperatClick(data: IOperatData) {
   console.log(data);
-  // 重置密码
-  if (data.name === "reset_pwd") {
-    ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
-      confirmButtonText: "确定",
-      cancelButtonText: "取消",
-    }).then(({ value }) => {
-      if (!value || value.length < 6) {
-        ElMessage.warning("密码至少需要6位字符，请重新输入");
-        return false;
-      }
-      VersionApi.resetPassword(data.row.id, value).then(() => {
-        ElMessage.success("密码重置成功，新密码是：" + value);
-      });
-    });
-  } else if (data.name === "detail") {
-    // 禁用表单编辑
-    editModalRef.value?.handleDisabled(true);
-    // 打开抽屉
-    editModalRef.value?.setModalVisible();
-    // 修改抽屉标题
-    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
-    // 加载部门下拉数据源
-    editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
-    // 加载角色下拉数据源
-    editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
-    // 根据id获取数据进行填充
-    const formData = await VersionApi.getFormData(data.row.id);
-    // 设置表单数据
-    editModalRef.value?.setFormData(formData);
-  }
 }
-
-// 切换示例
-const isA = ref(true);
 </script>

src/views/order/index/config/config.ts

@@ -1,4 +1,4 @@
-import type { statusType } from "@/api/system/order";
+import type { statusType } from "@/api/order/order";
 export const statusOptions: statusOptions[] = [
   { label: "全部", value: "" },
   { label: "待支付", value: "unpaid" },

src/views/order/index/config/content.ts

@@ -1,4 +1,4 @@
-import OrderApi from "@/api/system/order";
+import OrderApi from "@/api/order/order";
 import type { editRequest } from "@/api/system/version";
 import type { IContentConfig } from "@/components/CURD/types";
 

src/views/shop/staff.vue

@@ -1 +0,0 @@
-<template></template>

src/views/shop/staff/components/title.vue

@@ -0,0 +1,14 @@
+<template>
+  <h3>{{ title }}</h3>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+});
+</script>
+
+<style lang="scss" scoped></style>

src/views/shop/staff/config/add.ts

@@ -0,0 +1,177 @@
+import ShopStaffApi, { type addRequest } from "@/api/account/shopStaff";
+import type { IModalConfig } from "@/components/CURD/types";
+import { discountTypeOptions } from './config'
+const modalConfig: IModalConfig<addRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "添加员工",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return ShopStaffApi.add(data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "基本信息设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
+    {
+      label: "角色",
+      prop: "roleId",
+      rules: [{ required: true, message: "请选择角色", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择角色",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: []
+    },
+    {
+      label: "员工姓名",
+      prop: "name",
+      rules: [{ required: false, message: "请输入员工姓名", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入员工姓名",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "员工编号",
+      prop: "code",
+      rules: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入员工编号",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "手机号",
+      prop: "phone",
+      rules: [{
+        required: true,
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入手机号",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "登录账号",
+      prop: "accountName",
+      rules: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入登录账号",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "登录密码",
+      prop: "accountPwd",
+      rules: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入登录密码",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+
+
+    {
+      label: "优惠类型",
+      prop: "discountType",
+      rules: [{ required: false, message: "请选择优惠类型", trigger: "blur" }],
+      type: "radio-button",
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: discountTypeOptions,
+    },
+    {
+      label: "最大优惠金额",
+      prop: "maxDiscountAmount",
+      rules: [{ required: false, message: "请输入最大优惠金额", trigger: "blur" }],
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "是否启用",
+      prop: "status",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
+    {
+      label: "是否允许管理端登录",
+      prop: "isManage",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    },
+    {
+      label: "是否允许pc登录",
+      prop: "isPc",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);

src/views/shop/staff/config/config.ts

@@ -0,0 +1,29 @@
+
+export const discountTypeOptions: options[] = [
+  { label: "金额", value: "0" },
+  { label: "折扣", value: "1" },
+];
+
+
+export type optionsType = "discountType" | "";
+
+export function returnOptions(type: optionsType) {
+  if (type === "discountType") {
+    return discountTypeOptions;
+  }
+}
+
+export function returnOptionsLabel(optionsType: optionsType, value: string | number) {
+  const options = returnOptions(optionsType);
+  if (!options) {
+    return "";
+  }
+  const option = options.find((item) => item.value === value);
+  return option ? option.label : "";
+}
+
+export interface options {
+  label: string;
+  value: string | number;
+  [property: string]: any;
+}

src/views/shop/staff/config/content.ts

@@ -0,0 +1,62 @@
+import ShopStaffApi, { type getListRequest } from "@/api/account/shopStaff";
+import type { PageShopStaff } from "@/api/account/shopStaff";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig = {
+  pageName: "sys:user",
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  deleteAction: function (id: string) {
+    return ShopStaffApi.delete(id);
+  },
+  indexAction: function (params: getListRequest) {
+    return ShopStaffApi.getList(params);
+  },
+  // modifyAction: function (data) {
+  //   // return ShopStaffApi.edit(data);
+  // },
+  pk: "id",
+  toolbar: ["add"],
+  defaultToolbar: ["refresh", "filter", "search"],
+  cols: [
+    { type: "selection", width: 50, align: "center" },
+    { prop: "id", width: 50, align: "center", show: false },
+    {
+      label: "员工名称",
+      align: "center",
+      prop: "name",
+    },
+    {
+      label: "员工编号",
+      align: "center",
+      prop: "code",
+    },
+    {
+      label: "最大优惠金额",
+      align: "center",
+      prop: "maxDiscountAmount",
+    },
+    {
+      label: "优惠类型",
+      align: "center",
+      prop: "discountType",
+    },
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      templet: "tool",
+      operat: ["edit", "delete"],
+    },
+  ],
+};
+
+export default contentConfig;

src/views/shop/staff/config/edit.ts

@@ -0,0 +1,177 @@
+import ShopStaffApi, { type editRequest } from "@/api/account/shopStaff";
+import type { IModalConfig } from "@/components/CURD/types";
+import { discountTypeOptions } from './config'
+const modalConfig: IModalConfig<editRequest> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "编辑员工",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return ShopStaffApi.edit(data);
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+    {
+      label: "基本信息设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
+    {
+      label: "角色",
+      prop: "roleId",
+      rules: [{ required: true, message: "请选择角色", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择角色",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: []
+    },
+    {
+      label: "员工姓名",
+      prop: "name",
+      rules: [{ required: false, message: "请输入员工姓名", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入员工姓名",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "员工编号",
+      prop: "code",
+      rules: [{ required: true, message: "请输入员工编号", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入员工编号",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "手机号",
+      prop: "phone",
+      rules: [{
+        required: true,
+        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
+        message: "请输入正确的手机号码",
+        trigger: "blur",
+      }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入手机号",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "登录账号",
+      prop: "accountName",
+      rules: [{ required: true, message: "请输入登录账号", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入登录账号",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "登录密码",
+      prop: "accountPwd",
+      rules: [{ required: true, message: "请输入登录密码", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入登录密码",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+
+
+    {
+      label: "优惠类型",
+      prop: "discountType",
+      rules: [{ required: false, message: "请选择优惠类型", trigger: "blur" }],
+      type: "radio-button",
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: discountTypeOptions,
+    },
+    {
+      label: "最大优惠金额",
+      prop: "maxDiscountAmount",
+      rules: [{ required: false, message: "请输入最大优惠金额", trigger: "blur" }],
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "是否启用",
+      prop: "status",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      label: "员工权限设置",
+      prop: "",
+      type: "title",
+      slotName: "title",
+    },
+    {
+      label: "是否允许管理端登录",
+      prop: "isManage",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    },
+    {
+      label: "是否允许pc登录",
+      prop: "isPc",
+      type: "radio",
+      options: [
+        { label: "正常", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);

src/views/shop/staff/config/search.ts

@@ -0,0 +1,34 @@
+import type { ISearchConfig } from "@/components/CURD/types";
+import { paramTypeOptions } from './config'
+
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "input",
+      label: "账号名",
+      prop: "name",
+      attrs: {
+        placeholder: "请输入账号名",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "input",
+      label: "员工编号",
+      prop: "code",
+      attrs: {
+        placeholder: "请输入员工编号",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+  ],
+};
+
+export default searchConfig;

src/views/shop/staff/index.vue

@@ -0,0 +1,133 @@
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <!-- 搜索 -->
+    <page-search
+      ref="searchRef"
+      :search-config="searchConfig"
+      @query-click="handleQueryClick"
+      @reset-click="handleResetClick"
+    />
+    <!-- 列表 -->
+    <page-content
+      ref="contentRef"
+      :content-config="contentConfig"
+      @add-click="handleAddClick"
+      @edit-click="handleEditClick"
+      @export-click="handleExportClick"
+      @search-click="handleSearchClick"
+      @toolbar-click="handleToolbarClick"
+      @operat-click="handleOperatClick"
+      @filter-change="handleFilterChange"
+    >
+      <template #status="scope">
+        <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+          {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+        </el-tag>
+      </template>
+      <template #options="scope">
+        {{ returnOptionsLabel(scope.prop, scope.row[scope.prop]) }}
+      </template>
+      <template #gender="scope">
+        <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+      </template>
+      <template #mobile="scope">
+        <el-text>{{ scope.row[scope.prop] }}</el-text>
+        <copy-button
+          v-if="scope.row[scope.prop]"
+          :text="scope.row[scope.prop]"
+          style="margin-left: 2px"
+        />
+      </template>
+    </page-content>
+
+    <!-- 新增 -->
+    <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+      <template #url="scope">
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+      </template>
+    </page-modal>
+
+    <!-- 编辑 -->
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+    >
+      <template #url="scope">
+        <FileUpload v-model="scope.formData[scope.prop]" :limit="1" v-bind="scope.attrs" />
+        <!-- <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" /> -->
+      </template>
+    </page-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./config/add";
+import contentConfig from "./config/content";
+import editModalConfig from "./config/edit";
+import searchConfig from "./config/search";
+import { returnOptionsLabel } from "./config/config";
+import RoleApi, { type SysRole } from "@/api/account/role";
+import ShopStaffApi from "@/api/account/shopStaff";
+
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 数据初始化
+async function init() {
+  const res = await RoleApi.getList({ page: 1, size: 100 });
+  const roleArr = res.records.map((item: SysRole) => {
+    return {
+      ...item,
+      label: item.name,
+      value: item.id,
+    };
+  });
+  addModalConfig.formItems[1]!.options = roleArr;
+  editModalConfig.formItems[1]!.options = roleArr;
+}
+init();
+
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  await ShopStaffApi.get(row.id).then((res) => {
+    console.log(res);
+    editModalRef.value?.setFormData({ ...res });
+  });
+}
+1;
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {}
+
+// 切换示例
+</script>