<template>
|
<div class="processPage">
|
<el-steps :active="active" finish-status="success" style="step">
|
<el-step title="新建工艺路线"></el-step>
|
<el-step title="工艺路线版本"></el-step>
|
<el-step title="添加工序"></el-step>
|
<el-step title="完成"></el-step>
|
</el-steps>
|
<div class="step-dev">
|
<el-button @click="previous" v-if="active != 0">上一步</el-button>
|
<el-button type="primary" @click="next">下一步</el-button>
|
</div>
|
<div class="step-content">
|
<!-- 第一步 -->
|
<el-form :model="addStepForm0" :rules="addStepRules0" ref="dialogForm0" label-width="80px" label-position="center" class="addStepRules0" v-show="active == 0">
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="工艺路线" prop="name">
|
<el-input v-model="addStepForm0.name" placeholder="工艺路线" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="产品编号">
|
<el-select v-model="addStepForm0.productId" style="width: 100%" placeholder="产品编号">
|
<el-option v-for="item in productList" :key="item.id" :label="item.name" :value="item.id"/>
|
</el-select>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="备注">
|
<el-input v-model="addStepForm0.description" placeholder="备注" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<!-- 第二步 -->
|
<el-form :model="addStepForm1" :rules="addStepRules1" ref="dialogForm1" label-width="80px" label-position="center" class="addStepRules0" v-show="active == 1">
|
<el-row>
|
<el-col :span="24">
|
<el-row class="step1-top">
|
<el-col :span="8"><span>工艺路线名称</span><span>-</span></el-col>
|
<el-col :span="8"><span>关联产品</span><span>-</span></el-col>
|
<el-col :span="8"><span>工艺路线描述</span><span>-</span></el-col>
|
</el-row>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="版本名称">
|
<el-input v-model="addStepForm1.name" disabled placeholder="版本名称" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="关联产线" prop="groupIds">
|
<el-tree-select
|
node-key="id"
|
:props="{ label: 'title',children: 'children',hasChildren: 'ids'}"
|
v-model="addStepForm1.groupIds"
|
placeholder="关联产线"
|
:data="step1TreeData"
|
multiple
|
default-expand-all
|
:render-after-expand="false"
|
show-checkbox
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="24">
|
<el-form-item label="描述">
|
<el-input v-model="addStepForm1.description" placeholder="请输入工艺路线版本描述" clearable></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'add-craft',
|
components: {},
|
data() {
|
var valiarrPass = (rule, value, callback) => {
|
if (value.length == 0) {
|
callback(new Error('请选择关联产线'));
|
} else {
|
callback();
|
}
|
};
|
return {
|
step1TreeData: [],
|
active: 0,
|
//表单数据
|
addStepForm0: {
|
name: "",
|
productId: "",
|
description: "",
|
|
},
|
//验证规则
|
addStepRules0: {
|
name:[{required: true, message: '请输入工艺路线'}],
|
},
|
addStepForm1: {
|
name: "",
|
groupIds: [],
|
description: "",
|
|
},
|
//验证规则
|
addStepRules1: {
|
groupIds:[{validator: valiarrPass,required: true, trigger:'change'}],
|
},
|
productList: []
|
}
|
},
|
watch: {
|
active(step) {
|
console.log(step)
|
}
|
},
|
mounted(){
|
this.getProductList(); //for step0
|
this.getGroupWorkstation(); //for step1
|
},
|
methods: {
|
getGroupWorkstation() {
|
var obj = {
|
groupCategory: 1,
|
groupType: "group_workstation"
|
}
|
this.$HTTP.post(`/api/blade-cps/group/groupWorkstation`,obj).then(res=> {
|
if(res.code == 200) {
|
var tree = [];
|
var children = [];
|
res.data.forEach(item=> {
|
if(item.parentId == 1 && item.title != "默认") {
|
children.push(item);
|
}
|
if(item.parentId == 0) {
|
item.children = children;
|
tree.push(item);
|
}
|
})
|
this.step1TreeData = tree;
|
console.log(this.step1TreeData)
|
}
|
})
|
},
|
previous() {
|
if(this.active != 0) {
|
this.active -= this.active;
|
}
|
},
|
next() {
|
if(this.active == 0) {
|
this.setStep0();
|
}else if(this.active == 1) {
|
this.setStep1();
|
}else if(this.active == 2) {
|
|
}
|
},
|
setStep0() {
|
var obj = Object.assign({},this.addStepForm0);
|
this.$refs.dialogForm0.validate(async (valid) => {
|
if (valid) {
|
this.$HTTP.put("/api/blade-cps/craft-routing/update",obj).then(res=> {
|
this.isSaveing = false;
|
if(res.code == 200) {
|
this.active = 1;
|
this.$message.success("操作成功");
|
}else {
|
this.$alert(res.message, "提示", {type: 'error'});
|
}
|
})
|
}else{
|
return false;
|
}
|
})
|
},
|
setStep1() {
|
var obj = Object.assign({},this.addStepForm1);
|
obj.craftId = "";
|
this.$refs.dialogForm1.validate(async (valid) => {
|
if (valid) {
|
this.$HTTP.post("/api/blade-cps/production-craft-version/insert",obj).then(res=> {
|
this.isSaveing = false;
|
if(res.code == 200) {
|
this.active = 2;
|
this.$message.success("操作成功");
|
}else {
|
console.log(res,123)
|
//this.$alert(res.message, "提示", {type: 'error'});
|
}
|
})
|
}else{
|
return false;
|
}
|
})
|
},
|
getDetail(id) {
|
this.$HTTP.get(`/api/blade-cps/craft-routing/detail?id=${this.$route.query.id}`).then(res=> {
|
if(res.code == 200) {
|
this.addStepForm0 = res.data;
|
}
|
})
|
},
|
getProductList() {
|
this.$HTTP.get(`/api/blade-cps/craft-routing/not-band-craft?craftId=${this.$route.query.id}`).then(res=> {
|
if(res.code == 200) {
|
this.productList = res.data;
|
this.getDetail();
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.processPage {
|
min-height: 100%;
|
width:100%;
|
margin: 8px;
|
position: relative;
|
background-color: #fff;
|
padding: 40px 60px;
|
}
|
.step-dev {
|
position: absolute;
|
bottom: 12px;
|
right: 60px;
|
text-align: right;
|
}
|
.addStepRules0 {
|
width: 70%;
|
}
|
.step-content {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
margin-top: 30px;
|
}
|
.step1-top {
|
margin-bottom: 12px;
|
background-color: #faf8f8;
|
padding: 12px;
|
}
|
</style>
|
