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: 6,
            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)} ${
            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>