feat: 新增系统方式支付设置

src/api/account/payType.ts

@@ -0,0 +1,78 @@
+import request from "@/utils/request";
+import { Account_BaseUrl } from "@/api/config";
+const baseURL = Account_BaseUrl + "/admin/payType";
+const Api = {
+  getList() {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "get",
+    });
+  },
+  get(params: getRequset) {
+    return request<any>({
+      url: `${baseURL}/detail`,
+      method: "get",
+    });
+  },
+  edit(data: payType) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "put",
+      data
+    });
+  },
+  add(data: payType) {
+    return request<any>({
+      url: `${baseURL}`,
+      method: "post",
+      data
+    });
+  }
+
+};
+
+export default Api;
+
+interface getRequset {
+  id?: string
+}
+
+export interface payType {
+  /**
+   * 图标
+   */
+  icon?: null | string;
+  /**
+   * 自增id
+   */
+  id?: number | null;
+  /**
+   * 0-不显示1显示
+   */
+  isDisplay?: number | null;
+  /**
+   * 0-非虚拟 1虚拟 virtual
+   */
+  isIdeal?: number | null;
+  /**
+   * 是否打开钱箱
+   */
+  isOpenCashDrawer?: number | null;
+  /**
+   * 0允许退款 1-不允许退款
+   */
+  isRefundable?: number | null;
+  /**
+   * 是否快捷展示1是0否
+   */
+  isShowShortcut?: number | null;
+  /**
+   * 0不是 1是 [系统级支付]
+   */
+  isSystem?: number | null;
+  /**
+   * 排序
+   */
+  sorts?: number | null;
+  [property: string]: any;
+}

src/router/index.ts

