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

<template>
  <div class="content-box">
    <el-table :data="[form]" 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="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>

    <!-- 详情 -->
    <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>
      </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 { dayjs } from 'element-plus';

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 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 = (row) => {
  detailVisible.value = true;
};
/** 多选框选中数据 */
const emit = defineEmits(['selection-change']);
const handleSelectionChange = (selection: any) => {
  emit('selection-change', selection);
};
const handleDelete = (row) => {};
</script>

<style lang="scss" scoped>
:deep(.white) {
  background: #fff !important;
}

:deep(.none) {
  display: none !important;
}

:deep(.zebra) {
  background: #f5f7fa;
}
</style>