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

<template>
  <div class="visit-add">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div class="card">
        <van-panel >
          <template #header>
            <van-cell title="申请信息"></van-cell>
          </template>
          <div class="panel-box">
            <select-cell
              title="来访类型"
              :prop="prop"
              v-model="visitType"
              :data-list="typeList"
              required>
            </select-cell>
            <van-cell
              v-if="visitType == 1"
              title="到访机构"
              required
              is-link
              @click="showOrg"
              :label="formData.orgName">
            </van-cell>
            <van-field
              label="出入事由"
              required
              rows="1"
              autosize
              type="textarea"
              v-model="formData.reasons"
              placeholder="请输入"
              :maxlength="200"/>
            <van-field
              v-if="visitType != 3"
              label="介绍信编号"
              required
              v-model="formData.letterNo"
              placeholder="请输入"
              :maxlength="20"/>
            <van-cell
              required
              title="有效期"
              :label="formData.date"
              is-link
              @click="showCalendar">
            </van-cell>
            <div class="upload-box" v-if="visitType != 3" >
              <span><i>*</i> 介绍信上传</span>
              <uploader :maxCount="1" v-model="formData.letterFile"/>
            </div>
            <van-field
              v-model="formData.description"
              rows="1"
              autosize
              :maxlength="200"
              label="备注信息"
              type="textarea"
              placeholder="请输入"/>
          </div>
          <van-cell required title="添加人员">
            <template #right-icon>
              <div class="flex-box">
                <span style="color: #aaa;"></span>
                <van-switch size="20px" v-model="checked" />
              </div>
            </template>
          </van-cell>
        </van-panel>
      </div>

      <!--  人员列表   -->
      <div class="card" v-for="(v,i) in pList" :key="i">
        <van-swipe-cell>
          <div class="goods-card">
           <div class="card-img-box" @click="preView(v.imgFile)">
             <p>{{v.imgFile[0].imgPath}}</p>
             <img :src="imgUrl(v.imgFile[0].imgPath)" alt="">
           </div>
           <div class="card-cell-box">
            <van-cell title="出入人员" :value="v.userName"></van-cell>
            <van-cell title="身份证" :value="v.idCard"></van-cell>
            <van-cell title="单位" :value="v.companyName"></van-cell>
           </div>
          </div>
          <template #left>
            <van-button style="height: 100%;" square text="编辑" type="info" @click="editPerson(v,i)" class="delete-button" />
          </template>
          <template #right>
            <van-button style="height: 100%;" square text="删除" type="danger" @click="deletePerson(v,i)" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>


      <!--  添加人员信息    -->
      <div class="card" v-show="checked">
        <van-cell title="人员信息">
          <template #right-icon>
            <van-button type="primary"  icon="plus" size="mini" @click="onAdd">添加</van-button>
          </template>
        </van-cell>
        <div class="panel-box">
          <van-form validate-first @failed="onFailed">
            <van-field
              required
              v-model="personnel.userName"
              rows="1"
              autosize
              :maxlength="20"
              label="出入人员"
              :rules="[{ pattern:/^(.+)$/, message: '请输入' }]"
              placeholder="请输入"/>
            <van-field
              required
              v-model="personnel.idCard"
              rows="1"
              autosize
              :maxlength="20"
              label="证件号码"
              :rules="[{ pattern:/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2]\d|3[0-1])\d{4}([0-9]|X)$/, message: '请输入正确身份证号码' }]"
              placeholder="请输入"/>
            <van-field
              required
              v-model="personnel.companyName"
              rows="1"
              autosize
              :maxlength="20"
              label="单位"
              :rules="[{ pattern:/^(.+)$/, message: '请输入' }]"
              placeholder="请输入"/>
          </van-form>
          <div class="upload-box" >
            <span><i>*</i> 证件上传</span>
            <uploader :maxCount="2" v-model="personnel.imgFile"/>
          </div>
        </div>
      </div>
      <div class="big-btn-box" >
        <van-button  type="info" size="large" @click="onSubmit">提交申请</van-button>
      </div>
    </div>

<!--    <van-calendar-->
<!--      v-model="showCalendar"-->
<!--      :allow-same-day="true"-->
<!--      type="range"-->
<!--      :show-confirm="false"-->
<!--      @confirm="onConfirm"/>-->
    <calendar-picker ref="CalendarPicker" @change="getDate"></calendar-picker>
    <org-picker
      :show="showPicker"
      @cancel="cancelPicker"
      @confirm="changeOrg">
    </org-picker>
  </div>
</template>

<script>

