申购管理页面优化

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

@@ -1,30 +1,194 @@
 <!-- 供应商价格维护 -->
 <template>
   <div class="container">
-    <my-table ref="table" :data="data" :columns="columns" :table-filter="tableFilter" :table-page="params" @event-handle="eventHandle" @on-change="changePage"></my-table>
-    <my-form-pay
-      v-model="show"
-      :type="formType"
-      :data="formData"
-      :showSider="false"
-      @cfm="getList"
-    >
-    </my-form-pay>
+    <div class="tab-nav">
+      <div class="date-filter-wrap">
+        <Button type="primary" @click="addPurchase">发起申购</Button>
+        <Button type="primary" style="margin-left: 10px" @click="toViewPurchase">查看申购单</Button>
+        <Input style="margin-left: 10px" v-model="keyword" clearable placeholder="请输入关键字" />
+        <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>
+      </div>
+    </div>
+    <div class="border"></div>
+    <div class="table-filter">
+      <div class="active" style="width: 7%; text-align: center" @click="fabricAndInkClick('')" :style="technologyType == '' ? 'border:2px solid #0077ff' : ''">
+        全部
+      </div>
+      <div class="fabric" :style="technologyType == 5 ? 'border:2px solid #0077ff' : ''" style="width: 50%" @click="fabricAndInkClick(5)">
+        <div class="label" style="border-right: 2px solid #dcdcdc">
+          <Icon type="md-add" v-if="!tableModalType" style="margin-right: 15px" @click.native="tableModalType = true" />
+          <Icon type="md-remove" v-else @click="tableModalType = false" style="margin-right: 15px" />
+          <span>面料申购</span>
+        </div>
+        <ul>
+          <li>
+            卷数
+            <span>{{ getData(5, 'purchaseQty') }}</span>
+          </li>
+          <li>
+            米数
+            <span>{{ getData(5, 'num') }}</span>
+          </li>
+          <li>
+            面积
+            <span>{{ getData(5, 'area') }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="ink" style="width: 40%" @click="fabricAndInkClick(3)" :style="technologyType == 3 ? 'border:2px solid #0077ff' : ''">
+        <div class="label" style="border-right: 1px solid #dcdcdc">
+          <span>墨水申购</span>
+        </div>
+        <ul>
+          <li>
+            件数
+            <span>{{ getData(3, 'purchaseQty') }}</span>
+          </li>
+          <li>
+            千克
+            <span>{{ getData(3, 'num') }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="fabric-son" v-if="tableModalType">
+      <div class="fabric-sun">
+        <div class="label" style="border-right: 2px solid #dcdcdc">
+          <span>直喷</span>
+        </div>
+        <ul>
+          <li>
+            卷数
+            <span>{{ getData(0, 'purchaseQty') }}</span>
+          </li>
+          <li>
+            米数
+            <span>{{ getData(0, 'num') }}</span>
+          </li>
+          <li>
+            面积
+            <span>{{ getData(0, 'area') }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="fabric-sun">
+        <div class="label" style="border-right: 2px solid #dcdcdc">
+          <span>打纸</span>
+        </div>
+        <ul>
+          <li>
+            卷数
+            <span>{{ getData(2, 'purchaseQty') }}</span>
+          </li>
+          <li>
+            米数
+            <span>{{ getData(2, 'num') }}</span>
+          </li>
+          <li>
+            面积
+            <span>{{ getData(2, 'area') }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="fabric-sun">
+        <div class="label" style="border-right: 2px solid #dcdcdc">
+          <span>热转</span>
+        </div>
+        <ul>
+          <li>
+            卷数
+            <span>{{ getData(1, 'purchaseQty') }}</span>
+          </li>
+          <li>
+            米数
+            <span>{{ getData(1, 'num') }}</span>
+          </li>
+          <li>
+            面积
+            <span>{{ getData(1, 'area') }}</span>
+          </li>
+        </ul>
+      </div>
+      <div class="fabric-sun">
+        <div class="label" style="border-right: 2px solid #dcdcdc">
+          <span>其他</span>
+        </div>
+        <ul>
+          <li>
+            卷数
+            <span>{{ getData(4, 'purchaseQty') }}</span>
+          </li>
+          <li>
+            米数
+            <span>{{ getData(4, 'num') }}</span>
+          </li>
+          <li>
+            面积
+            <span>{{ getData(4, 'area') }}</span>
+          </li>
+        </ul>
+      </div>
+    </div>
+    <div class="main">
+      <my-table
+        ref="table"
+        :data="data"
+        :columns="columns"
+        :table-filter="tableFilter"
+        :table-page="params"
+        @event-handle="eventHandle"
+        @on-change="changePage"
+      ></my-table>
+    </div>
+
+    <my-form-pay v-model="show" :type="formType" :data="formData" :showSider="false" @cfm="getList"> </my-form-pay>
   </div>
 </template>
 
 <script>
-import { ApplyPurchaseGetPageDetailList } from '@/api/applyPurchase'
+// import { ApplyPurchaseGetPageDetailList } from '@/api/applyPurchase'
 import MyTable from '_c/my-table/my-table'
 import MyFormPay from '_c/my-modal-pay'
+import axios from 'axios'
+
 export default {
   name: 'material_apply',
   components: {
     MyTable,
     MyFormPay
   },
-  data () {
+  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: [],
       formType: '',
       formData: {},
       show: false,
@@ -75,8 +239,8 @@ export default {
           title: '滞留数量',
           key: 'delayQuantity',
           minWidth: 150,
-          renderHeader: (h) => {
-            return h('span', `滞留超过${this.data[0] ? this.data[0].delayPeriod : 0}天数量`)
+          renderHeader: h => {
+            return h('span', `滞留超过30天数量`)
           }
         },
         {
@@ -93,39 +257,18 @@ export default {
           title: '近30天消耗量',
           key: 'overUseQty',
           minWidth: 150
-        },
-        {
-          title: '用途',
-          key: 'purpose',
-          minWidth: 150
+          // },
+          // {
+          //   title: '用途',
+          //   key: 'purpose',
+          //   minWidth: 150
         }
       ],
       tableFilter: [
         {
-          name: 'Input',
-          value: 'key',
-          placeholder: '请输入关键字'
-        },
-        {
-          name: 'DatePicker',
-          value: 'date',
-          type: 'daterange',
-          placeholder: '请选择日期'
-        },
-        {
-          name: 'Button',
-          type: 'primary',
-          text: '查询',
-          e: 'search'
-        },
-        {
           name: 'RadioGroup',
-          value: 'purBillState',
-          list: [
-            { label: '审批中', value: 0 },
-            { label: '历史申购', value: 1 },
-            { label: '已驳回', value: 2 }
-          ],
+          value: 'status',
+          list: [{ value: '', label: '全部（0）' }],
           e: 'state'
         },
         {
@@ -139,31 +282,99 @@ export default {
           type: 'primary',
           style: { color: 'red' },
           text: '合计在途：0'
-        },
-        {
-          name: 'Button',
-          type: 'primary',
-          align: 'right',
-          text: '查看申购单',
-          e: 'go'
-        },
-        {
-          name: 'Button',
-          type: 'primary',
-          text: '发起申购',
-          align: 'right',
-          e: 'add'
         }
       ],
       params: {
         pageIndex: 1,
-        pageSize: 20,
+        pageSize: 10,
         total: 0
       }
     }
   },
+  mounted() {
+    this.dateTabToggle('1')
+  },
   methods: {
-    cfm (type, formData) {
+    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]
+      }
+      this.getAllList()
+    },
+    getAllList() {
+      this.getTypeList()
+      this.getHandleData()
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+    getTypeList() {
+      this.technologyType = ''
+      axios
+        .post('/cloudApi/applyPurchase/technologyTypeStatistics', {
+          type: this.type,
+          beginTime: this.beginTime,
+          endTime: this.endTime,
+          keyword: this.keyword
+        })
+        .then(res => {
+          this.typeList = res.data.data
+        })
+    },
+    fabricAndInkClick(index) {
+      this.technologyType = index
+      this.getHandleData()
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+    getData(num, name) {
+      if (this.typeList[num] && this.typeList[num][name]) {
+        return this.typeList[num][name]
+      } else {
+        return '0'
+      }
+    },
+    cfm(type, formData) {
       if (type === 'add') {
         FacPriceAdd({
           ...formData,
@@ -187,16 +398,15 @@ export default {
       }
     },
     // 检索条件事件处理
-    eventHandle (option) {
-      console.log(option)
+    eventHandle(option) {
       switch (option._evnet) {
         case 'search':
           this.params.pageIndex = 1
           this.params.keyWord = option.key
           this.params.beginTime = option.dateStartTime
           this.params.endTime = option.dateEndTime
-          this.params.purBillState = option.purBillState
-          if (option.purBillState === 1) {
+          this.params.status = option.status
+          if (option.status === 1) {
             this.columns = [
               {
                 title: '序号',
@@ -243,8 +453,8 @@ export default {
                 title: '滞留数量',
                 key: 'delayQuantity',
                 minWidth: 150,
-                renderHeader: (h) => {
-                  return h('span', `滞留超过${this.data[0] ? this.data[0].delayPeriod : 0}天数量`)
+                renderHeader: h => {
+                  return h('span', `滞留超过30天数量`)
                 }
               },
               {
@@ -320,8 +530,8 @@ export default {
                 title: '滞留数量',
                 key: 'delayQuantity',
                 minWidth: 150,
-                renderHeader: (h) => {
-                  return h('span', `滞留超过${this.data[0] ? this.data[0].delayPeriod : 0}天数量`)
+                renderHeader: h => {
+                  return h('span', `滞留超过30天数量`)
                 }
               },
               {
@@ -338,47 +548,91 @@ export default {
                 title: '近30天消耗量',
                 key: 'overUseQty',
                 minWidth: 150
-              },
-              {
-                title: '用途',
-                key: 'purpose',
-                minWidth: 150
+                // },
+                // {
+                //   title: '用途',
+                //   key: 'purpose',
+                //   minWidth: 150
               }
             ]
           }
-          this.getList()
-          break
-        case 'add':
-          this.formType = 'add'
-          this.show = true
-          break
-        case 'go':
-          this.$router.push('material_apply')
+          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()
+          })
           break
       }
     },
-    changePage (pageIndex) {
+    changePage(pageIndex) {
       this.params.pageIndex = pageIndex
       this.getList()
     },
-    getList () {
-      ApplyPurchaseGetPageDetailList(this.params).then(res => {
-        if (res.code === 0) {
-          this.data = res.result.pageItems.list
-          this.tableFilter[4].text = '合计请购：' + (res.result.purchaseQtySum || 0)
-          this.tableFilter[5].text = '合计在途：' + (res.result.onWayQuantity || 0)
-          this.params.total = res.result.pageItems.totalCount
-        }
-      })
+    getHandleData() {
+      axios
+        .post('/cloudApi/applyPurchase/numStatistics', {
+          type: this.type,
+          beginTime: this.beginTime,
+          endTime: this.endTime,
+          keyword: this.keyword,
+          technologyType: String(this.technologyType)
+        })
+        .then(res => {
+          this.tableFilter[0].list = res.data.data.map(item => {
+            return {
+              ...item,
+              value: item.value || '',
+              label: item.key + '（' + item.count + '）'
+            }
+          })
+        })
+      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() {
+      axios
+        .post('/cloudApi/applyPurchase/page', {
+          ...this.params,
+          type: this.type,
+          beginTime: this.beginTime,
+          endTime: this.endTime,
+          keyword: this.keyword,
+          technologyType: String(this.technologyType)
+        })
+        .then(res => {
+          this.data = res.data.data.records
+          this.params.total = res.data.data.total
+        })
+    },
+    addPurchase() {
+      this.formType = 'add'
+      this.show = true
+    },
+    toViewPurchase() {
+      this.$router.push('material_apply')
     }
-  },
-  mounted () {
-    let preDate = this.$dayjs(new Date().setMonth((new Date().getMonth()) - 1)).format('YYYY-MM-DD')
-    let nowDate = this.$dayjs().format('YYYY-MM-DD')
-    this.$refs.table.setModel('date', [preDate, nowDate])
-    this.params.beginTime = preDate
-    this.params.endTime = nowDate
-    this.getList()
   }
 }
 </script>
@@ -386,5 +640,230 @@ export default {
 <style lang="less" scoped>
 .container {
   height: 100%;
+  display: flex;
+  flex-direction: column;
+  .tab-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .date-filter-wrap {
+      display: flex;
+      align-items: center;
+      .date-filter {
+        width: 300px;
+        overflow: hidden;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: #ffffff;
+        border-radius: 4px;
+        &.other {
+          width: 100%;
+          height: 100%;
+          .date-tab {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            padding: 9px;
+            height: 100%;
+            white-space: nowrap;
+            cursor: auto;
+            &.active {
+              background-color: #333333;
+              font-size: 14px;
+              font-weight: bold;
+            }
+            .num {
+              padding-top: 5px;
+              font-weight: bold;
+              font-size: 14px;
+              &.red {
+                color: red;
+                cursor: pointer;
+                text-decoration: underline;
+              }
+            }
+          }
+        }
+        .date-tab {
+          flex: 1;
+          padding: 9px 4px;
+          line-height: 1;
+          text-align: center;
+          border: 1px solid #e6e6e6;
+          border-radius: 2px;
+          border-right: none;
+          cursor: pointer;
+          font-weight: 500;
+          &:first-child {
+            border-radius: 4px 0 0 4px;
+          }
+          &:last-child {
+            border-radius: 0 4px 4px 0;
+            border-right: 1px solid #e6e6e6;
+          }
+          &.active {
+            background-color: #3f92f9;
+            color: #ffffff;
+          }
+        }
+      }
+    }
+    &.sub-nav {
+      .other-tab {
+        flex: 1;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        padding: 5px 10px;
+        text-align: center;
+        border: 1px solid #e6e6e6;
+        border-right: none;
+        font-weight: bold;
+        cursor: pointer;
+        white-space: nowrap;
+        &:first-child {
+          border-radius: 2px 0 0 2px;
+        }
+        &:last-child {
+          border-radius: 0 2px 2px 0;
+          border-right: 1px solid #e6e6e6;
+        }
+        &.active {
+          background-color: #ffffff !important;
+          color: blue !important;
+          border: 1px solid blue;
+        }
+      }
+    }
+    .all {
+      margin-right: 20px;
+    }
+    .row {
+      white-space: nowrap;
+      button {
+        margin-right: 10px;
+        min-width: 120px;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+    }
+  }
+  .border {
+    margin: 10px 0;
+    width: 100%;
+    height: 1px;
+    background-color: #d7d7d7;
+  }
+  .table-filter {
+    display: flex;
+    justify-content: space-between;
+  }
+  .table-filter > div {
+    background: #ffffff;
+    border: 1px solid #dddcdc;
+    font-size: 18px;
+    height: 60px;
+    line-height: 60px;
+    color: #3f3f3f;
+    ul {
+      display: flex;
+      li {
+        list-style: none;
+        font-size: 12px;
+        color: #838383;
+        line-height: 24px;
+        padding: 6px 0;
+        span {
+          color: #3f3f3f;
+          font-weight: bold;
+          font-size: 18px;
+          display: block;
+        }
+      }
+    }
+  }
+  .fabric {
+    display: flex;
+    .label {
+      width: 20%;
+      text-align: center;
+    }
+    ul {
+      width: 80%;
+      li {
+        width: 33.3%;
+        text-align: center;
+        line-height: 24px;
+      }
+    }
+  }
+  .ink {
+    display: flex;
+    .label {
+      width: 25%;
+      text-align: center;
+    }
+    ul {
+      width: 75%;
+      li {
+        width: 50%;
+        text-align: center;
+      }
+    }
+  }
+  .main {
+    flex: 1;
+    overflow: hidden;
+  }
+  .fabric-son {
+    display: flex;
+    background-color: white;
+    margin: 8px 0;
+    padding: 8px 0;
+    .fabric-sun {
+      width: 25%;
+      display: flex;
+      margin: 0 8px;
+      .label {
+        width: 25%;
+        text-align: center;
+      }
+      ul {
+        width: 75%;
+        li {
+          width: 33.3%;
+          text-align: center;
+          line-height: 24px;
+        }
+      }
+    }
+  }
+  .fabric-son > div {
+    background: #ffffff;
+    border: 1px solid #dddcdc;
+    font-size: 18px;
+    height: 60px;
+    line-height: 60px;
+    color: #3f3f3f;
+    ul {
+      display: flex;
+      li {
+        list-style: none;
+        font-size: 12px;
+        color: #838383;
+        line-height: 24px;
+        padding: 6px 0;
+        span {
+          color: #3f3f3f;
+          font-weight: bold;
+          font-size: 18px;
+          display: block;
+        }
+      }
+    }
+  }
 }
 </style>

src/view/store-out-manage/picking-tracking/picking-tracking.vue

@@ -7,13 +7,9 @@
       </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 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"
@@ -28,12 +24,7 @@
     <div class="border"></div>
     <div class="tab-nav">
       <div class="row">
-        <Button
-          :type="btnIndex === index  ? 'primary' : 'default'"
-          @click="userClick(item.jobNo, index)"
-          v-for="(item, index) in userList"
-          :key="index"
-        >
+        <Button :type="btnIndex === index ? 'primary' : 'default'" @click="userClick(item.jobNo, index)" v-for="(item, index) in userList" :key="index">
           <span>{{ item.userName }}（</span>
           <span style="color: red">{{ item.sum }}</span>
           <span>）</span>
@@ -52,17 +43,11 @@
       </div>
       <div class="item">
         <div class="label">指定领料未领卷数</div>
-        <p
-          class="value"
-          style="color: red; text-decoration:underline"
-        >{{ statistical.appointNotClaimedNum }}</p>
+        <p class="value" style="color: red; text-decoration:underline">{{ statistical.appointNotClaimedNum }}</p>
       </div>
       <div class="item" style="border-right: 1px solid #e6e6e6;">
         <div class="label">额外领料卷数</div>
-        <p
-          class="value"
-          style="color: red; text-decoration:underline"
-        >{{ statistical.additionalNum }}</p>
+        <p class="value" style="color: red; text-decoration:underline">{{ statistical.additionalNum }}</p>
       </div>
       <div class="item">
         <div class="label">排班米数</div>
@@ -98,22 +83,14 @@
       </div>
       <div class="item">
         <div class="label" style="color: red">产出比差额</div>
-        <p
-          class="value"
-        >{{ parseFloat(Number(statistical.outputRatioDifference) * 100).toFixed(2) }}%</p>
+        <p class="value">{{ parseFloat(Number(statistical.outputRatioDifference) * 100).toFixed(2) }}%</p>
       </div>
     </div>
     <div class="main">
       <my-table :data="tableList" :columns="columns" :isShowPage="false"></my-table>
     </div>
 
-    <modal
-      v-model="openDetails"
-      :title="detailsTitle"
-      :footer-hide="true"
-      width="60%"
-      class-name="vertical-center-modal"
-    >
+    <modal v-model="openDetails" :title="detailsTitle" :footer-hide="true" width="60%" class-name="vertical-center-modal">
       <details-modal
         v-if="openDetails"
         :rowData="rowData"
@@ -568,13 +545,7 @@ export default {
                   h(
                     'ul',
                     params.row.list.map(item => {
-                      return h(
-                        'li',
-                        {},
-                        parseFloat(
-                          Number(item.appointOutputRatio) * 100
-                        ).toFixed(2) + '%'
-                      )
+                      return h('li', {}, parseFloat(Number(item.appointOutputRatio) * 100).toFixed(2) + '%')
                     })
                   )
                 ]
@@ -606,13 +577,7 @@ export default {
                   h(
                     'ul',
                     params.row.list.map(item => {
-                      return h(
-                        'li',
-                        {},
-                        parseFloat(
-                          Number(item.actualOutputRatio) * 100
-                        ).toFixed(2) + '%'
-                      )
+                      return h('li', {}, parseFloat(Number(item.actualOutputRatio) * 100).toFixed(2) + '%')
                     })
                   )
                 ]
@@ -644,13 +609,7 @@ export default {
                   h(
                     'ul',
                     params.row.list.map(item => {
-                      return h(
-                        'li',
-                        {},
-                        parseFloat(
-                          Number(item.outputRatioDifference) * 100
-                        ).toFixed(2) + '%'
-                      )
+                      return h('li', {}, parseFloat(Number(item.outputRatioDifference) * 100).toFixed(2) + '%')
                     })
                   )
                 ]
@@ -708,9 +667,7 @@ export default {
         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 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')
@@ -723,9 +680,7 @@ export default {
         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.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') {
@@ -735,18 +690,16 @@ export default {
         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.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]
       }
-      this.btnIndex = 0
-      this.jobNo = ''
       this.getUserList()
       this.getList()
     },
     getUserList() {
+      this.btnIndex = 0
+      this.jobNo = ''
       axios
         .post('/cloudApi/stockDetail/pickingTrackingUserStatistics', {
           type: this.type,