canrd-outside / order-erp-front · Files

<template>

  <div className="pb-2">
    <BasicForm @register="registerForm" />
  </div>
  <div
    v-if="isInnerNoRepeat"
    class="absolute bottom-0 left-0 bg-gray-200 px-2 py-1 w-full text-orange-500"
    >{{ isInnerNoRepeat }}</div
  >

</template>
<script lang="ts">

  import { computed, defineComponent, onMounted, ref, watch } from 'vue';

  import { BasicForm, useForm } from '/@/components/Form/index';
  import { FIELDS_BASE_INFO } from '../tableData';

  import { getBaseDisable } from '/@/utils/project';

  import { useOrderStoreWithOut } from '/@/store/modules/order';

  import { ROLE } from '../type.d';
  import { useUserStoreWithOut } from '/@/store/modules/user';

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

  import { get } from 'lodash-es';

  import { orderFieldCheck } from '/@/api/project/order';

  export default defineComponent({
    components: { BasicForm },

    props: {
      detailData: {
        type: Object,
      },
      onGoCheckDetail: {
        type: Function,
      },
      id: {
        type: String,
      },

      isCopy: {
        type: Boolean,
      },

      businessUsers: {
        type: Array,
      },

    },
    emits: ['success'],
    setup(props) {

      // 子组建获取isCopy，并且自己维护isCopy的状态
      let isCopy = ref(props.isCopy);
      const isInnerNoRepeat = ref('');

      watch(
        () => props.isCopy,
        (value) => {
          isCopy.value = value;
        },
      );

      let fields = ref({});
      const picUrl = ref('');
      const smallPicUrl = ref('');

      const userStore = useUserStoreWithOut();
      const role = computed(() => {
        return userStore.getUserInfo?.roleSmallVO?.code;
      });

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

        // businessPerson,

      } = useOrderInfo(orderStore);

      var schemas = computed(() => {

        const options = {
          customerCode,
          projectNo,
          productionDepartment,
          innerNo,
          poColor,
          cnColor,
          productStyle,
          outboundType,
          packetType,

          businessPerson: props.businessUsers,

        };

        //   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.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' && { showSearch: true }),
        //         ...(item.component === 'Select' && { options: options[item.field] }),
        //         disabled: getBaseDisable(item.field, get(fields.value, `${item.field}`), props.id),
        //         onChange: async (val) => {
        //           if (item.field === 'customerCode' && !isCopy.value) {
        //             if (!props.id) {
        //               setFieldsValue({ projectNo: val + '-', innerNo: val + '/' });
        //             }
        //           }
        //           isCopy.value = false;

        //           if (item.field === 'innerNo') {
        //             val = typeof val === 'string' ? val : val.target.value;
        //             const res = await orderFieldCheck({
        //               innerNo: [val],
        //             });
        //             if (res) {
        //               isInnerNoRepeat.value = `内部编码 ${val} 已存在，保存前请确认是否需要修改`;
        //             } else {
        //               isInnerNoRepeat.value = '';
        //             }
        //           }
        //         },
        //       },
        //       colProps: {
        //         span: 24,
        //       },
        //     };
        //   });
        //   return res;
        // });
        //biaoji

        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.value,

                disabled: getBaseDisable(
                  item.field,
                  get(fields.value, `${item.field}`),
                  props.id,
                  role.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');

                  }
                },
              },
            };
          }

          if (item.field === 'productionComment') {
            return {
              field: 'productionComment',
              component: 'InputTextArea',
              rules: [{ required: true }],
              componentProps: {
                rows: 10,
                disabled: getBaseDisable(
                  item.field,
                  get(fields.value, `${item.field}`),
                  props.id,
                  role.value,
                ),
              },
              labelWidth: 600,
              label: '产品意见',
            };
          }

          // if (item.field === 'returnOrder') {
          //   return {
          //     field: 'returnOrder',
          //     component: 'Select',
          //     rules: [{ required: true }],
          //     componentProps: {
          //       options: [
          //         {
          //           label: '是',
          //           value: '1',
          //         },
          //         {
          //           label: '否',
          //           value: '0',
          //         },
          //       ],
          //       disabled: getBaseDisable(
          //         item.field,
          //         get(fields.value, `${item.field}`),
          //         props.id,
          //         role.value,
          //       ),
          //     },
          //     labelWidth: 600,
          //     // default: '请选择',
          //     label: '是否返单	',
          //   };
          // }

          // const businessNotDisabledFields = ['customerCode', 'projectNo', 'innerNo'];
          // const trackerNotDisabledFields = [
          //   'customerPo',
          //   'customerStyle',
          //   'modeleLo',
          //   'collection',
          //   'poColor',
          //   'cnColor',
          //   'picUrl',
          //   'productStyle',
          //   'orderComposition',
          //   'productionDepartmentConsignTime',
          //   'orderHodTime',
          //   'outboundType',
          //   'packetType',
          //   'productionComment',
          // ];
          // const isFieldNotDisabledForBusiness = businessNotDisabledFields.includes(item.field);
          // const isFieldNotDisabledForTracker = trackerNotDisabledFields.includes(item.field);

          return {
            ...item,
            field: `${item.field}`,
            componentProps: {

              ...(item.component === 'Select' && { showSearch: true }),

              ...(item.component === 'Select' && {
                options: options[item.field] || item?.componentProps?.options,
              }),

              // disabled:
              //   role.value === ROLE.BUSINESS
              //     ? !isFieldNotDisabledForBusiness
              //     : role.value === ROLE.TRACKER
              //     ? !isFieldNotDisabledForTracker
              //     : getBaseDisable(item.field, get(fields.value, `${item.field}`), props.id),
              disabled: getBaseDisable(
                item.field,
                get(fields.value, `${item.field}`),
                props.id,
                role.value,
              ),

              onChange: async (val) => {
                if (item.field === 'customerCode' && !isCopy.value) {

                  if (!props.id) {

                    setFieldsValue({ projectNo: val + '-', innerNo: val + '/' });

                  }
                }

                isCopy.value = false;

                if (item.field === 'innerNo') {
                  val = typeof val === 'string' ? val : val.target.value;
                  const res = await orderFieldCheck({
                    innerNo: [val],
                  });
                  if (res) {
                    isInnerNoRepeat.value = `内部编码 ${val} 已存在，保存前请确认是否需要修改`;
                  } else {
                    isInnerNoRepeat.value = '';
                  }
                }

              },

            },
            colProps: {
              span: 24,
            },
          };
        });
        return res;
      });

      //biaoji

      var [registerForm, { setFieldsValue, getFieldsValue, resetFields, validate, clearValidate }] =
        useForm({
          labelWidth: 120,
          schemas,

          layout: 'vertical',

          showActionButtonGroup: false,
          actionColOptions: {
            span: 24,
          },
        });

      return {
        fields,
        registerForm,
        getFieldsValue,
        setFieldsValue,
        resetFields,

        validate,

        picUrl,
        smallPicUrl,

        isInnerNoRepeat,

        role,

      };
    },
  });
</script>