storevisit-ui-mobile/src/views/week/VisitSummaryAdd.vue

<template>
  <div class="bgcolor">
    <!--        顶部条-->

    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar
          class="navBar"
          left-arrow
          :title="title"
          @click-left="onClickLeft"
      />
    </div>
    <!--        主体内容-->
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey"></div>
    <div class="lineGrey" style="height:6px;"></div>
    <div class="container" style="width: 94%; margin: 0px auto; border-radius: 6px;">
      <van-form ref="tabstoreVal">
        <div v-for="(item,index) in collectionItemList" :key="index">
          <div v-if="item.answerType=='sz'" class="formLabel z-cell">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}<span  style="font-size: 12px;color:#888;">{{ item.remark }}</span>
              </template>
            </van-cell>
<!--            <p style="    margin-top: 0;"><span  style="font-size: 12px;color:#888;">{{ item.remark }}</span></p>-->
            <van-field v-model="item.answerValue" :placeholder="item.customName" type="number" @input="numberFn(item,index)"></van-field>
          </div>
          <div v-if="item.answerType=='rq'" class="formLabel z-cell">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}<span  style="font-size: 14px;color:#ccc;">{{ item.remark }}</span>
              </template>
            </van-cell>
            <van-field v-model="item.answerValue" clickable
                       name="calendar"
                       placeholder="点击选择日期"
                       readonly
                       @click="showCalendarClick(index)"/>
            <p style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right"></p>
          </div>
          <div v-if="item.answerType=='zp'" class="formLabel z-cell">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}
              </template>
            </van-cell>
            <van-row gutter="10"  style="margin-bottom: 10px;">
              <p style="    margin-top: 0;"><span  style="font-size: 12px;color:#888;">{{ item.remark }}</span></p>
              <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
              <upload-img :uploadid="uploadid2"  @newimgarr="newimgarr1" imgText="上传照片" :indexImg="index"
                          :customId="item.customId" :summaryId="item.summaryId"
                          @click="imgClick(item,index)"></upload-img>
            </van-row>
          </div>
          <div v-if="item.answerType=='wb'" class="formLabel z-cell">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}
              </template>
            </van-cell>
            <van-field v-model="item.answerValue" :formatter="formatter" :placeholder="item.customName"></van-field>
            <p style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right">{{ item.remark }}</p>
          </div>
          <div v-if="item.answerType=='gs'" class="formLabel z-cell" @click="regionClick(index)">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}
              </template>
            </van-cell>
            <van-field readonly v-model="item.answerName" :formatter="formatter" :placeholder="item.customName"></van-field>
            <p style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right">{{ item.remark }}</p>
          </div>
          <div v-if="item.answerType=='dq'" class="formLabel z-cell"  @click="SalesRegionClick(index)">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}
              </template>
            </van-cell>
            <van-field  readonly v-model="item.answerName" :formatter="formatter" :placeholder="item.customName"></van-field>
            <p style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right">{{ item.remark }}</p>
          </div>
          <div v-if="item.answerType=='xsb'" class="formLabel z-cell"  @click="SalesDepartmentClick(index)">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}
              </template>
            </van-cell>
            <van-field readonly v-model="item.answerName" :formatter="formatter" :placeholder="item.customName"></van-field>
            <p style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right">{{ item.remark }}</p>
          </div>
          <div v-if="item.answerType=='duox'" class="formLabel z-cell">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}
              </template>
            </van-cell>
            <z-checkbox :answerType="item.answerType" :checkboxval="item.answerValue"
                        :collectionType="item.customOptionList" :textc="item.customId"
                        :zCheckboxcolumns="item.customOptionList" @zSelectVal="zSelectVal"></z-checkbox>
          </div>
          <div v-if="item.answerType=='dx'" class="formLabel z-cell">
            <van-cell>
              <template #title>
                <span v-if="item.isMust==0" class="van-f-red">*</span>{{ item.customName }}
              </template>
            </van-cell>
            <z-radio :answerType="item.answerType" :collectionType="item.collectionType" :radio="item.answerValue"
                     :textc="item.customId"
                     :zRadiocolumns="item.customOptionList"
                     @zSelectVal="zSelectVal"></z-radio>
          </div>
          <br>
        </div>
      </van-form>

    </div>
    <br>
    <div class="tc" style="padding: 0 16px">
      <van-button class="submitBtn"  block type="info" color="#0057ba" @click="onSubmit">提交汇报</van-button>
    </div>
    <br>
    <van-calendar v-model="showCalendar" @confirm="onConfirm" color="#0057ba"  :min-date="minDate" :max-date="maxDate" :show-confirm="false"/>
    <van-popup v-model="RegionShow" capture position="bottom">
      <van-picker
          :columns="companyList"
          show-toolbar
          value-key="deptName"
          @cancel="RegionShow = false"
          @confirm="onregionConfirm"
      />
    </van-popup>
    <van-popup v-model="SalesRegionShow"   capture position="bottom">
      <van-picker
          :columns="regionList"
          show-toolbar
          value-key="deptName"
          @cancel="SalesRegionShow = false"
          @confirm="onSalesRegionConfirm"
      />
    </van-popup>
    <van-popup v-model="SalesDepartmentShow" capture position="bottom">
      <van-picker
          :columns="deptList"
          show-toolbar
          value-key="deptName"
          @cancel="SalesDepartmentShow = false"
          @confirm="onSalesDepartmentConfirm"
      />
    </van-popup>
    <van-popup v-model="StartTimeShow" capture position="bottom">
      <van-datetime-picker
          v-model="strtcurrentDate"
          :max-date="strtmaxDate"
          :min-date="strtminDate"
          title="选择查找开始时间"
          type="date"
          @cancel="StartTimeShow = false"
          @confirm="onStartTimeConfirm"
      />
    </van-popup>
    <van-popup v-model="EndTimeShow" capture position="bottom">
      <van-datetime-picker
          v-model="endcurrentDate"
          :max-date="endmaxDate"
          :min-date="endminDate"
          title="选择查找结束时间"
          type="date"
          @cancel="EndTimeShow = false"
          @confirm="onEndTimeConfirm"
      />
    </van-popup>
  </div>
