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] order-drawer-panel">
      <Tabs v-model:activeKey="activeKey">
        <TabPanel
          key="1"
          tab="基本信息"
          :forceRender="true"
          v-if="role === ROLE.ADMIN || role === ROLE.TRACKER"
        >
          <span className="text-red-600">{{ checkingMsg }}</span>
          <BaseFormPanel ref="baseFormPanelRef" :id="id" :businessUsers="businessUsers" />
        </TabPanel>
        <TabPanel
          key="2"
          tab="利润分析"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.BUSINESS)"
        >
          <span className="text-red-600">{{ checkingMsg }}</span>

          <ProfitFormPanel
            ref="profitFormPanelRef"
            :orderCount="orderCount"
            :id="id"
            :profitFormData="profitFormData"
          />
        </TabPanel>
        <TabPanel
          key="3"
          tab="项目报告书"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.BUSINESS)"
        >
          <span className="text-red-600">{{ checkingMsg }}</span>

          <ReportFormPanel ref="reportFormPanelRef" :id="id" :reportFormData="reportFormData" />
        </TabPanel>
        <TabPanel
          key="4"
          tab="跟单信息"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.TRACKER)"
        >
          <span className="text-red-600">{{ checkingMsg }}</span>

          <TrackFormPanel ref="trackFormPanelRef" :id="id" :trackFormData="trackFormData" />
        </TabPanel>
        <TabPanel
          key="5"
          tab="质检信息"
          :forceRender="true"
          v-if="!!id && (role === ROLE.ADMIN || role === ROLE.INSPECT)"
        >
          <span className="text-red-600">{{ checkingMsg }}</span>

          <InspectionFormPanel
            ref="inspectionFormPanelRef"
            :id="id"
            :inspectFormData="inspectFormData"
          />
        </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, onMounted } 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 { getList as getConfigList } from '/@/api/sys/config';

  import { Tabs } from 'ant-design-vue';
  import { find } from 'lodash-es';
  import { getUserList } from '/@/api/project/account';
  import message from '/@/views/form-design/utils/message';

  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 orderCount = ref(0);

      // 编辑从接口获取的value
      const baseFormData = ref();
      const profitFormData = ref();
      const reportFormData = ref();
      const trackFormData = ref();
      const inspectFormData = ref();

      const formRef = ref<FormActionType | null>(null);
      const id = ref('');
      const configList = ref([]);
      const businessUsers = ref([]);
      const checkingMsg = ref('');

      onMounted(async () => {
        // 获取包装费用和客户编码的关联关系
        const res = await getConfigList({
          page: 1,
          pageSize: 1000,
          // relationCode: 'packetPrice',
        });

        configList.value = res?.items || [];

        // 获取业务员
        const res1 = await getUserList({ page: 1, pageSize: 1000 });
        businessUsers.value = res1.items
          .filter((item) => item.roleCode === ROLE.BUSINESS)
          .map((item) => ({ value: item.userName, label: item.userName }));
      });

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

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

      const [register, { closeDrawer }] = useDrawerInner((data) => {
        activeKey.value =
          role.value === ROLE.INSPECT ? '5' : role.value === ROLE.BUSINESS ? '2' : '1';

        checkingMsg.value = '';
        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;
        profitFormData.value =
          data?.orderUpdateInfoVO?.profitAnalysisFields || data.profitAnalysisInfo;
        inspectFormData.value = data.inspectionStageInfo;
        reportFormData.value = data?.orderUpdateInfoVO?.reportFields || data.reportInfo;
        trackFormData.value = data.trackStageInfo;

        // 方式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) {
          orderCount.value = data.orderCount;

          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) {
              // 包装费用通过客户编码去查
              const packetPrice = find(configList.value, (item) => {
                return (
                  data.customerCode === item.settingValue && item.relationCode === 'packetPrice'
                );
              });

              const exchangeRate = find(configList.value, (item) => {
                return item.settingCode === 'exchangeRate';
              });
              // 利润分析
              profitFormPanelRef.value.fields = { ...data.lockFields?.profitAnalysisFields } || {};

              if (data?.orderUpdateInfoVO?.profitAnalysisFields) {
                const { customerPrice, productionDepartmentPrice, customerRmbPrice } =
                  data?.orderUpdateInfoVO?.profitAnalysisFields || {};

                //给个审核中提示
                checkingMsg.value = '当前订单利润分析审核中';

                // 编辑了但是还没审核，先将页面的值变化
                profitFormPanelRef?.value?.setFieldsValue({
                  ...toRaw(data?.orderUpdateInfoVO?.profitAnalysisFields),
                  customerPrice: Number(customerPrice || 0),
                  customerRmbPrice: Number(customerRmbPrice || 0),
                  productionDepartmentPrice: Number(productionDepartmentPrice || 0),
                  packetPrice: packetPrice?.relationValue || 0,
                  exchangeRate: exchangeRate?.settingValue,
                });
              } else {
                profitFormPanelRef?.value?.setFieldsValue({
                  ...toRaw(data.profitAnalysisInfo),
                  packetPrice: packetPrice?.relationValue || 0,
                  exchangeRate: exchangeRate?.settingValue,
                });
              }
            }

            if (reportFormPanelRef.value) {
              // 项目报告书
              reportFormPanelRef.value.fields = { ...data.lockFields?.reportFields } || {};
              if (data?.orderUpdateInfoVO?.reportFields) {
                const { ideaSourceRate, manualPreform1Rate, manualPreform2Rate } =
                  data?.orderUpdateInfoVO?.reportFields || {};
                data?.orderUpdateInfoVO?.reportFields;

                //给个审核中提示
                checkingMsg.value = '当前订单项目报告书审核中';

                // 编辑了但是还没审核，先将页面的值变化
                reportFormPanelRef?.value?.setFieldsValue({
                  ...toRaw(data?.orderUpdateInfoVO?.reportFields),
                  ideaSourceRate: Number(ideaSourceRate || 0),
                  manualPreform1Rate: Number(manualPreform1Rate || 0),
                  manualPreform2Rate: Number(manualPreform2Rate || 0),
                });
              } else {
                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.inspectionStageInfo),
              });
            }
          }, 100);
        } else {
          baseFormPanelRef.value.resetFields();
        }
      });

      const handleSubmit = async () => {
        try {
          if (id.value) {
            const forms = { orderId: id.value } as any;
            if (activeKey.value === '1') {
              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', {});
            } else {
              // 利润分析
              if (activeKey.value === '2') {
                await profitFormPanelRef?.value?.validate();
                forms.profitAnalysisInfo = profitFormPanelRef?.value?.getFieldsValue() || {};
                delete forms.profitAnalysisInfo.profitRate;
                forms.profitAnalysisInfo.customerRmbPrice =
                  forms.profitAnalysisInfo.customerRmbPrice.toFixed(2); // 客户单价¥
                forms.profitAnalysisInfo.customerRmbTotalPrice = (
                  forms.profitAnalysisInfo.customerRmbPrice * orderCount.value
                ).toFixed(2); // 客户总价¥
                forms.profitAnalysisInfo.customerPrice =
                  forms.profitAnalysisInfo.customerPrice.toFixed(2); // 客户单价$
                // 方式如果没有变化，默认方式1
                if (!forms.profitAnalysisInfo.profitType) {
                  forms.profitAnalysisInfo.profitType = '0';
                }
              } else if (activeKey.value === '3') {
                // 项目报告书
                await reportFormPanelRef?.value?.validate();
                // 比重相加等于1
                const values = reportFormPanelRef?.value?.getFieldsValue() || {};
                if (
                  values.ideaSourceRate + values.manualPreform1Rate + values.manualPreform2Rate !==
                  1
                ) {
                  return message.error('占比相加不等于1');
                }

                forms.reportInfo = values;
              } 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 {
            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,
        profitFormData,
        inspectFormData,
        reportFormData,
        trackFormData,
        register,
        handleSubmit,
        businessUsers,
        checkingMsg,
        orderCount,
      };
    },
  });
</script>

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

  .order-drawer-panel .ant-picker {
    width: 100% !important;
  }
</style>