mj_firm_former/src/views/system/forget/stateDetails.vue

<template>
  <div class="sample-scan">
   <el-input
      v-model="facilityId"
      ref="redarInput"
      style="z-index: -999;">
    </el-input> 
    <div class="popContainer" v-if="redar" @click="remRedar">
      <dv-decoration-12 style="width:150px;height:150px;margin:0 auto;top: 35%;">
        <span style=" color: #66D9EF;"></span>
      </dv-decoration-12>
    </div>
    <el-dialog
      @click="getData"
      title='内审阶段'
      ref="dialog_ref"
      :visible.sync="scanVisible"
      :before-close="handleClose">
      <div class="stepsContent">
        <el-steps :active="active" finish-status="success" process-status="wait"  space="18%">
          <el-step title="开始" ></el-step>
          <el-step title="实施计划" process-status="finish"></el-step>
          <el-step title="首次会议" process-status="wait"></el-step>
          <el-step title="内审核查"></el-step>
          <el-step title="末次会议"></el-step>
          <el-step title="内审不符合项整改"></el-step>
          <el-step title="内审报告"></el-step>
          <el-step title="结束"></el-step>
        </el-steps>
        <!-- <el-button style="margin-top: 12px;" @click="next">下一步</el-button> -->
      </div>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
      </div> -->
    </el-dialog>

  </div>
</template>

<script>
import repostCurd from '@/business/platform/form/utils/custom/joinCURD.js'
export default {
  props: {
    obj: {
      default: [],
      type: Array
    },
    scanVisible:{
      type:Boolean,
      default: false
    },
  },
  data () {
    return {
      facilityId:'',
      updateNum:1,
      visible:false,
      redar:false,
      listData:[],
      dialogVisible: false,
      //默认第几个节点完成
      active:2,
      status:''
    }
  },
  watch:{
    listData: {
      handler(val, oldName) {
        if(val.length>0){
          this.visible = true
          this.redar = false    // 扫描后就让扫描组件隐藏
        }
      },
      deep: true,
      immediate: true
    },
   scanVisible:{
     handler(val, oldName) {
        if(val){
          this.redar = false       // 扫码的组件  一开始先展示
          this.visible = true    // 结果列表   一开始没扫描就不展示

          this.$nextTick(() => {
              this.$refs.redarInput.focus(); //聚焦input
            })
          this.listData = [] //清空列表
        }else{
          this.remRedar()
        }
     },
     deep: true,
     immediate: true
   }
  },
  created() {
    
    
  },
  mounted(){
    this.getData()
    this.open()
  },
  methods:{
    // open(){
    //   console.log('123',this.$refs.dialog_ref)
    // },
    // 确认关闭弹框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done();
        })
        .catch(_ => {});
    },
    getData(){
      let id = '',name='',host='',status='';
      console.log('脚本对象',this.obj,this.obj[0],this.obj[1].shi_fou_guo_shen_,this.obj[1].nei_shen_zu_zu_ch)
      // id = this.obj[0],
      //获取当前id，查内审阶段数据表  内审名称="" && 内审状态="已完成" 
    },
    // 
    //步骤i条
    next() {
      if (this.active++ > 7) {
        // 节点超过7之后回到初始状态
        this.active = 2;
      }
    },
      //改变步骤条状态
    stepStatus(step){
      switch(step){
      case 0:
        this.status ='';
        break;
      case 1:
        this.status = '内审核查'
        break;
      }
    },
  }

  }

</script>

<style lang="less" scoped>
.stateDetails{
  position: fixed;
      width: 1000px;
      height: 600px;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 100;
      background-color: white;
      border: 2px solid rebeccapurple;
      .stepsContent{
        width: 100%;
        height: calc(100% - 20px);
        margin: 10px 0px;

      }

}

</style>