soc_app/src/views/menu/monitoringCall/index.vue

<template>
  <div>
    <NavBar />
    <van-row>
      <van-col span="24"
        ><van-field v-model="value1" is-link readonly label="机构" placeholder="" @click="show = true" />
        <van-popup v-model="show" round position="bottom" :close-on-click-overlay="false">
          <van-cascader
            v-model="cascaderValue"
            title="组织机构"
            :options="options"
            @close="closeDialog"
            @change="changeCascader"
            @finish="onFinish"
            :field-names="fieldNames"
          />
        </van-popup>
      </van-col>
    </van-row>
    <van-row>
      <van-col span="12"
        ><van-field v-model="fieldValue" is-link readonly label="状态" placeholder="" @click="showStatus = true" />
        <van-popup v-model="showStatus" round position="bottom">
          <van-picker
            title="调阅状态"
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="onCancel"
            @change="onChange"
            :close-on-click-overlay="false"
          /> </van-popup
      ></van-col>
      <van-col span="12">
        <van-field v-model="currentDate" is-link readonly label="月份" placeholder="" @click="showDate = true" />
        <van-popup v-model="showDate" round position="bottom">
          <van-datetime-picker v-model="currentDate" type="year-month" title="月份" />
        </van-popup>
      </van-col>
    </van-row>
    <!-- 调阅列表 -->
    <div class="topBox" @click="endMonitorHandler(item.status,item.id)" v-for="item in taskList" :key="item.id">
      <div class="sonLeftBox">
        <!-- 待调阅按钮 -->
        <p>
          <span :class="monitor[item.status]">{{ item.status | statusFilter }}</span>
        </p>
        <h3 class="title">{{ item.taskName }}</h3>
        <p class="time">开始时间:{{ item.planStartTime }}</p>
        <p class="time">结束时间:{{ item.planEndTime }}</p>
      </div>
      <div class="startMonitor" v-if="item.status == 0" @click="startMonitorHandler(item.id)">开始调阅</div>
      <div class="endMonitor" v-else @click="lookInfoHandler(item.id)"><van-icon name="arrow" /></div>
    </div>

    <!-- 扫描弹框 -->
    <van-dialog v-model="showDialog" title="" width="" :showConfirmButton="false">
      <span class="spanimg">
        <img class="close" @click="showDialog = false" src="../../../assets/img/icon/u58.png" alt="" />
      </span>
      <p class="text">用手机背面贴近NFC标签完成扫描</p>
      <div class="img_box">
        <img class="img" src="../../../assets/img/NFCphone.png" />
      </div>
      <div class="btns">
        <div class="nfcPhoto" @click="nfcHandler">
          <img class="nfcPng" src="../../../assets/img/icon/NFC扫描-01.png" alt="" />

          <div>扫NFC</div>
        </div>
        <div class="nfcPhoto" @click="photoHandler">
          <img class="nfcPng" src="../../../assets/img/icon/camera.png" alt="" />

          <div>拍照</div>
        </div>
      </div>
    </van-dialog>
  </div>
