002390 1 år sedan
förälder
incheckning
3bfdac68e4

+ 1 - 0
package.json

@@ -47,6 +47,7 @@
     "echarts": "^5.4.0",
     "el-table-horizontal-scroll": "^1.2.5",
     "el-table-infinite-scroll": "^2.0.0",
+    "el-table-virtual-scroll": "^1.0.20",
     "element-ui": "2.15.12",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",

+ 1 - 0
src/views/material/changeApply/add/column.js

@@ -226,6 +226,7 @@ export default function useColumns(){
           },
 
         },
+       
         {
           item:{
             key:'factoryName',

+ 1036 - 0
src/views/purchase/purchase-order/add/index copy.vue

@@ -0,0 +1,1036 @@
+<script>
+import orderApi from "@/api/business/purchase/purchase-order";
+import { initColumns, initDicts, initRules, initParams } from "@/utils/init/index.js";
+// import { Columns, TabColumns } from "./column";
+import judgeColumns from "./column";
+import { tax, currency } from "@/components/popover-select-v2/fetch";
+import VirtualScroll from 'el-table-virtual-scroll';
+import { VirtualColumn } from 'el-table-virtual-scroll';
+
+const {Columns,TabColumns} = judgeColumns();
+    
+const NewColumns = initColumns(Columns);
+const NewTabColumns = TabColumns.map((element) => ({
+  ...element,
+  tableColumns: initColumns(element.tableColumns),
+}));
+
+const SelectColumns = NewColumns.filter(
+  (column) => column.inputType === "Select"
+);
+NewTabColumns.forEach((column) => {
+  SelectColumns.push(
+    ...column.tableColumns.filter((cColumn) => cColumn.inputType === "Select")
+  );
+});
+
+export default {
+  name: "AddPurchaseOrderDrawer",
+  props:{
+    // roles:{
+    //   type:[Array,String,Object],
+    //   require:true,
+    // }
+  },
+  dicts: initDicts(SelectColumns),
+  components: {
+    'virtual-scroll':VirtualScroll,VirtualColumn,
+    FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
+    popDialog: () => import("@/components/PopDialog/index.vue"),
+    BatchImport: () => import("@/components/BatchImport/index.vue"),
+  },
+  
+
+  data() {
+
+    return {
+      visible: false,
+      loading:false,
+      tabLoading:false,
+      columns: NewColumns,
+      rules: initRules(NewColumns),
+      count:0,
+      params: {
+        ...initParams(NewColumns),
+        puOrderItemList: [],
+        puOrderExecuteList: [],
+      },
+      tabColumns: NewTabColumns,
+      tabName: "puOrderItemList",
+      isCopy:false,
+      tableData:[],  //虚拟滚动加载显示的数据
+    };
+  },
+  computed: {
+    role:{
+      get(){
+        let {roles} = this.$store.state.user;
+        return roles.find(item => item === "syfz-purchaseorder") || "procurementManager";
+        
+      },
+      set(){}
+    }
+  },
+  watch: {
+    "params.puOrderItemList": {
+      handler(nVal, oVal) {
+        this.visible &&  
+          this.handleSynchronousMaterial(
+            "puOrderItemList",
+            "puOrderExecuteList"
+          );
+      },
+      deep: true,
+    },
+    "params.puOrderExecuteList": {
+      handler(nVal, oVal) {
+        this.visible &&
+          this.handleSynchronousMaterial(
+            "puOrderExecuteList",
+            "puOrderItemList"
+          );
+      },
+      deep: true,
+    },
+    "params.billType":{
+      handler(nVal, oVal){
+
+        let billList = ['21-Cxx-02','21-Cxx-04','21-Cxx-10','21-Cxx-14','21-Cxx-09','21-Cxx-17','21-Cxx-18'];
+        
+        if(billList.find(item => item === nVal)){
+          this.rules.warehouseName = [
+            { required: true, message: "WMS入库仓库不能为空", trigger: "change" },
+          ];
+        }else{
+          this.rules.warehouseName = null;
+        }
+
+        this.count++;
+      }
+    }
+  },
+  methods: {
+    beforeOpen() {
+      if(!this.isCopy){
+
+        const { deptName, deptId, name, nickName, orgName, orgId } = this.$store.state.user;
+        this.params.puOrg = orgId;
+        this.params.puOrgName = orgName;
+        this.params.buyer = name;
+        this.params.buyerName = nickName;
+        this.params.puDept = deptId;
+        this.params.puDeptName = deptName;
+        this.params.billDate = new Date().Format('yyyy-MM-dd');
+        this.params.createTime = new Date().Format('yyyy-MM-dd HH:mm:ss');
+        console.log(this.params,'this.params');
+        // this.addTableRow();
+      }
+    },
+    setVisible(prop,iscopy) {
+      this.visible = prop;
+
+      this.isCopy = iscopy;
+
+      if(!this.visible){
+        this.$refs['orderAddForm'].clearValidate();
+      }
+    },
+    // 复制赋值
+    async setCopyParams(id) {
+
+      try {
+        this.loading = true;
+        const { code, msg, data } = await orderApi.details(id);
+
+        if (code === 200) {
+
+          this.params = {
+            ...data,
+            id: "",
+            code: "",
+            isEnd:'N',
+            status: "0",
+            source: "3",
+            isClose:'N',
+            billDate: new Date().Format('yyyy-MM-dd'),
+            createTime : new Date().Format('yyyy-MM-dd HH:mm:ss'),
+            closeTime:'',
+            oaDemandNo:'',
+            isInvoice:'N',
+            isSendWms:'N',
+            rebateMoney:'',
+            invoiceMoney:'',
+            paymentMoney:'',
+            applyPaymentMoney:'',
+            erpOrderCode:'',
+
+          };
+
+          try {
+            const { code, rows} = await orderApi.REFER(
+              {
+                type:'WAREHOUSE_PARAM',
+                search:  this.params.warehouseName,
+                isPage: true,
+              }, {pageNum: 1 , pageSize: 10} );
+
+              if(code ==200){
+                this.judgeGoodsAllocation(rows[0].csFlag);
+              }
+
+
+          } catch (error) {
+            
+          }
+
+          for (const key in this.params) {
+            // if (Array.isArray(this.params[key])) {
+            if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
+              this.params[key].forEach((v) => {
+                v.id = "";
+                v.demandCode = "";
+                v['isInvoice'] && (v['isInvoice'] = 'N');
+                v['isStorage'] && (v['isStorage'] = 'N');
+                v['isArrival'] && (v['isArrival'] = 'N');
+                v['isPayment'] && (v['isPayment'] = 'N');
+              });
+
+            }
+          }
+          // 清空   累计本币开票金额、
+          // 累计付款金额、累计付款申请金额、累计开票主数量、最终关闭时间
+          // 、最终关闭、已同步WMS 、订单抵扣余额金额、订单使用返利金额、 发票标识
+          
+
+        }
+      } catch (err) {
+        //
+      } finally {
+        this.loading = false;
+      }
+    },
+    // 增行
+    addTableRow(prop) {
+      for (const key in this.params) {
+
+        // if (Array.isArray(this.params[key])) {
+        if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
+
+          const arr = this.tabColumns.find(
+
+            (element) => element.key === key
+
+          ).tableColumns;
+
+          let rowData = initParams(arr, "key", "value");
+         
+
+          "rowno" in rowData &&
+            (rowData["rowno"] = this.params[key].length ? 
+              this.params[key][this.params[key].length - 1]['rowno'] +1 :
+               this.params[key].length + 1
+            );
+
+            // 物料
+            if("rowNo" in rowData){
+              
+              rowData["rowNo"] = this.params[key].length ? 
+              this.params[key][this.params[key].length - 1]['rowNo'] +1 :
+               this.params[key].length + 1;
+              // 扣税类别
+              rowData["taxDeductClassify"] = '1';
+              // 折本汇率
+              rowData["exchangeRate"] = '1';
+              // 价格类型
+              rowData["priceType"] = 'order';
+              // 币种
+              rowData["currency"] = '1002Z0100000000001K1';
+              rowData["currencyName"] = '人民币';
+            }
+          
+
+          // 是否完成询价,新增明细行需默认明细为false
+          // rowData["whetherCompleteInquiry"] = false;
+          this.params[key].push(rowData);
+        }
+      }
+
+      // const arr = this.tabColumns.find(
+      //   (element) => element.key === this.tabName
+      // ).tableColumns;
+      // prop.push(initParams(arr, "key", "value"));
+    },
+    // 删行
+    async delTableRow(prop, index) {
+
+     
+      for (const key in this.params) {
+        // if (Array.isArray(this.params[key])) {
+        if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
+          this.params[key].splice(index, 1);
+        }
+      }
+
+      await this.handleGetPrice();
+      // prop.splice(index, 1);
+    },
+    // 同步子表物料
+    handleSynchronousMaterial(tableOne, tableTwo) {
+      let _this = this;
+      // this.params[tableOne]-- -> this.params[tableTwo]
+      this.params[tableOne] &&
+
+        this.params[tableOne].forEach((item, index) => {
+
+          for (const key in item) {
+
+            if(!_this.params[tableTwo][index]){
+
+               const arr = _this.tabColumns.find(
+                  (element) => element.key === tableTwo
+                ).tableColumns;
+
+                _this.params[tableTwo].push(initParams(arr, "key", "value"));
+            }
+            
+            if (key in _this.params[tableTwo][index]) {
+
+              _this.params[tableTwo][index].material = item.material;
+
+              key !== 'id' && ( _this.params[tableTwo][index][key] = item[key]);
+
+            }
+          }
+        });
+    },
+    // 取消
+    handleCancel() {
+      this.params = {
+        ...initParams(this.columns),
+        puOrderItemList: [],
+        puOrderExecuteList: [],
+      };
+      this.setVisible(false);
+    },
+    // 判断保存条件
+    judgeSaveCondition(cb){
+      this.$refs['orderAddForm'].validate(async (valid) => {
+        if (valid) {
+
+          if(!this.params['puOrderItemList'].length || !this.params['puOrderExecuteList'].length){
+            this.$notify.error({
+              title: '错误',
+              message: '请填写订单行!'
+            });
+            return false;
+          }
+
+          // puOrderItemList
+        //  let isPrice =  this.params.puOrderItemList.filter(item => !item.whetherCompleteInquiry);
+
+         
+
+        //  if(isPrice.length && this.role === 'procurementManager'){
+
+        //     this.$notify.error({
+        //       title: '错误',
+        //       message: '询价失败!'
+        //     });
+        //     return false
+
+        //  }
+        //  console.log(isPrice,'isPrice');
+          cb();
+        } else {
+          this.$notify.error({
+              title: '错误',
+              message: '存在必填项未填写'
+            });
+          console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+    // 保存
+     handleSava() {
+     console.log(this.params,'this.params---------');
+      this.judgeSaveCondition(async()=>{
+        try {
+            this.loading = true;
+            const { code, msg } = await orderApi.create(this.params);
+            if (code === 200) {
+              this.handleCancel();
+            }
+          } catch (err) {
+            //
+          } finally {
+            this.loading = false;
+          }
+      })
+    },
+    judgeGoodsAllocation(porp){
+      if(porp === 'Y'){
+        this.rules.goodsAllocationName = [
+          { required: true, message: "货位不能为空", trigger: "change" },
+        ];
+      } else{ 
+        this.rules.goodsAllocationName = null;
+      }
+      this.count++;
+   },
+    // 主表参照改变之后
+   async handleReferChange(val, type, source){
+     let page = { pageNum: 1 , pageSize: 10 };
+      // 供应商选择  
+      if( type === 'SUPPLIER_PARAM' ){
+
+
+        let relevanceRefer = [
+          {
+            // 供应商联系人
+            key:'supplierContacts',
+            params:{
+              type:'SUPPLIERCONTACTS_PARAM',
+              supplierId:val.id,
+            }
+          },
+          {
+            // 供应商业务员
+            key:'supplierPersonal',
+            params:{
+              type:'PSNLICENSE_PARAM',
+              supplierId:val.id,
+              pkOrg: source.puOrg,
+            }
+          }
+        ]
+        
+        try {
+
+          let promiseArr =  relevanceRefer.map( (refer) =>{
+
+            return new Promise((resolve,reject)=>{
+
+               orderApi.REFER(
+                {
+                  ...refer.params,
+                  search: "",
+                  isPage: true,
+                }, page ).then(res=>{
+
+                  let {code,rows} = res;
+                  if (code === 200) {
+                    
+                    source[refer.key] = rows[0]? rows[0].id :'';
+                    
+                    source[`${refer.key}Name`] = rows[0] ? rows[0].name :'';
+                    
+                    resolve();
+                  }
+              })
+            })
+          })
+
+          Promise.all(promiseArr).then(async()=>{
+            // 明细不为空的情况下进行询价
+            let detailList = this.params['puOrderItemList'].filter(item => (
+                item.material && item.material != '' 
+              ))
+              
+              if(detailList.length){
+
+                await this.handleGetPrice();
+              }
+          })
+        } catch (error) {}
+      }
+
+      // 组织
+      if(type === 'ORG_PARAM'){
+
+          for (const key in this.params) {
+
+            // if (Array.isArray(this.params[key])) {
+            if (key === 'puOrderItemList' || key === 'puOrderExecuteList') {
+
+              this.params[key] = [];
+
+            }
+            else if(key === 'sysFileRecordList'){
+              this.params[key] = [];
+            }
+             else if (
+              key != "puOrg" &&
+              key != "puOrgName" &&
+              key != "buyer" &&
+              key != "buyerName" &&
+              key != "puDept" &&
+              key != "puDeptName" &&
+              key != "status" &&
+              key != "billDate" &&
+              key != "createTime" 
+            ) {
+              this.params[key] = "";
+            } else {
+            }
+          }
+        
+
+      }
+
+      // WMS仓库
+      if(type === 'WAREHOUSE_PARAM'){
+        this.judgeGoodsAllocation(val.csFlag);
+        source.goodsAllocation = ''
+        source.goodsAllocationName = ''
+        // this.count++
+      }
+    },
+
+    // 下拉框选择改变
+    handleSelectChange(val,typeName){
+
+      if(val === 'billType'){
+
+      this.params['billTypeName'] = this.dict.type[typeName].find(item => item.value == this.params[val]).label;
+
+      }
+
+    },
+
+
+    // 子表参照改变之后
+   async handleTabReferChange(val,  type, source) {
+
+      // 触发物料参照询价 
+      if (type == "MATERIAL_PARAM" && source.qty && source.qty != "") {
+
+        source['qty'] = 0;
+
+        // source['whetherCompleteInquiry'] = false;
+
+        source['taxPrice'] = 0;
+
+        source['money'] = 0;
+
+        source['taxDeductMoneya'] = 0;
+
+        source['price'] = 0;
+        
+        source['notaxMoney'] = 0;
+
+        source['tax'] = 0;
+
+        this.params['qty'] = 0;
+        this.params['originalQty'] = 0;
+        this.params['money'] = 0;
+        this.params['originalMoney'] = 0;
+        this.params['notaxMoney'] = 0;
+        source.isDrug = val.materialMedcine.isDrug  == '0' ? 'Y' : 'N';
+
+        // await this.handleGetPrice();
+
+      }
+
+      // 物料触发税率
+      if( type == "MATERIAL_PARAM"){
+        let {rateCode} = source;
+        try {
+          // try
+          this.loading = true;
+          const { ntaxrate } = await tax(rateCode);
+          source.tax = ntaxrate === "0E-8" ? 0 : ntaxrate;
+        } catch (err) {
+          // catch
+          console.error(err);
+        } finally {
+          // finally
+          this.loading = false;
+        }
+      }
+
+    },
+
+    // 子表下拉框改变
+    async handleTabSelectChange(type,row){
+     
+      if(type == 'priceType' && row.material && row.qty && row.qty != ""){
+
+        // row['whetherCompleteInquiry'] = false;
+
+        await this.handleGetPrice();
+      }
+    },
+
+    // 子表inputNumber
+    handleInputChange(row, type) {
+      // 物料数量变化----询价
+      if ((type == "qty" || type == "taxPrice" || type == 'taxDeductMoneya')&& row.material) {
+
+        // row['whetherCompleteInquiry'] = false;
+
+        
+       this.handleGetPrice();
+
+      }
+
+      // if(this.role === 'syfz-purchaseorder' && row.material && (type == "qty" ||type === "taxPrice" )){
+
+      //   row.money = row.qty * row.taxPrice;
+      // }
+
+    },
+
+    // 子表多选框改变
+    handleTabCheckbox(type,source){
+
+      // 勾选赠品,价税合计更新为0,含税单价、无税单价更新为0
+      if(type === 'isGift' && source.material && source.qty && source.qty != ""){
+
+        // source['whetherCompleteInquiry'] = false;
+
+        this.handleGetPrice()
+      }
+
+    },
+    // 询价 getPrice
+    async handleGetPrice() {
+
+        try {
+          
+          // action:insert(新增)、revise(修订)、update(编辑)
+          let { code, data } = await orderApi.getPrice({ ...this.params,action: 'insert' });
+  
+          if (code == 200) {
+  
+            this.params = data;
+  
+          }
+  
+        } catch (error) {} 
+      
+
+    
+    },
+
+    async handelImport(fileList){
+
+      try {
+
+        let formData = new FormData();
+
+        formData.append('file',fileList[0].raw);
+
+        this.$modal.loading("正在上传文件,请稍候...");
+
+        let {code,data} = await orderApi.orderImport(formData);
+
+        if(code == 200) {
+          this.tabLoading = true;
+          // puOrderExecuteList puOrderItemList
+
+          // let size = 20;
+          // let num = 1;
+          // let total = Math.ceil(data['puOrderItemList'].length / size);
+
+          // let resultData = {...data};
+          
+          // let intervalPush = setInterval(()=>{
+
+          //   if(num > total){
+              
+          //     clearInterval(intervalPush);
+
+          //     this.tabLoading = false;
+            
+          //     this.handleGetPrice();
+          //   } 
+    
+          //   for (const key in resultData) {
+
+          //     resultData[key].slice(size*(num-1), (size*num) ).forEach(item =>{
+            
+
+          //       this.params[key].push(item);
+
+          //     })
+
+          //   }
+
+          //   num++;
+
+          // },200);
+
+          for (const key in data) {
+
+            this.params[key].push(...data[key]);
+
+          }
+
+          
+          let {setVisible} =  this.$refs.batchImport;
+          
+          setVisible(false);
+          
+            
+          
+        }
+        
+      } catch (error) {
+        
+      }finally{
+        this.$modal.closeLoading();
+        
+      }
+      
+    },
+    
+    async handleTemDownload(){
+
+      this.download('/pu/order/downloadFailData',{}, `采购订单物料信息模板${new Date().getTime()}.xlsx`);
+    },
+
+    // judgeRole(){
+    //   let {roles} = this.$store.state.user;
+    //   let role =  roles.find(item => item === "syfz-purchaseorder") || "procurementManager";
+    //   return role;
+    // },
+
+
+  },
+  created() {
+    console.log("ADD CREATED", this.params);
+  },
+  mounted() {},
+  destroyed() {},
+};
+</script>
+<template>
+  <el-drawer
+    direction="btt"
+    size="100%"
+    :with-header="false"
+    :visible.sync="visible"
+    @open="beforeOpen"
+    @close="$emit('close')"
+    v-loading="loading"
+  >
+    <el-form
+      size="mini"
+      label-position="right"
+      ref="orderAddForm"
+      label-width="140px"
+      :model="params"
+      :rules="rules"
+      :key="count"
+    >
+      <el-card
+        :body-style="{
+          padding: '20px',
+          display: 'flex',
+          'flex-wrap': 'wrap',
+        }"
+        style="margin: 10px"
+      >
+        <div
+          slot="header"
+          style="
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+          "
+        >
+          <h3>新增</h3>
+          <div style="text-align: right">
+            <el-button 
+              size="mini" 
+              type="primary"
+              @click="handleSava"
+            >保存</el-button>
+            <el-button size="mini" @click="handleCancel">取消</el-button>
+          </div>
+        </div>
+        <el-row style="display: flex; flex-wrap: wrap">
+          <el-col
+            v-for="(column, index) in columns"
+            :key="index"
+            :span="column.span || 6"
+          >
+            <el-form-item
+              :prop="column.key"
+              :label="column.title"
+              v-if="column.isShow"
+            >
+              <el-input
+                v-if="column.inputType === 'Input'"
+                v-model="params[column.key]"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%;"
+              >
+              </el-input>
+              <dr-popover-select
+                v-if="column.inputType === 'PopoverSelect'"
+                v-model="params[column.key]"
+                :value-key="column.valueKey"
+                :source.sync="params"
+                :title="column.title"
+                :type="column.referName"
+                :disabled="column.disabled"
+                :multiple="column.multiple"
+                :placeholder="column.placeholder"
+                :data-mapping="column.dataMapping"
+                :query-params="column.queryParams"
+                @change="handleReferChange"
+              ></dr-popover-select>
+
+              <el-input
+                v-if="column.inputType === 'Textarea'"
+                v-model="params[column.key]"
+                type="textarea"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              ></el-input>
+
+              <el-input-number
+                v-if="column.inputType === 'InputNumber'"
+                v-model="params[column.key]"
+                :precision="column.precision"
+                :controls-position="column.controlsPosition"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              >
+              </el-input-number>
+              <el-select
+                v-if="column.inputType === 'Select'"
+                v-model="params[column.key]"
+                :disabled="column.disabled"
+                :clearable="column.clearable"
+                :placeholder="column.placeholder"
+                style="width: 100%"
+                filterable
+                @change="handleSelectChange(column.key,column.referName)"
+              >
+                <el-option
+                  v-for="item in dict.type[column.referName]"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+              <el-select
+                v-if="column.inputType === 'TagSelect'"
+                v-model="params[column.key]"
+                multiple
+                clearable
+                collapse-tags
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                style="width: 100%"
+              >
+                <template #prefix>
+                  <el-icon
+                    class="el-icon-view"
+                    style="cursor: pointer"
+                    @click.stop="$message.info(234)"
+                  >
+                  </el-icon>
+                </template>
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                ></el-option>
+              </el-select>
+              <el-date-picker
+                v-if="column.inputType === 'DatePicker'"
+                v-model="params[column.key]"
+                :type="column.type"
+                :placeholder="column.placeholder"
+                :clearable="column.clearable"
+                :disabled="column.disabled"
+                :picker-options="column.pickerOptions"
+                style="width: 100%"
+              ></el-date-picker>
+              <el-checkbox
+                v-if="column.inputType === 'Checkbox'"
+                v-model="params[column.key]"
+                :disabled="column.disabled"
+                true-label="Y"
+                false-label="N"
+              ></el-checkbox>
+              <file-upload-center
+                v-if="column.inputType === 'Upload'"
+                v-model="params[column.key]"
+                :file-type="column.fileType"
+              ></file-upload-center>
+            </el-form-item>
+          </el-col>
+        </el-row>
+      </el-card>
+
+      <el-card
+        :body-style="{
+          padding: '20px',
+          display: 'flex',
+          'flex-wrap': 'wrap',
+          position: 'relative',
+        }"
+        style="margin: 10px"
+      >
+        <el-tabs v-model="tabName" style="width: 100%" v-loading="tabLoading">
+          <el-tab-pane
+            v-for="(column, index) in tabColumns"
+            :key="index"
+            :label="column.title"
+            :name="column.key"
+          >
+
+          <virtual-scroll :data="resultData" 
+                    :item-size="53" 
+                    key-prop="id" 
+                    @change="(virtualList) => tableData = virtualList" 
+                    :virtualized="true" @selection-change="handleSelectionChange">
+      <!-- row-key绑定列唯一值,height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板-->
+          </virtual-scroll>
+
+
+            <el-table 
+              :data="params[column.key]" 
+              style="width: 100%"
+              :height="params[column.key].length ? 300 : 100"
+              border
+            >
+              <el-table-column
+                v-for="(cColumn, cIndex) in column.tableColumns"
+                :key="cIndex"
+                :label="cColumn.title"
+                :width="cColumn.width || 80"
+              >
+              <template slot="header" slot-scope="scope">
+                <span v-if="cColumn.require" style="color: #ff4949">*</span>
+                <span>
+                  {{ cColumn.title }}
+                </span>
+              </template>
+                <template slot-scope="scope">
+                  <el-form-item 
+                    label-width="0" 
+                    :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
+                    :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }"
+                  >
+                    <el-tag v-if="cColumn.key === 'index'" >
+                      {{ scope.$index + 1 }}
+                    </el-tag>
+                    <el-input
+                      v-if="cColumn.inputType === 'Input'"
+                      v-model="scope.row[cColumn.key]"
+                      :placeholder="cColumn.placeholder"
+                      :clearable="cColumn.clearable"
+                      :disabled="cColumn.disabled"
+                      size="mini"
+                      style="width: 100%"
+                    ></el-input>
+
+                    <!--  -->
+                    <dr-popover-select
+                      v-if="cColumn.inputType === 'PopoverSelect'"
+                      v-model="scope.row[cColumn.key]"
+                      :source.sync="scope.row"
+                      :title="cColumn.title"
+                      :value-key="cColumn.valueKey"
+                      :type="cColumn.referName"
+                      :disabled="cColumn.disabled"
+                      :multiple="cColumn.multiple"
+                      :placeholder="cColumn.placeholder"
+                      :data-mapping="cColumn.dataMapping"
+                      :query-params="cColumn.queryParams"
+                      @change="handleTabReferChange"
+                      size="mini"
+                    >
+                    </dr-popover-select>
+
+                    <el-input-number
+                      v-if="cColumn.inputType === 'InputNumber'"
+                      v-model="scope.row[cColumn.key]"
+                      :precision="cColumn.precision"
+                      :controls-position="cColumn.controlsPosition"
+                      :placeholder="cColumn.placeholder"
+                      @change="handleInputChange(scope.row, cColumn.key)"
+                      :clearable="cColumn.clearable"
+                      :disabled="cColumn.disabled"
+                      :min="cColumn.key === 'reservedQty' ? 0 : -Infinity"
+                      size="mini"
+                      style="width: 100%"
+                    ></el-input-number>
+
+                    <el-select
+                      v-if="cColumn.inputType === 'Select'"
+                      v-model="scope.row[cColumn.key]"
+                      filterable
+                      size="mini"
+                      :disabled="cColumn.disabled"
+                      :clearable="cColumn.clearable"
+                      :placeholder="cColumn.placeholder"
+                      style="width: 100%"
+                      @change="handleTabSelectChange(cColumn.key,scope.row)"
+                    >
+                      <el-option
+                        v-for="item in dict.type[cColumn.referName]"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value"
+                      ></el-option>
+                    </el-select>
+
+                    <el-checkbox
+                      v-if="cColumn.inputType === 'Checkbox'"
+                      v-model="scope.row[cColumn.key]"
+                      :disabled="cColumn.disabled"
+                      true-label="Y"
+                      false-label="N"
+                      @change="handleTabCheckbox(cColumn.key,scope.row)"
+                    ></el-checkbox>
+                  </el-form-item>
+                </template>
+              </el-table-column>
+
+              <el-table-column fixed="right" label="操作" width="80">
+                <template slot-scope="scope">
+                  <el-button
+                    @click.native.prevent="
+                      delTableRow(params[tabName], scope.$index)
+                    "
+                    type="text"
+                    size="small"
+                  >
+                    删行
+                  </el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </el-tab-pane>
+        </el-tabs>
+        <el-row style="position: absolute; top: 20px; right: 20px">
+          <el-button size="mini" @click="addTableRow(params[tabName])"
+            >增行</el-button>
+         
+            <!-- v-if="role === 'procurementManager'" -->
+          <BatchImport
+            ref="batchImport"
+            @import="handelImport"
+            @temDownload="handleTemDownload"
+          ></BatchImport>
+        </el-row>
+      </el-card>
+    </el-form>
+  </el-drawer>
+</template>
+

