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

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="接单"
    @cancel="resetFields"
    @ok="handleSubmit"
    :min-height="0"
  >
    <BasicForm @register="registerForm" >
        <template #text="{ model, field }">
          {{ model[field]  }}
        </template>
    </BasicForm>
  </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, orderReceiving } 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: 'repairId',
        component: 'Input',
        slot: 'text',
        label: '维修单号',
        componentProps: {
          maxLength: 50,
        },        colProps: {
          span: 18,
        },  
      },
      {
        field: 'deviceType',
        component: 'Input',
        slot: 'text',
        label: '设备信息',
      },
      {
        field: 'warrantyExpirationDateText',
        component: 'Input',
        slot: 'text',
        label: '保修届满日期',
      },
      {
        field: 'cameraFaultInfo',
        component: 'InputTextArea',
        label: '机器外观',
        required: true,
        componentProps: {
          maxLength: 500,
          rows: 3,
          placeholder: '请描述检测后的具体故障情况。',
        },
        colProps: {
          span: 24,
        },
      },
      {
        field: 'imageUrl',
        component: 'Upload',
        label: '相关图片',
        rules: [{ required: true, message: t('common.uploadMessge') }],
        itemProps: {
          validateTrigger: 'blur',
        },
        componentProps: {
          api: uploadApi,
          // fileFlow:true,
          maxNumber: 6,
          maxSize: 5,
          accept: ['jpeg', 'jpg', 'png'],
        },
        colProps: {
          span: 12,
        },
      // },{
      //   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);
      data && onDataReceive(data);
    });

    function onDataReceive(data) {
      modelRef.value = data;
      resetFields();
      setFieldsValue({
        ...data,
        warrantyExpirationDateText: `${data.warrantyDate} (${data.warrantyType==0?'保内维修':data.warrantyType==1?'保内转保外':'保外维修'})`,
        deviceType:t(`routes.scene.tableType.${data.cameraType}`) +' '+ data.cameraSnCode
      });
    }

    const handleSubmit = async () => {  
      // createConfirm({
      //   iconType: 'warning',
      //   title: () => h('span', '温馨提示'),
      //   content: '删除设备后需要重新入库<br/>确定删除吗?',
      //   onOk: async () => {
          const params = await validate()
          const res = await orderReceiving(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>