From d698245da59e91ba37c3302c9722273cfb8d081b Mon Sep 17 00:00:00 2001
From: Teo <2642673902@qq.com>
Date: Wed, 2 Jul 2025 21:21:02 +0800
Subject: [PATCH] =?UTF-8?q?=E6=A8=A1=E6=9D=BF=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.ts                           |   2 +-
 .../materialsEquipment/partyA/index.vue       |   7 +
 .../materialsEquipment/partyB/index.vue       |   7 +
 src/views/progress/progressPaper/index.vue    |  94 -----
 .../component/recyclingStation.vue            |   5 +-
 src/views/safety/knowledgeDocument/index.vue  |  31 +-
 src/views/template/components/contactform.vue | 146 ++++++++
 .../engineeringChangeApplicationForm.vue      | 219 ++++++++++++
 src/views/template/index.vue                  | 333 ++++++++++++++++++
 9 files changed, 740 insertions(+), 104 deletions(-)
 create mode 100644 src/views/materials/materialsEquipment/partyA/index.vue
 create mode 100644 src/views/materials/materialsEquipment/partyB/index.vue
 create mode 100644 src/views/template/components/contactform.vue
 create mode 100644 src/views/template/components/engineeringChangeApplicationForm.vue
 create mode 100644 src/views/template/index.vue

diff --git a/src/router/index.ts b/src/router/index.ts
index 3e6195b..5eb2888 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -106,7 +106,7 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '/progress/progressPaper',
-    component: () => import('@/views/progress/progressPaper/test.vue'),
+    component: () => import('@/views/progress/progressPaper/index.vue'),
     hidden: true
   },
   {
diff --git a/src/views/materials/materialsEquipment/partyA/index.vue b/src/views/materials/materialsEquipment/partyA/index.vue
new file mode 100644
index 0000000..8505953
--- /dev/null
+++ b/src/views/materials/materialsEquipment/partyA/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="content-box">111</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/materials/materialsEquipment/partyB/index.vue b/src/views/materials/materialsEquipment/partyB/index.vue
new file mode 100644
index 0000000..f5bbf3d
--- /dev/null
+++ b/src/views/materials/materialsEquipment/partyB/index.vue
@@ -0,0 +1,7 @@
+<template>
+  <div class="content-box">22</div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoped></style>
diff --git a/src/views/progress/progressPaper/index.vue b/src/views/progress/progressPaper/index.vue
index d4c4024..7ea1a5d 100644
--- a/src/views/progress/progressPaper/index.vue
+++ b/src/views/progress/progressPaper/index.vue
@@ -407,98 +407,6 @@ const getList = async () => {
   }
 };
 
