349 lines
15 KiB
Vue
349 lines
15 KiB
Vue
<template>
|
||
<div class="content-box">
|
||
<el-table :data="data" style="width: 100%" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" align="center" />
|
||
<el-table-column align="center" prop="projectName" label="工程名称" />
|
||
<el-table-column align="center" prop="unitName" label="提出单位" />
|
||
<el-table-column align="center" prop="profession" label="专业" />
|
||
<el-table-column align="center" prop="applyDate" label="提出日期">
|
||
<template #default="{ row }">
|
||
{{ formatDate(row.applyDate) }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column align="center" prop="bookName" label="卷册名称" />
|
||
<el-table-column align="center" prop="bookNo" label="卷册号" />
|
||
<!-- <el-table-column align="center" label="附图">
|
||
<template #default="{ row }">
|
||
<ImagePreview :src="row.hasAttachment" disabled :width="80" />
|
||
</template>
|
||
</el-table-column> -->
|
||
<!-- <el-table-column align="center" prop="changeReasons" label="变更原因" width="100">
|
||
<template #default="{ row }">
|
||
{{ row.changeReasons?.join(', ') }}
|
||
</template>
|
||
</el-table-column> -->
|
||
<el-table-column align="center" prop="changeContent" label="变更内容" />
|
||
<el-table-column align="center" prop="costEstimate" label="变更费用估算" />
|
||
|
||
<!-- <el-table-column label="施工承包单位" align="center">
|
||
<el-table-column align="center" prop="contractorManager" label="项目经理" width="100" />
|
||
<el-table-column align="center" prop="contractorDate" label="日期" width="130">
|
||
<template #default="{ row }">{{ formatDate(row.contractorDate) }}</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="总承包单位" align="center">
|
||
<el-table-column align="center" prop="generalTechLeader" label="项目技术负责人" width="150" />
|
||
<el-table-column align="center" prop="generalDate" label="日期" width="130">
|
||
<template #default="{ row }">{{ formatDate(row.generalDate) }}</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="设计单位" align="center">
|
||
<el-table-column align="center" prop="designer" label="设计代表" width="100" />
|
||
<el-table-column align="center" prop="designerDate" label="日期" width="130">
|
||
<template #default="{ row }">{{ formatDate(row.designerDate) }}</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="项目监理单位" align="center">
|
||
<el-table-column align="center" prop="supervisorEngineer" label="监理工程师" width="100" />
|
||
<el-table-column align="center" prop="chiefSupervisor" label="总监理工程师" width="110" />
|
||
<el-table-column align="center" prop="supervisorDate" label="日期" width="130">
|
||
<template #default="{ row }">{{ formatDate(row.supervisorDate) }}</template>
|
||
</el-table-column>
|
||
</el-table-column>
|
||
|
||
<el-table-column label="建设单位" align="center">
|
||
<el-table-column align="center" prop="ownerLeader" label="负责人" />
|
||
<el-table-column align="center" prop="ownerDate" label="日期" width="130">
|
||
<template #default="{ row }">{{ formatDate(row.ownerDate) }}</template>
|
||
</el-table-column>
|
||
</el-table-column> -->
|
||
|
||
<el-table-column align="center" prop="content" label="操作" width="160">
|
||
<template #default="scope">
|
||
<el-button link type="success" icon="View" @click="handleDetail(scope.row)" class="ml-3"> 详情 </el-button>
|
||
<el-button link type="primary" icon="Download" @click="handleDownload()"> 下载 </el-button>
|
||
<!-- <el-button link type="warning" icon="Edit" @click="handleDelete(scope.row)"> 修改 </el-button> -->
|
||
<el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"> 删除 </el-button>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
|
||
<!-- 详情 -->
|
||
<el-dialog title="工程变更申请单详情" v-model="detailVisible" width="1000">
|
||
<div class="w[850px] ma word-export-wrapper" ref="exportRef">
|
||
<div class="w80% ma">
|
||
<h2 style="text-align: center; margin-top: 5px; font-weight: bold">工程变更申请单</h2>
|
||
<el-row>
|
||
<el-col :span="12">编号：{{ tableDetail.id }}</el-col>
|
||
</el-row>
|
||
<el-descriptions :column="2" border style="margin-top: 8px" label-width="160px" size="large">
|
||
<el-descriptions-item label-align="center" label="工程名称" class-name="zebra"> {{ tableDetail.projectName }} </el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="提出单位" class-name="zebra"> {{ tableDetail.unitName }} </el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="专业" label-class-name="white"> {{ tableDetail.profession }} </el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="提出日期" label-class-name="white">
|
||
{{ dayjs(tableDetail.applyDate).format('YYYY-MM-DD') }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="卷册名称" class-name="zebra"> {{ tableDetail.bookName }} </el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="卷册号" class-name="zebra"> {{ tableDetail.bookNo }} </el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="附图" :span="2" label-class-name="white">
|
||
<image-preview :src="item.url" v-for="item in tableDetail.hasAttachmentList" width="200px" class="mr" />
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="变更原因" :span="2" class-name="zebra">
|
||
<el-checkbox-group v-model="tableDetail.changeReasons">
|
||
<el-checkbox
|
||
v-for="(item, index) in radioList"
|
||
:class="index % 2 == 0 ? 'w45%' : ''"
|
||
:label="item.label"
|
||
:value="item.label"
|
||
disabled
|
||
/>
|
||
</el-checkbox-group>
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="内容" :span="2" label-class-name="white">
|
||
{{ tableDetail.changeContent }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="变更费用估算" :span="2" class-name="zebra">
|
||
{{ tableDetail.costEstimate }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions border direction="vertical" size="large">
|
||
<el-descriptions-item label-align="center" label="施工承包单位" class-name="none"></el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions :column="2" border label-width="160px" size="large">
|
||
<el-descriptions-item label-align="center" label="项目经理 " label-class-name="white">
|
||
{{ tableDetail.asupervisorLeader }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||
{{ dayjs(tableDetail.asupervisorDate).format('YYYY-MM-DD') }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions border direction="vertical" size="large">
|
||
<el-descriptions-item label-align="center" label="总承包单位" class-name="none"></el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions :column="2" border label-width="160px" size="large">
|
||
<el-descriptions-item label-align="center" label="项目技术负责人" label-class-name="white">{{
|
||
tableDetail.bsupervisorLeader
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||
{{ dayjs(tableDetail.bsupervisorDate).format('YYYY-MM-DD') }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions border direction="vertical" size="large">
|
||
<el-descriptions-item label-align="center" label="设计单位" class-name="none"></el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions :column="2" border label-width="160px" size="large">
|
||
<el-descriptions-item label-align="center" label="设计代表" label-class-name="white">{{
|
||
tableDetail.csupervisorLeader
|
||
}}</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||
{{ dayjs(tableDetail.csupervisorDate).format('YYYY-MM-DD') }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions border direction="vertical" size="large">
|
||
<el-descriptions-item label-align="center" label="项目监理单位" class-name="none"></el-descriptions-item>
|
||
</el-descriptions>
|
||
|
||
<!-- 单独插入整行占用的内容 -->
|
||
<el-descriptions :column="2" border label-width="160px" size="large">
|
||
<el-descriptions-item label="总监理工程师" :span="2" label-align="center" label-class-name="white">
|
||
{{ tableDetail.dasupervisorLeader }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<!-- 一组完整两列 -->
|
||
<el-descriptions :column="2" border label-width="160px" size="large">
|
||
<el-descriptions-item label="监理工程师" label-align="center" label-class-name="white">
|
||
{{ tableDetail.dsupervisorLeader }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label="日期" label-align="center" label-class-name="white">
|
||
{{ dayjs(tableDetail.dsupervisorDate).format('YYYY-MM-DD') }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions border direction="vertical" size="large">
|
||
<el-descriptions-item label-align="center" label="建设单位" class-name="none"></el-descriptions-item>
|
||
</el-descriptions>
|
||
<el-descriptions :column="2" border label-width="160px" size="large">
|
||
<!-- <el-descriptions-item label-align="center" label="会签" :span="2" label-class-name="white"> {{ tableDetail.esupervisorLeader }} </el-descriptions-item> -->
|
||
<el-descriptions-item label-align="center" label="负责人" label-class-name="white">
|
||
{{ tableDetail.esupervisorLeader }}
|
||
</el-descriptions-item>
|
||
<el-descriptions-item label-align="center" label="日期" label-class-name="white">
|
||
{{ dayjs(tableDetail.esupervisorDate).format('YYYY-MM-DD') }}
|
||
</el-descriptions-item>
|
||
</el-descriptions>
|
||
</div>
|
||
</div>
|
||
|
||
<template #footer>
|
||
<!-- <span>
|
||
<el-button @click="detailVisible = false">Cancel</el-button>
|
||
<el-button type="primary" @click="">OK</el-button>
|
||
</span> -->
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { listByIds } from '@/api/system/oss';
|
||
import { dayjs } from 'element-plus';
|
||
import { saveAs } from 'file-saver';
|
||
const form = reactive({
|
||
projectName: '',
|
||
unitName: '',
|
||
profession: '',
|
||
applyDate: '2025-6-23 13:03:56',
|
||
bookName: '',
|
||
bookNo: '',
|
||
hasAttachment:
|
||
'http://58.17.134.85:9000/xinnengyuan-dev/doc/safety/knowledge/1897160897167638529/知识库/指导手册/2025-06-27_2f56bca1c4bc46c6b226858a18713c48.jpg', // 附图链接或图片地址
|
||
changeReasons: [0, 3, 5],
|
||
changeContent: '',
|
||
costEstimate: '',
|
||
|
||
contractorManager: '',
|
||
contractorDate: '',
|
||
generalTechLeader: '',
|
||
generalDate: '',
|
||
designer: '',
|
||
designerDate: '',
|
||
supervisorEngineer: '',
|
||
chiefSupervisor: '',
|
||
supervisorDate: '',
|
||
ownerLeader: '',
|
||
ownerDate: ''
|
||
});
|
||
|
||
const props = defineProps({
|
||
data: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
});
|
||
const tableDetail = ref<any>({});
|
||
const exportRef = ref<HTMLElement>();
|
||
const radioList = ref([
|
||
{ value: 0, label: '设计漏项' },
|
||
{ value: 1, label: '设计改进' },
|
||
{ value: 2, label: '设计差错' },
|
||
{ value: 3, label: '接口差错' },
|
||
{ value: 4, label: '业主要求' },
|
||
{ value: 5, label: '施工承包商要求' },
|
||
{ value: 6, label: '外部资料不符' },
|
||
{ value: 7, label: '材料代用或其他' }
|
||
]);
|
||
const detailVisible = ref(false);
|
||
const formatDate = (val: string | Date) => (val ? dayjs(val).format('YYYY-MM-DD') : '');
|
||
|
||
const handleDetail = async (row) => {
|
||
const res = await listByIds(row.hasAttachment);
|
||
tableDetail.value = {
|
||
...row,
|
||
hasAttachmentList: res.data
|
||
};
|
||
console.log(tableDetail.value);
|
||
|
||
detailVisible.value = true;
|
||
};
|
||
/** 多选框选中数据 */
|
||
const emit = defineEmits(['selection-change', 'delete']);
|
||
const handleSelectionChange = (selection: any) => {
|
||
emit('selection-change', selection);
|
||
};
|
||
const handleDelete = (row) => {
|
||
emit('delete', row.id);
|
||
};
|
||
|
||
const handleDownload = () => {
|
||
const style = `
|
||
<style>
|
||
.white { background: #fff !important; }
|
||
.none { display: none !important; }
|
||
.zebra { background: #f5f7fa !important; }
|
||
.el-descriptions__table { table-layout: fixed !important; }
|
||
table { border-collapse: collapse; width: 100%; }
|
||
th, td { border: 1px solid #333; padding: 6px; font-size: 14px; }
|
||
</style>
|
||
`;
|
||
|
||
const el = exportRef.value;
|
||
if (!el) return;
|
||
|
||
// 拷贝 DOM，避免修改原内容
|
||
const clone = el.cloneNode(true) as HTMLElement;
|
||
|
||
applyInlineTableStyles(clone);
|
||
|
||
// 包裹 HTML 内容
|
||
const html = `
|
||
<html>
|
||
<head>
|
||
<meta charset="utf-8">
|
||
${style}
|
||
</head>
|
||
<body>
|
||
${clone.innerHTML}
|
||
</body>
|
||
</html>
|
||
`;
|
||
|
||
const blob = (window as any).htmlDocx.asBlob(html);
|
||
saveAs(blob, '工程变更申请单.docx');
|
||
};
|
||
const applyInlineTableStyles = (rootEl: HTMLElement) => {
|
||
rootEl.querySelectorAll('table').forEach((table) => {
|
||
table.setAttribute('style', 'width:100%; border-collapse:collapse; table-layout:fixed; border:1px solid #333;');
|
||
});
|
||
|
||
rootEl.querySelectorAll('th, td').forEach((cell) => {
|
||
cell.setAttribute('style', 'border:1px solid #333; padding:6px; font-size:14px; word-break:break-all;');
|
||
});
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.white) {
|
||
background: #fff !important;
|
||
}
|
||
|
||
:deep(.none) {
|
||
display: none !important;
|
||
}
|
||
|
||
:deep(.zebra) {
|
||
background: #f5f7fa;
|
||
}
|
||
:deep(.el-descriptions__table) {
|
||
table-layout: fixed !important;
|
||
}
|
||
.word-export-wrapper {
|
||
table {
|
||
width: 100% !important;
|
||
border-collapse: collapse;
|
||
table-layout: fixed;
|
||
word-break: break-all;
|
||
}
|
||
|
||
th,
|
||
td {
|
||
border: 1px solid #333;
|
||
padding: 8px;
|
||
font-size: 14px;
|
||
text-align: left;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
/* 确保不超出 Word 页边距 */
|
||
margin: 0 auto;
|
||
max-width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.el-descriptions__label {
|
||
font-weight: bold;
|
||
background-color: #f2f2f2;
|
||
}
|
||
</style>
|