scdky_bianyuanjiance2.0_ui/src/views/device/components/DeviceCheck.vue

<!-- 步骤3 开始检测 -->
<template>
  <el-row v-show="currentStep==2">
    <el-col :span="3" style="border: 1px solid transparent">
      <!-- 占位 -->
    </el-col>
    <el-col :span="18" :class="className">
      <div class="device-current-check item">
        <div class="lable-title">当前检测设备：</div>
        <div class="lable-title">
          {{ requestData.deviceDefaultName }}
          <!-- <el-select v-model="requestData.deviceCurrentCheckValue" filterable placeholder="请选择检测设备">
            <el-option
              v-for="item in requestData.deviceCurrentCheckOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->
        </div>
      </div>
      <div class="device-current-plan item">
        <div class="lable-title">当前检测方案：</div>
        <div class="lable">
          <el-select v-model="requestData.deviceCurrentPlanValue" filterable placeholder="请选择检测设备">
            <el-option
              v-for="item in requestData.deviceCurrentPlanOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
      </div>
      <!-- 底部按钮 -->
      <div class="bottom-button item">
        <div class="save-plan">
          <el-button class="dark-button" @click="submitPlan()">开始检测</el-button>
        </div>
      </div>
    </el-col>
    <el-col :span="3" />
  </el-row>
</template>

<script>
// import { editRow } from '@/api/common-action'
export default {
  props: {
    className: {
      type: String,
      default: 'example-bar-default'
    },
    currentStep: {
      type: Number,
      default: 1
    },
    currentDeviceId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 默认数据
      requestData: {
        deviceDefaultName: '当前设备编号，加载中...',
        deviceCurrentCheckValue: 'd1',
        deviceCurrentCheckOptions: [],
        deviceCurrentPlanValue: 'p1',
        deviceCurrentPlanOptions: []
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      // 网页加载完成后执行
      if (this.currentDeviceId > 0) {
        //
      }
    })
  },
  methods: {
    // 提交
    submitPlan() {
      // console.log(`this.requestData=`, this.requestData)
      // // 已经是最后一步
      // const submitTableData = this.getSubmitTableRowData(this.requestData)
      // // /test/project/:project/suites?id=999&id=998
      // const editPath = `/test/project`
      // // const editData = submitTableData
      // editRow(editPath, submitTableData)
      this.$router.push({ path: `/device/check`, query: { deviceCheckId: this.currentDeviceId }})
      // 已经是最后一步了
    },
    // 获取提交的行数据-公用
    // #TODO: 测试如果翻页，选取状态能否正常保存
    getSubmitTableRowData(rowData) {
      // console.log('getSubmitTableRowData rowData=', rowData)
      let submitRowData = []
      // 组织出待提交数据
      submitRowData = {
        deviceId: rowData.deviceCurrentCheckValue,
        planId: rowData.deviceCurrentPlanValue
      }
      return submitRowData
    }
  }
}
</script>

<style lang="scss" scoped>
.device-check {
  $itemHeight: 40px;
  border: 1px #ccc solid;
  font-size: 16px;
  background-color: #f1f1f1;
  .item {
    display: flex;
    justify-content: center;
    padding-top:30px;
    .lable-title {
      padding-right: 5px;
      height: $itemHeight;
      line-height: $itemHeight;
    }
  }
  // 底部按钮
  .bottom-button {
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    .cancel-device {
      padding-right: 20px;
    }
  }
  // 按钮公用样式
  .dark-button {
    background-color: #00706B;
    border: 1px #00706B solid;
    color: #fff;
  }
  .light-button {
    color: #00706B;
    border: 1px #00706B solid;
  }
}

</style>