</template>

<script>
import timeico from "@/assets/Icon/datatims.png";
import {insertCustomAnswer, getSummaryDetailById, getDeptInfo, getSummaryMobileDeptInfo} from "@/api/index";
import zRadio from "@/components/zRadio2";
import zCheckbox from "@/components/zCheckbox2";
// import uploadImg from "@/components/uo";
import uploadImg from "@/components/uploadVTask";
import deleteUploadImg from "@/components/deleteUploadImg2";

export default {
  name: "MyHistoricalWeekly",
  components: {zRadio, zCheckbox, uploadImg, deleteUploadImg},
  data() {
    return {
      timeico: timeico,
      RegionShow: false,
      SalesRegionShow: false,
      SalesDepartmentShow: false,
      StaffShow: false,
      StartTimeShow: false,
      dateIndex:"",
      EndTimeShow: false,
      uploadid2:'uploadid2',
      PhotoTypeList: [{text: "009", value: "09"}],
      strtminDate: new Date(2022, 0, 1),
      endminDate: new Date(2022, 0, 1),
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2090, 0, 31),
      strtmaxDate: new Date(),
      endmaxDate: new Date(),
      strtcurrentDate: new Date(),
      endcurrentDate: new Date(),
      companyName: "全部公司",
      deptName: "全部销售部",
      regionName: "全部大区",
      userName: "全部",
      companyCode: "",
      deptCode: "",
      regionCode: "",
      userCode: "",
      companyList: [],
      title:"",
      deptList: [],
      regionList: [],
      userList: [],
      deptForm: {type: "", parentId: ""},
      list: [],
      loading: false,
      finished: true,
      showCalendar: false,
      formData: {
        type: "2", // 汇报类型或入口 1-下属业务员日报 2-下属销售部主管周报 3-下属大区主管半月报
        companyId: "", // 公司id，必传 Long类型
        regionId: "", // 大区id，必传  Long类型
        deptId: "", // 部门id，如果为周报或日报为必传  Long类型
        userId: "", // 业务员id，如果为日报为必传      Long类型
        startTime: "", // 开始时间，必传  格式：yyyy-MM-dd  String类型
        endTime: "", // 结束时间，必传  格式：yyyy-MM-dd  String类型
        pageNum: 1, // 当前页码  int类型
        pageSize: 10, // 当前每页条数  int类型
      },
      tableList: [],
      collectionItemList: [],
      collectionAnswerlisd:[],
      flagclick:true,
      index:""
    }
  },
  created() {
    // this.formData.startTime = this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'),2)
    this.formData.startTime = this.getThreeDaysAgo()
    // this.strtcurrentDate=new Date(this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'),2))
    this.strtcurrentDate = new Date(this.getThreeDaysAgo())
    this.formData.endTime = this.parseTime(new Date(), '{y}-{m}-{d}') + ""
    this.endminDate = new Date(this.GetPreMonthDay(this.parseTime(new Date(), '{y}-{m}-{d}'), 2))
    this.powerGrade = localStorage.getItem("powerGrade")
    this.title=this.$route.query.title
    this.getReportInfo()
    this.regionCode=""

  },
  watch: {
    $route(to, from) {
      if (to.path == "/VisitSummaryAdd") {
        this.title=this.$route.query.title
        this.getReportInfo()
        this.regionCode=""

      }
    }
  },
  methods: {
    showCalendarClick(val){
      this.dateIndex=val
      this.showCalendar = true;
    },
    formatDate(date) {
      var Month=date.getMonth() + 1
      var Day=date.getDate()
      if(Month<10){
        Month="0"+Month
      }
      if(Day<10){
        Day="0"+Day
      }
      return `${date.getFullYear()}-${Month}-${Day}`;
    },
    onConfirm(date) {
      this.showCalendar = false;
      this.collectionItemList[this.dateIndex].answerValue = this.formatDate(date);
    },
    formatter(value) {
      return value.replace(/[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/gi, '');
    },
    numberFn(val, index) {
      if (!/^[+-]?\d*\.{0,1}\d{0,1}$/.test(this.collectionItemList[index].answerValue)) {
        this.collectionItemList[index].answerValue = this.collectionItemList[index].answerValue.replace(/\.\d{2,}$/, this.collectionItemList[index].answerValue.substr(this.collectionItemList[index].answerValue.indexOf('.'), 3));
      }
    },
    zSelectVal(value) {
      var collectionAnswerlisd=this.collectionAnswerlisd
      if(collectionAnswerlisd.length>0){
        var num=0
        for (var a = 0; a < collectionAnswerlisd.length; a++) {
          if(collectionAnswerlisd[a].id==value.id){
            collectionAnswerlisd[a]=value
            num=0
          }else{
            num=1
          }
        }
        if(num>0){
          collectionAnswerlisd.push(value)
        }
      }else{
        collectionAnswerlisd.push(value)
      }
      this.collectionAnswerlisd=collectionAnswerlisd
    },
    imgClick(val, index) {
      this.collectionId = val.collectionId + ""
      this.indeximg = index
      this.show = true
    },
    newimgarr1(val) {
      if (this.collectionItemList[val.index].fileInfoList == null || this.collectionItemList[val.index].fileInfoList == undefined) {
        this.collectionItemList[val.index].fileInfoList = []
        this.collectionItemList[val.index].fileIdList = []
      }
      this.collectionItemList[val.index].fileInfoList.push(val)
      this.collectionItemList[val.index].fileIdList.push(val.id)
    },
    dateFn(val) {
      return val.slice(0, 4) + "-" + val.slice(4, 6) + "-" + val.slice(6, 8)
    },
    onLoad() {
    },
    onSubmit() {
      // var formData = {
      //   storeId: this.storeId,
      //   storeCode: this.$route.query.storeCode,
      //   storeGroupId: this.storeGroupId,
      //   visitsId: this.visitId,
      //   taskId: this.taskId,
      //   collectionAnswers: [],
      //   checkUnManage: checkUnManage
      // }
      // var collectionAnswers = []

      // for (var b = 0; b < this.collectionItemList.length; b++) {
      //   if (this.collectionItemList[b].answerType == "sz" || this.collectionItemList[b].answerType == "wb") {
      //     collectionAnswers.push({
      //       "collectionId": this.collectionItemList[b].collectionId,
      //       "itemName": this.collectionItemList[b].collectionName,
      //       "collectionType": this.collectionItemList[b].collectionType,
      //       "collectionOptionId": this.collectionItemList[b].collectionOptionList[0].collectionOptionId,
      //       "answerType": this.collectionItemList[b].answerType,
      //       "answerValue": this.collectionItemList[b].answerValue
      //     })
      //   }
      // }
      for (var c = 0; c < this.collectionAnswerlisd.length; c++) {
        for (var b = 0; b < this.collectionItemList.length; b++) {
          if(this.collectionAnswerlisd[c].id==this.collectionItemList[b].customId){
            this.collectionItemList[b].customOptionList=this.collectionAnswerlisd[c].value
          }
        }
      }
      if (this.flagclick) {
        this.flagclick = false
        this.timer = null;
        this.timer = setTimeout(() => {
          this.flagclick = true
        }, 2000)
        insertCustomAnswer(this.collectionItemList).then(res => {
          if (res.code == 200) {
            this.$router.go(-1)
          }

        })
      }
    },
    getReportInfo() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      this.collectionItemList=[]
      this.collectionAnswerlisd=[]
      getSummaryDetailById({summaryId: this.$route.query.summaryId}).then(res => {
        loading1.clear()
        if (res.code == 200) {
          var collectionItemLists = res.data
          for (var q = 0; q < collectionItemLists.length; q++) {
            collectionItemLists[q].answerName=undefined
          //   if (collectionItemLists[q].answerType == "sz" || collectionItemLists[q].answerType == "wb") {
          //     collectionItemLists[q].answerValue = collectionItemLists[q].customOptionList[0].answerValue
          //   }
          //   if (collectionItemLists[q].answerType == "duox" || collectionItemLists[q].answerType == "dx") {
          //     collectionItemLists[q].answerValue = []
          //     for (var qq = 0; qq < collectionItemLists[q].customOptionList.length; qq++) {
          //       if (collectionItemLists[q].customOptionList[qq].isCheck == 1) {
          //         collectionItemLists[q].answerValue.push(collectionItemLists[q].customOptionList[qq].customId)
          //         collectionItemLists[q].customOptionList[qq].code = collectionItemLists[q].collectionCode
          //         collectionItemLists[q].customOptionList[qq].answerType = collectionItemLists[q].answerType
          //         this.collectionAnswerlisd.push(collectionItemLists[q].customOptionList[qq])
          //       }
          //     }
          //     collectionItemLists[q].answerValue = collectionItemLists[q].answerValue.join()
          //   }
          }
          this.collectionItemList = collectionItemLists
          this.getDeptInfo("dept")
        }
      })
    },
    getThreeDaysAgo() {
      let myDate = new Date();
      let lw = new Date(myDate - 1000 * 60 * 60 * 24 * 14); //最后一个数字30可改，30天的意思
      let lastY = lw.getFullYear();
      let lastM = lw.getMonth() + 1;
      let lastD = lw.getDate();
      let startData =
          lastY +
          "-" +
          (lastM < 10 ? "0" + lastM : lastM) +
          "-" +
          (lastD < 10 ? "0" + lastD : lastD); //三十天之前日期
      return startData;
    },
    GetPreMonthDay(date, monthNum, type) {
      var dateArr = date.split('-');
      var year = dateArr[0]; //获取当前日期的年份
      var month = dateArr[1]; //获取当前日期的月份
      var day = dateArr[2]; //获取当前日期的日
      var days = new Date(year, month, 0);
      days = days.getDate(); //获取当前日期中月的天数
      var year2 = year;
      var month2 = parseInt(month) - monthNum;
      if (month2 <= 0) {
        var absM = Math.abs(month2);
        year2 = parseInt(year2) - Math.ceil(absM / 12 == 0 ? 1 : parseInt(absM) / 12);
        month2 = 12 - (absM % 12);
      }
      var day2 = day;
      var days2 = new Date(year2, month2, 0);
      days2 = days2.getDate();
      if (day2 > days2) {
        day2 = days2;
      }
      if (month2 < 10) {
        month2 = '0' + month2;
      }
      var t2 = ""
      if (monthNum > 0) {
        t2 = year2 + '-' + month2 + '-01';
      } else {
        if (type == "end") {
          var Months = new Date().getMonth() + 1
          var days111 = new Date().getDate()
          if (Months < 10) {
            Months = '0' + Months;
          }
          if (days111 < 10) {
            days111 = '0' + days111;
          }
          if (parseInt(month2) >= new Date().getMonth() + 1) {
            t2 = year2 + '-' + Months + '-' + days111;
          } else {
            var daysd = this.getMonthDays(year2, month2)
            t2 = year2 + '-' + month2 + '-' + daysd;
          }
        } else {
          t2 = year2 + '-' + month2 + '-' + day2;
        }
      }
      return t2;
    },
    getMonthDays(year, month) {
      var stratDate = new Date(year, month - 1, 1),
          endData = new Date(year, month, 1);
      var days = (endData - stratDate) / (1000 * 60 * 60 * 24);
      return days;
    },
    getDeptInfo(type, grade) {
      this.deptForm.type = type
        if (grade == "1") {
          this.deptForm.parentId = this.companyCode
        } else if (grade == "2") {
          this.deptForm.parentId = this.regionCode
        } else {
          this.deptForm.type = ""
          this.deptForm.parentId = ""
      }
      getSummaryMobileDeptInfo(this.deptForm).then(res => {
          if (grade == "1") {
            if (res.data.region != null) {
              this.regionList = res.data.region
            }
          } else if (grade == "2") {
            if (res.data.dept != null) {
              this.deptList = res.data.dept
            }
          } else {
            this.companyList = res.data.company
            this.companyCode=res.data.company[0].deptId
            for(var k=0;k<this.collectionItemList.length;k++){
              if(this.collectionItemList[k].answerType == "gs"){
                this.collectionItemList[k].answerName=res.data.company[0].deptName
                this.collectionItemList[k].answerValue=res.data.company[0].deptCode
              }
            }
            this.getDeptInfo(1,"1")
            if(res.data.dept!=null){
              this.deptList=res.data.dept
            }
            if(res.data.region!=null){
              this.regionList=res.data.region
            }
          }
      })
    },
    dailyFn(row) {
      if (row.status != '0') {
        if (row.status == -1) {
          var dayTime = row.showDate;
          var times = new Date(dayTime.slice(0, 4) + "-" + dayTime.slice(4, 6) + "-" + dayTime.slice(6, 8)).getTime()
          var time = new Date("2022-08-25").getTime()
          if (times < time) {
            this.$dialog.alert({
              title: '系统提示',
              message: '非常抱歉，8月25日前历史报告数据不存在',
            })
          } else {
            this.$router.push({
              path: "/weeklyHistoricalDetils",
              query: {reportId: row.id,}
            })
          }
        } else {
          this.$router.push({
            path: "/weeklyHistoricalDetils",
            query: {reportId: row.id,}
          })
        }
      }
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    regionClick(val) {
      // if(this.powerGrade>4){
      this.index=val
      this.RegionShow = true;
      // }
    },
    SalesRegionClick(val) {
      this.index=val
      this.SalesRegionShow = true;
    },
    SalesDepartmentClick(val) {
      this.index=val
      this.SalesDepartmentShow = true;
    },
    StaffClick() {
      this.StaffShow = true;
    },
    StartTimeClick() {
      this.StartTimeShow = true;
    },
    EndTimeClick() {
      this.EndTimeShow = true;
    },
    onSalesRegionConfirm(val) {
      this.SalesRegionShow = false;
      for(var k1=0;k1<this.collectionItemList.length;k1++){
        if(this.collectionItemList[k1].answerType == "xsb"){
          this.collectionItemList[k1].answerName=""
          this.collectionItemList[k1].answerValue=""
        }
      }
      this.collectionItemList[this.index].answerName=val.deptName
      this.collectionItemList[this.index].answerValue=val.deptCode
      this.regionCode =val.deptId;
      if (val.deptId != "") {
        this.getDeptInfo("dept", 2)
      }
    },
    onregionConfirm(val) {
      this.RegionShow = false;
      for(var k1=0;k1<this.collectionItemList.length;k1++){
        if(this.collectionItemList[k1].answerType == "xsb"||this.collectionItemList[k1].answerType == "dq"){
          this.collectionItemList[k1].answerName=""
          this.collectionItemList[k1].answerValue=""
        }
      }
      this.collectionItemList[this.index].answerName=val.deptName
      this.collectionItemList[this.index].answerValue=val.deptCode
      this.companyCode=val.deptId;
      this.getDeptInfo("dept",1)
    },
    onSalesDepartmentConfirm(val) {
      this.SalesDepartmentShow = false;
      this.collectionItemList[this.index].answerName=val.deptName
      this.collectionItemList[this.index].answerValue=val.deptCode
    },
    onStartTimeConfirm(val) {
      this.formData.startTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + ""
      this.StartTimeShow = false;
      this.endminDate = new Date(val)
      this.endmaxDate = new Date(this.GetPreMonthDay(this.formData.startTime, -2, "end"))
      if ((new Date(this.formData.startTime).getTime() > new Date(this.formData.endTime).getTime()) || (new Date(this.endmaxDate).getTime() < new Date(this.formData.endTime).getTime())) {
        this.formData.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}') + ""
        this.endcurrentDate = this.GetPreMonthDay(this.formData.startTime, -2)
      }
      this.list = [];
      this.formData.pageNum = 1;
    },
    onEndTimeConfirm(val) {
      this.formData.endTime = this.parseTime(new Date(val), '{y}-{m}-{d}')
      this.strtmaxDate = new Date(val)
      if (new Date(this.formData.startTime).getTime() > new Date(this.formData.endTime).getTime()) {
        this.formData.startTime = this.formData.endTime
      }
      this.list = [];
      this.formData.pageNum = 1;
      this.EndTimeShow = false;
    },
  }
}
</script>
<style scoped>
.container {
  background-color: white;
}

