storevisit-ui-mobile/src/views/week/VisitSummaryDetail copy.vue

<template>
  <div>
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" :title="info.summaryTaskName" left-arrow @click-left="onClickLeft"/>
      <!--      <p style="text-align: right;margin-right: 16px;color: #1e5398;">{{title}}</p>-->
    </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 linep" style="background-color: #fff;width: 94%; margin: 0px auto; border-radius: 6px;padding: 10px">
      <div style="padding:4px 0">
        <van-icon :name="ry" size="16"  style="float: left"/>
        <span>&nbsp;{{info.nickName}} - {{info.postName}}</span>
      </div>
      <div style="padding:4px 0">
        <van-icon :name="zw" size="16" style="float: left"/>
        <span >&nbsp;所属部门：{{info.deptName}}</span>
      </div>
      <div style="padding:4px 0">
        <van-icon :name="tm" size="16"  style="float: left"/>
        <span >&nbsp;提交时间：{{info.createTime}}</span>
      </div>
    </div>
    <div class="lineGrey"></div>
    <div class="container linep" style="background-color: #fff;width: 94%; margin: 0px auto; border-radius: 6px;">
      <van-form ref="tabstoreVal">
        <div v-for="(item,index) in info.customItemList" :key="index">
          <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType=='sz' || item.answerType=='rq'||item.answerType=='gs'||item.answerType=='dq'||item.answerType=='xsb'">
            <van-cell>
              <template #title>{{ index + 1 }}.{{ item.customName }} <span style="color: #444;
  font-size: 12px;
  margin: 0;
  padding:10px 0;text-align: right">{{ item.remark}}</span></template>
            </van-cell>
            <p class="mg0">{{ item.answerValue }}</p>
          </div>
          <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType=='zp'">
            <van-cell>
              <template #title>{{ index + 1 }}.{{ item.customName }}</template>
            </van-cell>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType=='wb'">
            <van-cell>
              <template #title>{{ index + 1 }}.{{ item.customName }}</template>
            </van-cell>
            <div class="selesetText">
              <p class="mg0">{{ item.answerValue }}</p>
            </div>
            <p style="color: #444;font-size: 12px;margin: 0;padding:10px 0;text-align: right">{{ item.remark }}</p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType=='duox'">
            <van-cell>
              <template #title>{{ index + 1 }}.{{ item.customName }}</template>
            </van-cell>
            <div class="selesetText">
              <div class="mg0" v-for="(item1,index1) in item.customOptionList" :key="index1">
              <p style="color:#0057ba" v-if="item1.checked">
                <i style="border: 1px solid #0057ba;margin-right: 10px;border-radius:2px;padding: 2px" class="van-icon van-icon-success"></i>
                <span >{{ item1.customOption }}</span>
              </p>
              <p v-if="!item1.checked">
                <i style="border: 1px solid #ccc;margin-right: 10px;border-radius:2px;color:#fff;padding: 2px" class="van-icon van-icon-success"></i>
                <span >{{ item1.customOption }}</span>
              </p>
              </div>
            </div>
          </div>
          <div class="formLabel z-cell z-cells z-celly" v-if="item.answerType=='dx'">
            <van-cell>
              <template #title>
                {{ index + 1 }}.{{ item.customName }}
              </template>
            </van-cell>
            <div class="selesetText">
              <div class="mg0" v-for="(item2,index2) in item.customOptionList" :key="index2">
                <p style="color:#0057ba" v-if="item2.checked">
                  <i style="border: 1px solid #0057ba;border-radius:40px;margin-right: 10px;padding: 2px" class="van-icon van-icon-success"></i>
                  <span >{{ item2.customOption }}</span>
                </p>
                <p v-if="!item2.checked">
                  <i style="border: 1px solid #ccc;border-radius:40px;margin-right: 10px;color:#fff;padding: 2px" class="van-icon van-icon-success"></i>
                  <span >{{ item2.customOption }}</span>
                </p>
              </div>
            </div>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
        </div>
      </van-form>

    </div>
    <br>
    <br>
    <br>
  </div>
</template>

