TALL-MUI-4/plugins/p-finance/p-finance.vue

<!-- 财务条内置组件 -->
<template>
  <view class="finance-wrap" v-if="data" @click="openFinance">
    <!-- 预算和奖金 -->
    <view class="finance-row">
      <view
        class="finance-item"
        :style="{ width: `${(+data.budget * 100) / (+data.budget + +data.bonus)}%`, 'background-color': '#93C5FD' }"
      >
        预算{{ data.budget / 100 }}
      </view>
      <view
        class="finance-item"
        :style="{ width: `${(+data.bonus * 100) / (+data.budget + +data.bonus)}%`, 'background-color': '#12c77e' }"
      >
        奖金{{ data.bonus / 100 }}
      </view>
    </view>
    <!-- 项目采购日常采购 -->
    <view class="finance-row">
      <view
        class="finance-item"
        :style="{ width: `${(+data.projectExpend * 100) / (+data.projectExpend + +data.dailyExpend)}%`, 'background-color': '#FBBF24' }"
      >
        项目采购{{ data.dailyExpend / 100 }}
      </view>
      <view
        class="finance-item"
        :style="{ width: `${(+data.dailyExpend * 100) / (+data.projectExpend + +data.dailyExpend)}%`, 'background-color': '#a1fd93' }"
      >
        日常采购{{ +data.dailyExpend / 100 }}
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, inject } from 'vue';
import useGenerateWebviewParam from '@/hooks/project/useGenerateWebviewParam';

const task = inject('task');
const data = ref(null);
const { projectId, projectName, token } = useGenerateWebviewParam();

// 查询任务上的财务条数据
async function getFinanceByTaskData() {
  try {
    const { detailId } = task;
    data.value = await uni.$u.api.getFinanceByTask(detailId);
  } catch (error) {
    console.log('getFinanceByTaskData error: ', error);
  }
}

getFinanceByTaskData();

// 打开详情页
function openFinance() {
  // DEBUG: 假数据 换成财务条详情页的地址
  uni.$ui.openDetail({
    url: `http://121.36.3.207/finance/applicant?name=财务&token=${token}&projectId=${projectId}&id=${task.detailId}&pn=${projectName}&tn=${task.name}`,
  });
}
</script>

<style lang="scss" scoped>
.finance-wrap {
  .finance-row {
    display: flex;

    .finance-item {
      margin: 3rpx 5rpx;
      font-size: 12px;
      text-align: center;
      border-radius: 8rpx;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow-x: visible;
    }
  }
}
</style>