taoge_xiaodi/td_official
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dom转word

Browse Source
This commit is contained in:
Teo
2025-07-04 19:57:23 +08:00
parent 7f5300b4f4
commit d1cf9a1a74
10 changed files with 13842 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

287
src/views/template/components/engineeringChangeApplicationForm.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="content-box">
<el-table :data="[form]" style="width: 100%" @selection-change="handleSelectionChange">
<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="提出单位" />
@ -12,11 +12,11 @@
</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="附图">
<!-- <el-table-column align="center" label="附图">
<template #default="{ row }">
<ImagePreview :src="row.hasAttachment" disabled :width="80" />
</template>
</el-table-column>
</el-table-column> -->
<!-- <el-table-column align="center" prop="changeReasons" label="变更原因" width="100">
<template #default="{ row }">
{{ row.changeReasons?.join(', ') }}
@ -24,8 +24,8 @@
</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 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>
@ -64,83 +64,118 @@
<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="handleDelete(scope.row)"> 下载 </el-button>
<el-button link type="warning" icon="Edit" @click="handleDelete(scope.row)"> 修改 </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="60vw">
<div class="w80% ma">
<h2 style="text-align: center; margin-top: 5px; font-weight: bold">工程变更申请单</h2>
<el-row>
<el-col :span="12">编号：123123123132</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"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="提出单位" class-name="zebra"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="专业" label-class-name="white"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="提出日期" label-class-name="white"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="卷册名称" class-name="zebra"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="卷册号" class-name="zebra"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="附图" :span="2" label-class-name="white"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="变更原因" :span="2" class-name="zebra">
<el-checkbox-group v-model="form.changeReasons">
<el-checkbox
v-for="(item, index) in radioList"
:class="index % 2 == 0 ? 'w45%' : ''"
:label="item.label"
:value="item.value"
disabled
/>
</el-checkbox-group>
</el-descriptions-item>
<el-descriptions-item label-align="center" label="内容" :span="2" label-class-name="white">
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Aspernatur molestiae nam sunt laudantium, illum praesentium dolorum. Mollitia,
exercitationem. Veritatis recusandae est quas libero, placeat laborum. Ab enim eaque magni ratione.
</el-descriptions-item>
<el-descriptions-item label-align="center" label="变更费用估算" :span="2" class-name="zebra"> </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"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="日期" label-class-name="white"> </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"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="日期" label-class-name="white"> </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"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="日期" label-class-name="white"> </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"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="监理工程师" label-class-name="white"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="日期" label-class-name="white"> </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"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="负责人" label-class-name="white"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="日期" label-class-name="white"> </el-descriptions-item>
</el-descriptions>
<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>
@ -152,8 +187,9 @@
</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: '',
@ -180,6 +216,14 @@ const form = reactive({
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: '设计改进' },
@ -193,15 +237,70 @@ const radioList = ref([
const detailVisible = ref(false);
const formatDate = (val: string | Date) => (val ? dayjs(val).format('YYYY-MM-DD') : '');
const handleDetail = (row) => {
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']);
const emit = defineEmits(['selection-change', 'delete']);
const handleSelectionChange = (selection: any) => {
emit('selection-change', selection);
};
const handleDelete = (row) => {};
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>
@ -216,4 +315,34 @@ const handleDelete = (row) => {};
: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>