fix:输出检验表固定前几列和操作列

src/views/wpm_bx/mlogbw_check_table.vue

@@ -32,36 +32,37 @@
 					></scFileImport><!-- :templateUrl="checkTemplate" -->
 				</div>
 			</div>
+			<div class="table-scroll">
 				<table id="mlogbwlist" class="tables">
 					<thead>
 						<tr>
-						<th class="w_50" style="padding: 5px;">
+							<th class="w_50 sticky-cell sticky-left-select" style="padding: 5px;">
 							<input type="checkbox" class="checkboxInput" v-model="selectedAll" :value="selectedAll"  @change="selectAllChange">
 						</th>
-						<th class="w_50">序号</th>
+							<th class="w_50 sticky-cell sticky-left-index">序号</th>
-						<th class="w_140">物料批次</th>
+							<th class="w_140 sticky-cell sticky-left-batch">物料批次</th>
-						<th class="w_150">物料编号</th>
+							<th class="w_140 sticky-cell sticky-left-number">物料编号</th>
 							<th class="w_150" v-if="route_code=='niuzhuan'">生产设备</th>
 							<th class="w_180" v-if="route_code=='niuzhuan'">扭转日期</th>
 							<th class="w_80" v-for="item in qct_testitems" :key="item.id">{{ item.testitem_name }}</th>
 							<th class="w_80" v-for="item in qct_defects" :key="item.id">{{ item.defect_name }}</th>
 							<th class="w_80">备注</th>
-						<th class="w_180" v-if="!isSubmit">操作</th>
+							<th class="w_150 sticky-cell sticky-right-action" v-if="!isSubmit">操作</th>
 						</tr>
 					</thead>
 					<tbody>
 						<tr v-for="(row, index) in mlogbwlist" :key="row.id">
-						<td class="w_50  padding_4" style="text-align: center;">
+							<td class="w_50 padding_4 sticky-cell sticky-left-select" style="text-align: center;">
 							<input type="checkbox" class="checkboxInput" v-model="selectedindexes" :value="row.id" @change="selectChange">
 						</td>
-						<td class="w_50  padding_4">
+							<td class="w_50 padding_4 sticky-cell sticky-left-index">
 							{{ index + 1 }}
 						</td>
-						<td class="w_140 ">
+							<td class="w_140 sticky-cell sticky-left-batch">
 							<input v-if="row.isEdit" v-model="row.mlogb__batch" placeholder="物料批次">
 							<span v-else>{{ row.mlogb__batch }}</span>
 						</td>
-						<td class="w_150 ">
+							<td class="w_140 sticky-cell sticky-left-number">
 							<input v-if="row.isEdit" v-model="row.number" placeholder="物料编号">
 							<span v-else>{{ row.number }}</span>
 							<span v-if="row.wpr_number_out !== null && row.wpr_number_out !== undefined">——{{ row.wpr_number_out }}</span>
@@ -104,17 +105,40 @@
 							<input v-if="row.isEdit" v-model="row.note" placeholder="备注">
 							<span v-else style="width: 100%;height: 100%;display: inline-block;">{{ row.note }}</span>
 						</td>
-						<td class="w_180 " v-if="!isSubmit">
+							<td
+								class="w_150 sticky-cell sticky-right-action operation-cell"
+								:class="{ 'is-menu-open': openedActionMenu === actionMenuKey(row, index) }"
+								v-if="!isSubmit"
+							>
 							<button v-if="row.isEdit" type="button" class="btn btn_green" @click="formTableSave(row,index)">保存</button>
 							<button v-if="row.isEdit && row.id" type="button" class="btn btn_red" @click="formTableCancel(row,index)">取消</button>
 							<button v-if="row.isEdit && setForm.cd_req_addr !== null" type="button" class="btn btn_yellow" @click="getEqData(index)">重取数据</button>
 							<button v-if="!row.isEdit" type="button" class="btn btn_blue" @click="formTableEdit(index)">编辑</button>
-							<button v-if="row.isEdit && !row.id" type="button" class="btn btn_red" @click="formTableDelet(row, index)">删除</button>
+							<div class="action-more" v-if="(row.isEdit && !row.id) || !row.isEdit">
-							<button v-if="!row.isEdit" type="button" class="btn btn_red" @click="formTableDel(row.id,index)">删除</button>
+								<button
+									type="button"
+									class="more-trigger"
+									aria-label="更多操作"
+									@click.stop="toggleActionMenu(actionMenuKey(row, index))"
+								>
+									<span></span>
+									<span></span>
+									<span></span>
+								</button>
+								<div
+									v-show="openedActionMenu === actionMenuKey(row, index)"
+									class="more-menu"
+									@click.stop
+								>
+									<button v-if="row.isEdit && !row.id" type="button" class="more-menu-btn" @click="formTableDelet(row, index)">删除</button>
+									<button v-if="!row.isEdit" type="button" class="more-menu-btn" @click="formTableDel(row.id,index)">删除</button>
+								</div>
+							</div>
 						</td>
 						</tr>
 					</tbody>
 				</table>
