soc_app/src/views/menu/iot/add.vue

<template>
  <div class="intro-add">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div class="card">
        <van-panel title="来访信息" >
          <template #header>
            <span></span>
          </template>
          <div class="panel-box">
            <van-cell title="机构名称" :value="selectedUser.idCard"></van-cell>
            <van-cell title="保修设备" :value="getDictLabel(selectedUser.idType,'letter_id_type')"></van-cell>
            <van-cell title="工程商" :value="selectedUser.userName" required is-link  @click="onClick"/>
            <date-cell title="建议完成时间" v-model="formData.departureTime" required date-type="datetime" />
            <van-cell title="紧急程度" :value="selectedUser.userName" required is-link  @click="onClick"/>
            <van-field
              v-model="formData.accompanyingPerson"
              rows="1"
              autosize
              required
              :maxlength="200"
              placeholder="请输入"
              label="报修原因"></van-field>
          </div>
            <div class="upload-box">
              <span>上传图片</span>
              <van-cell>
                <uploader :maxCount="1" v-model="formData.letterFile"/>
              </van-cell>
            </div>
          <div class="big-btn-box" >
            <van-button  type="info" size="large" @click="onSubmit">提交</van-button>
          </div>
        </van-panel>
      </div>
    </div>

    <!--  人员选择弹窗  -->
    <van-popup
      class="search-data-popup"
      round
      lazy-render
      v-model="showPicker"
      position="bottom"
      @click-overlay="clickOverlay"
      :close-on-click-overlay="true">
      <div class="header-line">
        <div class="cancel" @click="onSearchCancel">取消</div>
        <div class="title">选择人员</div>
        <div class="sure" @click="onSearchConfirm">确定</div>
      </div>

      <form action="/static">
        <van-search  placeholder="输入搜索内容" v-model="searchValue" @input="inputSearchValue" />
      </form>

      <div  v-if="userList.length >0"  class="lists">
        <div class="list-item">
          <van-cell
            :class="{active:item.checked}"
            v-for="(item, index) in userList"
            clickable
            :key="item.id"
            :title="item.userName"
            :value="item.companyName"
            @click="handleClick(item,index)">
          </van-cell>
        </div>
      </div>
      <div v-else class="lists">
        <empty description="" />
      </div>
    </van-popup>
  </div>
</template>

<script>
import SearchSelectCell from "@/components/SearchSelectCell/index.vue";
import DateCell from "@/components/dateCell/index.vue";
import Uploader from "@/components/upload/gxuploader.vue";
import {formatDate} from "@/filters/filter";
import {mapGetters} from "vuex";
import {imgUrl} from "@/utils";
import {ImagePreview } from 'vant'

