|
|
@@ -5,6 +5,21 @@
|
|
|
<span>整改信息</span>
|
|
|
</div>
|
|
|
<div class="disaster-information__content">
|
|
|
+ <div class="disaster-information__content--title">
|
|
|
+ <p v-show="rectificationDeptName">
|
|
|
+ 整改部门：<span>{{ rectificationDeptName }}</span>
|
|
|
+ </p>
|
|
|
+ <p v-show="rectificationResponsibleUserList.length">
|
|
|
+ 整改责任人：
|
|
|
+ <span>
|
|
|
+ {{ rectificationResponsibleUserList[0].realname }}（{{ rectificationResponsibleUserList[0].staffNo }}）
|
|
|
+ </span>
|
|
|
+ <a v-if="rectificationResponsibleUserList.length > 1" @click="groupInfo = true">查看详情</a>
|
|
|
+ </p>
|
|
|
+ <p v-show="rectificationPriority">
|
|
|
+ 处置优先级：<span>{{ getPriority(rectificationPriority) }}</span>
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
<BasicTable :tableData="rectificationList" :tableConfig="tableConfig">
|
|
|
<template #fixImages="scope">
|
|
|
<div class="image-container" v-if="JSON.parse(scope.row.fixImages).length">
|
|
|
@@ -21,31 +36,80 @@
|
|
|
/>
|
|
|
<span class="image-count"> 共{{ JSON.parse(scope.row.fixImages).length }}张 </span>
|
|
|
</div>
|
|
|
+ <div class="empty-container" v-else>
|
|
|
+ <span>--</span>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template #fixStatus="scope">
|
|
|
+ <span>{{ getFixStatus(scope.row.fixStatus) }}</span>
|
|
|
</template>
|
|
|
<template #fixMaterials="scope">
|
|
|
- <div class="material-container" v-for="item in JSON.parse(scope.row.fixMaterials)" :key="item.fileId">
|
|
|
- <div class="material-container--item" v-if="item">
|
|
|
- <img :src="FILE_TYPE_ICON[item.fileType]" />
|
|
|
- <span>{{ item.fileName }}</span>
|
|
|
+ <div class="material-container" v-if="JSON.parse(scope.row.fixMaterials).length">
|
|
|
+ <div class="material-container--item" v-for="item in JSON.parse(scope.row.fixMaterials)" :key="item.fileId">
|
|
|
+ <div
|
|
|
+ class="material-container--left"
|
|
|
+ @click="previewOnline(item.fileUrl, item.fileType as keyof typeof FILE_TYPE_ICON)"
|
|
|
+ >
|
|
|
+ <img :src="FILE_TYPE_ICON[item.fileType]" />
|
|
|
+ <span>{{ item.fileName }}</span>
|
|
|
+ </div>
|
|
|
+ <img :src="DownloadIcon" class="download-icon" @click="downloadFile(item.fileUrl, item.fileName)" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="empty-container" v-else>
|
|
|
+ <span>--</span>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
</BasicTable>
|
|
|
</div>
|
|
|
+ <PreviewOnline ref="previewOnlineRef" />
|
|
|
+ <el-dialog v-model="groupInfo" title="整改责任人详情" align-center class="customDialog--pushObject">
|
|
|
+ <div class="user-info">
|
|
|
+ <el-tag type="primary" v-for="user in rectificationResponsibleUserList" :key="user.id">
|
|
|
+ {{ user.realname }}（{{ user.staffNo }}）
|
|
|
+ </el-tag>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
+ import { onMounted, ref } from 'vue';
|
|
|
import BasicTable from '@/components/BasicTable.vue';
|
|
|
+ import PreviewOnline from '@/views/disaster/components/PreviewOnline.vue';
|
|
|
import useTableConfig from '@/hooks/useTableConfigHook';
|
|
|
+ import { useDisasterControlHook } from '../hook';
|
|
|
+ import { downloadFile } from '@/views/disaster/utils';
|
|
|
import type { DisposalRectificationFormData } from '@/types/disaster-control';
|
|
|
+ import type { PersonGroupItem } from '@/types/person-group/type';
|
|
|
import { RECTIFICATION_INFO_TABLE_COLUMNS, RECTIFICATION_INFO_TABLE_OPTIONS } from '../config';
|
|
|
import { FILE_TYPE_ICON } from '@/views/disaster/constant';
|
|
|
+ import { FIX_STATUS_OPTIONS_DISPOSAL_RECTIFICATION } from '../constant';
|
|
|
+ import DownloadIcon from '../svg/download.svg';
|
|
|
+
|
|
|
defineProps<{
|
|
|
rectificationList: DisposalRectificationFormData[];
|
|
|
+ rectificationDeptName: string;
|
|
|
+ rectificationResponsibleUserList: PersonGroupItem[];
|
|
|
+ rectificationPriority: string;
|
|
|
}>();
|
|
|
+
|
|
|
+ const { getPriority, getPriorityDict } = useDisasterControlHook();
|
|
|
+ const groupInfo = ref(false);
|
|
|
+ const getFixStatus = (status: number) => {
|
|
|
+ return FIX_STATUS_OPTIONS_DISPOSAL_RECTIFICATION.find((item) => item.value === status)?.label;
|
|
|
+ };
|
|
|
+ const previewOnlineRef = ref<InstanceType<typeof PreviewOnline>>();
|
|
|
+ const previewOnline = (url: string | undefined, type: keyof typeof FILE_TYPE_ICON) => {
|
|
|
+ if (url) {
|
|
|
+ previewOnlineRef.value?.open(url, type);
|
|
|
+ }
|
|
|
+ };
|
|
|
const { tableConfig } = useTableConfig(RECTIFICATION_INFO_TABLE_COLUMNS, RECTIFICATION_INFO_TABLE_OPTIONS, false);
|
|
|
tableConfig.loading = false;
|
|
|
+ onMounted(() => {
|
|
|
+ getPriorityDict();
|
|
|
+ });
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
@@ -55,11 +119,29 @@
|
|
|
padding: 10px;
|
|
|
border-radius: 4px;
|
|
|
}
|
|
|
+ .disaster-information__content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+ &--title {
|
|
|
+ display: flex;
|
|
|
+ gap: 100px;
|
|
|
+ span {
|
|
|
+ color: rgba($text-color, 0.65);
|
|
|
+ }
|
|
|
+ a {
|
|
|
+ margin-left: 5px;
|
|
|
+ color: $primary-color;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.image-container {
|
|
|
position: relative;
|
|
|
}
|
|
|
.el-image {
|
|
|
display: block !important;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.image-count {
|
|
|
position: absolute;
|
|
|
@@ -69,13 +151,56 @@
|
|
|
background: rgba($text-color, 0.6);
|
|
|
color: rgba($white-color, 0.7);
|
|
|
font-size: 14px;
|
|
|
+ pointer-events: none;
|
|
|
}
|
|
|
.material-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ gap: 5px;
|
|
|
width: 100%;
|
|
|
- img {
|
|
|
- width: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+ &--item {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ width: 100%;
|
|
|
+ padding: 2px 5px;
|
|
|
+ &:hover {
|
|
|
+ background-color: #f8f9fa;
|
|
|
+ box-shadow: 0 0 5px 0 rgba($text-color, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &--left {
|
|
|
+ display: flex;
|
|
|
+ gap: 4px;
|
|
|
+ align-items: center;
|
|
|
+ flex: 1;
|
|
|
+ img {
|
|
|
+ width: 12px;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ width: 110px;
|
|
|
+ text-align: left;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
}
|
|
|
+ .download-icon {
|
|
|
+ width: 16px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .empty-container {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .user-info {
|
|
|
+ display: flex;
|
|
|
+ gap: 10px;
|
|
|
+ }
|
|
|
+ .el-tag {
|
|
|
+ font-weight: 500;
|
|
|
+ font-size: 12px;
|
|
|
+ color: $primary-color;
|
|
|
+ line-height: 20px;
|
|
|
}
|
|
|
</style>
|
chauncey