storevisit-ui-mobile/src/views/sign/index.vue

<template>
  <div>
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar
          class="navBar"
          title="大客户签约协议"
          left-arrow
          @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"></div>
    <div class="container" style="width: 94%;margin: 0 auto;border-radius: 6px">
      <van-form ref="tabstoreVal">
        <div v-for="(item,index) in collectionItemList" :key="index">
          <div class="formLabel z-cell" v-if="item.answerType=='sz'">
            <van-cell>
              <template #title>
                <span  class="van-f-red" v-if="item.isMust==0">*</span>{{item.collectionName}}
              </template>
              <template #right-icon >
                <span style="color:red;" v-if="item.isMustPicture=='0'">图片必填</span>
                <van-icon v-if="item.isPicture=='0'" name="photograph"  size="24" color="#666" @click="imgClick(item,index)"/>
              </template>
            </van-cell>
            <van-field  v-model="item.answerValue" type="number" @input="numberFn(item,index)" :placeholder="item.text"></van-field>
            <p style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right">{{item.collectionOptionList[0].collectionOption}}</p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell" v-if="item.answerType=='zp'">
            <van-cell>
              <template #title>
                <span  class="van-f-red" v-if="item.isMust==0">*</span>{{item.collectionName}}
              </template>
            </van-cell>
            <van-uploader :after-read="afterRead" upload-text="照片上传"/>
          </div>
          <div class="formLabel z-cell" v-if="item.answerType=='wb'">
            <van-cell>
              <template #title>
                <span  class="van-f-red" v-if="item.isMust==0">*</span>{{item.collectionName}}
              </template>
              <template #right-icon>
                <span style="color:red;" v-if="item.isMustPicture=='0'">图片必填</span>
                <van-icon v-if="item.isMustPicture==0" name="photograph"  size="24" color="#666" @click="imgClick(item,index)"/>
              </template>
            </van-cell>
            <van-field  v-model="item.answerValue"  :placeholder="item.text" :formatter="formatter"></van-field>
            <p style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right">{{item.collectionOptionList[0].collectionOption}}</p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell" v-if="item.answerType=='duox'">
            <van-cell>
              <template #title>
                <span class="van-f-red" v-if="item.isMust==0">*</span>{{item.collectionName}}
              </template>
              <template #right-icon>
                <span style="color:red;" v-if="item.isMustPicture=='0'">图片必填</span>
                <van-icon v-if="item.isMustPicture==0" name="photograph"  size="24" color="#666" @click="imgClick(item,index)"/>
              </template>
            </van-cell>
            <z-checkbox  :checkboxval="item.answerValue"  :collectionType="item.collectionType" :answerType="item.answerType" :textc="item.collectionCode"
                         @zSelectVal="zSelectVal" :zCheckboxcolumns="item.collectionOptionList"></z-checkbox>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell" v-if="item.answerType=='dx'">
            <van-cell>
              <template #title>
                <span  class="van-f-red" v-if="item.isMust==0">*</span>{{item.collectionName}}
              </template>
              <template #right-icon>
                <span style="color:red;" v-if="item.isMustPicture=='0'">图片必填</span>
                <van-icon v-if="item.isMustPicture==0" name="photograph"  size="24" color="#666" @click="imgClick(item,index)"/>
              </template>
            </van-cell>
            <z-radio  :radio="item.answerValue" :collectionType="item.collectionType" :textc="item.collectionCode"
                      :answerType="item.answerType" @zSelectVal="zSelectVal" :zRadiocolumns="item.collectionOptionList"></z-radio>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <br>
        </div>
      </van-form>
    </div>
    <div class="formLabel" style="margin:20px 16px;">
      <van-button block type="info" size="normal" style="background-color: #0057ba;" @click="onSubmit">提交</van-button>
    </div>
    <br>
    <van-dialog v-model="show" title="上传图片" show-cancel-button :show-confirm-button="false" >
      <van-field
          readonly
          clickable
          name="picker"
          :value="PhotoTypeText"
          placeholder="选择图片类型"
          @click="showPicker = true"
          v-if="indexselect=='1'"
      >
        <template #label>
          <span  class="van-f-red">*</span>图片类型
        </template>
      </van-field>
      <van-cell>
        <template #title>
          <span  class="van-f-red">*</span>拍照上传
        </template>
        <template #right-icon>
          <upload-img :uploadid="uploadid2" :visitModel="1+''" :shouws="true" @typeshow="typeshow" :visitsId="visitId"
                      :objectType="PhotoType"
                      :collectionId="collectionId"
                      :taskId="taskId"
                      :storeGroupId="storeGroupId"
                      :imgArr="imgs"
                      @newimgarr="newimgarr1"></upload-img>
        </template>
      </van-cell>
    </van-dialog>
    <van-popup v-model="sdsd" position="bottom">
      <upload-img :uploadid="uploadid2" @typeshow="typeshow" :visitsId="visitId" :objectType="PhotoType"
                  :collectionId="collectionId"
                  :taskId="taskId"
                  :storeGroupId="storeGroupId"
                  :imgArr="imgs"
                  @newimgarr="newimgarr1"></upload-img>
    </van-popup>
    <van-popup v-model="showPicker" capture position="bottom">
      <van-picker
          show-toolbar
          :columns="PhotoTypeList"
          @confirm="onConfirm"
          @cancel="showPicker = false"
      />
    </van-popup>
    <van-dialog v-model="logshow" title="系统提示" show-cancel-button>
      是否保存信息？
    </van-dialog>
  </div>
