ui

package.json

@@ -1,75 +1,76 @@
 {
-    "name": "peis",
-    "version": "0.1.0",
-    "private": true,
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "serve": "vue-cli-service serve",
-        "build": "vue-cli-service build",
-        "lint": "vue-cli-service lint"
+  "name": "peis",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "browser": {
+    "crypto": false
+  },
+  "dependencies": {
+    "axios": "^1.3.3",
+    "crypto-js": "^4.1.1",
+    "echarts": "^5.4.3",
+    "element-ui": "^2.15.13",
+    "exceljs": "^4.3.0",
+    "file-saver": "^2.0.5",
+    "html2canvas": "^1.4.1",
+    "moment": "^2.29.4",
+    "node-polyfill-webpack-plugin": "^2.0.1",
+    "print-js": "^1.6.0",
+    "sortablejs": "^1.15.0",
+    "umy-ui": "^1.1.6",
+    "vue": "^2.6.14",
+    "vue-contextmenujs": "^1.4.9",
+    "vue-img-cutter": "^3.0.5",
+    "vue-json-excel": "^0.3.0",
+    "vue-meta": "^2.4.0",
+    "vue-print-nb": "^1.7.5",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2",
+    "xlsx": "^0.18.5",
+    "xlsx-style": "^0.8.13"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-vuex": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^2.4.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "vue-img-cutter": "^3.0.5",
+    "vue-template-compiler": "^2.6.14"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
     },
-    "browser": {
-        "crypto": false
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended",
+      "plugin:prettier/recommended"
+    ],
+    "parserOptions": {
+      "parser": "@babel/eslint-parser"
     },
-    "dependencies": {
-        "axios": "^1.3.3",
-        "crypto-js": "^4.1.1",
-        "echarts": "^5.4.3",
-        "element-ui": "^2.15.13",
-        "exceljs": "^4.3.0",
-        "file-saver": "^2.0.5",
-        "html2canvas": "^1.4.1",
-        "moment": "^2.29.4",
-        "node-polyfill-webpack-plugin": "^2.0.1",
-        "print-js": "^1.6.0",
-        "sortablejs": "^1.15.0",
-        "vue": "^2.6.14",
-        "vue-contextmenujs": "^1.4.9",
-        "vue-img-cutter": "^3.0.5",        
-        "vue-json-excel": "^0.3.0",
-        "vue-meta": "^2.4.0",
-        "vue-print-nb": "^1.7.5",
-        "vue-router": "^3.5.1",
-        "vuex": "^3.6.2",
-        "xlsx": "^0.18.5",
-        "xlsx-style": "^0.8.13"
-    },
-    "devDependencies": {
-        "@babel/core": "^7.12.16",
-        "@babel/eslint-parser": "^7.12.16",
-        "@vue/cli-plugin-babel": "~5.0.0",
-        "@vue/cli-plugin-eslint": "~5.0.0",
-        "@vue/cli-plugin-router": "~5.0.0",
-        "@vue/cli-plugin-vuex": "~5.0.0",
-        "@vue/cli-service": "~5.0.0",
-        "eslint": "^7.32.0",
-        "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-prettier": "^4.0.0",
-        "eslint-plugin-vue": "^8.0.3",
-        "prettier": "^2.4.1",
-        "sass": "^1.32.7",
-        "sass-loader": "^12.0.0",
-        "vue-img-cutter": "^3.0.5",
-        "vue-template-compiler": "^2.6.14"
-    },
-    "eslintConfig": {
-        "root": true,
-        "env": {
-            "node": true
-        },
-        "extends": [
-            "plugin:vue/essential",
-            "eslint:recommended",
-            "plugin:prettier/recommended"
-        ],
-        "parserOptions": {
-            "parser": "@babel/eslint-parser"
-        },
-        "rules": {}
-    },
-    "browserslist": [
-        "> 1%",
-        "last 2 versions",
-        "not dead"
-    ]
+    "rules": {}
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ]
 }

src/assets/css/global_table.css

@@ -1,6 +1,7 @@
 /* 表格 表头 列间距控制 */
 
