付款计划

src/views/PurchasingCenter/PurchaseContractRequestFund/index.vue

@@ -1,5 +1,68 @@
 <template>
   <div class="app-container">
+    <el-card>
+      <span>时间段:</span>
+      <el-date-picker
+        v-model="dateRange"
+        :picker-options="pickerOptions"
+        size="small"
+        type="daterange"
+        align="center"
+        value-format="yyyy-MM-dd"
+        format="yyyy-MM-dd"
+        range-separator="～"
+        style="width:300px"
+        start-placeholder="开始日期"
+        end-placeholder="结束日期"/>
+      <el-button
+        type="success"
+        size="small"
+        icon="el-icon-search"
+        style="margin-left: 10px"
+        @click="searchTable0()">查询</el-button>
+    </el-card>
+
+    <el-card>
+      <el-table :data="tableData0" size="mini" border style="max-height: 250px;" height="250px" highlight-current-row @row-click="searchContract">
+        <el-table-column label="计划状态" width="100" align="center">
+          <template slot-scope="scope">
+            <el-tag v-if="timeToStamp(scope.row.计划付款日期) <= getDate" type="danger" size="small">已拖期</el-tag>
+            <el-tag v-if="timeToStamp(scope.row.计划付款日期) > getDate" type="success" size="small">未拖期</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="计划付款日期" min-width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.计划付款日期.split(' ')[0] }}
+          </template>
+        </el-table-column>
+        <el-table-column label="计划付款金额" min-width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.计划付款金额 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="计划付款备注" min-width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.计划付款备注 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="采购合同编号" min-width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.采购合同编号 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="采购合同名称" min-width="100" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.采购合同名称 }}
+          </template>
+        </el-table-column>
+        <el-table-column label="供应商" min-width="150" align="center">
+          <template slot-scope="scope">
+            {{ scope.row.供应商名称 }}
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-card>
+
     <el-card>
       <span>合同号:</span>
       <el-select v-model="contractNumValue" placeholder="合同号" size="small" filterable clearable>
@@ -124,12 +187,60 @@
 </template>
 
 <script>
-import { initContract, searchTable1, searchCondition, requestFund, cancelRequestFund, searchContract } from '@/api/PurchasingCenter/PurchaseContractRequestFund'
+import { searchTable0, initContract, searchTable1, searchCondition, requestFund, cancelRequestFund, searchContract } from '@/api/PurchasingCenter/PurchaseContractRequestFund'
 import { mapGetters } from 'vuex'
+import { getNowTime, timeToStamp } from '@/utils/tool'
 
 export default {
   data() {
     return {
+      getDate: null,
+      tableData0: [],
+      check: 0,
+      pickerOptions: {
+        shortcuts: [{
+          text: '未来一周',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            end.setTime(start.getTime() + 3600 * 1000 * 24 * 7)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '未来一个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '未来两个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30 * 2)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '未来三个月',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30 * 3)
+            picker.$emit('pick', [start, end])
+          }
+        }, {
+          text: '未来半年',
+          onClick(picker) {
+            const end = new Date()
+            const start = new Date()
+            end.setTime(start.getTime() + 3600 * 1000 * 24 * 30 * 6)
+            picker.$emit('pick', [start, end])
+          }
+        }]
+      },
+      dateRange: '',
       tableData11: [],
       total1: 0,
       pageCurrent1: 1,
@@ -154,8 +265,18 @@ export default {
   created() {
     this.fetchData()
     this.searchTable1()
+    this.searchTable0()
   },
   methods: {
+    timeToStamp(param) { // 转时间戳
+      return timeToStamp(param)
+    },
+    searchTable0() { // 查询付款计划
+      this.dateRange ? this.check = 1 : (this.check = 0, this.dateRange = '')
+      searchTable0(this.check, this.dateRange[0], this.dateRange[1]).then(response => {
+        this.tableData0 = response.data
+      })
+    },
     fetchData() {
       initContract().then(response => {
         for (let i = 0; i < response.data.length; i++) {
@@ -167,6 +288,7 @@ export default {
       })
     },
     searchTable1() { // 查询
+      this.getDate = timeToStamp(getNowTime()) // 获取当前时间
       this.tableData1 = []
       this.returns = ''
       this.contractNumValue ? this.check1 = 1 : this.check1 = 0
@@ -245,11 +367,14 @@ export default {
 </script>
 
 <style scoped>
+  .el-tag{
+    margin: 0
+  }
   .el-card{
     margin-bottom: 15px;
   }
   .el-date-editor{
-    width:150px!important;
+    width:150px;
   }
   .el-select{
     width:200px