158 lines
4.2 KiB
Vue
158 lines
4.2 KiB
Vue
<!--
|
|
* @Author: zwq
|
|
* @Date: 2021-11-18 14:16:25
|
|
* @LastEditors: zwq
|
|
* @LastEditTime: 2022-09-07 15:45:24
|
|
* @Description:
|
|
-->
|
|
<template>
|
|
<el-dialog
|
|
:title="!productId ? '新增' : '修改'"
|
|
:fullscreen="true"
|
|
:visible.sync="visible"
|
|
:before-close="cancle"
|
|
>
|
|
<el-card class="box-card">
|
|
<div slot="header" class="clearfix">
|
|
<el-steps :active="active" align-center finish-status="success">
|
|
<el-step title="基础信息"></el-step>
|
|
<el-step title="工艺流程"></el-step>
|
|
<el-step title="产品特性"></el-step>
|
|
<el-step title="控制特性"></el-step>
|
|
</el-steps>
|
|
</div>
|
|
<div>
|
|
<one-step
|
|
v-if="oneStepVisible"
|
|
ref="oneStepRef"
|
|
:product-id="productId"
|
|
@nextStep="nextStep"
|
|
@setPrductId="setPrductId"
|
|
@setInspectionStage="setInspectionStage"
|
|
></one-step>
|
|
<two-step
|
|
v-if="twoStepVisible"
|
|
ref="twoStepRef"
|
|
:product-id="productId"
|
|
@nextStep="nextStep"
|
|
></two-step>
|
|
<three-step
|
|
v-if="threeStepVisible"
|
|
ref="threeStepRef"
|
|
:product-id="productId"
|
|
@nextStep="nextStep"
|
|
></three-step>
|
|
<four-step
|
|
v-if="fourStepVisible"
|
|
ref="fourStepRef"
|
|
:product-id="productId"
|
|
:inspection-stage-arr="inspectionStageArr"
|
|
@nextStep="nextStep"
|
|
></four-step>
|
|
</div>
|
|
</el-card>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="cancle">取消</el-button>
|
|
<el-button @click="preStep" v-show="active > 0" :disabled="submitBtn">上一步</el-button>
|
|
<el-button type="primary" @click="dataFormSubmit()" :loading="submitBtn">{{
|
|
active >= 3 ? "确定" : "下一步"
|
|
}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import oneStep from "./productList-one";
|
|
import twoStep from "./productList-two";
|
|
import threeStep from "./productList-three";
|
|
import fourStep from "./productList-four";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
active: 0,
|
|
productId: "",
|
|
dataForm: {},
|
|
inspectionStageArr: [], //检验阶段
|
|
submitBtn: false,
|
|
oneStepVisible: false,
|
|
twoStepVisible: false,
|
|
threeStepVisible: false,
|
|
fourStepVisible: false,
|
|
stepShowObj: ["oneStepVisible", "twoStepVisible", "threeStepVisible", "fourStepVisible"],
|
|
stepArr: ["oneStepRef", "twoStepRef", "threeStepRef", "fourStepRef"],
|
|
};
|
|
},
|
|
components: {
|
|
oneStep,
|
|
twoStep,
|
|
threeStep,
|
|
fourStep,
|
|
},
|
|
methods: {
|
|
init(id) {
|
|
this.productId = id || "";
|
|
this.active = 0;
|
|
this.oneStepVisible = true;
|
|
this.$nextTick(() => {
|
|
this.$refs.oneStepRef.init(id);
|
|
});
|
|
this.submitBtn = false;
|
|
this.visible = true;
|
|
},
|
|
// 表单提交
|
|
dataFormSubmit() {
|
|
if (this.active >= 3) {
|
|
this.active += 1;
|
|
this.submitBtn = true;
|
|
this[this.stepShowObj[0]] = false;
|
|
this[this.stepShowObj[1]] = false;
|
|
this[this.stepShowObj[2]] = false;
|
|
this[this.stepShowObj[3]] = false;
|
|
this.visible = false;
|
|
this.$emit("refreshDataList");
|
|
} else {
|
|
this.$refs[this.stepArr[this.active]].dataFormSubmit();
|
|
}
|
|
},
|
|
nextStep() {
|
|
this[this.stepShowObj[this.active]] = false;
|
|
this.active += 1;
|
|
this[this.stepShowObj[this.active]] = true;
|
|
this.$nextTick(() => {
|
|
this.$refs[this.stepArr[this.active]].init();
|
|
});
|
|
},
|
|
preStep() {
|
|
this[this.stepShowObj[this.active]] = false;
|
|
this.active -= 1;
|
|
this[this.stepShowObj[this.active]] = true;
|
|
this.$nextTick(() => {
|
|
this.$refs[this.stepArr[this.active]].init();
|
|
});
|
|
},
|
|
cancle() {
|
|
this[this.stepShowObj[0]] = false;
|
|
this[this.stepShowObj[1]] = false;
|
|
this[this.stepShowObj[2]] = false;
|
|
this[this.stepShowObj[3]] = false;
|
|
this.visible = false;
|
|
this.$emit("refreshDataList");
|
|
},
|
|
setPrductId(id) {
|
|
this.productId = id;
|
|
},
|
|
setInspectionStage(arr) {
|
|
this.inspectionStageArr = arr;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.aui-card--fill .el-card__header {
|
|
height: 90px;
|
|
}
|
|
</style>
|