BOM新增修改删除功能开发、以及BOM结构的可编辑

zhangwencui

6 小时以前 4c8d18cc5ed8a7b0e220c91a858d16d0310896df

 src/pages/productionDesign/bom/BomStructureItem.vue

@@ -58,23 +58,39 @@
            </view>
          </view>
        </view>
        <view v-if="isEdit"
              class="item-actions">
          <up-button size="mini"
                     type="primary"
                     @click.stop="emitEdit">编辑</up-button>
          <up-button size="mini"
                     type="success"
                     @click.stop="emitAddChild">添加</up-button>
          <up-button size="mini"
                     type="error"
                     @click.stop="emitRemove">删除</up-button>
        </view>
      </view>
    </view>
    <!-- 递归展示子节点 -->
    <view v-if="hasChildren && isExpanded"
          class="children-container">
      <BomStructureItem v-for="(child, index) in item.children"
                        :key="index"
                        :key="child.tempId || child.id || index"
                        :item="child"
                        :level="level + 1"
                        :isLast="index === item.children.length - 1"
                        :processOptions="processOptions" />
                        :processOptions="processOptions"
                        :isEdit="isEdit"
                        @edit="$emit('edit', $event)"
                        @add-child="$emit('add-child', $event)"
                        @remove="$emit('remove', $event)" />
    </view>
  </view>
</template>

<script setup>
  import { ref, computed, defineProps } from "vue";
  import { ref, computed, defineProps, defineEmits } from "vue";

  const props = defineProps({
    item: {
@@ -93,7 +109,12 @@
      type: Array,
      default: () => [],
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
  });
  const emit = defineEmits(["edit", "add-child", "remove"]);

  const isExpanded = ref(true);
  const hasChildren = computed(
@@ -109,6 +130,16 @@
  const getProcessName = id => {
    const process = props.processOptions.find(p => p.id === id);
    return process ? process.name : "-";
  };

  const emitEdit = () => {
    emit("edit", props.item);
  };
  const emitAddChild = () => {
    emit("add-child", props.item);
  };
  const emitRemove = () => {
    emit("remove", props.item);
  };
</script>

@@ -253,4 +284,11 @@
  .children-container {
    position: relative;
  }

  .item-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16rpx;
    margin-top: 16rpx;
  }
</style>