soc_app/src/views/menu/introduceLetter/outIn/fillOutInInfo.vue

<template>
  <div class="intro-add">
    <nav-bar></nav-bar>
    <div class="page-container">
      <!--   基本信息   -->
      <div class="card">
        <van-panel>
          <!-- <template #header>
            <van-cell title="出入信息">
              <template #extra>
                  <span :style="{color:getState(outInRequestInfo.status)}">
                    {{getDictLabel(outInRequestInfo.status,'letter_status') }}
                  </span>
              </template>
            </van-cell>
          </template> -->
          <div class="panel-box">
            <van-cell title="出入类型" :value="getDictLabel(outInRequestInfo.letterType,'out_in_type')"></van-cell>
            <div v-if="outInRequestInfo.letterType!=3">
              <van-cell title="介绍信编号" v-if="outInRequestInfo.letterNo"  :value="outInRequestInfo.letterNo"></van-cell>
              <van-cell title="有效开始日期" v-if="outInRequestInfo.startTimeStr"  :value="outInRequestInfo.startTimeStr"></van-cell>
              <van-cell title="有效截止日期" v-if="outInRequestInfo.endTimeStr"  :value="outInRequestInfo.endTimeStr"></van-cell>
              <!-- <van-cell title="有效天数" v-if="outInRequestInfo.effectiveDays"  :value="`${outInRequestInfo.effectiveDays}天`"></van-cell> -->
              <van-cell title="介绍信附件"  v-if="outInRequestInfo.letterFile && outInRequestInfo.letterFile.length > 0">
              <template #right-icon>
                <div>
                  <ImageThumbnail
                    :image-list="outInRequestInfo.letterFile.map(v => v.url)"
                    height="80px"
                    width="90px"
                    radius="8px"
                />
                </div>
              </template>
            </van-cell>
            </div>
            <div v-else>
              <van-cell title="出入事由" :value="outInRequestInfo.letterReasons"></van-cell>
              <van-cell style="color:#969799;" title="本次为紧急申请，无需上传介绍信附件，请根据制度要求，审慎提交申请。"></van-cell>
            </div>
            
            
            <!-- <van-cell v-if="outInRequestInfo.description" title="备注信息" :value="outInRequestInfo.description"></van-cell> -->
          </div>
        </van-panel>
      </div>
      <div class="flex-box">
        <van-button type="info" size="small" plain style="width: 48%" @click="onCanBatchSetTime">{{batchBtnText}}</van-button>
        <van-button :disabled="!isShowCheckBox" type="info" size="small" plain style="width: 48%"  @click="onBatchSetTime">批量编辑出入时间</van-button>
      </div>
      <van-form ref="form" scroll-to-error @failed="onFormFailed">
      <div class="card" v-for="(v,i) in userInfos" :key="i">
        <van-swipe-cell>
          <van-panel>
              <template #header>
              <van-cell :title="'人员' + (i+1)" icon="manager-o" />
            </template>
        <!--  人员列表  -->
          <div class="card" >
            <div class="goods-card">
              <div class="card-cell-checkbox" v-if="isShowCheckBox">
                <van-checkbox v-model="v.checked" shape="square" @click.native="checkboxClicked(i)"/>
              </div>
              <div>
                <div class="card-img-box" v-if="v.imgFile && v.imgFile.length > 0" @click="preView(v.imgFile)">
                  <!-- <img :src="imgUrl(v.imgFile[0])" alt=""> -->
                  <ImageThumbnail
                      :image-list="v.imgFile[0]"
                      height="60px"
                      width="80px"
                      radius="8px"
                  />
                </div>
                <div class="card-img-box" v-if="v.imgFile && v.imgFile.length >= 1" @click="preView(v.imgFile)">
                  <!-- <img :src="imgUrl(v.imgFile[1])" alt=""> -->
                  <ImageThumbnail
                      :image-list="v.imgFile[1]"
                      height="60px"
                      width="80px"
                      radius="8px"
                  />
                </div>
              </div>
              <div class="card-cell-box">
                <van-field required label="申请单位" v-model="v.companyName" rows="1" autosize :maxlength="200" 
                placeholder="请输入申请单位"
                :rules="[{ required: true, message: '申请单位不能为空' }]"
                ></van-field>
                <van-field required label="出入人员" v-model="v.userName" rows="1" autosize :maxlength="200" 
                  placeholder="请输入出入人员"
                  :rules="[{ required: true, message: '出入人员不能为空' }]"
                ></van-field>
                <select-cell
                  title="证件类型"
                  is-row
                  v-model="v.idType"
                  :data-list="getDictItem('letter_id_type')"
                  required>
              </select-cell>
              <van-field
                  required
                  v-model="v.idCard"
                  rows="1"
                  autosize
                  :maxlength="20"
                  label="证件号码"
                  :rules="[{ required: true, message: '证件号码不能为空' }]"
                  placeholder="请输入证件号码"/>
                <date-cell required title="进入时间" @change="arrivalTimeChangedHandler(v)" :max-date="maxDate" :min-date='minDate' :is-row="true"  v-model="v.arrivalTime" date-type="datetime" labeldateType="dateminute" />
                <date-cell required title="离开时间" :max-date.sync="maxDate" :updateMaxDateNow="true" :min-date='v.departureTimeMinDate' :is-row="true"  v-model="v.departureTime" date-type="datetime" labeldateType="dateminute"/>
              </div>
            </div>
          </div>
          </van-panel>
          <template #right>
            <van-button style="height: 100%;" square text="删除" type="danger" @click="deleteUser(v,i)" class="delete-button" />
          </template>
        </van-swipe-cell>
      </div>
      <div class="card">
        <!-- <div style="display: flex;justify-content: space-between; align-items: center;">
          <div class="van-cell" style="width:50%"><span>出入人数</span><span style="margin-left:20px;">{{userInfos ? userInfos.length:""}}</span></div>
          <div class="van-cell" style="width:50%;color: #969799; background-color:#fff;text-align: right;padding-left: 65px;">已核对认证一致</div>
        </div> -->
        <!-- <div style="display: flex;justify-content: end; align-items: center;">
          <van-cell title="核验人" :value="outInRequestInfo.createBy"></van-cell> 
        </div> -->
        <van-cell title="核验人" :value="outInRequestInfo.createBy"></van-cell> 
        <van-field
              v-model="outInRequestInfo.accompanyingPerson"
              rows="1"
              autosize
              required
              :maxlength="100"
              placeholder="请输入陪同人员姓名"
              :rules="[{ required: true, message: '陪同人员不能为空' }]"
              label="陪同人员"></van-field>
        <van-field
              v-if="outInRequestInfo.type!=3"
              v-model="outInRequestInfo.letterReasons"
              rows="2"
              type="textarea"
              autosize
              required
              show-word-limit
              :maxlength="28"
              :rules="[{ required: true, message: '出入事由不能为空' }]"
              placeholder="请输入出入事由"
              label="出入事由"></van-field>
          <div class="upload-box">
            <span >备注</span>
            <van-cell>
              <uploader :maxCount="2" v-model="outInRequestInfo.remarkImage"/>
            </van-cell>
          </div>
          <van-field label=" " 
              v-model="outInRequestInfo.remark"
              rows="2"
              type="textarea"
              autosize
              :maxlength="150"
              placeholder="请输入备注信息"></van-field>
           
      </div>
      </van-form>
      <div class="flex-box">
        <van-button type="danger" plain v-hasPermi="['core:outinrequest:remove']" style="width: 32%" @click="onDeleteOutInRequest">未出入删除</van-button>
        <van-button type="default" style="width: 32%" v-hasPermi="['core:outinrequest:edit']"  @click="onSave">保存</van-button>
        <van-button type="info" style="width: 32%" v-hasPermi="['core:outinrequest:edit']" @click="onSubmit">提交</van-button>
      </div>
     
    </div>
    
    <!-- 输入拒绝原因 -->
    <!-- <van-popup class="add-picker" round v-model="showRefuseReasonPopup" position="bottom">
        <div style="margin:10px;color:red;text-align:center;font-size:20px;">审批说明</div>
        <van-field
          v-model="approveRemark"
          rows="4"
          autosize
          label=""
          type="textarea"
          maxlength="200"
          placeholder="请输入审批说明"
          show-word-limit
        />
        <div class="header-line">
          <div class="cancel" @click="onRefuseReasonCancel">取消</div>
          <div class="sure" @click="onRefuseReasonSave">保存</div>
        </div>
      </van-popup> -->

      <!-- 添加人员弹窗 -->
    <van-dialog
        v-model="showBatchSetTimeDialog"
        class="add-picker"
        title="批量录入出入信息"
        @cancel="closeBatchSetTime()"
        @confirm="confirmBatchSetTime()"
        show-cancel-button>
      <!--  添加人员信息    -->
      <div class="card" >
        <div class="panel-box">
          <van-form validate-first >
            <van-field                
                v-model="batchSetFormData.companyName"
                rows="2"
                type="textarea"
                autosize
                :maxlength="28"
                label="申请单位"
                :rules="[{ pattern:/^(.+)$/, message: '请输入' }]"
                placeholder="请输入申请单位"/>
            <date-cell  title="进入时间" @change="batchSetTimeArrivalTimeChangedHandler" :max-date="maxDate" :min-date='minDate' :is-row="true"  v-model="batchSetFormData.arrivalTime" date-type="datetime" labeldateType="dateminute" />
            <date-cell  title="离开时间" :max-date.sync="maxDate" :updateMaxDateNow="true" :min-date='batchSetFormData.departureTimeMinDate' :is-row="true"  v-model="batchSetFormData.departureTime" date-type="datetime" labeldateType="dateminute"/>           
          </van-form>
        </div>
      </div>
    </van-dialog>
    <van-action-sheet v-model="showSign" title="签名" class="sheet">
        <writingPad ref="esign" :old-signature-seal="oldSignatureSeal" @resultImg="resultImg" @cancelSign="cancelSign"></writingPad>
      </van-action-sheet>
      <van-dialog v-model="confirmShow" title="引入签名" show-cancel-button @confirm="confirmSignImg">
        <van-image :src="this_window + oldSignatureSeal" />
      </van-dialog>
  </div>
