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

<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    title="检测登记"
    width="700px"
    @cancel="clearInfo"
    :confirmLoading="loading"
    @ok="handleSubmit"
  >
    <div class="pt-2px pr-3px myRadioGroup">
      <BasicForm @register="registerForm">
        <template #text="{ model, field }">
          {{ model[field] }}
        </template>
        <template #add>
          <a-button type="primary" @click="add">添加备件</a-button>
        </template>
        <template #del="{ field }">
          <Button @click="del(field)">删除</Button>
        </template>
      </BasicForm>
      <div class="tips" style="padding: 0 100px">
        <p>说明</p>
        <p>1、保内维修，直接进入待备料或维修中</p>
        <p>2、保外维修，由售后人员进行报价确认后再备料维修</p>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { defineComponent, h, onMounted, reactive, ref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicForm, FormSchema, useForm } from '/@/components/Form/index';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { partAllList, faultAllList, checkRegister, checkRegisterInfo } from '/@/api/spares';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { uploadApi } from '/@/api/product/index';
  import { treeItem, faultTree } from '/@/api/equity/index';

  const { t } = useI18n();
  export default defineComponent({
    components: { BasicModal, BasicForm },
    props: {
      userData: { type: Object },
    },
    emits: ['update', 'register'],
    setup(props, { emit }) {
      const n = ref(1);
      const fileFlow = reactive({
        file: null,
        cameraType: 0,
        type: 2, //2-普通发票，3-专用发票
        faultList: [],
      });
      const loading = ref(false);
      const { createMessage, createConfirm } = useMessage();
      let schemas: FormSchema[] = [
        {
          field: 'repairId',
          component: 'Input',
          label: '维修单号',
          slot: 'text',
          colProps: {
            span: 24,
          },
        },
        {
          field: 'deviceInfo',
          component: 'Input',
          label: '设备信息',
          slot: 'text',
          colProps: {
            span: 18,
          },
        },
        {
          field: 'warrantyExpirationDateText',
          component: 'Input',
          slot: 'text',
          label: '保修届满日期',
        },
        // {
        //   field: 'faultIds',
        //   component: 'ApiCascader',
        //   required: true,
        //   label: '故障类型',
        //   componentProps: ({ formModel }) => {
        //     return {
        //       placeholder: '请选择维修物品',
        //       api: async function () {
        //         return await faultTree('V2');
        //       },
        //       labelField: 'faultMsg',
        //       valueField: 'faultId',
        //       immediate: true,
        //       multiple: true,
        //       isLeaf: (val) => {
        //         return !val.children;
        //       },
        //     };
        //   },
        //   colProps: {
        //     span: 12,
        //   },
        // },
        // {
        //   field: 'faultIds',
        //   component: 'ApiCascader',
        //   label: '故障类型',
        //   required: true,
        //   componentProps: ({ formModel }) => {
        //     return {
        //       placeholder: '请选择故障类型',
        //       api: async function () {
        //         // return await faultTree('V2');
        //         return await treeItem('repair-item');
        //       },
        //       // labelField: 'faultMsg',
        //       // valueField: 'faultId',
        //       // fieldNames: {
        //       //   label: 'faultMsg',
        //       //   value: 'faultId',
        //       //   children: 'children',
        //       // },
        //       // immediate: true,
        //       // multiple: true,
        //       labelField: 'name',
        //       valueField: 'id',
        //       immediate: true,
        //       multiple: true,
        //       isLeaf: (val) => {
        //         return !val.children;
        //       },
        //     };
        //   },
        //   colProps: {
        //     span: 18,
        //   },
        // },
        {
          field: 'defineDamage',
          component: 'RadioGroup',
          label: '定损结论',
          helpMessage: '保修期内人为损坏将转为保修外',
          defaultValue: 0,
          componentProps: {
            options: [
              {
                label: '非人为损坏',
                value: 0,
              },
              {
                label: '人为损坏',
                value: 1,
              },
            ],
          },
          colProps: {
            span: 22,
          },
        },
        {
          field: 'checkResult',
          component: 'InputTextArea',
          label: '检测结果',
          required: true,
          componentProps: {
            maxLength: 500,
            rows: 3,
            placeholder: '请描述检测后的具体故障情况。',
          },
          colProps: {
            span: 18,
          },
        },
        {
          field: 'checkImg',
          component: 'Upload',
          label: '相关图片',
          rules: [{ required: false, message: t('common.uploadMessge') }],
          itemProps: {
            validateTrigger: 'blur',
          },
          componentProps: {
            api: uploadApi,
            maxNumber: 6,
            maxSize: 1000,
            accept: ['jpeg', 'jpg', 'png'],
          },

          colProps: {
            span: 12,
          },
        },
        {
          field: '0',
          component: 'Input',
          label: '所需备件',
          colProps: {
            span: 18,
          },
          slot: 'add',
        },
      ];

      const [
        registerForm,
        {
          validate,
          resetFields,
          setFieldsValue,
          removeSchemaByFiled,
          appendSchemaByField,
          updateSchema,
        },
      ] = useForm({
        labelWidth: 100,
        schemas: schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });
      onMounted(() => {});
      // getFaultList();
      let addListFunc = () => {};
      const [register, { closeModal }] = useModalInner((data) => {
        data && onDataReceive(data);
      });
      async function getFaultList() {
        const res = await faultAllList({});
        fileFlow.faultList = res.map((item) => {
          return {
            ...item,
            label: item.faultMsg,
            value: item.faultId,
          };
        });
      }

      async function onDataReceive(data) {
        resetFields();
        let backfill = {
          faultIds: [],
          defineDamage: 0,
          checkResult: '',
          checkImg: [],
        };
        fileFlow.type = data.type;
        fileFlow.cameraType = data.cameraType;
        if (data.status == 20) {
          let res = await checkRegisterInfo({ repairId: data.repairId });
          console.log('repairId', res);
          let index = n.value;
          res.partList.map((ele, b) => {
            backfill[`partId${index + b}`] = ele.partId;
            backfill[`partCount${index + b}`] = ele.partCount;
            add();
          });
          backfill.faultIds = res.faultIds; //.map(ele => [ele]);
          backfill.defineDamage = res.defineDamage;
          backfill.checkResult = res.checkResult;
          backfill.checkImg = res.checkImg;
        }
        updateSchema([
          {
            field: 'faultIds',
            componentProps: {
              api: async function () {
                return await faultTree(data.faultVersion || 'V2');
              },
              labelField: 'faultMsg',
              valueField: 'faultId',
              immediate: true,
              multiple: true,
              isLeaf: (val) => {
                return !val.children;
              },
            },
          },
          {
            field: 'damage',
            ifShow: data.warrantyType == 0,
          },
        ]);
        setFieldsValue({
          ...data,
          ...backfill,
          warrantyExpirationDateText: `${data.warrantyDate || '无'}( ${t(
            'routes.spares.warrantyType.' + data.warrantyType,
          )})`,
          deviceInfo: `${t('routes.scene.tableType.' + data.cameraType)} ${
            data.cameraSnCode || '无'
          }`,
        });
      }
      function del(field) {
        removeSchemaByFiled([`partId${field}`, `partCount${field}`, `${field}`]);
        // n.value--;
      }
      function add() {
        let list = addSchemas(n.value);
        list.map((ele) => {
          appendSchemaByField(ele, '');
        });
        n.value++;
      }
      function addSchemas(number) {
        let parentList: FormSchema[] = [
          {
            field: 'partId' + number,
            label: '备件',
            component: 'ApiSelect',
            colProps: {
              span: 12,
            },
            required: true,
            componentProps: {
              maxLength: 15,
              style: 'width: 220px',
              api: partAllList,
              labelField: 'partName',
              valueField: 'partId',
              params: {
                cameraType: fileFlow.cameraType,
              },
              showSearch: true,
              optionFilterProp: 'label',
            },
          },
          {
            field: 'partCount' + number,
            label: '数量',
            component: 'InputNumber',
            required: true,
            defaultValue: 1,
            labelWidth: 50,
            componentProps: {
              max: 999,
              min: 1,
            },
            colProps: {
              span: 6,
            },
          },
          {
            field: number.toString(),
            component: 'Input',
            label: '',
            labelWidth: 0,
            colProps: {
              span: 6,
            },
            slot: 'del',
          },
        ];
        return parentList;
      }
      function clearInfo(val) {
        if (!val) {
          resetFields();
        }
        let clearFiled = [];
        for (let index = 1; index < n.value; index++) {
          clearFiled.push(`partId${index}`, `partCount${index}`, `${index}`);
        }
        removeSchemaByFiled(clearFiled);
        n.value = 1;
      }
      const handleSubmit = async () => {
        loading.value = true;
        try {
          // createConfirm({
          //   iconType: 'warning',
          //   title: () => h('span', '温馨提示'),
          //   content: '确定要提交检测报告吗?',
          //   onOk: async () => {
          const params = await validate();
          let partList = [];
          for (let s = 1; s <= n.value; s++) {
            console.log('params', params, partList);
            if (params[`partId${s}`]) {
              partList.push({
                partId: params[`partId${s}`],
                partCount: params[`partCount${s}`],
                type: 0,
              });
            }
          }
          console.log('params', params, partList);
          await checkRegister({
            ...params,
            faultIds: (params.faultIds && params.faultIds.map((ele) => ele[ele.length - 1])) || [],
            partList,
          });
          clearInfo(false);
          loading.value = false;
          createMessage.success(t('common.optSuccess'));
          closeModal();
          emit('update');
        } catch (error) {
          loading.value = false;
          console.log('not passing', error);
        }
      };
      return {
        register,
        registerForm,
        fileFlow,
        handleSubmit,
        addListFunc,
        resetFields,
        loading,
        clearInfo,
        t,
        del,
        add,
      };
    },
  });
</script>
<style lang="less">
  .myRadioGroup {
    .ant-checkbox-group {
      overflow-y: auto;
      height: 90px;
    }
  }
</style>