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.
129 lines
2.9 KiB
129 lines
2.9 KiB
<template>
|
|
<div>
|
|
<div class="w-full overflow-x-scroll">
|
|
<table>
|
|
<tr class="table-header">
|
|
<td width="15%">申请人</td>
|
|
<td width="15%">金额(元)</td>
|
|
<td width="30%">时间</td>
|
|
<td width="20%">操作</td>
|
|
</tr>
|
|
<tr v-for="item in arrayData">
|
|
<td>{{item.submitName}}</td>
|
|
<td>{{item.money}}</td>
|
|
<td>{{dayjs(item.submitTime - 0).format('YYYY-MM-DD hh:mm')}}</td>
|
|
<td>
|
|
<div v-if="item.applyType === 0" class="flex flex-row justify-between">
|
|
<van-button type="success" size="mini" class="rounded">通过</van-button>
|
|
<van-button type="danger" size="mini" class="rounded">驳回</van-button>
|
|
</div>
|
|
<div class="text-center" v-else :class="item.applyType === 1 ? 'text-gray-500' : 'text-red-500'">{{ item.applyType === 1 ? '已完成' : '已驳回' }}</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
<div class="pagination">
|
|
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import dayjs from "dayjs";
|
|
import {ref, reactive} from'vue';
|
|
|
|
const arrayData = ref([
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:0,
|
|
submitTime: '1643018415000',
|
|
applyType: 0,
|
|
},
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:0,
|
|
submitTime: '1643018415000',
|
|
applyType: 1,
|
|
},
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:0,
|
|
submitTime: '1643018415000',
|
|
applyType: 0,
|
|
},
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:0,
|
|
submitTime: '1643018415000',
|
|
applyType: 0,
|
|
},
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:1000,
|
|
submitTime: '1643018415000',
|
|
applyType: 2,
|
|
},
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:0,
|
|
submitTime: '1643018415000',
|
|
applyType: 0,
|
|
},
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:0,
|
|
submitTime: '1643018415000',
|
|
applyType: 0,
|
|
},
|
|
{
|
|
applyId: '001',
|
|
submitName:'代用名',
|
|
money:0,
|
|
submitTime: '1643018415000',
|
|
applyType: 0,
|
|
}
|
|
]);
|
|
const sumBudget = arrayData.value.reduce((sum, e) => sum + e.budget, 0);
|
|
const sumBonus = arrayData.value.reduce((sum, e) => sum + e.bonus, 0);
|
|
const currentPage = ref(1);
|
|
const data = reactive({
|
|
|
|
})
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
table {
|
|
width: 120%;
|
|
margin-top: 1rem;
|
|
font-size: 14px;
|
|
overflow-x: scroll;
|
|
color:#797878 ;
|
|
td {
|
|
border: 0.5px solid #ccc;
|
|
padding: 0.85rem;
|
|
// width: 5.9375rem;
|
|
}
|
|
.table-header{
|
|
background-color: #F2F2F2;
|
|
color: #A0A0A0;
|
|
}
|
|
}
|
|
.pagination{
|
|
width:50%;
|
|
margin-left: 50%;
|
|
margin-top:1rem
|
|
}
|
|
|
|
.input-box{
|
|
padding: 0!important;
|
|
border-bottom: 1px solid #ccc
|
|
}
|
|
|
|
</style>
|
|
|