import dayjs from "dayjs";
export default {
  components: {SearchSelectCell,Uploader, DateCell},
  data(){
    return {
      minDate:null,
      maxDate:new Date(),
      visitId:null,
      userList:[],
      selectedUser:{},
      prop:{
        label:'userName',
        value:'id',
      },
      formData:{
        letterUserId:null,
        arrivalTime:null,
        departureTime:null,
        accompanyingPerson:null,
        checkImage:null,
      },
      dicts:['out_in_approve_status','letter_id_type','out_in_type'],
      /*以下为弹窗中的变量*/
      searchValue:'',
      showPicker:false,
      onSelected:null,
      pList:[],
    }
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary'])
  },
  mounted(){
    this.getUserList();
  },
  methods:{
    dayjs, imgUrl,formatDate,
    onClick(){
      this.showPicker = true;
    },
    clickOverlay(){
      this.selected = this.value;
      this.showPicker = false;
    },
    handleClick(v,i){
      this.userList.forEach(v=>v.checked = false);
      // this.$nextTick(()=>{
      //   this.$set(this.userList[i],'checked',!this.userList[i].checked);
      // })
      v.checked = !v.checked;
      this.userList.splice(i,1,v)
      this.onSelected = v;
    },
    onSearchCancel() {
      this.selected = this.value;
      this.$emit("cancel");
      this.showPicker = false;
    },
    onSearchConfirm() {
      this.onSelected.minDate = dayjs(this.onSelected.startTime).toDate() || new Date();
      this.selectedUser = this.onSelected;
      this.formData.arrivalTime = null;
      this.showPicker = false;
    },
    inputSearchValue(query) {
      //搜索框值发生改变
      setTimeout(() => {
        this.userList= this.pList.filter(item => {
          return item.userName.indexOf(query) > -1;
        });
      }, 200);
    },


    onSubmit(){
      if(!this.selectedUser.id){
        this.$toast('请选择来访人员');
        return
      }
      if(!this.formData.accompanyingPerson){
        this.$toast('请输入陪同人员');
        return
      }
      if(!this.formData.checkImage){
        this.$toast('请上传审核结果');
        return
      }
      if(!this.formData.arrivalTime){
        this.$toast('请选择到达时间');
        return
      }
      let data = {
        ...this.formData,
        letterId:this.selectedUser.letterId,
        checkImage:this.formData.checkImage.map(v=>{return v.imgPath}).toString(','),
        letterUserId:this.selectedUser.id,
        orgId:this.orgId,
      }
      //alert(JSON.stringify(data))
      userRegister(data).then(res=>{
        this.$toast.success('提交成功');
        this.$router.replace({
          name:'videoIntegrity',
          path:'/videoIntegrity',
          params:{event:'refresh'},
        });
      })
    },
    /* 失效*/
    getItemInfo(item){
      console.log(dayjs(item.startTime).toDate(),'77777777')
      item.maxDate = dayjs(item.startTime).toDate() || new Date();
      console.log(item.maxDate,'77777777')
      this.selectedUser = item;
      this.formData.arrivalTime = null;
    },
    previewFile(file){
      this.openFilePreview(file);
    },
    getUserList(){
      let data = {
        orgId:this.orgId,
        arrivalTime:formatDate(new Date(),'YYYY-MM-DD')
      }
      userList(data).then(res=>{
        this.userList = res.data.map(v=>{
          v.imgFile = v.imgFile.split(',');
          if(v.letterFile && v.letterFile.length >0){
            v.letterFile = v.letterFile.map(str=>{
              return JSON.parse(str)
            })
          }
          return v
        })
        this.pList = res.data;
      })
    },
    preView(val) {
      if(Array.isArray(val)){
        let arr = val.map(v=>{
          return imgUrl(v);
        })
        ImagePreview(arr);
      }else {
        ImagePreview([imgUrl(val)]);
      }
    },
  }
}
</script>
<style lang="scss">
.intro-add{
  .van-card{
    padding: 20px;
  }
  .card-cell-box{
    width: 70%;
    .van-cell{
      padding: 10px;
      &::after{
        left:10px;
        right:10px;
      }
    }
    .van-cell__title{
      flex:.25;
    }
    .van-cell__value{
      flex:.75;
    }
  }
}
</style>
<style scoped lang="scss">
.intro-add{
  height: 100%;
  overflow: hidden;
}
.page-container{
  height: calc(100vh - 94px);
  overflow: auto;
  padding: 20px;

}
.flex-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  >span{
    margin: 0 20px;
  }
}
.card{
  margin-bottom: 20px;
  box-shadow: 0 10px 10px #eaeaea;
}
.card:last-child{
  margin-bottom: 0;
}
.panel-box{
  -padding:0 20px;
}
.panel-box-item{
  height: 36px;
  line-height: 36px;
}
.item-label{
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
}
.item-value{
  width: 100%;
  display: flex;
  justify-content: left;
  align-items: center;
}
.upload-box{
  padding: 0 30px;
  display: flex;
  >span{
    display: inline-block;
    height: 160px;
    width: 200px;
    line-height: 160px;
    font-size: 28px;
    color:#999;
    >i{
      font-style: normal;
      color: #ee0a24;
    }
  }
  .required::before{
    content: '*';
    color: #ee0a24;
    position: absolute;
    left: 14px;
  }
}
.goods-card{
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px;
  background-color: #fff;
  .card-img-box{
    width: 200px;
    height: 200px;
    margin-right: 10px;
    >img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
}
.file-box{
  width: 70%;
  display: flex;
  justify-content: flex-end;
  color:#008cd6;
}
.big-btn-box{
  padding: 20px;
}
.nfc-img {
  display: inline-block;
  width: 140px;
  height: 140px;
  margin: 0 10px;
  position: relative;
  > img {
    width: 100%;
    height: 100%;
    border: none;
  }
  > span {
    position: absolute;
    padding: 0 10px;
    bottom: 0;
    left: 0;
    display: block;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    color: #eaeaea;
    font-size: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
    height: 30px;
  }
}
.search-data-popup{
  .header-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90px;
  }
  .header-line .cancel {
    padding: 0 30px;
    font-size: 28px;
    color: #969799;
  }
  .header-line .title {
    font-weight: 500;
    font-size: 30px;
    color: #343434;
  }
  .header-line .sure {
    padding: 0 30px;
    font-size: 28px;
    color: #1989fa;
  }
  .lists {
    display: flex;
    flex-direction: column;
    -padding: 10px 12px 20px 12px;
    min-height: 300px;
    max-height: 700px;
    overflow: auto;
  }
  .lists .line {
    line-height: 40px;
    font-size: 16px;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .lists .line img {
    width: 20px;
    height: 20px;
  }
  .tip {
    color: #666;
    padding-bottom: 5px;
  }
  .van-empty{
    padding: 0;
  }
  .list-item{
    padding:20px;
  }
  .active{
    color:#1989fa;
    border-left: 5px solid #1989fa;

  }
}
</style>