From c9ce5e7f9a9ef52c66baf4f8a6e8d9e48b7cb251 Mon Sep 17 00:00:00 2001
From: lzhe <181968431@qq.com>
Date: 星期五, 24 五月 2024 23:59:27 +0800
Subject: [PATCH] 1

---
 src/views/console/product-process/process-route.vue |  339 ++++++++++++++++++++++++++++++++++++++++----------------
 1 files changed, 240 insertions(+), 99 deletions(-)

diff --git a/src/views/console/product-process/process-route.vue b/src/views/console/product-process/process-route.vue
index 0549bd5..83ba948 100644
--- a/src/views/console/product-process/process-route.vue
+++ b/src/views/console/product-process/process-route.vue
@@ -1,89 +1,79 @@
 <template>
 	<div class="processPage">
 		<div class="roleContainer">
-			<div>+鏂板缓宸ヨ壓璺嚎</div>
+			<div class="addRoute" @click="addRoute">+鏂板缓宸ヨ壓璺嚎</div>
 			<el-input v-model="keyword" size="small" prefix-icon="el-icon-search" placeholder="璇疯緭鍏ュ悕绉�" clearable @keyup.enter="searchBtn"></el-input>
 			<ul class="left-ul">
 				<li v-for="(item,index) in leftData" :class="{active: item.active}" @click="changeTabaleLi(index)">
-					<span>銆恵{item.code}}銆憑{item.name}}</span>
+					<div>{{item.name}}</div>
+					<div>鍏宠仈浜у搧銆恵{item.productCode}}銆憑{item.productName}}</div>
+					<div>{{item.description}}</div>
+					<el-dropdown class="fix-btn">
+						<span class="el-dropdown-link">...</span>
+						<template #dropdown>
+						<el-dropdown-menu>
+							<el-dropdown-item @click="table_edit(item, index)">缂栬緫</el-dropdown-item>
+							<el-dropdown-item>鍒犻櫎</el-dropdown-item>
+						</el-dropdown-menu>
+						</template>
+					</el-dropdown>
 				</li>
 			</ul>
 		</div>
 		<div class="process-main-tabs">
 			<div class="process-main-header">
-				<div class="main-header-label">宸ヨ壓璺嚎</div>
-				<div style="padding: 20px;border-bottom: 1px solid #dee;">
+				<div class="main-header-label">宸ヨ壓璺嚎<span>{{productName}}</span></div>
+				<div style="padding: 20px 20px 8px;border-bottom: 1px solid #dee;">
 					<div class="main-info">
-						<div class="main-info-title">宸ヨ壓璺嚎鐗堟湰</div>
+						<div class="info-top-title">宸ヨ壓璺嚎鐗堟湰</div>
 						<div class="main-info-tooltip">
-							<div class="main-info-item"><span style="background-color: yellow"></span><span>鏈畾鐗�</span></div>
+							<div class="main-info-item"><span style="background-color: #f8ab00"></span><span>鏈畾鐗�</span></div>
 							<div class="main-info-item"><span style="background-color: #b7c9f3"></span><span>宸插畾鐗�</span></div>
 						</div>
 					</div>
 					<div>
-						<el-button type="primary" @click="addVis" disabled>娣诲姞鏂扮増鏈�</el-button>
+						<div :class="{'btn-box':true, 'vistion-button': true, 'isBorder': item.isBorder}" v-for="(item,index) in detail.dtos" @click="changeDots(item,index)">
+							<span class="vistion-button-round"></span>
+							<el-tooltip trigger="click" class="detail-item" effect="dark" :content="vHtml" placement="bottom" raw-content>
+						      <span class="vistion-button-name" @click="showDetail(item)">{{item.name}}</span>
+						    </el-tooltip>
+							<el-icon class="vistion-button-icon"><DocumentCopy /></el-icon>
+							<el-icon class="vistion-button-icon" @click="delIcon(item)"><Delete /></el-icon>
+						</div>
+						<div class="btn-box most-vision" @click="changeV">{{changVTitle}}</div>
+						<el-button @click="addVision">+ 娣诲姞鏂扮増鏈�</el-button>
 					</div>
 				</div>
 			</div>
