57 lines
1.4 KiB
Vue
57 lines
1.4 KiB
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
<span class="material-name" @click="showDetail = true">
|
||
|
|
{{ material.rawMaterialName ? material.rawMaterialName : '--' }}
|
||
|
|
</span>
|
||
|
|
<el-dialog :visible="showDetail" @close="showDetail = false" :title="material.name" width="400px" v-if="material" append-to-body>
|
||
|
|
<div>
|
||
|
|
<p><strong>ID:</strong> {{ material.rawMaterialId }}</p>
|
||
|
|
<p><strong>名称:</strong> {{ material.rawMaterialName }}</p>
|
||
|
|
<p><strong>描述:</strong> {{ material.rawMaterialCode }}</p>
|
||
|
|
</div>
|
||
|
|
</el-dialog>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { mapState } from 'vuex';
|
||
|
|
export default {
|
||
|
|
name: 'RawMaterialInfo',
|
||
|
|
props: {
|
||
|
|
materialId: {
|
||
|
|
type: [String, Number],
|
||
|
|
required: true
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
showDetail: false,
|
||
|
|
material: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
...mapState({
|
||
|
|
materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
|
||
|
|
}),
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
materialId: {
|
||
|
|
handler: function(newVal) {
|
||
|
|
const res = this.materialMap ? this.materialMap[this.materialId] : null;
|
||
|
|
console.log(this.materialMap, this.materialId, 'materialMap', 'materialId', res);
|
||
|
|
this.material = res;
|
||
|
|
},
|
||
|
|
immediate: true
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.material-name {
|
||
|
|
color: #1890ff;
|
||
|
|
cursor: pointer;
|
||
|
|
text-decoration: underline;
|
||
|
|
}
|
||
|
|
</style>
|