0e1017c7ab
重构产品选择(RawMaterialSelect)和原材料选择(ProductSelect)组件，将原有的下拉选择模式改为对话框模式 优化组件props处理，将required改为default空对象 新增分页、搜索和表格展示功能，提升用户体验 统一多选和单选模式的操作逻辑
94 lines
2.7 KiB
Vue
94 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<!-- 作用域插槽 -->
|
|
<span class="material-name" @click.stop="showDetail = true">
|
|
<slot name="default" :material="material">
|
|
{{ material.rawMaterialName ? material.rawMaterialName : '-' }}
|
|
</slot>
|
|
</span>
|
|
<el-dialog :visible="showDetail" @close="showDetail = false" :title="material.rawMaterialName" width="600px"
|
|
append-to-body>
|
|
<el-descriptions :column="1" border>
|
|
<!-- <el-descriptions-item label="原材料ID">{{ material.rawMaterialId }}</el-descriptions-item> -->
|
|
<el-descriptions-item label="原材料名称">{{ material.rawMaterialName }}</el-descriptions-item>
|
|
<el-descriptions-item label="原材料编码">{{ material.rawMaterialCode }}</el-descriptions-item>
|
|
<el-descriptions-item label="规格">{{ material.specification }}</el-descriptions-item>
|
|
<el-descriptions-item label="材质">
|
|
{{ material.material || '--' }}
|
|
</el-descriptions-item>
|
|
<el-descriptions-item label="表面处理">
|
|
{{ material.surfaceTreatment || '--' }}
|
|
</el-descriptions-item>
|
|
<!-- 锌层 -->
|
|
<el-descriptions-item label="锌层">
|
|
{{ material.zincLayer || '--' }}
|
|
</el-descriptions-item>
|
|
<!-- 厂家 -->
|
|
<el-descriptions-item label="厂家">
|
|
{{ material.manufacturer || '--' }}
|
|
</el-descriptions-item>
|
|
</el-descriptions>
|
|
<!-- <BomInfo :bomId="material.bomId" /> -->
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import BomInfo from './BomInfo.vue';
|
|
|
|
export default {
|
|
name: 'RawMaterialInfo',
|
|
components: {
|
|
BomInfo
|
|
},
|
|
props: {
|
|
material: {
|
|
type: Object,
|
|
// required: true,
|
|
default: () => ({})
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
showDetail: false,
|
|
// material: {},
|
|
};
|
|
},
|
|
// computed: {
|
|
// ...mapState({
|
|
// materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
|
|
// }),
|
|
// material() {
|
|
// // 检查 materialMap 是否已加载
|
|
// if (!this.materialMap || Object.keys(this.materialMap).length === 0) {
|
|
// return {};
|
|
// }
|
|
// if (!this.materialId) {
|
|
// return {};
|
|
// }
|
|
// return this.materialMap[this.materialId.toString()] || {};
|
|
// },
|
|
// loading() {
|
|
// return !this.materialMap || Object.keys(this.materialMap).length === 0
|
|
// }
|
|
// },
|
|
// watch: {
|
|
// materialId: {
|
|
// handler: function (newVal) {
|
|
// const res = this.materialMap[newVal.toString()] ? this.materialMap[newVal.toString()] : {};
|
|
// this.material = res;
|
|
// },
|
|
// immediate: true
|
|
// }
|
|
// }
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.material-name {
|
|
color: #1890ff;
|
|
cursor: pointer;
|
|
text-decoration: underline;
|
|
}
|
|
</style>
|