klp-oa/klp-ui/src/components/KLPService/Renderer/RawMaterialInfo.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>
      <BomInfo :bomId="material.bomId" />
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import BomInfo from './BomInfo.vue';

export default {
  name: 'RawMaterialInfo',
  components: {
    BomInfo
  },
  props: {
    materialId: {
      type: [String, Number],
      required: true
    }
  },
  data() {
    return {
      showDetail: false,
      material: {},
    };
  },
  computed: {
    ...mapState({
      materialMap: state => state.category.rawMaterialMap // 假设vuex中为material模块
    }),
  },
  watch: {
    materialId: {
      handler: function (newVal) {
        const res = this.materialMap[this.materialId] ? this.materialMap[this.materialId] : {};
        this.material = res;
      },
      immediate: true
    }
  }
}
</script>

<style scoped>
.material-name {
  color: #1890ff;
  cursor: pointer;
  text-decoration: underline;
}
</style>