soc_app/src/views/menu/monitoringCall/components/taskInfo.vue

<template>
  <div>
    <van-overlay :show="show">
      <div class="wrapper">
        <div class="block">
          <!-- 标题信息 -->
          <van-row>
            <van-col span="24">
              <div class="textTitle">调阅记录</div>
            </van-col>
            <van-col span="24">
              <div class="text">{{videoChannelName}}</div>
            </van-col>
          </van-row>
          <!-- //主体内容 -->
          <div class="mainBox">
            <van-row class="titleList">
              <van-col class="itemCol" span="10"> 类型</van-col>
              <van-col class="itemCol" span="7"> 正常</van-col>
              <van-col class="itemCol" span="7"> 异常</van-col>
            </van-row>
            <div class="mainItem">
              <van-row class="rowItem" v-for="item in dataList" :key="item.id">
                <van-col class="itemCls" span="10"
                  ><van-checkbox v-model="item.isChecked" @change="checkedFc($event, item)" :disabled="disabled" icon-size="16px" shape="square">{{
                    item.dictLabel
                  }}</van-checkbox>
                </van-col>
                <van-radio-group v-model="item.situation" @change="checkHandler($event, item)">
                  <van-col class="itemCls" span="7" v-for="itemDict in dictList" :key="itemDict.dictValue">
                    <van-radio icon-size="16px"  :name="itemDict.dictValue">{{
                      itemDict.dictLabel
                    }}</van-radio></van-col
                  >
                </van-radio-group>
              
                <van-col span="24" v-if="item.situation == '1'">
                  <van-field
                    v-model="item.abnormalIllustrate"
                    rows="2"
                    required
                    autosize
                    label=""
                    type="textarea"
                    maxlength="50"
                    placeholder="请输入异常原因"
                    show-word-limit
                    :rules="[{ required: true, message: '内容不能为空' }]"
                /></van-col>
              </van-row>
            </div>
            <!-- 底部按钮 -->
            <div>
              <van-row>
                <van-col span="12">
                  <van-button class="btn" size="small" @click="show = false" type="default">取消</van-button></van-col
                >
                <van-col span="12">
                  <van-button class="btn" size="small" type="info" v-if="!disabled" @click="submitHadnler">{{
                    '确定'
                  }}</van-button></van-col
                >
              </van-row>
            </div>
          </div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import {

  updateInfo,
  getEditInfo,

} from '@/api/toConsult.js'
import {  Toast } from 'vant'

export default {
  name: 'SocAppTaskInfo',

  data() {
    return {
      taskId: '', //任务ID
      show: false,
      host: '',
      hostId: '',
      videoChannelName: '',
      videoChannel: '',
      taskRegistrationId: '',
      id: '',
      falg: false,
      checked: '',
      message: '',
      radio: '0',
      dictList: [],
      dataList: [] //列表
    }
  },
  created() {
    this.disabled = +this.$route.params.id.split('_')[3] ? true : false
  },
  mounted() {},

  methods: {
    //组件初始化
    init(taskId, videoId, hostId) {
      this.taskId = taskId
      this.show = true
      //获取调阅字典
      this.getDictHandler('core_registration_project', res => {
        this.dataList = JSON.parse(JSON.stringify(res))
        this.dataList.forEach(item => {
          this.$set(item, 'situation', '') //异常情况初始化默认值
          this.$set(item, 'isChecked', false) //选中初始值
          this.$set(item, 'abnormalIllustrate', '') //情况说明初始化默认值
          
        })
        //获取异常情况字典
        this.getDictHandler('core_check_type', res => {
          this.dictList = res
          this.dictList.forEach(item => {
            item.text = item.dictLabel
            item.value = item.dictValue
          })
        })
        this.getInfoHandler(taskId, videoId, hostId) //获取详情
      })
    },
    //复选框选中变化
    checkHandler(val, item) {
     
      if (val&&item.situation=='0') {
        item.abnormalIllustrate = ''
      }
    },
    checkedFc(val,item){
      if(val){
        if(!item.situation){
          item.situation='0'
        } 
          
      }else{
        item.situation=''
        item.abnormalIllustrate=''
      }
      
    },
    getInfoHandler(id, videoId, hostId) {
      //获取卡片详情数据
      getEditInfo({ taskId: id+'', videoId: videoId+'', hostId: hostId+'' }).then(res => {
        let { data, msg, code } = res
        if (code == 200) {
          
            this.dataList.forEach(item => {
              data.coreMonitoringTaskMonitorInfoList.forEach(i => {
                if (i.project === item.dictValue) {
                  
                  //查询赋值
                  this.$set(item, 'isChecked', true)
                  this.$set(item, 'situation', i.situation)
                  this.$set(item, 'abnormalIllustrate', i.abnormalIllustrate)
                  
                }
              })
            })
            console.log(this.dataList);
          //赋值主机&通道名称
          this.host = data.hostName
          this.hostId = data.host
          this.videoChannelName = data.videoChannelName
          this.videoChannel = data.videoChannel
          this.taskRegistrationId = data.registrationId
          this.id = data.id
            
         
        }
      })
    },

    //表单提交前校验
    beforSubmitV() {
      this.falg = false

      this.dataList.forEach(item => {

        if (item.isChecked) {
          console.log(item);
          if (item.situation == '1' && item.abnormalIllustrate == '') {
            Toast(`${item.dictLabel}的异常情况说明不能为空!`)
            
            this.falg = true
          }
        }
      })
    },
    submitHadnler() {
      this.beforSubmitV()
      if (this.falg) {
        //校验不通过
      } else {
        let list = []

        this.dataList.forEach(item => {
          if (item.isChecked) {
            item.project=item.dictValue
            list.push(item)
          }
        })

        //编辑提交
        updateInfo({
          host: this.hostId,
          videoChannel: this.videoChannel,
          taskRegistrationId: this.taskRegistrationId,
          id: this.id||'',
          coreMonitoringTaskMonitorInfoList: list
        }).then(res => {
          let { data, msg, code } = res
          if (code == 200) {
            Toast('编辑成功!')
           this.show=false
           this.$emit('resetList')
          }
          this.falg = false
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.mainItem {
  overflow: scroll;
  height: 750px;
}
.rowItem {
  margin-bottom: 30px;
}
.block {
  width: 85vw;
  height: 140vw;
  background-color: #fff;
  margin: auto;
  position: absolute;
  top: 7%;
  left: 10%;
  padding: 20px;
}
.textTitle {
  font-size: 30px;
  font-weight: bold;
  padding: 20px;
  color: black;
  text-align: center;
  padding-bottom: 0px;
}

.text {
  text-align: center;
  margin-top: 20px;
  color: black;
}
.mainBox {
  .titleList {
    background-color: #e8e8e8;
    margin-top: 20px;
    font-size: 22px;
    text-align: left;
    font-weight: bold;
    .itemCol {
      padding-left: 10px;
      color: black;
      height: 40px;
      line-height: 40px;
    }
  }
}
.itemCls {
  padding-left: 10px;

  height: 40px;
  line-height: 40px;
}
.btn {
  width: 90%;
}
</style>