189 lines
9.1 KiB
Vue
189 lines
9.1 KiB
Vue
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue';
|
||
import { Icon } from '@iconify/vue'
|
||
import { useThemeStore } from '@/store/modules/theme';
|
||
import { useRouterPush } from '@/hooks/common/router';
|
||
|
||
const themeStore = useThemeStore();
|
||
const { routerPushByKey } = useRouterPush();
|
||
|
||
const loading = ref<boolean>(false);
|
||
const btnLoading = ref<boolean>(false);
|
||
const useTime = ref<any>(null);
|
||
const useTimeModal = ref<boolean>(false);
|
||
const currentRow = ref<any>(null);
|
||
const list = ref<any[]>([]);
|
||
const lists = [
|
||
{
|
||
id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
|
||
approveTime: "2026-07-31", applicant: "吴强", level: "一般", type: "工艺",
|
||
title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "永久",
|
||
useTime: "", planUse: "2026-08-01", pssr: "PSSR 检查确认表-签字版.pdf",
|
||
hasChange: true,
|
||
},
|
||
{
|
||
id: "MOC-2026-R02-0038",statusDetail: "培训 / PSSR 资料已传 · 待确认投用",
|
||
approveTime: "2026-07-31", applicant: "吴强", level: "重要", type: "工艺",
|
||
title: 'DCS 罐区液位报警值 LIA-301 调整', status: '待PSSR', duration: "临时",
|
||
useTime: "2026-07-16 06:30", planUse: "2026-08-01", pssr: "",
|
||
hasChange: true,
|
||
},
|
||
];
|
||
|
||
const timePickerProps = {
|
||
format: 'HH:mm', // 时间选择器面板上显示的格式
|
||
seconds: false // 隐藏秒选择器[reference:3][reference:4]
|
||
}
|
||
|
||
// 禁用今天之前的日期（今天可选）
|
||
const disabledDate = (ts: number) => {
|
||
const today = new Date()
|
||
today.setHours(0, 0, 0, 0) // 今天的 00:00:00
|
||
return ts < today.getTime() // 时间戳小于今天 0 点则禁用
|
||
}
|
||
// 获取列表数据
|
||
const getList = () => {
|
||
loading.value = true;
|
||
setTimeout(() => {
|
||
list.value = lists;
|
||
loading.value = false;
|
||
}, 1000);
|
||
}
|
||
|
||
// 查看
|
||
const viewFile = (record: any) => {
|
||
window.$message?.info(`预览「${record.pssr}」（上传件不做内容识别，原件已随单归档）`)
|
||
};
|
||
// 下载
|
||
const downloadFile = (record: any) => {
|
||
window.$message?.success(`下载「${record.pssr}」`)
|
||
};
|
||
// 打开变更单
|
||
const openChange = (record: any) => {
|
||
routerPushByKey('home_highriskdetail', { query: { params: JSON.stringify(record) } })
|
||
};
|
||
// 填写投用日期
|
||
const fillUseTime = (record: any) => {
|
||
useTime.value = null;
|
||
currentRow.value = record;
|
||
useTimeModal.value = true;
|
||
};
|
||
// 保存投用日期
|
||
const saveUseTime = () => {
|
||
if (!useTime.value) {
|
||
return window.$message?.warning("请选择投用时间");
|
||
}
|
||
btnLoading.value = true;
|
||
setTimeout(() => {
|
||
btnLoading.value = false;
|
||
useTimeModal.value = false;
|
||
}, 1000);
|
||
}
|
||
|
||
|
||
|
||
onMounted(() => {
|
||
getList();
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<NSpace vertical :size="16">
|
||
<!-- PSSR监督 -->
|
||
<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">待投用变更（本车间 · 一车间）</span>
|
||
<NTag size="small" type="primary">{{ list.length }} 起</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==='待PSSR'" type="warning" size="small">{{ s.status }}</NTag>
|
||
<NTag v-if="s.status==='待关闭'" type="error" size="small">{{ s.status }}</NTag>
|
||
<NTag v-if="s.status==='实施中'" type="primary" size="small">{{ s.status }}</NTag>
|
||
<NTag v-if="s.status==='待验收'" type="success" size="small">{{ s.status }}</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 v-if="s.level==='一般'" size="small">{{s.level}}</NTag>
|
||
<NTag v-if="s.level==='重要'" size="small" type="error">{{s.level}}</NTag>
|
||
<NTag size="small" type="primary">{{s.type}}</NTag>
|
||
<NTag v-if="s.duration==='永久'" size="small">{{s.duration}}</NTag>
|
||
<NTag v-if="s.duration==='临时'" size="small" type="warning">{{s.duration}}</NTag>
|
||
</div>
|
||
<p class="mt-0.5 text-[11px] text-slate-400">{{ s.id }} · {{ s.applicant }}</p>
|
||
<p class="text-slate-400 text-[11px]">审批通过时间：<span class="font-medium text-slate-600">{{ s.approveTime ?? '—' }}</span></p>
|
||
<p class="text-slate-400 text-[11px]">变更投用时间：<span class="font-medium text-[var(--warning-color)]">{{ s.useTime ? s.useTime : `待投用（计划 ${s.planUse}）` }}</span></p>
|
||
<p class="mt-0.5 text-[11px] text-slate-400">{{ s.statusDetail }}</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">
|
||
<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 v-if="!s.useTime" size="small" type="primary" class="text-xs" @click="fillUseTime(s)">填写投用日期</NButton>
|
||
<NButton v-if="s.hasChange" 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>
|
||
</div>
|
||
</NCard>
|
||
<!-- 填写投用日期弹窗 -->
|
||
<NModal
|
||
v-model:show="useTimeModal"
|
||
preset="card"
|
||
title="填写投用日期"
|
||
:auto-focus="false"
|
||
:style="{ width: '450px', height: 'auto' }"
|
||
:segmented="{ content: true, footer: true }"
|
||
>
|
||
<template #default>
|
||
<div class="space-y-3 text-sm">
|
||
<p class="text-xs text-slate-500">{{ currentRow?.id }} · {{ currentRow?.title }}</p>
|
||
<div class="rounded-lg border border-amber-200 bg-amber-50 px-3 py-2 text-xs leading-relaxed text-amber-700">
|
||
提示：投用前应完成变更培训与 PSSR 确认（资料已上传）。投用后变更进入待验收阶段，临时变更自投用日起计算时限。
|
||
</div>
|
||
<NDatePicker
|
||
v-model:value="useTime"
|
||
type="datetime"
|
||
:is-date-disabled="disabledDate"
|
||
format="yyyy-MM-dd HH:mm"
|
||
placeholder="请选择投用时间"
|
||
:time-picker-props="timePickerProps"
|
||
/>
|
||
</div>
|
||
</template>
|
||
<template #footer>
|
||
<div class="flex justify-end gap-[10px]">
|
||
<NButton size="small" @click="useTimeModal = false">取消</NButton>
|
||
<NButton size="small" type="primary" :loading="btnLoading" @click="saveUseTime">确认投用</NButton>
|
||
</div>
|
||
</template>
|
||
</NModal>
|
||
</NSpin>
|
||
</NSpace>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.scroll {
|
||
height: calc(100vh - 180px);
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|