2025-11-20

IPQC检验增加项目操作

src/views/modules/qc/IPQCResultEntry.vue

@@ -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>