|
|
@@ -0,0 +1,349 @@
|
|
|
+<template>
|
|
|
+ <div class="perfectStoreSku">
|
|
|
+ <van-nav-bar class="navBar" title="拜访任务详情" left-arrow @click-left="onClickLeft">
|
|
|
+ <template #right>
|
|
|
+ <!-- <van-button
|
|
|
+ style="height: 30px; padding: 5px; border-radius: 5px"
|
|
|
+ type="info"
|
|
|
+ v-if="detail && detail.skuPhotoIdentifyId"
|
|
|
+ @click="clickFeedbackShow"
|
|
|
+ >识别异常反馈</van-button
|
|
|
+ > -->
|
|
|
+ </template>
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="content" v-if="detail">
|
|
|
+ <div class="container">
|
|
|
+ <div class="headline">
|
|
|
+ <span class="headlineIcon"></span>
|
|
|
+ <span class="headlineTitle">生动化陈列</span>
|
|
|
+ </div>
|
|
|
+ <div class="tipsTitle" style="padding: 10px">
|
|
|
+ 目前识别桶装和战略产品合计106个，后续会增加识别产品数
|
|
|
+ </div>
|
|
|
+ <div style="padding: 10px">
|
|
|
+ <van-row gutter="10">
|
|
|
+ <van-col span="4" v-for="(urls, index) in detail.fileUrlList" :key="index">
|
|
|
+ <div class="img-box">
|
|
|
+ <img :src="urls" @click="previewsImg(index)" />
|
|
|
+ </div>
|
|
|
+ </van-col>
|
|
|
+ </van-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="skuDeatil" v-if="detail.skuList">
|
|
|
+ <div class="headline" style="margin-top: 10px">
|
|
|
+ <span class="headlineIcon"></span>
|
|
|
+ <span class="headlineTitle">SKU图像识别结果：{{ detail.skuTotal }}个</span>
|
|
|
+ </div>
|
|
|
+ <!-- <div class="tableTitle">SKU图像识别结果：{{ detail.skuTotal }}个</div> -->
|
|
|
+ <el-table
|
|
|
+ :data="detail.skuList"
|
|
|
+ style="width: 100%; border-radius: 10px"
|
|
|
+ border
|
|
|
+ class="table-headermd1">
|
|
|
+ <el-table-column label="序号" type="index" align="center" width="40"> </el-table-column>
|
|
|
+ <el-table-column
|
|
|
+ label="品类"
|
|
|
+ prop="skuProductType"
|
|
|
+ align="center"
|
|
|
+ width="60"></el-table-column>
|
|
|
+ <el-table-column label="SKU名称" prop="name" 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" width="50"></el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 返回历史 -->
|
|
|
+ <!-- <div class="feedbackHistorical" v-if="detail.feedbackList.length">
|
|
|
+ <div class="tableTitle">识别异常反馈</div>
|
|
|
+ <div class="historicalContent">
|
|
|
+ <div class="rejectMsgItem" v-for="(item, index) in detail.feedbackList" :key="index">
|
|
|
+ <div class="item approver">
|
|
|
+ <span class="label">反馈人：</span>
|
|
|
+ <span class="value">{{ item.nickName }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item approvalTime">
|
|
|
+ <span class="label">反馈时间：</span>
|
|
|
+ <span class="value">{{ item.createTime }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="item rejectCause">
|
|
|
+ <span class="label">反馈内容：</span>
|
|
|
+ <span class="value">{{ item.feedbackContent }}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
+ <!-- 识别异常反馈 -->
|
|
|
+ <van-popup v-model="feedbackShow" round class="feedbackMsgBox" :close-on-click-overlay="false">
|
|
|
+ <div class="feedbackTitle">SKU图像识别结果异常反馈</div>
|
|
|
+ <div class="feedbackContent">
|
|
|
+ <van-field
|
|
|
+ v-model="feedbackMessage"
|
|
|
+ rows="2"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ :formatter="formatter"
|
|
|
+ placeholder="若识别SKU有遗漏、缺失，请在此反馈，本部会根据实际情况优化模型，谢谢！" />
|
|
|
+ </div>
|
|
|
+ <div class="btnBox">
|
|
|
+ <van-button type="info" plain @click="feedbackShow = false">取消</van-button>
|
|
|
+ <van-button type="info" @click="feedbackSubmit">提交</van-button>
|
|
|
+ </div>
|
|
|
+ </van-popup>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import deleteUploadImg from '@/components/deleteUploadImg';
|
|
|
+import { photoSkuImgSummary, photoSkuFeedback } from '@/api/historicalVisit.js';
|
|
|
+import { ImagePreview } from 'vant';
|
|
|
+export default {
|
|
|
+ name: 'perfectStoreSku',
|
|
|
+ components: { deleteUploadImg },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ visitsId: '',
|
|
|
+ detail: null,
|
|
|
+ feedbackShow: false,
|
|
|
+ feedbackMessage: '', //反馈内容
|
|
|
+ };
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.visitsId = this.$route.query.visitId || '';
|
|
|
+ this.detail = null;
|
|
|
+ this.getDetail();
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getDetail() {
|
|
|
+ this.toastLoading(0, '加载中...', true);
|
|
|
+ photoSkuImgSummary({ visitsId: this.visitsId })
|
|
|
+ .then((res) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.detail = res.data;
|
|
|
+ } else {
|
|
|
+ this.$dialog.alert({
|
|
|
+ message: res.msg,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch((err) => {
|
|
|
+ this.$dialog.alert({
|
|
|
+ message: err.msg,
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 提交反馈
|
|
|
+ feedbackSubmit() {
|
|
|
+ if (this.feedbackMessage == '') {
|
|
|
+ this.$toast('请输入反馈意见！');
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ photoSkuFeedback({
|
|
|
+ photoIdentifyId: this.detail.skuPhotoIdentifyId, //long sku识别信息id
|
|
|
+ feedbackContent: this.feedbackMessage, //string 内容
|
|
|
+ }).then((res) => {
|
|
|
+ this.feedbackShow = false;
|
|
|
+ this.getDetail();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ previewsImg(index) {
|
|
|
+ ImagePreview({
|
|
|
+ images: this.detail.fileUrlList,
|
|
|
+ startPosition: index,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ 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,
|
|
|
+ '',
|
|
|
+ );
|
|
|
+ },
|
|
|
+ clickFeedbackShow() {
|
|
|
+ this.feedbackMessage = '';
|
|
|
+ this.feedbackShow = true;
|
|
|
+ },
|
|
|
+ onClickLeft() {
|
|
|
+ this.$router.go(-1);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.perfectStoreSku {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .content {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ // background: #fff;
|
|
|
+ padding: 10px 15px;
|
|
|
+ // margin-top: 10px;
|
|
|
+ .container {
|
|
|
+ background: #fff;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 6px;
|
|
|
+ // padding: 10px;
|
|
|
+ padding: 0 10px 10px 0px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 16px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .tipsTitle {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ }
|
|
|
+ .tableTitle {
|
|
|
+ padding: 10px 0;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ background: #f5f5f5;
|
|
|
+ margin: 15px 0;
|
|
|
+ }
|
|
|
+ .skuDeatil {
|
|
|
+ }
|
|
|
+ .feedbackHistorical {
|
|
|
+ .historicalContent {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ .rejectMsgItem {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ padding: 10px;
|
|
|
+ .item {
|
|
|
+ padding: 5px 0;
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .label {
|
|
|
+ width: 80px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .img-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 50px;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ border-radius: 6px;
|
|
|
+ overflow: hidden;
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .feedbackMsgBox {
|
|
|
+ min-height: 30%;
|
|
|
+ width: 90%;
|
|
|
+ padding: 10px 20px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .feedbackTitle {
|
|
|
+ padding: 10px 0;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600px;
|
|
|
+ }
|
|
|
+ .feedbackContent {
|
|
|
+ flex: 1;
|
|
|
+ overflow-y: auto;
|
|
|
+ .van-field__control {
|
|
|
+ color: #666 !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .btnBox {
|
|
|
+ margin-bottom: 10px;
|
|
|
+ height: 44px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ button {
|
|
|
+ width: 45%;
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .headline {
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 10px;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.skuDeatil {
|
|
|
+ width: 100%;
|
|
|
+ margin-top: 10px;
|
|
|
+ background: #fff;
|
|
|
+ border-radius: 6px;
|
|
|
+ .table-headermd1 {
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
+ position: initial;
|
|
|
+ width: 96% !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;
|
|
|
+ }
|
|
|
+}
|
|
|
+.feedbackMsgBox {
|
|
|
+ .van-cell {
|
|
|
+ border: 1px solid #ccc;
|
|
|
+ }
|
|
|
+ .van-field__control {
|
|
|
+ color: #666;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