.van-f-red {
  color: red;
  width: 8px;
  display: inline-block;
  line-height: 26px;
}

.formLabel {
  margin: 0 16px;
  border-bottom: 1px solid #f1f1f1
}

.formLabel .van-cell {
  padding: 10px 0
}

.formLabel .van-cell::after {
  border: 0
}

.formLabel .van-field {
  border: 1px solid #f1f1f1;
  padding: 6px;
  width: 100%;
  border-radius: 4px;
  overflow: hidden
}

.formLabel .van-field__control {
  padding: 0 10px
}

.formLabel .formLabeltitle {
  position: absolute;
  top: 8px;
}

.lineGrey {
  height: 10px;
  width: 100%;
  background: #f1f1f1;
}

.z-checkbox .van-radio {
  padding: 6px 0;
}

.z-cell .van-cell__title {
  font-size: 16px;
}

</style>
<style>
.table-headermd {
  font-size: 12px;
  text-align: center;
  position: initial;
  width: 98% !important;
  margin: 0 auto;
  border-right: 0;
}

.table-headermd .el-table__header,
.table-headermd .el-table__body {
  width: 100% !important;
}

/*.table-headermd col {width: 6.8rem;}*/
.table-headermd col:nth-child(4) {
  width: 5.6rem;
}

.table-headermd col:nth-child(2),
.table-headermd col:nth-child(3) {
  width: 4.6rem;
}

.table-headermd .van-cell {
  padding: 0 4px;
  height: 100%
}

.table-headermd th.el-table__cell > .cell {
  padding: 0 4px;
  text-align: center
}

.table-headermd th.el-table__cell:first-child > .cell {
  text-align: left;
}

.table-headermd th.el-table__cell {
  background-color: #1989fa;
  color: #fff;
}

.table-headermd .el-table__cell {
  padding: 4px 0;
}

.table-headermd.el-table .cell {
  padding: 0
}

.table-headermd .tipTitle {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.table-headermd::before {
  height: 0
}

.xing {
  color: red;
  padding-left: 4px;
}

.formLabel .van-radio__label, .formLabel .van-checkbox__label {
  font-size: 1.4rem
}

.table-headermd .cell, .el-table--border .el-table__cell:first-child .cell {
  padding: 0 4px;
}

.van-dialog__confirm, .van-dialog__confirm:active {
  color: #1989fa;
}

.navBarTOP {
  position: fixed;
  width: 100%;
  z-index: 2;
  top: 0;
}

.isTableMust {
  padding: 4px;
  color: #999;
  margin: 0;
  margin-top: -10px;
}
</style>