luoshan_web/library/components/VabNotice/VabNoticeDetail.vue

<template>
  <el-dialog
    v-model="dialogFormVisible"
    title="信息详情"
    width="700px"
    @close="close"
  >
    <div>
      <div class="title">
        {{ detail.category_1 ? detail.category_1.name : ''
        }}{{ detail.category_2 ? '/' + detail.category_2.name : ''
        }}{{ detail.category_3 ? '/' + detail.category_3.name : '' }}
        {{ detail.category_4 ? '/' + detail.category_4.name : '' }}
        {{ detail.category_5 ? '/' + detail.category_5.name : '' }}
      </div>
      <div class="people">
        反映人员：{{ detail.name || '--' }}
        <span class="time">时间：{{ detail.complain_date }}</span>
        <!-- <span class="time">
          姓别：{{ detail.sex == 0 ? '未知' : detail.sex == 1 ? '男' : '女' }}
        </span> -->
        <span class="time">手机号：{{ detail.mobile }}</span>
        <span class="time">身份证号：{{ detail.id_card || '--' }}</span>
      </div>
      <div class="content">
        {{ detail.body }}
      </div>
      <div class="chuli">
        <div class="title">办理情况</div>
        <div class="people">
          处理部门：{{
            detail.deal_department ? detail.deal_department.name : ''
          }}
        </div>
        <div class="content1">
          {{ detail.deal_idea || '--' }}
        </div>
      </div>
      <div class="chuli">
        <div class="title">投诉目的</div>
        <div class="content1">
          {{ detail.goal || '--' }}
        </div>
      </div>
      <div class="chuli">
        <div class="title">备注</div>
        <div class="content1">
          {{ detail.remark || '--' }}
        </div>
      </div>
    </div>
    <template #footer>
      <!-- <el-button @click="close">取 消</el-button> -->
      <el-button type="primary" @click="close">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { getDetail } from '@/api/notice'
  export default defineComponent({
    name: 'VabNoticeDetail',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        formRef: null,
        title: '',
        detail: '',
        dialogFormVisible: false,
        source_type: '',
      })

      const showEdit = (row) => {
        state.source_type = row.source_type
        if (
          state.source_type === 'App\\Repositories\\Models\\Manage\\Message'
        ) {
          getInfoDetail(row.source_id)
        }
        state.dialogFormVisible = true
      }
      const getInfoDetail = async (id) => {
        const { data } = await getDetail({ id: id })
        state.detail = data
      }
      const close = () => {
        state.dialogFormVisible = false
      }

      onMounted(() => {})
      return {
        ...toRefs(state),
        getInfoDetail,
        showEdit,
        close,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vab-tree-border {
    width: 100%;
    height: 250px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }
  .title {
    font-size: 16px;
    font-weight: 550;
    padding: 8px 0;
  }
  .content {
    line-height: 26px;
    margin-bottom: 20px;
    padding: 5px;
    background-color: #f7f7f7;
    border-radius: 5px;
  }
  .people {
    margin-bottom: 20px;
  }
  .content1 {
    line-height: 26px;
    padding: 5px;
    background-color: #f7f7f7;
    border-radius: 5px;
  }
  .time {
    margin-left: 5px;
  }
</style>