+			</div>
 		</el-main>
 	</el-container>
 	<el-dialog
@@ -405,6 +429,7 @@ export default {
 			selectWprList:[],
 			selectedindexes:[],
 			qct_defects_origin:[],
+			openedActionMenu: null,
 			tableHeight:500,
 			apiObjPrint:this.$API.cm.labelmat.fromWm,
 			printer_name:localStorage.getItem("printer_name"),
@@ -456,12 +481,31 @@ export default {
 		setTimeout(() => {
 			that.tableHeight = document.getElementById('mlogbwMain').clientHeight-20;
 		},500)
+		that.actionMenuClickHandler = (event) => that.handleDocumentClick(event);
+		document.addEventListener("click", that.actionMenuClickHandler, true);
 		
 	},
+	beforeUnmount() {
+		if (this.actionMenuClickHandler) {
+			document.removeEventListener("click", this.actionMenuClickHandler, true);
+		}
+	},
 	methods: {
 		refreshfun(){
 			this.getList();
 		},
+		actionMenuKey(row, index) {
+			return row.id || `new-${index}`;
+		},
+		toggleActionMenu(key) {
+			this.openedActionMenu = this.openedActionMenu === key ? null : key;
+		},
+		handleDocumentClick(event) {
+			if (event.target && event.target.closest(".action-more")) {
+				return;
+			}
+			this.openedActionMenu = null;
+		},
 		check_add(){
 			let that = this;
 			that.addTemplate.mlogb__batch = that.mlogb__batch;
@@ -1124,14 +1168,21 @@ that.$API.wpm.prints.req(printer_ip, obj).then((response) => {
 #mlogbwMain{
 	position: relative;
 }
+.table-scroll{
+	width: 100%;
+	overflow-x: auto;
+	overflow-y: hidden;
+}
 .width-100{
 	width: 100%;
 }
 table {
-	border-collapse: collapse; 
+	border-collapse: separate;
+	border-spacing: 0;
 }
-.tables,thead,tbody,tr {
+.tables {
 	width: max-content;
+	min-width: 100%;
 }
 table {
 	color: #606266;
@@ -1177,26 +1228,128 @@ input{
 }
 .w_50{
 	width: 50px;
+	min-width: 50px;
 }
 .w_80{
 	width: 80px;
+	min-width: 80px;
 }
 .w_120{
 	width: 120px;
+	min-width: 120px;
 }
 .w_140{
 	width: 140px;
+	min-width: 140px;
 }
 .w_150{
 	width: 150px;
+	min-width: 150px;
 }
 .w_180{
 	width: 180px;
+	min-width: 180px;
+}
+.sticky-cell{
+	position: sticky;
+	background: #fff;
+	z-index: 2;
+}
+thead .sticky-cell{
+	z-index: 4;
+}
+tbody tr:nth-child(odd) .sticky-cell{
+	background-color: #f5f7fa;
+}
+.sticky-left-select{
+	left: 0;
+}
+.sticky-left-index{
+	left: 50px;
+}
+.sticky-left-batch{
+	left: 100px;
+}
+.sticky-left-number{
+	left: 240px;
+}
+.sticky-right-action{
+	right: 0;
+	box-shadow: -2px 0 6px rgba(0, 0, 0, 0.08);
+}
+.sticky-left-select,
+.sticky-left-index,
+.sticky-left-batch,
+.sticky-left-number{
+	box-shadow: 2px 0 0 #ebeef5;
 }
 
 .padding_4{
 	padding: 4px; /* 添加内边距 */
 }
+.operation-cell{
+	position: sticky;
+	overflow: visible;
+	z-index: 5;
+}
+.operation-cell.is-menu-open{
+	z-index: 8;
+}
+.action-more{
+	position: absolute;
+	right: 8px;
+	bottom: 6px;
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+}
+.more-trigger{
+	display: inline-flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	gap: 3px;
+	width: 24px;
+	height: 24px;
+	padding: 0;
+	border: none;
+	background: transparent;
+	cursor: pointer;
+}
+.more-trigger span{
+	width: 4px;
+	height: 4px;
+	border-radius: 50%;
+	background: #909399;
+}
+.action-more:hover .more-trigger span{
+	background: #606266;
+}
+.more-menu{
+	position: absolute;
+	right: 0;
+	bottom: 28px;
+	min-width: 72px;
+	padding: 6px 0;
+	border: 1px solid #ebeef5;
+	border-radius: 4px;
+	background: #fff;
+	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
+	z-index: 12;
+}
+.more-menu-btn{
+	display: block;
+	width: 100%;
+	padding: 6px 12px;
+	border: none;
+	background: transparent;
+	color: #f56c6c;
+	text-align: left;
+	cursor: pointer;
+}
+.more-menu-btn:hover{
+	background: #fef0f0;
+}
 .btn{
     margin:0 5px;
     border: none;