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

<template>
  <div>
    <NavBar />
    <div :class="disabled? 'bigBoxInfo':'bigBox'">
      <van-row>
        <van-col span="24">
          <!-- <van-cell title="任务名称" value="每周监控调阅(0501~0507)" /> -->
          <div class="textTitle">任务名称:{{ taskData?.taskName }}</div>
        </van-col>
        <van-col span="24">
          <!-- <van-cell title="调阅开始时间" value="2023-05-05 10:12" /> -->
          <div class="text">调阅开始时间:{{ taskData?.taskStartTime }}</div>
        </van-col>
      </van-row>

      <!-- 主机选择 -->
      <van-row>
        <van-col span="24">
          <van-field
            required
            v-model="host"
            is-link
            readonly
            label="监控主机"
            placeholder=""
            :disabled="disabled"
            @click="showHost = true"
          />
          <van-popup v-model="showHost" round position="bottom">
            <van-picker
              title="监控主机"
              show-toolbar
              :columns="hostList"
              @confirm="onConfirm"
              @cancel="showHost = false"
              @change="onChange"
            >
              <template #option="option">
                <div style="display: flex; flex-direction: column; align-items: center">
                  <div>{{ option.deviceName }}</div>
                </div>
              </template>
            </van-picker>
          </van-popup></van-col
        >
      </van-row>
      <!-- 视频通道 -->
      <van-row>
        <van-col span="24">
          <van-field
            required
            v-model="fieldValue"
            :disabled="disabled || ishost"
            is-link
            readonly
            label="视频通道"
            placeholder=""
            @click="showStatus = true"
          />
          <van-popup v-model="showStatus" :disabled="ishost" round position="bottom">
            <van-picker
              title="视频通道"
              show-toolbar
              :columns="columns"
              @confirm="onConfirmPassage"
              @cancel="showStatus = false"
              @change="onChange"
            >
              <template #option="option">
                <div style="display: flex; flex-direction: column; align-items: center">
                  <div>{{ option.deviceName }}</div>
                </div>
              </template>
            </van-picker>
          </van-popup></van-col
        >
      </van-row>
      <van-row>
        <van-col span="24" v-if="!disabled">
          <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">
            请选择实际调阅项目进行填写,不需要编辑所有项目
          </van-notice-bar>
        </van-col>
      </van-row>

      <div>
        <van-form ref="vform">
          <!-- 主体选择项 -->
          <van-collapse v-model="activeNames" :is-link="false">
            <van-collapse-item :name="item.dictValue" v-for="item in dataList" :key="item.dictValue">
              <template #title>
                <div>
                  <van-checkbox :disabled="disabled" v-model="item.isChecked" shape="square">{{
                    item.dictLabel
                  }}</van-checkbox>
                </div>
              </template>

              <van-row>
                <van-col span="24">
                  <van-dropdown-menu>
                    <van-dropdown-item
                      :disabled ="disabled"
                      v-model="item.situation"
                      @change="changeHandler($event, item)"
                      :options="dictList"
                    />
                  </van-dropdown-menu>
                </van-col>
              </van-row>
              <van-form>
                <van-row v-show="item.situation == '1'">
                  <van-col span="24">
                    <van-field
                      v-model="item.abnormalIllustrate"
                      rows="2"
                      autosize
                      :disabled="disabled"
                      required
                      :maxlength="50"
                      label="异常说明"
                      type="textarea"
                      placeholder="请输入异常说明"
                      show-word-limit
                      :rules="[{ required: true, message: '内容不能为空' }]"
                    />
                  </van-col>
                </van-row>
              </van-form>
            </van-collapse-item>
          </van-collapse>
        </van-form>
      </div>

      <!-- 底部按钮 -->
      <div class="bottomClass" >
        <van-row>
          <van-col span="24">
            <van-button type="info" v-if="!disabled"  @click="addForm">{{
              $route.params.id.split('_')[2] == 'edit' ? '修改' : '添加'
            }}</van-button>
          </van-col>
        </van-row>
      </div>
    </div>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