@@ -290,7 +290,7 @@ export const constantRoutes: RouteRecordRaw[] = [
     children: [
       {
         path: "pay-types",
-        component: () => import("@/views/system-setting/pay-types.vue"),
+        component: () => import("@/views/system-setting/pay-types/index.vue"),
         name: "payTypes",
         meta: {
           title: "支付方式",

src/views/login/index.vue

@@ -15,15 +15,9 @@
           <el-radio-button :value="1">员工</el-radio-button>
         </el-radio-group>
       </el-form-item>
-<<<<<<< HEAD
-      <el-form-item prop="staffUserName" v-if="state.loginForm.loginType == 1">
-        <el-input
-          v-model="state.loginForm.staffUserName"
-=======
       <el-form-item prop="username">
         <el-input
           v-model="state.loginForm.username"
->>>>>>> aeae74d89449789e68381f821001d74d4bfe1b2c
           type="text"
           auto-complete="off"
           placeholder="商户号"

src/views/system-setting/pay-types.vue

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

src/views/system-setting/pay-types/config/add.ts

@@ -0,0 +1,133 @@
+import VersionApi, { type payType } from "@/api/account/payType";
+
+
+import { returnOptions, switchAttr } from "./config";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<payType> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "添加支付方式",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return VersionApi.add({ ...data });
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+
+    {
+      label: "支付类型",
+      prop: "payType",
+      rules: [{ required: true, message: "请选择支付类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择支付类型",
+      },
+      options: returnOptions("payType"),
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "input",
+      label: "支付名称",
+      prop: "payName",
+      rules: [{ required: true, message: "请输入支付名称", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入支付名称",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "switch",
+      label: "是否是系统级支付",
+      prop: "isSystem",
+      attrs: { ...switchAttr },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+
+    },
+    {
+      type: "switch",
+      label: "是否快捷展示",
+      prop: "isShowShortcut",
+      attrs: { ...switchAttr },
+
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+
+    }, {
+      type: "switch",
+      label: "是否允许退款",
+      prop: "isRefundable",
+      attrs: { ...switchAttr },
+
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+    },
+    {
+      type: "switch",
+      label: "是否打开钱箱",
+      prop: "isOpenCashDrawer",
+      attrs: { ...switchAttr },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+
+    },
+    {
+      type: "radio",
+      label: "是否虚拟",
+      prop: "isIdeal",
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 1,
+      options: returnOptions('isIdeal')
+    },
+    {
+      type: "switch",
+      label: "是否显示",
+      attrs: { ...switchAttr },
+      prop: "isDisplay",
+      initialValue: 0
+    },
+
+    {
+      type: "input-number",
+      label: "排序",
+      prop: "sorts",
+    },
+    {
+      type: "UpImage",
+      label: "图标",
+      prop: "icon",
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);

src/views/system-setting/pay-types/config/config.ts

@@ -0,0 +1,47 @@
+export interface options {
+  label: string;
+  value: string | number;
+  [property: string]: any;
+}
+export interface optionObject {
+  [property: string]: options[];
+}
+const options: optionObject = {
+  payType: [
+    { label: "现金", value: "cash" },
+    { label: "微信", value: "weixin" },
+    { label: "银行卡", value: "bank" },
+    { label: "支付宝", value: "alipay" },
+    { label: "刷卡", value: "deposit" },
+    { label: "挂单", value: "arrears" },
+    { label: "刷卡", value: "deposit" },
+    { label: "储值", value: "member-account" },
+    { label: "自定义", value: "virtual" },
+  ],
+  isIdeal: [
+    { label: "否", value: 0 },
+    { label: "是", value: 1 },
+  ]
+};
+
+export const switchAttr = {
+  "active-value": 1,
+  "inactive-value": 0,
+}
+
+
+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 : "";
+}
+

src/views/system-setting/pay-types/config/content.ts

@@ -0,0 +1,74 @@
+import Api from "@/api/account/payType";
+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 Api.getList();
+  },
+  modifyAction: function (data) {
+    return Api.edit(data);
+  },
+  pk: "id",
+  toolbar: ["add"],
+  defaultToolbar: ["refresh", "filter", "search"],
+  cols: [
+    // { type: "selection", width: 50, align: "center" },
+    {
+      label: "图标",
+      align: "center",
+      prop: "icon",
+      templet: 'image'
+    },
+    {
+      label: "支付方式",
+      align: "center",
+      prop: "payName",
+    },
+    {
+      label: "支付类型",
+      align: "center",
+      prop: "payType",
+    },
+
+    {
+      label: "开钱箱权限",
+      align: "center",
+      prop: "isOpenCashDrawer",
+      templet: 'custom',
+      slotName: 'switch'
+    },
+    {
+      label: "是否生效",
+      align: "center",
+      prop: "isDisplay",
+      templet: 'custom',
+      slotName: 'switch'
+    },
+    {
+      label: "条件排序",
+      align: "center",
+      prop: "sorts",
+    },
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      templet: "tool",
+      operat: ["edit"],
+    },
+  ],
+};
+
+export default contentConfig;

src/views/system-setting/pay-types/config/edit.ts

@@ -0,0 +1,133 @@
+import VersionApi, { type payType } from "@/api/account/payType";
+
+
+import { returnOptions, switchAttr } from "./config";
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<payType> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "编辑支付方式",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 140,
+  },
+  formAction: function (data) {
+    return VersionApi.edit({ ...data });
+  },
+  beforeSubmit(data) {
+    console.log("提交之前处理", data);
+  },
+  formItems: [
+
+    {
+      label: "支付类型",
+      prop: "payType",
+      rules: [{ required: true, message: "请选择支付类型", trigger: "blur" }],
+      type: "select",
+      attrs: {
+        placeholder: "请选择支付类型",
+      },
+      options: returnOptions("payType"),
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "input",
+      label: "支付名称",
+      prop: "payName",
+      rules: [{ required: true, message: "请输入支付名称", trigger: "blur" }],
+      attrs: {
+        placeholder: "请输入支付名称",
+      },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+    },
+    {
+      type: "switch",
+      label: "是否是系统级支付",
+      prop: "isSystem",
+      attrs: { ...switchAttr },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+
+    },
+    {
+      type: "switch",
+      label: "是否快捷展示",
+      prop: "isShowShortcut",
+      attrs: { ...switchAttr },
+
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+
+    }, {
+      type: "switch",
+      label: "是否允许退款",
+      prop: "isRefundable",
+      attrs: { ...switchAttr },
+
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+    },
+    {
+      type: "switch",
+      label: "是否打开钱箱",
+      prop: "isOpenCashDrawer",
+      attrs: { ...switchAttr },
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 0
+
+    },
+    {
+      type: "radio",
+      label: "是否虚拟",
+      prop: "isIdeal",
+      col: {
+        xs: 24,
+        sm: 12,
+      },
+      initialValue: 1,
+      options: returnOptions('isIdeal')
+    },
+    {
+      type: "switch",
+      label: "是否显示",
+      attrs: { ...switchAttr },
+      prop: "isDisplay",
+      initialValue: 0
+    },
+
+    {
+      type: "input-number",
+      label: "排序",
+      prop: "sorts",
+    },
+    {
+      type: "UpImage",
+      label: "图标",
+      prop: "icon",
+    },
+  ],
+};
+
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);

src/views/system-setting/pay-types/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/system-setting/pay-types/index.vue

@@ -0,0 +1,110 @@
+<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 #switch="scope">
+        <el-switch v-model="scope.row[scope.prop]" disabled></el-switch>
+      </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"
+    ></page-modal>
+
+    <!-- 编辑 -->
+    <page-modal
+      ref="editModalRef"
+      :modal-config="editModalConfig"
+      @submit-click="handleSubmitClick"
+    ></page-modal>
+  </div>
+</template>
+
+<script setup lang="ts">
+import VersionApi from "@/api/system/version";
+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获取数据进行填充
+  console.log(row);
+  editModalRef.value?.setFormData({ ...row });
+}
+1;
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {
+  console.log(data);
+}
+</script>