feat: 用户套餐，用户支付功能

packages/ui/certd-client/src/views/sys/suite/payment/api.ts

@@ -1,76 +0,0 @@
-import { request } from "/src/api/service";
-
-export function createPaymentApi() {
-  const apiPrefix = "/sys/suite/payment";
-  return {
-    async GetList(query: any) {
-      return await request({
-        url: apiPrefix + "/page",
-        method: "post",
-        data: query
-      });
-    },
-
-    async AddObj(obj: any) {
-      return await request({
-        url: apiPrefix + "/add",
-        method: "post",
-        data: obj
-      });
-    },
-
-    async UpdateObj(obj: any) {
-      return await request({
-        url: apiPrefix + "/update",
-        method: "post",
-        data: obj
-      });
-    },
-
-    async DelObj(id: number) {
-      return await request({
-        url: apiPrefix + "/delete",
-        method: "post",
-        params: { id }
-      });
-    },
-
-    async GetObj(id: number) {
-      return await request({
-        url: apiPrefix + "/info",
-        method: "post",
-        params: { id }
-      });
-    },
-
-    async GetOptions(id: number) {
-      return await request({
-        url: apiPrefix + "/options",
-        method: "post"
-      });
-    },
-
-    async GetSimpleInfo(id: number) {
-      return await request({
-        url: apiPrefix + "/simpleInfo",
-        method: "post",
-        params: { id }
-      });
-    },
-
-    async GetDefineTypes() {
-      return await request({
-        url: apiPrefix + "/getTypeDict",
-        method: "post"
-      });
-    },
-
-    async GetProviderDefine(type: string) {
-      return await request({
-        url: apiPrefix + "/define",
-        method: "post",
-        params: { type }
-      });
-    }
-  };
-}

packages/ui/certd-client/src/views/sys/suite/payment/common.tsx

