fix:输出检验表固定前几列和操作列
This commit is contained in:
parent
0a27aa67ff
commit
493a9289fe
|
|
@ -32,41 +32,42 @@
|
|||
></scFileImport><!-- :templateUrl="checkTemplate" -->
|
||||
</div>
|
||||
</div>
|
||||
<table id="mlogbwlist" class="tables">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w_50" style="padding: 5px;">
|
||||
<div class="table-scroll">
|
||||
<table id="mlogbwlist" class="tables">
|
||||
<thead>
|
||||
<tr>
|
||||
<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_140">物料批次</th>
|
||||
<th class="w_150">物料编号</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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="(row, index) in mlogbwlist" :key="row.id">
|
||||
<td class="w_50 padding_4" style="text-align: center;">
|
||||
<th class="w_50 sticky-cell sticky-left-index">序号</th>
|
||||
<th class="w_140 sticky-cell sticky-left-batch">物料批次</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_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 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>
|
||||
</td>
|
||||
<td class="w_150 " v-if="route_code=='niuzhuan'">
|
||||
<td class="w_150 " v-if="route_code=='niuzhuan'">
|
||||
<select name="pets" id="pet-select" v-if="row.isEdit" style="width: 100%;" v-model="row.equip" :value="row.equip">
|
||||
<option v-for="item in optionsEq" :key="item.id" :value="item.id">
|
||||
{{ item.number }}
|
||||
|
|
@ -74,13 +75,13 @@
|
|||
</select>
|
||||
<span v-else>{{ row.equip_name }}<span v-if="row.equip_number&&row.equip_number!=null">{{ row.equip_number }}</span></span>
|
||||
</td>
|
||||
<td class="w_180 " v-if="route_code=='niuzhuan'">
|
||||
<td class="w_180 " v-if="route_code=='niuzhuan'">
|
||||
<input v-if="row.isEdit" type="datetime-local" id="datetime" v-model="row.work_start_time" @change = "timeChange(row)">
|
||||
<div v-else>
|
||||
<span v-if="row.work_start_time!==null">{{ row.work_start_time}}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="w_80 " v-for="item in qct_testitems" :key="item.id">
|
||||
<td class="w_80 " v-for="item in qct_testitems" :key="item.id">
|
||||
<span v-if="!row.isEdit || !item.canEdit">{{ row[item.testitem_name] }}</span>
|
||||
<input v-if="item.testitem_field_type == 'input-number' && row.isEdit && item.canEdit"
|
||||
type="number" v-model="row[item.testitem_name]" @change="defectCountSun(row)">
|
||||
|
|
@ -97,24 +98,47 @@
|
|||
<option v-for="item0 in item.testitem_choices" :key="item0" :value="item0">{{ item0 }}</option>
|
||||
</select>
|
||||
</td>
|
||||
<td class="w_80 padding_4 defectBlock" v-for="item in qct_defects" :key="item.id">
|
||||
<td class="w_80 padding_4 defectBlock" v-for="item in qct_defects" :key="item.id">
|
||||
<input type="checkbox" class="checkboxInput" :disabled="!row.isEdit || !item.canEdit" v-model="row[item.defect_name]" @change="switchChange(row, item,index)">
|
||||
</td>
|
||||
<td class="w_80 ">
|
||||
<td class="w_80 ">
|
||||
<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>
|
||||
<button v-if="!row.isEdit" type="button" class="btn btn_red" @click="formTableDel(row.id,index)">删除</button>
|
||||
<div class="action-more" v-if="(row.isEdit && !row.id) || !row.isEdit">
|
||||
<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>
|
||||
</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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue