From 8f0bc2dca99ddf7054265e89a58b79d3eda809fc Mon Sep 17 00:00:00 2001
From: Min5203 <2318556978@qq.com>
Date: Mon, 24 Jan 2022 16:03:37 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8F=90=E5=87=BAtable=E5=81=9A=E6=88=90?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/Table.vue           | 100 +++++++++++++++++++++++++++++++++
 pages/Initiate-application.vue |  22 +-------
 pages/applicant.vue            |  22 +-------
 pages/application-details.vue  |  14 +++--
 pages/index.vue                |  91 +-----------------------------
 5 files changed, 115 insertions(+), 134 deletions(-)
 create mode 100644 components/Table.vue

diff --git a/components/Table.vue b/components/Table.vue
new file mode 100644
index 0000000..1971123
--- /dev/null
+++ b/components/Table.vue
@@ -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>
diff --git a/pages/Initiate-application.vue b/pages/Initiate-application.vue
index 27c9122..2d6a572 100644
--- a/pages/Initiate-application.vue
+++ b/pages/Initiate-application.vue
@@ -231,27 +231,7 @@
             <span class="title">历史申请</span>
             <div v-if="showHistory">
               <Search />
-              <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>
+              <Table />
             </div>
             <div v-if="!showHistory" class="no-data">
                 暂无历史记录
diff --git a/pages/applicant.vue b/pages/applicant.vue
index ff2314a..2555ddb 100644
--- a/pages/applicant.vue
+++ b/pages/applicant.vue
@@ -13,27 +13,7 @@
           <span class="title">历史申请</span>
           <div v-if="isShow">
             <Search />
-            <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>
+            <Table />
           </div>
           <div v-if="!isShow" class="no-data">
               暂无历史记录
diff --git a/pages/application-details.vue b/pages/application-details.vue
index 0e7e1de..28b5fa4 100644
--- a/pages/application-details.vue
+++ b/pages/application-details.vue
@@ -26,10 +26,16 @@ const checkerList = ref([
     status: "0",
   },
   {
-    name: "冯教授",
-    advice: "",
-    checkedTime: "",
-    status: "0",
+    name: "薇薇安",
+    advice: "很棒!",
+    checkedTime: "12/18 14:55",
+    status: "1",
+  },
+  {
+    name: "薇薇安",
+    advice: "很棒!",
+    checkedTime: "12/18 14:55",
+    status: "1",
   }
 ])
 function onClickLeft(){
diff --git a/pages/index.vue b/pages/index.vue
index bbe42cf..fa51d86 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -11,26 +11,7 @@
     <div class="financial-management">
       <span class="title">财务管理</span> <span class="title-describe">对项目预算、奖金进行配置</span>
         <Search />
-        <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>
+        <Table />
   </div>
   </van-tab>
   <van-tab title="角色管理">角色管理</van-tab>
@@ -51,51 +32,7 @@ export default {
 <script setup>
 import {ref} from 'vue'
 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(){
   console.log('返回上一页')
@@ -122,29 +59,7 @@ function onClickLeft(){
     font-size: 12px;
     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
-  }
+
 }