</template>
<script>
import NavBar from '@/components/NavBar'
import { Col, Row, Cascader, Dialog, DatetimePicker, Icon, Picker } from 'vant'
import { deptTreeList, selectListApp, registration } from '@/api/toConsult.js'
import { Toast } from 'vant'
export default {
  data() {
    return {
      fieldValue: '',
      monitor: ['monitor','aaaa','bbb','ccc'], //状态样式
      value1: '', //输入框model
      currentDate: '',
      cascaderValue: '',
      columns: ['调阅中', '待调阅', '已调阅'],
      show: false,
      showStatus: false,
      showDate: false,
      showDialog: false,
      fieldNames: {
        text: 'name',
        value: 'id',
        children: 'children'
      },
      taskId:'',//当前点击所属任务ID
      taskList: [], //任务数组集合
      options: [] //机构数组
    }
  },
  components: {
    NavBar,
    Dialog,
    Icon,
    DatetimePicker,
    Picker,
    Col,
    Row,
    Cascader
  },

  filters: {
    statusFilter: function (value) {
      let str = ''
      // 0待调阅，1调阅中，2已调阅，3已超期
      switch (value) {
        case 0:
          str = '待调阅'

          break
        case 1:
          str = '调阅中'
          break

        case 2:
          str = '已调阅'
          break

        case 3:
          str = '已超期'
          break
      }
      return str
    }
  },
  created() {
    this.init()
  },
  methods: {
    //初始化
    init() {
      //获取组织机构数据
      deptTreeList().then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.options = data
        }
      })
      //获取任务列表
      selectListApp().then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          this.taskList = data
        }
      })
    },
    //扫描NFC
    nfcHandler() {
      //NFC和图片对应字段先写死后期接入app之后再做更改
      let obj = {
        nfc: 'nfc',
        taskId: this.taskId
      }
      registration(obj).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          Toast.success('扫描成功')
          this.$router.push('/consultInfo/'+this.taskId)
        }
      })
    },
    //扫描图片
    photoHandler() {
      let obj = {
        picture: 'picture',
        taskId: this.taskId
      }
      registration(obj).then(res => {
        let { code, data, msg } = res
        if (code == 200) {
          Toast.success('扫描成功')
          this.$router.push('/consultInfo/'+this.taskId)
        }
      })
    },
    //关闭弹框事件
    closeDialog() {
      this.show = false
      this.value1 = this.fieldValue
    },
    // 开始调阅事件
    startMonitorHandler(taskId) {
      this.taskId=taskId
      this.showDialog = true
    },
    //已调阅事件
    endMonitorHandler(status,taskId) {
      // 0待调阅，1调阅中，2已调阅，3已超期
      //跳转详情
      if (status <= 1) return
      this.$router.push('/consultInfo/'+taskId)
    },
    //查看调阅详情
    lookInfoHandler(taskId) {
      this.taskId=taskId
      this.$router.push('/consultInfo/'+taskId)
    },
    //级联选择当前任意层级触发
    changeCascader(val) {
      console.log(val)
      let { selectedOptions } = val
      //级联值
      this.cascaderValue = selectedOptions[selectedOptions.length - 1].id
      //输入框值
      this.fieldValue = selectedOptions[selectedOptions.length - 1].name
    },
    onFinish() {},
    //搜索选择状态时触发
    onConfirm(value, index) {
      console.log(value)
    },
    onChange(picker, value, index) {},
    onCancel() {}
  }
}
</script>
<style lang="scss" scoped>
.topBox {
  border: 1px solid #ccc;
  margin: 20px;

  display: flex;
  .sonLeftBox {
    padding: 10px;
    flex: 1;
    background-color: #e6ebeb;
  }
}
.monitor {
  color: white;
  padding: 10px;
  border-radius: 10px;
  background-color: #8cb585;
}
.title {
  margin: 10px;
  margin-left: 0px;
  font-size: 40px;
}
.time {
  font-size: 32px;
}
.startMonitor {
  background-color: #87b2be;
  color: white;
  width: 160px;
  line-height: 200px;
  font-size: 36px;
  text-align: center;
}
.endMonitor {
  background-color: #e6ebeb;
  color: #87b2be;
  width: 160px;
  line-height: 200px;
  font-size: 36px;
  text-align: center;
}
.img_box {
  text-align: center;
  .img {
    width: 200px;
    height: 200px;
  }
}
.text {
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  margin-bottom: 100px;
}
.btns {
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  justify-content: space-around;
  .nfcPhoto {
    color: #409bf2;
    div {
      width: 100%;
      text-align: center;
    }
  }
}
.van-dialog {
  padding: 30px;
}
.spanimg {
  display: flex;
  justify-content: end;
  .close {
    width: 50px;
    height: 50px;
  }
}
</style>