</template>

<script>
import { getPhotoTypeList,addCollectionAnswer,getStoreGroupTask,editDwellTime } from "@/api/index";
import zRadio from "@/components/zRadio";
import zCheckbox from "@/components/zCheckbox";
import uploadImg from "@/components/supervisortask";
import deleteUploadImg from "@/components/deleteUploadImg1";
export default {
  name: "abnormalVisit",
  components: {zRadio,zCheckbox,uploadImg,deleteUploadImg},
  data() {
    return {
      value:"",
      sdsd:false,
      showPicker:false,
      logshow:false,
      fromValue:{
        select1:"",
        select3:"",
        checkbox:"1",
        radio:"",
        input:""
      },
      timer:null,
      flagclick:true,
      isMust:"0",
      imgs:[],
      checkboxGroup: [],
      radio: '',
      uploadid2:'uploadid2',
      collectionItemList:[],
      rdId:"",
      show:false,
      PhotoTypeList:[],
      PhotoType:"",
      PhotoTypeText:"",
      indexselect:0,
      visitId:"",
      storeGroupId:"",
      taskId:"",
      collectionId:"",
      // form
      storeId:"",
      collectionAnswerlisd:[],
      tableData1: [],
      taskType:1,
      flag:false,
      indeximg:"",
      link:"3",
    }
  },
  activated() {
    this.flag=false
    this.link="3"
    this.taskType=this.$route.query.taskType
    this.PhotoType=this.$route.query.photoType
    this.storeCode=this.$route.query.storeCode
    this.visitId = this.$route.query.visitId + "";
    this.taskId = this.$route.query.taskId + "";
    this.storeId = this.$route.query.storeId + "";
    this.isMust== this.$route.query.isMust + "";
    this.storeGroupId = this.$route.query.storeGroupId + "";
    if(this.$route.query.photoType!=null){
      this.indexselect=0
    }else{
      this.indexselect=1
    }
    this.info()
  },
  created() {},
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      console.log(file);
    },
    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, '');
    },
    weekend(time1){
      var arrtime1=new Date(time1).getTime();
      var arrtime2=new Date().getTime();
      return (Math.round((arrtime2-arrtime1)/1000));
    },
    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));
      }},
    info(){
      // getStoreGroupTask(params).then(res=>{
        var collectionItemLists=[{
          "searchValue": null,
          "createBy": "admin",
          "createTime": "2022-03-23 14:00:37",
          "updateBy": "",
          "updateTime": null,
          "remark": "",
          "params": {},
          "collectionId": 213,
          "collectionCode": "cj100080",
          "collectionName": "品类",
          "collectionType": "xpdc",
          "isMust": "0",
          "isValid": "0",
          "isPicture": "1",
          "isMustPicture": "1",
          "answerType": "dx",
          "delFlag": "0",
          "useType": 1,
          "taskCollectionId": 379,
          "taskId": null,
          "itemList": null,
          "useFrequency": 3,
          "collectionOptionList": [{
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:00:37",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 545,
            "collectionId": 213,
            "collectionOption": "内墙乳胶漆",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:00:37",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 546,
            "collectionId": 213,
            "collectionOption": "外墙乳胶漆",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:00:37",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 547,
            "collectionId": 213,
            "collectionOption": "木器漆",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:00:37",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 548,
            "collectionId": 213,
            "collectionOption": "基材",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:00:37",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 549,
            "collectionId": 213,
            "collectionOption": "辅材",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }],
          "fileInfoList": null
        }, {
          "searchValue": null,
          "createBy": "admin",
          "createTime": "2022-03-23 14:02:16",
          "updateBy": "",
          "updateTime": null,
          "remark": "",
          "params": {},
          "collectionId": 216,
          "collectionCode": "cj100083",
          "collectionName": "销售渠道",
          "collectionType": "xpdc",
          "isMust": "1",
          "isValid": "0",
          "isPicture": "1",
          "isMustPicture": "1",
          "answerType": "duox",
          "delFlag": "0",
          "useType": 1,
          "taskCollectionId": 382,
          "taskId": null,
          "itemList": null,
          "useFrequency": 3,
          "collectionOptionList": [{
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:02:16",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 554,
            "collectionId": 216,
            "collectionOption": "分销店",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:02:16",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 555,
            "collectionId": 216,
            "collectionOption": "金牌店",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }, {
            "searchValue": null,
            "createBy": "admin",
            "createTime": "2022-03-23 14:02:16",
            "updateBy": "",
            "updateTime": null,
            "remark": null,
            "params": {},
            "collectionOptionId": 556,
            "collectionId": 216,
            "collectionOption": "专卖店",
            "delFlag": "0",
            "isCheck": null,
            "answerValue": null
          }],
          "fileInfoList": null
        }, {
          "searchValue": null,
          "createBy": "admin",
          "createTime": "2022-03-30 15:16:00",
          "updateBy": "",
          "updateTime": null,
          "remark": "",
          "params": {},
          "collectionId": 244,
          "collectionCode": "cj100086",
          "collectionName": "上传协议（必拍）",
          "collectionType": "xpdc",
          "isMust": "1",
          "isValid": "0",
          "isPicture": "0",
          "isMustPicture": "1",
          "answerType": "zp",
          "delFlag": "0",
          "useType": 1,
          "taskCollectionId": 383,
          "taskId": null,
          "itemList": null,
          "useFrequency": 3,
          "collectionOptionList": [],
          "fileInfoList": null
        }]
          for(var q=0;q<collectionItemLists.length;q++){
            if(collectionItemLists[q].answerType=="sz"||collectionItemLists[q].answerType=="wb"){
              collectionItemLists[q].answerValue=collectionItemLists[q].collectionOptionList[0].answerValue
            }
            if(collectionItemLists[q].answerType=="duox"||collectionItemLists[q].answerType=="dx"){
              collectionItemLists[q].answerValue=[]
              for(var qq=0;qq<collectionItemLists[q].collectionOptionList.length;qq++){
                if(collectionItemLists[q].collectionOptionList[qq].isCheck==1){
                  collectionItemLists[q].answerValue.push(collectionItemLists[q].collectionOptionList[qq].collectionOptionId)
                  collectionItemLists[q].collectionOptionList[qq].code=collectionItemLists[q].collectionCode
                  collectionItemLists[q].collectionOptionList[qq].answerType=collectionItemLists[q].answerType
                  this.collectionAnswerlisd.push(collectionItemLists[q].collectionOptionList[qq])
                }
              }
              collectionItemLists[q].answerValue=collectionItemLists[q].answerValue.join()
            }
          }
          this.collectionItemList=collectionItemLists
      // })
    },
    tipTitle(val){
      this.$toast(val);
    },
    typeshow(val){
      this.show=val;
    },
    onConfirm(val){
      this.indexselect="1"
      this.PhotoType=val.dictValue
      this.PhotoTypeText=val.text
      this.showPicker=false
    },
    getPhotoTypeList(){
      getPhotoTypeList({}).then(res=>{
        var PhotoTypeLists=[]
        for(var p=0;p<res.data.length;p++){
          PhotoTypeLists.push({
            dictValue:res.data[p].dictValue,
            text:res.data[p].dictLabel
          })
        }
        this.PhotoTypeList=PhotoTypeLists
      })
    },
    imgClick(val,index){
      this.collectionId=val.collectionId+""
      this.indeximg=index
      this.show=true
    },
    newimgarr1(val){
      this.show=false
      console.log(this.indeximg)
      if(this.collectionItemList[this.indeximg].fileInfoList==null||this.collectionItemList[this.indeximg].fileInfoList==undefined){
        this.collectionItemList[this.indeximg].fileInfoList=[]
      }
      this.collectionItemList[this.indeximg].fileInfoList.push(val)
    },
    zSelectVal(value){
      for(var aa=0;aa<this.collectionAnswerlisd.length;aa++){
        if(this.collectionAnswerlisd[aa].code==value.type){
          this.collectionAnswerlisd.splice(aa,1);
          aa--
        }
      }
      for(var a=0;a<value.value.length;a++){
        value.value[a].code=value.type
        value.value[a].answerType=value.answerType
        value.value[a].collectionType=value.collectionType

        this.collectionAnswerlisd.push(value.value[a])
      }
    },
    onSubmit() {
      var formData={
        storeId:this.storeId,
        storeCode:this.$route.query.storeCode,
        storeGroupId:this.storeGroupId,
        visitsId:this.visitId,
        taskId:this.taskId,
        collectionAnswers:[]
      }
        for(var b=0;b<this.collectionItemList.length;b++){
          if(this.collectionItemList[b].answerType=="sz"||this.collectionItemList[b].answerType=="wb"){
            formData.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++){
          formData.collectionAnswers.push({
            "collectionId":this.collectionAnswerlisd[c].collectionId,
            "itemName":this.collectionAnswerlisd[c].collectionOption,
            "collectionType":this.collectionAnswerlisd[c].collectionType,
            "collectionOptionId":this.collectionAnswerlisd[c].collectionOptionId,
            "answerType":this.collectionAnswerlisd[c].answerType,
            "answerValue":"Y"
          })
        }
      if(this.flagclick) {
        this.flagclick = false
        this.timer = null;
        this.timer = setTimeout(() => {
          this.flagclick = true
        }, 2000)
        addCollectionAnswer(formData).then(res=>{
          if(res.code==200){
            this.$router.go(-1)
          }else{
            this.$toast.fail(res.msg);
          }
        })
      }
    },
    onClickLeft(){
      this.$router.go(-1)
    }
  }
}
</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>