147 lines
6.6 KiB
Vue
147 lines
6.6 KiB
Vue
<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>
|