canrd-outside / order-erp-front · Files

<template>
  <BasicDrawer
    v-bind="$attrs"
    showFooter
    @register="register"
    @ok="handleSubmit"
    title=""
    :destroyOnClose="true"
    width="28%"
    ref="formRef"
    :isDetail="true"
    :showDetailBack="false"
    okText="保存"
    :mask="false"
    class="z-20"
  >
    <div className="mt-[-16px]">
      <Tabs v-model:activeKey="activeKey">
        <TabPanel key="1" tab="基本信息" :forceRender="true" v-if="role !== ROLE.INSPECT">
          <BaseFormPanel ref="baseFormPanelRef" :id="id" />
        </TabPanel>
        <TabPanel
          key="2"
          tab="利润分析"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.BUSINESS)"
        >
          <ProfitFormPanel ref="profitFormPanelRef" :id="id" />
        </TabPanel>
        <TabPanel
          key="3"
          tab="项目报告书"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.BUSINESS)"
        >
          <ReportFormPanel ref="reportFormPanelRef" :id="id" />
        </TabPanel>
        <TabPanel
          key="4"
          tab="跟单信息"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.TRACKER)"
        >
          <TrackFormPanel ref="trackFormPanelRef" :id="id" />
        </TabPanel>
        <TabPanel
          key="5"
          tab="质检信息"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.INSPECT)"
        >
          <InspectionFormPanel ref="inspectionFormPanelRef" :id="id" />
        </TabPanel>
      </Tabs>
    </div>
    <!-- <template #titleToolbar> <a-button type="primary"> 申请编辑权限 </a-button></template> -->

    <!-- <template #appendFooter>
      <a-button type="primary" @click="onGoCheckDetail"> 申请权限</a-button>
    </template> -->
  </BasicDrawer>
