修改打印机页面，增加叫号管理页面、霸王餐、店铺优惠券

src/views/devices/config/add.ts

@@ -1,28 +1,32 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
+import printerApi, { type addRequest } from "@/api/account/printer";
+import { options } from './config'
+
 import type { IModalConfig } from "@/components/CURD/types";
 
-const modalConfig: IModalConfig<UserForm> = {
+const modalConfig: IModalConfig<addRequest> = {
   pageName: "sys:user",
   dialog: {
-    title: "新增用户",
+    title: "新增打印机",
     width: 800,
     draggable: true,
   },
   form: {
     labelWidth: 100,
   },
-  formAction: UserAPI.add,
+  formAction: function (data) {
+    return printerApi.add(data);
+  },
   beforeSubmit(data) {
     console.log("提交之前处理", data);
   },
   formItems: [
     {
-      label: "用户名",
-      prop: "username",
-      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      label: "设备名称",
+      prop: "name",
+      rules: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
       type: "input",
       attrs: {
-        placeholder: "请输入用户名",
+        placeholder: "请输入设备名称",
       },
       col: {
         xs: 24,
@@ -30,90 +34,127 @@ const modalConfig: IModalConfig<UserForm> = {
       },
     },
     {
-      label: "用户昵称",
-      prop: "nickname",
-      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-      type: "input",
-      attrs: {
-        placeholder: "请输入用户昵称",
-      },
-      col: {
-        xs: 24,
-        sm: 12,
-      },
-    },
-    {
-      label: "所属部门",
-      prop: "deptId",
-      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-      type: "tree-select",
-      attrs: {
-        placeholder: "请选择所属部门",
-        data: [],
-        filterable: true,
-        "check-strictly": true,
-        "render-after-expand": false,
-      },
-    },
-    {
-      type: "custom",
-      label: "性别",
-      prop: "gender",
-      initialValue: 1,
-    },
-    {
-      label: "角色",
-      prop: "roleIds",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
       type: "select",
+      label: "类型",
+      prop: "connectionType",
+      rules: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
       attrs: {
-        placeholder: "请选择",
-        multiple: true,
-      },
-      options: [],
-      initialValue: [],
-    },
-    {
-      type: "input",
-      label: "手机号码",
-      prop: "mobile",
-      rules: [
-        {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          message: "请输入正确的手机号码",
-          trigger: "blur",
+        placeholder: "请选择设备类型",
+        clearable: true,
+        style: {
+          width: "200px",
         },
-      ],
-      attrs: {
-        placeholder: "请输入手机号码",
-        maxlength: 11,
+      },
+      options: options.connectionType,
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "邮箱",
-      prop: "email",
-      rules: [
-        {
-          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-          message: "请输入正确的邮箱地址",
-          trigger: "blur",
-        },
-      ],
+      label: "ip地址",
+      prop: "address",
       type: "input",
       attrs: {
-        placeholder: "请输入邮箱",
-        maxlength: 50,
+        placeholder: "请输入ip地址",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "状态",
-      prop: "status",
+      label: "端口",
+      prop: "port",
+      type: "input",
+      attrs: {
+        placeholder: "请输入端口",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印类型",
+      prop: "subType",
+      rules: [{ required: false, message: "请选择打印类型", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印类型",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.subType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印机品牌",
+      prop: "contentType",
+      rules: [{ required: true, message: "请选择打印机品牌", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印机品牌",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.contentType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "radio-button",
+      label: "小票尺寸",
+      prop: "receiptSize",
+      options: options.receiptSize,
+      initialValue: options.receiptSize[0].value
+    },
+    {
+      type: "radio-button",
+      label: "分类打印",
+      prop: "classifyPrint",
+      options: options.classifyPrint,
+      initialValue: options.classifyPrint[0].value
+    },
+    {
       type: "radio",
-      options: [
-        { label: "正常", value: 1 },
-        { label: "禁用", value: 0 },
-      ],
+      label: "打印数量",
+      prop: "printQty",
+      options: options.printQty,
+      initialValue: options.printQty[0].value
+    },
+    {
+      type: "radio",
+      label: "打印方式",
+      prop: "printMethod",
+      options: options.printMethod,
+      initialValue: options.printMethod[0].value
+    },
+    {
+      type: "checkbox",
+      label: "打印类型",
+      prop: "printType",
+      options: options.printType,
+      initialValue: options.printType.map(v => v.value)
+    },
+    {
+      label: "打印机状态",
+      prop: "status",
+      type: "switch",
       initialValue: 1,
+      attrs: {
+        activeValue: 1,
+        inactiveValue: 0,
+      }
     },
   ],
 };

src/views/devices/config/config.ts

@@ -0,0 +1,65 @@
+export const options: optionObject = {
+  connectionType: [
+    { label: "USB", value: 'USB' },
+    { label: "网络", value: '网络' },
+    { label: "蓝牙", value: '蓝牙' },
+  ],
+  subType: [
+    { label: "标签", value: 'label' },
+    { label: "小票", value: 'cash' },
+    { label: "出品", value: 'kitchen' },
+  ],
+  contentType: [
+    { label: "云想印", value: '云想印' },
+    { label: "飞鹅", value: '飞鹅' },
+  ],
+  receiptSize: [
+    { label: "58mm", value: '58mm' },
+    { label: "80mm", value: '80mm' },
+  ],
+  classifyPrint: [
+    { label: "所有", value: 0 },
+    { label: "部分分类", value: 1 },
+    { label: "部分商品", value: 2 },
+  ],
+  printQty: [
+    { label: "顾客+商家[2张] ", value: 'c1m1^2' },
+    { label: "商家[1张]", value: 'm1^1' },
+    { label: "顾客[1张]", value: 'c1^1' },
+    { label: "顾客2+商家1[3张]", value: 'c2m1^3' },
+  ],
+  printMethod: [
+    { value: "all", label: '全部打印' },
+    { value: "normal", label: '仅打印结账单「前台」' },
+    { value: "one", label: '仅打印制作单「厨房」' },
+  ],
+  printType: [
+    { label: "确认退款单", value: 'refund' },
+    { label: "交班单", value: 'handover' },
+    { label: "排队取号", value: 'queue' },
+  ]
+}
+
+export type optionsType = string;
+
+export function returnOptions(type: optionsType) {
+  return options[type]
+}
+
+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 optionObject {
+  [property: string]: options[];
+}

src/views/devices/config/content.ts

@@ -1,14 +1,17 @@
-import UserAPI from "@/api/system/user";
-import RoleAPI from "@/api/system/role";
-import type { UserPageQuery } from "@/api/system/user";
+import printerApi, { type getListRequest } from "@/api/account/printer";
 import type { IContentConfig } from "@/components/CURD/types";
 
-const contentConfig: IContentConfig<UserPageQuery> = {
+
+const contentConfig: IContentConfig<getListRequest> = {
   pageName: "sys:user",
   table: {
     border: true,
     highlightCurrentRow: true,
   },
+  indexActionData: function (data: any) {
+    // Add your implementation here
+    return Promise.resolve(data);
+  },
   pagination: {
     background: true,
     layout: "prev,pager,next,jumper,total,sizes",
@@ -16,14 +19,11 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     pageSizes: [10, 20, 30, 50],
   },
   indexAction: function (params) {
-    return UserAPI.getPage(params);
+    return printerApi.getList(params);
   },
-  deleteAction: UserAPI.deleteByIds,
-  importAction(file) {
-    return UserAPI.import(1, file);
+  deleteAction: function (id) {
+    return printerApi.delete(id)
   },
-  exportAction: UserAPI.export,
-  importTemplate: UserAPI.downloadTemplate,
   importsAction(data) {
     // 模拟导入数据
     console.log("importsAction", data);
@@ -31,7 +31,7 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   },
   exportsAction: async function (params) {
     // 模拟获取到的是全量数据
-    const res = await UserAPI.getPage(params);
+    const res = await printerApi.getPage(params);
     console.log("exportsAction", res.list);
     return res.list;
   },

src/views/devices/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/devices/config/edit.ts

@@ -1,117 +1,163 @@
-import UserAPI, { type UserForm } from "@/api/system/user";
-import type { IModalConfig } from "@/components/CURD/types";
-import { DeviceEnum } from "@/enums/DeviceEnum";
-import { useAppStore } from "@/store";
+import printerApi, { type editRequest } from "@/api/account/printer";
+import { options } from './config'
 
-const modalConfig: IModalConfig<UserForm> = {
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<editRequest> = {
   pageName: "sys:user",
-  component: "drawer",
-  drawer: {
-    title: "修改用户",
-    size: useAppStore().device === DeviceEnum.MOBILE ? "80%" : 500,
+  dialog: {
+    title: "修改打印机",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 100,
   },
-  pk: "id",
   formAction: function (data) {
-    return UserAPI.update(data.id as number, data);
+    return printerApi.edit(data);
   },
   beforeSubmit(data) {
     console.log("提交之前处理", data);
   },
   formItems: [
     {
-      label: "用户名",
-      prop: "username",
-      rules: [{ required: true, message: "用户名不能为空", trigger: "blur" }],
+      label: "设备名称",
+      prop: "name",
+      rules: [{ required: true, message: "设备名称不能为空", trigger: "blur" }],
       type: "input",
       attrs: {
-        placeholder: "请输入用户名",
-        readonly: true,
+        placeholder: "请输入设备名称",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "用户昵称",
-      prop: "nickname",
-      rules: [{ required: true, message: "用户昵称不能为空", trigger: "blur" }],
-      type: "input",
-      attrs: {
-        placeholder: "请输入用户昵称",
-      },
-    },
-    {
-      label: "所属部门",
-      prop: "deptId",
-      rules: [{ required: true, message: "所属部门不能为空", trigger: "blur" }],
-      type: "tree-select",
-      attrs: {
-        placeholder: "请选择所属部门",
-        data: [],
-        filterable: true,
-        "check-strictly": true,
-        "render-after-expand": false,
-      },
-    },
-    {
-      type: "custom",
-      label: "性别",
-      prop: "gender",
-      initialValue: 1,
-    },
-    {
-      label: "角色",
-      prop: "roleIds",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
       type: "select",
+      label: "类型",
+      prop: "connectionType",
+      rules: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
       attrs: {
-        placeholder: "请选择",
-        multiple: true,
-      },
-      options: [],
-      initialValue: [],
-    },
-    {
-      type: "input",
-      label: "手机号码",
-      prop: "mobile",
-      rules: [
-        {
-          pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
-          message: "请输入正确的手机号码",
-          trigger: "blur",
+        placeholder: "请选择设备类型",
+        clearable: true,
+        style: {
+          width: "200px",
         },
-      ],
-      attrs: {
-        placeholder: "请输入手机号码",
-        maxlength: 11,
+      },
+      options: options.connectionType,
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "邮箱",
-      prop: "email",
-      rules: [
-        {
-          pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
-          message: "请输入正确的邮箱地址",
-          trigger: "blur",
-        },
-      ],
+      label: "ip地址",
+      prop: "address",
       type: "input",
       attrs: {
-        placeholder: "请输入邮箱",
-        maxlength: 50,
+        placeholder: "请输入ip地址",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
       },
     },
     {
-      label: "状态",
+      label: "端口",
+      prop: "port",
+      type: "input",
+      attrs: {
+        placeholder: "请输入端口",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印类型",
+      prop: "subType",
+      rules: [{ required: false, message: "请选择打印类型", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印类型",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.subType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "select",
+      label: "打印机品牌",
+      prop: "contentType",
+      rules: [{ required: true, message: "请选择打印机品牌", trigger: "blur" }],
+      attrs: {
+        placeholder: "请选择打印机品牌",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: options.contentType,
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "radio-button",
+      label: "小票尺寸",
+      prop: "receiptSize",
+      options: options.receiptSize,
+      initialValue: options.receiptSize[0].value
+    },
+    {
+      type: "radio-button",
+      label: "分类打印",
+      prop: "classifyPrint",
+      options: options.classifyPrint,
+      initialValue: options.classifyPrint[0].value
+    },
+    {
+      type: "radio",
+      label: "打印数量",
+      prop: "printQty",
+      options: options.printQty,
+      initialValue: options.printQty[0].value
+    },
+    {
+      type: "radio",
+      label: "打印方式",
+      prop: "printMethod",
+      options: options.printMethod,
+      initialValue: options.printMethod[0].value
+    },
+    {
+      type: "checkbox",
+      label: "打印类型",
+      prop: "printType",
+      options: options.printType,
+      initialValue: options.printType.map(v => v.value)
+    },
+    {
+      label: "打印机状态",
       prop: "status",
       type: "switch",
+      initialValue: 1,
       attrs: {
-        activeText: "正常",
-        inactiveText: "禁用",
         activeValue: 1,
         inactiveValue: 0,
-      },
+      }
     },
   ],
 };
 
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
 export default reactive(modalConfig);

src/views/devices/config/search.ts

@@ -1,13 +1,12 @@
-import DeptAPI from "@/api/system/dept";
 import type { ISearchConfig } from "@/components/CURD/types";
-
+import { options } from './config'
 const searchConfig: ISearchConfig = {
   pageName: "sys:user",
   formItems: [
     {
       type: "input",
       label: "设备名称",
-      prop: "keywords",
+      prop: "name",
       attrs: {
         placeholder: "请输入设备名称",
         clearable: true,
@@ -18,19 +17,16 @@ const searchConfig: ISearchConfig = {
     },
     {
       type: "select",
-      label: "状态",
-      prop: "status",
+      label: "类型",
+      prop: "connectionType",
       attrs: {
-        placeholder: "全部",
+        placeholder: "请选择设备类型",
         clearable: true,
         style: {
-          width: "100px",
+          width: "200px",
         },
       },
-      options: [
-        { label: "启用", value: 1 },
-        { label: "禁用", value: 0 },
-      ],
+      options: options.connectionType,
     },
 
   ],