-.el-table th.el-table__cell>.cell {
+.el-table th.el-table__cell>.cell,
+.plTableBox .el-table th>.cell {
     text-align: center;
     /* 表格 表头 对齐方式，默认 left */
     padding-right: 2px;
@@ -35,7 +36,8 @@
     /* 上，右，下，左 */
 }
 
-.el-table .cell {
+.el-table .cell,
+.plTableBox .el-table .cell {
     padding: 0px 2px;
     /* 原始 默认 0px 10px; */
     line-height: 23px;
@@ -69,7 +71,8 @@
 
 /* 设置表体样式 */
 
-.el-table td.el-table__cell {
+.el-table td.el-table__cell,
+.plTableBox .el-table td.is-center {
     padding: 0;
     color: #52555F;
     /* 设置表体文字颜色 */
@@ -78,7 +81,11 @@
     font-family: "NotoSansSC-Regular";
 }
 
+
 /* 表格列排序 */
-.el-table .caret-wrapper {
-    width: 16px; /* 默认值 24px */
+
+.el-table .caret-wrapper,
+.plTableBox .el-table .caret-wrapper {
+    width: 16px;
+    /* 默认值 24px */
 }

src/components/patientRegister/PatientRegisterList.vue

@@ -4,13 +4,13 @@
     <div style="display: flex">
       <div :style="'width:' + (window.pageWidth - 200 - 145) + 'px;'" @contextmenu.prevent="onContextmenu">
         <div>
-          <el-table :data="tableData" border
+          <u-table :data="tableData" border
             :height="window.pageHeight < 600 ? 248 : Math.floor(((window.pageHeight - 250) * 2) / 3)"
             highlight-current-row @row-click="rowClick" size="small" row-key="id"
             @selection-change="handleSelectionChange" @cell-contextmenu="onCellRightClick" ref="info" id="info"
-            :row-class-name="handleRowClassName">
-            <el-table-column type="selection" width="40" align="center"></el-table-column>
-            <el-table-column v-for="(item, index) in dragCol" :key="index" :type="dragCol[index].type"
+            :row-class-name="handleRowClassName" use-virtual :row-height="30" @table-body-scroll="scrollFull" big-data-checkbox :data-changes-scroll-top="false">
+            <u-table-column type="selection" width="40" align="center"></u-table-column>
+            <u-table-column v-for="(item, index) in dragCol" :key="index" :type="dragCol[index].type"
               :min-width="dragCol[index].minWidth" :align="dragCol[index].align" :label="item.label"
               :prop="dragCol[index].prop" :sortable="dragCol[index].type || dragCol[index].prop == 'sn' ? false : true">
               <template slot-scope="scope" v-if="!(dragCol[index].type)">
@@ -91,7 +91,7 @@
                   </div>
                 </div>
               </template>
-            </el-table-column>
+            </u-table-column>
 
 
             <!--
@@ -120,7 +120,7 @@
           "creatorId": null,
           "id": "3a0c196d-a6d0-37fe-5c32-4806bdc4530f"
           -->
-          </el-table>
+          </u-table>
           <div style="display: flex;justify-content:space-between;">
             <div></div>
             <div>
@@ -428,7 +428,7 @@ export default {
       dialogColSort: false,
 
       dom: null,   //用于滚动加载数据
-      lazyLoading: false,  //是否懒加载中
+      // lazyLoading: false,  //是否懒加载中
       loadOpts: {
         totalCount: 0,
         skipCount: 0,
@@ -480,13 +480,11 @@ export default {
     this.quickAsb = this.dict.asbItemAll;
 
     this.peisid = window.sessionStorage.getItem('peisid');
-
-
-    this.$nextTick(() => {
-      this.scrollFull()
-    })
-
-
+    // if(this.$refs.info){
+    //       this.$nextTick(() => {
+    //   this.scrollFull()
+    // })
+    // }
   },
   computed: {
     ...mapState([
@@ -1230,25 +1228,33 @@ export default {
     },
 
     //滚动加载数据 
-    scrollFull() {
-      this.dom = this.$refs['info'].bodyWrapper
-      // console.log('this.dom', this.dom)
-
-      this.dom.addEventListener('scroll', async () => {
-        // // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
-        if (this.dom.scrollTop + this.dom.clientHeight + 20 > this.dom.scrollHeight && !this.lazyLoading) {
-          // 获取到的不是全部数据 当滚动到底部 
-          // console.log('scrollTop', this.dom.scrollTop, 'clientHeight', this.dom.clientHeight, 'scrollHeight', this.dom.scrollHeight);
-          if ((Number(this.loadOpts.skipCount) + 1) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
-            this.lazyLoading = false
+    async scrollFull(scroll,event) {
+      console.log(scroll)
+      if(scroll.judgeFlse){
+        if ((Number(this.loadOpts.skipCount) + 1) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
+          return
           } else {
-            this.lazyLoading = true
             await this.load()
-            this.lazyLoading = false
-            // this.dom.scrollTop = this.dom.scrollTop - 100
           }
-        }
-      })
+      }
+      // this.dom = this.$refs.info.bodyWrapper
+      // console.log('this.dom', this.dom)
+
+      // this.dom.addEventListener('scroll', async () => {
+      //   // // console.log('scrollTop',this.dom.scrollTop,'clientHeight',this.dom.clientHeight,'scrollHeight',this.dom.scrollHeight);
+      //   if (this.dom.scrollTop + this.dom.clientHeight + 20 > this.dom.scrollHeight && !this.lazyLoading) {
+      //     // 获取到的不是全部数据 当滚动到底部 
+      //     // console.log('scrollTop', this.dom.scrollTop, 'clientHeight', this.dom.clientHeight, 'scrollHeight', this.dom.scrollHeight);
+      //     if ((Number(this.loadOpts.skipCount) + 1) * Number(this.loadOpts.maxResultCount) >= Number(this.loadOpts.totalCount)) {
+      //       this.lazyLoading = false
+      //     } else {
+      //       this.lazyLoading = true
+      //       await this.load()
+      //       this.lazyLoading = false
+      //       // this.dom.scrollTop = this.dom.scrollTop - 100
+      //     }
+      //   }
+      // })
     },
 
 

src/main.js

@@ -10,8 +10,13 @@ import Print from "vue-print-nb";
 import Meta from 'vue-meta'
 import Contextmenu from 'vue-contextmenujs' //'vue-contextmenu'
 import "./assets/css/global_font.css";
+import UmyUi from 'umy-ui'
+import 'umy-ui/lib/theme-chalk/index.css'; // 引入样式
 
 
+
+
+Vue.use(UmyUi);
 Vue.use(Contextmenu);
 Vue.use(Meta);
 Vue.use(ElementUI);