import SelectCell from "@/components/selectCell/index.vue";
import DateCell from "@/components/dateCell/index.vue";
import Uploader from "@/components/upload/gxuploader.vue";
import OrgPicker from "@/components/OrgPicker/index.vue";
import CalendarPicker from "@/components/CalendarPicker/index.vue";
import {formatDate} from "@/filters/filter";
import {mapGetters} from "vuex";
import {imgUrl} from "@/utils";
import { ImagePreview } from 'vant'
import {visitAdd} from './api'
export default {
  components: {SelectCell,Uploader,DateCell,CalendarPicker,OrgPicker},
  data(){
    return {
      visitType:2,
      checked:false,
      visitInfo: {},
      formData:{
        receptionOrgIds:null,
        reasons:null,
        letterNo:null,
        letterFile:null,
        description:null,
        range:null,
        date:null,
      },
      personnel:{
        userName:null,
        idCard:null,
        companyName:null,
        imgFile:[],
      },
      pList:[],
      showPicker:false,
      openCalendar:false,
      prop:{
        label:'name',
        value:'value'
      },
      typeList:[
        {
          name:'临时出入',
          value:2
        },
        {
          name:'紧急出入',
          value:3
        }
      ],
    }
  },
  computed:{
    ...mapGetters(['orgId','id'])
  },
  methods:{
    imgUrl,formatDate,
    onSubmit(){
      // if(this.visitType ==  '1'){
      //   if(!this.formData.receptionOrgIds){
      //     this.$toast('请选择来访机构');
      //     return;
      //   }
      //   if(!this.formData.letterNo){
      //     this.$toast('请输入介绍信编号');
      //     return;
      //   }
      //   if(!this.formData.letterFile){
      //     this.$toast('请上传介绍信');
      //     return;
      //   }
      // }
      if(this.visitType ==  '2'){
        if(!this.formData.letterNo){
          this.$toast('请输入介绍信编号');
          return;
        }
        if(!this.formData.letterFile){
          this.$toast('请上传介绍信');
          return;
        }
      }

      if(!this.formData.reasons){
        this.$toast('请输入出入事由');
        return;
      }
      if(!this.formData.range){
        this.$toast('请选择有效期');
        return;
      }
      if(this.pList.length == 0){
        this.$toast('请添加人员信息');
        return;
      }
      this.formData.status = 1;
      this.formData.type = this.visitType;
      this.formData.receptionOrgIds = [this.orgId];
      this.formData.userInfos = this.pList;
      let data = this.formData;
      alert(JSON.stringify(data))
      if(this.visitType ==  '2'){
        data.letterFile = this.formData.letterFile.map(v=>{
          return JSON.stringify(v);
        })
      }
      data.userInfos = this.pList.map(user=>{
        let urlArr = user.imgFile.map(v=>{
          return v.imgPath
        })
        user.imgFile = urlArr.join(',');
        return user
      })
      alert(JSON.stringify(data))
      visitAdd(data).then(res=>{
        this.$toast.success('提交成功');
        this.$router.replace({
          path:'/visitRegister',
        });
      })
    },
    onFailed(errorInfo) {
      console.log('failed', errorInfo);
    },
    getDate(date){
      console.log(date,'date');
      const [start, end] = date;
      this.formData.range = date;
      this.formData.date = `${start} ~ ${end}`;
      console.log( this.formData.date,'date');
    },
    showCalendar(){
      this.$refs.CalendarPicker.show = true;
    },
    editPerson(v,i){
      console.log(v,'vvvvv');
      this.checked = true;
      this.personnel = JSON.parse(JSON.stringify(v));
    },
    deletePerson(v,i){
      console.log(v,'vvvvv')
      this.pList.splice(i,1);
    },
    onAdd(){
      // this.personnel.imgFile = [{
      //   url:'askjdkajsdjajkdsa',
      //   imgPath:'asjkdklaslkdasdlasld',
      //   name:'asdasdasd'
      // }]
      if(!this.personnel.userName || !this.personnel.idCard || !this.personnel.companyName || !this.personnel.imgFile){
        this.$toast('请完善人员信息');
        return;
      }
      if(this.personnel.imgFile.length < 2) {
        this.$toast('请上传证件照正反面');
        return;
      }
      let strObj = JSON.parse(JSON.stringify(this.personnel));
      this.pList.push(strObj);
      this.personnel = {
        userName:null,
        idCard:null,
        companyName:null,
        imgFile:[],
      };
    },
    showOrg(){
      this.showPicker = true;
    },
    changeOrg(selected){
      this.showPicker = false;
      this.formData.orgName = selected[0].text;
      this.formData.receptionOrgIds = [selected[0].id];
    },
    cancelPicker(){
      this.showPicker = false;
    },
    preView(imgs) {
      let arr = imgs.map(v=>{return v.imgPath});
      console.log(arr,'imgs')
      ImagePreview(arr)
    },
  }
}
</script>
<style lang="scss">
.visit-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">
.visit-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;
  background-color: #fff;
}
.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: 20px 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;
    }
  }
}
.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;
    }
  }
}
.big-btn-box{
  padding-bottom: 20px;
}
</style>