storevisit-ui-mobile/src/views/AIImage/AIImageDetail.vue

<template>
  <div class="AIImageDetail" v-if="detail">
    <van-nav-bar class="navBar" title="异常反馈" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="message">
      <div class="storeTitle">
        <div class="storeName">{{ detail.storeName }}</div>
        <div class="storeCode" style="margin-left: 5px; margin-top: 2px">
          (<span style="color: #0057ba; vertical-align: -1px">{{ detail.storeCode }}</span
          >)
        </div>
      </div>
      <div class="item">
        <div class="label">门店类型：</div>
        <div class="value">{{ detail.storeCategoryName }}</div>
      </div>
      <div class="item">
        <div class="label">地址：</div>
        <div class="value">{{ detail.addressLine }}</div>
      </div>
      <div class="item">
        <div class="label">拜访人：</div>
        <div class="value">{{ detail.visitUserNickName }}</div>
      </div>
      <div class="item">
        <div class="label">拜访时间：</div>
        <div class="value">{{ detail.createTime }}</div>
      </div>
      <div class="item">
        <div class="label">拍摄类型：</div>
        <div class="value">{{ detail.identifyType | filterType }}</div>
      </div>
      <div class="item" style="color: red">
        <div class="label">识别结果：</div>
        <div class="value">{{ detail.unqualifiedReason }}</div>
      </div>
      <div class="item">
        <div class="label">业务员反馈AI识别不正确：{{ detail.feedbackMessage || '未反馈' }}</div>
      </div>
      <div class="item" style="display: flex; justify-content: center">
        <van-image
          v-if="detail.fileUrl"
          height="400px"
          :src="detail.fileUrl"
          @click="previewImgs(detail.fileUrl)"
          fit="contain">
          <template v-slot:loading>
            <van-loading type="spinner" size="40" />
          </template>
        </van-image>
      </div>
    </div>
    <template v-if="detail && detail.historyFeedback == '0'">
      <!-- 旧的识别反馈 -->
      <historyAIImageDetail
        :detail="detail"
        :approveState="approveState"
        :abnormalReason="abnormalReason"
        :causeMessage="causeMessage"
        :photoApproveId="photoApproveId"
        :AIResultOption="AIResultOption"></historyAIImageDetail>
    </template>
    <template v-if="detail && detail.historyFeedback == '1'">
      <!-- 新的识别反馈-调色机 -->
      <AIImageDetailTSJ
        v-if="detail.identifyType == '3'"
        :detail="detail"
        :approveState="approveState"
        :abnormalReason="abnormalReason"
        :causeMessage="causeMessage"
        :photoApproveId="photoApproveId"
        :AIResultOption="AIResultOption"></AIImageDetailTSJ>
      <AIImageDetailPage
        v-else
        :detail="detail"
        :approveState="approveState"
        :abnormalReason="abnormalReason"
        :causeMessage="causeMessage"
        :photoApproveId="photoApproveId"
        :AIResultOption="AIResultOption"></AIImageDetailPage>
    </template>
  </div>
</template>
<script>
import { ImagePreview } from 'vant';
import { getPhotoApproveDetail, savePhotoApprove } from '@/api/AIImage';
import { getDictOption } from '@/api/index';
import historyAIImageDetail from './historyAIImageDetail.vue';
import AIImageDetailTSJ from './AIImageDetailTSJ.vue';
import AIImageDetailPage from './AIImageDetailPage.vue';
export default {
  name: 'AIImageDetail',
  components: {
    historyAIImageDetail,
    AIImageDetailTSJ,
    AIImageDetailPage,
  },
  data() {
    return {
      detail: null,
      photoApproveId: null,
      abnormalReason: '1',
      causeTitle: '',
      causeMessage: '',
      approveState: '0',
      AIResultOption: [],
    };
  },
  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();
    // 获取店招异常原因字典
    getDictOption({}, 'feedback_error_msg').then((res) => {
      this.AIResultOption = res.data;
    });
  },
  mounted() {},
  methods: {
    getDeytail() {
      this.toastLoading(0, '加载中...', true);
      getPhotoApproveDetail({ photoApproveId: this.photoApproveId }).then((res) => {
        this.toastLoading().clear();
        if (res.code == 200) {
          this.detail = res.data;
          this.approveState = res.data.approveState; //反馈状态：0 未审批 1已审批
          if (this.approveState == '0') {
            // latestPhotoApprove 上次反馈内容 反显
            let latestPhotoApprove = res.data.latestPhotoApprove;
            if (latestPhotoApprove) {
              this.abnormalReason = latestPhotoApprove.resultCorrect || '1';
              this.causeMessage =
                latestPhotoApprove.reasonsSolutions || latestPhotoApprove.feedbackError;
              this.$dialog
                .confirm({
                  title: '系统提示',
                  message:
                    latestPhotoApprove.approveTime +
                    '已反馈该店拜访照异常原因及解决方案，此次拜访照仍异常，请及时跟进',
                  confirmButtonText: '确定',
                  showCancelButton: false,
                })
                .then(() => {});
            }
          } else {
            this.abnormalReason = res.data.resultCorrect || '1';
            this.causeMessage = res.data.reasonsSolutions || res.data.feedbackError;
          }
        }
      });
    },
    previewImgs(val) {
      ImagePreview([val]);
    },
    confirm() {
      if (!this.abnormalReason) {
        this.$toast('请选择招异常原因');
        return;
      }
      this.toastLoading(0, '加载中...', true);
      savePhotoApprove({
        photoApproveId: this.photoApproveId, //	long	主键
        resultCorrect: this.abnormalReason, //	string	AI识别是否正确： 1 正确 0不正确
        reasonsSolutions: '',
        feedbackError: this.causeMessage, //	string	反馈AI识别不正确
      }).then((res) => {
        this.toastLoading().clear();
        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">
.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;
    }
  }
  .van-radio__label {
    font-size: 14px;
  }
}
</style>