+ 52 - 26
src/views/purchase/purchase-order/add/index.vue

@@ -4,6 +4,8 @@ import { initColumns, initDicts, initRules, initParams } from "@/utils/init/inde
 // import { Columns, TabColumns } from "./column";
 import judgeColumns from "./column";
 import { tax, currency } from "@/components/popover-select-v2/fetch";
+import VirtualScroll from 'el-table-virtual-scroll';
+import { VirtualColumn } from 'el-table-virtual-scroll';
 
 const {Columns,TabColumns} = judgeColumns();
     
@@ -32,6 +34,7 @@ export default {
   },
   dicts: initDicts(SelectColumns),
   components: {
+    'virtual-scroll':VirtualScroll,VirtualColumn,
     FileUploadCenter: () => import("../components/FileUploadCenter/index.vue"),
     popDialog: () => import("@/components/PopDialog/index.vue"),
     BatchImport: () => import("@/components/BatchImport/index.vue"),
@@ -55,6 +58,7 @@ export default {
       tabColumns: NewTabColumns,
       tabName: "puOrderItemList",
       isCopy:false,
+      tableData:[],  //虚拟滚动加载显示的数据
     };
   },
   computed: {
@@ -243,6 +247,7 @@ export default {
               rowData["currency"] = '1002Z0100000000001K1';
               rowData["currencyName"] = '人民币';
             }
+            rowData['insertId'] = new Date().getTime();
           
 
           // 是否完成询价,新增明细行需默认明细为false
@@ -622,51 +627,53 @@ export default {
         let {code,data} = await orderApi.orderImport(formData);
 
         if(code == 200) {
-          this.tabLoading = true;
+          // this.tabLoading = true;
           // puOrderExecuteList puOrderItemList
 
-          let size = 20;
-          let num = 1;
-          let total = Math.ceil(data['puOrderItemList'].length / size);
+          // let size = 20;
+          // let num = 1;
+          // let total = Math.ceil(data['puOrderItemList'].length / size);
 
-          let resultData = {...data};
+          // let resultData = {...data};
           
-          let intervalPush = setInterval(()=>{
+          // let intervalPush = setInterval(()=>{
 
-            if(num > total){
+          //   if(num > total){
               
-              clearInterval(intervalPush);
+          //     clearInterval(intervalPush);
 
-              this.tabLoading = false;
+          //     this.tabLoading = false;
             
-              this.handleGetPrice();
-            } 
+          //     this.handleGetPrice();
+          //   } 
     
-            for (const key in resultData) {
+          //   for (const key in resultData) {
 
-              resultData[key].slice(size*(num-1), (size*num) ).forEach(item =>{
+          //     resultData[key].slice(size*(num-1), (size*num) ).forEach(item =>{
             
 
-                this.params[key].push(item);
+          //       this.params[key].push(item);
 
-              })
+          //     })
 
-            }
+          //   }
 
-            num++;
+          //   num++;
 
-          },200);
+          // },200);
 
-          // for (const key in data) {
+          for (const key in data) {
 
-          //   this.params[key].push(...data[key]);
+            this.params[key].push(...data[key]);
 
-          // }
+          }
 
           
           let {setVisible} =  this.$refs.batchImport;
           
           setVisible(false);
+
+          this.handleGetPrice();
           
             
           
@@ -888,12 +895,26 @@ export default {
             :label="column.title"
             :name="column.key"
           >
+
+          <virtual-scroll 
+            :data="params[column.key]" 
+            :item-size="53" 
+            :key-prop="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'" 
+            @change="(virtualList) => tableData = virtualList" 
+            :virtualized="true"
+          >
+      <!-- row-key绑定列唯一值,height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板-->
+          
             <el-table 
-              :data="params[column.key]" 
+              :row-key="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'" 
+              :data="tableData" 
               style="width: 100%"
-              :height="params[column.key].length ? 300 : 100"
+              height="calc(100vh - 440px)"
               border
             >
+              <template slot="empty">
+                <el-empty description="暂无数据"></el-empty>
+              </template>
               <el-table-column
                 v-for="(cColumn, cIndex) in column.tableColumns"
                 :key="cIndex"
@@ -906,12 +927,13 @@ export default {
                   {{ cColumn.title }}
                 </span>
               </template>
+
                 <template slot-scope="scope">
                   <el-form-item 
                     label-width="0" 
-                    :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
-                    :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }"
-                  >
+                    >
+                    <!-- :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
+                    :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }" -->
                     <el-tag v-if="cColumn.key === 'index'" >
                       {{ scope.$index + 1 }}
                     </el-tag>
@@ -1002,6 +1024,10 @@ export default {
                 </template>
               </el-table-column>
             </el-table>
+          </virtual-scroll>
+
+
+            
           </el-tab-pane>
         </el-tabs>
         <el-row style="position: absolute; top: 20px; right: 20px">

+ 46 - 29
src/views/purchase/purchase-order/edit/index.vue

@@ -3,11 +3,14 @@ import { editColumns, editTabColumns, forbidden, SelectColumns } from "./initCol
 import orderApi from "@/api/business/purchase/purchase-order";
 import {  initDicts, initRules, initParams } from "@/utils/init/index.js";
 import { tax, currency } from "@/components/popover-select-v2/fetch";
+import VirtualScroll from 'el-table-virtual-scroll';
+import { VirtualColumn } from 'el-table-virtual-scroll';
 
 export default {
   name: "EditPurchaseOrderDrawer",
   dicts: initDicts(SelectColumns),
   components: {
+    'virtual-scroll':VirtualScroll,VirtualColumn,
     FileUploadCenter: () => import('../components/FileUploadCenter/index.vue'),
     BatchImport: () => import("@/components/BatchImport/index.vue"),
   },
@@ -27,7 +30,8 @@ export default {
 
       tabColumns: editTabColumns,
       tabName: "puOrderItemList",
-      count:1
+      count:1,
+      tableData:[],  //虚拟滚动加载显示的数据
     };
   },
   computed: {
@@ -638,51 +642,53 @@ export default {
         let {code,data} = await orderApi.orderImport(formData);
 
         if(code == 200) {
-          this.tabLoading = true;
-          // puOrderExecuteList puOrderItemList
 
-          let size = 20;
-          let num = 1;
-          let total = Math.ceil(data['puOrderItemList'].length / size);
+          // this.tabLoading = true;
+          // // puOrderExecuteList puOrderItemList
 
-          let resultData = {...data};
+          // let size = 20;
+          // let num = 1;
+          // let total = Math.ceil(data['puOrderItemList'].length / size);
+
+          // let resultData = {...data};
           
-          let intervalPush = setInterval(()=>{
+          // let intervalPush = setInterval(()=>{
 
-            if(num > total){
+          //   if(num > total){
               
-              clearInterval(intervalPush);
+          //     clearInterval(intervalPush);
 
-              this.tabLoading = false;
+          //     this.tabLoading = false;
             
-              this.handleGetPrice();
-            } 
+          //     this.handleGetPrice();
+          //   } 
 
-            for (const key in resultData) {
+          //   for (const key in resultData) {
 
-              resultData[key].slice(size*(num-1), (size*num) ).forEach(item =>{
+          //     resultData[key].slice(size*(num-1), (size*num) ).forEach(item =>{
 
-                this.params[key].push(item);
+          //       this.params[key].push(item);
 
-              })
+          //     })
               
-            }
+          //   }
 
-            num++;
+          //   num++;
 
-          },200);
+          // },200);
 
-          // for (const key in data) {
+          for (const key in data) {
 
-          //   this.params[key].push(...data[key]);
+            this.params[key].push(...data[key]);
 
-          // }
+          }
           
           let {setVisible} =  this.$refs.batchImport;
           
           setVisible(false);
           
-          if(num > total) this.handleGetPrice();
+          // if(num > total)
+           this.handleGetPrice();
           
         }
         
@@ -861,11 +867,20 @@ export default {
             :label="column.title" 
             :name="column.key"
             >
+
+            <virtual-scroll 
+              :data="params[column.key].filter(item => item.delFlag === '0')" 
+              :item-size="53" 
+              :key-prop="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'" 
+              @change="(virtualList) => tableData = virtualList" 
+              :virtualized="true"
+            >
+            <!-- row-key绑定列唯一值,height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板-->
             <el-table 
               border
-              :data="params[column.key].filter(item => item.delFlag === '0')" 
+              :data="tableData" 
               style="width: 100%"
-              :height="params[column.key].filter(item => item.delFlag === '0').length ? 300 : 100"
+              height="calc(100vh - 440px)"
             >
               <el-table-column label="序号">
                 <template slot-scope="scope">
@@ -889,9 +904,9 @@ export default {
 
                   <el-form-item 
                     label-width="0" 
-                    :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
-                    :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }"
-                  >
+                    >
+                    <!-- :prop="`${column.key}.${scope.$index}.${[cColumn.key]}`"
+                    :rules="{ required: cColumn.require || false, message: `${cColumn.title}不能为空`, trigger: 'change' }" -->
 
                   <span v-if="!cColumn.inputType">
                     {{ scope.row[cColumn.key] }}
@@ -983,6 +998,8 @@ export default {
                 </template>
               </el-table-column>
             </el-table>
+          </virtual-scroll>
+           
           </el-tab-pane>
         </el-tabs>
         <el-row style="position: absolute; top: 20px; right: 20px">

+ 18 - 2
src/views/purchase/purchase-order/see/index.vue

@@ -10,6 +10,8 @@ import {
 import orderApi from "@/api/business/purchase/purchase-order";
 import { PRINT } from "@/api/business/purchase/task";
 import judgeColumns from "../add/column";
+import VirtualScroll from 'el-table-virtual-scroll';
+import { VirtualColumn } from 'el-table-virtual-scroll';
 
 const { Columns, TabColumns } = judgeColumns();
 
@@ -29,6 +31,7 @@ export default {
   name: "SeePurchaseOrderDrawer",
   dicts: initDicts(SelectColumns),
   components: {
+    'virtual-scroll':VirtualScroll,VirtualColumn,
     FileUploadCenter: () => import('../components/FileUploadCenter/index.vue'),
     FilePrint:() => import('../print/index.vue'),
   },
@@ -47,6 +50,7 @@ export default {
 
       tabColumns: NewTabColumns,
       tabName: "puOrderItemList",
+      tableData:[],  //虚拟滚动加载显示的数据
     };
   },
   computed: {},
@@ -327,10 +331,19 @@ export default {
             :label="column.title" 
             :name="column.key"
           >
-            <el-table 
+
+            <virtual-scroll 
               :data="params[column.key].filter(item => item.delFlag === '0')" 
+              :item-size="53" 
+              :key-prop="column.key === 'puOrderItemList' ? 'rowNo' :'rowno'" 
+              @change="(virtualList) => tableData = virtualList" 
+              :virtualized="true"
+            >
+            <!-- row-key绑定列唯一值,height一定要设置否则会滚动条滚动位置不对且数据滚动全部加载完后会出现白板-->
+            <el-table 
+              :data="tableData" 
               style="width: 100%"  
-              :height="params[column.key].filter(item => item.delFlag === '0').length ? 300 : 100"
+              height="calc(100vh - 440px)"
               border
             >
               <el-table-column label="序号">
@@ -420,6 +433,9 @@ export default {
                 </template>
               </el-table-column>
             </el-table>
+          
+          </virtual-scroll>
+            
           </el-tab-pane>
         </el-tabs>
       </el-card>