td_official/src/views/template/components/contactform.vue

<template>
  <div class="content-box">
    <el-table :data="[form, { ...form, id: '2' }]" @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>