浏览代码

采购单虚拟列表

lilei 2 年之前
父节点
当前提交
76924370a2
共有 6 个文件被更改,包括 54 次插入22 次删除
  1. 1 1
      public/version.json
  2. 1 5
      src/components/index.less
  3. 26 1
      src/components/newThem.less
  4. 0 2
      src/main.js
  5. 24 11
      src/views/purchasingManagement/purchaseOrderNew/edit.vue
  6. 2 2
      vue.config.js

+ 1 - 1
public/version.json

@@ -1,5 +1,5 @@
 {
   "message": "发现有新版本发布,确定更新系统?",
   "vendorJsVersion": "",
-  "version": 1677135048382
+  "version": 1677138747105
 }

+ 1 - 5
src/components/index.less

@@ -1,10 +1,6 @@
 @import '~ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
-// @import "~ant-design-vue/lib/style/index";
+@import '~vue-easytable/packages/theme-default/index.less';
 @import './newThem.less'; // 用于覆盖上面定义的变量
-// The prefix to use on all css classes from ant-pro.
-@ant-pro-prefix             : ant-pro;
-@ant-global-sider-zindex    : 106;
-@ant-global-header-zindex   : 105;
 
 .text-overflow{
     overflow: hidden;    

+ 26 - 1
src/components/newThem.less

@@ -1,3 +1,7 @@
+// The prefix to use on all css classes from ant-pro.
+@ant-pro-prefix             : ant-pro;
+@ant-global-sider-zindex    : 106;
+@ant-global-header-zindex   : 105;
 @font-size-base: 12px;
 @table-row-hover-bg: color(~`colorPalette('@{warning-color}', 3) `);
 @text-color: fade(@black, 100%);
@@ -9,4 +13,25 @@
 @table-padding-horizontal: 5px;
 @border-color-base: #dedede;
 @border-color-split: #dedede;
-@input-disabled-bg: #dedede;
+@input-disabled-bg: #dedede;
+
+// vue-easytable new style
+@ve-default-font-size: 12px;
+@ve-table-head-row-height: 30px;
+@ve-table-body-row-height: 30px;
+@ve-table-foot-row-height: 30px;
+@ve-table-head-row-td-padding: 5px;
+@ve-table-body-row-td-padding: 5px;
+@ve-table-body-row-expand-content-padding: 0 5px;
+@ve-table-foot-row-td-padding: 5px;
+@ve-table-border-color: #ddd;
+@ve-table-column-fixed-border-color: #aaa;
+@ve-table-body-row-hover-background-color: rgb(255, 230, 148);
+@ve-table-body-row-highlight-background-color: rgb(255, 241, 197);
+
+.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content{
+    border-bottom: 1px solid #ddd;
+}
+.ve-table .ve-table-container .ve-table-content-wrapper table.ve-table-content thead.ve-table-header tr.ve-table-header-tr th.ve-table-header-th{
+    font-weight: 900;
+}

+ 0 - 2
src/main.js

@@ -8,8 +8,6 @@ import { VueAxios } from './utils/request'
 import Viewer from 'v-viewer'
 import 'viewerjs/dist/viewer.css'
 
-// 引入样式
-import "vue-easytable/libs/theme-default/index.css";
 // 引入组件库
 import VueEasytable from "vue-easytable";
 Vue.use(VueEasytable);

+ 24 - 11
src/views/purchasingManagement/purchaseOrderNew/edit.vue

@@ -56,7 +56,7 @@
       <!-- 购物车 -->
       <shopingCatModal :showModal="openShopCatModal" :paramsData="paramsData" @close="openShopCatModal=false" @ok="getOrderDetail(false, true)"></shopingCatModal>
       <!-- 已选产品 -->
-      <div>
+      <div id="purchaseTable">
         <div class="chooseBox-title">
           <div class="sub-title" style="display: flex;">
             已选产品
@@ -99,10 +99,11 @@
           </div>
           <!-- 列表 -->
           <ve-table
-            class="sTable"
             border-y
-            ref="purchaseTable"
+            border-around
             :max-height="tableHeight"
+            :row-style-option="{clickHighlight: true}"
+            :cellSelectionOption="{enable: false}"
             :virtual-scroll-option="{enable: true}"
             :columns="chooseColumns"
             :table-data="localDataSource"
@@ -234,6 +235,7 @@ export default {
         productCode: '',
         orderBy: 'purchase_bill_detail.CREATE_DATE desc'
       },
+      loadingInstance: null,
       purchaseDisabled: false, //  查询、重置按钮是否可操作
       localDataSource: [],
       openGuideModal: false, //  导入产品引导
@@ -249,22 +251,22 @@ export default {
     chooseColumns () {
       const _this = this
       const arr = [
-        { title: '序号', key: "a", field: 'no', width: '5%', align: 'center' },
-        { title: '产品编码',key: "b", field: 'productCode', width: '20%', align: 'center'},
-        { title: '产品名称',key: "c", field: 'productName', width: '35%', align: 'center', ellipsis: true },
-        { title: '采购数量',key: "d", width: '8%', align: 'center',
+        { title: '序号', key: "a", field: 'no', width: '5%', align: 'center', operationColumn: false },
+        { title: '产品编码',key: "b", field: 'productCode', width: '20%', align: 'center', operationColumn: false},
+        { title: '产品名称',key: "c", field: 'productName', width: '35%', align: 'center', operationColumn: false,ellipsis: {showTitle: true} },
+        { title: '采购数量',key: "d", width: '8%', align: 'center', operationColumn: false, 
         renderBodyCell: ({ row, column, rowIndex }, h) => {
             return <qtyComp row={row} column={column} rowIndex={rowIndex} that={_this} />
         }},
-        { title: '单位',key: "e", field: 'productUnit', width: '8%', align: 'center' },
-        { title: '操作',key: "f", width: '8%', align: 'center',
+        { title: '单位',key: "e", field: 'productUnit', width: '8%', align: 'center', operationColumn: false },
+        { title: '操作',key: "f", width: '8%', align: 'center', operationColumn: false,
         renderBodyCell: ({ row, column, rowIndex }, h) => {
             return <actionComp row={row} column={column} rowIndex={rowIndex} that={_this} />
         }}
       ]
       if (this.$hasPermissions('M_ShowAllCost')) {
-        arr.splice(3, 0, { title: '采购单价',key: "h", field: 'discountedPrice', width: '8%', align: 'right'})
-        arr.splice(6, 0, { title: '采购金额',key: "i", field: 'discountedAmount', width: '8%', align: 'right'})
+        arr.splice(3, 0, { title: '采购单价',key: "h", field: 'discountedPrice', width: '8%', align: 'right', operationColumn: false})
+        arr.splice(6, 0, { title: '采购金额',key: "i", field: 'discountedAmount', width: '8%', align: 'right', operationColumn: false})
       }
       return arr
     }
@@ -273,6 +275,7 @@ export default {
     getTableData(){
         this.disabled = true
         this.spinning = true
+        this.loadingInstance.show()
         // 查询总计
         const params = Object.assign({ pageNo: 1, pageSize: 10000 }, this.productForm, { purchaseBillSn: this.$route.params.sn })
         purchaseDetailList(params).then(res => {
@@ -291,6 +294,7 @@ export default {
           this.localDataSource = data.list
           this.disabled = false
           this.spinning = false
+          this.loadingInstance.close()
         })
     },
     // 获取采购单基本信息
@@ -490,6 +494,12 @@ export default {
     pageInit () {
       this.$nextTick(() => {
         this.setTableH()
+        this.loadingInstance = this.$veLoading({
+            target: document.querySelector("#purchaseTable"),
+            name: "pulse",
+            lock: true,
+            fullscreen: false
+        });
         this.getOrderDetail(false, true)
       })
     }
@@ -512,6 +522,9 @@ export default {
       this.pageInit()
     }
   },
+  destroyed() {
+      this.loadingInstance.destroy();
+  },
   beforeRouteEnter (to, from, next) {
     next(vm => {})
   }

+ 2 - 2
vue.config.js

@@ -211,8 +211,8 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
       '/api': {
-        target: 'http://192.168.0.216:8076/qpls-md',
-        // target: 'http://p.iscm.360arrow.com/qpls-md',
+        // target: 'http://192.168.0.216:8076/qpls-md',
+        target: 'http://p.iscm.360arrow.com/qpls-md',
         // ws: false,
         ws: true,
         changeOrigin: true,