mult seo

src/assets/css/global.css

@@ -18,6 +18,12 @@
 .el-table .purple-row {
   background: rgb(255, 0, 255);
 }
+
+/* 表格选中行 颜色 ::v-deep */
+.el-table__body tr.current-row>td {
+  background-color: #409EFF !important;
+}
+
 /* 表格行背景色样式 end */
 
 .publicfontsize{

src/components/patientRegister/PatientRegisterList.vue

@@ -1,8 +1,11 @@
 <template>
   <div style="display: flex">
-    <div :style="'margin-left:5px;width:' + (window.pageWidth - 200 - 120 - 85) + 'px;'" @contextmenu.prevent="onContextmenu">
-      <el-table :data="patientRegister.prList" border :height="window.pageHeight < 600 ? 172:Math.floor((window.pageHeight - 342)*2/3)" highlight-current-row
-        @row-click="rowick" size="small" @selection-change="handleSelectionChange" @cell-contextmenu="onCellRightClick">
+    <div :style="'margin-left:5px;width:' + (window.pageWidth - 200 - 120 - 85) + 'px;'"
+      @contextmenu.prevent="onContextmenu">
+      <el-table :data="patientRegister.prList" border
+        :height="window.pageHeight < 600 ? 172 : Math.floor((window.pageHeight - 342) * 2 / 3)" highlight-current-row
+        @row-click="rowick" size="small" @selection-change="handleSelectionChange" @cell-contextmenu="onCellRightClick"
+        ref="info" @select="shiftSelect" :row-class-name="handleRowClassName">
         <el-table-column type="selection" width="40">
         </el-table-column>
         <el-table-column prop="completeFlag" label="体检进度">
@@ -175,6 +178,9 @@
       <div class="listBtn">
         <el-button type="" class="btnClass commonbutton" @click="guidePrint('0001', true)">指引单预览</el-button>
       </div>
+      <div class="listBtn">
+        <el-button type="" class="btnClass commonbutton" @click="rowSelected(patientRegister.prList)">选中</el-button>
+      </div>
     </div>
 
     <!-- 体检人员登记 -->
@@ -320,6 +326,11 @@ export default {
   },
   data() {
     return {
+      startPoint: -1,// 多选起点 -1 表示选择
+      endPoint: -1,// 多选终点 -1 表示选择
+      pin: false,// 是否按住，默认不按住
+
+
       multipleSelection: [], //选中的数据列表
       dialogVisible: false,
       dialogCamera: false,
@@ -355,11 +366,33 @@ export default {
 
 
 
-  created() { },
+  created() {
+
+  },
 
   //挂载完成
   mounted() {
     this.quickAsb = this.dict.asbItemAll;
+
+    // 监听keydown：获取键盘按住事件,code返回按住的键信息
+    window.addEventListener('keydown', code => {      
+      // 判断是否按住了shift键（左右都包括）key: "Shift"
+      if (code.key == "Shift" && code.shiftKey) {
+        this.pin = true;// 标记按住了shift键            
+      }
+      console.log('this.pin', this.pin)
+    });
+    // 监听keyup：获取键盘松开事件,code返回按住的键信息
+    window.addEventListener('keyup', code => {
+      // 判断是否松开了shift键（左右都包括），以为之前已经按下了code.shiftKey已经是true
+      if (code.key == "Shift") {
+        this.pin = false;// 标记松开了shift键
+        // this.startPoint = undefined;// 清空多选起点
+        // this.endPoint = undefined;// 清空多选终点
+      }
+      console.log('this.pin', this.pin)
+    });
+
   },
   computed: {
     ...mapState(["window", "dict", "patientRegister", "customerOrg"]),
@@ -367,6 +400,24 @@ export default {
   methods: {
     ...mapActions(["getCustomerOrgGroup", "getPatientRegisterAbs"]),
 
+    handleRowClassName({ row, rowIndex }) {
+      // highLightBg 为 'selected'的高亮 
+      console.log(rowIndex, row)
+      //return row.highLightBg == 'selected' ? 'high-light-bg' : '';
+      if (row.choosed) {
+        return 'current-row';
+      } else {
+        return '';
+      }
+
+    },
+
+    rowSelected(rows) {
+      rows.forEach(e => {
+        this.$refs['info'].toggleRowSelection(e, true);
+      })
+    },
+
     // 打印指引单(isPreview)
     async guidePrint(ReportCode, isPreview) {
       let token = localStorage.getItem('token');
@@ -439,11 +490,74 @@ export default {
       }
     },
 
-    handleSelectionChange(val) {
-      this.multipleSelection = val;
+    handleSelectionChange(rows) {
+      //this.multipleSelection = rows;
       //console.log('this.multipleSelection',this.multipleSelection)
+
+      rows.forEach(item => {
+        item.highLightBg = 'selected';
+      });
+      // 取消全选
+      if (!rows.length) {
+        this.patientRegister.prList.forEach(item => {
+          item.highLightBg = '';
+        });
+      }
+      this.multipleSelection = JSON.parse(JSON.stringify(rows));
+
+
     },
 
+    // 按住shift多选
+    shiftSelect(rows, row) {
+      console.log('rows, row', rows, row)
+      // 判断原来选择的数组长度selectDatas和现在的长度rows
+      if (this.multipleSelection.length > rows.length) {
+        // 原来的长，说明取消勾选了，把当前条取消高亮
+        row.highLightBg = '';
+      } else {
+        // 现在的长，说明多勾选了，把当前条高亮
+        row.highLightBg = 'selected';
+      }
+      // 判断是勾选的时候才会多选
+      if (rows.length < this.multipleSelection.length) {
+        this.startPoint = undefined;// 清空多选起点
+        this.endPoint = undefined;// 清空多选终点
+        return;
+      }
+      // 判断此时有没有按住shift键
+      // 按住了则表示开始多选，没有则停止多选，清空起点终点.
+      // 开始多选则判断之前是否有起点
+      // 有则当前的index标记为终点且勾选这之间的数据，勾选结束清空起点终点
+      // 没有则当前的index标记为起点
+      // 记录当前的index为多选起点
+      if (this.pin) { // 按住了shift键
+        if (this.startPoint || this.startPoint == 0) { // 之前有多选起点（第一条单独）
+          this.endPoint = row.index;// 把当前项的index标记为多选终点
+          if (this.startPoint > this.endPoint) { // 如果起点大于终点，则替换否则保留，确保起点始终小于终点
+            let temp = this.startPoint;
+            this.startPoint = this.endPoint;
+            this.endPoint = temp;
+          }
+          // 避免和handleSelectionChange冲突导致返回的数据不准确
+          setTimeout(() => {
+            // 勾选数据
+            for (let i = this.startPoint + 1; i < this.endPoint; i++) {
+              this.$refs.info.toggleRowSelection(this.patientRegister.prList[i], true);
+            }
+            this.startPoint = undefined;// 清空多选起点
+            this.endPoint = undefined;// 清空多选终点
+          }, 100);
+        } else { // 之前没有多选起点
+          this.startPoint = row.index;// 把当前项的index标记为多选起点
+        }
+      } else { // 没按住shift键
+        this.startPoint = undefined;// 清空多选起点
+        this.endPoint = undefined;// 清空多选终点
+      }
+    },
+
+
     //获取单位分组 /api/app/customer-org-group/in-customer-org-id/3a0c0444-d7a0-871f-4074-19faf1655caf
     getCustomerOrgGroup(customerOrgld) {
       getapi(`/api/app/customer-org-group/in-customer-org-id/${customerOrgld}`)
@@ -467,7 +581,38 @@ export default {
       this.patientRegister.medicalPackageChange = 0;     //控制体检列表记录切换时，0 无需触发更换套餐操作
       this.getCustomerOrgGroup(row.customerOrgParentId);
       this.dict.asbItem = [...this.dict.asbItemAll]
-      //this.getPatientRegisterAbs(row.id);
+      this.getPatientRegisterAbs(row.id);
+
+      //清除所有选择
+      this.patientRegister.prList.forEach(e => {
+        e.choosed = false;
+      });
+
+      if (!this.pin) { // 按住了shift键
+        this.patientRegister.prList[row.index].choosed = true;
+        this.startPoint = row.index;
+        console.log('this.patientRegister.prList',this.pin,this.startPoint, this.patientRegister.prList)
+        return
+      } else {
+        if (this.startPoint == - 1) {
+          this.patientRegister.prList[row.index].choosed = true;
+          this.startPoint = row.index;
+          console.log('this.patientRegister.prList',this.pin, this.startPoint, this.patientRegister.prList)
+          return
+        }
+
+        if (this.startPoint > row.index) {
+          for (let i = row.index; i <= this.startPoint; i++) {
+            this.patientRegister.prList[i].choosed = true
+          }
+        } else if (this.startPoint <= row.index) {
+          for (let i = this.startPoint; i <= row.index; i++) {
+            this.patientRegister.prList[i].choosed = true
+          }
+        }
+      }
+      console.log('this.patientRegister.prList',this.pin, this.startPoint, this.patientRegister.prList)
+
     },
 
     //体检次数 相关操作
@@ -637,6 +782,12 @@ export default {
         .then((res) => {
           if (res.code != -1) {
             this.patientRegister.prList = res.data.items;
+
+            //配合多选使用
+            this.patientRegister.prList.forEach((item, index) => {
+              item.index = index;
+              item.choosed = false;
+            });
           }
           loading.close();
         })
@@ -1125,6 +1276,8 @@ export default {
 };
 </script>
 <style scoped>
+@import "../../assets/css/global.css";
+
 .box {
   display: flex;
 }
@@ -1152,8 +1305,10 @@ export default {
 
 /* 表格：单元格 行间距*/
 ::v-deep .el-table__cell {
-  padding-top: 2px;   /* 表格：单元格 行间距，默认 8px */
-  padding-bottom: 2px; /* 表格：单元格 行间距，默认 8px */
+  padding-top: 2px;
+  /* 表格：单元格 行间距，默认 8px */
+  padding-bottom: 2px;
+  /* 表格：单元格 行间距，默认 8px */
 }
 
 ::v-deep .el-table td.el-table__cell {
@@ -1172,9 +1327,9 @@ input[type="number"]::-webkit-outer-spin-button {
   margin: 0 !important;
 }
 
+/* 表格选中行 颜色  
 ::v-deep .el-table__body tr.current-row>td {
   background-color: #409EFF !important;
 }
-
-
+*/
 </style>

src/components/report/CusOrgOCX.vue

@@ -415,7 +415,7 @@ export default {
   padding: 2px 2px 2px 2px;   /* 上，右，下，左 */
 }
 
-
+/* 表格单元格 .el-table .cell ，默认 10 px*/
 ::v-deep .cell {
   padding-left: 2px;
   padding-right: 2px;

src/views/report/chargeAsbitem.vue

@@ -372,6 +372,12 @@ export default {
   /* 上，右，下，左 */
 }
 
+/* 表格单元格 .el-table .cell ，默认 10 px*/
+::v-deep .cell {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+
 .query {
   margin-left: 10px;
 }