拜访历史 任务展示优化

src/views/agentList/visitHistoryDetail.vue

@@ -55,19 +55,36 @@
           v-for="(item, index) in list.sfaTaskList"
           :key="index"
           @click="historiStoreVisit(item, index)">
-          <p
+          <div
             style="
-              width: 94%;
+              width: 100%;
               margin: 0;
               line-height: 24px;
               padding: 10px 0;
-              display: inline-block;
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
             ">
-            {{ item.taskName }}
-          </p>
-          <p class="arrowdetils1">
-            <van-icon name="arrow" />
-          </p>
+            <div
+              class="taskName"
+              style="flex: 1; font-weight: bold; color: #4a4a4a; font-size: 16px">
+              {{ item.taskName }}
+            </div>
+            <div class="arrowdetils1">
+              <van-icon name="arrow" />
+            </div>
+          </div>
+          <div class="infoContent">
+            <visitedTaskDetailMobile
+              :taskType="item.taskType"
+              :visitId="list.id"
+              :taskId="item.taskId"
+              :chainId="item.chainsId"
+              :storeGroupId="list.storeGroupId"
+              :visitsDetailData="item"
+              v-if="item.collectionItemList.length" />
+            <van-empty v-else />
+          </div>
         </div>
       </div>
       <div v-if="list.visitSource == 2" style="background-color: #fff">
@@ -119,10 +136,11 @@
 import deleteUploadImg from '@/components/deleteUploadImg';
 import { getPhotoTypeList1, insertVisitRemark, getListHistoryList } from '@/api/index';
 import { getVisitsDetail } from '@/api/agentList';
+import visitedTaskDetailMobile from './visitedTaskDetailMobile';
 
 export default {
   name: 'visitHistoryDetail',
-  components: { deleteUploadImg },
+  components: { deleteUploadImg, visitedTaskDetailMobile },
   data() {
     return {
       userShow: false,
@@ -284,6 +302,7 @@ export default {
       });
     },
     historiStoreVisit(val, index) {
+      return;
       this.$router.push({
         path: '/visitedTaskDetail',
         query: {
@@ -294,7 +313,6 @@ export default {
           chainId: val.chainsId,
           storeGroupId: this.list.storeGroupId,
           activatedIndex: index,
-          taskType: val.taskType,
         },
       });
       sessionStorage.setItem('collectionItemList', JSON.stringify(val.collectionItemList));
@@ -361,11 +379,11 @@ export default {
     }
     .arrowdetils1 {
       background: #fff;
-      position: absolute;
-      top: 50%;
+      // position: absolute;
+      // top: 50%;
       color: #444;
-      right: 0;
-      margin-top: -22px;
+      // right: 0;
+      // margin-top: -22px;
     }
   }
 }

src/views/agentList/visitedTaskDetailMobile.vue

@@ -0,0 +1,646 @@
+<template>
+  <div class="visitedTaskDetail">
+    <!-- <van-nav-bar class="navBar" title="拜访任务详情" left-arrow @click-left="onClickLeft" /> -->
+    <!-- <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="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"
+              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 == '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"
+              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 == '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"
+              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 == '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"
+              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 == '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>
+      </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 deleteUploadImg from '@/components/deleteUploadImg';
+import { getVisitsDetail, getCollectionShowHistory } from '@/api/agentList';
+
+export default {
+  name: 'visitedTaskDetail',
+  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: [],
+      PhotoTypeText: '',
+      indexselect: 0,
+      collectionId: '',
+      collectionAnswerlisd: [],
+      tableData1: [],
+      flag: false,
+      indeximg: '',
+      checkShow: false,
+      infoData: {},
+      putInCode: '',
+    };
+  },
+  props: {
+    taskType: {
+      type: [String, Number],
+    },
+    visitId: {
+      type: [String, Number],
+    },
+    taskId: {
+      type: [String, Number],
+      default: '',
+    },
+    chainId: {
+      type: String,
+      default: '',
+    },
+    storeGroupId: {
+      type: String,
+      default: '',
+    },
+    visitsDetailData: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+  },
+  created() {
+    if (this.photoType != null) {
+      this.indexselect = 0;
+    } else {
+      this.indexselect = 1;
+    }
+    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({
+        chainId: this.chainId,
+        collectionId: id.collectionId,
+        visitsId: this.visitId,
+        storeGroupId: this.storeGroupId,
+        taskId: this.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() {
+      //   getVisitsDetail({ visitsId: this.visitId }).then((res) => {
+      // this.infoData = res.data;
+      var collectionItemLists = this.visitsDetailData.collectionItemList;
+      if (this.visitsDetailData.checkUnManage == 'Y') {
+        this.checkShow = true;
+      } else {
+        this.checkShow = false;
+      }
+      this.deviceCode = this.visitsDetailData.deviceCode || ''; // 设备编号
+      this.putInCode = this.visitsDetailData.putInCode || ''; // 投放编号
+      if (this.visitsDetailData.inspectionType == 'buy') {
+        this.showCode = true;
+      } else {
+        this.showCode = false;
+      }
+      if (this.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;
+      }
+      //   });
+    },
+    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>