ProfitAnalysis.vue 4.87 KB
<template>
  <BasicModal
    v-bind="$attrs"
    destroyOnClose
    @register="register"
    title="利润分析表"
    width="600px"
    @visible-change="handleShow"
    :footer="null"
  >
    <div className="mb-2">
      公式:
      <Select
        className="w-[240px]"
        :options="[
          { label: '公式1:1 -(LOCAL总金额 / 汇率 + 包装总金额)/ 客户总金额', value: '0' },
          { label: '公式2:1 -(LOCAL总金额 / 汇率 / (客户总金额-包装费用总金额)', value: '1' },
        ]"
        v-model:value="profitType"
        placeholder="请选择"
        defaultValue="0"
      />
    </div>
    <Space>
      <span>
        汇率:
        {{ activeRate }}
      </span>
      <a-button type="primary" @click="handleCalc" className="ml-4">计算</a-button>
    </Space>
    <!-- <Button @click="handleCalc">计算</Button> -->
    <!-- :helpMessage="['提示1', '提示2']" -->
    <!-- <template #insertFooter>
      <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button>
    </template> -->
    <!-- <template v-if="loading">
      <div class="empty-tips">加载中,稍等3秒……</div>
    </template> -->
    <Description
      class="mt-4"
      layout="vertical"
      :collapseOptions="{ canExpand: true, helpMessage: 'help me' }"
      :column="2"
      :data="info"
      :schema="schema"
    />
  </BasicModal>
</template>
<script lang="ts">
  import { computed, defineComponent, onMounted, ref, toRaw, watch } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { Description, DescItem } from '/@/components/Description/index';
  import { orderAnalysis } from '/@/api/project/order';
  import { Select, Space } from 'ant-design-vue';
  import { useOrderStoreWithOut } from '/@/store/modules/order';
  import { getList } from '/@/api/sys/config';
  import { useOrderInfo } from '/@/hooks/component/order';
  import { useUserStoreWithOut } from '/@/store/modules/user';

  export default defineComponent({
    components: { BasicModal, Description, Select, Space },
    setup() {
      const orderStore = useOrderStoreWithOut();
      const { exchangeRate } = useOrderInfo(orderStore);
      const orderIds = ref([]);
      const loading = ref(true);
      const lines = ref(10);
      const activeRate = ref();
      const profitType = ref('0');
      const info = ref({});
      const [register, { setModalProps, redoModalHeight }] = useModalInner(async (data) => {
        orderIds.value = toRaw(data.data);
        info.value = {};
      });

      onMounted(async () => {
        const res = await getList({ settingCode: 'exchangeRate', page: 1, pageSize: 10 });
        activeRate.value = res?.items?.[0]?.settingValue;
      });

      const schema: DescItem[] = [
        {
          field: 'customerTotalPrice',
          label: '客户总金额',
          render: (val) => '$ ' + (val || 0).toFixed(2),
        },
        {
          field: 'productionDepartmentTotalPrice',
          label: '供应商总价',
          render: (val) => '¥ ' + (val || 0).toFixed(2),
        },
        {
          field: 'packetTotalPrice',
          label: '包装费用',
          show: isTracker,
          render: (val) => '$' + (val || 0).toFixed(2),
        },
        {
          field: 'profitRate',
          label: '总利润率',
          show: isTracker,
          render: (val) => (Number(val || 0) * 100).toFixed(2) + '%',
        },
      ];

      watch(
        () => lines.value,
        () => {
          redoModalHeight();
        },
      );
      const userStore = useUserStoreWithOut();
      const user = userStore.getUserInfo;
      const role = computed(() => {
        return user?.roleSmallVO?.code;
      });

      /**
       * 检查当前角色是否是跟单员
       */
      function isTracker() {
        if (role.value === 'tracker_user') {
          return false;
        }
        return true;
      }

      function handleShow(visible: boolean) {
        if (visible) {
          loading.value = true;
          // setModalProps({ loading: true, confirmLoading: true });
          setModalProps({ loading: false, confirmLoading: false });
        }
      }

      function setLines() {
        lines.value = Math.round(Math.random() * 20 + 10);
      }

      async function handleCalc() {
        const res = await orderAnalysis({
          orderIds: orderIds.value,
          profitType: profitType.value,
          exchangeRate: activeRate.value,
        });
        info.value = {
          ...(res || {}),
        };
      }
      return {
        register,
        loading,
        handleShow,
        lines,
        setLines,
        info,
        schema,
        exchangeRate,
        handleCalc,
        activeRate,
        profitType,
      };
    },
  });
</script>
<style scoped>
  .empty-tips {
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
</style>