fix(safetyLog): 修复安全日志页面按钮文字错误并添加排序功能

feat(safetyLog): 在安全日志详情中添加文件预览功能
新增PDF和图片文件的预览功能,优化文件展示样式

style(documentSafetyMeeting): 调整文件管理页面代码格式
统一代码缩进和换行格式,提升代码可读性
This commit is contained in:
tcy
2025-09-16 10:21:54 +08:00
parent 41623c7fac
commit 72b8f7162f
3 changed files with 87 additions and 43 deletions

View File

@ -2,12 +2,12 @@
<div class="documentCompletion-data"> <div class="documentCompletion-data">
<el-tabs v-model="activeName" class="p-4" @tab-click="handleClick"> <el-tabs v-model="activeName" class="p-4" @tab-click="handleClick">
<el-tab-pane label="文件夹" name="first"> <el-tab-pane label="文件夹" name="first">
<el-button type="success" :disabled="toolStart" @click="handleFile(3)" <el-button type="success" :disabled="toolStart" @click="handleFile(3)"><el-icon>
><el-icon><Plus /></el-icon>新建文件夹</el-button <Plus />
> </el-icon>新建文件夹</el-button>
<el-button type="primary" :disabled="toolStart" @click="handleFile(2)" <el-button type="primary" :disabled="toolStart" @click="handleFile(2)"><el-icon>
><el-icon><Upload /></el-icon>上传文件</el-button <Upload />
> </el-icon>上传文件</el-button>
<el-card style="margin-top: 10px"> <el-card style="margin-top: 10px">
<div class="breadcrumb-img"> <div class="breadcrumb-img">
<el-breadcrumb> <el-breadcrumb>
@ -18,16 +18,19 @@
<div class="tool-All"> <div class="tool-All">
<div v-if="!toolStart"> <div v-if="!toolStart">
<el-button type="primary" v-hasPermi="['project:project:remove']" @click="onBatchAll"> <el-button type="primary" v-hasPermi="['project:project:remove']" @click="onBatchAll">
<el-icon><Menu /></el-icon>批量操作</el-button <el-icon>
> <Menu />
</el-icon>批量操作</el-button>
</div> </div>
<div v-if="toolStart"> <div v-if="toolStart">
<el-button type="warning" @click="onBatchAll"> <el-button type="warning" @click="onBatchAll">
<el-icon><Tools /></el-icon>取消操作</el-button <el-icon>
> <Tools />
</el-icon>取消操作</el-button>
<el-button type="danger" @click="onDeleteAll"> <el-button type="danger" @click="onDeleteAll">
<el-icon><Delete /></el-icon>删除</el-button <el-icon>
> <Delete />
</el-icon>删除</el-button>
</div> </div>
</div> </div>
</div> </div>
@ -40,17 +43,9 @@
<div @click="onNav(item)" title="点击打开文件" @contextmenu="onContextmenu($event, item, i)"> <div @click="onNav(item)" title="点击打开文件" @contextmenu="onContextmenu($event, item, i)">
<img src="../../../assets/icons/svg/file1.png" v-if="item.fileType == '2'" alt="" /> <img src="../../../assets/icons/svg/file1.png" v-if="item.fileType == '2'" alt="" />
<img src="../../../assets/icons/svg/file.png" v-else-if="item.fileType == '1'" alt="" /> <img src="../../../assets/icons/svg/file.png" v-else-if="item.fileType == '1'" alt="" />
<el-image <el-image v-else-if="item.fileType == '3'" style="width: 100%; height: 100%" :src="item.filePath"
v-else-if="item.fileType == '3'" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :initial-index="4"
style="width: 100%; height: 100%" :preview-src-list="[item.filenPathCoding]" fit="cover" />
:src="item.filePath"
:zoom-rate="1.2"
:max-scale="7"
:min-scale="0.2"
:initial-index="4"
:preview-src-list="[item.filenPathCoding]"
fit="cover"
/>
<img :src="'/icon/' + item.fileType + '.png'" v-else /> <img :src="'/icon/' + item.fileType + '.png'" v-else />
</div> </div>
<span @click="onFileName(item)" title="点击重命名">{{ item.fileName }}</span> <span @click="onFileName(item)" title="点击重命名">{{ item.fileName }}</span>
@ -104,7 +99,7 @@ export default defineComponent({
const { proxy } = <any>getCurrentInstance(); const { proxy } = <any>getCurrentInstance();
const RecyclingStationRef = ref(); const RecyclingStationRef = ref();
// 字典选项数据 // 字典选项数据
const {} = proxy.useDict(); const { } = proxy.useDict();
// 文件下载 // 文件下载
const onExport = (event) => { const onExport = (event) => {
event.stopPropagation(); event.stopPropagation();
@ -242,7 +237,7 @@ export default defineComponent({
} }
}); });
}) })
.catch(() => {}); .catch(() => { });
} else { } else {
// 竣工图 // 竣工图
proxy.mittBus.emit('bigUploader.uploadFile', { type: 100, types: 1010, accept: [] }); proxy.mittBus.emit('bigUploader.uploadFile', { type: 100, types: 1010, accept: [] });
@ -295,7 +290,7 @@ export default defineComponent({
} }
}); });
}) })
.catch(() => {}); .catch(() => { });
}; };
const handleClick = (val) => { const handleClick = (val) => {
if (state.activeName == 'second') { if (state.activeName == 'second') {
@ -356,7 +351,7 @@ export default defineComponent({
} }
}); });
}) })
.catch(() => {}); .catch(() => { });
}; };
// 批量删除 // 批量删除
const onDeleteAll = () => { const onDeleteAll = () => {
@ -420,23 +415,28 @@ export default defineComponent({
align-items: center; align-items: center;
width: 100%; width: 100%;
padding-right: 10px; padding-right: 10px;
.tool-All { .tool-All {
display: flex; display: flex;
align-items: center; align-items: center;
> div {
>div {
display: flex; display: flex;
align-items: center; align-items: center;
} }
} }
.batch { .batch {
width: 24px; width: 24px;
} }
} }
.file_detail { .file_detail {
position: relative; position: relative;
width: 100%; width: 100%;
height: 66vh; height: 66vh;
overflow: auto; overflow: auto;
.right_box { .right_box {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
@ -448,7 +448,8 @@ export default defineComponent({
display: none; display: none;
border-radius: 6px; border-radius: 6px;
padding: 14px 4px; padding: 14px 4px;
> div {
>div {
font-size: 16px; font-size: 16px;
font-weight: bold; font-weight: bold;
color: #fff; color: #fff;
@ -457,10 +458,12 @@ export default defineComponent({
font-family: revert; font-family: revert;
border-radius: 5px; border-radius: 5px;
} }
> div:hover {
>div:hover {
background-color: rgb(0 0 0 / 80%); background-color: rgb(0 0 0 / 80%);
} }
} }
.file_style { .file_style {
// height: 100px; // height: 100px;
width: 90px; width: 90px;
@ -472,22 +475,26 @@ export default defineComponent({
animation: 0.5s ease; animation: 0.5s ease;
position: relative; position: relative;
margin-bottom: 10px; margin-bottom: 10px;
> div {
>div {
width: 100%; width: 100%;
// height: 70%; // height: 70%;
height: 80px; height: 80px;
> img {
>img {
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
} }
.checkbox-box { .checkbox-box {
position: absolute; position: absolute;
top: -8px; top: -8px;
left: 60px; left: 60px;
z-index: 1000; z-index: 1000;
} }
> span {
>span {
font-size: 12px; font-size: 12px;
width: 100%; width: 100%;
display: block; display: block;
@ -498,10 +505,12 @@ export default defineComponent({
word-wrap: break-word; word-wrap: break-word;
} }
} }
.file_style:hover { .file_style:hover {
background-color: rgba(189, 189, 189, 0.322); background-color: rgba(189, 189, 189, 0.322);
border-radius: 5px; border-radius: 5px;
} }
.fileActive { .fileActive {
display: block; display: block;
top: 0; top: 0;
@ -515,9 +524,11 @@ export default defineComponent({
} }
} }
} }
.colBlock { .colBlock {
display: block; display: block;
} }
.colNone { .colNone {
display: none; display: none;
} }

View File

@ -6,8 +6,10 @@
<el-col :span="12" style="text-align: right">记录时间{{ safetyLogDetail?.createTime }}</el-col> <el-col :span="12" style="text-align: right">记录时间{{ safetyLogDetail?.createTime }}</el-col>
</el-row> </el-row>
<el-descriptions :column="3" border style="margin-top: 8px"> <el-descriptions :column="3" border style="margin-top: 8px">
<el-descriptions-item label-align="center" width="160px" label="项目名称" :span="3">{{ currentProject?.name }} </el-descriptions-item> <el-descriptions-item label-align="center" width="160px" label="项目名称" :span="3">{{ currentProject?.name }}
<el-descriptions-item label-align="center" label="发生日期">{{ safetyLogDetail?.dateOfOccurrence }} </el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-align="center" label="发生日期">{{ safetyLogDetail?.dateOfOccurrence }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="气温"> <el-descriptions-item label-align="center" label="气温">
<span>最高{{ safetyLogDetail?.airTemperatureMax }}</span> <span>最高{{ safetyLogDetail?.airTemperatureMax }}</span>
<span>最低{{ safetyLogDetail?.airTemperatureMin }}</span> <span>最低{{ safetyLogDetail?.airTemperatureMin }}</span>
@ -36,20 +38,44 @@
<el-descriptions-item label-align="center" label="监理通知有关部门安全检查情况" :span="3"> <el-descriptions-item label-align="center" label="监理通知有关部门安全检查情况" :span="3">
{{ safetyLogDetail?.safetyInspectionCondition }} {{ safetyLogDetail?.safetyInspectionCondition }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-align="center" label="停工、加班情况" :span="3">{{ safetyLogDetail?.stoppageOrOvertime }} </el-descriptions-item> <el-descriptions-item label-align="center" label="停工、加班情况" :span="3">{{ safetyLogDetail?.stoppageOrOvertime }}
</el-descriptions-item>
<el-descriptions-item label-align="center" label="其他应记录的安全与文明施工事项" :span="3"> <el-descriptions-item label-align="center" label="其他应记录的安全与文明施工事项" :span="3">
{{ safetyLogDetail?.otherCondition }} {{ safetyLogDetail?.otherCondition }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-align="center" label="附件" :span="3"> <el-descriptions-item label-align="center" label="附件" :span="3">
<el-space direction="vertical"> <el-space direction="vertical">
<el-link v-for="item in fileList" :key="item.ossId" :href="`${item.url}`" type="primary" :underline="false" target="_blank"> <template v-for="item in fileList" :key="item.ossId">
<el-link :href="`${item.url}`" type="primary" :underline="false" target="_blank""
v-if="item.fileSuffix.includes('pdf')">
<span> {{ item.originalName }} </span> <span> {{ item.originalName }} </span>
</el-link> </el-link>
<el-space wrap>
<span v-if="['.png', '.jpg', '.jpeg'].includes(item.fileSuffix)">
<image-preview :src="item.url" width="200px" />
</span>
<span v-else>
<el-link :href="`${item.url}`" :underline="false" target="_blank">
<span> {{ item.originalName }} </span>
</el-link>
</span>
</el-space>
</template>
</el-space> </el-space>
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label-align="center" label="备注" :span="3">{{ safetyLogDetail?.remark }} </el-descriptions-item> <el-descriptions-item label-align="center" label="备注" :span="3">{{ safetyLogDetail?.remark }}
</el-descriptions-item>
</el-descriptions> </el-descriptions>
</el-card> </el-card>
<el-dialog width="80%" v-model="viewFileVisible" title="查看文件" append-to-body>
<iframe :src="fileUrl" frameborder="0" width="100%" height="800"></iframe>
<template #footer>
<div class="dialog-footer">
<el-button @click="viewFileVisible = false" type="primary">关闭</el-button>
</div>
</template>
</el-dialog>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
@ -74,6 +100,8 @@ const props = defineProps<Props>();
const loading = ref<boolean>(false); const loading = ref<boolean>(false);
const safetyLogDetail = ref<SafetyLogVO>(); const safetyLogDetail = ref<SafetyLogVO>();
const fileList = ref<Array<OssVO>>([]); const fileList = ref<Array<OssVO>>([]);
const viewFileVisible = ref<boolean>(false);
const fileUrl = ref<string>('');
const get = async () => { const get = async () => {
loading.value = true; loading.value = true;
const res = await getSafetyLog(props.safetyLogId); const res = await getSafetyLog(props.safetyLogId);
@ -86,7 +114,11 @@ const get = async () => {
} }
loading.value = false; loading.value = false;
}; };
const viewFile = (url: string) => {
fileUrl.value = url;
viewFileVisible.value = true;
return false;
};
onMounted(() => { onMounted(() => {
get(); get();
}); });

View File

@ -25,7 +25,7 @@
<template #header> <template #header>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['safety:safetyLog:add']">1 <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['safety:safetyLog:add']">新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -214,7 +214,8 @@ const data = reactive<PageData<SafetyLogForm, SafetyLogQuery>>({
otherCondition: undefined, otherCondition: undefined,
remark: undefined, remark: undefined,
creatorName: undefined, creatorName: undefined,
orderByColumn: "createTime",
isAsc: "desc",
params: {} params: {}
}, },
rules: { rules: {