物料申购页面优化

src/view/material-manege/material-apply-detail/material-apply-detail.vue

@@ -9,19 +9,7 @@
         <Button style="margin-left: 10px" @click="getAllList">查询</Button>
       </div>
       <div class="date-filter-wrap">
-        <div class="date-filter">
-          <div class="date-tab" v-for="item in dateTabs" :key="item.type" :class="item.type === type ? 'active' : ''" @click="dateTabToggle(item.type)">
-            {{ item.label }}
-          </div>
-        </div>
-        <DatePicker
-          @on-change="dateClick"
-          v-model="dataArea"
-          type="daterange"
-          placement="bottom-end"
-          placeholder="请选择日期"
-          style="width: 200px; margin-left: 10px"
-        ></DatePicker>
+        <date-select v-model="params" @change="selectTime"></date-select>
       </div>
     </div>
     <div class="border"></div>
@@ -165,27 +153,20 @@
 import MyTable from '_c/my-table/my-table'
 import MyFormPay from '_c/my-modal-pay'
 import axios from 'axios'
+import dateSelect from '@/components/dateSelect/dateSelect'
 
 export default {
   name: 'material_apply',
   components: {
     MyTable,
-    MyFormPay
+    MyFormPay,
+    dateSelect
   },
   data() {
     return {
       dataArea: [],
-      beginTime: '',
-      endTime: '',
       keyword: '',
-      type: '1',
       technologyType: '',
-      dateTabs: [
-        { label: '本日', type: '1' },
-        { label: '本周', type: '2' },
-        { label: '本月', type: '3' },
-        { label: '今年', type: '4' }
-      ],
       typeList: {},
       tableModalType: false,
       numList: [],
@@ -267,7 +248,7 @@ export default {
           title: '申购说明',
           key: 'applyAccount',
           minWidth: 150
-        },
+        }
       ],
       tableFilter: [
         {
@@ -275,74 +256,23 @@ export default {
           value: 'status',
           list: [{ value: '', label: '全部（0）' }],
           e: 'state'
-        },
-        {
-          name: 'span',
-          type: 'primary',
-          style: { color: 'red' },
-          text: '合计请购：0'
-        },
-        {
-          name: 'span',
-          type: 'primary',
-          style: { color: 'red' },
-          text: '合计在途：0'
         }
       ],
       params: {
         pageIndex: 1,
         pageSize: 10,
+        type: '3',
+        beginTime: null,
+        endTime: null,
         total: 0
       }
     }
   },
   mounted() {
-    this.dateTabToggle('1')
+    this.getAllList()
   },
   methods: {
-    dateClick(date) {
-      this.beginTime = date[0]
-      this.endTime = date[1]
-      this.type = '99'
-      this.getAllList()
-    } /* 选项卡切换 */,
-    dateTabToggle(index) {
-      this.params.pageIndex = 1
-      this.type = index
-      if (index === '1') {
-        let time = new Date().getTime()
-        this.beginTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
-        this.endTime = this.$dayjs(time).format('YYYY-MM-DD HH:mm:ss')
-        this.dataArea = [this.beginTime, this.endTime]
-      } else if (index === '2') {
-        let Nowdate = new Date()
-        let WeekFirstDay = Nowdate.getDay() ? new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000) : new Date(Nowdate - (Nowdate.getDay() + 6) * 86400000)
-        let WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000)
-        this.beginTime = this.$dayjs(WeekFirstDay).format('YYYY-MM-DD HH:mm:ss')
-        this.endTime = this.$dayjs(WeekLastDay).format('YYYY-MM-DD HH:mm:ss')
-        this.dataArea = [this.beginTime, this.endTime]
-      } else if (index === '3') {
-        let now = new Date() // 当前日期
-        let nowMonth = now.getMonth() // 当前月
-        let nowYear = now.getFullYear() // 当前年
-        // 本月的开始时间
-        let monthStartDate = new Date(nowYear, nowMonth, 1)
-        // 本月的结束时间
-        let monthEndDate = new Date(nowYear, nowMonth + 1, 0)
-        this.beginTime = this.$dayjs(monthStartDate).format('YYYY-MM-DD HH:mm:ss')
-        this.endTime = this.$dayjs(monthEndDate).format('YYYY-MM-DD HH:mm:ss')
-        this.dataArea = [this.beginTime, this.endTime]
-      } else if (index === '4') {
-        let now = new Date() // 当前日期
-        let nowYear = now.getFullYear() // 当前年
-        // 本年的开始时间
-        let monthStartDate = new Date(nowYear, 0, 1)
-        // 本年的结束时间
-        let monthEndDate = new Date(nowYear, 11, 31)
-        this.beginTime = this.$dayjs(monthStartDate).format('YYYY-MM-DD HH:mm:ss')
-        this.endTime = this.$dayjs(monthEndDate).format('YYYY-MM-DD HH:mm:ss')
-        this.dataArea = [this.beginTime, this.endTime]
-      }
+    selectTime() {
       this.getAllList()
     },
     getAllList() {
@@ -356,9 +286,9 @@ export default {
       this.technologyType = ''
       axios
         .post('/cloudApi/applyPurchase/technologyTypeStatistics', {
-          type: this.type,
-          beginTime: this.beginTime,
-          endTime: this.endTime,
+          type: this.params.type,
+          beginTime: this.params.beginTime,
+          endTime: this.params.endTime,
           keyword: this.keyword
         })
         .then(res => {
@@ -491,7 +421,7 @@ export default {
                 title: '申购说明',
                 key: 'applyAccount',
                 minWidth: 150
-              },
+              }
             ]
           } else {
             this.columns = [
@@ -568,22 +498,9 @@ export default {
                 title: '申购说明',
                 key: 'applyAccount',
                 minWidth: 150
-              },
+              }
             ]
           }
