You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
73 lines
2.0 KiB
73 lines
2.0 KiB
4 years ago
|
<!-- 财务条内置组件 -->
|
||
|
|
<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, computed } from 'vue';
|
||
|
|
|
||
|
|
const props = defineProps({ task: { type: Object } });
|
||
|
|
// const task = inject('task');
|
||
|
|
const data = ref(null);
|
||
|
|
|
||
|
|
async function getData() {
|
||
|
|
try {
|
||
|
|
const taskDetailId = props.task.taskDetailId;
|
||
|
|
data.value = await uni.$u.api.getFinanceByTask(taskDetailId);
|
||
|
|
} catch (error) {
|
||
|
|
console.log('error: ', error);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
getData();
|
||
|
|
|
||
|
|
// 打开详情页
|
||
|
|
function openFinance() {
|
||
|
|
// DEBUG: 假数据 换成财务条详情页的地址
|
||
|
|
uni.navigateTo({ url: '/pages/detailWebview/detailWebview?url=http://www.baidu.com' });
|
||
|
|
}
|
||
|
|
</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>
|