酸轧数据同步，轧辊新增产线新增各种产线

klp-ui/src/views/mes/roll/grind/index.vue

@@ -2,7 +2,21 @@
   <div class="app-container grind-page">
     <div class="grind-layout">
 
-      <!-- ── 左侧：轧辊选择 ── -->
+      <!-- ── 产线 Tab 列 ── -->
+      <div class="line-tabs">
+        <div
+          :class="['lt-item', filterLineId === null ? 'lt-item--active' : '']"
+          @click="handleLineTab(null)"
+        >全部</div>
+        <div
+          v-for="l in sortedProductionLines"
+          :key="l.lineId"
+          :class="['lt-item', filterLineId === l.lineId ? 'lt-item--active' : '']"
+          @click="handleLineTab(l.lineId)"
+        >{{ l.lineName }}</div>
+      </div>
+
+      <!-- ── 轧辊列表 ── -->
       <div class="grind-left">
         <el-card shadow="never" class="grind-card h-full">
           <div slot="header" class="card-header">
@@ -11,12 +25,6 @@
 
           <!-- 搜索过滤 -->
           <div class="roll-filter">
-            <!-- 产线筛选（暂时写死双机架） -->
-            <el-select v-model="filterLine" size="small" placeholder="选择产线"
-              style="width:100%;margin-bottom:8px" @change="filterRolls">
-              <el-option label="全部产线" value="" />
-              <el-option label="双机架产线" value="双机架" />
-            </el-select>
             <el-input v-model="filterNo" size="small" placeholder="编号搜索" prefix-icon="el-icon-search"
               clearable @input="filterRolls" style="margin-bottom:8px" />
             <el-radio-group v-model="filterType" size="small" @change="filterRolls" style="margin-bottom:8px">
@@ -39,6 +47,7 @@
                 <span :class="['ri-status', 'st-' + r.status]">{{ statusLabel(r.status) }}</span>
                 <span class="ri-dia">φ{{ r.currentDia != null ? r.currentDia : r.initialDia }}</span>
               </div>
+              <div v-if="filterLineId === null && r.lineName" class="ri-line">{{ r.lineName }}</div>
             </div>
             <div v-if="!rollLoading && filteredRolls.length === 0" class="roll-empty">暂无数据</div>
           </div>
@@ -229,13 +238,18 @@
 <script>
 import { listRollInfo, getRollInfo } from '@/api/mes/roll/rollInfo'
 import { listRollGrind, addRollGrind, updateRollGrind, delRollGrind, getMonthlyStats } from '@/api/mes/roll/rollGrind'
