|
|
@@ -0,0 +1,248 @@
|
|
|
+<template>
|
|
|
+ <div class="AIImageDetail" v-if="data">
|
|
|
+ <van-nav-bar class="navBar" title="异常反馈" left-arrow @click-left="onClickLeft">
|
|
|
+ </van-nav-bar>
|
|
|
+ <div class="message">
|
|
|
+ <div class="storeTitle">
|
|
|
+ <div class="storeName">{{ data.storeName }}</div>
|
|
|
+ <div class="storeCode" style="margin-left: 5px; margin-top: 2px">
|
|
|
+ (<span style="color: #0057ba; vertical-align: -1px">{{ data.storeCode }}</span
|
|
|
+ >)
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">门店类型：</div>
|
|
|
+ <div class="value">{{ data.storeCategoryName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">地址：</div>
|
|
|
+ <div class="value">{{ data.addressLine }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">拜访人：</div>
|
|
|
+ <div class="value">{{ data.visitUserNickName }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">拜访时间：</div>
|
|
|
+ <div class="value">{{ data.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">拍摄类型：</div>
|
|
|
+ <div class="value">{{ data.identifyType | filterType }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item" style="color: red">
|
|
|
+ <div class="label">识别结果：</div>
|
|
|
+ <div class="value">{{ data.unqualifiedReason }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item">
|
|
|
+ <div class="label">业务员反馈AI识别不正确：{{ data.feedbackMessage || '未反馈' }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="item" style="display: flex; justify-content: center">
|
|
|
+ <van-image
|
|
|
+ v-if="data.fileUrl"
|
|
|
+ height="400px"
|
|
|
+ :src="data.fileUrl"
|
|
|
+ @click="previewImgs(data.fileUrl)"
|
|
|
+ fit="contain">
|
|
|
+ <template v-slot:loading>
|
|
|
+ <van-loading type="spinner" size="40" />
|
|
|
+ </template>
|
|
|
+ </van-image>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="titleText">请主管了解情况后回复原因及解决方案</p>
|
|
|
+ <div class="feedbackReason">
|
|
|
+ <div class="result">
|
|
|
+ <div class="title">
|
|
|
+ <span style="color: red">*</span>
|
|
|
+ <span>AI识别结果</span>
|
|
|
+ </div>
|
|
|
+ <van-radio-group v-model="AIResult" :disabled="approveState == '1'">
|
|
|
+ <van-radio name="1">正确</van-radio>
|
|
|
+ <van-radio name="0">不正确</van-radio>
|
|
|
+ </van-radio-group>
|
|
|
+ </div>
|
|
|
+ <div class="cause">
|
|
|
+ <div class="title">
|
|
|
+ <span style="color: red">*</span>
|
|
|
+ <span>{{ causeTitle }}</span>
|
|
|
+ </div>
|
|
|
+ <van-field
|
|
|
+ v-model="causeMessage"
|
|
|
+ :disabled="approveState == '1'"
|
|
|
+ rows="1"
|
|
|
+ autosize
|
|
|
+ type="textarea"
|
|
|
+ :placeholder="'请输入' + causeTitle" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="confirmBtn" v-if="approveState == '0'">
|
|
|
+ <van-button type="info" @click="confirm">提交</van-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { ImagePreview } from 'vant';
|
|
|
+import { getPhotoApproveDetail, savePhotoApprove } from '@/api/AIImage';
|
|
|
+export default {
|
|
|
+ name: 'AIImageDetail',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ data: null,
|
|
|
+ photoApproveId: null,
|
|
|
+ AIResult: '1',
|
|
|
+ causeTitle: '',
|
|
|
+ causeMessage: '',
|
|
|
+ approveState: '0',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ AIResult: {
|
|
|
+ handler(val) {
|
|
|
+ if (val == 1) {
|
|
|
+ this.causeTitle = '拜访照异常原因及解决方案';
|
|
|
+ } else {
|
|
|
+ this.causeTitle = '反馈AI识别结果有误';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ immediate: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ filters: {
|
|
|
+ filterType(val) {
|
|
|
+ if (val == 1) {
|
|
|
+ return '店招内容识别';
|
|
|
+ } else if (val == 2) {
|
|
|
+ return '门店代码识别';
|
|
|
+ } else if (val == 3) {
|
|
|
+ return '调色机识别';
|
|
|
+ } else if (val == 4) {
|
|
|
+ return '更换店招';
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ activated() {
|
|
|
+ this.photoApproveId = this.$route.query.photoApproveId;
|
|
|
+ this.getDeytail();
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ getDeytail() {
|
|
|
+ this.toastLoading(0, '加载中...', true);
|
|
|
+ getPhotoApproveDetail({ photoApproveId: this.photoApproveId }).then((res) => {
|
|
|
+ this.toastLoading().clear();
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.data = res.data;
|
|
|
+ this.approveState = res.data.approveState; //反馈状态：0 未审批 1已审批
|
|
|
+ if (this.approveState == '0') {
|
|
|
+ let latestPhotoApprove = res.data.latestPhotoApprove;
|
|
|
+ if (latestPhotoApprove) {
|
|
|
+ this.AIResult = latestPhotoApprove.resultCorrect || '1';
|
|
|
+ this.causeMessage =
|
|
|
+ latestPhotoApprove.reasonsSolutions || latestPhotoApprove.feedbackError;
|
|
|
+ this.$dialog
|
|
|
+ .confirm({
|
|
|
+ title: '系统提示',
|
|
|
+ message:
|
|
|
+ latestPhotoApprove.approveTime +
|
|
|
+ '已反馈该店拜访照异常原因及解决方案，此次拜访照仍异常，请及时跟进',
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ showCancelButton: false,
|
|
|
+ })
|
|
|
+ .then(() => {});
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.AIResult = res.data.resultCorrect || '1';
|
|
|
+ this.causeMessage = res.data.reasonsSolutions || res.data.feedbackError;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ previewImgs(val) {
|
|
|
+ ImagePreview([val]);
|
|
|
+ },
|
|
|
+ confirm() {
|
|
|
+ if (!this.causeMessage) {
|
|
|
+ this.$toast('请输入' + this.causeTitle);
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ savePhotoApprove({
|
|
|
+ photoApproveId: this.photoApproveId, // long 主键
|
|
|
+ resultCorrect: this.AIResult, // string AI识别是否正确： 1 正确 0不正确
|
|
|
+ reasonsSolutions: this.AIResult == '1' ? this.causeMessage : '', // string 原因及解决方案
|
|
|
+ feedbackError: this.AIResult == '0' ? this.causeMessage : '', // string 反馈AI识别不正确
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$toast.loading({
|
|
|
+ duration: 1000,
|
|
|
+ message: '已反馈给本部',
|
|
|
+ forbidClick: true,
|
|
|
+ onClose: () => {
|
|
|
+ this.onClickLeft();
|
|
|
+ },
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$toast('提交失败');
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onClickLeft() {
|
|
|
+ this.$router.replace({
|
|
|
+ path: '/AIImage',
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.AIImageDetail {
|
|
|
+ .message {
|
|
|
+ padding: 10px;
|
|
|
+ background: #fff;
|
|
|
+ .storeTitle {
|
|
|
+ display: flex;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ padding: 5px 0;
|
|
|
+ }
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ font-size: 13px;
|
|
|
+ padding: 3px 0;
|
|
|
+ .label {
|
|
|
+ /* width: 80px; */
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .titleText {
|
|
|
+ padding: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ .feedbackReason {
|
|
|
+ padding: 10px;
|
|
|
+ background: #fff;
|
|
|
+ font-size: 16px;
|
|
|
+ .title {
|
|
|
+ padding: 8px 0;
|
|
|
+ }
|
|
|
+ .van-radio {
|
|
|
+ padding: 5px 0 5px 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .confirmBtn {
|
|
|
+ position: sticky;
|
|
|
+ bottom: 0;
|
|
|
+ padding-top: 20px;
|
|
|
+ button {
|
|
|
+ width: 100%;
|
|
|
+ background-color: #1a77cc;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
