<template>
|
<div class="processPage">
|
<div class="roleContainer">
|
<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)">
|
<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">工艺路线<span>{{productName}}</span></div>
|
<div style="padding: 20px 20px 8px;border-bottom: 1px solid #dee;">
|
<div class="main-info">
|
<div class="info-top-title">工艺路线版本</div>
|
<div class="main-info-tooltip">
|
<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>
|
<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" v-if="detail.dtos.length!=0">{{changVTitle}}</div>
|
<el-button @click="addVision">+ 添加新版本</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="correlation-product-line">关联产线<span>千文科技</span></div>
|
<div class="process-main-content">
|
<!-- isCustomization 新建/步骤 -->
|
<workmanship :isCustomization="true" :craftId="craftId"></workmanship>
|
</div>
|
</div>
|
</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: 'route',
|
components: {...ElementPlusIconsVue,saveDialog,workmanship},
|
data() {
|
return {
|
craftId: "",
|
id: "",
|
changVTitle: "更多版本...",
|
isMore: true,
|
productName: "",
|
vHtml: '',
|
detail: {dtos: [{name: "",isBorder: false}]},
|
testList: [],
|
routeForm: {
|
test: ""
|
},
|
routeRules: {
|
test: [
|
{ required: true, message: "请选择工艺路线版本" }
|
]
|
},
|
visible: false,
|
leftData: [],
|
dialog: {
|
save: false
|
},
|
info: {},
|
delIconId: ""
|
}
|
},
|
mounted(){
|
this.getLeftTree();
|
},
|
methods: {
|
delIcon(item) {
|
this.delIconId = item.id;
|
var that = this;
|
this.$confirm(`确认要删除此工艺版本吗?`, '', {
|
type: 'warning'
|
}).then(() => {
|
this.$HTTP.delete("/api/smis/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.id;
|
},
|
addVision() {
|
this.$router.push({path: `/console/product-process/process-route/add-craft-version`,query: {id:this.id,craftId:this.craftId}})
|
},
|
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/smis/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/smis/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) {
|
// this.$HTTP.post("/api/blade-system/data-scope/submit",obj).then(res=> {
|
// this.isSaveing = false;
|
// if(res.code == 200) {
|
// this.$emit('success', this.addDictForm, this.mode);
|
// this.visible = false;
|
// this.$message.success("操作成功");
|
// }else {
|
// this.$alert(res.message, "提示", {type: 'error'});
|
// }
|
// })
|
}else{
|
return false;
|
}
|
})
|
},
|
searchBtn() {},
|
changeTabaleLi(index) {
|
this.leftData.forEach(item=> {
|
item.active = false;
|
})
|
this.leftData[index].active = true;
|
this.info = this.leftData[index];
|
},
|
getDetail() {
|
this.$HTTP.get(`/api/smis/craft-routing/detail?id=${this.id}`).then(res=> {
|
if(res.code == 200) {
|
if(res.data.dtos.length != 0) {
|
res.data.dtos.forEach(item=> {
|
item.isBorder = false;
|
})
|
res.data.dtos[0].isBorder = true;
|
this.craftId = res.data.dtos[0].id;
|
}
|
this.detail = res.data;
|
}
|
})
|
},
|
getLeftTree() {
|
var params = [{
|
key: "name_like",value: ""
|
},{
|
key: "0",value: ""
|
}]
|
this.$HTTP.post("/api/smis/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();
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.processPage {
|
display: flex;
|
min-height: 100%;
|
margin: 8px;
|
}
|
.processContainer-title {
|
font-size: 16px;
|
text-align: center;
|
height: 38px;
|
line-height: 38px;
|
border-bottom: 1px solid #e2e2e2;
|
background-color: #409eff;
|
color: #fff;
|
border-radius: 2px 2px 0 0;
|
margin-bottom: 12px;
|
}
|
.roleContainer {
|
width: 240px;
|
margin-right: 8px;
|
padding: 4px;
|
background-color: #fff;
|
}
|
.process-main-tabs {
|
flex: 1;
|
padding: 8px;
|
background-color: #fff;
|
}
|
.left-ul {
|
margin-top: 12px;
|
}
|
.left-ul li {
|
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 {
|
display: inline-block;
|
}
|
.left-ul li:hover {
|
background-color: #eff4f9;
|
}
|
.left-ul li > div {
|
margin-bottom: 12px;
|
font-size: 14px;
|
}
|
.main-info {
|
display: flex;
|
justify-content: space-between;
|
}
|
.main-header-label {
|
font-size: 14px;
|
text-align: left;
|
color: #333;
|
height: 52px;
|
line-height: 52px;
|
font-weight: bold;
|
border-bottom: 1px solid #dee;
|
padding: 0 16px;
|
}
|
.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;
|
font-size: 12px;
|
}
|
.main-info-item {
|
margin-right: 8px;
|
}
|
.main-info-item span:nth-child(1) {
|
width: 10px;
|
height: 10px;
|
border-radius: 50%;
|
margin-right: 4px;
|
display: inline-block;
|
}
|
.addRoute {
|
color: #409eff;
|
padding: 12px 6px;
|
font-size: 14px;
|
cursor: pointer;
|
}
|
.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;
|
}
|
.correlation-product-line span {
|
margin-left: 20px;
|
}
|
.isBorder {
|
border: 1px solid #0176f0;
|
}
|
</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>
|
