采购需求明细表无线滚动

src/api/purchase/purchaseDemand.js

@@ -78,4 +78,11 @@ export function queryMan(id) {
     url: `/material/division/queryBuyer?materialId=${id}`,
     method: 'get',
   })
+}
+// 跳转OA
+export function toOA(userName, fdId) {
+  return request({
+    url: `/oaflow/redirectToOa/${userName}/${fdId}`,
+    method: 'get',
+  })
 }

src/main.js

@@ -95,6 +95,32 @@ Vue.use(VueMeta);
 Vue.use(Print); //注册
 DictData.install();
 
+// el-table无限滚动解决页面渲染卡死
+Vue.directive("myscroll", {
+  bind(el, bind, vnode) {
+    const self = vnode.context;
+    let target = el.querySelector('.el-table__body-wrapper');
+    target.addEventListener("scroll", () => {
+      // 检测触底
+      if (target.scrollTop + target.clientHeight >= target.scrollHeight) {
+        if (self.over >= self.basicForm.puDemandItemList) {
+          return;
+        }
+        self.over +=15
+      }
+    })
+  }
+})
+Vue.mixin({
+  data() {
+    return {
+      // scrollTop: 0,
+      // tableHeight: 300
+      start: 0,
+      over: 15
+    }
+  }
+})
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api

src/views/purchase/DemandSummary/add.vue

@@ -236,7 +236,6 @@ export default {
       console.log('数据', this.row)
       let param = JSON.parse(JSON.stringify(this.query))
       param.sumFlag = this.row.sumFlag
-      param.demandItemId = this.row.demandItemId
       this.getDetails(param)
     }
   },