@@ -1,194 +0,0 @@
-import { ColumnCompositionProps, compute, dict } from "@fast-crud/fast-crud";
-import { computed, provide, ref, toRef } from "vue";
-import { useReference } from "/@/use/use-refrence";
-import { forEach, get, merge, set } from "lodash-es";
-import { Modal } from "ant-design-vue";
-import * as api from "/@/views/sys/cname/provider/api";
-import { mitter } from "/@/utils/util.mitt";
-
-export function getCommonColumnDefine(crudExpose: any, typeRef: any, api: any) {
-  const notificationTypeDictRef = dict({
-    url: "/sys/suite/payment/getList"
-  });
-  const defaultPluginConfig = {
-    component: {
-      name: "a-input",
-      vModel: "value"
-    }
-  };
-
-  function buildDefineFields(define: any, form: any, mode: string) {
-    const formWrapperRef = crudExpose.getFormWrapperRef();
-    const columnsRef = toRef(formWrapperRef.formOptions, "columns");
-
-    for (const key in columnsRef.value) {
-      if (key.indexOf(".") >= 0) {
-        delete columnsRef.value[key];
-      }
-    }
-    console.log('crudBinding.value[mode + "Form"].columns', columnsRef.value);
-    forEach(define.input, (value: any, mapKey: any) => {
-      const key = "body." + mapKey;
-      const field = {
-        ...value,
-        key
-      };
-      const column = merge({ title: key }, defaultPluginConfig, field);
-      //eval
-      useReference(column);
-
-      if (column.required) {
-        if (!column.rules) {
-          column.rules = [];
-        }
-        column.rules.push({ required: true, message: "此项必填" });
-      }
-
-      //设置默认值
-      if (column.value != null && get(form, key) == null) {
-        set(form, key, column.value);
-      }
-      //字段配置赋值
-      columnsRef.value[key] = column;
-      console.log("form", columnsRef.value, form);
-    });
-  }
-
-  const currentDefine = ref();
-
-  return {
-    id: {
-      title: "ID",
-      key: "id",
-      type: "number",
-      column: {
-        width: 100
-      },
-      form: {
-        show: false
-      }
-    },
-    type: {
-      title: "支付类型",
-      type: "dict-select",
-      dict: notificationTypeDictRef,
-      search: {
-        show: false
-      },
-      column: {
-        width: 200,
-        component: {
-          color: "auto"
-        }
-      },
-      editForm: {
-        component: {
-          disabled: false
-        }
-      },
-      form: {
-        component: {
-          disabled: false,
-          showSearch: true,
-          filterOption: (input: string, option: any) => {
-            input = input?.toLowerCase();
-            return option.value.toLowerCase().indexOf(input) >= 0 || option.label.toLowerCase().indexOf(input) >= 0;
-          },
-          renderLabel(item: any) {
-            return (
-              <span class={"flex-o flex-between"}>
-                {item.label}
-                {item.needPlus && <fs-icon icon={"mingcute:vip-1-line"} className={"color-plus"}></fs-icon>}
-              </span>
-            );
-          }
-        },
-        rules: [{ required: true, message: "请选择通知类型" }],
-        valueChange: {
-          immediate: true,
-          async handle({ value, mode, form, immediate }) {
-            if (value == null) {
-              return;
-            }
-            const lastTitle = currentDefine.value?.title;
-            const define = await api.GetProviderDefine(value);
-            currentDefine.value = define;
-            console.log("define", define);
-
-            if (!immediate) {
-              form.body = {};
-              if (define.needPlus) {
-                mitter.emit("openVipModal");
-              }
-            }
-
-            if (!form.name || form.name === lastTitle) {
-              form.name = define.title;
-            }
-            buildDefineFields(define, form, mode);
-          }
-        },
-        helper: computed(() => {
-          const define = currentDefine.value;
-          if (define == null) {
-            return "";
-          }
-          return define.desc;
-        })
-      }
-    } as ColumnCompositionProps,
-    name: {
-      title: "通知名称",
-      search: {
-        show: true
-      },
-      type: ["text"],
-      form: {
-        rules: [{ required: true, message: "请填写名称" }],
-        helper: "随便填，当多个相同类型的通知时，便于区分"
-      },
-      column: {
-        width: 200
-      }
-    },
-    test: {
-      title: "测试",
-      form: {
-        show: compute(({ form }) => {
-          return !!form.type;
-        }),
-        component: {
-          name: "api-test",
-          action: "TestRequest"
-        },
-        order: 990,
-        col: {
-          span: 24
-        }
-      },
-      column: {
-        show: false
-      }
-    },
-    setting: {
-      column: { show: false },
-      form: {
-        show: false,
-        valueBuilder({ value, form }) {
-          form.body = {};
-          if (!value) {
-            return;
-          }
-          const setting = JSON.parse(value);
-          for (const key in setting) {
-            form.body[key] = setting[key];
-          }
-        },
-        valueResolve({ form }) {
-          const setting = form.body;
-          form.setting = JSON.stringify(setting);
-        }
-      }
-    } as ColumnCompositionProps
-  };
-}

packages/ui/certd-client/src/views/sys/suite/payment/crud.tsx

@@ -1,54 +0,0 @@
-import { ref } from "vue";
-import { getCommonColumnDefine } from "./common";
-import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { createNotificationApi } from "/@/views/certd/notification/api";
-const api = createNotificationApi();
-export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
-    return await api.GetList(query);
-  };
-  const editRequest = async (req: EditReq) => {
-    const { form, row } = req;
-    form.id = row.id;
-    const res = await api.UpdateObj(form);
-    return res;
-  };
-  const delRequest = async (req: DelReq) => {
-    const { row } = req;
-    return await api.DelObj(row.id);
-  };
-
-  const addRequest = async (req: AddReq) => {
-    const { form } = req;
-    const res = await api.AddObj(form);
-    return res;
-  };
-
-  const typeRef = ref();
-  const commonColumnsDefine = getCommonColumnDefine(crudExpose, typeRef, api);
-  return {
-    crudOptions: {
-      request: {
-        pageRequest,
-        addRequest,
-        editRequest,
-        delRequest
-      },
-      form: {
-        labelCol: {
-          //固定label宽度
-          span: null,
-          style: {
-            width: "145px"
-          }
-        }
-      },
-      rowHandle: {
-        width: 200
-      },
-      columns: {
-        ...commonColumnsDefine
-      }
-    }
-  };
-}

packages/ui/certd-client/src/views/sys/suite/payment/index.vue

