标签颜色bug

ruoyi-admin-vue/src/views/inventory/inbound_items/index.vue

 <template>
   <div class="inbound-items-container">
     <!-- 查询表单-->
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="130px">
+    <!-- <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="130px">
       <el-form-item label="货物ID" prop="materialId">
         <el-input
           v-model="queryParams.materialId"
@@ -27,16 +27,25 @@
         />
       </el-form-item>
       <el-form-item label="标签颜色" prop="labelColor">
-        <el-select v-model="queryParams.labelColor" placeholder="请选择标签颜色" clearable>
+        <el-select v-model="queryParams.labelColor" placeholder="请选择标签颜色" clearable style="width: 200px;">
           <el-option
-            v-for="item in inLabelColorOptions"
-            :key="item.colorId"
-            :label="item.colorLabel"
-            :value="item.colorId"
-          />
+            v-for="item in dict.type.label_color"
+            :key="item.value"
+            :value="item.value"
+          >
+            <template #label>
+              <el-tag
+                :type="getDictListClass('label_color', item.value)"
+                size="small"
+                style="margin-right: 8px;"
+              >
+                {{ item.label }}
+              </el-tag>
+              <span>{{ item.label }}</span>
+            </template>
+          </el-option>
         </el-select>
       </el-form-item>
-
       <el-form-item label="凭证号" prop="voucherNumber">
         <el-input
           v-model="queryParams.voucherNumber"
@@ -45,12 +54,12 @@
           @keyup.enter.native="handleQuery"
         />
       </el-form-item>
-      <br></br>
       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
       </el-form-item>
-    </el-form>
+    </el-form> -->
+
     <!-- 操作按钮区域 -->
     <div class="toolbar-container mb8">
       <el-row :gutter="10">
@@ -157,9 +166,6 @@
                   />
                 </el-select>
               </template>
-              <template v-else-if="column.prop === 'labelColor'">
-                {{ dict.type.label_color[scope.row.labelColor] || scope.row.labelColor }}
-              </template>
               <template v-else-if="column.type === 'number'">
                 <el-input-number
                   v-model="scope.row[column.prop]"
@@ -184,12 +190,12 @@
 
             <!-- 只读模式 -->
             <template v-else>
-              <template v-if="column.prop === 'itemStatus'">
+              <template v-if="column.prop === 'labelColor'">
                 <el-tag
-                  :type="getStatusType(scope.row[column.prop])"
+                  :type="getDictListClass('label_color', scope.row.labelColor)"
                   size="small"
                 >
-                  {{ getStatusText(scope.row[column.prop]) }}
+                  {{ getDictLabel('label_color', scope.row.labelColor) }}
                 </el-tag>
               </template>
               <template v-else-if="column.type === 'number'">
@@ -257,10 +263,8 @@
 </template>
 
 <script>
-import { listInbound_items, delInbound_items , listInbound_itemsAndMname} from "@/api/inventory/inbound_items"
+import { listInbound_itemsAndMname } from "@/api/inventory/inbound_items"
 import ImportExcel from "@/components/ImportExcel/index"
