2026-07-24

优化

src/views/modules/orderIssure/soIssueNotify/searchIssureNotifyForCK.vue

@@ -430,6 +430,28 @@ export default {
           columnWidth: 100,
           showOverflowTooltip: true
         },
+        {
+          columnProp: "returnQrt",
+          headerAlign: "center",
+          align: "right",
+          columnLabel: "累计退料数量",
+          columnHidden: false,
+          columnSortable: false,
+          fixed: '',
+          columnWidth: 100,
+          showOverflowTooltip: true
+        },
+        {
+          columnProp: "reQtyToIssue",
+          headerAlign: "center",
+          align: "right",
+          columnLabel: "应退数量",
+          columnHidden: false,
+          columnSortable: false,
+          fixed: '',
+          columnWidth: 90,
+          showOverflowTooltip: true
+        },
         {
           columnProp: "workCenterNo",
           headerAlign: "center",

src/views/modules/todo/todoCenter.vue

@@ -1,86 +1,98 @@
 <template>
   <div class="mod-todo-center" v-loading="dataListLoading">
     <div class="todo-top-fixed">
-      <div class="todo-filter-panel">
-        <el-form :inline="true" :model="searchData" @keyup.enter.native="queryHandle">
-          <el-form-item label="BU">
-            <el-select v-model="searchData.buNo" clearable filterable placeholder="全部" style="width: 180px">
-              <el-option
-                v-for="item in buList"
-                :key="item.buNo"
-                :label="item.buDesc || item.buNo"
-                :value="item.buNo">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="是否强制">
-            <el-select v-model="searchData.forceType" clearable placeholder="全部" style="width: 100px">
-              <el-option
-                v-for="item in forceTypeOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="代办状态">
-            <el-select v-model="searchData.todoStatus" clearable placeholder="全部" style="width: 100px">
-              <el-option
-                v-for="item in todoStatusOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="责任部门">
-            <el-select v-model="searchData.responsibilityDept" clearable filterable placeholder="全部" style="width: 140px">
-              <el-option
-                v-for="item in roleList"
-                :key="item.roleId"
-                :label="item.roleName"
-                :value="String(item.roleId)">
-              </el-option>
-            </el-select>
-          </el-form-item>
-          <el-form-item label="关键字">
-            <el-input
-              v-model="searchData.keyword"
-              clearable
-              placeholder="信息编码/派工单号/订单号"
-              style="width: 200px">
-            </el-input>
-          </el-form-item>
-          <el-form-item label=" ">
-            <el-button type="primary" @click="queryHandle">查询</el-button>
-            <el-button @click="resetHandle">重置</el-button>
-          </el-form-item>
-        </el-form>
-      </div>
-
-      <div class="todo-summary-row">
-        <div class="summary-card blue">
-          <div class="summary-icon"><i class="el-icon-document"></i></div>
-          <div class="summary-content">
-            <div class="summary-value">{{ stats.pendingAuditCount }}</div>
-            <div class="summary-label">待审核</div>
+      <el-card :class="['search-card', { 'collapsed': !searchExpanded }]" shadow="hover">
+        <div slot="header" class="search-header">
+          <div class="header-left">
+            <i class="el-icon-search"></i>
+            <span class="header-title">功能代办中心</span>
           </div>
-        </div>
-        <div class="summary-card green">
-          <div class="summary-icon"><i class="el-icon-success"></i></div>
-          <div class="summary-content">
-            <div class="summary-value">{{ stats.pendingOperateCount }}</div>
-            <div class="summary-label">可报告</div>
+          <div class="header-right">
+            <el-button
+              type="text"
+              size="small"
+              @click="toggleSearchExpand"
+              class="collapse-btn">
+              <span>{{ searchExpanded ? '收起' : '展开' }}</span>
+              <i :class="searchExpanded ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"></i>
+            </el-button>
           </div>
         </div>
-        <div class="summary-card orange">
-          <div class="summary-icon"><i class="el-icon-time"></i></div>
-          <div class="summary-content">
-            <div class="summary-value">{{ stats.completedCount }}</div>
-            <div class="summary-label">已完成</div>
+
+        <el-form :inline="true" :model="searchData" class="search-form" @keyup.enter.native="queryHandle">
+          <template v-if="searchExpanded">
+            <el-form-item label="BU">
+              <el-select v-model="searchData.buNo" clearable filterable placeholder="全部" style="width: 180px">
+                <el-option
+                  v-for="item in buList"
+                  :key="item.buNo"
+                  :label="item.buDesc || item.buNo"
+                  :value="item.buNo">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="是否强制">
+              <el-select v-model="searchData.forceType" clearable placeholder="全部" style="width: 100px">
+                <el-option
+                  v-for="item in forceTypeOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="代办状态">
+              <el-select v-model="searchData.todoStatus" clearable placeholder="全部" style="width: 100px">
+                <el-option
+                  v-for="item in todoStatusOptions"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="责任部门">
+              <el-select v-model="searchData.responsibilityDept" clearable filterable placeholder="全部" style="width: 140px">
+                <el-option
+                  v-for="item in roleList"
+                  :key="item.roleId"
+                  :label="item.roleName"
+                  :value="String(item.roleId)">
+                </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item label="关键字">
+              <el-input
+                v-model="searchData.keyword"
+                clearable
+                placeholder="信息编码/派工单号/订单号"
+                style="width: 200px">
+              </el-input>
+            </el-form-item>
+          </template>
+
+          <div class="search-actions">
+            <div class="action-left">
+              <el-button type="primary" icon="el-icon-search" @click="queryHandle">查询</el-button>
+              <el-button icon="el-icon-refresh" @click="resetHandle">重置</el-button>
+            </div>
+            <div class="action-right">
+              <div class="kpi-mini-card kpi-blue">
+                <div class="kpi-mini-label">待审核</div>
+                <div class="kpi-mini-value">{{ stats.pendingAuditCount }}</div>
+              </div>
+              <div class="kpi-mini-card kpi-green">
+                <div class="kpi-mini-label">可报告</div>
+                <div class="kpi-mini-value">{{ stats.pendingOperateCount }}</div>
+              </div>
+              <div class="kpi-mini-card kpi-orange">
+                <div class="kpi-mini-label">已完成</div>
+                <div class="kpi-mini-value">{{ stats.completedCount }}</div>
+              </div>
+            </div>
           </div>
-        </div>
-      </div>
+        </el-form>
+      </el-card>
     </div>
 
     <div class="todo-main-scroll">
@@ -150,18 +162,16 @@
       </div>
     </div>
 
-    <div class="todo-bottom-fixed">
-      <el-pagination
-        class="todo-pagination"
-        @size-change="sizeChangeHandle"
-        @current-change="currentChangeHandle"
-        :current-page="pageIndex"
-        :page-sizes="[12, 24, 48, 96]"
-        :page-size="pageSize"
-        :total="totalPage"
-        layout="total, sizes, prev, pager, next, jumper">
-      </el-pagination>
-    </div>
+    <el-pagination
+      class="todo-pagination"
+      @size-change="sizeChangeHandle"
+      @current-change="currentChangeHandle"
+      :current-page="pageIndex"
+      :page-sizes="[12, 24, 48, 96]"
+      :page-size="pageSize"
+      :total="totalPage"
+      layout="total, sizes, prev, pager, next, jumper">
+    </el-pagination>
 
     <el-dialog
       :title="detailDialogTitle"
@@ -288,6 +298,7 @@ export default {
   data () {
     return {
       dataListLoading: false,
+      searchExpanded: true,
       pageIndex: 1,
       pageSize: 12,
       totalPage: 0,
@@ -340,6 +351,9 @@ export default {
     this.getDataList()
   },
   methods: {
+    toggleSearchExpand () {
+      this.searchExpanded = !this.searchExpanded
+    },
     loadBuList () {
       const params = { username: this.$store.state.user.name }
       getSiteAndBuByUserName2(params).then(({ data }) => {
@@ -619,10 +633,10 @@ export default {
 
 <style scoped>
 .mod-todo-center {
-  height: calc(100vh - 120px);
-  min-height: calc(100vh - 120px);
-  background: #f3f5f9;
-  padding: 10px;
+  height: calc(102vh - 122px);
+  min-height: calc(102vh - 122px);
+  background: #ffffff;
+  padding: 0px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -631,7 +645,7 @@ export default {
 
 .todo-top-fixed {
   flex-shrink: 0;
-  background: #f3f5f9;
+  background: #ffffff;
   z-index: 2;
 }
 
@@ -643,100 +657,228 @@ export default {
   padding-right: 2px;
 }
 
-.todo-bottom-fixed {
-  flex-shrink: 0;
-  background: #f3f5f9;
-  padding-top: 10px;
+/* 筛选卡片样式（参考 inboundNotification） */
+.search-card {
+  margin-bottom: 12px;
+  border-radius: 8px;
+  overflow: hidden;
+  transition: all 0.3s ease;
 }
 
-.todo-filter-panel {
-  background: #fff;
-  border: 1px solid #ebeef5;
-  border-radius: 6px;
-  padding: 12px 14px 2px;
-  margin-bottom: 10px;
+.search-card:hover {
+  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.09);
 }
 
-.panel-title {
-  font-size: 14px;
-  color: #606266;
-  margin-bottom: 8px;
-  font-weight: 600;
+.search-card /deep/ .el-card__header {
+  padding: 5px 20px;
+  background: linear-gradient(135deg, #9ac3d0 20%, #b6c7dd 80%);
+  border-bottom: none;
+}
+
+.search-card /deep/ .el-card__body {
+  padding: 10px 12px 8px 12px;
 }
 
-.todo-summary-row {
+.search-header {
   display: flex;
-  gap: 10px;
-  margin-bottom: 10px;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.summary-card {
-  flex: 1;
-  min-width: 0;
-  background: #fff;
-  border: 1px solid #ebeef5;
-  border-radius: 6px;
-  padding: 10px 12px;
+.header-left {
   display: flex;
   align-items: center;
+  color: #fff;
 }
 
-.summary-icon {
-  width: 36px;
-  height: 36px;
-  border-radius: 8px;
-  text-align: center;
-  line-height: 36px;
-  font-size: 18px;
-  margin-right: 10px;
+.header-left i {
+  font-size: 16px;
+  margin-right: 8px;
+}
+
+.header-title {
+  font-size: 14px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+}
+
+.header-right {
   color: #fff;
 }
 
-.summary-card.blue .summary-icon {
-  background: #3a8ee6;
+.collapse-btn {
+  color: #fff;
+  font-weight: 500;
+  transition: all 0.3s ease;
 }
 
-.summary-card.green .summary-icon {
-  background: #67c23a;
+.collapse-btn:hover {
+  color: #f0f0f0;
+  transform: translateY(-1px);
 }
 
-.summary-card.orange .summary-icon {
-  background: #e6a23c;
+.collapse-btn i {
+  margin-left: 4px;
+  transition: transform 0.3s ease;
 }
 
-.summary-value {
-  font-size: 24px;
-  line-height: 24px;
-  font-weight: 700;
-  color: #303133;
+.search-card.collapsed /deep/ .el-card__body {
+  padding: 10px 12px;
+}
+
+.search-form /deep/ .el-form-item {
+  margin-bottom: 12px;
 }
 
-.summary-label {
+.search-form /deep/ .el-form-item__label {
+  font-weight: 500;
+  color: #606266;
+  padding-bottom: 4px;
+}
+
+.search-form /deep/ .el-input__inner,
+.search-form /deep/ .el-textarea__inner {
+  border-radius: 6px;
+  border: 1px solid #dcdfe6;
+  transition: all 0.2s ease;
+}
+
+.search-form /deep/ .el-input__inner:focus,
+.search-form /deep/ .el-textarea__inner:focus {
+  border-color: #9ac3d0;
+  box-shadow: 0 0 0 2px rgba(154, 195, 208, 0.1);
+}
+
+.search-actions {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  align-items: stretch;
+}
+
+.search-card:not(.collapsed) .search-actions {
+  border-top: 1px solid #f0f0f0;
   margin-top: 4px;
+  padding-top: 10px;
+}
+
+.search-card.collapsed .search-actions {
+  border-top: none;
+  margin-top: 0;
+  padding-top: 0;
+}
+
+.action-left {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.search-actions .el-button {
+  border-radius: 4px;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 12px;
   font-size: 12px;
-  color: #909399;
+  font-weight: 500;
+}
+
+.search-actions .el-button--primary {
+  background: #60aeff;
+  border-color: #60aeff;
+}
+
+.search-actions .el-button--primary:hover {
+  background: #7dbdff;
+  border-color: #7dbdff;
+}
+
+.action-right {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.kpi-mini-card {
+  --kpi-text: #1d5fbf;
+  --kpi-value: #164f9f;
+  min-width: 124px;
+  height: 32px;
+  border-radius: 999px;
+  padding: 0 14px;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border: 1px solid transparent;
+}
+
+.kpi-mini-label {
+  font-size: 12px;
+  line-height: 1;
+  font-weight: 600;
+  color: var(--kpi-text);
+}
+
+.kpi-mini-value {
+  margin-top: 0;
+  font-size: 15px;
+  line-height: 1;
+  font-weight: 700;
+  color: var(--kpi-value);
+}
+
+.kpi-blue {
+  background: rgba(76, 157, 255, 0.16);
+  border-color: rgba(76, 157, 255, 0.34);
+  --kpi-text: #1f67c8;
+  --kpi-value: #1554ab;
+}
+
+.kpi-green {
+  background: rgba(99, 199, 105, 0.16);
+  border-color: rgba(99, 199, 105, 0.34);
+  --kpi-text: #238241;
+  --kpi-value: #166832;
+}
+
+.kpi-orange {
+  background: rgba(247, 177, 92, 0.2);
+  border-color: rgba(247, 177, 92, 0.38);
+  --kpi-text: #b96817;
+  --kpi-value: #944d0b;
 }
 
 .todo-card-grid {
   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 10px;
+  column-gap: 26px;
+  row-gap: 22px;
+  align-items: stretch;
+  justify-items: center;
+  padding: 0 6px 2px;
 }
 
 .todo-card {
   background: #fff;
   border: 1px solid #ebeef5;
   border-radius: 6px;
-  padding: 10px 12px;
-  min-height: 248px;
+  width: calc(100% - 10px);
+  max-width: 100%;
+  height: 100%;
+  padding: 8px 10px;
+  min-height: 198px;
   display: flex;
   flex-direction: column;
+  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14), 0 2px 8px rgba(15, 23, 42, 0.08);
 }
 
 .todo-card-head {
   display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 5px;
 }
 
 .risk-tag {
@@ -763,23 +905,23 @@ export default {
 }
 
 .todo-source {
-  margin-top: 8px;
+  margin-top: 6px;
   font-size: 12px;
   color: #909399;
 }
 
 .todo-main-title {
-  margin-top: 8px;
-  font-size: 16px;
+  margin-top: 6px;
+  font-size: 14px;
   color: #303133;
   font-weight: 700;
 }
 
 .todo-detail-line {
-  margin-top: 8px;
+  margin-top: 6px;
   display: flex;
   justify-content: space-between;
-  font-size: 12px;
+  font-size: 11px;
 }
 
 .todo-detail-line .label {
@@ -799,18 +941,18 @@ export default {
   margin-top: auto;
   display: flex;
   justify-content: space-between;
-  gap: 8px;
-  padding-top: 14px;
+  gap: 6px;
+  padding-top: 11px;
 }
 
 .step-item {
   flex: 1;
   text-align: center;
-  font-size: 12px;
+  font-size: 11px;
   color: #c0c4cc;
   border: 1px solid #ebeef5;
   border-radius: 14px;
-  padding: 4px 0;
+  padding: 3px 0;
 }
 
 .step-item.done {
@@ -820,7 +962,7 @@ export default {
 }
 
 .todo-footer {
-  margin-top: 10px;
+  margin-top: 8px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -828,11 +970,11 @@ export default {
 
 .todo-action-group {
   display: inline-flex;
-  gap: 6px;
+  gap: 5px;
 }
 
 .todo-time {
-  font-size: 12px;
+  font-size: 11px;
   color: #909399;
 }
 
@@ -847,10 +989,25 @@ export default {
 }
 
 .todo-pagination {
-  margin-top: 0;
+  margin-top: 10px;
+  padding-right: 4px;
   text-align: right;
 }
 
+@media (max-width: 1500px) {
+  .search-actions {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+
+  .action-right {
+    width: 100%;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+  }
+}
+
 .todo-cache-detail-dialog /deep/ .el-dialog__body {
   padding-top: 10px;
 }