+import { listProductionLine } from '@/api/wms/productionLine'
+import rollLineMixin from '../rollLineMixin'
 
 export default {
   name: 'GrindRoom',
+  mixins: [rollLineMixin],
   data() {
     return {
-      // 产线定义（暂写死，后续接后端）
-      LINES: [{ label: '双机架产线', value: '双机架' }],
+      // 产线列表
+      productionLines: [],
+      filterLineId: null,
+      lineTabOrder: [],   // 本地记录的点击顺序（最近点过的在前）
 
       // 左侧辊列表
       rollLoading: false,
@@ -243,7 +257,6 @@ export default {
       filteredRolls: [],
       filterNo: '',
       filterType: '',
-      filterLine: '',
 
       // 右侧选中辊
       selectedRollId: null,
@@ -270,6 +283,19 @@ export default {
       return this.$store.state.user.name || this.$store.getters.name || ''
     },
 
+    // 产线 tab 按本地点击顺序排序
+    sortedProductionLines() {
+      const order = this.lineTabOrder
+      return [...this.productionLines].sort((a, b) => {
+        const ai = order.indexOf(a.lineId)
+        const bi = order.indexOf(b.lineId)
+        if (ai === -1 && bi === -1) return 0
+        if (ai === -1) return 1
+        if (bi === -1) return -1
+        return ai - bi
+      })
+    },
+
     // 表格数据：新增时在顶部插入一个编辑行占位
     tableData() {
       if (this.editRow && this.editRow.__isNew) {
@@ -279,26 +305,46 @@ export default {
     }
   },
 
-  created() {
-    this.loadRolls()
-  },
+  created() {},
 
   methods: {
+    onLineResolved() {
+      this.filterLineId = this.lineId
+      const uid = this.$store.state.user?.userId || 0
+      try { this.lineTabOrder = JSON.parse(localStorage.getItem(`grind_line_order_${uid}`) || '[]') } catch {}
+      listProductionLine({ pageNum: 1, pageSize: 100 }).then(res => {
+        this.productionLines = res.rows || []
+      })
+      this.loadRolls()
+    },
+
     // ── 轧辊列表 ──────────────────────────────────────
     loadRolls() {
       this.rollLoading = true
-      listRollInfo({ pageNum: 1, pageSize: 500 }).then(res => {
+      listRollInfo({ pageNum: 1, pageSize: 500, lineId: this.filterLineId }).then(res => {
         this.allRolls = res.rows || []
         this.filterRolls()
       }).finally(() => { this.rollLoading = false })
     },
+    handleLineTab(lineId) {
+      if (this.filterLineId === lineId) return
+      this.filterLineId = lineId
+      if (lineId !== null) {
+        this.lineTabOrder = [lineId, ...this.lineTabOrder.filter(id => id !== lineId)]
+        const uid = this.$store.state.user?.userId || 0
+        localStorage.setItem(`grind_line_order_${uid}`, JSON.stringify(this.lineTabOrder))
+      }
+      if (this.editRow) this.cancelEdit()
+      this.selectedRollId = null
+      this.selectedRoll = null
+      this.grindList = []
+      this.loadRolls()
+    },
     filterRolls() {
       this.filteredRolls = this.allRolls.filter(r => {
         const matchNo   = !this.filterNo   || r.rollNo.includes(this.filterNo)
         const matchType = !this.filterType || r.rollType === this.filterType
-        // 后续 mes_roll_info 增加 line_code 字段后改为 r.lineCode === this.filterLine
-        const matchLine = !this.filterLine || this.filterLine === '双机架'
-        return matchNo && matchType && matchLine
+        return matchNo && matchType
       })
     },
     selectRoll(r) {
@@ -428,8 +474,38 @@ export default {
 .grind-page   { background: #f4f5f7; height: 100%; }
 .grind-layout { display: flex; gap: 12px; height: 100%; }
 
-/* 左侧 */
-.grind-left  { width: 240px; flex-shrink: 0; }
+/* 产线 Tab 列 */
+.line-tabs {
+  width: 64px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding-top: 2px;
+}
+.lt-item {
+  padding: 10px 4px;
+  text-align: center;
+  font-size: 12px;
+  color: #5f6368;
+  background: #fff;
+  border: 1px solid #dcdee0;
+  border-radius: 4px;
+  cursor: pointer;
+  word-break: break-all;
+  line-height: 1.4;
+  transition: all .15s;
+}
+.lt-item:hover { background: #f0f6ff; color: #409eff; border-color: #c6d9f5; }
+.lt-item--active {
+  background: #409eff;
+  color: #fff;
+  border-color: #409eff;
+  font-weight: 600;
+}
+
+/* 轧辊列表 */
+.grind-left  { width: 220px; flex-shrink: 0; }
 .grind-right { flex: 1; min-width: 0; }
 
 .grind-card { border: 1px solid #dcdee0; border-radius: 4px; }
@@ -451,6 +527,7 @@ export default {
 .ri-no   { font-family: 'Consolas', monospace; font-size: 13px; font-weight: 600; color: #1f2329; }
 .ri-meta { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
 .ri-dia  { font-size: 11px; color: #9aa0a6; }
+.ri-line { font-size: 10px; color: #b0b3bb; margin-top: 2px; }
 .ri-status { font-size: 11px; }
 .roll-empty { text-align: center; color: #c0c4cc; padding: 20px 0; font-size: 12px; }