sl-sfy-safety/src/views/feedback/component/singleProblem.vue

<template>
  <div
    class="single-item"
    :style="`padding-bottom:${props.problemData.problemStatus === STATUS.handled ? '0px' : '38px'}`"
  >
    <div style="display: flex; font-size: 12px">
      <img src="@/assets/icons/phone.png" alt="" />
      <div class="single-contact">联系方式：{{ props.problemData.mobile }}</div>
      <div style="color: #00000073"
        >人员：{{ props.problemData.submitterUsername }}-{{ props.problemData.submitterNickname }}
      </div>
      <div style="margin-left: 20px; color: #00000073">日期：{{ props.problemData.createdAt }}</div>
    </div>
    <el-button v-if="props.isHandle" type="primary" class="single-handle" @click="handleProblem"
      >处理</el-button
    >
    <el-divider />
    <div class="problem-type">
      <div>问题类型：</div>
      <div class="type-content">{{ problemType[props.problemData.problemType] }}</div>
    </div>
    <div class="problem-describe">
      <div>问题描述：</div>
      <div class="problem-content">{{ props.problemData.problemDescription }}</div>
    </div>
    <div class="problem-picture">
      <div class="picture-content" v-for="(item, index) in problemImageUrls" :key="index">
        <el-image
          style="width: 80px; height: 80px"
          :src="item"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="problemImageUrls"
          :initial-index="index"
          fit="cover"
        />
      </div>
    </div>

    <el-collapse v-if="props.problemData.problemStatus === STATUS.handled" v-model="activeNames">
      <el-collapse-item name="1">
        <template #title>
          <div class="problem-describe">
            <div>处理人：</div>
            <div class="problem-content">{{ props.problemData.processorName }}</div>
          </div>
        </template>
        <div class="problem-describe">
          <div>处理措施：</div>
          <div class="problem-content">{{ props.problemData.dealMethod }}</div>
        </div>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { Records, STATUS } from '@/api/feedback/feedback';
import useHandleStore from '../useHandleStore';
import { storeToRefs } from 'pinia';
import { problemType } from '../constant';

const useSingle = useHandleStore();
const { singleFeedback } = storeToRefs(useSingle);

const router = useRouter();
const props = defineProps<{
  problemData: Records;
  isHandle: boolean;
}>();

const activeNames = ref<string>('');
const problemImageUrls = computed(() => {
  const imageUrlString = props.problemData.problemImageUrl;
  return imageUrlString ? imageUrlString.split(',') : [];
});

const handleProblem = () => {
  singleFeedback.value = props.problemData;
  router.push('/feedback/handle');
};
</script>

<style scoped>
.single-item {
  background: #ffffff;
  box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.09);
  border-radius: 6px;
  padding: 16px 12px 0px 12px;
  position: relative;
}

.single-contact {
  margin-left: 10px;
  margin-right: 40px;
}
.single-handle {
  position: absolute;
  top: 11px;
  right: 12px;
}

.el-divider--horizontal {
  margin: 16px 0;
}

.problem-type,
.problem-describe {
  font-size: 14px;
  white-space: nowrap;
  word-break: break-word;
  display: flex;
  margin-bottom: 8px;
}

.type-content,
.problem-content {
  white-space: pre-wrap;
  word-break: break-word;
}
.type-content {
  font-weight: 600;
}
.problem-picture{
  display: flex;
  gap: 20px;
}

:deep(.el-collapse-item__header) {
  border-bottom: none;
}

:deep(.el-collapse-item__wrap) {
  border-bottom: none;
}

:deep(.el-collapse-item__content) {
  padding-bottom: 0px;
}
:deep(.el-collapse) {
  border-top: none;
}
</style>