fengyuan_yang
/
boying-vue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

2025-11-20 

IPQC检验增加项目操作
master
fengyuan_yang 2 months ago
parent
c68c37179a
commit
2dc1223593
1 changed files with 312 additions and 65 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 377
      src/views/modules/qc/IPQCResultEntry.vue

377
src/views/modules/qc/IPQCResultEntry.vue
View File

@ -1048,120 +1048,162 @@
</el-dialog>
<!-- 项目操作对话框 -->
<el-dialog title="检验项目操作" @close="refreshInspectionDetailList" :close-on-click-modal="false" v-drag :visible.sync="itemOperationDialogFlag" width="1100px">
<div style="font-size: 12px">
<el-form :inline="true" label-position="top">
<el-form-item :label="'项目编码'">
<el-input v-model="itemOperationQuery.itemNo" clearable style="width: 120px"></el-input>
<el-dialog
title="检验项目操作"
@close="refreshInspectionDetailList"
:close-on-click-modal="false"
v-drag
:visible.sync="itemOperationDialogFlag"
width="1200px"
custom-class="item-operation-dialog">
<!-- 查询区域 -->
<div class="search-container">
<el-form :inline="true" size="small">
<el-form-item label="项目编码">
<el-input
v-model="itemOperationQuery.itemNo"
placeholder="请输入项目编码"
clearable
prefix-icon="el-icon-search"
style="width: 160px">
</el-input>
</el-form-item>
<el-form-item :label="'项目名称'">
<el-input v-model="itemOperationQuery.itemDesc" clearable style="width: 200px"></el-input>
<el-form-item label="项目名称">
<el-input
v-model="itemOperationQuery.itemDesc"
placeholder="请输入项目名称"
clearable
prefix-icon="el-icon-search"
style="width: 200px">
</el-input>
</el-form-item>
<el-form-item :label="' '">
<el-button type="primary" @click="searchIPQCItems">查询</el-button>
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="searchIPQCItems" size="small">查询</el-button>
<el-button icon="el-icon-refresh" @click="resetItemQuery" size="small">重置</el-button>
</el-form-item>
</el-form>
</div>
<el-container style="margin-top: 0px;">
<el-main style="width: 720px; padding: 1px">
<span style="font-size: 12px">可选项目：</span>
<!-- 主内容区域 -->
<div class="item-operation-content">
<!-- 可选项目 -->
<div class="item-panel available-panel">
<div class="panel-header">
<i class="el-icon-s-unfold"></i>
<span class="panel-title">可选项目</span>
<span class="item-count">({{ availableItemList.length }})</span>
</div>
<el-table
height="400px"
height="420px"
:data="availableItemList"
border
ref="availableItemTable"
@row-click="availableItemClickRow"
@selection-change="availableItemSelectionChange"
highlight-current-row
style="width: 100%">
class="operation-table"
:header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '500'}">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
width="45"
align="center">
</el-table-column>
<el-table-column
prop="itemNo"
header-align="center"
align="center"
min-width="80"
label="项目编码">
width="100"
label="编码">
</el-table-column>
<el-table-column
prop="itemDesc"
header-align="center"
align="center"
min-width="120"
label="项目名称">
align="left"
min-width="140"
show-overflow-tooltip
label="名称">
</el-table-column>
<el-table-column
prop="defaultValue"
header-align="center"
align="center"
min-width="100"
width="80"
show-overflow-tooltip
label="标准值">
</el-table-column>
<el-table-column
prop="maxValue"
header-align="center"
align="center"
min-width="60"
label="最大值">
</el-table-column>
<el-table-column
prop="minValue"
header-align="center"
align="center"
min-width="60"
label="最小值">
width="100"
label="范围">
<template slot-scope="scope">
<span v-if="scope.row.minValue || scope.row.maxValue" style="font-size: 12px; color: #909399;">
{{ scope.row.minValue || '-' }} ~ {{ scope.row.maxValue || '-' }}
</span>
</template>
</el-table-column>
</el-table>
</el-main>
<el-main style="width: 111px;padding: 1px">
<div style="margin-top: 182px;margin-left: 18px">
<el-button type="primary" @click="addInspectionItems">添加>></el-button>
</div>
<div style="margin-top: 15px;margin-left: 18px">
<el-button type="primary" @click="deleteInspectionItems">删除<<</el-button>
</div>
<!-- 操作按钮 -->
<div class="operation-buttons">
<el-tooltip content="添加选中项目" placement="left">
<el-button
type="primary"
icon="el-icon-d-arrow-right"
circle
@click="addInspectionItems"
:disabled="!availableItemSelections || availableItemSelections.length === 0">
</el-button>
</el-tooltip>
<el-tooltip content="移除选中项目" placement="right">
<el-button
type="danger"
icon="el-icon-d-arrow-left"
circle
@click="deleteInspectionItems"
:disabled="!selectedItemSelections || selectedItemSelections.length === 0">
</el-button>
</el-tooltip>
</div>
<!-- 已有项目 -->
<div class="item-panel selected-panel">
<div class="panel-header">
<i class="el-icon-s-check"></i>
<span class="panel-title">已有项目</span>
<span class="item-count">({{ selectedItemList.length }})</span>
</div>
</el-main>
<el-main style="width: 400px;padding: 1px">
<span style="font-size: 12px">已有项目：</span>
<el-table
height="400px"
height="420px"
:data="selectedItemList"
border
ref="selectedItemTable"
@row-click="selectedItemClickRow"
@selection-change="selectedItemSelectionChange"
highlight-current-row
style="width: 100%">
class="operation-table"
:header-cell-style="{background: '#f5f7fa', color: '#606266', fontWeight: '500'}">
<el-table-column
type="selection"
header-align="center"
align="center"
width="50">
width="45"
align="center">
</el-table-column>
<el-table-column
prop="itemNo"
header-align="center"
align="center"
min-width="80"
label="项目编码">
width="100"
label="编码">
</el-table-column>
<el-table-column
prop="itemDesc"
header-align="center"
align="center"
align="left"
min-width="200"
label="项目名称">
show-overflow-tooltip
label="名称">
</el-table-column>
</el-table>
</el-main>
</el-container>
<el-footer style="height:40px;margin-top: 20px;text-align:center">
<el-button type="primary" @click="itemOperationDialogFlag = false">关闭</el-button>
</el-footer>
</div>
</div>
<!-- 底部按钮 -->
<div slot="footer" class="dialog-footer">
<el-button @click="itemOperationDialogFlag = false" size="small">关闭</el-button>
</div>
</el-dialog>
<Chooselist ref="baseList" @getBaseData="getBaseData"></Chooselist>
@ -4408,6 +4450,15 @@
}
},
// 重置查询条件
resetItemQuery() {
this.itemOperationQuery = {
itemNo: '',
itemDesc: '',
}
this.searchIPQCItems()
},
// 可选项目行点击
availableItemClickRow(row) {
this.$refs.availableItemTable.toggleRowSelection(row)
@ -4739,4 +4790,200 @@
height: auto;
line-height: 1.5;
}
/* ==================== 检验项目操作对话框样式 ==================== */
/deep/ .item-operation-dialog {
border-radius: 8px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
/deep/ .item-operation-dialog .el-dialog__header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px 24px;
border-radius: 8px 8px 0 0;
}
/deep/ .item-operation-dialog .el-dialog__title {
color: #ffffff;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
}
/deep/ .item-operation-dialog .el-dialog__headerbtn .el-dialog__close {
color: #ffffff;
font-size: 20px;
font-weight: bold;
}
/deep/ .item-operation-dialog .el-dialog__headerbtn:hover .el-dialog__close {
color: #f0f0f0;
}
/deep/ .item-operation-dialog .el-dialog__body {
padding: 24px;
background: #f8f9fa;
}
/* 查询区域样式 */
.search-container {
background: #ffffff;
padding: 16px 20px;
border-radius: 6px;
margin-bottom: 20px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.search-container .el-form-item {
margin-bottom: 0;
}
.search-container .el-form-item__label {
font-weight: 500;
color: #606266;
}
/* 主内容区域 */
.item-operation-content {
display: flex;
gap: 16px;
align-items: stretch;
}
/* 项目面板 */
.item-panel {
flex: 1;
background: #ffffff;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: all 0.3s ease;
}
.item-panel:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.available-panel {
flex: 1.5;
}
.selected-panel {
flex: 1;
}
/* 面板头部 */
.panel-header {
padding: 14px 16px;
background: linear-gradient(135deg, #f5f7fa 0%, #e8eaf0 100%);
border-bottom: 2px solid #dcdfe6;
display: flex;
align-items: center;
gap: 8px;
}
.panel-header i {
font-size: 18px;
color: #606266;
}
.panel-title {
font-size: 14px;
font-weight: 600;
color: #303133;
letter-spacing: 0.5px;
}
.item-count {
margin-left: auto;
font-size: 12px;
color: #909399;
background: #ffffff;
padding: 2px 10px;
border-radius: 12px;
font-weight: 500;
}
/* 表格样式优化 */
.operation-table {
border: none !important;
}
.operation-table /deep/ .el-table__body tr:hover > td {
background-color: #f0f7ff !important;
}
.operation-table /deep/ .el-table__row.current-row > td {
background-color: #e6f2ff !important;
}
.operation-table /deep/ td {
border-bottom: 1px solid #f0f0f0;
}
.operation-table /deep/ .el-table__body {
font-size: 13px;
}
/* 操作按钮区域 */
.operation-buttons {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 20px;
padding: 0 8px;
}
.operation-buttons .el-button {
width: 48px;
height: 48px;
font-size: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.operation-buttons .el-button:hover {
transform: scale(1.1);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
.operation-buttons .el-button.is-disabled {
opacity: 0.4;
cursor: not-allowed;
}
.operation-buttons .el-button--primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
}
.operation-buttons .el-button--danger {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border: none;
}
/* 底部按钮 */
.dialog-footer {
text-align: center;
padding: 16px 0 0;
}
.dialog-footer .el-button {
min-width: 100px;
font-weight: 500;
}
/* 响应式优化 */
@media (max-width: 1300px) {
.item-operation-content {
gap: 12px;
}
.operation-buttons .el-button {
width: 42px;
height: 42px;
font-size: 18px;
}
}
</style>
Write Preview
Loading…
Cancel
Save