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

模板管理

Browse Source
This commit is contained in:
Teo
2025-07-02 21:21:02 +08:00
parent 800576de3c
commit d698245da5
9 changed files with 740 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
src/views/template/components/contactform.vue Normal file
View File

@ -0,0 +1,146 @@
<template>
<div class="content-box">
<el-table :data="[form, { ...form, id: '2' }]" 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="serialNumber" label="编号" />
<el-table-column align="center" prop="to" label="致" />
<el-table-column align="center" prop="subject" label="主题" />
<el-table-column align="center" prop="content" label="内容">
<template #default="{ row }">
<div style="white-space: pre-line">{{ row.content }}</div>
</template>
</el-table-column>
<el-table-column align="center" label="附件">
<template #default="{ row }">
<a v-if="row.attachments" :href="row.attachments" target="_blank">查看附件</a>
<span v-else>无</span>
</template>
</el-table-column>
<!-- 分段标题：施工项目部 -->
<el-table-column label="施工项目部" align="center">
<el-table-column align="center" prop="contractorLeader" label="项目负责人" />
<el-table-column align="center" prop="contractorDate" label="日期" />
</el-table-column>
<!-- 分段标题：项目监理机构 -->
<el-table-column label="项目监理机构" align="center">
<el-table-column align="center" prop="supervisorLeader" label="总监理工程师" />
<el-table-column align="center" prop="supervisorDate" label="日期" />
</el-table-column>
<!-- 分段标题：建设单位 -->
<el-table-column label="建设单位" align="center">
<el-table-column align="center" prop="ownerRep" label="业主代表" />
<el-table-column align="center" prop="ownerDate" label="日期" />
</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="handleDelete(scope.row)"> 下载 </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>
<pagination v-show="total > 0" :total="total" v-model:page="form.pageNum" v-model:limit="form.pageSize" @pagination="getList" />
<!-- 详情 -->
<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" style="text-align: left">工程名称：</el-col>
<el-col :span="12" style="text-align: right">编号：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="致:" :span="2" 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">
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" 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="项目负责人" label-class-name="white"> </el-descriptions-item>
<el-descriptions-item label-align="center" label="日期" label-class-name="white"> </el-descriptions-item>
</el-descriptions>
</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>
const emit = defineEmits(['selection-change']);
const form = reactive({
id: '1',
projectName: '',
serialNumber: '',
to: '',
subject: '',
content: '',
attachments: '', // 或 URL
contractorLeader: '',
contractorDate: '',
supervisorLeader: '',
supervisorDate: '',
ownerRep: '',
ownerDate: '',
pageNum: 1,
pageSize: 10
});
const total = ref(0);
const detailVisible = ref(false);
/** 多选框选中数据 */
const handleSelectionChange = (selection: any) => {
emit('selection-change', selection);
};
const handleDetail = (row) => {
detailVisible.value = true;
};
const getList = (row) => {};
const handleDelete = (row) => {};
</script>
<style lang="scss" scoped>
:deep(.white) {
background: #fff !important;
}
:deep(.none) {
display: none !important;
}
:deep(.zebra) {
background: #f5f7fa;
}
</style>