diff --git a/src/views/wpm_bx/mlogbw_check_table.vue b/src/views/wpm_bx/mlogbw_check_table.vue index e3ae7b3a..1bd23e52 100644 --- a/src/views/wpm_bx/mlogbw_check_table.vue +++ b/src/views/wpm_bx/mlogbw_check_table.vue @@ -32,41 +32,42 @@ > - - - - + +
+
+ + + + - - - - - - - - - - - - - - + + + + + + + + + + + + + - - - - - - - - - - - -
序号物料批次物料编号生产设备扭转日期{{ item.testitem_name }}{{ item.defect_name }}备注操作
+ 序号物料批次物料编号生产设备扭转日期{{ item.testitem_name }}{{ item.defect_name }}备注操作
+ {{ index + 1 }} + {{ row.mlogb__batch }} + {{ row.number }} ——{{ row.wpr_number_out }} + {{ row.equip_name }}{{ row.equip_number }} +
{{ row.work_start_time}}
+ {{ row[item.testitem_name] }} @@ -97,24 +98,47 @@ + + {{ row.note }} + - - +
+ +
+ + +
+
+
+ { 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;