1. 推广员功能增强

apps/web-antd/src/views/system/process/components/modal.vue

@@ -9,13 +9,59 @@ import { useVbenForm } from '#/adapter/form';
 import { createProcess, updateProcess } from '#/views/system/process/api';
 import { modalFormProps } from '#/views/system/process/config/form';
 
-
-
 const isUpdate = ref(false);
 const gridApi = ref();
 
 const [Form, formApi] = useVbenForm(modalFormProps);
 
+function buildSubmitPayload(values: Record<string, any>) {
+  const formLevel = Number(values.formLevel);
+  const payload: Record<string, any> = {
+    id: values.id,
+  };
+
+  if (formLevel === 3) {
+    payload.node_type = 'note';
+    payload.rule_id = values.rule_id;
+    payload.note = values.note;
+    if (values.real_id) {
+      payload.real_id = values.real_id;
+    }
+    return payload;
+  }
+
+  payload.node_type = 'rule';
+  payload.name = values.name;
+  payload.pid = formLevel === 1 ? 0 : values.pid;
+  if (formLevel === 2) {
+    payload.calc_method = values.calc_method;
+    payload.price = values.price;
+    payload.unit = values.unit;
+  }
+
+  return payload;
+}
+
+function validateFormValues(values: Record<string, any>) {
+  const formLevel = Number(values.formLevel);
+  if (formLevel === 3) {
+    if (!String(values.note ?? '').trim()) {
+      message.error('请输入备注名称');
+      return false;
+    }
+    return true;
+  }
+  if (!String(values.name ?? '').trim()) {
+    message.error('请输入名称');
+    return false;
+  }
+  if (formLevel === 2 && !values.pid) {
+    message.error('请选择父级制剂');
+    return false;
+  }
+  return true;
+}
+
 const [Modal, modalApi] = useVbenModal({
   fullscreenButton: false,
   draggable: true,
@@ -23,31 +69,37 @@ const [Modal, modalApi] = useVbenModal({
     modalApi.close();
   },
   onConfirm: async () => {
-    formApi.validate().then(async (e: any) => {
-      if (e.valid) {
-        const values = await formApi.getValues();
-        modalApi.setState({ loading: true, confirmLoading: true });
-        const submitApi = isUpdate.value ? updateProcess : createProcess;
-        submitApi(values)
-          .then(() => {
-            message.success('保存成功');
-            gridApi.value?.reload();
-            modalApi.close();
-          })
-          .finally(() => {
-            modalApi.setState({ loading: false, confirmLoading: false });
-          });
-      }
-    });
-    await formApi.validateAndSubmitForm();
+    const values = await formApi.getValues();
+    if (!validateFormValues(values)) {
+      return;
+    }
+    const payload = buildSubmitPayload(values);
+    modalApi.setState({ loading: true, confirmLoading: true });
+    const submitApi = isUpdate.value ? updateProcess : createProcess;
+    submitApi(payload)
+      .then(() => {
+        message.success('保存成功');
+        gridApi.value?.reload();
+        modalApi.close();
+      })
+      .finally(() => {
+        modalApi.setState({ loading: false, confirmLoading: false });
+      });
   },
   onOpenChange(isOpen: boolean) {
     gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
     if (isOpen) {
-      const { values, update } = modalApi.getData<Record<string, any>>();
+      const { values, update, formLevel } = modalApi.getData<Record<string, any>>();
+      isUpdate.value = update;
+      formApi.resetForm();
       if (values) {
-        isUpdate.value = update;
-        formApi.setValues(values);
+        const formValues = {
+          ...values,
+          formLevel,
+          note: values.note ?? values.name,
+          has_children: values.has_children ?? false,
+        };
+        formApi.setValues(formValues);
       }
     }
   },

apps/web-antd/src/views/system/process/components/volume-modal.vue

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import { useVbenModal } from '@vben/common-ui';
+
+import { Form, FormItem, InputNumber, message } from 'ant-design-vue';
+
+import { updateProcess } from '#/views/system/process/api';
+
+const noteRow = ref<Record<string, any>>({});
+const volumeValue = ref<null | number>(null);
+const gridApiRef = ref<any>(null);
+
+const [Modal, modalApi] = useVbenModal({
+  fullscreenButton: false,
+  draggable: true,
+  onCancel() {
+    modalApi.close();
+  },
+  onConfirm: async () => {
+    if (volumeValue.value === null || volumeValue.value === undefined) {
+      message.error('请输入毫升');
+      return;
+    }
+    modalApi.setState({ confirmLoading: true });
+    try {
+      const realId = noteRow.value.real_id ?? Math.abs(Number(noteRow.value.id));
+      await updateProcess({
+        id: noteRow.value.id,
+        node_type: 'note',
+        real_id: realId,
+        note: noteRow.value.note ?? noteRow.value.name,
+        volume: volumeValue.value,
+      });
+      message.success('保存成功');
+      gridApiRef.value?.query?.();
+      // gridApiRef.value?.reload?.();
+      modalApi.close();
+    } finally {
+      modalApi.setState({ confirmLoading: false });
+    }
+  },
+  onOpenChange(isOpen: boolean) {
+    if (isOpen) {
+      const data = modalApi.getData<{
+        gridApi: any;
+        row: Record<string, any>;
+      }>();
+      gridApiRef.value = data?.gridApi;
+      noteRow.value = data?.row ?? {};
+      const raw = noteRow.value.volume;
+      volumeValue.value =
+        raw !== null && raw !== undefined && raw !== '' ? Number(raw) : null;
+    } else {
+      noteRow.value = {};
+      volumeValue.value = null;
+      gridApiRef.value = null;
+    }
+  },
+});
+</script>
+
+<template>
+  <Modal title="设置毫升" class="w-[400px]">
+    <Form layout="vertical">
+      <FormItem label="备注名称">
+        <span>{{ noteRow.name ?? noteRow.note ?? '-' }}</span>
+      </FormItem>
+      <FormItem label="毫升" required>
+        <InputNumber
+          v-model:value="volumeValue"
+          :min="1"
+          class="w-full"
+          placeholder="请输入毫升，用于传给 MES"
+        />
+      </FormItem>
+    </Form>
+  </Modal>
+</template>

apps/web-antd/src/views/system/process/config/form.ts

@@ -1,92 +1,127 @@
 import type { VbenFormProps } from '#/adapter/form';
-import {getProcessOptionPidApi} from "#/views/system/process/api";
+
+import { getProcessOptionPidApi } from '#/views/system/process/api';
 
 export const modalFormProps: VbenFormProps = {
-  wrapperClass: 'grid-cols-12', // 24栅格,
+  wrapperClass: 'grid-cols-12',
   commonConfig: {
     formItemClass: 'col-span-12',
-    // 所有表单项
     componentProps: {
       class: 'w-full',
     },
   },
-  // handleSubmit: onSubmit,
   layout: 'horizontal',
   schema: [
-    // {
-    //   fieldName: 'baseinfo',
-    //   component: 'Divider',
-    //   label: '基础信息',
-    //   formItemClass: 'col-span-12',
-    //   componentProps: {},
-    //   hideLabel: true,
-    //   renderComponentContent: () => {
-    //     return {
-    //       default: () => {
-    //         return '基础信息';
-    //       },
-    //     };
-    //   },
-    // },
     {
       component: 'VbenInput',
       fieldName: 'id',
       label: 'ID',
-      formItemClass: 'col-span-6',
       dependencies: {
         show: false,
         triggerFields: ['id'],
       },
     },
+    {
+      component: 'VbenInput',
+      fieldName: 'node_type',
+      label: '节点类型',
+      dependencies: {
+        show: false,
+        triggerFields: ['node_type'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'formLevel',
+      label: '表单层级',
+      dependencies: {
+        show: false,
+        triggerFields: ['formLevel'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'rule_id',
+      label: '所属煎法',
+      dependencies: {
+        show: false,
+        triggerFields: ['rule_id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'real_id',
+      label: '真实ID',
+      dependencies: {
+        show: false,
+        triggerFields: ['real_id'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      fieldName: 'has_children',
+      label: '是否有子级',
+      dependencies: {
+        show: false,
+        triggerFields: ['has_children'],
+      },
+    },
     {
       component: 'VbenInput',
       componentProps: {
-        placeholder: '请输入加工费昵称',
+        placeholder: '请输入名称',
       },
       fieldName: 'name',
-      label: '加工费名称',
-      rules: 'required',
+      label: '名称',
+      dependencies: {
+        show(values) {
+          return Number(values.formLevel) !== 3;
+        },
+        triggerFields: ['formLevel'],
+      },
+    },
+    {
+      component: 'VbenInput',
+      componentProps: {
+        placeholder: '请输入备注名称',
+      },
+      fieldName: 'note',
+      label: '备注名称',
+      dependencies: {
+        show(values) {
+          return Number(values.formLevel) === 3;
+        },
+        triggerFields: ['formLevel'],
+      },
     },
-    // calc_method '计算方式 1固定价格  2贴数  3克数',
     {
       component: 'VbenSelect',
       componentProps: {
         placeholder: '请选择计算方式',
         options: [
-          {
-            label: '固定价格',
-            value: 1,
-          },
-          {
-            label: '贴数',
-            value: 2,
-          },
-          {
-            label: '克数',
-            value: 3,
-          },
+          { label: '固定价格', value: 1 },
+          { label: '贴数', value: 2 },
+          { label: '克数', value: 3 },
         ],
       },
       fieldName: 'calc_method',
       label: '计算方式',
+      dependencies: {
+        show(values) {
+          return Number(values.formLevel) === 2;
+        },
+        triggerFields: ['formLevel'],
+      },
     },
     {
       component: 'ApiSelect',
       componentProps: {
-        placeholder: '请选择计算方式',
+        placeholder: '请选择父级制剂',
         api: getProcessOptionPidApi,
-        filterOption: (input: string, option: any) => {
-          // 自定义过滤逻辑，确保可以根据 name 进行搜索
-          return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
-        },
+        filterOption: (input: string, option: any) =>
+          option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0,
         showSearch: true,
-        // 菜单接口转options格式
         afterFetch: (data: { id: number; name: string }[]) => {
-          // 在开头插入value = 0  的选项
-          data.unshift({
-            name: '一级分类',
-            id: 0,
-          });
           return data.map((item: any) => ({
             label: item.name,
             value: item.id,
@@ -94,15 +129,28 @@ export const modalFormProps: VbenFormProps = {
         },
       },
       fieldName: 'pid',
-      label: '父级',
+      label: '父级制剂',
+      dependencies: {
+        show(values) {
+          return Number(values.formLevel) === 2;
+        },
+        triggerFields: ['formLevel'],
+      },
     },
     {
       component: 'InputNumber',
       componentProps: {
         placeholder: '请输入计算价格',
+        class: 'w-full',
       },
       fieldName: 'price',
       label: '计算价格',
+      dependencies: {
+        show(values) {
+          return Number(values.formLevel) === 2;
+        },
+        triggerFields: ['formLevel'],
+      },
     },
     {
       component: 'VbenInput',
@@ -111,6 +159,12 @@ export const modalFormProps: VbenFormProps = {
       },
       fieldName: 'unit',
       label: '计算单位',
+      dependencies: {
+        show(values) {
+          return Number(values.formLevel) === 2;
+        },
+        triggerFields: ['formLevel'],
+      },
     },
   ],
   showDefaultActions: false,

apps/web-antd/src/views/system/process/config/table.ts

@@ -2,6 +2,22 @@ import type { VxeGridProps } from '#/adapter/vxe-table';
 
 import { getProcessList } from '#/views/system/process/api';
 
+const calcMethodMap: Record<number, string> = {
+  1: '固定价格',
+  2: '贴数',
+  3: '克数',
+};
+
+function getLevelLabel(row: Record<string, any>) {
+  if (row.node_type === 'note') {
+    return '备注';
+  }
+  if (Number(row.pid) === 0) {
+    return '制剂';
+  }
+  return '煎法';
+}
+
 export const gridOptions: VxeGridProps = {
   checkboxConfig: {
     highlight: true,
@@ -17,18 +33,48 @@ export const gridOptions: VxeGridProps = {
     { type: 'checkbox', width: 60 },
     { width: 60, treeNode: true },
     { field: 'id', align: 'left', title: 'ID', width: 100 },
-    { field: 'name', title: '加工费名称' },
-    { field: 'calc_method', title: '计算方式' },
-    { field: 'price', title: '计算价格' },
-    { field: 'unit', title: '计算单位' },
+    {
+      field: 'level',
+      title: '级别',
+      width: 90,
+      formatter: ({ row }) => getLevelLabel(row),
+    },
+    { field: 'name', title: '名称' },
+    {
+      field: 'calc_method',
+      title: '计算方式',
+      formatter: ({ row, cellValue }) => {
+        if (row.node_type === 'note') {
+          return '-';
+        }
+        return calcMethodMap[Number(cellValue)] || cellValue || '-';
+      },
+    },
+    {
+      field: 'price',
+      title: '计算价格',
+      formatter: ({ row, cellValue }) =>
+        row.node_type === 'note' ? '-' : (cellValue ?? '-'),
+    },
+    {
+      field: 'unit',
+      title: '计算单位',
+      formatter: ({ row, cellValue }) =>
+        row.node_type === 'note' ? '-' : (cellValue ?? '-'),
+    },
+    {
+      field: 'volume',
+      title: '毫升',
+      width: 100,
+      slots: { default: 'volume' },
+    },
     { field: 'created_at', title: '创建时间' },
-    { type: 'html', title: '操作', slots: { default: 'action' } },
+    { type: 'html', title: '操作', slots: { default: 'action' }, width: 220 },
   ],
   keepSource: true,
   pagerConfig: {},
   proxyConfig: {
     ajax: {
-      // 请求后端接口方法
       query: async ({ page }, formValues) => {
         return await getProcessList({
           page: page.currentPage,
@@ -47,21 +93,27 @@ export const gridOptions: VxeGridProps = {
   height: 'auto',
   border: false,
   toolbarConfig: {
-    // 是否显示搜索表单控制按钮
-    // @ts-ignore 正式环境时有完整的类型声明
     search: true,
-    refresh: true, // 刷新
-    print: false, // 打印
-    export: false, // 导出
-    // custom: true, // 自定义列
-    zoom: true, // 最大化最小化
+    refresh: true,
+    print: false,
+    export: false,
+    zoom: true,
     slots: {
       buttons: 'toolbar-buttons',
     },
     custom: {
-      // 自定义列-图标
       icon: 'vxe-icon-menu',
     },
   },
   showOverflow: false,
 };
+
+export function getProcessNodeLevel(row: Record<string, any>) {
+  if (row.node_type === 'note') {
+    return 3;
+  }
+  if (Number(row.pid) === 0) {
+    return 1;
+  }
+  return 2;
+}

apps/web-antd/src/views/system/process/index.vue

@@ -5,26 +5,25 @@ import { ref } from 'vue';
 
 import { Page, useVbenModal } from '@vben/common-ui';
 
-import { Button, Image, message } from 'ant-design-vue';
+import { Button, message } from 'ant-design-vue';
 
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
 import { TableAction } from '#/components/table-action';
 
 import { deleteProcess } from './api';
 import FormModalDemo from './components/modal.vue';
+import VolumeModal from './components/volume-modal.vue';
 import { formOptions } from './config/search';
-import { gridOptions } from './config/table';
+import { getProcessNodeLevel, gridOptions } from './config/table';
 
 const hasTopTableDropDownActions = ref(false);
 
 const gridEvents: VxeGridListeners<any> = {
   checkboxChange() {
-    // eslint-disable-next-line no-use-before-define
     const records = gridApi.grid.getCheckboxRecords();
     hasTopTableDropDownActions.value = records.length > 0;
   },
   checkboxAll() {
-    // eslint-disable-next-line no-use-before-define
     const records = gridApi.grid.getCheckboxRecords();
     hasTopTableDropDownActions.value = records.length > 0;
   },
@@ -40,28 +39,113 @@ const [FormModal, formModalApi] = useVbenModal({
   connectedComponent: FormModalDemo,
 });
 
-const showModal = (data = {}, isUpdate = false) => {
+const [VolumeModalComponent, volumeModalApi] = useVbenModal({
+  connectedComponent: VolumeModal,
+});
+
+function showVolumeModal(row: Record<string, any>) {
+  volumeModalApi.setData({
+    row,
+    gridApi,
+  });
+  volumeModalApi.open();
+}
+
+function getVolumeLinkLabel(row: Record<string, any>) {
+  const volume = row.volume;
+  if (volume !== null && volume !== undefined && volume !== '') {
+    return `${volume}ml`;
+  }
+  return '设置';
+}
+
+function openModal(options: {
+  formLevel: number;
+  isUpdate?: boolean;
+  parentRow?: Record<string, any>;
+  values?: Record<string, any>;
+}) {
+  const { formLevel, isUpdate = false, parentRow, values = {} } = options;
+  let formValues: Record<string, any> = { ...values, formLevel };
+
+  if (!isUpdate) {
+    if (formLevel === 1) {
+      formValues = {
+        node_type: 'rule',
+        pid: 0,
+        formLevel: 1,
+      };
+    } else if (formLevel === 2 && parentRow) {
+      formValues = {
+        node_type: 'rule',
+        pid: parentRow.id,
+        formLevel: 2,
+      };
+    } else if (formLevel === 3 && parentRow) {
+      formValues = {
+        node_type: 'note',
+        rule_id: parentRow.id,
+        formLevel: 3,
+      };
+    }
+  } else if (formLevel === 3) {
+    formValues = {
+      ...values,
+      formLevel: 3,
+      note: values.note ?? values.name,
+      rule_id: values.pid,
+      real_id: values.real_id ?? Math.abs(Number(values.id)),
+    };
+  } else {
+    formValues = {
+      ...values,
+      formLevel,
+      has_children: values.has_children ?? false,
+    };
+  }
+
   formModalApi.setData({
-    // 表单值
-    values: data,
+    values: formValues,
     update: isUpdate,
+    formLevel,
     gridApi,
   });
   formModalApi.open();
+}
+
+const showCreateLevel1 = () => {
+  openModal({ formLevel: 1 });
 };
 
-const deleteApi = (row: any) => {
-  let ids = [];
-  if (row) {
-    ids.push(row);
-  } else {
-    ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
-  }
-  deleteProcess({ ids }).then(() => {
+const showEditModal = (row: Record<string, any>) => {
+  openModal({
+    formLevel: getProcessNodeLevel(row),
+    isUpdate: true,
+    values: row,
+  });
+};
+
+const showCreateChildRule = (row: Record<string, any>) => {
+  openModal({
+    formLevel: 2,
+    parentRow: row,
+  });
+};
+
+const showCreateChildNote = (row: Record<string, any>) => {
+  openModal({
+    formLevel: 3,
+    parentRow: row,
+  });
+};
+
+const deleteRow = (row: Record<string, any>) => {
+  deleteProcess({ ids: [row.id] }).then(() => {
     message.success('删除成功!');
     gridApi.query();
   });
 };
+
 const expandAll = () => {
   gridApi.grid?.setAllTreeExpand(true);
 };
@@ -74,42 +158,29 @@ const collapseAll = () => {
 <template>
   <Page auto-content-height title="加工费管理">
     <FormModal />
+    <VolumeModalComponent />
     <Grid>
       <template #toolbar-buttons>
         <TableAction
           :actions="[
             {
-              label: '新增',
+              label: '新增制剂',
               type: 'primary',
               icon: 'ant-design:plus-outlined',
-              // auth: ['超级加工费', 'sys:user:save'],
-              onClick: showModal.bind(null),
+              onClick: showCreateLevel1,
             },
             {
               label: '展开全部',
               type: 'primary',
-              // auth: ['超级菜单', 'sys:user:save'],
-              onClick: expandAll.bind(null),
+              onClick: expandAll,
             },
             {
               label: '收起全部',
               type: 'primary',
-              // auth: ['超级菜单', 'sys:user:save'],
-              onClick: collapseAll.bind(null),
+              onClick: collapseAll,
             },
           ]"
-          :drop-down-actions="[
-            // {
-            //   label: '删除',
-            //   icon: 'ant-design:delete-outlined',
-            //   ifShow: hasTopTableDropDownActions,
-            //   // auth: ['超级加工费', 'sys:user:save'],
-            //   popConfirm: {
-            //     title: '确定删除吗？',
-            //     confirm: deleteApi.bind(null, false),
-            //   },
-            // },
-          ]"
+          :drop-down-actions="[]"
         >
           <template #more>
             <Button style="margin-left: 16px">
@@ -119,66 +190,62 @@ const collapseAll = () => {
           </template>
         </TableAction>
       </template>
-      <template #logo="{ row }">
-        <Image :src="row.logo" height="30" width="30" />
+      <template #volume="{ row }">
+        <Button
+          v-if="row.node_type === 'note'"
+          class="h-auto p-0"
+          size="small"
+          type="link"
+          @click="showVolumeModal(row)"
+        >
+          {{ getVolumeLinkLabel(row) }}
+        </Button>
+        <span v-else>-</span>
       </template>
-      <template #open_business_license="{ row }">
-        <Image :src="row.open_business_license" height="30" width="30" />
-      </template>
-      <template #business_license="{ row }">
-        <Image :src="row.business_license" height="30" width="30" />
-      </template>
-      <template #product_registration_certificate="{ row }">
-        <Image
-          :src="row.product_registration_certificate"
-          height="30"
-          width="30"
-        />
-      </template>
-      <template #toolbar-tools></template>
       <template #action="{ row }">
         <TableAction
           :actions="[
+            ...(getProcessNodeLevel(row) === 1
+              ? [
+                  {
+                    label: '新增煎法',
+                    type: 'link',
+                    size: 'small',
+                    onClick: () => showCreateChildRule(row),
+                  },
+                ]
+              : []),
+            ...(getProcessNodeLevel(row) === 2
+              ? [
+                  {
+                    label: '新增备注',
+                    type: 'link',
+                    size: 'small',
+                    onClick: () => showCreateChildNote(row),
+                  },
+                ]
+              : []),
             {
               label: '编辑',
               type: 'link',
               icon: 'uil:edit',
               size: 'small',
-              // auth: ['process', 'sys:role:detail'],
-              onClick: showModal.bind(null, row, true),
+              onClick: () => showEditModal(row),
             },
-            // {
-            //   label: '删除',
-            //   type: 'link',
-            //   icon: 'ant-design:delete-outlined',
-            //   size: 'small',
-            //   // auth: ['process', 'sys:role:detail'],
-            //   popConfirm: {
-            //     title: '确定删除吗？',
-            //     confirm: deleteApi.bind(null, row.id),
-            //   },
-            // },
-          ]"
-          :drop-down-actions="[
-            // {
-            //   label: '编辑',
-            //   type: 'link',
-            //   icon: 'ant-design:delete-outlined',
-            //   size: 'small',
-            //   // auth: ['process', 'sys:role:detail'],
-            //   onClick: showModal.bind(null, row, true),
-            // },
-            // {
-            //   label: '删除',
-            //   type: 'link',
-            //   icon: 'ant-design:delete-outlined',
-            //   size: 'small',
-            //   // auth: ['process', 'sys:role:detail'],
-            //   popConfirm: {
-            //     title: '确定删除吗？',
-            //     confirm: deleteApi.bind(null, row.id),
-            //   },
-            // },
+            ...(getProcessNodeLevel(row) === 3
+              ? [
+                  {
+                    label: '删除',
+                    type: 'link',
+                    icon: 'ant-design:delete-outlined',
+                    size: 'small',
+                    popConfirm: {
+                      title: '确定删除该备注吗？',
+                      confirm: () => deleteRow(row),
+                    },
+                  },
+                ]
+              : []),
           ]"
         />
       </template>