IssueSupportManage/src/views/question/issue/formSchemas.tsx

import type { FormSchema } from '@/components/core/schema-form/';
import { TableListItem } from './columns';
import { commonUpload } from '@/api/upload';
import { message, Button } from 'ant-design-vue';
import { getFileExtension } from '@/utils/fileUtils';
import { UploadOutlined } from '@ant-design/icons-vue';
import { stateTypeList } from './data';
import { DictEnum } from '@/enums/dictEnum';
import { getDictionaryByTypeName } from '@/utils/dict';
import { fetchProdList, fetchVersionPageList } from '@/api/prodVersion';
const questionTypeList = await getDictionaryByTypeName(DictEnum.QUESTION_TYPE);
// 编辑页字段
export const getEditFormSchema: (
  row?: Partial<TableListItem>,
  isDetail?: boolean,
) => FormSchema[] = (record = {}, isDetail = false) => {
  console.log('questionTypeList: ', questionTypeList);

  return [
    {
      field: 'billcode',
      component: 'Input',
      label: '问题号',
      dynamicDisabled: true,
      colProps: {
        span: 24,
      },
    },
    {
      field: 'title',
      component: 'Input',
      componentProps: {
        showCount: true,
        maxlength: 150,
      },
      label: '问题标题',
      colProps: {
        span: 12,
      },
      rules: [{ required: true }],
    },
    {
      field: 'tags',
      component: 'Select',
      componentProps: {
        request: async () => {
          const data = await getDictionaryByTypeName(DictEnum.TAG_TYPE);
          return data;
        },
        multiple: true,
        placeholder: '请选择标签',
        mode: 'tags',
        allowClear: true,
      },
      label: '标签',
      colProps: {
        span: 12,
      },
      rules: [{ required: true, type: 'array' }],
    },
    // {
    //   label: '问题属性',
    //   field: 'arrtibute',
    //   component: 'Select',
    //   componentProps: {
    //     options: questionTypeList,
    //   },
    //   colProps: {
    //     span: 12,
    //   },
    //   rules: [{ required: true, type: 'string' }],
    // },

    {
      field: 'customer',
      component: 'Input',
      label: '客户',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'productId',
      component: 'Select',
      componentProps: ({ formModel, formInstance }) => {
        return {
          request: async () => {
            const data = (await fetchProdList({})) as any;
            return data.map((e) => {
              return {
                label: e.name,
                value: e.id,
              };
            });
          },
          onChange: async (e) => {
            console.log('e: ', e);
            const { data } = await fetchVersionPageList({
              productId: e,
              current: 1,
              size: 999,
            });
            if (data && Array.isArray(data) && data.length) {
              formInstance?.setFieldsValue({
                versionId: data[0].id,
              });
              formInstance.updateSchema({
                field: 'versionId',
                componentProps: {
                  options: data.map((e) => {
                    return {
                      label: e.name,
                      value: e.id,
                    };
                  }),
                },
              });
            }
          },
        };
      },
      label: '产品',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'versionId',
      component: 'Select',
      componentProps: {
        options: [],
      },
      label: '版本',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'agent',
      component: 'Input',
      label: '代理商',
      colProps: {
        span: 12,
      },
    },

    {
      field: 'serviceNumber',
      component: 'Input',
      label: '服务号',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'contacts',
      component: 'Input',
      label: '联系人',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'contactsEmail',
      component: 'Input',
      label: '联系人邮箱',
      colProps: {
        span: 12,
      },
    },
    {
      field: 'contactsMobile',
      component: 'Input',
      label: '联系人手机号',
      colProps: {
        span: 12,
      },
      rules: [
        {
          required: false,
          message: '请输入正确格式的电话号码',
          pattern:
            /^(1(3[0-9]|4[01456879]|5[0-3,5-9]|6[2567]|7[0-8]|8[0-9]|9[0-3,5-9])\d{8})$|^0\d{2,3}-?\d{7,8}$/,
        },
      ],
    },
    {
      field: 'state',
      component: 'Select',
      defaultValue: 0,
      label: '状态',
      colProps: {
        span: 12,
      },
      componentProps: {
        options: stateTypeList,
      },
      rules: [{ required: true, type: 'number' }],
    },
    {
      field: 'description',
      component: 'InputTextArea',
      componentProps: {
        rows: 4,
        placeholder: '请输入问题描述',
        showCount: true,
        maxlength: 150,
      },
      label: '问题描述',
      colProps: {
        span: 24,
      },
      rules: [{ required: true }],
    },

    {
      label: '描述附件',
      field: 'files',
      component: 'Upload',
      componentProps: {
        disabled: isDetail,
        customRequest: async (data) => {
          console.log('data: ', data);
          const formData = new FormData();
          formData.append('file', data.file);
          const res = await commonUpload(formData);
          console.log('res: ', res);
          data?.onSuccess && data?.onSuccess(res, data.file as any);
        },
        beforeUpload: (file) => {
          console.log('file: ', file);

          // 限制允许上传的文件类型
          const allowedTypes = ['xlsx', 'xls', 'doc', 'docx', 'pdf', 'jpg', 'jpeg', 'png'];

          // 检查文件类型
          const fileType = getFileExtension(file.name) || 'unknown';
          if (!allowedTypes.includes(fileType)) {
            // 文件类型不在允许列表中，拒绝上传
            // 可以在这里展示错误信息
            message.warning('文件类型不正确');
            return false;
          }

          // 其他验证逻辑...

          // 允许上传
          return true;
        },
      },
      componentSlots: {
        default: () => (
          <Button>
            <UploadOutlined /> 点击上传
          </Button>
        ),
      },
      colProps: {
        span: 24,
      },
      rules: [{ required: false }],
    },
    {
      label: '解决方案',
      field: 'solution',
      colProps: {
        span: 24,
      },
      // vShow: !isDetail,
      // rules: [{ required: true, type: 'array' }],
      slot: 'solution',
    },
  ] as any;
};

export const getFlowFormSchema: (row?: Partial<TableListItem>) => FormSchema[] = (record = {}) => {
  return [
    {
      field: 'remark',
      component: 'InputTextArea',
      label: '文字补充内容',
      colProps: {
        span: 24,
      },
    },
  ];
};