storevisit-ui-mobile/src/views/historicalVisit/hisvistdeils.vue

<template>
  <div>
    <!--        顶部条-->
    <van-nav-bar class="navBar" title="拜访任务详情" left-arrow @click-left="onClickLeft" />
    <!--right-text="保存"-->
    <!--@click-right="onSubmit"-->
    <!--        主体内容-->
    <div class="lineGrey"></div>
    <div class="deviceCode" v-if="showCode">
      <div class="vertical"></div>
      <p>设备编号：{{ deviceCode }}</p>
      <p>投放编号：{{ putInCode }}</p>
    </div>
    <div class="lineGrey" v-if="showCode"></div>
    <div
      class="container containert"
      style="width: 100%; margin: 0 auto; padding: 10px 0"
      v-if="taskType == 3">
      <el-table
        :data="tableData1"
        border
        style="width: 100%"
        class="table-headermd"
        :span-method="objectSpanMethod">
        <el-table-column prop="collectionName" label="物料类型" width="180">
          <template slot-scope="scope">
            <span class="tipTitle" @click="tipTitle(scope.row.signDictype)">{{
              scope.row.signDictype
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="collectionName" label="物料名称" width="180">
          <template slot-scope="scope">
            <span class="tipTitle" @click="tipTitle(scope.row.collectionName)">{{
              scope.row.collectionName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inventoryNum" width="180" label="库存" />
        <el-table-column prop="address">
          <template slot="header">
            <span>发放量</span>
          </template>
          <template slot-scope="scope">
            <p class="f-right">{{ scope.row.value }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="container containert"
      style="width: 100%; margin: 0 auto; padding: 10px 0"
      v-if="taskType == 2">
      <p v-if="checkShow" style="padding: 0 10px; font-size: 14px">全部不经营</p>
      <el-table
        :data="tableData1"
        border
        style="width: 100%"
        class="table-headermd"
        v-if="!checkShow">
        <el-table-column prop="collectionName" label="产品名称" width="180">
          <template slot-scope="scope">
            <span class="tipTitle" @click="tipTitle(scope.row.collectionName)">{{
              scope.row.collectionName
            }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="name" width="180">
          <template slot="header">
            <span>进货原价</span>
          </template>
          <template slot-scope="scope">
            <p class="f-right">{{ scope.row.xdjhyj }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address">
          <template slot="header">
            <span>促后净价</span>
          </template>
          <template slot-scope="scope">
            <p class="f-right">{{ scope.row.xdjhchjj }}</p>
          </template>
        </el-table-column>
        <el-table-column prop="address">
          <template slot="header">
            <span>油工拿货价</span>
          </template>
          <template slot-scope="scope">
            <p class="f-right">{{ scope.row.ygnhj }}</p>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div
      class="container containert"
      style="width: 94%; margin: 0 auto; border-radius: 6px"
      v-if="taskType == 1">
      <van-form ref="tabstoreVal">
        <div v-for="(item, index) in collectionItemList" :key="index">
          <div class="formLabel z-cell z-cells" v-if="item.answerType == 'sz'">
            <van-cell>
              <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
            </van-cell>
            <p class="mg0">{{ item.answerValue }}</p>
            <p style="color: #444; font-size: 12px; margin: 0; padding: 10px 0; text-align: right">
              <van-field
                class="mobile-input"
                v-model="item.collectionOptionList[0].collectionOption"
                autosize
                readonly
                type="textarea" />
            </p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell z-cells" v-if="item.answerType == 'zp'">
            <van-cell>
              <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
            </van-cell>
            <!--<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 z-cells" v-if="item.answerType == 'wb'">
            <van-cell>
              <template #title>
                {{ index + 1 }}.{{ item.collectionName }}
                <span
                  style="color: #00afff; position: absolute; top: 8px; right: 0px"
                  v-if="item.showHistory == 1"
                  @click="getCollectionShowHistory(item)"
                  >回显历史</span
                >
              </template>
            </van-cell>
            <div class="selesetText">
              <p class="mg0">{{ item.answerValue }}</p>
            </div>
            <p style="color: #444; font-size: 12px; margin: 0; text-align: right">
              <van-field
                class="mobile-input"
                v-model="item.collectionOptionList[0].collectionOption"
                autosize
                readonly
                type="textarea" />
            </p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell z-cells" v-if="item.answerType == 'tel'">
            <van-cell>
              <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
            </van-cell>
            <div class="selesetText">
              <p class="mg0">{{ item.answerValue }}</p>
            </div>
            <p style="color: #444; font-size: 12px; margin: 0; text-align: right">
              <van-field
                class="mobile-input"
                v-model="item.collectionOptionList[0].collectionOption"
                autosize
                readonly
                type="textarea" />
            </p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell z-cells" v-if="item.answerType == 'date'">
            <van-cell>
              <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
            </van-cell>
            <div class="selesetText">
              <p class="mg0">{{ item.answerValue }}</p>
            </div>
            <p style="color: #444; font-size: 12px; margin: 0; text-align: right">
              <van-field
                class="mobile-input"
                v-model="item.collectionOptionList[0].collectionOption"
                autosize
                readonly
                type="textarea" />
            </p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell z-cells" v-if="item.answerType == 'sm'">
            <van-cell>
              <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
            </van-cell>
            <div class="selesetText">
              <div style="font-size: 14px" v-if="item.collectionOptionList[0].answerValue">
                <div v-if="item.success" style="color: green">
                  <p>系统资产编码：{{ item.equipmentCode1 }}</p>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;条形码编码：{{ item.equipmentCode2 }}</p>
                  <span style="float: right; margin-top: -48px"
                    ><van-icon name="passed" size="16" />&nbsp;一致</span
                  >
                </div>
                <div v-if="!item.success" style="color: red">
                  <p>系统资产编码：{{ item.equipmentCode1 }}</p>
                  <p>&nbsp;&nbsp;&nbsp;&nbsp;条形码编码：{{ item.equipmentCode2 }}</p>
                  <span style="float: right; margin-top: -48px"
                    ><van-icon name="close" size="16" />&nbsp;不一致</span
                  >
                </div>
              </div>
            </div>
            <p
              style="color: #444; font-size: 12px; margin: 0; text-align: right"
              v-if="item.collectionOptionList[0].collectionOption">
              <van-field
                class="mobile-input"
                v-model="item.collectionOptionList[0].collectionOption"
                autosize
                readonly
                type="textarea" />
            </p>
            <delete-upload-img :imgs="item.fileInfoList"></delete-upload-img>
          </div>
          <div class="formLabel z-cell z-cells" v-if="item.answerType == 'duox'">
            <van-cell>
              <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
            </van-cell>
            <div class="selesetText">
              <p class="mg0" v-for="(item1, index1) in item.collectionOptionList" :key="index1">
                <span v-if="item1.isCheck == 1">{{ item1.collectionOption }}</span>
              </p>
            </div>
            <!--<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 z-cells" v-if="item.answerType == 'dx'">
            <van-cell>
              <template #title> {{ index + 1 }}.{{ item.collectionName }} </template>
            </van-cell>
            <div class="selesetText">
              <p class="mg0" v-for="(item2, index2) in item.collectionOptionList" :key="index2">
                <span v-if="item2.isCheck == 1">{{ item2.collectionOption }}</span>
              </p>
            </div>
            <!--<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>
        <!-- SKU识别 -->
        <!-- 生动化陈列 sku -->
        <template v-if="photoSkuImgSummaryeList && photoSkuImgSummaryeList.length">
          <div class="skuNum" style="padding: 10px 0">
            SKU识别：{{ photoSkuImgSummaryeList.length }}个
          </div>
          <el-table
            :data="photoSkuImgSummaryeList"
            style="width: 100%; border-radius: 10px"
            border
            class="table-headermd">
            <el-table-column label="SKU名称" prop="name" width="180" align="center">
              <template slot-scope="scope">
                <span class="tipTitle">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="数量" prop="count" align="center"></el-table-column>
          </el-table>
        </template>
      </van-form>
    </div>
    <van-dialog v-model="listShow" title="历史回显" show-cancel-button :showConfirmButton="false">
      <div style="border: 1px solid #eee; margin-top: 18px">
        <div class="itenHhistory" v-for="item in list">
          <p>内容：{{ item.answerValue }}</p>
          <p>拜访人：{{ item.nickName }}</p>
          <p>拜访时间：{{ item.createTime }}</p>
        </div>
      </div>
    </van-dialog>
    <br />
  </div>
</template>

<script>
import { getCollectionShowHistory, getPhotoTypeList, getVisitsDetail } from '@/api/index';
import deleteUploadImg from '@/components/deleteUploadImg';

export default {
  name: 'abnormalVisit',
  components: { deleteUploadImg },
  data() {
    return {
      value: '',
      sdsd: false,
      showPicker: false,
      logshow: false,
      imgs: [],
      checkboxGroup: [],
      listShow: false,
      showCode: false,
      deviceCode: '',
      list: [],
      radio: '',
      uploadid2: 'uploadid2',
      collectionItemList: [],
      rdId: '',
      show: false,
      PhotoTypeList: [],
      PhotoType: '',
      PhotoTypeText: '',
      indexselect: 0,
      visitId: '',
      storeGroupId: '',
      taskId: '',
      collectionId: '',
      storeId: '',
      collectionAnswerlisd: [],
      tableData1: [],
      taskType: 1,
      flag: false,
      indeximg: '',
      checkShow: false,
      infoData: {},
      putInCode: '',
      photoSkuImgSummaryeList: [],
    };
  },
  activated() {
    this.taskType = 1;
    this.tableData1 = [];
    this.collectionItemList = [];
    this.taskType = this.$route.query.taskType;
    this.PhotoType = this.$route.query.photoType;
    this.visitId = this.$route.query.visitId + '';
    this.taskId = this.$route.query.taskId + '';
    this.storeId = this.$route.query.storeId + '';
    this.storeGroupId = this.$route.query.storeGroupId + '';
    if (this.$route.query.photoType != null) {
      this.indexselect = 0;
    } else {
      this.indexselect = 1;
    }
    this.getPhotoTypeList();
    this.info();
  },
  methods: {
    objectSpanMethod({ row, column, rowIndex, columnIndex }) {
      const cellValue = row[column.property];
      if (cellValue && ['signDictype'].includes(column.property)) {
        const prevRow = this.tableData1[rowIndex - 1];
        let nextRow = this.tableData1[rowIndex + 1];
        if (prevRow && prevRow[column.property] === cellValue) {
          return { rowspan: 0, colspan: 0 };
        } else {
          let countRowspan = 1;
          while (nextRow && nextRow[column.property] === cellValue) {
            nextRow = this.tableData1[++countRowspan + rowIndex];
          }
          if (countRowspan > 1) {
            return { rowspan: countRowspan, colspan: 1 };
          }
        }
      }
    },
    // 历史回显
    getCollectionShowHistory(id) {
      getCollectionShowHistory({
        storeId: this.infoData.storeId,
        collectionId: id.collectionId,
        visitsId: this.$route.query.visitId,
        storeGroupId: this.$route.query.storeGroupId,
        taskId: this.$route.query.taskId,
      }).then((res) => {
        if (res.data.length > 0) {
          this.list = res.data;
          this.listShow = true;
        } else {
          this.$toast('暂无历史信息');
        }
      });
    },
    checkFn(val) {
      var arrc = [];
      for (var cl = 0; cl < val.length; cl++) {
        if (val[cl].isCheck == '1') {
          arrc.push(val[cl].collectionOption);
        }
      }
      return arrc.join(',');
    },
    info() {
      this.toastLoading(0, '加载中...', true);
      getVisitsDetail({ visitsId: this.visitId }).then((res) => {
        this.toastLoading().clear();
        this.infoData = res.data;
        var collectionItemLists = res.data.sfaTaskList[this.$route.query.ids].collectionItemList;
        this.photoSkuImgSummaryeList =
          res.data.sfaTaskList[this.$route.query.ids].photoSkuImgSummaryeList;
        if (res.data.sfaTaskList[this.$route.query.ids].checkUnManage == 'Y') {
          this.checkShow = true;
        } else {
          this.checkShow = false;
        }
        // this.deviceCode=res.data.deviceCode;
        // this.putInCode=res.data.putInCode;
        this.deviceCode = res.data.sfaTaskList[this.$route.query.ids].deviceCode || ''; // 设备编号
        this.putInCode = res.data.sfaTaskList[this.$route.query.ids].putInCode || ''; // 投放编号
        if (res.data.sfaTaskList[this.$route.query.ids].inspectionType == 'buy') {
          this.showCode = true;
        } else {
          this.showCode = false;
        }
        if (this.$route.query.taskType == 1) {
          for (var q = 0; q < collectionItemLists.length; q++) {
            if (
              collectionItemLists[q].answerType == 'sz' ||
              collectionItemLists[q].answerType == 'wb' ||
              collectionItemLists[q].answerType == 'tel' ||
              collectionItemLists[q].answerType == 'date'
            ) {
              collectionItemLists[q].answerValue =
                collectionItemLists[q].collectionOptionList[0].answerValue;
            }
            if (collectionItemLists[q].answerType == 'sm') {
              collectionItemLists[q].success = false;
              if (
                collectionItemLists[q].collectionOptionList[0].answerValue != null &&
                collectionItemLists[q].collectionOptionList[0].answerValue != ''
              ) {
                collectionItemLists[q].equipmentCode2 =
                  collectionItemLists[q].collectionOptionList[0].answerValue.split(',')[1];
                if (
                  collectionItemLists[q].collectionOptionList[0].answerValue.split(',')[0] != 'null'
                ) {
                  collectionItemLists[q].equipmentCode1 =
                    collectionItemLists[q].collectionOptionList[0].answerValue.split(',')[0];
                } else {
                  collectionItemLists[q].equipmentCode1 = '编码不存在';
                }
                if (
                  collectionItemLists[q].collectionOptionList[0].answerValue.split(',')[0] ==
                  collectionItemLists[q].collectionOptionList[0].answerValue.split(',')[1]
                ) {
                  collectionItemLists[q].success = true;
                }
              }
            }
            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;
        } else {
          for (var f = 0; f < collectionItemLists.length; f++) {
            var collectionOptionListarr = collectionItemLists[f].collectionOptionList;
            for (var ff = 0; ff < collectionOptionListarr.length; ff++) {
              if (ff == '0') {
                collectionItemLists[f].xdjhyj = collectionOptionListarr[ff].answerValue;
                collectionItemLists[f].value = collectionOptionListarr[ff].answerValue;
              }
              if (ff == '1') {
                collectionItemLists[f].xdjhchjj = collectionOptionListarr[ff].answerValue;
              }
              if (ff == '2') {
                collectionItemLists[f].ygnhj = collectionOptionListarr[ff].answerValue;
              }
            }
          }
          this.tableData1 = collectionItemLists;
        }
      });
    },
    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;
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    tipTitle(val) {
      this.$toast(val);
    },
  },
};
</script>
<style scoped>
.container {
  background-color: white;
}

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

.formLabel {
  margin: 0 16px;
  padding-bottom: 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-cell .van-cell__title {
  font-size: 16px;
}
.deviceCode {
  font-size: 16px;
  padding: 12px;
  background-color: white;
  margin: 0 12px;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
}
.vertical {
  background-color: #2b2f3a;
  height: 14px;
  width: 8px;
  border-radius: 40px;
  position: absolute;
  left: -3px;
  top: 50px;
}
</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>
<style>
.containert .van-cell__title {
  overflow: auto;
  height: auto;
}
.mobile-input .van-field__control {
  font-size: 12px;
  color: #999;
  border: 0;
}
.formLabel .mobile-input {
  border: 0 !important;
}
</style>