删除根目录的node_modules

gear-ui3/src/components/Renderer/BomInfo.vue

@@ -0,0 +1,83 @@
+<template>
+  <el-descriptions :column="1" border v-if="bomInfo.length > 0">
+    <el-descriptions-item v-for="item in bomInfo" :key="item.attrKey" :label="item.attrKey">
+      {{ item.attrValue }}
+    </el-descriptions-item>
+  </el-descriptions>
+  <div v-else>
+    <el-empty description="暂无BOM信息" />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import useProductStore from '@/store/modules/product';
+import { ElEmpty } from 'element-plus';
+
+// 定义组件props
+const props = defineProps({
+  bomId: {
+    type: [String, Number],
+    required: false
+  },
+  itemType: {
+    type: String,
+    required: false
+  },
+  itemId: {
+    type: [String, Number],
+    required: false
+  }
+});
+
+// 状态管理
+const productStore = useProductStore();
+const bomInfo = ref([]);
+
+// 获取BOM信息的方法
+const getBomInfo = async () => {
+  const bomMap = productStore.bomMap;
+
+  if (!props.bomId && !props.itemType && !props.itemId) {
+    return;
+  }
+
+  let bomId = props.bomId;
+  if (!bomId) {
+    // 这里假设productMap是productStore中的属性
+    bomId = productStore.productMap?.[props.itemId]?.bomId;
+  }
+
+  if (!bomId) {
+    bomInfo.value = [];
+    return;
+  }
+
+  const info = await productStore.getBomInfo(bomId);
+  bomInfo.value = info;
+};
+
+// 监听属性变化
+watch(
+  () => props.bomId,
+  () => getBomInfo(),
+  { immediate: true }
+);
+
+watch(
+  () => props.itemId,
+  () => getBomInfo(),
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.bom-info {
+  cursor: pointer;
+  /* 溢出隐藏显示省略号 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
+}
+</style>

gear-ui3/src/components/Renderer/BomInfoMini.vue

@@ -0,0 +1,84 @@
+<template>
+  <div v-if="bomInfo.length > 0">
+    <el-tooltip :content="bomInfo.map(item => item.attrKey + ':' + item.attrValue).join(',')" class="bom-info"
+      placement="top">
+      <span>{{bomInfo.map(item => item.attrKey).join(',')}}</span>
+    </el-tooltip>
+  </div>
+  <div v-else>
+    <el-empty description="暂无BOM信息" />
+  </div>
+</template>
+
+<script setup>
+import { ref, watch } from 'vue';
+import useProductStore from '@/store/modules/product';
+import { ElEmpty } from 'element-plus';
+
+// 定义组件props
+const props = defineProps({
+  bomId: {
+    type: [String, Number],
+    required: false
+  },
+  itemType: {
+    type: String,
+    required: false
+  },
+  itemId: {
+    type: [String, Number],
+    required: false
+  }
+});
+
+// 状态管理
+const productStore = useProductStore();
+const bomInfo = ref([]);
+
+// 获取BOM信息的方法
+const getBomInfo = async () => {
+  const bomMap = productStore.bomMap;
+
+  if (!props.bomId && !props.itemType && !props.itemId) {
+    return;
+  }
+
+  let bomId = props.bomId;
+  if (!bomId) {
+    // 这里假设productMap是productStore中的属性
+    bomId = productStore.productMap?.[props.itemId]?.bomId;
+  }
+
+  if (!bomId) {
+    bomInfo.value = [];
+    return;
+  }
+
+  const info = await productStore.getBomInfo(bomId);
+  bomInfo.value = info;
+};
+
+// 监听属性变化
+watch(
+  () => props.bomId,
+  () => getBomInfo(),
+  { immediate: true }
+);
+
+watch(
+  () => props.itemId,
+  () => getBomInfo(),
+  { immediate: true }
+);
+</script>
+
+<style scoped>
+.bom-info {
+  cursor: pointer;
+  /* 溢出隐藏显示省略号 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 100px;
+}
+</style>

gear-ui3/src/components/Renderer/ProductInfo.vue

@@ -0,0 +1,88 @@
+<template>
+  <div>
+    <span class="product-name" @click="clickHandle">
+      <slot name="default" :product="product">
+        {{ product && product.productName ? product.productName : '--' }}
+      </slot>
+    </span>
+    <el-dialog 
+      :visible="showDetail" 
+      @close="showDetail = false" 
+      :title="product && product.productName ? product.productName : '--' " 
+      width="500px"
+      append-to-body
+    >
+      <el-descriptions :column="1" border>
+        <el-descriptions-item label="产品ID">
+          {{ product.productId || '--' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品名称">
+          {{ product.productName || '--' }}
+        </el-descriptions-item>
+        <el-descriptions-item label="产品编码">
+          {{ product.productCode || '--' }}
+        </el-descriptions-item>
+      </el-descriptions>
+      <BomInfo :bomId="product.bomId" />
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import BomInfo from './BomInfo.vue';
+
+export default {
+  name: 'ProductInfo',
+  components: {
+    BomInfo
+  },
+  props: {
+    productId: {
+      type: [String, Number],
+      required: true
+    },
+  },
+  data() {
+    return {
+      showDetail: false,
+      product: {},
+    };
+  },
+  computed: {
+    ...mapState({
+      productMap: state => state.category.productMap
+    }),
+  },
+  methods: {
+    clickHandle() {
+      this.showDetail = true;
+    }
+  },
+  watch: {
+    productId: {
+      handler(newVal) {
+        if (!newVal) {
+          this.product = {};
+        }
+        const res = this.productMap[this.productId] ? this.productMap[this.productId] : {};
+        this.product = res;
+      },
+      immediate: true
+    }
+  }
+};
+</script>
+
+<style scoped>
+.product-name {
+  color: #1890ff;
+  cursor: pointer;
+  text-decoration: underline;
+}
+
+/* 可选：调整描述列表的外边距 */
+:deep(.el-descriptions) {
+  margin-top: -10px;
+}
+</style>