scdky_bianyuanjiance2.0_ui/src/views/plan/save.vue

<!-- 新建/修改 方案 -->
<template>
  <div class="index-container">
    <!-- 步骤栏 -->
    <steps-bar class-name="steps-bar" :current-step="currentStep" :current-plan-data="currentPlanData" @changeStep="getStep" />
    <!-- <steps-bar class-name="steps-bar" :active="currentStep" @changeStep="getStep" /> -->
    <!-- 1-检测方案配置表单 -->
    <plan-config v-if="mountedFinished" class-name="plan-config" :current-step="currentStep" :current-plan-data="currentPlanData" @updataPlanData="updataCurrentPlanData" @changeStep="getStep" />
    <!-- 2-测点导入 -->
    <plan-check-point v-if="currentPlanData.id>0 && isMaster104===false" ref="planCheckPoint" class-name="plan-check-point" :current-step="currentStep" :current-plan-data="currentPlanData" @changeStep="getStep" />
    <plan-check-point-master104 v-if="currentPlanData.id>0 && isMaster104===true" ref="planCheckPointMaster104" class-name="plan-check-point" :current-step="currentStep" :current-plan-data="currentPlanData" @changeStep="getStep" />
    <!-- 3-步骤设置 -->
    <plan-steps v-if="currentPlanData.id>0" ref="planSteps" class-name="plan-steps" :current-step="currentStep" :current-plan-data="currentPlanData" @changeStep="getStep" />
    <!-- 4-用例设置 -->
    <plan-example v-if="currentPlanData.id>0" ref="planExample" class-name="plan-example" :current-step="currentStep" :current-plan-data="currentPlanData" @changeStep="getStep" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
// 步骤栏
import StepsBar from './components/StepsBar'
// 检测方案配置
import PlanConfig from './components/PlanConfig'
// 测点导入
import PlanCheckPoint from './components/PlanCheckPoint'
// 主站104检测方案-测点导入
import PlanCheckPointMaster104 from './components/PlanCheckPoint_master104'
// 步骤设置
import PlanSteps from './components/PlanSteps'
// 用例设置
import PlanExample from './components/PlanExample'
// 公用接口
import { httpGet } from '@/api/common-action'
export default {
  name: 'Plan',
  components: {
    StepsBar,
    PlanConfig,
    PlanCheckPoint,
    PlanCheckPointMaster104, // 主站104检测时的测点导入组件
    PlanSteps,
    PlanExample
  },
  data() {
    return {
      isMaster104: false, // 是否是主站104检测方案
      currentStep: 0,
      currentPlanData: {},
      mountedFinished: false,
      checkSteps: []
      // className: 'steps-bar'
    }
  },
  computed: {
    ...mapGetters([
      'roles'
    ])
  },
  // watch: {
  //   currentPlanData(val) {
  //     console.log(`creat planId changed, planId=`, val)
  //     this.currentPlanData = val
  //   },
  //   deep: true
  // },
  created() {
  },
  mounted() {
    // console.log(`this.$route.query=${this.$route.query.planId}`)
    // console.log('this.$route.query=', this.$route.query)
    this.$nextTick(() => {
      this.initFunctions()
    })
  },
  methods: {
    // 初始化
    async initFunctions() {
      // 获取planId
      // 乘以1强制转换成数字型
      this.currentPlanData.id = this.$route.query.planId * 1
      if (this.currentPlanData.id) {
        // 通过planId 获取 方案配置 数据
        const res = await httpGet(`/test/suite/${this.currentPlanData.id}`)
        // console.log('save initFunctions httpGet res=', res)
        if (res.productType === 'IEC104') {
          this.isMaster104 = true
        } else {
          this.isMaster104 = false
        }
        this.currentPlanData = res
        // if (res.productType === 'LOW_POWER' || res.protocolValue === 'MICRO_POWER') {
        //   this.className = 'one-steps-bar'
        // }
      }
      // 加载完成再加载 PlanConfig 否则 currentPlanData 可能会传不成功
      this.mountedFinished = true
    },
    // 操作步骤变更
    getStep(changeStep, currentPlanData) {
      // console.log('getStep changeStep=', changeStep)
      // console.log('getStep currentPlanData=', currentPlanData)
      this.currentStep = changeStep
      // console.log('currentStep=', this.currentStep)
      if (currentPlanData) {
        this.currentPlanData = currentPlanData
      }
      if (this.currentStep === 1) {
        // 当前方案是否是主站104方案
        if (this.isMaster104) {
          this.$refs.planCheckPointMaster104.getPlanCheckPoint()
        } else {
          this.$refs.planCheckPoint.getPlanCheckPoint()
        }
      } else if (this.currentStep === 2) {
        this.$refs.planSteps.getPlanSteps()
      } else if (this.currentStep === 3) {
        this.$refs.planExample.getPlanExamples()
        // this.$refs.planExample.tableLayout()
      }
      // this.$refs.planCheckPoint.tableLayout()
      // this.$refs.planSteps.tableLayout()
      // this.$refs.planExample.tableLayout()
    },
    // currentPlanData变更
    updataCurrentPlanData(val) {
      // console.log('newVal = ', val)
      this.$set(this.currentPlanData, 'productType', val)
    }
  }
}
</script>
<!-- 公用样式 -->
<style lang="scss">
// 底部按钮
.bottom-button {
  display: flex;
  justify-content: center;
  padding-bottom: 20px;
  .cancel-plan {
    padding-right: 20px;
  }
}
// 按钮公用样式
.dark-button {
  background-color: #00706B;
  border: 1px #00706B solid;
  color: #fff;
}
.light-button {
  color: #00706B;
  border: 1px #00706B solid;
}
</style>
<!-- 专用样式 -->
<style lang="scss" scoped>
.index-container {
  min-height: calc(100vh - 120px);
  border: 1px #CCC solid;
  margin: 30px 30px 0px 30px;
}
</style>