aftermarket-mp/src/views/work/recoveryModal.vue

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="录单"
    @cancel="resetFields"
    @ok="handleSubmit"
    :min-height="0"
  >
    <BasicForm @register="registerForm" />
  </BasicModal>
</template>
<script lang="ts">
import { defineComponent, ref, onMounted, h } from 'vue';
import { BasicModal, useModalInner } from '/@/components/Modal';
import { useMessage } from '/@/hooks/web/useMessage';
import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
import { supplyOrderList, getByRoleType, recording } from '/@/api/spares';
import { uploadApi } from '/@/api/product/index';
import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n();
export default defineComponent({
  components: { BasicModal, BasicForm },
  props: {
    userData: { type: Object },
  },
  emits: ['update'],
  setup(_, { emit }) {
    const modelRef = ref({});
    const schemas: FormSchema[] = [
      {
        field: 'connection-info',
        component: 'Divider',
        label: '客户信息',
      },
      {
        field: 'companyName',
        component: 'Input',
        required: true,
        label: '公司名称',
        componentProps: {
          maxLength: 50,
        },        
        colProps: {
          span: 18,
        },  
      },
      {
        field: 'customerName',
        component: 'Input',
        required: true,
        label: '联系人',
        componentProps: {
          placeholder: '请填写姓名',
          maxLength: 50,
        },        colProps: {
          span: 18,
        },  
      },
      {
        field: 'phone',
        component: 'Input',
        required: true,
        label: '联系电话',
        rules: [
          {
            required: true,
            // @ts-ignore
            validator: async (rule, value) => {
              var reg_tel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              // var reg = /\S+@\S+\.\S+/;
              if (!value) {
                /* eslint-disable-next-line */

                return Promise.reject(t('common.phone'));
              }
              if (!reg_tel.test(value)) {
                /* eslint-disable-next-line */
                return Promise.reject(t('common.phoneError'));
              }
              return Promise.resolve();
            },
            trigger: 'change',
          },
        ],        colProps: {
          span: 18,
        },  
        componentProps: {
          placeholder: '请填写手机号',
          maxLength: 50,
        },
      },
      {
        field: 'hitch-info',
        component: 'Divider',
        label: '故障信息',
      },
      {
        field: 'cameraSnCode',
        component: 'Input',
        label: '产品SN码',        
        required: true,
        colProps: {
          span: 18,
        },  
        componentProps: {
          placeholder: '请填写下划线后的数字母组合',
          maxLength: 50,
        },
      },
      {
        field: 'faultMsg',
        component: 'InputTextArea',
        label: '故障描述',
        required: true,
        componentProps: {
          maxLength: 500,
          rows: 3,
          placeholder: '请具体描述故障现象，相关操作等。',
        },
        colProps: {
          span: 18,
        },
      },
      {
        field: 'faultImg',
        component: 'Upload',
        label: '相关图片',
        required: true,
        rules: [{ required: true, message: t('common.uploadMessge') }],
        itemProps: {
          validateTrigger: 'blur',
        },
        componentProps: {
          api: uploadApi,
          // fileFlow:true,
          maxNumber: 5,
          maxSize: 5,
          accept: ['jpeg', 'jpg', 'png'],
        },
        colProps: {
          span: 12,
        },
      },
      {
        field: 'sendType',
        component: 'RadioGroup',
        required: true,
        label: '送修方式',
        defaultValue:1,
        componentProps: {
          placeholder: '请填写姓名',
          options:[
            { label: '前台送修', value: 0 },
            { label: '快递寄送', value: 1 },
          ],
          onChange:(e)=>{
            updateSchema([{
              field: 'sendTrackingNum',
              ifShow:e.target.value == 1
            }])
          }
        },
      },
      {
        field: 'sendTrackingNum',
        component: 'Input',
        label: '快递单号',
        required: true,
        colProps: {
          span: 18,
        },
      },{
        field: 'getType',
        component: 'RadioGroup',
        required: true,
        label: '取回方式',
        defaultValue:1,
        componentProps: {
          placeholder: '请填写姓名',
          options:[
            { label: '前台取回', value: 0 },
            { label: '快递寄回', value: 1 },
          ],
          onChange:(e)=>{
            updateSchema([{
              field: 'getAddress',
              ifShow:e.target.value == 1
            },{
              field: 'getAddrName',
              ifShow:e.target.value == 1
            },{
              field: 'getAddrPhone',
              ifShow:e.target.value == 1
            }])
          }
        },
      },
      {
        field: 'getAddress',
        component: 'Input',
        required: true,
        label: '收件地址',
        colProps: {
          span: 18,
        },   
        componentProps: {
          maxLength: 50,
        },  
      },
      {
        field: 'getAddrName',
        component: 'Input',
        required: true,
        label: '收件人',
        colProps: {
          span: 18,
        },   
        componentProps: {
          maxLength: 50,
        },  
      },
      {
        field: 'getAddrPhone',
        component: 'Input',
        label: '收件人电话',
        colProps: {
          span: 18,
        },      
        componentProps: {
          maxLength: 50,
          placeholder: '请填写手机号',
        },  
        rules: [
          {
            required: true,
            // @ts-ignore
            validator: async (rule, value) => {
              var reg_tel =
                /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
              // var reg = /\S+@\S+\.\S+/;
              if (!value) {
                /* eslint-disable-next-line */

                return Promise.reject(t('common.phone'));
              }
              if (!reg_tel.test(value)) {
                /* eslint-disable-next-line */
                return Promise.reject(t('common.phoneError'));
              }
              return Promise.resolve();
            },
            trigger: 'change',
          },
        ],
      },
      // {
      //   field: 'work-info',
      //   component: 'Divider',
      //   label: '工单信息',
      // },{
      //   field: 'warrantyType',
      //   component: 'RadioGroup',
      //   required: true,
      //   label: '保修类型',
      //   defaultValue:1,
      //   componentProps: {
      //     placeholder: '请填写姓名',
      //     options:[
      //       { label: '保修期内', value: 0 },
      //       { label: '保修期外', value: 1 },
      //       { label: '非保修项目', value: 2 },
      //     ],
      //   },
      // },
      // {
      //   field: 'warrantyExpirationDate',
      //   component: 'DatePicker',
      //   label: '保修届满日期',
      //   required: true,
      //   colProps: {
      //     span: 18,
      //   },   
      //   componentProps: {
      //     valueFormat: 'YYYY-MM-DD',
      //   },  
      // },{
      //     field: 'repairManId',
      //     label: '维修工程师',
      //     component: 'ApiSelect',
      //     required: true,
      //     componentProps: {
      //       api: getByRoleType,
      //       numberToString: true,
      //       labelField: 'nickName',
      //       valueField: 'id',
      //       immediate: true,
      //       params: {
      //         roleType: 3,
      //       },
      //     },
      //     colProps: {
      //       span: 18,
      //     },
      //   },{
      //     field: 'supplyAdminId',
      //     label: '供应链管理员',
      //     component: 'ApiSelect',
      //     required: true,
      //     componentProps: {
      //       api: getByRoleType,
      //       numberToString: true,
      //       labelField: 'nickName',
      //       valueField: 'id',
      //       immediate: true,
      //       params: {
      //         roleType: 4,
      //       },
      //     },
      //     colProps: {
      //       span: 18,
      //     },
      //   },{
      //     field: 'testerId',
      //     label: '测试工程师',
      //     component: 'ApiSelect',
      //     required: true,
      //     componentProps: {
      //       api: getByRoleType,
      //       numberToString: true,
      //       labelField: 'nickName',
      //       valueField: 'id',
      //       immediate: true,
      //       params: {
      //         roleType: 5,
      //       },
      //     },
      //     colProps: {
      //       span: 18,
      //     },
      //   },
    ];
    const [registerForm, { validate, resetFields, setFieldsValue, updateSchema }] = useForm({
      labelWidth: 100,
      schemas: schemas,
      showActionButtonGroup: false,
      actionColOptions: {
        span: 24,
      },
    });
    const { createMessage, createConfirm } = useMessage();
    onMounted(() => {});
    let addListFunc = () => {};
    const [register, { closeModal }] = useModalInner((data) => {
      // console.log(data);
      resetFields()
      data && onDataReceive(data);
    });

    function onDataReceive(data) {
      modelRef.value = data;
    }

    const handleSubmit = async () => {
      // createConfirm({
      //   iconType: 'warning',
      //   title: () => h('span', '温馨提示'),
      //   content: '删除设备后需要重新入库<br/>确定删除吗?',
      //   onOk: async () => {
          const params = await validate()
          const res = await recording(params);
          console.log('validate',params,res)
          createMessage.success(t('common.optSuccess'));
          closeModal();
          emit('update');
      //   },
      // });
    };
    return {
      register,
      model: modelRef,
      registerForm,
      handleSubmit,
      addListFunc,
      resetFields,
      t,
    };
  },
});
</script>
<style lang="less" scoped>
.recoverPage {
  .form_item {
    line-height: 30px;
    .item_lable {
      display: inline-block;
      width: 100px;
      text-align: right;
    }
  }
}
</style>