-const imageExtent = ref(null);
-const imageLayer = ref(null);
-import { get as getProjection } from 'ol/proj';
-
-const initGeoTiff = async () => {
-  // const tiff = await fromUrl('/image/clean_rgba_cleaned.tif');
-  // const image = await tiff.getImage();
-  // const width = image.getWidth();
-  // const height = image.getHeight();
-  // const bbox = image.getBoundingBox(); // [minX, minY, maxX, maxY]
-  // console.log('bbox', bbox);
-  // const rasters = await image.readRasters({ interleave: true });
-  // // 创建 Canvas
-  // const canvas = document.createElement('canvas');
-  // canvas.width = width;
-  // canvas.height = height;
-  // const ctx = canvas.getContext('2d')!;
-  // const imageData: any = ctx.createImageData(width, height);
-  // // 设置 RGBA 数据
-  // imageData.data.set(rasters); // ✅ 完整设置，不用手动循环
-  // ctx.putImageData(imageData, 0, 0);
-  // // 将 canvas 转成 Data URL 用作图层 source
-  // const imageUrl = canvas.toDataURL();
-  // // 转换为 WGS84 经纬度
-  // const minLonLat = transform([bbox[0], bbox[1]], 'EPSG:32648', 'EPSG:4326');
-  // const maxLonLat = transform([bbox[2], bbox[3]], 'EPSG:32648', 'EPSG:4326');
-  // // 转为 GCJ02（高德地图坐标系）
-  // const gcjMin = gcoord.transform(minLonLat as [number, number, number], gcoord.WGS84, gcoord.GCJ02);
-  // const gcjMax = gcoord.transform(maxLonLat as [number, number, number], gcoord.WGS84, gcoord.GCJ02);
-  // // 再转 EPSG:3857 供 OpenLayers 使用
-  // const minXY = fromLonLat(gcjMin);
-  // const maxXY = fromLonLat(gcjMax);
-
-  // imageExtent.value = [...minXY, ...maxXY];
-
-  // imageLayer.value = new ImageLayer({
-  //   source: new Static({
-  //     url: imageUrl,
-  //     imageExtent: imageExtent.value,
-  //     projection: 'EPSG:3857'
-  //   })
-  // });
-  // console.log('imageExtent', imageExtent.value);
-
-  // 1. 你的原始瓦片的边界（来自 .tfw 或你知道的数据）
-
-  // 1. 你的 bbox 是 WGS84 经纬度
-  const bbox = [107.13149481208748, 23.80411597354268, 107.13487254421389, 23.80801427852998];
-
-  // 2. 转成 GCJ02（高德坐标系）
-  const gcjMin = gcoord.transform([bbox[0], bbox[1]], gcoord.WGS84, gcoord.GCJ02);
-  const gcjMax = gcoord.transform([bbox[2], bbox[3]], gcoord.WGS84, gcoord.GCJ02);
-
-  // 3. 再转换成 EPSG:3857，用于 OpenLayers
-  const minXY = fromLonLat(gcjMin);
-  const maxXY = fromLonLat(gcjMax);
-
-  // 4. 组成瓦片范围 extent
-  const tileExtent = [...minXY, ...maxXY];
-  console.log('tileExtent', tileExtent);
-
-  // 5. 创建 tileGrid
-  const tileGrid = createXYZ({
-    extent: tileExtent,
-    tileSize: 256,
-    minZoom: 10,
-    maxZoom: 18
-  });
-
-  // 6. 使用 Web Mercator 投影 EPSG:3857
-  const projection = getProjection('EPSG:3857');
-
-  // 7. 创建瓦片图层
-  imageLayer.value = new TileLayer({
-    source: new XYZ({
-      projection,
-      tileGrid,
-      tileUrlFunction: (tileCoord) => {
-        if (!tileCoord) return '';
-        let [z, x, y] = tileCoord;
-        console.log(z, x, y);
-        y = Math.pow(2, z) - y - 1;
-        return `http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/${z}/${x}/${y}`;
-      }
-    })
-  });
-  const source = imageLayer.value.getSource();
-  const projections = source.getProjection();
-
-  console.log('图层使用的坐标系:', projections?.getCode());
-};
-
 let map: any = null;
 const centerPosition = ref(fromLonLat([107.12932403398425, 23.805564054229908]));
 const initOLMap = () => {
@@ -522,8 +430,6 @@ const initOLMap = () => {
           url: 'http://192.168.110.2:8000/api/projects/3/tasks/c2e3227f-343f-48b1-88c0-1432d6eab33f/orthophoto/tiles/{z}/{x}/{y}'
         })
       })
-      // imageLayer.value
-      // imageLayer.value
     ],
     // 设置地图的视图参数
     // View表示地图的视图，它定义了地图的中心点、缩放级别、旋转角度等参数。
diff --git a/src/views/safety/knowledgeDocument/component/recyclingStation.vue b/src/views/safety/knowledgeDocument/component/recyclingStation.vue
index 0b518da..af3213a 100644
--- a/src/views/safety/knowledgeDocument/component/recyclingStation.vue
+++ b/src/views/safety/knowledgeDocument/component/recyclingStation.vue
@@ -43,12 +43,8 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, reactive, getCurrentInstance, computed } from 'vue';
-import { ElMessageBox, ElMessage, ElLoading } from 'element-plus';
 import { documentDataAllList, templateRecycleBin, dataRecyclingStation } from '@/api/safety/knowledgeDocument';
 import { useUserStoreHook } from '@/store/modules/user';
-
-const proxy = getCurrentInstance()?.proxy as any;
 const userStore = useUserStoreHook();
 const currentProject = computed(() => userStore.selectedProject);
 
