|
|
@@ -0,0 +1,450 @@
|
|
|
+<template>
|
|
|
+ <div class="perfectStoreTask">
|
|
|
+ <van-nav-bar class="navBar" left-arrow title="生动化陈列" @click-left="onClickLeft">
|
|
|
+ <template #right>
|
|
|
+ <span
|
|
|
+ v-if="isEdit && insert == '1'"
|
|
|
+ @click="onSubmit"
|
|
|
+ style="
|
|
|
+ color: white;
|
|
|
+ background: rgb(0, 87, 186);
|
|
|
+ display: block;
|
|
|
+ padding: 6px 10px;
|
|
|
+ border-radius: 6px;
|
|
|
+ "
|
|
|
+ >保存</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="content" v-if="formData">
|
|
|
+ <div class="container">
|
|
|
+ <van-form ref="tabstoreVal">
|
|
|
+ <div v-for="(item, index) in formData.collectionItemList" :key="index">
|
|
|
+ <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> -->
|
|
|
+ <div class="headline">
|
|
|
+ <span class="headlineIcon"></span>
|
|
|
+ <span class="headlineTitle">{{ item.taskName }}</span>
|
|
|
+ </div>
|
|
|
+ <!-- 操作说明图片和电话 -->
|
|
|
+ <taskTips
|
|
|
+ v-if="item.contactPhone || item.examplePhoto"
|
|
|
+ :contactPhone="item.contactPhone"
|
|
|
+ :examplePhoto="item.examplePhoto">
|
|
|
+ </taskTips>
|
|
|
+ </template>
|
|
|
+ </van-cell>
|
|
|
+ <deleteUploadImg
|
|
|
+ :imgs="item.fileInfoList"
|
|
|
+ :storeGroupId="storeGroupId"
|
|
|
+ :taskIds="taskIds"
|
|
|
+ :visitsId="visitsId"
|
|
|
+ :collectionItemId="item.collectionId"
|
|
|
+ :putInCode="formData.putInCode"
|
|
|
+ :photoIdentifyType="formData.photoIdentifyType"
|
|
|
+ @upDataDetail="getDetaile"
|
|
|
+ :pictureSource="item.pictureSource"
|
|
|
+ :continuousShoot="item.continuousShoot"
|
|
|
+ :insert="insert"
|
|
|
+ :objectType="objectType"
|
|
|
+ v-if="item.fileInfoList.length"></deleteUploadImg>
|
|
|
+ <span v-else>暂未识别到产品照片</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </van-form>
|
|
|
+ </div>
|
|
|
+ <div class="skuDeatil">
|
|
|
+ <div class="headline" style="margin-top: 10px">
|
|
|
+ <span class="headlineIcon"></span>
|
|
|
+ <span class="headlineTitle">SKU图像识别结果：个</span>
|
|
|
+ </div>
|
|
|
+ <el-table
|
|
|
+ :data="taskPhotoRecognitionResult"
|
|
|
+ border
|
|
|
+ class="table-headermd1"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column label="" type="index" width="50px" align="center" />
|
|
|
+ <el-table-column label="产品" prop="skuProductName" align="center" />
|
|
|
+ <el-table-column label="要求" prop="conditionIdentifyNum" align="center" width="60px">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="排面数"
|
|
|
+ prop="identifyTheNumberOfCards"
|
|
|
+ width="70px"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :style="{ color: scope.row.meetTheStandard == 1 ? '#07c160' : 'red' }">
|
|
|
+ {{ scope.row.identifyTheNumberOfCards }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <div class="dataList" v-if="dataList">
|
|
|
+ <div class="headline" style="margin-top: 10px">
|
|
|
+ <span class="headlineIcon"></span>
|
|
|
+ <span class="headlineTitle">陈列任务要求</span>
|
|
|
+ </div>
|
|
|
+ <div class="dataItem" v-for="(item, index) in dataList">
|
|
|
+ <div class="itemTop">
|
|
|
+ <div class="itemIndex">
|
|
|
+ <p>{{ index + 1 }}、</p>
|
|
|
+ </div>
|
|
|
+ <div class="itemHtml" v-html="item.displayInstructions"></div>
|
|
|
+ </div>
|
|
|
+ <div class="itemBottom" v-if="insert == '0'">
|
|
|
+ <img
|
|
|
+ @click="openDialog(item)"
|
|
|
+ :src="
|
|
|
+ item.taskPhotoConditionPassed == 1
|
|
|
+ ? require('@/assets/taskPhotoSu.png')
|
|
|
+ : require('@/assets/taskPhotoErr.png')
|
|
|
+ " />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-dialog
|
|
|
+ title="识别结果"
|
|
|
+ :visible.sync="vanPopup"
|
|
|
+ width="80%"
|
|
|
+ :append-to-body="true"
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ @close="vanPopup == false"
|
|
|
+ custom-class="identifyResultdialog">
|
|
|
+ <!-- 识别结果 -->
|
|
|
+ <div class="identifyResult" v-if="taskPhotoRecognitionResult" style="padding: 0 10px">
|
|
|
+ <div class="resultContent">
|
|
|
+ <el-table
|
|
|
+ :data="taskPhotoRecognitionResult"
|
|
|
+ border
|
|
|
+ class="table-headermd1"
|
|
|
+ style="width: 100%">
|
|
|
+ <el-table-column label="" type="index" width="50px" align="center" />
|
|
|
+ <el-table-column label="产品" prop="skuProductName" align="center" />
|
|
|
+ <el-table-column label="要求" prop="conditionIdentifyNum" align="center" width="60px">
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="识别排面数"
|
|
|
+ prop="identifyTheNumberOfCards"
|
|
|
+ width="70px"
|
|
|
+ align="center">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <span :style="{ color: scope.row.meetTheStandard == 1 ? '#07c160' : 'red' }">
|
|
|
+ {{ scope.row.identifyTheNumberOfCards }}
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { getCollectionInfosBatch, addCollectionAnswerBatch, getVisitsDetail } from '@/api/index';
|
|
|
+import taskTips from '@/views/deviceWithin/taskTips';
|
|
|
+import deleteUploadImg from '@/components/deleteUploadImgTaskPhoto';
|
|
|
+export default {
|
|
|
+ name: 'abnortaskPhotoTakingmalVisit',
|
|
|
+ components: { taskTips, deleteUploadImg },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isEdit: true,
|
|
|
+ formData: null,
|
|
|
+ dataList: null,
|
|
|
+ taskIds: [],
|
|
|
+ visitsId: null,
|
|
|
+ storeGroupId: '',
|
|
|
+ objectType: '',
|
|
|
+ insert: '',
|
|
|
+ vanPopup: false,
|
|
|
+ taskPhotoRecognitionResult: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.taskIds = this.$route.query.taskIds || [];
|
|
|
+ this.visitsId = this.$route.query.visitsId || '';
|
|
|
+ this.storeGroupId = this.$route.query.storeGroupId || '';
|
|
|
+ this.objectType = this.$route.query.photoType || '';
|
|
|
+ this.insert = this.$route.query.insert;
|
|
|
+ if (this.$route.query.source == 'historicalDetails') {
|
|
|
+ this.getVisitsDetailFun();
|
|
|
+ } else {
|
|
|
+ this.getDetaile();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getVisitsDetailFun() {
|
|
|
+ this.toastLoading(0, '加载中...', true);
|
|
|
+ getVisitsDetail({ visitsId: this.visitsId }).then((res) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ if (res.data.sfaTaskList) {
|
|
|
+ this.dataList = res.data.sfaTaskList.filter((val) => val.taskType == '5');
|
|
|
+ this.formData = this.dataList[0];
|
|
|
+ } else {
|
|
|
+ this.formData = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getDetaile() {
|
|
|
+ console.log(this.$route.query);
|
|
|
+ getCollectionInfosBatch({
|
|
|
+ storeCode: this.$route.query.storeCode,
|
|
|
+ insert: this.insert == '1' ? true : false,
|
|
|
+ id: this.visitsId,
|
|
|
+ taskIds: this.taskIds.split(','),
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ this.dataList = res.data;
|
|
|
+ this.formData = res.data[0];
|
|
|
+ } else {
|
|
|
+ this.formData = null;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ openDialog(item) {
|
|
|
+ this.vanPopup = true;
|
|
|
+ this.taskPhotoRecognitionResult = item.taskPhotoRecognitionResult;
|
|
|
+ },
|
|
|
+ onSubmit() {
|
|
|
+ let formData = {
|
|
|
+ storeId: this.$route.query.storeId,
|
|
|
+ storeCode: this.$route.query.storeCode,
|
|
|
+ storeGroupId: this.$route.query.storeGroupId,
|
|
|
+ visitsId: this.visitsId,
|
|
|
+ taskList: this.taskIds.split(',').map((val) => Number(val)),
|
|
|
+ insert: true,
|
|
|
+ collectionAnswers: [],
|
|
|
+ checkUnManage: 'N',
|
|
|
+ deviceCode: '',
|
|
|
+ putInCode: '',
|
|
|
+ equipmentCode: '',
|
|
|
+ };
|
|
|
+ addCollectionAnswerBatch(formData).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ localStorage.setItem('getRequestFlage', 'true');
|
|
|
+ this.$router.go(-1);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onClickLeft() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.perfectStoreTask {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ overflow: hidden;
|
|
|
+ .content {
|
|
|
+ padding: 10px;
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 46px;
|
|
|
+ .container {
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 6px;
|
|
|
+ // padding: 10px;
|
|
|
+ padding: 0 10px 10px 0px;
|
|
|
+ }
|
|
|
+ .formLabel {
|
|
|
+ // margin-left: 20px;
|
|
|
+ // 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-cell .van-cell__title {
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ .van-f-red {
|
|
|
+ color: red;
|
|
|
+ width: 8px;
|
|
|
+ display: inline-block;
|
|
|
+ line-height: 26px;
|
|
|
+ }
|
|
|
+ .headline {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .headlineIcon {
|
|
|
+ display: inline-block;
|
|
|
+ position: absolute;
|
|
|
+ width: 3px;
|
|
|
+ height: 60%;
|
|
|
+ background: #3875c6;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+ .headlineTitle {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 0px 20px;
|
|
|
+ background: #eef5ff;
|
|
|
+ border-radius: 0 18px 18px 0;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .dataList {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ overflow-y: auto;
|
|
|
+ background: #fff;
|
|
|
+ .dataItem {
|
|
|
+ display: flex;
|
|
|
+ // border-radius: 6px;
|
|
|
+ flex-direction: row;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ // padding: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-left: 20px;
|
|
|
+ border-bottom: 1px solid #e2e1e1;
|
|
|
+ .itemIndex {
|
|
|
+ }
|
|
|
+ .itemTop {
|
|
|
+ flex: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ .itemHtml {
|
|
|
+ overflow-x: auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .itemTop,
|
|
|
+ .itemBottom {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ .itemBottom {
|
|
|
+ align-items: center;
|
|
|
+ width: 35px;
|
|
|
+ margin-left: 5px;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tableTitle {
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #f5f5f5;
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+// .perfectStoreTask {
|
|
|
+// .itenHtml {
|
|
|
+// overflow: hidden;
|
|
|
+// img {
|
|
|
+// width: 100%;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// }
|
|
|
+.identifyResultdialog {
|
|
|
+ width: vw(690) !important;
|
|
|
+ margin-top: 1vh !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ font-size: vw(32) !important;
|
|
|
+ height: 70% !important;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .el-dialog__headerbtn {
|
|
|
+ width: vw(44);
|
|
|
+ height: vw(44);
|
|
|
+ background-color: #e1e1e1;
|
|
|
+ border-radius: 50%;
|
|
|
+ margin-top: -3px;
|
|
|
+ }
|
|
|
+ .el-dialog__body {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+}
|
|
|
+.table-headermd1 {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ position: initial;
|
|
|
+ width: 98% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-right: 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ th {
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-table__cell {
|
|
|
+ padding: 6px 0 !important;
|
|
|
+ .cell {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.skuDeatil {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ .table-headermd1 {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ position: initial;
|
|
|
+ width: 98% !important;
|
|
|
+ margin: 0 auto;
|
|
|
+ border-right: 0;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-top: 10px;
|
|
|
+ th {
|
|
|
+ color: #000;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-table__cell {
|
|
|
+ padding: 6px 0 !important;
|
|
|
+ .cell {
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-headermd1 th.el-table__cell {
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
