supervision-vue/src/components/negative/description.vue

<template>
    <div class="info-container">
        <h3>问题信息</h3>
        <div class="row">
            <div class="col col-12">
                <label>样本源头编号</label>
                <span>{{ negative.originId }}</span>
            </div>
            <div class="col col-12">
                <label>案件/警情编号</label>
                <span>{{ negative.caseNumber || '/' }}</span>
            </div>
            <div class="col col-6">
                <label>问题发现时间</label>
                <span>{{ negative.discoveryTime || '/' }}</span>
            </div>
            <div class="col col-6" v-if="negative.happenTime">
                <label>问题发生时间</label>
                <span>{{ negative.happenTime }}</span>
            </div>
            <div class="col col-6">
                <label>问题来源</label>
                <span>{{ negative.problemSources }}</span>
            </div>
            <div class="col col-6" v-if="negative.projectName">
                <label>项目名称</label>
                <span>{{ negative.projectName }}</span>
            </div>
            <div class="col col-6" v-if="negative.involveMoney">
                <label>问题金额</label>
                <span>{{ negative.involveMoney }}元</span>
            </div>
            <div class="col col-6" v-if="negative.responderName">
                <label>投诉反映人</label>
                <span>{{ negative.responderName }}</span>
            </div>
            <div class="col col-6" v-if="negative.contactPhone">
                <label>联系电话</label>
                <span>{{ negative.contactPhone }}</span>
            </div>
            <div class="col col-6" v-if="negative.specialSupervision">
                <label>专项督察</label>
                <span>{{ getInvolveProblem(negative.specialSupervision, dict.specialSupervision) }}</span>
            </div>
            <div class="col col-6" v-if="negative.reportNumber">
                <label>警情期数</label>
                <span>{{ negative.reportNumber }}</span>
            </div>
            <div class="col col-6">
                <label>业务类别</label>
                <span>{{ negative.businessTypeName }}</span>
            </div>
            <div class="col col-6" v-if="negative.policeTypeName">
                <label>涉及警种</label>
                <span>{{ negative.policeTypeName }}</span>
            </div>
            <div class="col col-6">
                <label>涉及单位</label>
                <span>{{ negative.involveDepartName || '/' }}</span>
            </div>
          <div class="col col-6" v-if="negative.sourceType === '2' && negative.currentRow?.repeatt">
            <label>是否重复件</label>
            <span>{{ getDictLable(dict.yesNo, negative.currentRow.repeatt) }}<el-button
                v-if="negative.currentRow?.mergeHistory"
                type="primary"
                size="small"
                link
                style="margin-left: 4px; padding: 0;"
                @click="showMergeHistory"
            >合并历史</el-button></span>
          </div>
          <div class="col col-6" v-if="negative.sourceType === '2' && negative.currentRow?.tag">
            <label>标签</label>
            <span>{{ getDictLabel(dict.sfssTags, negative.currentRow.tag) }}</span>
          </div>
          <div class="col col-6" v-if="negative.sourceType === '2' && negative.currentRow?.handleMethod">
            <label>办理方式</label>
            <span>{{ getDictLable(dict.handleMethodType, negative.currentRow.handleMethod) }}</span>
          </div>
            <div class="col col-12">
                <label>涉嫌问题</label>
                <span>{{ getInvolveProblem(negative.involveProblem, dict.suspectProblem) || '/' }}</span>
            </div>
            <div class="col col-6">
                <label>创建时间</label>
                <span>{{ negative.crtTime }}</span>
            </div>
        </div>
        <div>
            <div class="text-primary mt-10">事情简要描述</div>
            <div class="content">{{ negative.thingDesc }}</div>
        </div>
        <div v-if="negative.reportFile?.length">
          <div class="text-primary mt-10 mb-10">督察报告附件</div>
          <file-list :files="negative.reportFile" />
        </div>
        <div v-if="negative.thingFiles?.length">
            <div class="text-primary mt-10 mb-10">附件</div>
            <file-list :files="negative.thingFiles" />
        </div>
    </div>

    <!-- 合并历史弹窗 -->
    <MergeHistoryDialog
        v-model="mergeHistoryDialogVisible"
        :mergeHistory="mergeHistoryData"
    />
</template>
<script setup>
import { ref } from 'vue'
import { getInvolveProblem ,getDictLable } from "@/utils/util";
import MergeHistoryDialog from "@/components/data/MergeHistoryDialog.vue";
import { getMergeHistory } from "@/api/data/complaintCollection.ts";

const negative = inject('negative')
const emit = defineEmits(['show-merge-history'])

// 合并历史弹窗
const mergeHistoryDialogVisible = ref(false)
const mergeHistoryData = ref(null)

const showMergeHistory = async () => {
  if (negative.value?.currentRow?.id) {
    try {
      const res = await getMergeHistory({ id: negative.value.currentRow.id })
      const data = res?.data || res
      // 后端返回的是 JSON 字符串，需要解析
      mergeHistoryData.value = typeof data === 'string' ? JSON.parse(data) : data
    } catch (e) {
      mergeHistoryData.value = null
    }
    mergeHistoryDialogVisible.value = true
  }
}

import useCatchStore from "@/stores/modules/catch";
const catchSotre = useCatchStore();
const dict = catchSotre.getDicts([
    "specialSupervision", "suspectProblem", "yesNo", "sfssTags", "handleMethodType"
]);

function getDictLabel(list, value) {
  if (!Array.isArray(list)) return '/'

  if (value === null || value === undefined || value === '') return '/'

  let values = []

  // 1️⃣ value 是数组
  if (Array.isArray(value)) {
    values = value
  }
  // 2️⃣ value 是 "1,2,3" 这种字符串
  else if (typeof value === 'string' && value.includes(',')) {
    values = value.split(',').map(v => v.trim())
  }
  // 3️⃣ 单值（string / number）
  else {
    values = [value]
  }

  // 4️⃣ 映射成字典中文
  const labels = values
      .map(v => {
        const item = list.find(d => d.dictValue == v)
        return item?.dictLabel
      })
      .filter(Boolean)

  return labels.length ? labels.join('，') : '/'
}

console.log('negative',negative)
</script>
<style lang="scss" scoped>
.info-container {
    background: #F9FAFF;
    box-shadow: 0px 2px 4px 0px rgba(133,150,248,0.47);
    padding: 20px;
    margin: 0 2px 4px 2px;
    h3 {
        margin-top: 0;
    }
}
</style>