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.username }}-{{ props.problemData.nickname }}
      </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-describe">
      <div>问题描述：</div>
      <div class="problem-content">{{ props.problemData.problemDescription }}</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.processor }}</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 } from 'vue';
  import { useRouter } from 'vue-router';
  import { Records, STATUS } from '@/api/feedback/feedback';
  import useHandleStore from '../useHandleStore';
  import { storeToRefs } from 'pinia';

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

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

  const activeNames = ref<string>('');

  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-describe {
    font-size: 14px;
    white-space: nowrap;
    word-break: break-word;
    display: flex;
    margin-bottom: 8px;
  }

  .problem-content {
    white-space: pre-wrap;
    word-break: break-word;
  }

  :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>