@@ -1,41 +0,0 @@
-<template>
-  <fs-page>
-    <template #header>
-      <div class="title">
-        支付方式管理
-        <span class="sub">管理支付方式</span>
-      </div>
-    </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
-  </fs-page>
-</template>
-
-<script lang="ts">
-import { defineComponent, onActivated, onMounted } from "vue";
-import { useFs } from "@fast-crud/fast-crud";
-import createCrudOptions from "./crud";
-import { createPaymentApi } from "./api";
-import { notificationProvide } from "/@/views/certd/notification/common";
-
-export default defineComponent({
-  name: "PaymentManager",
-  setup() {
-    const api = createPaymentApi();
-    notificationProvide(api);
-    const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: { api } });
-
-    // 页面打开后获取列表数据
-    onMounted(() => {
-      crudExpose.doRefresh();
-    });
-    onActivated(() => {
-      crudExpose.doRefresh();
-    });
-
-    return {
-      crudBinding,
-      crudRef
-    };
-  }
-});
-</script>

packages/ui/certd-client/src/views/sys/suite/payment/selector.vue

@@ -1,163 +0,0 @@
-<template>
-  <div class="notification-selector">
-    <div class="flex-o w-100">
-      <fs-dict-select
-        class="flex-1"
-        :value="modelValue"
-        :dict="optionsDictRef"
-        :disabled="disabled"
-        :render-label="renderLabel"
-        :slots="selectSlots"
-        :allow-clear="true"
-        @update:value="onChange"
-      />
-      <fs-table-select
-        ref="tableSelectRef"
-        class="flex-0"
-        :model-value="modelValue"
-        :dict="optionsDictRef"
-        :create-crud-options="createCrudOptions"
-        :crud-options-override="{
-          search: { show: false },
-          table: {
-            scroll: {
-              x: 540
-            }
-          }
-        }"
-        :show-current="false"
-        :show-select="false"
-        :dialog="{ width: 960 }"
-        :destroy-on-close="false"
-        height="400px"
-        @update:model-value="onChange"
-        @dialog-closed="doRefresh"
-      >
-        <template #default="scope">
-          <fs-button class="ml-5" :disabled="disabled" :size="size" type="primary" icon="ant-design:edit-outlined" @click="scope.open"></fs-button>
-        </template>
-      </fs-table-select>
-    </div>
-  </div>
-</template>
-
-<script lang="tsx" setup>
-import { inject, ref, Ref, watch } from "vue";
-import { createNotificationApi } from "../api";
-import { message } from "ant-design-vue";
-import { dict } from "@fast-crud/fast-crud";
-import createCrudOptions from "../crud";
-import { notificationProvide } from "/@/views/certd/notification/common";
-
-defineOptions({
-  name: "NotificationSelector"
-});
-
-const props = defineProps<{
-  modelValue?: number | string;
-  type?: string;
-  placeholder?: string;
-  size?: string;
-  disabled?: boolean;
-}>();
-
-const onChange = async (value: number) => {
-  await emitValue(value);
-};
-
-const emit = defineEmits(["update:modelValue", "selectedChange", "change"]);
-
-const api = createNotificationApi();
-notificationProvide(api);
-// const types = ref({});
-// async function loadNotificationTypes() {
-//   const types = await api.GetDefineTypes();
-//   const map: any = {};
-//   for (const item of types) {
-//     map[item.type] = item;
-//   }
-//   types.value = map;
-// }
-// loadNotificationTypes();
-const tableSelectRef = ref();
-const optionsDictRef = dict({
-  url: "/pi/notification/options",
-  value: "id",
-  label: "name",
-  onReady: ({ dict }) => {
-    const data = [
-      {
-        id: 0,
-        name: "使用默认通知",
-        icon: "ion:notifications"
-      },
-      ...dict.data
-    ];
-    dict.setData(data);
-  }
-});
-const renderLabel = (option: any) => {
-  return <span>{option.name}</span>;
-};
-
-async function openTableSelectDialog(e: any) {
-  e.preventDefault();
-  await tableSelectRef.value.open();
-  await tableSelectRef.value.crudExpose.openAdd({});
-}
-const selectSlots = ref({
-  dropdownRender({ menuNode }: any) {
-    const res = [];
-    res.push(menuNode);
-    res.push(<a-divider style="margin: 4px 0" />);
-    res.push(<a-space style="padding: 4px 8px" />);
-    res.push(<fs-button class="w-100" type="text" icon="plus-outlined" text="新建通知渠道" onClick={openTableSelectDialog}></fs-button>);
-    return res;
-  }
-});
-
-const target: Ref<any> = ref({});
-
-function clear() {
-  if (props.disabled) {
-    return;
-  }
-  emitValue(null);
-}
-
-async function emitValue(value: any) {
-  target.value = optionsDictRef.dataMap[value];
-  if (value !== 0 && pipeline?.value && target && pipeline.value.userId !== target.value.userId) {
-    message.error("对不起，您不能修改他人流水线的通知");
-    return;
-  }
-  emit("change", value);
-  emit("update:modelValue", value);
-}
-
-watch(
-  () => {
-    return props.modelValue;
-  },
-  async (value) => {
-    await optionsDictRef.loadDict();
-    target.value = optionsDictRef.dataMap[value];
-    emit("selectedChange", target.value);
-  },
-  {
-    immediate: true
-  }
-);
-
-//当不在pipeline中编辑时，可能为空
-const pipeline = inject("pipeline", null);
-
-async function doRefresh() {
-  await optionsDictRef.reloadDict();
-}
-</script>
-<style lang="less">
-.notification-selector {
-  width: 100%;
-}
-</style>

