|
|
@@ -0,0 +1,328 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ class="mainContentBox"
|
|
|
+ style="padding: 0; box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.1)"
|
|
|
+ >
|
|
|
+ <div class="header">
|
|
|
+ <div class="title">绑定工序</div>
|
|
|
+ <el-space>
|
|
|
+ <el-button :icon="Back" size="small">返回</el-button>
|
|
|
+ <el-button type="primary" :icon="Download" size="small">下载</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ :icon="Document"
|
|
|
+ size="small"
|
|
|
+ @click="saveFlow"
|
|
|
+ >保存</el-button
|
|
|
+ >
|
|
|
+ </el-space>
|
|
|
+ </div>
|
|
|
+ <div class="binContainer">
|
|
|
+ <div class="processTree">
|
|
|
+ <el-collapse v-model="activeNames">
|
|
|
+ <el-collapse-item
|
|
|
+ v-for="(pProcess, pIndex) in list1"
|
|
|
+ :key="pProcess.workSection"
|
|
|
+ :name="pIndex"
|
|
|
+ >
|
|
|
+ <template #title>
|
|
|
+ <div class="title2">
|
|
|
+ {{ getNameByDictType(pProcess.workSection) }}
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="treeChild">
|
|
|
+ <VueDraggable
|
|
|
+ v-model="pProcess.baseOperationList"
|
|
|
+ :animation="150"
|
|
|
+ :group="{ name: 'people', pull: 'clone', put: false }"
|
|
|
+ :sort="false"
|
|
|
+ :clone="clone"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="childItem"
|
|
|
+ v-for="(item, index) in pProcess?.baseOperationList"
|
|
|
+ :key="item.id"
|
|
|
+ >
|
|
|
+ {{ item.operationName }}
|
|
|
+ </div>
|
|
|
+ </VueDraggable>
|
|
|
+ </div>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ <div class="flowBox">
|
|
|
+ <VueDraggable
|
|
|
+ v-model="list2"
|
|
|
+ :animation="150"
|
|
|
+ group="people"
|
|
|
+ style="min-width: 400px"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in list2"
|
|
|
+ :key="item.uuid"
|
|
|
+ class="flowItem"
|
|
|
+ @click="clickFlowItem(item, index)"
|
|
|
+ >
|
|
|
+ <div class="indexLabel">工序 {{ index + 1 }}</div>
|
|
|
+ <div :class="getFlowNameClass(index)">
|
|
|
+ {{ item?.operationVO?.operationName }} 当前id：{{
|
|
|
+ item?.operationId
|
|
|
+ }}
|
|
|
+ 下id：{{ item?.nextOperationId }}
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <Delete class="flowDelete" @click.stop="clickDelete(index)" />
|
|
|
+ </div>
|
|
|
+ <Bottom class="arrow" v-show="index < list2.length - 1" />
|
|
|
+ </div>
|
|
|
+ </VueDraggable>
|
|
|
+ </div>
|
|
|
+ <div class="detailInfo">3</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import {
|
|
|
+ Back,
|
|
|
+ Download,
|
|
|
+ Document,
|
|
|
+ Delete,
|
|
|
+ Bottom,
|
|
|
+} from "@element-plus/icons-vue";
|
|
|
+import { VueDraggable } from "vue-draggable-plus";
|
|
|
+import { processTreeList } from "@/api/craft/process/index";
|
|
|
+import { useCommonStoreHook, useDictionaryStoreHook } from "@/store";
|
|
|
+import { processesByRouteId } from "@/api/craft/route/index";
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+const router = useRouter();
|
|
|
+const route = useRoute();
|
|
|
+
|
|
|
+// 数据字典相关
|
|
|
+const { dicts } = useDictionaryStoreHook();
|
|
|
+
|
|
|
+// 顶部====================
|
|
|
+const back = () => {};
|
|
|
+
|
|
|
+const download = () => {};
|
|
|
+
|
|
|
+const save = () => {};
|
|
|
+
|
|
|
+// 左侧工序树====================
|
|
|
+const activeNames = ref([0]);
|
|
|
+const handleChange = (val) => {};
|
|
|
+
|
|
|
+const list1 = ref([]);
|
|
|
+
|
|
|
+const clone = (origin) => {
|
|
|
+ const data = JSON.parse(JSON.stringify(origin));
|
|
|
+ return {
|
|
|
+ created: "",
|
|
|
+ creator: "",
|
|
|
+ deleted: 0,
|
|
|
+ deptId: "",
|
|
|
+ id: "",
|
|
|
+ uuid: uuidv4(),
|
|
|
+ nextOperationId: "", //下一工序id
|
|
|
+ operationId: "", // 当前工序id
|
|
|
+ operationSort: 0, //当前工序排序号
|
|
|
+ operationVO: data,
|
|
|
+ orgId: "",
|
|
|
+ processRouteId: route.params.id, //工艺路线id
|
|
|
+ updated: "",
|
|
|
+ updator: "",
|
|
|
+ virtualCode: "",
|
|
|
+ };
|
|
|
+};
|
|
|
+
|
|
|
+const saveFlow = () => {
|
|
|
+ for (let i = 0; i < list2.value.length; i++) {
|
|
|
+ list2.value[i].operationSort = i;
|
|
|
+ list2.value[i].operationId = list2.value[i]?.operationVO?.id;
|
|
|
+ if (i === list2.value.length - 1) {
|
|
|
+ list2.value[i].nextOperationId = "";
|
|
|
+ } else {
|
|
|
+ list2.value[i].nextOperationId = list2.value[i + 1]?.operationVO?.id;
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+const loadTreeData = () => {
|
|
|
+ processTreeList().then((res) => {
|
|
|
+ list1.value = res.data ?? [];
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 中间列表====================
|
|
|
+const list2 = ref([]);
|
|
|
+const selectIndex = ref(-1);
|
|
|
+
|
|
|
+const clickFlowItem = (item, index) => {
|
|
|
+ selectIndex.value = index;
|
|
|
+ console.log("clickFlowItem", item);
|
|
|
+};
|
|
|
+
|
|
|
+const clickDelete = (index) => {
|
|
|
+ list2.value.splice(index, 1);
|
|
|
+};
|
|
|
+
|
|
|
+const getFlowNameClass = (index) => {
|
|
|
+ return index === selectIndex.value ? "nameLabelSelect" : "nameLabelCommon";
|
|
|
+};
|
|
|
+
|
|
|
+const loadProcessesFlow = () => {
|
|
|
+ processesByRouteId(route.params.id).then((res) => {
|
|
|
+ console.log("processesByRouteId", res);
|
|
|
+ list2.value = res.data ?? [];
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+// 右侧具体信息====================
|
|
|
+
|
|
|
+// 全局=======
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ loadTreeData();
|
|
|
+ loadProcessesFlow();
|
|
|
+});
|
|
|
+
|
|
|
+const getNameByDictType = (dictValue) => {
|
|
|
+ let str = "";
|
|
|
+ dicts?.workshop_section?.forEach((element) => {
|
|
|
+ if (element?.dictValue === dictValue) {
|
|
|
+ str = element?.dictLabel ?? "===";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return str;
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.binContainer {
|
|
|
+ height: calc(100vh - 165px);
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ overflow-y: scroll;
|
|
|
+ // background-color: white;
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ height: 50px;
|
|
|
+ display: flex;
|
|
|
+ background-color: #f5f7f9;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.processTree {
|
|
|
+ width: 220px;
|
|
|
+ height: 100%;
|
|
|
+ border-right: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .treeChild {
|
|
|
+ background: #f2f2f2;
|
|
|
+ padding: 20px 8px 10px 8px;
|
|
|
+ .childItem {
|
|
|
+ width: 100%;
|
|
|
+ height: 28px;
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid rgba(35, 32, 50, 0.1);
|
|
|
+ margin-bottom: 10px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.flowBox {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ overflow-y: auto;
|
|
|
+ padding-top: 47px;
|
|
|
+ .flowContain {
|
|
|
+ width: 400px;
|
|
|
+
|
|
|
+ min-height: 200px;
|
|
|
+ }
|
|
|
+ .flowItem {
|
|
|
+ height: 50px;
|
|
|
+ width: 400px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
+ .indexLabel {
|
|
|
+ line-height: 50px;
|
|
|
+
|
|
|
+ font-size: 14px;
|
|
|
+ color: #6e7993;
|
|
|
+
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .nameLabelCommon {
|
|
|
+ width: 299px;
|
|
|
+ line-height: 50px;
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 1px solid #232032;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .nameLabelSelect {
|
|
|
+ width: 299px;
|
|
|
+ line-height: 50px;
|
|
|
+ background: rgba(10, 89, 247, 0.2);
|
|
|
+ box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ border: 2px solid #0a59f7;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .flowDelete {
|
|
|
+ width: 1em;
|
|
|
+ height: 1em;
|
|
|
+ color: red;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+ .arrow {
|
|
|
+ position: absolute;
|
|
|
+ width: 10px;
|
|
|
+ height: 18px;
|
|
|
+ top: 50px;
|
|
|
+ left: 50%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .flowItem:hover {
|
|
|
+ .flowDelete {
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.detailInfo {
|
|
|
+ width: 300px;
|
|
|
+ height: 100%;
|
|
|
+ border-left: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ line-height: 44px;
|
|
|
+ color: #6f7991;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: bold;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 20px;
|
|
|
+}
|
|
|
+.title2 {
|
|
|
+ color: #232032;
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: left;
|
|
|
+ margin-left: 19px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style>
|
|
|
+.el-collapse-item__content {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+</style>
|