-          axios
-            .post('/cloudApi/applyPurchase/totalNumStatistics', {
-              type: this.type,
-              beginTime: this.beginTime,
-              endTime: this.endTime,
-              keyword: this.keyword,
-              technologyType: String(this.technologyType),
-              status: this.params.status
-            })
-            .then(res => {
-              this.tableFilter[1].text = '合计请购：' + (res.data.data.purchaseQuantity || 0)
-              this.tableFilter[2].text = '合计在途：' + (res.data.data.onTheWayQuantity || 0)
-            })
           this.$nextTick(() => {
             this.getList()
           })
@@ -597,9 +514,9 @@ export default {
     getHandleData() {
       axios
         .post('/cloudApi/applyPurchase/numStatistics', {
-          type: this.type,
-          beginTime: this.beginTime,
-          endTime: this.endTime,
+          type: this.params.type,
+          beginTime: this.params.beginTime,
+          endTime: this.params.endTime,
           keyword: this.keyword,
           technologyType: String(this.technologyType)
         })
@@ -612,35 +529,22 @@ export default {
             }
           })
         })
-      axios
-        .post('/cloudApi/applyPurchase/totalNumStatistics', {
-          type: this.type,
-          beginTime: this.beginTime,
-          endTime: this.endTime,
-          keyword: this.keyword,
-          technologyType: String(this.technologyType),
-          status: this.params.status
-        })
-        .then(res => {
-          this.tableFilter[1].text = '合计请购：' + (res.data.data.purchaseQuantity || 0)
-          this.tableFilter[2].text = '合计在途：' + (res.data.data.onTheWayQuantity || 0)
-        })
     },
     getList() {
-      this.$Spin.show();
+      this.$Spin.show()
       axios
         .post('/cloudApi/applyPurchase/page', {
           ...this.params,
-          type: this.type,
-          beginTime: this.beginTime,
-          endTime: this.endTime,
+          type: this.params.type,
+          beginTime: this.params.beginTime,
+          endTime: this.params.endTime,
           keyword: this.keyword,
           technologyType: String(this.technologyType)
         })
         .then(res => {
           this.data = res.data.data.records
           this.params.total = res.data.data.total
-          this.$Spin.hide();
+          this.$Spin.hide()
         })
     },
     addPurchase() {