packages/ui/certd-client/src/views/sys/suite/product/crud.tsx

@@ -1,17 +1,12 @@
 import * as api from "./api";
-import { useI18n } from "vue-i18n";
-import { Ref, ref } from "vue";
-import { useRouter } from "vue-router";
 import { AddReq, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
-import { useUserStore } from "/@/store/modules/user";
-import { useSettingStore } from "/@/store/modules/settings";
 import SuiteValue from "./suite-value.vue";
 import SuiteValueEdit from "./suite-value-edit.vue";
 import PriceEdit from "./price-edit.vue";
+import DurationPriceValue from "/@/views/sys/suite/product/duration-price-value.vue";
 
 export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
-  const router = useRouter();
-  const { t } = useI18n();
+  const emit = context.emit;
   const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
     return await api.GetList(query);
   };
@@ -29,35 +24,26 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
     return res;
   };
 
-  const userStore = useUserStore();
-  const settingStore = useSettingStore();
-  const selectedRowKeys: Ref<any[]> = ref([]);
-  context.selectedRowKeys = selectedRowKeys;
-
   return {
     crudOptions: {
-      settings: {
-        plugins: {
-          //这里使用行选择插件，生成行选择crudOptions配置，最终会与crudOptions合并
-          rowSelection: {
-            enabled: true,
-            order: -2,
-            before: true,
-            // handle: (pluginProps,useCrudProps)=>CrudOptions,
-            props: {
-              multiple: true,
-              crossPage: true,
-              selectedRowKeys
-            }
-          }
+      table: {
+        onRefreshed: () => {
+          emit("refreshed");
         }
       },
+      search: {
+        show: false
+      },
       request: {
         pageRequest,
         addRequest,
         editRequest,
         delRequest
       },
+      pagination: {
+        show: false,
+        pageSize: 999999
+      },
       rowHandle: {
         minWidth: 200,
         fixed: "right"
@@ -71,7 +57,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             },
             content: {
               header: "套餐内容",
-              columns: ["content.maxDomainCount", "content.maxPipelineCount", "content.maxDeployCount", "content.siteMonitor"]
+              columns: ["content.maxDomainCount", "content.maxPipelineCount", "content.maxDeployCount", "content.maxMonitorCount"]
             },
             price: {
               header: "价格",
@@ -81,17 +67,17 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
         }
       },
       columns: {
-        id: {
-          title: "ID",
-          key: "id",
-          type: "number",
-          column: {
-            width: 100
-          },
-          form: {
-            show: false
-          }
-        },
+        // id: {
+        //   title: "ID",
+        //   key: "id",
+        //   type: "number",
+        //   column: {
+        //     width: 100
+        //   },
+        //   form: {
+        //     show: false
+        //   }
+        // },
         title: {
           title: "套餐名称",
           type: "text",
@@ -123,7 +109,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             rules: [{ required: true, message: "此项必填" }]
           },
           column: {
-            width: 100
+            width: 80,
+            align: "center"
           },
           valueBuilder: ({ row }) => {
             if (row.content) {
@@ -205,37 +192,25 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
             }
           }
         },
-        "content.siteMonitor": {
-          title: "支持证书监控",
-          type: "dict-switch",
-          dict: dict({
-            data: [
-              { label: "是", value: true, color: "success" },
-              { label: "否", value: false, color: "error" }
-            ]
-          }),
+        "content.maxMonitorCount": {
+          title: "证书监控数量",
+          type: "text",
           form: {
-            key: ["content", "siteMonitor"],
-            value: false
+            key: ["content", "maxMonitorCount"],
+            component: {
+              name: SuiteValueEdit,
+              vModel: "modelValue",
+              unit: "个"
+            },
+            rules: [{ required: true, message: "此项必填" }]
           },
           column: {
-            width: 120
-          }
-        },
-        isBootstrap: {
-          title: "是否初始套餐",
-          type: "dict-switch",
-          dict: dict({
-            data: [
-              { label: "是", value: true, color: "success" },
-              { label: "否", value: false, color: "gray" }
-            ]
-          }),
-          form: {
-            value: false
-          },
-          column: {
-            width: 120
+            width: 120,
+            component: {
+              name: SuiteValue,
+              vModel: "modelValue",
+              unit: "个"
+            }
           }
         },
         durationPrices: {
@@ -258,10 +233,26 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
           },
           column: {
             component: {
-              name: PriceEdit,
-              vModel: "modelValue",
-              edit: false
-            }
+              name: DurationPriceValue,
+              vModel: "modelValue"
+            },
+            width: 350
+          }
+        },
+        supportBuy: {
+          title: "支持购买",
+          type: "dict-switch",
+          dict: dict({
+            data: [
+              { label: "是", value: true, color: "success" },
+              { label: "否", value: false, color: "gray" }
+            ]
+          }),
+          form: {
+            value: false
+          },
+          column: {
+            width: 120
           }
         },
         disabled: {

packages/ui/certd-client/src/views/sys/suite/product/duration-price-value.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="cd-duration-price-value">
+    <a-tag v-for="item of modelValue" :key="item.duration" class="flex-o price-group-item m-2">
+      <div style="width: 40px">{{ durationDict.dataMap[item.duration]?.label }}:</div>
+      <price-input v-model="item.price" :edit="false" class="mr-5" />
+    </a-tag>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { PriceItem } from "./api";
+import PriceInput from "./price-input.vue";
+import { durationDict } from "../../../certd/suite/api";
+
+defineOptions({
+  name: "DurationPriceValue"
+});
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: PriceItem[];
+  }>(),
+  {
+    modelValue: () => {
+      return [];
+    }
+  }
+);
+</script>
+<style lang="less">
+.cd-duration-price-value {
+  display: flex;
+  flex-wrap: wrap;
+  item-align: center;
+}
+</style>

packages/ui/certd-client/src/views/sys/suite/product/duration-value.vue

@@ -0,0 +1,11 @@
+<template>
+  <a-tag color="green"> {{ durationDict.dataMap[modelValue]?.label }}</a-tag>
+</template>
+
+<script lang="ts" setup>
+import { durationDict } from "/@/views/certd/suite/api";
+
+const props = defineProps<{
+  modelValue: number;
+}>();
+</script>

packages/ui/certd-client/src/views/sys/suite/product/index.vue

@@ -1,50 +1,19 @@
 <template>
-  <fs-page class="page-cert">
-    <template #header>
-      <div class="title">
-        套餐管理
-        <span class="sub"> 必须设置一个初始套餐 </span>
-      </div>
-    </template>
-    <fs-crud ref="crudRef" v-bind="crudBinding">
-      <template #pagination-left>
-        <a-tooltip title="批量删除">
-          <fs-button icon="DeleteOutlined" @click="handleBatchDelete"></fs-button>
-        </a-tooltip>
-      </template>
-    </fs-crud>
-  </fs-page>
+  <fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { defineEmits, onMounted, ref } from "vue";
 import { useFs } from "@fast-crud/fast-crud";
 import createCrudOptions from "./crud";
-import { message, Modal } from "ant-design-vue";
-import { DeleteBatch } from "./api";
 
 defineOptions({
   name: "ProductManager"
 });
-const { crudBinding, crudRef, crudExpose, context } = useFs({ createCrudOptions });
+const emit = defineEmits(["refreshed"]);
 
-const selectedRowKeys = context.selectedRowKeys;
-const handleBatchDelete = () => {
-  if (selectedRowKeys.value?.length > 0) {
-    Modal.confirm({
-      title: "确认",
-      content: `确定要批量删除这${selectedRowKeys.value.length}条记录吗`,
-      async onOk() {
-        await DeleteBatch(selectedRowKeys.value);
-        message.info("删除成功");
-        crudExpose.doRefresh();
-        selectedRowKeys.value = [];
-      }
-    });
-  } else {
-    message.error("请先勾选记录");
-  }
-};
+const context: any = { emit };
+const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context });
 
 // 页面打开后获取列表数据
 onMounted(() => {

packages/ui/certd-client/src/views/sys/suite/product/price-input.vue

@@ -10,7 +10,7 @@ import { computed } from "vue";
 
 const props = defineProps<{
   modelValue?: number;
-  edit: boolean;
+  edit?: boolean;
 }>();
 
 const priceValue = computed(() => {

packages/ui/certd-client/src/views/sys/suite/product/suite-value.vue

@@ -1,6 +1,9 @@
 <template>
   <div v-if="target" class="cd-suite-value">
-    <a-tag :color="target.color" class="m-0">{{ target.label }}</a-tag>
+    <a-tag :color="target.color" class="m-0">
+      <span v-if="used != null">{{ used }} /</span>
+      {{ target.label }}
+    </a-tag>
   </div>
 </template>
 
@@ -10,6 +13,7 @@ import { computed } from "vue";
 const props = defineProps<{
   modelValue: number;
   unit?: string;
+  used?: number;
 }>();
 
 const target = computed(() => {
@@ -29,10 +33,14 @@ const target = computed(() => {
       color: "red"
     };
   } else {
+    let color = "blue";
+    if (props.used != null) {
+      color = props.used >= props.modelValue ? "red" : "green";
+    }
     return {
       value: props.modelValue,
       label: props.modelValue + (props.unit || ""),
-      color: "blue"
+      color: color
     };
   }
 });

packages/ui/certd-client/src/views/sys/suite/setting/index.vue

@@ -0,0 +1,110 @@
+<template>
+  <fs-page class="page-sys-settings page-sys-settings-suite">
+    <template #header>
+      <div class="title">
+        套餐设置
+        <span class="sub"> 需要<router-link to="/sys/settings" :query="{ tab: 'payment' }">开启至少一种支付方式</router-link></span>
+      </div>
+    </template>
+
+    <div class="form-content">
+      <a-form ref="formRef" :model="formState" :label-col="{ style: { width: '150px' } }" :wrapper-col="{ span: 20 }" autocomplete="off">
+        <a-form-item label="开启套餐功能" name="enabled" required>
+          <a-switch v-model:checked="formState.enabled" />
+        </a-form-item>
+        <template v-if="formState.enabled">
+          <a-form-item label="套餐列表" name="enabled">
+            <div style="height: 400px">
+              <ProductManager @refreshed="onTableRefresh"></ProductManager>
+            </div>
+          </a-form-item>
+
+          <a-form-item label="注册赠送套餐" name="registerGift">
+            <suite-duration-selector ref="suiteDurationSelectedRef" v-model="formState.registerGift"></suite-duration-selector>
+            <div class="helper">添加套餐后再选择</div>
+          </a-form-item>
+          <a-form-item label="套餐说明" name="intro">
+            <a-textarea v-model:value="formState.intro" :rows="3"></a-textarea>
+            <div class="helper">将显示在套餐购买页面</div>
+          </a-form-item>
+        </template>
+
+        <a-form-item label=" " :colon="false">
+          <loading-button type="primary" html-type="button" :click="onClick">保存</loading-button>
+        </a-form-item>
+      </a-form>
+    </div>
+  </fs-page>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from "vue";
+import { merge } from "lodash-es";
+import { notification } from "ant-design-vue";
+import { request } from "/@/api/service";
+import SuiteDurationSelector from "/@/views/sys/suite/setting/suite-duration-selector.vue";
+import ProductManager from "/@/views/sys/suite/product/index.vue";
+
+defineOptions({
+  name: "SettingsSuite"
+});
+
+const api = {
+  async SuiteSettingGet() {
+    return await request({
+      url: "/sys/settings/suite/get",
+      method: "post"
+    });
+  },
+  async SuiteSettingSave(data: any) {
+    return await request({
+      url: "/sys/settings/suite/save",
+      method: "post",
+      data
+    });
+  }
+};
+
+const formRef = ref<any>(null);
+const formState = reactive<
+  Partial<{
+    enabled: boolean;
+    registerGift?: {
+      productId?: number;
+      duration?: number;
+    };
+    intro?: string;
+  }>
+>({ enabled: false });
+
+async function loadSettings() {
+  const data: any = await api.SuiteSettingGet();
+  merge(formState, data);
+}
+
+loadSettings();
+const onClick = async () => {
+  const form = await formRef.value.validateFields();
+  await api.SuiteSettingSave(form);
+  await loadSettings();
+  notification.success({
+    message: "保存成功"
+  });
+};
+
+const suiteDurationSelectedRef = ref();
+function onTableRefresh() {
+  suiteDurationSelectedRef.value?.refresh();
+}
+</script>
+
+<style lang="less">
+.page-sys-settings-suite {
+  .form-content {
+    padding: 20px;
+    .ant-table-body {
+      height: 400px !important;
+    }
+  }
+}
+</style>

packages/ui/certd-client/src/views/sys/suite/setting/suite-duration-selector.vue

@@ -0,0 +1,85 @@
+<template>
+  <fs-dict-select style="width: 200px" :value="selectedValue" :dict="suiteDictRef" @selected-change="onSelectedChange"></fs-dict-select>
+</template>
+<script setup lang="ts">
+import { durationDict } from "/@/views/certd/suite/api";
+import { ref, watch } from "vue";
+import { dict } from "@fast-crud/fast-crud";
+import { request } from "/@/api/service";
+
+const props = defineProps<{
+  modelValue?: {
+    productId?: number;
+    duration?: number;
+  };
+}>();
+
+const suiteDictRef = dict({
+  async getData() {
+    const res = await request({
+      url: "/sys/suite/product/list",
+      method: "post"
+    });
+    const options: any = [
+      {
+        value: "",
+        label: "不赠送"
+      }
+    ];
+    res.forEach((item: any) => {
+      const durationPrices = JSON.parse(item.durationPrices);
+      for (const dp of durationPrices) {
+        const value = item.id + "_" + dp.duration;
+        options.push({
+          label: `${item.title}<${durationDict.dataMap[dp.duration]?.label}>`,
+          value: value,
+          target: {
+            productId: item.id,
+            duration: dp.duration
+          }
+        });
+      }
+    });
+    return options;
+  }
+});
+
+const selectedValue = ref();
+watch(
+  () => {
+    return props.modelValue;
+  },
+  (value) => {
+    if (value && value.productId && value.duration) {
+      selectedValue.value = value.productId + "_" + value.duration;
+    } else {
+      selectedValue.value = "";
+    }
+  },
+  {
+    immediate: true
+  }
+);
+
+const emit = defineEmits(["update:modelValue"]);
+const onSelectedChange = (value: any) => {
+  selectedValue.value = value;
+  if (!value) {
+    emit("update:modelValue", undefined);
+    return;
+  }
+  const arr = value.value.split("_");
+  emit("update:modelValue", {
+    productId: parseInt(arr[0]),
+    duration: parseInt(arr[1])
+  });
+};
+
+defineExpose({
+  refresh() {
+    suiteDictRef.reloadDict();
+  }
+});
+</script>
+
+<style lang="less"></style>