@@ -256,6 +255,7 @@ export default {
     },
     // 如果需要回显则调用详情接口
     getDetails(row) {
+      row.demandItemId = this.row.demandItemId
       getSummaryDetail(row).then(res => {
         if (res.code === 200) {
           this.tableList = res.data

src/views/purchase/PurchaseDemandList/add.vue

@@ -84,7 +84,7 @@
 
         <el-col :span="1.5">
           <el-form-item label="是否客户指定">
-            <el-select clearable v-model="basicForm.isSpeical" :disabled="sonDisable" size="mini" style="width: 200px">
+            <el-select clearable v-model="basicForm.isCustomerSpecified" :disabled="sonDisable" size="mini" style="width: 200px">
               <el-option v-for=" item in options" :key="item.value" :label="item.label" :value="item.value">
               </el-option>
             </el-select>
@@ -167,7 +167,8 @@
       </div>
 
       <el-table
-          :data="basicForm.puDemandItemList"
+          v-myscroll
+          :data="basicForm.puDemandItemList.slice(0, over)"
           fit
           border
           :cell-style="{ borderColor: '#c0c0c0' }"
@@ -179,8 +180,8 @@
           @selection-change="handleSelectionChange"
           :cell-class-name="cellClassName"
         >
-          <el-table-column show-overflow-tooltip type="selection" fixed="left"/>
-          <el-table-column show-overflow-tooltip label="序号" type="index" align="center" width="50px" fixed="left"/>
+          <el-table-column show-overflow-tooltip type="selection"/>
+          <el-table-column show-overflow-tooltip label="序号" type="index" align="center" width="50px"/>
           <el-table-column show-overflow-tooltip label="行号" align="center" prop="rowNo">
             <template slot-scope="scope">
               {{ scope.$index + 1 + '0' }}
@@ -374,11 +375,11 @@
               </el-form-item>
             </template>
           </el-table-column>
-          <el-table-column show-overflow-tooltip label="是否客户指定" align="center"  prop="isSpeical" width="120px">
+          <el-table-column show-overflow-tooltip label="是否客户指定" align="center"  prop="isCustomerSpecified" width="120px">
             <template slot-scope="scope">
               <el-form-item class="hang">
                 <el-switch
-                  v-model="scope.row.isSpeical"
+                  v-model="scope.row.isCustomerSpecified"
                   disabled
                   active-value="Y"
                   inactive-value="N"
@@ -417,18 +418,11 @@
       </el-table>
     </el-form>
       <div class="btn_group">
-        <el-col :span="1.5">
-          <el-button type="primary" size="mini"  @click="copy" v-if="sonPageStu == 'check'">复制</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button type="primary" size="mini"  @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存</el-button>
-        </el-col>
-        <el-col :span="1.5" style="margin: 0 10px;">
-          <el-button type="primary" size="mini"  @click="submit" v-if="sonPageStu == 'check' && (row.status == '0' || row.status == '3')">提交</el-button>
-        </el-col>
-        <el-col :span="1.5">
-          <el-button size="mini" plain @click="back">返回</el-button>
-        </el-col>
+        <el-button type="primary" size="mini"  @click="jumpOA" v-if="sonPageStu == 'check' && (row.status == '1' || row.status == '2')">跳转OA</el-button>
+        <el-button type="primary" size="mini"  @click="copy" v-if="sonPageStu == 'check'">复制</el-button>
+        <el-button type="primary" size="mini"  @click="save" v-if="sonPageStu == 'add' || sonPageStu == 'edit'">保存</el-button>
+        <el-button type="primary" size="mini"  @click="submit" v-if="sonPageStu == 'check' && (row.status == '0' || row.status == '3')">提交</el-button>
+        <el-button size="mini" plain @click="back">返回</el-button>
       </div>
   </el-card>
 
@@ -523,7 +517,7 @@
 <script>
 import Reserved from './reserved.vue'
 import Refers from '@/components/Refers/refers.vue'
-import {addDemand,getDemandDetail, getDemandSonDetail, editDemand, submitDemand, queryMan } from '@/api/purchase/purchaseDemand.js'
+import {addDemand,getDemandDetail, getDemandSonDetail, editDemand, submitDemand, queryMan, toOA } from '@/api/purchase/purchaseDemand.js'
 // 用于回显参照框数据
 import {getRefer} from '@/api/purchase/basic.js'
 // 明细行选择物料参照
@@ -568,7 +562,7 @@ export default {
         createTime: '',
         source: '4',
         billType: 'ZQBH',
-        isSpeical: 'N',
+        isCustomerSpecified: 'N',
         isProcess: '',
         isMonthleyCalculate: '',
         createTime: this.parseTime(new Date().getTime()),
@@ -708,7 +702,7 @@ export default {
       this.basicForm.code = ''
       this.basicForm.createBy = ''
       this.basicForm.source = '4'
-      this.basicForm.isSpeical = 'N'
+      this.basicForm.isCustomerSpecified = 'N'
       this.basicForm.demandPersonal = this.$store.state.user.name
       this.basicForm.demandDept = this.$store.state.user.deptId
       if (this.basicForm.demandPersonal) { this.reBackRefer('CONTACTS_PARAM', this.basicForm.demandPersonal, '需求人员') }
@@ -1002,7 +996,7 @@ export default {
     },
     // 单元格标红
     cellClassName({row, column, rowIndex, columnIndex}) {
-      if(this.basicForm.isSpeical == 'N' && column.label == '需求可用周期' && Number(row.demandPeriod) > 1.5 && Number(row.demandPeriod) > Number(row.minOrderQty)) {
+      if(this.basicForm.isCustomerSpecified == 'N' && column.label == '需求可用周期' && Number(row.demandPeriod) > 1.5 && Number(row.demandPeriod) > Number(row.minOrderQty)) {
         return 'success-row';
       }
     },
@@ -1739,6 +1733,11 @@ export default {
         ]; 
       }
     },
+    jumpOA() {
+      toOA(this.$store.state.user.name, this.basicForm.flowId).then(res => {
+
+      })
+    }
   }
 }
 </script>
@@ -1748,7 +1747,7 @@ export default {
   // width: 100%;
   // margin: 20px 0;
   display: flex;
-  // justify-content: center;
+  justify-content: space-between;
   position: absolute;
   top: 10px;right: 20px;