</template>
<script lang="ts">
  import { computed, defineComponent, reactive, ref, toRaw, watch, toRefs } from 'vue';
  import { FormActionType, FormSchema, useForm } from '/@/components/Form/index';
  import { orderCreate, orderUpdate, uploadImg } from '/@/api/project/order';
  import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
  import { dateUtil } from '/@/utils/dateUtil';
  import ProfitFormPanel from './ProfitFormPanel.vue';
  import ReportFormPanel from './ReportFormPanel.vue';
  import TrackFormPanel from './TrackFormPanel.vue';
  import InspectionFormPanel from './InspectionFormPanel.vue';
  import BaseFormPanel from './BaseFormPanel.vue';
  import { useUserStoreWithOut } from '/@/store/modules/user';
  import { ROLE } from '../type.d';

  import { Tabs } from 'ant-design-vue';

  const userStore = useUserStoreWithOut();

  const TabPanel = Tabs.TabPane;

  export default defineComponent({
    components: {
      BasicDrawer,
      BaseFormPanel,
      Tabs,
      TabPanel,
      ProfitFormPanel,
      ReportFormPanel,
      TrackFormPanel,
      InspectionFormPanel,
    },

    props: {
      detailData: {
        type: Object,
      },
      onGoCheckDetail: {
        type: Function,
      },
    },
    emits: ['success'],
    setup(_, { emit }) {
      const activeKey = ref('1');
      const baseFormPanelRef = ref();
      const profitFormPanelRef = ref();
      const reportFormPanelRef = ref();
      const trackFormPanelRef = ref();
      const inspectionFormPanelRef = ref();

      const formRef = ref<FormActionType | null>(null);
      const id = ref('');

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

      const picUrl = ref('');
      let fields = reactive({ baseFields: {} });

      const [register, { closeDrawer }] = useDrawerInner((data) => {
        if (!data.id) {
          id.value = '';
          picUrl.value = '';
          // 新建
          baseFormPanelRef?.value?.resetFields();
          profitFormPanelRef?.value?.resetFields();
          reportFormPanelRef?.value?.resetFields();
          trackFormPanelRef?.value?.resetFields();
          inspectionFormPanelRef?.value?.resetFields();

          return;
        }
        id.value = data.id;

        // 方式1
        picUrl.value = data.picUrl;
        data.orderHodTime = data.orderHodTime ? dateUtil(data.orderHodTime) : null;
        data.productionDepartmentConsignTime = data.productionDepartmentConsignTime
          ? dateUtil(data.productionDepartmentConsignTime)
          : null;

        fields.baseFields = {
          ...fields.baseFields,
          ...data.lockFields.baseFields,
        };

        if (id.value) {
          setTimeout(() => {
            // 基本信息
            if (baseFormPanelRef.value) {
              baseFormPanelRef.value.fields = { ...data.lockFields?.baseFields } || {};
              baseFormPanelRef.value.setFieldsValue({
                ...toRaw(data),
              });
              baseFormPanelRef.value.picUrl = data.picUrl;
              baseFormPanelRef.value.smallPicUrl = data.smallPicUrl;
            }

            if (profitFormPanelRef.value) {
              // 利润分析
              profitFormPanelRef.value.fields = { ...data.lockFields?.profitAnalysisFields } || {};
              profitFormPanelRef?.value?.setFieldsValue({
                ...toRaw(data.profitAnalysisInfo),
              });
            }

            if (reportFormPanelRef.value) {
              // 项目报告书
              reportFormPanelRef.value.fields = { ...data.lockFields?.reportFields } || {};
              reportFormPanelRef?.value?.setFieldsValue({
                ...toRaw(data.reportInfo),
              });
            }
            if (trackFormPanelRef.value) {
              // 跟单信息
              trackFormPanelRef.value.fields = { ...data.lockFields?.trackStageFields } || {};
              trackFormPanelRef?.value?.setFieldsValue({
                ...toRaw(data.trackStageInfo),
              });
            }

            if (inspectionFormPanelRef.value) {
              // 质检信息
              inspectionFormPanelRef.value.fields =
                { ...data.lockFields?.inspectionStageFields } || {};
              inspectionFormPanelRef?.value?.setFieldsValue({
                ...toRaw(data.trackStageInfo),
              });
            }
          }, 100);
        } else {
          baseFormPanelRef.value.resetFields();
        }
      });

      const handleSubmit = async () => {
        if (id.value) {
          const forms = { orderId: id.value } as any;
          if (activeKey.value === '1') {
            try {
              await baseFormPanelRef?.value?.validate();

              forms.baseInfo = baseFormPanelRef?.value?.getFieldsValue() || {};
              forms.baseInfo = {
                ...forms.baseInfo,
                picUrl: baseFormPanelRef?.value?.picUrl || '',
                smallPicUrl: baseFormPanelRef?.value?.smallPicUrl || '',
              };
              await orderUpdate(forms);
              closeDrawer();
              emit('success', {});
            } catch (error) {
              console.log(error);
            }
          } else {
            if (activeKey.value === '2') {
              forms.profitAnalysisInfo = profitFormPanelRef?.value?.getFieldsValue() || {};
            } else if (activeKey.value === '3') {
              forms.reportInfo = reportFormPanelRef?.value?.getFieldsValue() || {};
            } else if (activeKey.value === '4') {
              forms.trackStageInfo = trackFormPanelRef?.value?.getFieldsValue() || {};
            } else if (activeKey.value === '5') {
              forms.inspectionStageInfo = inspectionFormPanelRef?.value?.getFieldsValue() || {};
            }
            await orderUpdate(forms);
            closeDrawer();
            emit('success', {});
          }
        } else {
          try {
            await baseFormPanelRef?.value?.validate();

            // 新建只有基本信息
            const values = baseFormPanelRef?.value?.getFieldsValue() || {};

            const forms = {
              baseInfo: {
                ...values,
                picUrl: baseFormPanelRef?.value?.picUrl || '',
                smallPicUrl: baseFormPanelRef?.value?.smallPicUrl || '',
              },
            };
            await orderCreate(forms);
            closeDrawer();
            emit('success', {});
          } catch (error) {
            console.log(error);
          }
        }
      };
      return {
        id,
        profitFormPanelRef,
        reportFormPanelRef,
        trackFormPanelRef,
        baseFormPanelRef,
        inspectionFormPanelRef,
        activeKey,
        formRef,
        ROLE,
        role,
        register,
        handleSubmit,
      };
    },
  });
</script>

<style scoped>
  .ant-drawer {
    position: fixed;
    z-index: 9999;
  }
</style>