<script>
import history from "@/assets/Icon/history.png";
import tm from "@/assets/Icon/tm.png";
import zw from "@/assets/Icon/zw.png";
import ry from "@/assets/Icon/ry.png";
import {getSummaryMobilo} from "@/api/index";
import {ImagePreview} from "vant";
import deleteUploadImg from "@/components/deleteUploadImg";
export default {
  name: "daily",
  components: {deleteUploadImg},
  data() {
    return {
      info:{},
      zw:zw,
      tm:tm,
      ry:ry,
      show: true,
      num: 0,
      todayGoal: {},
      progressWidth: 0,
      history: history,
      imgArr: [],
      activeNames: ['1', '2', '3', '4', '5', '6', '7', '8', '10',"16","17"],
      value: "2",
      message: "",
      powerGrade:"",
      Content:"",
      Content2:"",
      reportTargetAll:{},
      reportContents:[{dayContent:""}],
      reportTarget:{},
      successContent:"",
      imgList:[],
      type:"-1"
      //
    }
  },
  created() {
    this.powerGrade= localStorage.getItem("powerGrade")
    this.getDetailById()
  },
  watch:{
    $route(to,from){
      this.powerGrade= localStorage.getItem("powerGrade")
      if(to.path=="/dailyDetails"){
        this.getDetailById()
      }
      // &&from.path=="/dailyApprovalList"
      // if(to.path=="/dailyDetails"&&from.path=="/myHistoricalDaily"){
      //   this.getDetailById()
      // }
    }
  },
  activated() {
    this.num = 0;
    this.userTodayPlanNum()
  },
  methods: {
    pviewFn(val,imgVal){
      var imgList=[]
      var photos=this.reportTarget.photos[val].photos
      for(let i=0;i<photos.length;i++){imgList.push(photos[i].fileUrl)};
      ImagePreview({images: imgList, startPosition: imgVal});
    },
    submint(){
      this.$router.push({
        path: "/daily",
        query: {reportId:this.$route.query.reportId,temporaryShow:"N"}
      })
    },
    getDetailById(){
      let loading1=this.$toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      getSummaryMobilo({userSummaryId:this.$route.query.userSummaryId}).then(res=>{
        loading1.clear()
        this.reportTargetAll=res.data.reportTargetAll
        this.info=res.data
        this.type=res.data.userType
        if(res.data.status==3){
          this.successContent=res.data.successContent
        }else{
          this.successContent=res.data.failContent
        }
        if(res.data.reportContents.length>0){
          this.Content=res.data.reportContents[0].dayContent
          if(res.data.reportContents.length>1){
            this.Content2=res.data.reportContents[1].dayContent
          }else{
            this.Content2=""
          }
        }else{
          this.Content=""
          this.Content2=""
        }
        this.reportContents=res.data.reportContents
        var imgList=[]
        if(res.data.photos!=null){
          for(var k=0;k<res.data.photos.length;k++){
            imgList.push(res.data.photos[k].fileUrl+"")
          }
        }
        this.imgList=imgList
      })
    },
    userTodayPlanNum() {
      userTodayPlanNum().then(res => {
        if (res.code == 200) {
          this.todayGoal = res.data
          this.progressWidth = (this.todayGoal.finishNum / this.todayGoal.planNum) * 100 + "%"
          localStorage.setItem("nickName", res.data.user.nickName)
          localStorage.setItem("storeType", res.data.user.type)
        } 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;
}

.z-checkbox .van-radio {
  padding: 6px 0;
}
.z-celly .van-cell__title{
  font-weight: initial;
  font-size: 14px;
}
</style>
<style>
.table-headermd {
  font-size: 1.2rem;
  text-align: center;
  position: initial;
  width: 94% !important;
  margin: 0 auto;
  border-right: 0;
}

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

.table-headermd col {
  width: 5.8rem;
}

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

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

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

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

.table-headermd .el-table__cell {
  padding: 4px 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
}

.f-right {
  text-align: right;
  margin: 0
}

.mg0 {
  margin: 6px 10px;
  color: #909090;
  font-size: 14px;
}

.selesetText {
  margin-bottom: 16px;
}

.z-cells .van-cell__title {
  font-weight: bold;
  color: #4a4a4a;
}

.z-cells .van-cell {
  padding-bottom: 0
}

</style>