DIGITAL_MANAGEMENT
/
finance
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

提出table做成组件

apply
Min5203 4 years ago
parent
6ef8384880
commit
8f0bc2dca9
5 changed files with 115 additions and 134 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 100
      components/Table.vue
  2. 22
      pages/Initiate-application.vue
  3. 22
      pages/applicant.vue
  4. 14
      pages/application-details.vue
  5. 91
      pages/index.vue

100
components/Table.vue
View File

@ -0,0 +1,100 @@
<template>
<div>
<table>
<tr class="table-header">
<td class="name">任务名称</td>
<td>预算(元)</td>
<td>奖金(元)</td>
</tr>
<tr v-for="item in arrayData">
<td>{{item.name}}</td>
<td>{{item.budget}}</td>
<td>{{item.bonus}}</td>
</tr>
<tr>
<td>合计</td>
<td>{{sumBudget}}</td>
<td>{{sumBonus}}</td>
</tr>
</table>
<div class="pagination">
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
</div>
</div>
</template>
<script setup>
import {ref} from'vue'
const arrayData = ref([
{
name:'财务条插件界面设计',
budget:1000,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:200
},
{
name:'财务条插件界面设计',
budget:1000,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:200
}
]);
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);
</script>
<style scoped lang="less">
table {
width: 100%;
margin-top: 2rem;
font-size: 14px;
overflow-x: scroll;
color:#797878 ;
td {
border: 0.5px solid #ccc;
padding: 0.85rem 0 0.85rem 0.85rem;
}
.table-header{
background-color: #F2F2F2;
color: #A0A0A0;
}
.name{
width:50%
}
}
.pagination{
width:50%;
margin-left: 50%;
margin-top:1rem
}
</style>

22
pages/Initiate-application.vue
View File

@ -231,27 +231,7 @@
<span class="title">历史申请</span> <span class="title">历史申请</span>
<div v-if="showHistory"> <div v-if="showHistory">
<Search /> <Search />
<table> <Table />
<tr class="table-header">
<td>申请人</td>
<td>金额(元)</td>
<td class="apply-time">时间</td>
<td>状态</td>
</tr>
<tr v-for="item in applyData">
<td>{{item.applicant}}</td>
<td>{{item.money}}</td>
<td>{{item.time}}</td>
<td
:class="item.type === 1 ? 'green' : item.type === 2 ? 'red' : ''"
>
{{item.type === 1 ? '已通过' : item.type === 2 ? '已驳回' : '待审批'}}
</td>
</tr>
</table>
<div class="pagination">
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
</div>
</div> </div>
<div v-if="!showHistory" class="no-data"> <div v-if="!showHistory" class="no-data">
暂无历史记录 暂无历史记录

22
pages/applicant.vue
View File

@ -13,27 +13,7 @@
<span class="title">历史申请</span> <span class="title">历史申请</span>
<div v-if="isShow"> <div v-if="isShow">
<Search /> <Search />
<table> <Table />
<tr class="table-header">
<td>申请人</td>
<td>金额(元)</td>
<td class="apply-time">时间</td>
<td>状态</td>
</tr>
<tr v-for="item in applyData">
<td>{{item.applicant}}</td>
<td>{{item.money}}</td>
<td>{{item.time}}</td>
<td
:class="item.type === 1 ? 'green' : item.type === 2 ? 'red' : ''"
>
{{item.type === 1 ? '已通过' : item.type === 2 ? '已驳回' : '待审批'}}
</td>
</tr>
</table>
<div class="pagination">
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
</div>
</div> </div>
<div v-if="!isShow" class="no-data"> <div v-if="!isShow" class="no-data">
暂无历史记录 暂无历史记录

14
pages/application-details.vue
View File

@ -26,10 +26,16 @@ const checkerList = ref([
status: "0", status: "0",
}, },
{ {
name: "冯教授", name: "薇薇安",
advice: "", advice: "很棒!",
checkedTime: "", checkedTime: "12/18 14:55",
status: "0", status: "1",
},
{
name: "薇薇安",
advice: "很棒!",
checkedTime: "12/18 14:55",
status: "1",
} }
]) ])
function onClickLeft(){ function onClickLeft(){

91
pages/index.vue
View File

@ -11,26 +11,7 @@
<div class="financial-management"> <div class="financial-management">
<span class="title">财务管理</span> <span class="title-describe">对项目预算、奖金进行配置</span> <span class="title">财务管理</span> <span class="title-describe">对项目预算、奖金进行配置</span>
<Search /> <Search />
<table> <Table />
<tr class="table-header">
<td class="name">任务名称</td>
<td>预算(元)</td>
<td>奖金(元)</td>
</tr>
<tr v-for="item in arrayData">
<td>{{item.name}}</td>
<td>{{item.budget}}</td>
<td>{{item.bonus}}</td>
</tr>
<tr>
<td>合计</td>
<td>{{sumBudget}}</td>
<td>{{sumBonus}}</td>
</tr>
</table>
<div class="pagination">
<van-pagination v-model="currentPage" :page-count="12" mode="simple" />
</div>
</div> </div>
</van-tab> </van-tab>
<van-tab title="角色管理">角色管理</van-tab> <van-tab title="角色管理">角色管理</van-tab>
@ -51,51 +32,7 @@ export default {
<script setup> <script setup>
import {ref} from 'vue' import {ref} from 'vue'
const active = ref(0); const active = ref(0);
const arrayData = ref([
{
name:'财务条插件界面设计',
budget:1000,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:200
},
{
name:'财务条插件界面设计',
budget:1000,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:0
},
{
name:'财务条插件界面设计',
budget:0,
bonus:200
}
]);
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);
function onClickLeft(){ function onClickLeft(){
console.log('返回上一页') console.log('返回上一页')
@ -122,29 +59,7 @@ function onClickLeft(){
font-size: 12px; font-size: 12px;
margin-left: 0.5rem; margin-left: 0.5rem;
} }
table {
width: 100%;
margin-top: 2rem;
font-size: 14px;
overflow-x: scroll;
color:#797878 ;
td {
border: 0.5px solid #ccc;
padding: 0.85rem 0 0.85rem 0.85rem;
}
.table-header{
background-color: #F2F2F2;
color: #A0A0A0;
}
.name{
width:50%
}
}
.pagination{
width:50%;
margin-left: 50%;
margin-top:1rem
}
} }

Write Preview
Loading…
Cancel
Save