Skip to content

M
mini-wms
Commit 3defd135 by zhangtw
Options

标签颜色bug

parent 15102e6e
正在显示 包含 127 行增加 和 120 行删除
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'">
......@@ -245,22 +251,20 @@
@size-change="handleSizeChange"
/>
<import-excel
ref="import"
title="导入"
import-url="/inventory/inbound_items/import"
template-url="/inventory/inbound_items/exportTemplate"
template-name="入库明细模板"
@success="handleImportSuccess"
/>
ref="import"
title="导入"
import-url="/inventory/inbound_items/import"
template-url="/inventory/inbound_items/exportTemplate"
template-name="入库明细模板"
@success="handleImportSuccess"
/>
</div>
</div>
</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: '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.displayData.splice(index, 1)
// 删除后页码处理
const currentPageDataCount = this.pagedDisplayData.length
if (currentPageDataCount === 0 && this.queryParams.pageNum > 1) {
this.queryParams.pageNum -= 1
}
this.$emit('row-deleted', row)
})
this.$confirm('确定要删除该明细项吗?', '提示', { type: 'warning' })
.then(() => {
this.displayData.splice(index, 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(() => {
const idsToDelete = this.selectedRows.map(row => row.id || row.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)
})
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))
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;
}
</style>
/* 下拉选项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
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论