// 主机列表组件
import MonitoingList from './monitoringList.vue'
import { Col, Row, Dialog, Icon, Toast, Picker } from 'vant'
import {
  registrationList,
  addInfo,
  updateInfo,
  getEditInfo,
  getSysDeviceByHostId,
  getorgHost
} from '@/api/toConsult.js'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      disabled: '', //是否禁用
      taskId: '', //任务ID
      falg: false, //校验是否通过
      dictList: [], //异常正常字典
      columns: [], //通道列表
      hostList: [], //主机列表
      showStatus: false, //通道显示隐藏
      showHost: false, //主机显示隐藏
      checked: false,
      checked1: false,
      message: '',
      ishost: true,
      fieldValue: '',
      host: '', //主机名称
      hostId: '', //主机ID
      videoChannel: '', //通道ID
      value1: 0,
      dicts: ['core_registration_project'],
      option1: [
        { text: '异常', value: 0 },
        { text: '正常', value: 1 }
      ],
      activeNames: [''],
      dataList: [], //列表
      taskData: []
    }
  },
  components: {
    NavBar,
    Dialog,
    Icon,
    Picker,
    Col,
    Row,
    MonitoingList
  },
  computed: {
    monitor() {
      return 'monitor'
    },
    ...mapGetters(['orgName', 'orgId'])
  },
  created() {
    this.init()
    this.disabled = +this.$route.params.id.split('_')[3] ? true : false
    console.log(this.disabled)
  },

  mounted() {},
  methods: {
    //根据卡片ID获取详情数据
    getInfoHandler() {
      console.log(this.dataList);
      //判断当前路由的信息是新增还是编辑
      if ((this.$route.params.id.split('_')[2] == 'edit') && this.dataList.length > 0) {
        //当前是编辑
        //获取卡片详情数据
        getEditInfo(this.$route.params.id.split('_')[1]).then(res => {
          let { data, msg, code } = res
          if (code == 200) {
            
            ;(this.activeNames = ['']), //滞空选中
              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)
                    this.activeNames.push(i.project)
                  }
                })
              })
            //赋值主机&通道名称
            this.host = data.hostName
            this.hostId = data.host
            this.fieldValue = data.videoChannelName
            this.videoChannel = data.videoChannel
            console.log(this.hostId)
            this.getHostTDlist(this.hostId)
          }
        })
      }
    },
    //项目初始化获取数据
    init() {
      //获取组织机构数据
      registrationList({ taskId: this.$route.params.id.split('_')[0] }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.taskData = data
        }
      })
      //获取当前登录人机构下主机列表

      getorgHost({ orgId: this.orgId, monitorId: this.$route.params.id.split('_')[1] }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.hostList = data
        }
      })
      this.getDictHandler('core_registration_project', res => {
        this.dataList = JSON.parse(JSON.stringify(res))
        this.dataList.forEach(item => {
          this.$set(item, 'situation', '0') //异常情况初始化默认值
          this.$set(item, 'abnormalIllustrate', '') //情况说明初始化默认值
        })
        this.getInfoHandler() //获取详情
      })
      //获取异常情况字典
      this.getDictHandler('core_check_type', res => {
        this.dictList = res
        this.dictList.forEach(item => {
          item.text = item.dictLabel
          item.value = item.dictValue
        })
      })
    },

    onConfirm(value, index) {
      this.host = this.hostList[index].deviceName
      this.hostId = this.hostList[index].id
      this.getHostTDlist(this.hostId)
    },
    //通过主机ID获取通道列表
    getHostTDlist(id) {
      //通过主机ID获取通道列表
      getSysDeviceByHostId({ hostId: id, monitorId: this.$route.params.id.split('_')[1] }).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.columns = data
          console.log(data)
          this.ishost = false
          this.showHost = false
        }
      })
    },
    onConfirmPassage(value, index) {
      this.fieldValue = this.columns[index].deviceName
      this.videoChannel = this.columns[index].id
      this.showStatus = false
    },

    onChange(picker, value, index) {},

    onFailed(errorInfo) {
      this.falg = true
    },
    changeHandler(val, item) {
      if (val == '0') {
        item.abnormalIllustrate = ''
      }
    },
    onCancel() {
      Toast('取消')
    },
    //表单提交前校验
    beforSubmitV() {
      this.falg = false
      if (this.host == '' && this.hostId == '') {
        Toast('监控主机不能为空!')
        this.falg = true
        return
      }
      if (this.fieldValue == '' && this.videoChannel == '') {
        Toast('视频通道不能为空!')
        this.falg = true
        return
      }
      console.log(this.dataList)

      this.dataList.forEach(item => {
        if (item.situation == '1' && item.abnormalIllustrate == '') {
          Toast(`${item.dictLabel}的异常情况说明不能为空!`)
          this.falg = true
        }
      })
    },
    //表单提交
    addForm() {
      this.beforSubmitV()

      if (this.falg) {
        //校验不通过
      } else {
        let list = []
        this.activeNames.forEach(item => {
          this.dataList.forEach(i => {
            if (item == i.dictValue) {
              i.project = i.dictValue
              list.push(i)
            }
          })
        })
        if (this.$route.params.id.split('_')[2] == 'edit') {
          //编辑提交
          updateInfo({
            host: this.hostId,
            // taskRegistrationId:+this.$route.params.id.split('_')[1],
            videoChannel: this.videoChannel,
            id: this.$route.params.id.split('_')[1],
            coreMonitoringTaskMonitorInfoList: list
          }).then(res => {
            let { data, msg, code } = res
            if (code == 200) {
              Toast('编辑成功!')
              this.$router.push('/consultInfo/' + this.$route.params.id.split('_')[0])
            }
            this.falg = false
          })
        } else {
          //新增提交
          addInfo({
            host: this.hostId,
            // taskRegistrationId:+this.$route.params.id.split('_')[1],
            videoChannel: this.videoChannel,
            taskRegistrationId: this.$route.params.id.split('_')[1],
            coreMonitoringTaskMonitorInfoList: list
          }).then(res => {
            let { data, msg, code } = res
            if (code == 200) {
              Toast('添加成功!')
              this.$router.push('/consultInfo/' + this.$route.params.id.split('_')[0])
            }
            this.falg = false
          })
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.bigBox {
  height: calc(100vh - 260px);
  overflow: scroll;
}
.bigBoxInfo {
  height: calc(100vh);
  overflow: scroll;
}
.van-button {
  width: 100%;
  margin-top: 10px;
  border-radius: 10px;
}
.bottomClass {
  position: fixed;
  width: 100%;
  bottom: 0%;
}
.condition {
  font-size: 50px !important;
  line-height: 50px;
  color: #1989fa;
}
.textTitle {
  font-size: 40px;
  font-weight: bold;
  padding: 20px;
}
.text {
  padding: 20px;
  font-size: 26px;
}
</style>