-			<div>鍏宠仈浜х嚎<span>-</span></div>
+			<div class="correlation-product-line">鍏宠仈浜х嚎<span>鍗冩枃绉戞妧</span></div>
 			<div class="process-main-content">
-				<div class="main-content-left">
-					<div class="main-info-title">宸ヨ壓璺嚎</div>
-					<div>
-	            		<el-button type="primary">鏂板</el-button>
-	            		<el-button type="primary">瀹氱増</el-button>
-	            		<el-button disabled>骞跺簭</el-button>
-					</div>
-					<el-table ref="multipleTableRef0" :data="tableData" border style="width: 100%" class="multipleTableRef">
-						<el-table-column prop="name" label="宸ュ簭椤哄簭"></el-table-column>
-						<el-table-column prop="code" label="宸ュ簭缂栧彿"></el-table-column>
-						<el-table-column prop="typeName" label="宸ュ簭鍚嶇О"></el-table-column>
-						<el-table-column fixed="right" label="鎿嶄綔" width="200px">
-							<template #default="scope">
-								<!-- <el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">缂栬緫</el-button>
-								<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">鍒锋柊</el-button>
-								<el-button text type="primary" size="small" @click="table_edit(scope.row, scope.$index)">鍒犻櫎</el-button> -->
-							</template>
-						</el-table-column>
-					</el-table>
-				</div>
-				<div class="main-content-right">
-					<div class="main-info-title">宸ュ簭淇℃伅</div>
-					<ul>
-						<li>宸ュ簭缂栧彿<span>-</span></li>
-						<li>宸ュ簭鍚嶇О<span>-</span></li>
-						<li>宸ュ簭椤哄簭<span>-</span></li>
-					</ul>
-				</div>
+				<workmanship :isCustomization = "true"></workmanship>
 			</div>
 		</div>
-		<!-- <el-dialog title="" v-model="visible" :width="360" class="visible-model">
-	        <el-form :model="routeForm" :rules="routeRules" ref="dialogForm" label-width="120px"
-	            label-position="center">
-	            <el-row>
-	                <el-col :span="24">
-	                    <el-form-item label="宸ヨ壓璺嚎鐗堟湰" prop="test">
-	                        <el-select v-model="routeForm.test" style="width: 100%" placeholder="璇烽�夋嫨">
-								<el-option v-for="item in testList" :key="item.id" :label="item.title" :value="item.id"/>
-							</el-select>
-	                    </el-form-item>
-	                </el-col>
-	            </el-row>
-	        </el-form>
-	        <template #footer>
-	            <el-button @click="visible = false">鍙栨秷</el-button>
-	            <el-button type="primary" :loading="isSaveing" @click="routeSubmit">纭畾</el-button>
-	        </template>
-	    </el-dialog> -->
 	</div>
+	<save-dialog v-if="dialog.save" ref="saveDialog" @success="addRouteSuccess" @closed="dialog.save=false"></save-dialog>
 </template>
 
 <script>
