Merge branch 'master' of https://e.coding.net/g-cphe0354/cashier/cashier-web

2025-02-14 16:46:50 +08:00
parent 679c1c85c2 82a5000678
commit cc6142b617
23 changed files with 958 additions and 342 deletions
--- a/src/views/admim/system/version/config/add.ts
+++ b/src/views/admim/system/version/config/add.ts
@@ -1,7 +1,8 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
+import VersionApi, { type addRequest } from "@/api/system/version";
+import { sourceOptions, typeOptions, isForceOptions } from "./config";
 import type { IModalConfig } from "@/components/CURD/types";

-const modalConfig: IModalConfig<UserForm> = {
+const modalConfig: IModalConfig<addRequest> = {
  pageName: "sys:user",
  dialog: {
    title: "新增版本",
@@ -11,7 +12,9 @@ const modalConfig: IModalConfig<UserForm> = {
  form: {
    labelWidth: 140,
  },
-  formAction: UserAPI.add,
+  formAction: function (data) {
+    return VersionApi.add({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
+  },
  beforeSubmit(data) {
    console.log("提交之前处理", data);
  },
@@ -24,11 +27,7 @@ const modalConfig: IModalConfig<UserForm> = {
      attrs: {
        placeholder: "请选择渠道",
      },
-      options: [
-        { label: "桌面端", value: "pc" },
-        { label: "管理端", value: "manager_app" },
-        { label: "电话机点餐", value: "phone_book " },
-      ],
+      options: sourceOptions,
    },
    {
      label: "类型",
@@ -42,11 +41,7 @@ const modalConfig: IModalConfig<UserForm> = {
        xs: 24,
        sm: 12,
      },
-      options: [
-        { label: "windows", value: 0 },
-        { label: "安卓", value: 1 },
-        { label: "iOS", value: 2 },
-      ],
+      options: typeOptions,
    },
    {
      type: "input",
@@ -66,20 +61,27 @@ const modalConfig: IModalConfig<UserForm> = {
        placeholder: "请输入版本号",
      },
      initialValue: 0,
-      options: [
-        { label: "是", value: 1 },
-        { label: "否", value: 0 },
-      ],
+      options: isForceOptions,
    },
    {
      type: "textarea",
      label: "更新提示内容",
-      prop: "version",
-      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
      attrs: {
-        placeholder: "请输入版本号",
+        placeholder: "请输入更新提示内容",
      },
    },
+    {
+      type: "custom",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
+      attrs: {
+        placeholder: "请上传版本文件",
+      },
+      initialValue: [],
+    },
  ],
 };

--- a/src/views/admim/system/version/config/config.ts
+++ b/src/views/admim/system/version/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;
+}
--- a/src/views/admim/system/version/config/content.ts
+++ b/src/views/admim/system/version/config/content.ts
@@ -1,9 +1,8 @@
 import VersionApi from "@/api/system/version";
-import RoleAPI from "@/api/system/role";
-import type { UserPageQuery } from "@/api/system/user";
+import type { editRequest } from "@/api/system/version";
 import type { IContentConfig } from "@/components/CURD/types";

-const contentConfig: IContentConfig<UserPageQuery> = {
+const contentConfig: IContentConfig<editRequest> = {
  pageName: "sys:user",
  table: {
    border: true,
@@ -19,30 +18,37 @@ const contentConfig: IContentConfig<UserPageQuery> = {
    return VersionApi.getList();
  },
  deleteAction: VersionApi.delete,
-  importsAction(data) {
-    // 模拟导入数据
-    console.log("importsAction", data);
-    return Promise.resolve();
-  },
-  exportsAction: async function (params) {
-    // 模拟获取到的是全量数据
-    const res = await VersionApi.getList(params);
-    console.log("exportsAction", res.list);
-    return res.list;
-  },
+  // 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" },
+    {
+      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: "version" },

    {
      label: "是否强制升级",
@@ -52,6 +58,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
      templet: "switch",
      slotName: "isForce",
    },
+    {
+      label: "更新内容",
+      align: "center",
+      prop: "message",
+      width: 240,
+    },
    {
      label: "下载地址",
      align: "center",
@@ -65,20 +77,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
      fixed: "right",
      width: 280,
      templet: "tool",
-      operat: [
-        {
-          icon: "Document",
-          name: "edit",
-          text: "编辑",
-        },
-        {
-          name: "delete",
-          icon: "delete",
-          text: "删除",
-        },
-        "edit",
-        "delete",
-      ],
+      operat: ["edit", "delete"],
    },
  ],
 };
--- a/src/views/admim/system/version/config/edit.ts
+++ b/src/views/admim/system/version/config/edit.ts
@@ -1,116 +1,85 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
+import VersionApi, { type editRequest } from "@/api/system/version";
 import type { IModalConfig } from "@/components/CURD/types";
-import { DeviceEnum } from "@/enums/DeviceEnum";
-import { useAppStore } from "@/store";
+import { sourceOptions, typeOptions, isForceOptions } from "./config";

-const modalConfig: IModalConfig<UserForm> = {
+const modalConfig: IModalConfig<editRequest> = {
  pageName: "sys:user",
-  component: "drawer",
-  drawer: {
-    title: "修改用户",
-    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
+  dialog: {
+    title: "编辑版本",
+    width: 800,
+    draggable: true,
  },
  pk: "id",
  formAction: function (data) {
-    return UserAPI.update(data.id as number, data);
+    return VersionApi.edit({ ...data, url: typeof data.url === "string" ? data.url : data.url[0] });
  },
  beforeSubmit(data) {
    console.log("提交之前处理", data);
  },
  formItems: [
    {
-      label: "用户名",
-      prop: "username",
-      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
-      type: "input",
+      label: "渠道",
+      prop: "source",
+      rules: [{ required: true, message: "请选择渠道", trigger: "blur" }],
+      type: "select",
      attrs: {
-        placeholder: "请输入用户名",
-        readonly: true,
+        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: "请输入版本号",
      },
    },
    {
-      label: "用户昵称",
-      prop: "nickname",
-      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-      type: "input",
+      type: "radio",
+      label: "是否强制更新",
+      prop: "isForce",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
      attrs: {
-        placeholder: "请输入用户昵称",
+        placeholder: "请输入版本号",
      },
+      initialValue: 0,
+      options: isForceOptions,
    },
    {
-      label: "所属部门",
-      prop: "deptId",
-      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-      type: "tree-select",
+      type: "textarea",
+      label: "更新提示内容",
+      prop: "message",
+      rules: [{ required: true, message: "请输入更新提示内容", trigger: "blur" }],
      attrs: {
-        placeholder: "请选择所属部门",
-        data: [],
-        filterable: true,
-        "check-strictly": true,
-        "render-after-expand": false,
+        placeholder: "请输入更新提示内容",
      },
    },
    {
      type: "custom",
-      label: "性别",
-      prop: "gender",
-      initialValue: 1,
-    },
-    {
-      label: "角色",
-      prop: "roleIds",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
-      type: "select",
+      label: "版本文件",
+      prop: "url",
+      rules: [{ required: true, message: "请上传版本文件", trigger: "blur" }],
      attrs: {
-        placeholder: "请选择",
-        multiple: true,
+        placeholder: "请上传版本文件",
      },
-      options: [],
      initialValue: [],
    },
-    {
-      type: "input",
-      label: "手机号码",
-      prop: "mobile",
-      rules: [
-        {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          message: "请输入正确的手机号码",
-          trigger: "blur",
-        },
-      ],
-      attrs: {
-        placeholder: "请输入手机号码",
-        maxlength: 11,
-      },
-    },
-    {
-      label: "邮箱",
-      prop: "email",
-      rules: [
-        {
-          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-          message: "请输入正确的邮箱地址",
-          trigger: "blur",
-        },
-      ],
-      type: "input",
-      attrs: {
-        placeholder: "请输入邮箱",
-        maxlength: 50,
-      },
-    },
-    {
-      label: "状态",
-      prop: "status",
-      type: "switch",
-      attrs: {
-        activeText: "正常",
-        inactiveText: "禁用",
-        activeValue: 1,
-        inactiveValue: 0,
-      },
-    },
  ],
 };

--- a/src/views/admim/system/version/index.vue
+++ b/src/views/admim/system/version/index.vue
@@ -26,6 +26,9 @@
            {{ 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>
@@ -45,8 +48,9 @@
        :modal-config="addModalConfig"
        @submit-click="handleSubmitClick"
      >
-        <template #gender="scope">
-          <Dict v-model="scope.formData[scope.prop]" code="gender" />
+        <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>

@@ -56,8 +60,9 @@
        :modal-config="editModalConfig"
        @submit-click="handleSubmitClick"
      >
-        <template #gender="scope">
-          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        <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>
    </template>
@@ -88,6 +93,7 @@ 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";

 const {
  searchRef,
@@ -108,18 +114,20 @@ const {
 async function handleAddClick() {
  addModalRef.value?.setModalVisible();
  // 加载部门下拉数据源
-  addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // addModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
  // 加载角色下拉数据源
-  addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
 }
 // 编辑
 async function handleEditClick(row: IObject) {
  editModalRef.value?.handleDisabled(false);
  editModalRef.value?.setModalVisible();
  // 根据id获取数据进行填充
-  const data = await VersionApi.getFormData(row.id);
-  editModalRef.value?.setFormData(data);
+  // const data = await VersionApi.getFormData(row.id);
+  console.log({ ...row, url: [row.url] });
+  editModalRef.value?.setFormData({ ...row, url: [row.url] });
 }
+1;
 // 其他工具栏
 function handleToolbarClick(name: string) {
  console.log(name);
--- a/src/views/order/index.vue
+++ b/src/views/order/index.vue
@@ -1 +0,0 @@
-<template></template>
--- a/src/views/order/index/config/add.ts
+++ b/src/views/order/index/config/add.ts
@@ -0,0 +1,88 @@
+import VersionApi, { type addRequest } from "@/api/system/version";
+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: [],
+    },
+    {
+      label: "类型",
+      prop: "type",
+      rules: [{ required: true, message: "请选择类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择类型",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      options: [],
+    },
+    {
+      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: [],
+    },
+    {
+      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);
--- a/src/views/order/index/config/config.ts
+++ b/src/views/order/index/config/config.ts
@@ -0,0 +1,79 @@
+import type { statusType } from "@/api/system/order";
+export const statusOptions: statusOptions[] = [
+  { label: "全部", value: "" },
+  { label: "待支付", value: "unpaid" },
+  { label: "制作中", value: "in-production" },
+  { label: "待取餐", value: "wait-out" },
+  { label: "订单完成", value: "done" },
+  { label: "申请退单", value: "refunding" },
+  { label: "退单", value: "refund" },
+  { label: "部分退单", value: "part-refund" },
+  { label: "取消订单", value: "cancelled" },
+];
+export const payTypeOptions: payTypeOptions[] = [
+  { label: "全部", value: "" },
+  {
+    label: "现金",
+    value: "cash",
+  },
+  {
+    label: "银行卡",
+    value: "bank",
+  },
+  {
+    label: "扫码支付",
+    value: "scanCode",
+  },
+  {
+    label: "储值卡",
+    value: "deposit",
+  },
+  {
+    label: "会员支付",
+    value: "vipPay",
+  },
+  {
+    label: "挂账",
+    value: "arrears",
+  },
+];
+export type optionsType = "status";
+
+export function returnOptions(type: optionsType) {
+  if (type === "status") {
+    return statusOptions;
+  }
+}
+
+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;
+}
+export interface statusOptions extends options {
+  value: statusType;
+}
+
+export type payTypeValue =
+  | ""
+  | "cash"
+  | "bank"
+  | "scanCode"
+  | "deposit"
+  | "vipPay"
+  | "arrears"
+  | "virtual"
+  | "arrears";
+
+export interface payTypeOptions extends options {
+  value: payTypeValue;
+}
--- a/src/views/order/index/config/content.ts
+++ b/src/views/order/index/config/content.ts
@@ -0,0 +1,59 @@
+import OrderApi from "@/api/system/order";
+import type { editRequest } from "@/api/system/version";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig = {
+  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 OrderApi.getList(params);
+  },
+  // deleteAction: OrderApi.delete,
+  // modifyAction: function (data) {
+  //   // return OrderApi.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: "orderNo",
+      width: 120,
+    },
+
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      templet: "tool",
+      operat: [
+        {
+          icon: "Document",
+          name: "detail",
+          text: "详情",
+        },
+        {
+          icon: "Printer",
+          name: "printer",
+          text: "开票",
+        },
+      ],
+    },
+  ],
+};
+
+export default contentConfig;
--- a/src/views/order/index/config/edit.ts
+++ b/src/views/order/index/config/edit.ts
@@ -0,0 +1,51 @@
+import VersionApi, { type editRequest } from "@/api/system/version";
+import type { IModalConfig } from "@/components/CURD/types";
+
+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: [
+    {
+      type: "input",
+      label: "版本号",
+      prop: "version",
+      rules: [{ required: true, message: "请输入版本号", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入版本号",
+      },
+    },
+
+    {
+      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);
--- a/src/views/order/index/config/search.ts
+++ b/src/views/order/index/config/search.ts
@@ -0,0 +1,57 @@
+import type { ISearchConfig } from "@/components/CURD/types";
+import { statusOptions, payTypeOptions } from "./config";
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  inline: false,
+  isExpandable: false,
+  formItems: [
+    {
+      type: "radio-button",
+      label: "订单状态",
+      prop: "status",
+      attrs: {
+        placeholder: "请选择订单状态",
+        clearable: true,
+      },
+      options: statusOptions,
+      initialValue: "",
+    },
+    {
+      type: "radio-button",
+      label: "支付方式",
+      prop: "payType",
+      attrs: {
+        placeholder: "请选择支付方式",
+        clearable: true,
+      },
+      options: payTypeOptions,
+      initialValue: "",
+    },
+    {
+      type: "input",
+      label: "订单编号",
+      prop: "orderNo",
+      attrs: {
+        placeholder: "请输入订单编号",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "input",
+      label: "商品名称",
+      prop: "productName",
+      attrs: {
+        placeholder: "请输入商品名称",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+  ],
+};
+
+export default searchConfig;
--- a/src/views/order/index/index.vue
+++ b/src/views/order/index/index.vue
@@ -0,0 +1,130 @@
+<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 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 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 = await DeptAPI.getOptions();
+  // 加载角色下拉数据源
+  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  editModalRef.value?.setModalVisible();
+  // 根据id获取数据进行填充
+  // const data = await VersionApi.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);
+  if (data.name === "detail") {
+    return;
+  }
+  if (data.name === "printer") {
+  }
+}
+
+// 切换示例
+const isA = ref(true);
+</script>