feat(qc): 新增检查项模板管理功能及穿梭框组件
refactor(warehouse): 优化库位网格布局和响应式设计 fix(wms): 移除异常详情页的路由变化条件判断 style(qc): 统一检查任务对话框宽度为700px feat(qc): 新增检查项模板API及相关页面组件
This commit is contained in:
砂糖
@@ -1,64 +1,182 @@
|
||||
<template>
|
||||
<el-select
|
||||
v-model="selected"
|
||||
multiple
|
||||
filterable
|
||||
placeholder="请选择检查项"
|
||||
@change="handleChange"
|
||||
size="mini"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in checkItems"
|
||||
:key="item.itemId"
|
||||
:label="item.itemName"
|
||||
:value="item.itemId"
|
||||
/>
|
||||
</el-select>
|
||||
<div class="check-item-transfer">
|
||||
<!-- Element-UI穿梭框核心组件 -->
|
||||
<el-transfer v-model="internalValue" :data="transferData" :titles="['待选检查项', '已选检查项']" :props="transferProps"
|
||||
@change="handleTransferChange" filterable filter-placeholder="请输入检查项名称搜索" v-loading="loading" :disabled="loading">
|
||||
<!-- 自定义选项内容（单根节点包裹，解决Vue2警告） -->
|
||||
<template slot-scope="{ option }">
|
||||
<span class="transfer-option-content">
|
||||
<span>{{ option.itemName }}</span>
|
||||
<span style="margin-left: 8px; color: #999; font-size: 12px">
|
||||
({{ option.qualitativeQuantitative === 0 ? '定性' : '定量' }})
|
||||
</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<el-button class="transfer-footer" slot="right-footer" size="small"
|
||||
@click="loadInspectionItemTemplateList">选择模版</el-button>
|
||||
</el-transfer>
|
||||
|
||||
<el-dialog title="选择待检项方案" :visible.sync="open" width="700px" append-to-body>
|
||||
<el-form ref="form" :model="queryParams" :rules="rules" label-width="80px">
|
||||
<el-form-item label="任务名称" prop="templateName">
|
||||
<el-input v-model="queryParams.templateName" placeholder="请输入任务名称" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table highlight-current-row border @row-click="handleRowClick" v-loading="loading"
|
||||
:data="inspectionItemTemplateList" @selection-change="handleSelectionChange">
|
||||
<el-table-column label="方案名称" align="center" prop="templateName" />
|
||||
<el-table-column label="方案描述" align="center" prop="templateDesc" />
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listCheckItem } from '@/api/mes/qc/checkItem'
|
||||
import { listCheckItem } from "@/api/mes/qc/checkItem";
|
||||
import { listInspectionItemTemplate } from "@/api/mes/qc/inspectionItemTemplate";
|
||||
|
||||
export default {
|
||||
name: 'CheckItemSelect',
|
||||
name: "CheckItemTransfer",
|
||||
// 接收外部v-model绑定的itemIds字符串（逗号分隔）
|
||||
props: {
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
value: {
|
||||
type: String,
|
||||
default: ""
|
||||
}
|
||||
},
|
||||
emits: ['update:modelValue'],
|
||||
data() {
|
||||
return {
|
||||
checkItems: [],
|
||||
selected: this.modelValue.slice()
|
||||
}
|
||||
// 穿梭框数据源（去重后的检查项列表）
|
||||
transferData: [],
|
||||
// 内部选中值（数组，与v-model的字符串双向同步）
|
||||
internalValue: [],
|
||||
// 穿梭框字段映射（key必须唯一）
|
||||
transferProps: {
|
||||
key: "itemId", // 唯一标识字段
|
||||
label: "itemName" // 显示文本字段
|
||||
},
|
||||
// 数据加载状态
|
||||
loading: false,
|
||||
templateList: [],
|
||||
open: false,
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
templateName: undefined,
|
||||
},
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
modelValue(val) {
|
||||
this.selected = val.slice()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleChange(val) {
|
||||
this.$emit('input', val)
|
||||
},
|
||||
async fetchCheckItems() {
|
||||
try {
|
||||
const res = await listCheckItem({ pageSize: 1000 })
|
||||
this.checkItems = res.rows
|
||||
} catch (e) {
|
||||
this.checkItems = []
|
||||
// 监听外部传入的value变化，同步到内部选中值
|
||||
value: {
|
||||
immediate: true, // 初始化时立即执行
|
||||
handler(newVal) {
|
||||
if (newVal && typeof newVal === "string") {
|
||||
// 字符串转数字数组（过滤空值，统一类型）
|
||||
this.internalValue = newVal
|
||||
.split(",")
|
||||
.filter(Boolean) // 过滤空字符串
|
||||
.map(id => id.toString()); // 统一转为字符串类型
|
||||
} else {
|
||||
this.internalValue = [];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
// 组件创建时加载检查项列表
|
||||
this.loadCheckItemList();
|
||||
},
|
||||
methods: {
|
||||
/** 加载检查项列表（核心修复：去重+类型统一） */
|
||||
async loadCheckItemList() {
|
||||
try {
|
||||
this.loading = true;
|
||||
// 查询全部检查项（不分页）
|
||||
const queryParams = { pageNum: 1, pageSize: 9999 };
|
||||
const response = await listCheckItem(queryParams);
|
||||
let rawList = response.rows || [];
|
||||
|
||||
mounted() {
|
||||
this.fetchCheckItems()
|
||||
// 修复1：统一itemId为字符串类型（避免字符串/数字不匹配）
|
||||
rawList = rawList.map(item => ({
|
||||
...item,
|
||||
itemId: item.itemId.toString() // 强制转为字符串类型
|
||||
}));
|
||||
|
||||
// 修复2：按itemId去重（解决重复key导致穿梭无效的核心问题）
|
||||
this.transferData = [...new Map(
|
||||
rawList.map(item => [item.itemId, item]) // Map的key唯一，自动去重
|
||||
).values()];
|
||||
|
||||
} catch (error) {
|
||||
// 兼容不同的提示方式
|
||||
if (this.$modal) {
|
||||
this.$modal.msgError("加载检查项列表失败");
|
||||
} else if (this.$message) {
|
||||
this.$message.error("加载检查项列表失败");
|
||||
}
|
||||
console.error("检查项列表加载异常：", error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
handleRowClick(row) {
|
||||
this.$emit("input", row.inspectionItem);
|
||||
this.open = false;
|
||||
},
|
||||
|
||||
/** 加载待检项方案列表 */
|
||||
async loadInspectionItemTemplateList() {
|
||||
try {
|
||||
this.loading = true;
|
||||
this.open = true;
|
||||
const response = await listInspectionItemTemplate(this.queryParams);
|
||||
this.inspectionItemTemplateList = response.rows || [];
|
||||
} catch (error) {
|
||||
if (this.$modal) {
|
||||
this.$message.error("加载待检项方案列表失败");
|
||||
} else if (this.$message) {
|
||||
this.$message.error("加载待检项方案列表失败");
|
||||
}
|
||||
console.error("待检项方案列表加载异常：", error);
|
||||
} finally {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
/** 穿梭框选中状态变化处理（双向绑定核心逻辑） */
|
||||
handleTransferChange(newVal) {
|
||||
// 过滤空值后转逗号分隔的字符串
|
||||
const itemIdsStr = newVal
|
||||
.filter(Boolean)
|
||||
.join(",");
|
||||
|
||||
// 触发input事件实现v-model双向绑定
|
||||
this.$emit("input", itemIdsStr);
|
||||
// 向外暴露change事件，返回数组和字符串两种格式
|
||||
this.$emit("change", newVal, itemIdsStr);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
.check-item-transfer {
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* 自定义选项样式，确保显示完整 */
|
||||
.transfer-option-content {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
padding: 2px 0;
|
||||
box-sizing: border-box;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user