klp-oa/klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.vue

<template>
  <div>
    <!-- 作用域插槽 -->
    <span class="material-name" @click.stop="showDetail = true">
      <slot name="default" :material="materialFull">
        {{ materialFull.rawMaterialName || '未知' }}[{{ materialFull.specification || '无规格' }}] - (材质：{{ materialFull.material || '无材质' }})
      </slot>
    </span>
    <el-dialog :visible="showDetail" @close="showDetail = false" :title="materialFull.rawMaterialName || '--'" width="600px"
      append-to-body>
      <el-descriptions :column="1" border>
        <!-- <el-descriptions-item label="原材料ID">{{ materialFull.rawMaterialId }}</el-descriptions-item> -->
        <el-descriptions-item label="原材料名称">{{ materialFull.rawMaterialName || '--' }}</el-descriptions-item>
        <el-descriptions-item label="原材料编码">{{ materialFull.rawMaterialCode || '--' }}</el-descriptions-item>
        <el-descriptions-item label="规格">{{ materialFull.specification || '--' }}</el-descriptions-item>
        <el-descriptions-item label="材质">
          {{ materialFull.material || '--' }}
        </el-descriptions-item>
        <el-descriptions-item label="表面处理">
          {{ materialFull.surfaceTreatment || '--' }}
        </el-descriptions-item>
        <!-- 锌层 -->
        <el-descriptions-item label="锌层">
          {{ materialFull.zincLayer || '--' }}
        </el-descriptions-item>
        <!-- 厂家 -->
        <el-descriptions-item label="厂家">
          {{ materialFull.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: {
    materialFull() {
      // 完整的material, 确保每个字段都有值
      if (!this.material) {
        return {};
      }
      return {
        rawMaterialId: this.material.rawMaterialId || '',
        rawMaterialName: this.material.rawMaterialName || '',
        rawMaterialCode: this.material.rawMaterialCode || '',
        specification: this.material.specification || '',
        material: this.material.material || '',
        surfaceTreatment: this.material.surfaceTreatment || '',
        zincLayer: this.material.zincLayer || '',
        manufacturer: this.material.manufacturer || '',
      }
    }
  },
  // 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>