+	import saveDialog from './addRoute'
+	import workmanship from './process-route/workmanship'  //宸ヨ壓璺嚎
+	import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+	let icons = []
+	for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+		icons.push(key)
+	}
 	export default {
-		name: 'BOM',
-		components: {},
+		name: 'route',
+		components: {...ElementPlusIconsVue,saveDialog,workmanship},
 		data() {
 			return {
+				craftId: "",
+				id: "",
+				changVTitle: "鏇村鐗堟湰...",
+				isMore: true,
+				productName: "",
+				vHtml: '',
+				detail: {dtos: [{name: "",isBorder: false}]},
 				testList: [],
 				routeForm: {
 					test: ""
@@ -96,17 +86,81 @@
 				visible: false,
 				leftData: [],
 				dialog: {
-					save: false,
-					permission: false
+					save: false
 				},
 				info: {},
-				tableData: []
+				delIconId: ""
 			}
 		},
 		mounted(){
-			//this.getLeftTree();
+			this.getLeftTree();
 		},
 		methods: {
+			delIcon(item) {
+				this.delIconId = item.id;
+				var that = this;
+				this.$confirm(`纭瑕佸垹闄ゆ宸ヨ壓鐗堟湰鍚�?`, '', {
+					type: 'warning'
+				}).then(() => {
+					this.$HTTP.delete("/api/blade-cps/production-craft-version/remove/"+that.delIconId).then(res=> {
+						if(res.code == 200) {
+							that.$message.success("鎿嶄綔鎴愬姛");
+							that.getDetail();
+						}
+					})
+				}).catch(() => {
+
+				})
+			},
+			changeDots(item,index) {
+				this.detail.dtos.forEach(item=> {
+					item.isBorder = false;
+				})
+				this.detail.dtos[index].isBorder = true;
+				this.craftId = item.craftId;
+			},
+			addVision() {
+				this.$router.push({path: `/console/product-process/process-route/add-craft-version`,query: {id:this.id}})
+			},
+			addRoute() {
+				this.$router.push({path: `/console/product-process/process-route/add-craft`,query: {id:this.id}})
+			},
+			changeV() {
+				this.isMore = !this.isMore;
+				if(this.isMore) {
+					this.changVTitle = "鏇村鐗堟湰...";
+				}else {
+					this.changVTitle = "鏀惰捣";
+				}
+			},
+			showDetail(item) {
+				this.$HTTP.get(`/api/blade-cps/production-craft-version/detail/${item.id}`).then(res=> {
+					if(res.code == 200) {
+						this.vHtml = `<ul class='detailUl'>
+							<li><span class='detailStyle'>鍚嶇О</span><span>${res.data.name}</span></li>
+							<li><span class='detailStyle'>鍏宠仈浜х嚎</span><span>${res.data.groupName}</span></li>
+							<li><span class='detailStyle'>鎻忚堪</span><span>${res.data.description}</span></li>
+							<li><span class='detailStyle'>鍒涘缓浜�</span><span>${res.data.createUser}</span></li>
+							<li><span class='detailStyle'>鍒涘缓鏃堕棿</span><span>${res.data.createTime}</span></li>
+							<li><span class='detailStyle'>淇敼浜�</span><span>${res.data.updateUser}</span></li>
+							<li><span class='detailStyle'>淇敼鏃堕棿</span><span>${res.data.updateTime}</span></li>
+						</ul>`
+					}
+				})
+			},
+			table_edit(row){
+				this.$HTTP.get(`/api/blade-cps/craft-routing/not-band-craft?craftId=${row.id}`).then(res=> {
+					if(res.code == 200) {
+						this.dialog.save = true;
+						this.$nextTick(() => {
+							this.$refs.saveDialog.open('edit').setData(row,res.data);
+						})
+					}
+				})
+			},
+			addRouteSuccess() {
+				this.getLeftTree();
+			},
 			routeSubmit() {
 				this.$refs.dialogForm.validate(async (valid) => {
 					if (valid) {
@@ -126,9 +180,6 @@
 				})
 			},
 			searchBtn() {},
-			addVis() {
-				this.visible = true;
-			},
 			changeTabaleLi(index) {
 				this.leftData.forEach(item=> {
 					item.active = false;
@@ -136,10 +187,34 @@
 				this.leftData[index].active = true;
 				this.info = this.leftData[index];
 			},
+			getDetail() {
+				this.$HTTP.get(`/api/blade-cps/craft-routing/detail?id=${this.id}`).then(res=> {
+					if(res.code == 200) {
+						if(res.data.dtos) {
+							res.data.dtos.forEach(item=> {
+								item.isBorder = false;
+							})
+							res.data.dtos[0].isBorder = true;
+							this.craftId = res.data.dtos[0].craftId;
+						}
+						this.detail = res.data;
+					}
+				})
+			},
 			getLeftTree() {
-				this.$HTTP.get("/api/blade-cps/product/tree").then(res=> {
+				var params = [{
+					key: "name_like",value: ""
+				},{
+					key: "0",value: ""
+				}]
+				this.$HTTP.post("/api/blade-cps/craft-routing/list",{params}).then(res=> {
 					if(res.code == 200) {
 						this.leftData = res.data;
+						if(res.data) {
+							this.productName = res.data[0].name;
+							this.id = res.data[0].id;
+						}
+						this.getDetail();
 					}
 				})
 			}
@@ -177,22 +252,42 @@
 }
 .left-ul {
 	margin-top: 12px;
-	padding-left:30px;
-	padding-right:30px;
 }
 .left-ul li {
-	padding: 6px 6px;
+	padding-left:30px;
+	padding-right:30px;
+	padding-top: 8px;
+	padding-bottom: 0px;
 	list-style: none;
 	cursor: pointer;
 	margin-bottom: 6px;
+	border: 1px solid #7ab3ee;
+	width: 100%;
+	position: relative;
+}
+.fix-btn {
+	position: absolute;
+	top: 8px;
+	right: 2px;
+	width: 30px;
+	height: 20px;
+	background-color: #ebeaea;
+	text-align: center;
+}
+.el-dropdown-link {
+	text-align: center;
+    display: inline-block;
+    width: 100%;
 }
 .left-ul .active {
-	background-color: #7ab3ee;
 	display: inline-block;
-	width: 100%;
 }
 .left-ul li:hover {
 	background-color: #eff4f9;
+}
+.left-ul li > div {
+	margin-bottom: 12px;
+	font-size: 14px;
 }
 .main-info {
 	display: flex;
@@ -203,13 +298,22 @@
     text-align: left;
     color: #333;
     height: 52px;
+	line-height: 52px;
+	font-weight: bold;
     border-bottom: 1px solid #dee;
     padding: 0 16px;
 }
-.main-info-title {
-	font-size: 14px;
-    padding-left: 8px;
-    border-left: 2px solid #7ab3ee;
+.main-header-label span {
+	margin-left: 12px;
+}
+.info-top-title {
+	padding-left: 8px;
+    border-left: 4px solid #86bffa;
+    line-height: 18px;
+    margin-bottom: 16px;
+    font-weight: 700;
+    font-size: 16px;
+    color: #333;
 }
 .main-info-tooltip {
 	display: flex;
@@ -225,36 +329,73 @@
     margin-right: 4px;
     display: inline-block;
 }
-.main-info-conent {
-	display: flex;
-    margin: 8px 0px 12px;
+.addRoute {
+	color: #409eff;
+	padding: 12px 6px;
+	font-size: 14px;
+	cursor: pointer;
 }
-.main-info-conent > span {
+.btn-box {
+	display: inline-block;
+}
+.most-vision {
+	border-bottom: 1px solid #86bffa;
+	font-size: 14px;
+	font-weight: 700;
+	cursor: pointer;
 	margin-right: 12px;
+	margin-left: 6px;
+}
+.vistion-button {
+	border: 1px solid #86bffa;
+    padding: 8px 12px;
+	margin-right: 6px;
+	margin-bottom: 12px;
+}
+.vistion-button-name {
+	vertical-align: middle;
+	cursor: pointer;
+}
+.vistion-button-round {
+	width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-right: 4px;
+    display: inline-block;
+    background-color: #f8ab00;
+	vertical-align: middle;
+}
+.vistion-button-icon {
+	margin-left: 8px;
+	font-size: 14px;
+	vertical-align: middle;
+	cursor: pointer;
+}
+.correlation-product-line {
+	padding-top: 12px;
+	padding-bottom: 12px;
+	padding-left: 20px;
 	font-size: 14px;
 }
-.main-info-conent > span span {
-	margin-left:12px;
+.correlation-product-line span {
+	margin-left: 20px;
 }
-.process-main-content {
-	display: flex;
+.isBorder {
+	border: 1px solid #0176f0;
 }
-.main-content-left {
-	width: 70%;
-}
-.main-content-right {
-	flex: 1;
-}
-.main-content-right ul {
-	padding: 12px 30px;
-}
-.main-content-right ul li {
-	width: 50%;
-	float: left;
-	list-style: none;
-	margin-bottom:12px;
-}
-.main-content-right ul li span {
-	margin-left:12px;
-}
+</style>
+<style>
+	.detailUl {
+		padding:20px 6px 8px;
+	}
+	.detailUl li{
+		list-style: none;
+		margin-bottom: 8px;
+	}
+	.detailStyle {
+		display: inline-block;
+		width: 60px;
+		text-align: right;
+		margin-right:20px;
+	}
 </style>

--
Gitblit v1.9.3