@@ -71,6 +67,7 @@ const getDocumentDataList = () => {
   loading.value = true;
   tableData.value = [];
   value.value = '2';
+  param.projectId = currentProject.value.id;
   documentDataAllList(param).then((res: any) => {
     tableData.value = res.rows ?? [];
     total.value = res.total;
diff --git a/src/views/safety/knowledgeDocument/index.vue b/src/views/safety/knowledgeDocument/index.vue
index cb6362e..7b224d4 100644
--- a/src/views/safety/knowledgeDocument/index.vue
+++ b/src/views/safety/knowledgeDocument/index.vue
@@ -262,7 +262,6 @@ const resetQuery = () => {
 // 获取树形结构文件夹目录
 const gettreeStructureData = () => {
   state.parentPid = null;
-  activeName.value = 'second';
   const loading = ElLoading.service({
     lock: true,
     text: '正在加载中……',
@@ -271,10 +270,10 @@ const gettreeStructureData = () => {
   });
   treeStructureData(state.projectId).then((res: any) => {
     loading.close();
-    if (res.code == 200 && res.data && res.data.length) {
-      state.selectedNodeId = '';
+    if (res.code == 200) {
+      state.selectedNodeId = res.data[0] ? res.data[0].children[0].id : '';
       state.treeList = res.data;
-      state.paramsQuery.folderId = res.data[0].id;
+      state.paramsQuery.folderId = res.data[0] ? res.data[0].children[0].id : '';
       getdocumentDataList();
       // setInfo(res.data);
     }
@@ -313,6 +312,8 @@ const handleNodeClick = (row) => {
 // 获取文档列表数据
 const getdocumentDataList = () => {
   if (!state.paramsQuery.folderId) {
+    state.infoList = [];
+    state.total = 0;
     return;
   }
   state.loading = true;
@@ -339,7 +340,8 @@ const handleDelete = (row) => {
 
 //切换tab
 const handleCheckMian = (tab, event) => {
-  activeName.value = tab.name;
+  activeName.value = tab.paneName;
+
   if (activeName.value === 'first') {
     gettreeStructureData();
   } else {
@@ -448,6 +450,25 @@ const onBook = () => {
 onMounted(() => {
   gettreeStructureData();
 });
+
+//监听项目id刷新数据
+const listeningProject = watch(
+  () => currentProject.value.id,
+  (nid, oid) => {
+    state.projectId = nid;
+    state.paramsQuery.projectId = nid;
+    if (activeName.value === 'first') {
+      gettreeStructureData();
+    } else {
+      // 回收站
+      recylingRef.value.getDocumentDataList();
+    }
+  }
+);
+
+onUnmounted(() => {
+  listeningProject();
+});
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/views/template/components/contactform.vue b/src/views/template/components/contactform.vue
new file mode 100644
index 0000000..9924e5d
--- /dev/null
+++ b/src/views/template/components/contactform.vue
@@ -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>
diff --git a/src/views/template/components/engineeringChangeApplicationForm.vue b/src/views/template/components/engineeringChangeApplicationForm.vue
new file mode 100644
index 0000000..6b6da72
--- /dev/null
+++ b/src/views/template/components/engineeringChangeApplicationForm.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="content-box">
+    <el-table :data="[form]" border 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>
diff --git a/src/views/template/index.vue b/src/views/template/index.vue
new file mode 100644
index 0000000..0f594bb
--- /dev/null
+++ b/src/views/template/index.vue
@@ -0,0 +1,333 @@
+<template>
+  <div class="p-2">
+    <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
+      <div v-show="showSearch" class="mb-[10px]">
+        <el-card shadow="hover">
+          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+            <el-form-item label="模板类型" prop="projectType">
+              <el-select v-model="queryParams.projectType" value-key="" placeholder="请选择模板类型" clearable filterable @change="">
+                <el-option v-for="item in projectTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </div>
+    </transition>
+    <el-card shadow="never">
+      <template #header>
+        <el-row :gutter="10" class="mb8">
+          <el-col :span="1.5">
+            <el-button type="primary" plain icon="Plus" :disabled="addSingle" @click="handleAdd" v-hasPermi="['quality:qualityInspection:add']"
+              >新增</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate()" v-hasPermi="['quality:qualityInspection:edit']"
+              >修改</el-button
+            >
+          </el-col>
+          <el-col :span="1.5">
+            <el-button
+              type="danger"
+              plain
+              icon="Delete"
+              :disabled="multiple"
+              @click="handleDelete()"
+              v-hasPermi="['quality:qualityInspection:remove']"
+              >删除</el-button
+            >
+          </el-col>
+          <!-- <el-col :span="1.5">
+            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['quality:qualityInspection:export']">导出</el-button>
+          </el-col> -->
+          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+      </template>
+      <!-- card body -->
+      <Contactform v-if="queryParams.projectType == '0'" @selection-change="handleSelectionChange"></Contactform>
+      <EngineeringChangeApplicationForm
+        v-if="queryParams.projectType == '1'"
+        @selection-change="handleSelectionChange"
+      ></EngineeringChangeApplicationForm>
+    </el-card>
+
+    <el-dialog title="新增模板" v-model="dialogVisible" width="800">
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="110px">
+        <!-- <el-form-item label="模板类型" prop="projectType">
+          <el-select v-model="form.projectType" value-key="" placeholder="请选择模板类型" clearable filterable @change="">
+            <el-option v-for="item in projectTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
+          </el-select>
+        </el-form-item> -->
+
+        <div v-if="queryParams.projectType == '0'">
+          <el-form-item label="工程名称" prop="projectName">
+            <el-input v-model="form.projectName" placeholder="请输入工程名称" />
+          </el-form-item>
+          <el-form-item label="编号" prop="serialNumber">
+            <el-input v-model="form.serialNumber" placeholder="请输入编号" />
+          </el-form-item>
+          <el-form-item label="致" prop="to">
+            <el-input v-model="form.to" placeholder="致：" />
+          </el-form-item>
+          <el-form-item label="主题" prop="subject">
+            <el-input v-model="form.subject" placeholder="请输入主题" />
+          </el-form-item>
+          <el-form-item label="内容" prop="content">
+            <el-input v-model="form.content" type="textarea" :rows="6" placeholder="请输入内容" />
+          </el-form-item>
+          <el-form-item label="附件" prop="attachments">
+            <file-upload v-model="form.attachments" :limit="1" :file-type="['pdf', 'png', 'jpg', 'jpeg', 'gif', 'bmp']"></file-upload>
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">施工项目部</el-divider>
+          <el-form-item label="项目负责人" prop="contractorLeader">
+            <el-input v-model="form.contractorLeader" placeholder="请输入负责人姓名" />
+          </el-form-item>
+          <el-form-item label="日期" prop="contractorDate">
+            <el-date-picker v-model="form.contractorDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">项目监理机构</el-divider>
+
+          <el-form-item label="总监理工程师" prop="supervisorLeader">
+            <el-input v-model="form.supervisorLeader" placeholder="请输入总监理工程师姓名" />
+          </el-form-item>
+          <el-form-item label="日期" prop="supervisorDate">
+            <el-date-picker v-model="form.supervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">建设单位</el-divider>
+          <el-form-item label="业主代表" prop="ownerRep">
+            <el-input v-model="form.ownerRep" placeholder="请输入业主代表" />
+          </el-form-item>
+          <el-form-item label="日期" prop="ownerDate">
+            <el-date-picker v-model="form.ownerDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+        </div>
+
+        <!-- <el-form-item>
+        <el-button type="primary" @click="submitForm">提交</el-button>
+        <el-button @click="resetForm">重置</el-button>
+      </el-form-item> -->
+        <div v-if="queryParams.projectType === '1'">
+          <el-form-item label="工程名称">
+            <el-input v-model="form.projectName" />
+          </el-form-item>
+
+          <el-form-item label="提出单位">
+            <el-input v-model="form.unitName" />
+          </el-form-item>
+
+          <el-form-item label="专业">
+            <el-input v-model="form.profession" />
+          </el-form-item>
+
+          <el-form-item label="提出日期">
+            <el-date-picker v-model="form.applyDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+
+          <el-form-item label="卷册名称">
+            <el-input v-model="form.bookName" />
+          </el-form-item>
+
+          <el-form-item label="卷册号">
+            <el-input v-model="form.bookNo" />
+          </el-form-item>
+
+          <el-form-item label="附图">
+            <image-upload v-model="form.hasAttachment"></image-upload>
+          </el-form-item>
+
+          <el-form-item label="变更原因">
+            <el-checkbox-group v-model="form.changeReasons">
+              <el-checkbox label="设计漏项" class="w45%" />
+              <el-checkbox label="设计改进" />
+              <el-checkbox label="设计差错" class="w45%" />
+              <el-checkbox label="接口差错" />
+              <el-checkbox label="业主要求" class="w45%" />
+              <el-checkbox label="施工承包商要求" />
+              <el-checkbox label="外部资料不符" class="w45%" />
+              <el-checkbox label="材料代用或其他" />
+            </el-checkbox-group>
+          </el-form-item>
+
+          <el-form-item label="变更内容">
+            <el-input v-model="form.changeContent" />
+          </el-form-item>
+
+          <el-form-item label="变更费用估算">
+            <el-input v-model="form.costEstimate" />
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">施工承包单位</el-divider>
+          <el-form-item label="项目经理" prop="supervisorLeader">
+            <el-input v-model="form.supervisorLeader" placeholder="请输入项目经理姓名" />
+          </el-form-item>
+          <el-form-item label="日期" prop="supervisorDate">
+            <el-date-picker v-model="form.supervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">总承包单位</el-divider>
+          <el-form-item label="项目技术负责人" prop="supervisorLeader">
+            <el-input v-model="form.supervisorLeader" placeholder="请输入项目技术负责人姓名" />
+          </el-form-item>
+          <el-form-item label="日期" prop="supervisorDate">
+            <el-date-picker v-model="form.supervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">设计单位</el-divider>
+          <el-form-item label="设计代表" prop="supervisorLeader">
+            <el-input v-model="form.supervisorLeader" placeholder="请输入设计代表姓名" />
+          </el-form-item>
+          <el-form-item label="日期" prop="supervisorDate">
+            <el-date-picker v-model="form.supervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">项目监理单位</el-divider>
+          <el-form-item label="监理工程师" prop="supervisorLeader">
+            <el-input v-model="form.supervisorLeader" placeholder="请输入监理工程师姓名" />
+          </el-form-item>
+          <el-form-item label="总监理工程师" prop="supervisorLeader">
+            <el-input v-model="form.supervisorLeader" placeholder="请输入总监理工程师姓名" />
+          </el-form-item>
+          <el-form-item label="日期" prop="supervisorDate">
+            <el-date-picker v-model="form.supervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+          <el-divider class="mb-10! mt-10!">建设单位</el-divider>
+          <el-form-item label="负责人" prop="supervisorLeader">
+            <el-input v-model="form.supervisorLeader" placeholder="请输入负责人姓名" />
+          </el-form-item>
+          <el-form-item label="日期" prop="supervisorDate">
+            <el-date-picker v-model="form.supervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
+          </el-form-item>
+        </div>
+      </el-form>
+      <template #footer>
+        <span>
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="submitForm">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useUserStoreHook } from '@/store/modules/user';
+import type { FormInstance, FormRules } from 'element-plus';
+import Contactform from './components/contactform.vue';
+import EngineeringChangeApplicationForm from './components/engineeringChangeApplicationForm.vue';
+
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+
+const formRef = ref<FormInstance>();
+const dialogVisible = ref<boolean>(false);
+const showSearch = ref(true);
+const multiple = ref<boolean>(true);
+const addSingle = ref<boolean>(false);
+const single = ref<boolean>(true);
+const ids = ref<Array<string | number>>([]);
+
+const projectTypeOptions = [
+  {
+    value: '0',
+    label: '联系单'
+  },
+  {
+    value: '1',
+    label: '工程变更申请单'
+  },
+  {
+    value: '2',
+    label: '通知单'
+  },
+  {
+    value: '3',
+    label: '变更单'
+  },
+  {
+    value: '4',
+    label: '签证单'
+  }
+];
+
+const initFormData = {
+  id: undefined,
+  projectId: currentProject.value?.id,
+  projectType: '',
+  projectName: '',
+  serialNumber: '',
+  to: '',
+  subject: '',
+  content: '',
+  attachments: '',
+  contractorLeader: '',
+  contractorDate: '',
+  supervisorLeader: '',
+  supervisorDate: '',
+  ownerRep: '',
+  ownerDate: '',
+  unitName: '',
+  profession: '',
+  applyDate: '',
+  bookName: '',
+  bookNo: '',
+  hasAttachment: '',
+  changeReasons: [],
+  changeContent: '',
+  costEstimate: ''
+};
+const data = reactive<PageData<any, any>>({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    projectId: currentProject.value?.id,
+    inspectionType: undefined,
+    inspectionStatus: undefined,
+    teamId: undefined,
+    params: {},
+    projectType: '0'
+  },
+  rules: {
+    projectName: [{ required: true, message: '请输入工程名称', trigger: 'blur' }],
+    projectType: [{ required: true, message: '请选择模板类型', trigger: 'blur' }],
+    serialNumber: [{ required: true, message: '请输入编号', trigger: 'blur' }],
+    to: [{ required: true, message: '请输入接收方', trigger: 'blur' }],
+    subject: [{ required: true, message: '请输入主题', trigger: 'blur' }],
+    content: [{ required: true, message: '请输入内容', trigger: 'blur' }]
+  }
+});
+
+const { queryParams, form, rules } = toRefs(data);
+
+const submitForm = () => {
+  formRef.value?.validate((valid) => {
+    if (valid) {
+      console.log('提交表单：', form);
+    }
+  });
+};
+
+const handleAdd = () => {
+  dialogVisible.value = true;
+};
+
+const handleQuery = () => {};
+const resetQuery = () => {};
+const getList = () => {};
+const handleDelete = () => {};
+const handleUpdate = () => {};
+
+/** 多选框选中数据 */
+const handleSelectionChange = (selection: any) => {
+  ids.value = selection.map((item) => item.id);
+  single.value = selection.length != 1;
+  multiple.value = !selection.length;
+};
+
+const resetForm = () => {
+  formRef.value?.resetFields();
+};
+</script>