onbus_crm.git - Gitblit

// import {FormSchema} from '@/components/Table';
import {treeOptionsListApi} from "@/api/demo/tree";
import {areaRecord} from "@/api/demo/cascader";
import dayjs from "dayjs";
import {optionsListApi} from "@/api/demo/select";
import {Input, FormItem, FormItemRest} from "ant-design-vue";
import { ApiSelect, FormSchema } from '@/components/Form';
 
import companyType from './drawer-form/companyType';
import annualPurchaseAmount from './drawer-form/annualPurchaseAmount';
import timeZone from './drawer-form/timeZone';
import {uploadApi} from "@/api/sys/upload";
 
// const custom_typeKey2typeValueRules = (model) => {
//   return [
//     {
//       // required: true,
//       // trigger: 'blur',
//       validator: async () => {
//         Logger.log('custom_typeKey2typeValueRules', model);
//         if (!model.typeKey) return Promise.reject('请选择类型');
//         if (!model.typeValue) return Promise.reject('请输入数据');
//         Promise.resolve();
//       },
//     },
//   ];
// };
 
export const schemas: FormSchema[] = [
  {
    field: 'field0',
    component: 'Input',
    label: '公司网址',
    colProps: {
      span: 24,
    },
  },
  {
    field: 'cluesName',
    component: 'Input',
    label: '线索名称',
    colProps: {
      span: 24,
    },
    rules: [{required: true, trigger: 'blur'}],
  },
  {
    field: 'cluesFrom',
    component: 'ApiTreeSelect',
    label: '线索来源',
    componentProps: {
      api: treeOptionsListApi,
      treeCheckable: true,
      treeCheckStrictly: true, // 父子节点是否不再关联
      resultField: 'list',
      onChange: (e, v) => {
        console.log('ApiTreeSelect====>:', e, v);
      },
    },
    colProps: {
      span: 24,
    },
  },
  {
    field: 'abbreviation',
    component: 'Input',
    label: '简称',
    colProps: {
      span: 24,
    },
  },
  {
    field: 'field8',
    component: 'ApiCascader',
    label: '国家地区',
    colProps: {
      span: 16,
    },
    componentProps: {
      api: areaRecord,
      apiParamKey: 'parentCode',
      // dataField: 'data',
      labelField: 'name',
      valueField: 'code',
      initFetchParams: {
        parentCode: '',
      },
      isLeaf: (record) => {
        return !(record.levelType < 3);
      },
      onChange: (e, ...v) => {
        console.log('ApiCascader====>:', e, v);
      },
    },
  },
  // {
  //   field: 'field9',
  //   component: 'ApiCascader',
  //   label: '联动ApiCascader',
  //   required: true,
  //   colProps: {
  //     span: 8,
  //   },
  //   componentProps: {
  //     api: areaRecord,
  //     apiParamKey: 'parentCode',
  //     // dataField: 'data',
  //     labelField: 'name',
  //     valueField: 'code',
  //     initFetchParams: {
  //       parentCode: '',
  //     },
  //     isLeaf: (record) => {
  //       return !(record.levelType < 3);
  //     },
  //     onChange: (e, ...v) => {
  //       console.log('ApiCascader====>:', e, v);
  //     },
  //   },
  // },
  {
    field: 'field30',
    component: 'ApiSelect',
    label: '线索标签',
    // required: true,
    componentProps: {
      // more details see /src/components/Form/src/components/ApiSelect.vue
      api: optionsListApi,
      params: {
        id: 1,
      },
      mode: 'multiple',
      resultField: 'list',
      // use name as label
      labelField: 'name',
      // use id as value
      valueField: 'id',
      // not request untill to select
      immediate: true,
      onChange: (e, v) => {
        console.log('ApiSelect====>:', e, v);
      },
      // atfer request callback
      onOptionsChange: (options) => {
        // console.log('get options', options.length, options);
      },
    },
    colProps: {
      span: 16,
    },
    // defaultValue: '0',
  },
  {
    field: 'companyName',
    component: 'Input',
    label: '公司名称',
    colProps: {
      span: 16,
    },
  },
  {
    field: 'typeKey',
    defaultValue: '公司名称',
    fields: ['typeValue'],
    defaultValueObj: {typeValue: ''},
    component: 'Input',
    // label: 'renderColContent渲染',
    /**!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹： 示例如下*/
    renderColContent({model, field}, {disabled}) {
      return (
        <FormItem
          name="typeKey"
          label="座机"
          // rules={[{ trigger: 'blur',required: true, }]}
          // rules={custom_typeKey2typeValueRules(model)}
        >
          <Input.Group compact>
            {/*<Select*/}
            {/*  allowClear*/}
            {/*  disabled={disabled}*/}
            {/*  style="width: 120px"*/}
            {/*  v-model:value={model[field]}*/}
            {/*>*/}
            {/*  <Select.Option value="公司名称">公司名称</Select.Option>*/}
            {/*  <Select.Option value="产品名称">产品名称</Select.Option>*/}
            {/*</Select>*/}
            <ApiSelect
              style="width: 120px"
              v-model:api={optionsListApi}
              showSearch
              v-model:value={model['field']}
              optionFilterProp="label"
              resultField="list"
              labelField="name"
              valueField="id"
            />
            <FormItemRest>
              <Input
                style="width: calc(100% - 120px); margin-left: -1px;"
                placeholder="电话号码"
                v-model:value={model['typeValue']}
                disabled={disabled}
                // rules={[{ type: 'number',trigger: 'blur',required: true, }]}
                // rules={custom_typeKey2typeValueRules(model)}
              />
            </FormItemRest>
          </Input.Group>
        </FormItem>
      );
    },
    colProps: {
      span: 16,
    },
    dynamicDisabled: ({values}) => {
      return !!values.field_disabled;
    },
  },
  {
    field: 'customerCode',
    component: 'Input',
    label: '客户代码（与生产单的客户代码一致）',
    colProps: {
      span: 24,
    },
  },
  {
    field: '',
    defaultValue: '',
    component: 'Input',
    // label: 'renderColContent渲染',
    /**!!!renderColContent 没有FormItem 包裹, 若想要 Form 提交需要带上数据须 <FormItem name={}></FormItem> 包裹： 示例如下*/
    renderColContent({model, field}, {disabled}) {
      return (
        <div class="font-size-16px mb-10px">其他</div>
      );
    },
    colProps: {
      span: 24,
    },
  },
  {
    component: 'Select',
    label: '公司类型',
    field: 'companyType',
    colProps: {span: 16},
    componentProps: {
      options: companyType,
    },
    defaultValue: '1'
  },
  {
    component: 'Select',
    label: '采购意向',
    field: 'purchasingIntention',
    colProps: {span: 16},
    componentProps: {
      options: [
        {
          label: '未知',
          value: '1',
        },
        {
          label: '低',
          value: '2',
        },
        {
          label: '中',
          value: '3',
        },
        {
          label: '高',
          value: '4',
        },
      ],
    },
  },
  {
    component: 'Select',
    label: '年采购额',
    field: 'annualPurchaseAmount',
    colProps: {span: 16},
    componentProps: {
      options: annualPurchaseAmount,
    },
  },
  {
    component: 'Select',
    label: '时区',
    field: 'timeZone',
    colProps: {span: 16},
    componentProps: {
      options: timeZone,
    },
  },
  {
    field: 'searchKeywords',
    component: 'Input',
    label: '搜索关键词',
    colProps: {
      span: 16,
    },
  },
  {
    field: 'detailedAddress',
    component: 'Input',
    label: '详细地址',
    colProps: {
      span: 24,
    },
  },
  {
    field: 'image',
    component: 'ImageUpload',
    label: '上传图片',
    subLabel: '(单张图片最大3M，最多上传5张图片)',
    // required: true,
    defaultValue: [
      'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
    ],
    componentProps: {
      api: uploadApi,
      accept: ['png', 'jpeg', 'jpg'],
      helpText: '单张图片最大3M，最多上传5张图片',
      maxSize: 3, //单个文件最大体积，单位 M
      maxNumber: 5,
    },
    // rules: [
    //   {
    //     required: true,
    //     trigger: 'change',
    //     validator(_, value) {
    //       if (isArray(value) && value.length > 0) {
    //         return Promise.resolve();
    //       } else {
    //         return Promise.reject('请选择上传图片');
    //       }
    //     },
    //   },
    // ],
  },
  {
    field: 'cluesNotes',
    component: 'InputTextArea',
    label: '线索备注',
    colProps: {
      span: 24,
    },
  },
  {
    component: 'Select',
    label: '规模',
    field: 'numberOfPeople',
    colProps: {span: 16},
    componentProps: {
      options: [
        {
          label: '少于59人',
          value: '1',
        },
        {
          label: '60-149人',
          value: '2',
        },
        {
          label: '150-499人',
          value: '3',
        },
        {
          label: '500-999人',
          value: '4',
        },
        {
          label: '1000-4999人',
          value: '5',
        },
        {
          label: '5000人以上',
          value: '6',
        },
      ],
    },
  },
  {
    field: 'salesman',
    component: 'Input',
    label: '业务员',
    colProps: {
      span: 16,
    },
  },
  {
    component: 'Select',
    label: '访问来源',
    field: 'visitSource',
    colProps: {span: 24},
    componentProps: {
      options: [
        {
          label: '广告投放',
          value: '1',
        },
        {
          label: '自然流量',
          value: '2',
        },
        {
          label: '社交网站',
          value: '3',
        },
        {
          label: '直接访问',
          value: '4',
        },
        {
          label: '邮件',
          value: '5',
        },
        {
          label: '其他',
          value: '6',
        },
      ],
    },
  },
  {
    field: 'field12',
    component: 'ApiCascader',
    label: '主营产品',
    colProps: { span: 24 },
    componentProps: {
      api: areaRecord,
      apiParamKey: 'parentCode',
      showCheckedStrategy: 'SHOW_CHILD',
      labelField: 'name',
      valueField: 'code',
      multiple: true,
      initFetchParams: {
        parentCode: '',
      },
      isLeaf: (record) => {
        return !(record.levelType < 3);
      },
      onChange: (e, ...v) => {
        Logger.log('ApiCascader====> e:', e);
        Logger.log('ApiCascader====> v:', v);
      },
    },
  },
  {
    field: 'ipAddress',
    component: 'ApiSelect',
    label: '访客IP所在地',
    // required: true,
    componentProps: {
      // more details see /src/components/Form/src/components/ApiSelect.vue
      api: optionsListApi,
      params: {
        id: 1,
      },
      resultField: 'list',
      // use name as label
      labelField: 'name',
      // use id as value
      valueField: 'id',
      // not request untill to select
      immediate: true,
      onChange: (e, v) => {
        console.log('ApiSelect====>:', e, v);
      },
      // atfer request callback
      onOptionsChange: (options) => {
        // console.log('get options', options.length, options);
      },
    },
    colProps: {
      span: 20,
    },
    // defaultValue: '0',
  },
  {
    field: 'field1',
    component: 'RadioButtonGroup',
    componentProps: {
      options: [
        {label: 'Apple', value: 'Apple'},
        {label: 'Pear', value: 'Pear'},
        {label: 'Orange', value: 'Orange', disabled: true},
      ],
    },
 
    label: '',
    colProps: {
      span: 24,
    },
  },
  {
    field: 'field2',
    component: 'Checkbox',
    // suffix:'全天事件',
    subLabel: '',
    colProps: {
      span: 6,
    },
    renderComponentContent: '全天事件',
    // componentProps: {
    //   options: [
    //     {
    //       label: '全天事件',
    //       value: '1',
    //     }
    //   ],
    // },
  },
  {
    field: '[startDate, endDate]',
    label: '起止时间',
    component: 'RangePicker',
    componentProps: {
      format: 'YYYY-MM-DD',
      placeholder: ['开始日期', '结束日期'],
    },
    colProps: {span: 24},
  },
 
  {
    field: 'field3',
    component: 'DatePicker',
    label: '直到',
    colProps: {
      span: 10,
      offset: 2,
    },
    componentProps: {
      style: {width: '100%'},
      disabledDate: (currentDate) => {
        // Logger.log('currentDate',currentDate)
        // 禁用今天之前的天数
        return currentDate && currentDate < dayjs().subtract(1, 'day');
      }
    },
    required: true,
    ifShow: ({values}) => {
      // Logger.log('vvv',values)
      return ['2', '3', '4'].includes(values.date1);
    },
  },
  {
    field: 'remindTime2',
    component: 'DatePicker',
    label: '',
    colProps: {
      span: 6,
      offset: 2,
    },
    componentProps: {
      // disabledDate:(currentDate)=>{
      //   // Logger.log('currentDate',currentDate)
      //   // 禁用今天之前的天数
      //   return currentDate && currentDate < dayjs().subtract(1, 'day');
      // }
    },
    dynamicRules: ({values}) => {
      return [
        {
          // required: true,
          validator: (_, value) => {
            if (values.remindTime === '6') {
              if (!value) {
                return Promise.reject('不能为空');
              }
            }
 
            return Promise.resolve();
          },
        },
      ];
    },
    show: ({values}) => {
      // Logger.log('vvv',values)
      return values.remindTime === '6';
    },
  },
];