下载文件名称统一修改

This commit is contained in:
2026-10-13 11:45:45 +08:00
parent 7797b4479d
commit b6ee63299e
5 changed files with 616 additions and 604 deletions
+109 -109
View File
@@ -40,7 +40,7 @@ const viewFile = (file: any) => {
};
// 下载
const downloadFile = (file: any) => {
downloadFileFun(file.file_url, file.file_name);
downloadFileFun(file?.file_url, file?.file_name || file?.doc_name);
};
// 打开变更单
const openChange = (record: any) => {
@@ -99,121 +99,121 @@ onMounted(() => {
</script>
<template>
<NSpace vertical :size="16">
<NSpace vertical :size="16">
<NSpin :show="loading" size="small">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex flex-wrap items-center gap-2 mb-3">
<span class="text-sm font-semibold text-slate-700">待投用变更(本车间 · {{ org }})</span>
<NTag size="small" type="primary">{{ pagination.itemCount }} 起</NTag>
<span class="ml-auto text-[11px] text-slate-400">按审批通过时间排序 · 投用时间由发起人在资料关闭页填报 · 支持属地负责人在此代录投用日期</span>
</div>
<div class="scroll">
<div
class="space-y-3 h-100%"
:style="{
'--theme-color': themeStore.themeColor,
'--warning-color': themeStore.otherColor.warning,
}"
>
<div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<!-- 状态标签 -->
<NTag v-if="s.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="s.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="s.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="s.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="s.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="s.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="s.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div class="flex flex-wrap items-center gap-2 mb-3">
<span class="text-sm font-semibold text-slate-700">待投用变更(本车间 · {{ org }})</span>
<NTag size="small" type="primary">{{ pagination.itemCount }} 起</NTag>
<span class="ml-auto text-[11px] text-slate-400">按审批通过时间排序 · 投用时间由发起人在资料关闭页填报 · 支持属地负责人在此代录投用日期</span>
</div>
<div class="scroll">
<div
class="space-y-3 h-100%"
:style="{
'--theme-color': themeStore.themeColor,
'--warning-color': themeStore.otherColor.warning,
}"
>
<div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<!-- 状态标签 -->
<NTag v-if="s.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="s.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="s.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="s.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="s.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="s.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="s.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-1.5">
<p class="truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
<!-- 等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,s.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,s.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,s.change_level)?.color),
}"
>
{{ matchObj(levelList,s.change_level)?.label }}
</NTag>
<!-- 类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,s.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,s.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,s.change_type)?.color),
}"
>
{{ matchObj(typeList,s.change_type)?.label }}
</NTag>
<NTag v-if="s.duration_type===2" size="small" type="warning">临时</NTag>
<NTag v-if="s.duration_type===1" size="small" type="info">永久</NTag>
</div>
<p class="mt-0.5 text-[11px] text-slate-400">{{ s.change_no }} · {{ s.applicant_name }}</p>
<p class="text-slate-400 text-[11px]">审批通过时间:<span class="font-medium text-slate-600">{{ s.approve_time?.slice(0,16) }}</span></p>
<p class="text-slate-400 text-[11px]">变更投用时间:<span class="font-medium text-[var(--warning-color)]">{{ s.use_time ? s.use_time?.slice(0,10) : `待投用(计划 ${s.plan_use_date?.slice(0,10)})` }}</span></p>
</div>
<div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
<Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
<span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
<template v-if="s.pssr_attachment">
<NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
</template>
<template v-else>
<span class="text-[11px] text-[var(--warning-color)]">待传</span>
</template>
</div>
<NButton size="small" ghost class="text-xs" @click="openChange(s)">打开变更单</NButton>
</div>
<div v-if="list.length === 0" class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据"></NEmpty>
</div>
<div class="min-w-0 flex-1">
<div class="flex flex-wrap items-center gap-1.5">
<p class="truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
<!-- 等级 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(levelList,s.change_level)?.color),
textColor: tagTextColor(matchObj(levelList,s.change_level)?.color),
borderColor: tagBorderColor(matchObj(levelList,s.change_level)?.color),
}"
>
{{ matchObj(levelList,s.change_level)?.label }}
</NTag>
<!-- 类型 -->
<NTag
size="small"
:color="{
color: tagBgColor(matchObj(typeList,s.change_type)?.color),
textColor: tagTextColor(matchObj(typeList,s.change_type)?.color),
borderColor: tagBorderColor(matchObj(typeList,s.change_type)?.color),
}"
>
{{ matchObj(typeList,s.change_type)?.label }}
</NTag>
<NTag v-if="s.duration_type===2" size="small" type="warning">临时</NTag>
<NTag v-if="s.duration_type===1" size="small" type="info">永久</NTag>
</div>
</div>
<div class="flex justify-end mt-3">
<NPagination
v-model:page="pagination.page"
:page-size="pagination.pageSize"
:item-count="pagination.itemCount"
:on-update:page="pageChange"
>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
<p class="mt-0.5 text-[11px] text-slate-400">{{ s.change_no }} · {{ s.applicant_name }}</p>
<p class="text-slate-400 text-[11px]">审批通过时间:<span class="font-medium text-slate-600">{{ s.approve_time?.slice(0,16) }}</span></p>
<p class="text-slate-400 text-[11px]">变更投用时间:<span class="font-medium text-[var(--warning-color)]">{{ s.use_time ? s.use_time?.slice(0,10) : `待投用(计划 ${s.plan_use_date?.slice(0,10)})` }}</span></p>
</div>
<div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
<Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
<span class="text-[11px] font-medium text-slate-600">PSSR 确认表</span>
<template v-if="s.pssr_attachment">
<NButton ghost size="tiny" class="text-11px" @click="viewFile(s)">查看</NButton>
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(s)">下载</NButton>
</template>
</NPagination>
<template v-else>
<span class="text-[11px] text-[var(--warning-color)]">待传</span>
</template>
</div>
<NButton size="small" ghost class="text-xs" @click="openChange(s)">打开变更单</NButton>
</div>
</NCard>
<!-- 附件在线预览弹窗 -->
<NModal
v-model:show="previewModal"
preset="card"
:auto-focus="false"
:style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }"
>
<template #header>
<div class="flex items-center gap-2 text-base font-semibold text-slate-800">
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
</div>
<div v-if="list.length === 0" class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据"></NEmpty>
</div>
</div>
</div>
<div class="flex justify-end mt-3">
<NPagination
v-model:page="pagination.page"
:page-size="pagination.pageSize"
:item-count="pagination.itemCount"
:on-update:page="pageChange"
>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
</template>
<template #default>
<div class="space-y-3">
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
<span>上传人:{{ previewFile?.uploader_name }}</span>
<span>上传时间:{{ previewFile?.created_at?.slice(0, 16) }}</span>
<span v-if="previewFile?.version">{{ `版本:${previewFile?.version}(受控)` }}</span>
</div>
<previewComponent v-if="previewFile" :previewFile="previewFile" />
</div>
</template>
</NModal>
</NPagination>
</div>
</NCard>
<!-- 附件在线预览弹窗 -->
<NModal
v-model:show="previewModal"
preset="card"
:auto-focus="false"
:style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }"
>
<template #header>
<div class="flex items-center gap-2 text-base font-semibold text-slate-800">
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
</div>
</template>
<template #default>
<div class="space-y-3">
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
<span>上传人:{{ previewFile?.uploader_name }}</span>
<span>上传时间:{{ previewFile?.created_at?.slice(0, 16) }}</span>
<span v-if="previewFile?.version">{{ `版本:${previewFile?.version}(受控)` }}</span>
</div>
<PreviewComponent v-if="previewFile" :preview-file="previewFile" />
</div>
</template>
</NModal>
</NSpin>
</NSpace>
</NSpace>
</template>
<style scoped lang="scss">
+122 -118
View File
@@ -71,7 +71,7 @@ const viewFile = (file: any) => {
};
// 下载
const downloadFile = (file: any) => {
downloadFileFun(file.file_url, file.file_name);
downloadFileFun(file?.file_url, file?.file_name || file?.doc_name);
};
// 下载模板
const downloadTemplate = (record: any) => {
@@ -115,128 +115,132 @@ onMounted(() => {
</script>
<template>
<NSpace vertical :size="16">
<NSpace vertical :size="16">
<NSpin :show="loading" size="small">
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div
class="flex flex-wrap items-center gap-2 mb-3"
:style="{ '--theme-color': themeStore.themeColor}"
>
<div class="flex overflow-hidden rounded-full border">
<div @click="tabChange(0)" class="px-3.5 py-1.5 text-xs cursor-pointer select-none"
:class="formInfo.is_close === 0 ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
未关闭的变更 <b>{{ openCount }}</b>
</div>
<div @click="tabChange(1)" class="border-l px-3.5 py-1.5 text-xs cursor-pointer select-none"
:class="formInfo.is_close === 1 ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'">
已关闭的变更 <b>{{ closedCount }}</b>
</div>
</div>
<NInput v-model:value="formInfo.kw" size="small" class="text-xs !w-160px" clearable placeholder="搜索变更名称 / 编号" @clear="formInfo.kw = ''; searchHandle()">
<template #suffix>
<Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="searchHandle" />
</template>
</NInput>
<div class="flex items-center gap-1.5">
<NButton
size="tiny"
round
v-for="t in timeRange"
:key="t.value"
class="text-[11px]"
:type="range === t.value ? 'primary' : 'default'"
@click="timeRangeChange(t.value)"
>
{{ t.label }}
</NButton>
</div>
<span class="ml-auto text-[11px] text-slate-400">培训 / PSSR 为线下确认 + 资料上传制 · PSSR 检查表同行查看 / 下载</span>
</div>
<div class="text-[11px] leading-4 text-slate-400 pb-2">
培训 / PSSR 为线下组织并签字,拍照或扫描上传即视为完成确认并随单归档;系统不做内容识别,本页为 PSSR 检查表的查看 / 下载入口。
</div>
<!-- 列表 -->
<div class="scroll">
<div
v-if="list.length"
class="space-y-3 h-100%"
:style="{
'--theme-color': themeStore.themeColor,
'--warning-color': themeStore.otherColor.warning,
}"
>
<div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<!-- 状态标签 -->
<NTag v-if="s.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="s.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="s.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="s.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="s.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="s.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="s.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<div class="min-w-0 flex-1">
<p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
<span class="mt-0.5 block text-[11px] text-slate-400">{{ s.change_no }} · {{ s.org_name }} · {{ s.applicant_name }} · 计划投用 {{ s.plan_use_date }}</span>
</div>
<div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
<Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
<span class="text-[11px] font-medium text-slate-600">PSSR 检查确认表</span>
<template v-if="s.pssr_attachment">
<span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr_attachment?.file_name }}</span>
<NButton ghost size="tiny" class="text-11px" @click="viewFile(s.pssr_attachment)">查看</NButton>
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(s.pssr_attachment)">下载</NButton>
</template>
<template v-else>
<span class="text-[11px] text-[var(--warning-color)]">待传</span>
<NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(s)">下载模板</NButton>
</template>
</div>
<NButton v-if="s.status==='APPROVING' || s.status==='APPROVED' || s.status==='ACCEPTED'" size="small" type="primary" class="text-xs" @click="openChange(s)">打开变更单</NButton>
</div>
</div>
<div v-else class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据"></NEmpty>
</div>
</div>
<div class="flex justify-end mt-3">
<NPagination
v-model:page="pagination.page"
:page-size="pagination.pageSize"
:item-count="pagination.itemCount"
:on-update:page="pageChange"
>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
</template>
</NPagination>
</div>
</NCard>
<!-- 附件在线预览弹窗 -->
<NModal
v-model:show="previewModal"
preset="card"
:auto-focus="false"
:style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }"
<NCard :bordered="false" size="small" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<div
class="flex flex-wrap items-center gap-2 mb-3"
:style="{ '--theme-color': themeStore.themeColor}"
>
<template #header>
<div class="flex items-center gap-2 text-base font-semibold text-slate-800">
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
</div>
<div class="flex overflow-hidden rounded-full border">
<div
class="px-3.5 py-1.5 text-xs cursor-pointer select-none" :class="formInfo.is_close === 0 ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'"
@click="tabChange(0)"
>
未关闭的变更 <b>{{ openCount }}</b>
</div>
<div
class="border-l px-3.5 py-1.5 text-xs cursor-pointer select-none" :class="formInfo.is_close === 1 ? 'bg-[var(--theme-color)] font-medium text-white' : 'bg-white text-slate-600 hover:bg-slate-50'"
@click="tabChange(1)"
>
已关闭的变更 <b>{{ closedCount }}</b>
</div>
</div>
<NInput v-model:value="formInfo.kw" size="small" class="text-xs !w-160px" clearable placeholder="搜索变更名称 / 编号" @clear="formInfo.kw = ''; searchHandle()">
<template #suffix>
<Icon icon="akar-icons:search" class="size-14px text-slate-400 cursor-pointer" @click="searchHandle" />
</template>
<template #default>
<div class="space-y-3">
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
<span>上传人:{{ previewFile?.uploader_name }}</span>
<span>上传时间:{{ previewFile?.created_at?.slice(0, 16) }}</span>
<span v-if="previewFile?.version">{{ `版本:${previewFile?.version}(受控)` }}</span>
</div>
<previewComponent v-if="previewFile" :previewFile="previewFile" />
</div>
</NInput>
<div class="flex items-center gap-1.5">
<NButton
v-for="t in timeRange"
:key="t.value"
size="tiny"
round
class="text-[11px]"
:type="range === t.value ? 'primary' : 'default'"
@click="timeRangeChange(t.value)"
>
{{ t.label }}
</NButton>
</div>
<span class="ml-auto text-[11px] text-slate-400">培训 / PSSR 为线下确认 + 资料上传制 · PSSR 检查表同行查看 / 下载</span>
</div>
<div class="text-[11px] leading-4 text-slate-400 pb-2">
培训 / PSSR 为线下组织并签字,拍照或扫描上传即视为完成确认并随单归档;系统不做内容识别,本页为 PSSR 检查表的查看 / 下载入口。
</div>
<!-- 列表 -->
<div class="scroll">
<div
v-if="list.length"
class="space-y-3 h-100%"
:style="{
'--theme-color': themeStore.themeColor,
'--warning-color': themeStore.otherColor.warning,
}"
>
<div v-for="(s, i) in list" :key="`${s.id ?? 'x'}-${i}`" class="flex flex-wrap items-center gap-x-3 gap-y-2 border p-4" :style="{ borderRadius: themeStore.themeRadius + 'px' }">
<!-- 状态标签 -->
<NTag v-if="s.status==='APPROVING'" size="small" type="warning">审批中</NTag>
<NTag v-if="s.status==='APPROVED'" size="small" type="success">已通过</NTag>
<NTag v-if="s.status==='IMPLEMENTED'" size="small" type="success">待验收</NTag>
<NTag v-if="s.status==='ACCEPTED'" size="small" type="error">待关闭</NTag>
<NTag v-if="s.status==='CLOSED'" size="small" type="success">已关闭</NTag>
<NTag v-if="s.status==='WITHDRAWN'" size="small" type="error">已撤回</NTag>
<NTag v-if="s.status==='REJECTED'" size="small" type="error">已驳回</NTag>
<div class="min-w-0 flex-1">
<p class="block truncate text-sm font-medium text-slate-800">{{ s.title }}</p>
<span class="mt-0.5 block text-[11px] text-slate-400">{{ s.change_no }} · {{ s.org_name }} · {{ s.applicant_name }} · 计划投用 {{ s.plan_use_date }}</span>
</div>
<div class="flex items-center gap-1.5 rounded-md border bg-slate-50/60 px-2 py-1">
<Icon icon="akar-icons:file" class="size-14px text-[var(--theme-color)]" />
<span class="text-[11px] font-medium text-slate-600">PSSR 检查确认表</span>
<template v-if="s.pssr_attachment">
<span class="max-w-[150px] truncate text-[11px] text-slate-400">{{ s.pssr_attachment?.file_name }}</span>
<NButton ghost size="tiny" class="text-11px" @click="viewFile(s.pssr_attachment)">查看</NButton>
<NButton ghost size="tiny" class="text-11px" @click="downloadFile(s.pssr_attachment)">下载</NButton>
</template>
<template v-else>
<span class="text-[11px] text-[var(--warning-color)]">待传</span>
<NButton ghost size="tiny" class="text-11px" @click="downloadTemplate(s)">下载模板</NButton>
</template>
</div>
<NButton v-if="s.status==='APPROVING' || s.status==='APPROVED' || s.status==='ACCEPTED'" size="small" type="primary" class="text-xs" @click="openChange(s)">打开变更单</NButton>
</div>
</div>
<div v-else class="h-100% flex items-center justify-center">
<NEmpty description="暂无数据"></NEmpty>
</div>
</div>
<div class="flex justify-end mt-3">
<NPagination
v-model:page="pagination.page"
:page-size="pagination.pageSize"
:item-count="pagination.itemCount"
:on-update:page="pageChange"
>
<template #prefix="{ itemCount }">
共 {{ itemCount }} 条
</template>
</NModal>
</NPagination>
</div>
</NCard>
<!-- 附件在线预览弹窗 -->
<NModal
v-model:show="previewModal"
preset="card"
:auto-focus="false"
:style="{ width: '80%', height: 'auto' }"
:segmented="{ content: true, footer: true }"
>
<template #header>
<div class="flex items-center gap-2 text-base font-semibold text-slate-800">
<Icon icon="akar-icons:file" class="size-18px" /> {{ previewFile?.file_name }}
</div>
</template>
<template #default>
<div class="space-y-3">
<div class="flex flex-wrap gap-x-4 gap-y-1 text-xs text-slate-400">
<span>上传人:{{ previewFile?.uploader_name }}</span>
<span>上传时间:{{ previewFile?.created_at?.slice(0, 16) }}</span>
<span v-if="previewFile?.version">{{ `版本:${previewFile?.version}(受控)` }}</span>
</div>
<PreviewComponent v-if="previewFile" :preview-file="previewFile" />
</div>
</template>
</NModal>
</NSpin>
</NSpace>
</NSpace>
</template>
<style scoped lang="scss">