canrd-outside / order-erp-front · Files

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

      const [register, { setModalProps, redoModalHeight }] = useModalInner(async (data) => {

        orderIds.value = toRaw(data.data);

        searchData.value = data.searchData;

        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: '包装费用',

          render: (val) => '$' + (val || 0).toFixed(2),

        },
        {

          field: 'profitRate',

          label: '总利润率',

          render: (val) => (Number(val || 0) * 100).toFixed(2) + '%',

        },

        {
          field: 'orderTotalNum',

          label: '订单商品数量',

          render: (val) => val || 0,
        },
        {
          field: 'recordNum',

          label: '含有利润分析的订单数',

          render: (val) => val || 0,
        },

      ];

      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,

          queryVO: searchData.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>