td_official/src/views/template/components/engineeringChangeApplicationForm.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>