BaseFormPanel.vue 2.93 KB
<template>
  <BasicForm @register="registerForm" />
</template>
<script lang="ts">
  import { computed, defineComponent, ref } from 'vue';
  import { BasicForm, useForm } from '/@/components/Form/index';
  import { FIELDS_BASE_INFO } from '../tableData';
  import { getDisable } from '/@/utils/project';
  import { useOrderStoreWithOut } from '/@/store/modules/order';

  import { useOrderInfo } from '/@/hooks/component/order';

  export default defineComponent({
    components: { BasicForm },

    props: {
      detailData: {
        type: Object,
      },
      onGoCheckDetail: {
        type: Function,
      },
      id: {
        type: String,
      },
    },
    emits: ['success'],
    setup(props) {
      let fields = ref({});
      const picUrl = ref('');
      const smallPicUrl = ref('');

      const orderStore = useOrderStoreWithOut();
      const {
        customerCode,
        projectNo,
        productionDepartment,
        innerNo,
        poColor,
        cnColor,
        productStyle,
        outboundType,
        packetType,
      } = useOrderInfo(orderStore);

      const schemas = computed(() => {
        const options = {
          customerCode,
          projectNo,
          productionDepartment,
          innerNo,
          poColor,
          cnColor,
          productStyle,
          outboundType,
          packetType,
        };

        const res = FIELDS_BASE_INFO.map((item) => {
          if (item.field === 'picUrl') {
            return {
              field: 'picUrl',
              component: 'FieldUpload',
              label: '图片',
              rules: [{ required: true }],
              colProps: {
                span: 24,
              },
              componentProps: {
                imgUrl: picUrl,
                disabled: getDisable(fields.value?.baseFields?.picUrl),
                onChange: (res) => {
                  if (res.file?.response?.data) {
                    picUrl.value = res.file?.response?.data?.picUrl;
                    smallPicUrl.value = res.file?.response?.data?.smallPicUrl;
                  }
                },
              },
            };
          }
          return {
            ...item,
            field: `${item.field}`,
            componentProps: {
              ...(item.component === 'Select' && { options: options[item.field] }),
              disabled: getDisable(fields.value[item.field], props.id),
            },
            colProps: {
              span: 24,
            },
          };
        });
        return res;
      });

      const [registerForm, { setFieldsValue, getFieldsValue, resetFields }] = useForm({
        labelWidth: 120,
        schemas,
        showActionButtonGroup: false,
        actionColOptions: {
          span: 24,
        },
      });

      return {
        fields,
        schemas,
        registerForm,
        getFieldsValue,
        setFieldsValue,
        resetFields,
        picUrl,
        smallPicUrl,
      };
    },
  });
</script>