aftermarket-mp/src/views/work/reviewModal.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 { testPassOrFail } 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: 'resultStatus',
        component: 'RadioGroup',
        required: true,
        label: '测试结果',
        defaultValue:0,
        componentProps: {
          options:[
            { label: '通过', value: 0 },
            { label: '不通过', value: 1 },
          ],
        },
      },
      {
        field: 'resultInfo',
        component: 'InputTextArea',
        label: '测试描述',
        componentProps: {
          maxLength: 500,
          rows: 3,
        },
        colProps: {
          span: 18,
        },
      },
      {
        field: 'resultImg',
        component: 'Upload',
        label: '相关图片',
        itemProps: {
          validateTrigger: 'blur',
        },
        componentProps: {
          api: uploadApi,
          // fileFlow:true,
          maxNumber: 5,
          maxSize: 5,
          accept: ['jpeg', 'jpg', 'png'],
        },
        colProps: {
          span: 12,
        },
      },
    ];
    const [registerForm, { validate, resetFields, setFieldsValue }] = 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,
        deviceType:t(`routes.scene.tableType.${data.cameraType || 0}`) +' '+ data.cameraSnCode
      });
    }

    const handleSubmit = async () => {
      createConfirm({
        iconType: 'warning',
        title: () => h('span', '温馨提示'),
        content: '确定要提交测试结果吗？',
        onOk: async () => {
          const params = await validate()
          const res = await testPassOrFail(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>