</template>

<script>
import ImageThumbnail from '../letter/imageThumbnail.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 { ref } from 'vue';
import {imgUrl} from "@/utils";
import { Toast,Dialog,ImagePreview } from 'vant'
import { base64ToBlob } from '@/utils/base64TurnImg.js'
import { upload } from '@/api/public'
import writingPad from '@/components/writingPad/index.vue'
import {outInRequestDetail,updateOutInRequest,deleteOutInRequest,deletedOutInRequestUser} from './api'
export default {
  components: {Uploader, DateCell,ImageThumbnail,writingPad},
  data(){
    return {
      // go:{
      //   type:'replace', //参数：go push replace
      //   path:'/visitCheck',
      // },
      showBatchSetTimeDialog:false,
      // showRefuseReasonPopup:false,
      outInRequestId:null,
      approveStatus:null,
      approveRemark:null,
      outInRequestInfo: {},
      userInfos:[],
      formData:{},
      showInput:false,
      dicts:['out_in_approve_status','out_in_type','letter_id_type','letter_status'],
      showSign:false,
      oldSignatureSeal:"",
      confirmShow:false,
      this_window: process.env.NODE_ENV === 'development' ? '/dev' : window.origin,
      batchBtnText:"多选",
      isShowCheckBox:false,
      batchSetFormData:{
        companyName:"",
        arrivalTime:null,
        departureTime:null,
        departureTimeMinDate:null
      },
      maxDate:new Date(),
      minDate:new Date(null),
    }
  },
  computed:{
    ...mapGetters(['orgId','id','dictionary'])
  },
  mounted(){
   
    this.outInRequestId = this.$route.query.outInRequestId;
    this.getInfo();
  },
  methods:{
    imgUrl,formatDate,
    cancelSign()
    {
      this.showSign=false;
    },
    confirmSignImg(){
      this.cancelSign();
      this.submitHandler(2,this.oldSignatureSeal);
    },
    //开启批量设置时间
    onCanBatchSetTime()
    {
      this.isShowCheckBox=!this.isShowCheckBox;
      if(this.isShowCheckBox)
      {
        this.batchBtnText="关闭多选";
      }
      else
      {
        this.batchBtnText="多选";
        this.userInfos.forEach(item=>{
          item.checked=false;
        })
      }
    },
    //批量设置时间
    onBatchSetTime()
    {
      if(this.userInfos.findIndex(item=>item.checked==true)<0)
      {
        this.$toast('请先勾选需要批量录入信息的出入人员！');
        return;
      }
      this.showBatchSetTimeDialog=true;
    },
    closeBatchSetTime(){
      this.showBatchSetTimeDialog=false;
      this.batchSetFormData={
        companyName:"",
        arrivalTime:null,
        departureTime:null
      }
    },
    confirmBatchSetTime()
    {
      this.userInfos.forEach(item=>{
        if(item.checked)
        {
          if(this.batchSetFormData.companyName)
          {
            item.companyName=this.batchSetFormData.companyName;
          }
          if(this.batchSetFormData.arrivalTime)
          {
            item.arrivalTime=this.batchSetFormData.arrivalTime;
          }
          if(this.batchSetFormData.departureTime)
          {
            item.departureTime=this.batchSetFormData.departureTime; 
          }
        }
      });
      this.showBatchSetTimeDialog=false;
      this.batchSetFormData={
        companyName:"",
        arrivalTime:null,
        departureTime:null
      }
      this.$nextTick(()=>{
        this.$forceUpdate();
      })
    },
    onDeleteOutInRequest()
    {
      Dialog.confirm({
        title: '提示',
        message: '是否删除当前未出入的申请？删除后将无法恢复！',
      })
        .then(() => {
          deleteOutInRequest(this.outInRequestId).then(res=>{
            this.$toast('操作成功');
            this.toPagesFcn();
          }).catch(error=>{
            if( error === '任务已完成'){
              this.toPagesFcn();
            }
          })
        })
        .catch(() => {
        });
    },
    deleteUser(user,index){
      Dialog.confirm({
        title: '',
        message: `是否删除 “${user.userName ? user.userName:"人员"+(index+1)}”，删除后将无法再恢复?`
      })
        .then(async () => {          
          deletedOutInRequestUser(user.id).then(res=>{
            this.userInfos.splice(index,1);
            this.$toast('删除成功');
          }).catch(error=>{
            this.$toast('删除失败');   
          })
        })
        .catch((error) => {
          // this.$toast('删除失败');
        })
     
    },
    // 保存
    onSave(){
      this.submitHandler(1);
    },//提交
    onSubmit(){
      Dialog.confirm({
        title: '',
        message: `是否提交出入数据，提交后将无法再修改?`
      })
        .then(async () => {
          let validateRes= this.customerValidate() //自定义校验，部分自己封装的组件没有默认的校验
          console.log("validateRes",validateRes)
          if (!validateRes) { 
            return;
          }
          try {
            // this.$refs.form.validate().then((res) => {
            //   this.submitHandler(2);
            // })
            await this.$refs.form.validate();
            // 验证通过
            this.submitHandler(2);
          } catch (errors) {
            // errors 是一个数组，包含所有失败字段
            console.log('验证失败字段:', errors);
            // 可以提取第一个错误提示
            const firstError = errors[0];
            this.$toast(firstError.message || '请填写完整信息');
          }
        })
        .catch((error) => {
          this.$toast('请填写必填项');
        })
      
    },
    onFormFailed(data)
    {
      // this.$toast(`请填写完整信息`)
    },
    //表单提交前校验
    customerValidate() {
      for (let i = 0; i < this.userInfos.length; i++) {
        if(!this.userInfos[i].arrivalTime){
          this.userInfos[i].userName ? this.$toast(`人员 ${this.userInfos[i].userName} 的进入时间不能为空`) :this.$toast(`人员 ${i+1} 的进入时间不能为空`)
            
            return false;
          }
          if(!this.userInfos[i].departureTime){
            this.userInfos[i].userName ? this.$toast(`人员 ${this.userInfos[i].userName} 的离开时间不能为空`) :this.$toast(`人员 ${i+1} 的离开时间不能为空`)
            
            return false;
          }
          if(!this.userInfos[i].idType){
            this.userInfos[i].userName ? this.$toast(`人员 ${this.userInfos[i].userName} 的证件类型不能为空`) :this.$toast(`人员 ${i+1} 的证件类型不能为空`)
            
            return false;
          }
      }
      return true;
    },
    checkboxClicked(index)
    {
      this.userInfos[index].checked=!this.userInfos[index].checked;
      this.$nextTick(()=>{
        this.$forceUpdate();
      });
    },
    arrivalTimeChangedHandler(userInfo)
    {
      console.log("arrivalTimeChangedHandler",userInfo.arrivalTime)
      if(userInfo.arrivalTime)
      {        
        userInfo.departureTimeMinDate = new Date(this.dayjs(userInfo.arrivalTime));
        console.log("arrivalTimeChangedHandler",userInfo.departureTimeMinDate)
      }
    },
    batchSetTimeArrivalTimeChangedHandler()
    {
      if(this.batchSetFormData.arrivalTime)
      {        
        this.batchSetFormData.departureTimeMinDate = new Date(this.dayjs(this.batchSetFormData.arrivalTime));
      }
    },
    //表单提交校验
    submitHandler(type,signImgUrl) {      
        if (type === 1) {
          this.submitData(type)
        } else {
          this.submitData(type)
        }
    },
    submitData(type,signImgUrl) {
      let params = {
        type: type,
        id:this.outInRequestInfo.id,
        letterId:this.outInRequestInfo.letterId,
        letterReasons:this.outInRequestInfo.letterReasons,
        accompanyingPerson:this.outInRequestInfo.accompanyingPerson,
        remark:this.outInRequestInfo.remark,
        remarkImage: Array.isArray(this.outInRequestInfo.remarkImage)?this.outInRequestInfo.remarkImage.map(v=>{return v.imgPath}).toString(','):this.outInRequestInfo.remarkImage,
        userInfos:JSON.parse(JSON.stringify(this.userInfos)),
      };
      params.userInfos.forEach(item=>{
        delete item.departureTimeMinDate;
        delete item.imgFile;
        if(item.arrivalTime)
        {
          item.arrivalTime=this.dayjs(item.arrivalTime).format('YYYY-MM-DD HH:mm:ss');
        }
        if(item.departureTime)
        {
          item.departureTime=this.dayjs(item.departureTime).format('YYYY-MM-DD HH:mm:ss');
        }
      })

      updateOutInRequest(params).then(res => {
        let { code, msg } = res
        if (code == 200) {
          Toast(`${type == 1 ? '保存' : '提交'}成功`)
          if(type != 1)
          {
            this.toPagesFcn();
          }
        } else {
          Toast(msg)
        }
      })
    },
    //上传签名图到服务器
    resultImg(img,oldImgUrl) {
      if (oldImgUrl !== "" && oldImgUrl !== null && oldImgUrl !== "null"){
        //this.submitSign(oldImgUrl)
        this.confirmShow =true;
        this.oldSignatureSeal = oldImgUrl;
      }else {
        let obj = base64ToBlob(img)
        let formData = new FormData()

        obj.name = '签名.jpg'
        formData.append('file', base64ToBlob(img))

        upload(formData, 'image')
          .then(res => {
            console.log(process.env.NODE_ENV)
            /*上传成功*/
            let imgUrl = process.env.NODE_ENV === 'development' ? res.data.url : res.data.url
            
            this.submitHandler(2,imgUrl);
          })
          .catch(err => {
            /*上传失败*/
          })
      }
    },
    //页面跳转逻辑
    toPagesFcn(){
      this.getRouter();
      if(this.fromPages.name === "works" || this.fromPages.name==="letter" ){
        this.$router.go(-1)
      }else {
        this.$router.replace({
          name:'outInRquest',
          path:'/new/outIn',
          params:{event:'refresh'}
        });
      }
    },
    getState(state){
      switch (state){
        case 0:
          return '#008cd6';
        case 1:
          return '#009240';
        case 2:
          return '#bc9f71';
        case 3:
          return '#D7000F';
      }
    },
    getInfo(){
      outInRequestDetail(this.outInRequestId).then(res=>{
        this.outInRequestInfo = res.data;
        if(res.data.letterFile){
          let imgArr = res.data.letterFile.map(v=>{
            return JSON.parse(v)
          })
          this.outInRequestInfo.letterFile = imgArr;
        }
        if(res.data.remarkImage){
          let imgArr = res.data.remarkImage.split(',');
          this.outInRequestInfo.remarkImage= imgArr.map(v=>{
            return {
              imgPath: v,
              url: imgUrl(v)
            }
          })
        }
        if(res.data.userInfos){
          let users = res.data.userInfos.map(v=>{
            if(v.imgFile){
              v.imgFile = v.imgFile.split(',');
            }
            v.checked=false;
            v.idType = v.idType+'';
            //设置最小时间
            let minDate = v.arrivalTime;
            if(minDate)
            {
              v.departureTimeMinDate = new Date(this.dayjs(minDate));
            }
            else{
              v.departureTimeMinDate = new Date(null);
            }
            return v
          });
          console.log(users,'users')
          this.userInfos = users;
        }
      })
    },
    preView(val) {
      if(Array.isArray(val)){
        let arr = val.map(v=>{
          return imgUrl(v);
        })
        ImagePreview({
          images:arr,
          showIndicators:true
        });
      }else {
        ImagePreview({
          images:[imgUrl(val)],
          showIndicators:true
        });
      }
    },
  }
}
</script>
<style lang="scss">
.intro-add{
  .van-card{
    padding: 20px;
  }
  .van-panel__content{
    .panel-box{
      .van-cell{
        align-items: center;
      }
    }
  }
  .card-cell-box{
    width: 100%;
    margin-right: 10px;
    // padding: 0 0 0 10px;
    .van-cell{
      padding: 4px;
      &::after{
        left:10px;
        right:10px;
      }
    }
    .van-cell__title{
      flex:.30;
    }
    .van-cell__value{
      flex:.70;
    }
    .van-cell--required::before{
      left:-6px !important;
      top: 6px;
      position: relative;
    }
  }
}
</style>
<style scoped lang="scss">
.intro-add{
  height: 100%;
  overflow: hidden;
  // .van-cell
  // {
  //   line-height: 25px;
  // }
}
.page-container{
  height: calc(100vh - 94px);
  overflow: auto;
  padding: 20px;

}
.flex-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top:10px;
  margin-bottom: 20px;
  >span{
    margin: 0 20px;
  }
}
.card{
  margin-bottom: 20px;
  box-shadow: 0 10px 10px #eaeaea;
  border-radius: 12px;
  overflow: hidden;
}
.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: 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: 150px;
    height: 120px;
    margin-right: 10px;
    margin-top: 25px;
    >img{
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 10px;
    }
  }
  .card-cell-checkbox{
    margin-right: 10px;
  }
}
.big-btn-box{
  padding-bottom: 20px;
}
.file-box{
  width: 70%;
  display: flex;
  justify-content: flex-end;
  color:#008cd6;
}
.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;
  }

}
.upload-box{
  padding: 20px 30px;
  display: flex;
  background-color: #fff;
  >span{
    display: inline-block;
    height: 160px;
    width: 250px;
    line-height: 160px;
    font-size: 28px;
    color:#999;
    >i{
      font-style: normal;
      color: #ee0a24;
    }
  }
  .required::before{
    content: '*';
    color: #ee0a24;
    position: absolute;
    left: 14px;
  }
}
.input-box{
  margin-bottom: 20px;
}
.checkboxList {
  z-index: 999;
}

.add-picker{
  .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 {
    padding: 10px 20px 20px 20px;
    min-height: 300px;
    max-height: 700px;
    overflow: auto;
    touch-action: pan-y;
  }
  .tip {
    color: #666;
    padding-bottom: 5px;
  }
  .van-empty{
    padding: 0;
  }
}
</style>