BaseFormPanel.vue 3.32 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';
  import { get } from 'lodash-es';

  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);

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

        const res = FIELDS_BASE_INFO.map((item) => {
          console.log(
            '%c [  ]-62',
            'font-size:13px; background:pink; color:#bf2c9f;',
            getDisable(fields.value?.baseFields?.picUrl, props.id),
          );
          if (item.field === 'picUrl') {
            return {
              field: 'picUrl',
              component: 'FieldUpload',
              label: '图片',
              rules: [{ required: true }],
              colProps: {
                span: 24,
              },
              componentProps: {
                imgUrl: picUrl.value,
                disabled: getDisable(get(fields.value, 'picUrl'), props.id),
                onChange: (res) => {
                  if (res.file?.response?.data) {
                    picUrl.value = res.file?.response?.data?.picUrl;
                    smallPicUrl.value = res.file?.response?.data?.smallPicUrl;

                    setFieldsValue({ picUrl: picUrl.value });
                    clearValidate('picUrl');
                  }
                },
              },
            };
          }
          return {
            ...item,
            field: `${item.field}`,
            componentProps: {
              ...(item.component === 'Select' && { options: options[item.field] }),
              disabled: getDisable(get(fields.value, `${item.field}`), props.id),
            },
            colProps: {
              span: 24,
            },
          };
        });
        return res;
      });

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

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