|
|
@@ -0,0 +1,96 @@
|
|
|
+<template>
|
|
|
+ <el-card class="box-card">
|
|
|
+ <div style="margin-bottom: 10px">
|
|
|
+ <el-button type="primary" size="small" @click="clickAddBOM()">选择BOM</el-button>
|
|
|
+ </div>
|
|
|
+ <vue-draggable-next v-model="columns" tag="transition-group" @end="dragEnd">
|
|
|
+ <transition-group>
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in columns"
|
|
|
+ :key="index"
|
|
|
+ style="margin-right: 20px; margin-bottom: 20px; width: 30vw; border: 1px solid #999; cursor: pointer">
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="18">
|
|
|
+ <div style="padding: 8px; height: 37px; font-weight: 700; background-color: #c280ff">{{ item.code }}</div>
|
|
|
+ <div style="padding: 8px; height: 37px; background-color: #00ffff">
|
|
|
+ <el-tooltip class="box-item" effect="dark" placement="bottom">
|
|
|
+ <template #content>
|
|
|
+ <div style="max-width: 600px; word-break: break-all">{{ item.name }}</div>
|
|
|
+ </template>
|
|
|
+ <div style="font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">{{ item.name }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" style="border-left: 1px solid #999">
|
|
|
+ <div style="position: relative; height: 100%">
|
|
|
+ <div style="padding: 8px; height: 37px; background-color: #c280ff"></div>
|
|
|
+ <div style="padding: 8px; height: 37px; background-color: #00ffff"></div>
|
|
|
+ <span style="font-weight: 700; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)">{{ item.inventoryQuantity }}</span>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </transition-group>
|
|
|
+ </vue-draggable-next>
|
|
|
+
|
|
|
+ <el-dialog title="选择BOM" v-if="openBOM" v-model="openBOM" width="90%">
|
|
|
+ <SelectBOM :selectStatus="true" @selectBOM="selectBOM"></SelectBOM>
|
|
|
+ <template #footer>
|
|
|
+ <el-button @click="openBOM = false" size="large">关 闭</el-button>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </el-card>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import SelectBOM from "/src/views/group/BOM/management/index";
|
|
|
+import { VueDraggableNext } from "vue-draggable-next";
|
|
|
+import { ElMessage } from "element-plus";
|
|
|
+
|
|
|
+const { proxy } = getCurrentInstance();
|
|
|
+const columns = ref([]);
|
|
|
+const getList = () => {
|
|
|
+ proxy.post("/bomSpec/getBoard", {}).then((res) => {
|
|
|
+ columns.value = res;
|
|
|
+ });
|
|
|
+};
|
|
|
+getList();
|
|
|
+const openBOM = ref(false);
|
|
|
+const clickAddBOM = () => {
|
|
|
+ openBOM.value = true;
|
|
|
+};
|
|
|
+const selectBOM = (item) => {
|
|
|
+ let idList = [];
|
|
|
+ if (columns.value && columns.value.length > 0) {
|
|
|
+ let list = columns.value.filter((itemFilter) => itemFilter.id === item.id);
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ return ElMessage("该BOM已添加");
|
|
|
+ }
|
|
|
+ idList = columns.value.map((itemMap) => itemMap.id);
|
|
|
+ }
|
|
|
+ idList.push(item.id);
|
|
|
+ proxy.post("/bomSpec/editBoard", { bomSpecIdList: idList }).then(() => {
|
|
|
+ ElMessage({ message: "选择完成", type: "success" });
|
|
|
+ getList();
|
|
|
+ });
|
|
|
+};
|
|
|
+const dragEnd = () => {
|
|
|
+ let idList = columns.value.map((item) => item.id);
|
|
|
+ proxy.post("/bomSpec/editBoard", { bomSpecIdList: idList }).then();
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.item {
|
|
|
+ background-color: #f0f0f0;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ padding: 10px;
|
|
|
+ cursor: move;
|
|
|
+}
|
|
|
+::v-deep(.el-card__body) {
|
|
|
+ transition-group {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
lxf