-// 使用默认的dict实例，不需要单独实例化Dict类
-// 使用默认的dict实例，无需导入DictMeta和DictData
 
 export default {
   name: "InboundItems",
@@ -286,35 +290,25 @@ export default {
     columns: {
       type: Array,
       default: () => [
-        { prop: 'materialId', label: '货物ID', width: '150', editable: false},
-        { prop: 'materialName', label: '货物名称', width: '150', editable: false},
-        // { prop: 'batchId', label: '批次ID', width: '120', editable: true },
+        { prop: 'materialId', label: '货物ID', width: '150', editable: false },
+        { prop: 'materialName', label: '货物名称', width: '150', editable: false },
         { prop: 'warehouseId', label: '仓库ID', width: '150', editable: true,
-          type: 'select', // 指定类型为select
-          options: [     // 下拉选项列表
-            { label: '仓库A', value: 'WH001' },
-            { label: '仓库B', value: 'WH002' },
-            { label: '仓库C', value: 'WH003' }
-          ]
+          type: 'select',
+          options: [{ label: '仓库A', value: 'WH001' }, { label: '仓库B', value: 'WH002' }, { label: '仓库C', value: 'WH003' }]
         },
-        { prop: 'locationId', label: '库位ID', width: '150', editable: true ,
-          type: 'select', // 指定类型为select
-          options: [     // 下拉选项列表
-            { label: '库位A1', value: 'LOC001' },
-            { label: '库位A2', value: 'LOC002' },
-            { label: '库位B1', value: 'LOC003' }
-          ]
+        { prop: 'locationId', label: '库位ID', width: '150', editable: true,
+          type: 'select',
+          options: [{ label: '库位A1', value: 'LOC001' }, { label: '库位A2', value: 'LOC002' }, { label: '库位B1', value: 'LOC003' }]
         },
         { prop: 'plannedQuantity', label: '计划数量', width: '100', type: 'number', editable: true },
         { prop: 'actualQuantity', label: '实际数量', width: '100', type: 'number', editable: true },
         { prop: 'plannedPackages', label: '计划件数', width: '100', type: 'number', editable: true },
         { prop: 'actualPackages', label: '实际件数', width: '100', type: 'number', editable: true },
         { prop: 'divisor', label: '约数', width: '100', type: 'number', editable: true },
-        { prop: 'labelColor', label: '标签颜色', width: '100', type: 'number', editable: true },
+        { prop: 'labelColor', label: '标签颜色', width: '100', type: 'select', editable: true },
         { prop: 'voucherNumber', label: '凭证号', width: '150', editable: true },
         { prop: 'unitPrice', label: '单价', width: '100', type: 'number', editable: true },
         { prop: 'receivedBy', label: '收货人', width: '150', editable: true },
-        // { prop: 'sortNo', label: 'p排序', width: '150', editable: true },
         { prop: 'remark', label: '备注', minWidth: '150', editable: true },
       ]
     },
@@ -326,10 +320,7 @@ export default {
   },
   data() {
     return {
-      inLabelColorOptions: [], // 入库类型下拉选项
-
       showSearch: true,
-      selectedMaterials: [],
       loading: false,
       selectedRows: [],
       total: 0,
@@ -364,23 +355,6 @@ export default {
     }
   },
   watch: {
-    'dict.label.label_color': {
-      handler(newVal) {
-         if (!newVal || (typeof newVal !== 'object' && !Array.isArray(newVal))) {
-          this.inLabelColorOptions = []; // 兜底空数组
-          console.warn("字典数据未加载或格式错误：", newVal);
-          return;
-        }
-        // 若依框架的字典数据格式
-        if (!Array.isArray(newVal)) {
-          this.inLabelColorOptions = Object.entries(newVal).map(([value, label]) => ({
-            colorId: value,
-            colorLabel: label
-          }));
-        }
-      },
-      immediate: true
-    },
     value: {
       immediate: true,
       handler(newVal) {
@@ -430,18 +404,41 @@ export default {
     }
   },
   created() {
+    this.initLabelColorOptions()
     this.handlePagination()
   },
   methods: {
+    // 根据字典类型和值，获取对应的listClass（标签样式）
+    getDictListClass(dictType, value) {
+      const dictList = this.dict.type[dictType] || []
+      if (!value) return 'info'
+      const dictItem = dictList.find(item => item.value === value)
+      // 兼容raw和直接属性两种写法
+      return  dictItem?.raw?.listClass || 'info'
+    },
+
+    // 根据字典类型和值，获取对应的显示标签
+    getDictLabel(dictType, value) {
+      const dictList = this.dict.type[dictType] || []
+      if (!value) return ''
+      const dictItem = dictList.find(item => item.value === value)
+      return dictItem?.label || value
+    },
+
+    // 初始化标签颜色下拉选项
+    initLabelColorOptions() {
+      const labelColorCol = this.columns.find(col => col.prop === 'labelColor')
+      if (labelColorCol) {
+        labelColorCol.options = this.dict.type.label_color || []
+      }
+    },
+
     // 加载关联数据
     loadRelatedData(orderId) {
       if (!orderId) return
 
       this.loading = true
-      this.queryParams.orderId = orderId
-
       listInbound_itemsAndMname(this.queryParams).then(response => {
-        console.log(response.rows)
         this.displayData = response.rows.map(item => ({
           ...item,
           editable: false,
@@ -453,29 +450,29 @@ export default {
       }).catch(() => {
         this.loading = false
       })
-      console.log(this.displayData)
     },
+
     // 分页处理
     handlePagination() {
       const totalItems = this.displayData.length
       const totalPages = Math.ceil(totalItems / this.queryParams.pageSize)
 
-      // 页码越界处理
       if (this.queryParams.pageNum > totalPages && totalPages > 0) {
         this.queryParams.pageNum = totalPages
       }
 
-      // 计算分页数据
       const start = (this.queryParams.pageNum - 1) * this.queryParams.pageSize
       const end = start + this.queryParams.pageSize
       this.pagedDisplayData = this.displayData.slice(start, end)
     },
+
     // 切换每页条数
     handleSizeChange(val) {
       this.queryParams.pageSize = val
       this.queryParams.pageNum = 1
       this.handlePagination()
     },
+
     // 同步数据到父组件
     syncDataToParent() {
       const dataToEmit = this.displayData.map(item => {
@@ -485,21 +482,25 @@ export default {
       this.$emit('input', dataToEmit)
       this.$emit('data-change', dataToEmit)
     },
+
     // 获取行key
     getRowKey(row) {
       return row.id || row.tempId
     },
-    /** 搜索按钮操作 */
+
+    // 搜索按钮操作
     handleQuery() {
       this.queryParams.pageNum = 1
       this.getList()
     },
 
-    /** 重置按钮操作 */
+    // 重置按钮操作
     resetQuery() {
       this.$refs.queryForm.resetFields()
       this.handleQuery()
     },
+
+    // 获取列表数据
     getList() {
       this.loading = true
       listInbound_itemsAndMname(this.queryParams).then(response => {
@@ -515,11 +516,13 @@ export default {
         this.loading = false
       })
     },
+
     // 新增物料
     handleAddItemClick() {
-      this.$emit('show-materials',true)
+      this.$emit('show-materials', true)
     },
-    handleAddItem(selectedMaterials){
+
+    handleAddItem(selectedMaterials) {
       selectedMaterials.forEach(material => {
         const newItem = {
           id: null,
@@ -539,15 +542,14 @@ export default {
           tempId: Date.now() + Math.random()
         }
         this.displayData.push(newItem)
-        // 自动跳转到最后一页
         const totalPages = Math.ceil(this.displayData.length / this.queryParams.pageSize)
         if (totalPages > this.queryParams.pageNum) {
           this.queryParams.pageNum = totalPages
         }
         this.$emit('item-added', newItem)
       })
-      console.log(this.displayData)
     },
+
     // 行编辑
     handleRowEdit(row) {
       const index = this.displayData.findIndex(item => item.tempId === row.tempId)
@@ -555,6 +557,7 @@ export default {
         this.$set(this.displayData[index], 'editable', true)
       }
     },
+
     // 行保存
     handleRowSave(row) {
       const index = this.displayData.findIndex(item => item.tempId === row.tempId)
@@ -563,22 +566,19 @@ export default {
         this.$emit('row-saved', row)
       }
     },
+
     // 行删除
     handleRowDelete(row, index) {
-      this.$confirm('确定要删除该明细项吗?', '提示', {
-        type: 'warning'
-      }).then(() => {
+      this.$confirm('确定要删除该明细项吗?', '提示', { type: 'warning' })
+        .then(() => {
           this.displayData.splice(index, 1)
-
-        // 删除后页码处理
-        const currentPageDataCount = this.pagedDisplayData.length
-        if (currentPageDataCount === 0 && this.queryParams.pageNum > 1) {
+          if (this.pagedDisplayData.length === 0 && this.queryParams.pageNum > 1) {
             this.queryParams.pageNum -= 1
           }
-
           this.$emit('row-deleted', row)
         })
     },
+
     // 批量删除
     handleBatchDelete() {
       if (this.selectedRows.length === 0) {
@@ -586,28 +586,24 @@ export default {
         return
       }
 
-      this.$confirm('确定要删除选中的明细项吗?', '提示', {
-        type: 'warning'
-      }).then(() => {
+      this.$confirm('确定要删除选中的明细项吗?', '提示', { type: 'warning' })
+        .then(() => {
           const idsToDelete = this.selectedRows.map(row => row.id || row.tempId)
-        this.displayData = this.displayData.filter(item =>
-          !idsToDelete.includes(item.id || item.tempId)
-        )
-
-        // 删除后页码处理
+          this.displayData = this.displayData.filter(item => !idsToDelete.includes(item.id || item.tempId))
           const totalPages = Math.ceil(this.displayData.length / this.queryParams.pageSize)
           if (this.queryParams.pageNum > totalPages && totalPages > 0) {
             this.queryParams.pageNum = totalPages
           }
-
           this.selectedRows = []
           this.$emit('batch-delete', idsToDelete)
         })
     },
-     /** 导入按钮操作 */
+
+    // 导入按钮操作
     handleImport() {
       this.$refs.import.show()
     },
+
     // 导入成功处理
     handleImportSuccess() {
       this.$message.success('导入成功')
@@ -621,53 +617,52 @@ export default {
         this.loading = false
       })
     },
+
     // 导出
     handleExport() {
       this.download('inventory/inbound_items/export', {
         ...this.queryParams
       }, `inbound_items_${new Date().getTime()}.xlsx`)
     },
+
     // 输入框变化
     handleInputChange(row, prop) {
       this.$emit('cell-change', { row, prop, value: row[prop] })
     },
+
     // 数字变化
     handleNumberChange(row, prop) {
       row[prop] = parseFloat(row[prop]) || 0
       this.$emit('cell-change', { row, prop, value: row[prop] })
     },
+
     // 选择框变化
     handleColumnChange(row, prop) {
       this.$emit('cell-change', { row, prop, value: row[prop] })
     },
+
     // 输入框失去焦点
     handleInputBlur(row, prop) {
       this.$emit('cell-blur', { row, prop, value: row[prop] })
     },
+
     // 选择变化
     handleSelectionChange(selection) {
       this.selectedRows = selection
       this.$emit('selection-change', selection)
     },
-    // 获取状态类型
-    getStatusType(status) {
-      const map = { '1': 'info', '2': 'success', '3': 'danger' }
-      return map[status] || 'info'
-    },
-    // 获取状态文本
-    getStatusText(status) {
-      const map = { '1': '待入库', '2': '已入库', '3': '已取消' }
-      return map[status] || status
-    },
+
     // 格式化数字
     formatNumber(num) {
       if (num == null) return ''
       return parseFloat(num).toLocaleString()
     },
+
     // 计算总数并通知父组件
     calculateTotals() {
       this.$emit('totals-change', this.totals)
     },
+
     // 验证数据
     validate() {
       const errors = []
@@ -681,6 +676,7 @@ export default {
       })
       return errors
     },
+
     // 获取所有数据
     getItems() {
       return this.displayData.map(item => {
@@ -688,6 +684,7 @@ export default {
         return rest
       })
     },
+
     // 重置数据
     resetEmbeddedData() {
       this.displayData = JSON.parse(JSON.stringify(this.cachedData)).map(item => ({
@@ -731,4 +728,13 @@ export default {
 .el-table--medium td {
   padding: 6px 0;
 }
+
+/* 下拉选项tag样式适配 */
+:deep(.el-select-dropdown__item .el-tag) {
+  vertical-align: middle;
+}
+
+:deep(.el-select .el-tag) {
+  margin: 0;
+}
 </style>
\ No newline at end of file