127 lines
7.2 KiB
Vue
127 lines
7.2 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 list = ref<any[]>([]);
|
||
const lists = [
|
||
{ title: "氮气管网压力分级调整", id: "MOC-2026-R01-0024", applicant: "张工艺", type: "工艺", level: "重要", duration: "永久", applyDate: "2026-05-28", useTime: "2026-06-20", acceptDate: "2026-07-08", cost: 3.2, result: "完全达到" },
|
||
{ title: "R-201 搅拌密封改造", id: "MOC-2026-R01-0019", applicant: "张工艺", type: "设备", level: "一般", duration: "永久", applyDate: "2026-03-18", useTime: "2026-04-12", acceptDate: "2026-05-20", cost: 6.8, result: "完全达到" },
|
||
{ title: "循环水加药泵冲程临时调整", id: "MOC-2026-R01-0022", applicant: "张工艺", type: "设备", level: "一般", duration: "临时", applyDate: "2026-04-25", useTime: "2026-05-18", acceptDate: "2026-06-30", cost: 1.5, result: "基本达到" },
|
||
];
|
||
// 获取列表数据
|
||
const getList = () => {
|
||
loading.value = true;
|
||
setTimeout(() => {
|
||
list.value = lists;
|
||
loading.value = false;
|
||
}, 1000);
|
||
}
|
||
|
||
// 导出文件
|
||
const exportFile = () => {
|
||
window.$message?.success(`导出本车间已验收变更投入和效果表（Excel）`)
|
||
}
|
||
// 查看
|
||
const openRow = (r: any) => {
|
||
window.$message?.info(`打开变更详情页 ${r.id}（含验收报告与费用明细）`);
|
||
};
|
||
|
||
|
||
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="h-100% flex flex-wrap items-center gap-x-5 gap-y-2 border border-slate-200 px-3 py-2 mb-3"
|
||
:style="{
|
||
borderRadius: themeStore.themeRadius + 'px',
|
||
'--success-bg': themeStore.otherColor.success,
|
||
'--warning-bg': themeStore.otherColor.warning,
|
||
'--error-bg': themeStore.otherColor.error,
|
||
}"
|
||
>
|
||
<span class="text-sm font-bold text-slate-800">本车间已验收变更</span>
|
||
<span class="text-xs text-slate-500">共 <b class="text-[#1D4E9C]">{{ list.length }}</b> 起</span>
|
||
<span class="text-xs text-slate-500">投入合计 <b class="text-[#1D4E9C]">11.5</b> 万元</span>
|
||
<span class="text-xs text-slate-500">完全达到率 <b class="text-[var(--success-bg)]">67%</b></span>
|
||
<span class="hidden h-4 w-px bg-slate-200 sm:block"></span>
|
||
<span class="text-xs text-slate-500">
|
||
<span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--success-bg)]"></span>
|
||
完全达到<b class="text-slate-800">2</b> 起 · <b class="text-slate-800">10.0</b> 万元
|
||
</span>
|
||
<span class="text-xs text-slate-500">
|
||
<span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--warning-bg)]"></span>
|
||
基本达到<b class="text-slate-800">1</b> 起 · <b class="text-slate-800">1.5</b> 万元
|
||
</span>
|
||
<span class="text-xs text-slate-500">
|
||
<span class="mr-1 inline-block h-2 w-2 rounded-full align-middle bg-[var(--error-bg)]"></span>
|
||
未达到<b class="text-slate-800">0</b> 起 · <b class="text-slate-800">0.0</b> 万元
|
||
</span>
|
||
<NButton size="small" ghost class="ml-auto text-xs" @click="exportFile">
|
||
<Icon icon="material-symbols:download" class="size-16px" />导出
|
||
</NButton>
|
||
</div>
|
||
<div class="rounded-lg bg-white shadow-[0_2px_8px_rgba(0,0,0,0.06)]">
|
||
<div class="flex items-center gap-3 border-b bg-slate-50 px-4 py-2 text-[11px] font-semibold text-slate-500">
|
||
<span class="min-w-0 flex-1">变更名称 / 编号</span>
|
||
<span class="w-[92px] shrink-0">申请日期</span>
|
||
<span class="w-[92px] shrink-0">投用日期</span>
|
||
<span class="w-[92px] shrink-0">验收日期</span>
|
||
<span class="w-[80px] shrink-0 text-right">费用（万元）</span>
|
||
<span class="w-[100px] shrink-0 text-center">是否达到预期效果</span>
|
||
<span class="w-[64px] shrink-0 text-right">操作</span>
|
||
</div>
|
||
<div class="scroll">
|
||
<div class="divide-y">
|
||
<div v-for="r in list" :key="r.id" class="flex flex-wrap items-center gap-x-3 gap-y-1.5 px-4 py-3 transition hover:bg-[#EAF0F9]/40">
|
||
<span class="min-w-0 flex-1">
|
||
<span class="flex flex-wrap items-center gap-1.5">
|
||
<span class="truncate text-sm font-medium text-slate-800">{{ r.title }}</span>
|
||
<NTag v-if="r.level==='一般'" size="small">{{ r.level }}</NTag>
|
||
<NTag v-if="r.level==='重要'" size="small" type="error">{{ r.level }}</NTag>
|
||
<NTag size="small" type="info">{{ r.type }}</NTag>
|
||
<NTag v-if="r.duration==='永久'" size="small">{{ r.duration }}</NTag>
|
||
<NTag v-if="r.duration==='临时'" size="small" type="warning">{{ r.duration }}</NTag>
|
||
</span>
|
||
<span class="mt-0.5 block font-mono text-[11px] text-slate-400">{{ r.id }} · {{ r.applicant }} · 费用取验收时填报的「变更材料和实施费」</span>
|
||
</span>
|
||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.applyDate }}</span>
|
||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.useTime }}</span>
|
||
<span class="w-[92px] shrink-0 text-xs text-slate-600">{{ r.acceptDate }}</span>
|
||
<span class="w-[80px] shrink-0 text-right text-sm font-bold text-slate-800">{{ r.cost.toFixed(1) }}</span>
|
||
<span class="w-[100px] shrink-0 text-center">
|
||
<NTag v-if="r.result==='完全达到'" size="small" type="success">{{ r.result }}</NTag>
|
||
<NTag v-if="r.result==='基本达到'" size="small" type="warning">{{ r.result }}</NTag>
|
||
<NTag v-if="r.result==='未达到'" size="small" type="error">{{ r.result }}</NTag>
|
||
</span>
|
||
<span class="w-[64px] shrink-0 text-right">
|
||
<NButton size="small" ghost class="text-xs" @click="openRow(r)">查看</NButton>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</NCard>
|
||
</NSpin>
|
||
</NSpace>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.scroll {
|
||
height: calc(100vh - 240px);
|
||
overflow-y: auto;
|
||
}
|
||
</style>
|