spc/src/views/spc-basic/components/productList-add.vue

<!--
 * @Author: zwq
 * @Date: 2021-11-18 14:16:25
 * @LastEditors: zwq
 * @LastEditTime: 2023-06-26 15:07:04
 * @Description:
-->
<template>
  <div class="baseDialog">
  <el-dialog
    :fullscreen="true"
    :before-close="cancle"
    :visible.sync="visible"
  >
      <template #title>
        <slot name="title">
          <div class="titleStyle">{{ !productId ? $t('add') : $t('update') }}</div>
        </slot>
      </template>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-steps :active="active" align-center finish-status="success" process-status="finish">
          <el-step :title="$t('module.basicData.basicInfo')"></el-step>
          <el-step :title="$t('module.basicData.processFlow')"></el-step>
          <el-step :title="$t('module.basicData.productFeatures')"></el-step>
          <el-step :title="$t('module.basicData.controlFeatures')"></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">{{$t('cancel')}}</el-button>
      <el-button @click="preStep" v-show="active > 0" :disabled="submitBtn">{{$t('back')}}</el-button>
      <el-button type="primary" @click="dataFormSubmit()" :loading="submitBtn">{{
        active >= 3 ? $t('confirm') : $t('next')
      }}</el-button>
    </span>
  </el-dialog>
  </div>
</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("successSubmit");
      } 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("successSubmit");
    },
    setPrductId(id) {
      this.productId = id;
    },
    setInspectionStage(arr) {
      this.inspectionStageArr = arr;
    },
  },
};
</script>

<style>
.aui-card--fill .el-card__header {
  height: 90px;
}
</style>

<style>
.baseDialog .el-dialog__header {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  padding: 13px 24px;
  border-bottom: 1px solid #e9e9e9;
}
.baseDialog .el-dialog__header .titleStyle::before{
  content: '';
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0B58FF;
  border-radius: 1px;
  margin-right: 8px;
  position: relative;
  top: 2px;
}
.baseDialog .el-dialog__body {
  padding-left: 24px;
  padding-right: 24px;
}
</style>