diff --git a/src/views/cory/template/components/contactform.vue b/src/views/cory/template/components/contactform.vue
index 42781ce..d280eb9 100644
--- a/src/views/cory/template/components/contactform.vue
+++ b/src/views/cory/template/components/contactform.vue
@@ -163,12 +163,11 @@ const handleSelectionChange = (selection: any) => {
 };
 
 const handleDetail = async (row) => {
-  const res = await listByIds(row.attachments);
+  const res = await listByIds(row.id);
   tableDetail.value = {
     ...row,
     ...res.data[0]
   };
-  console.log('🚀 ~ handleDetail ~ tableDetail.value:', tableDetail.value);
   detailVisible.value = true;
 };
 
diff --git a/src/views/cory/template/components/engineeringChangeApplicationForm.vue b/src/views/cory/template/components/engineeringChangeApplicationForm.vue
index d10ae8f..fc24a51 100644
--- a/src/views/cory/template/components/engineeringChangeApplicationForm.vue
+++ b/src/views/cory/template/components/engineeringChangeApplicationForm.vue
@@ -12,65 +12,22 @@
       </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 align="center" prop="costEstimate" label="变更费用估算1" />
+      <el-table-column label="流程状态" align="center" prop="status">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.status" />
+          </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">
+      <el-table-column align="center" prop="content" label="操作" width="240">
         <template #default="scope">
+          <el-button link type="warning" v-if="scope.row.status === 'draft'" icon="Edit" @click="handleUpdate(scope.row)" class="ml-3">审批 </el-button>
+          <el-button link type="primary" icon="View" @click="handleViewInfo(scope.row)" class="ml-3"> 查看流程 </el-button>
           <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">
@@ -189,36 +146,16 @@
 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 { proxy } = getCurrentInstance() as ComponentInternalInstance;
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
 const props = defineProps({
   data: {
     type: Array,
     default: () => []
+  },
+  thumbnail:{
+    type: String,
+    default:''
   }
 });
 const tableDetail = ref<any>({});
@@ -237,13 +174,11 @@ 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);
+  const res = await listByIds(row.id);
   tableDetail.value = {
     ...row,
     hasAttachmentList: res.data
   };
-  console.log(tableDetail.value);
-
   detailVisible.value = true;
 };
 /** 多选框选中数据 */
@@ -254,7 +189,32 @@ const handleSelectionChange = (selection: any) => {
 const handleDelete = (row) => {
   emit('delete', row.id);
 };
-
+const handleUpdate = (row) => {
+  // 添加审批
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/cory/template/indexEdit`,
+    query: {
+      thumbnailUrl:props.thumbnail,
+      row:JSON.stringify(row),
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+const handleViewInfo = (row) => {
+  // 添加审批
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/cory/template/indexEdit`,
+    query: {
+      thumbnailUrl:props.thumbnail,
+      row:JSON.stringify(row),
+      id: row.id,
+      type: 'view'
+    }
+  });
+};
 const handleDownload = () => {
   const style = `
   <style>
diff --git a/src/views/cory/template/index.vue b/src/views/cory/template/index.vue
index 407de8b..55b6f98 100644
--- a/src/views/cory/template/index.vue
+++ b/src/views/cory/template/index.vue
@@ -1,75 +1,63 @@
 <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" placeholder="请选择模板类型" clearable filterable @change="selectType">
-                <el-option v-for="item in projectTypeOptions" :key="item.name" :label="item.name" :value="item.name"> </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 == '外部联系单'"
-        @selection-change="handleSelectionChange"
-        :data="tableData"
-        @delete="handleDelete"
-      ></Contactform>
-      <EngineeringChangeApplicationForm
-        v-if="queryParams.projectType == '变更单'"
-        @selection-change="handleSelectionChange"
-        :data="tableData"
-        @delete="handleDelete"
-      ></EngineeringChangeApplicationForm>
-      <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
-    </el-card>
-
+    <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
+      <el-tab-pane label="变更单" name="1"
+        ><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="handleAddApp" v-hasPermi="['quality:qualityInspection:add']"
+                  >上传变更单模版</el-button
+                >
+              </el-col>
+              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </template>
+          <EngineeringChangeApplicationForm
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            :thumbnail="projectTypeOptions[1].thumbnail"
+            @delete="handleDelete"
+          ></EngineeringChangeApplicationForm>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          /> </el-card
+      ></el-tab-pane>
+      <el-tab-pane label="外部联系单" name="0"
+        ><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>
+              <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+            </el-row>
+          </template>
+          <Contactform
+            @selection-change="handleSelectionChange"
+            :data="tableData"
+            @delete="handleDelete"
+          ></Contactform>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            v-model:page="queryParams.pageNum"
+            v-model:limit="queryParams.pageSize"
+            @pagination="getList"
+          /> </el-card
+      ></el-tab-pane>
+    </el-tabs>
     <el-dialog title="新增模板" v-model="dialogVisible" width="800">
       <el-form :model="form" :rules="rules" ref="formRef" label-width="110px">
         <div class="flex">
-          <!-- <img :src="thumbnailUrl" alt="" style="width: 150px;" /> -->
           <div><image-preview :src="thumbnailUrl" width="150px"></image-preview></div>
-
-          <div v-if="queryParams.projectType == '外部联系单'">
+          <div>
             <el-form-item label="工程名称" prop="projectName">
               <el-input v-model="form.projectName" placeholder="请输入工程名称" />
             </el-form-item>
@@ -111,94 +99,6 @@
               <el-date-picker v-model="form.ownerDate" type="date" placeholder="选择日期" style="width: 100%" />
             </el-form-item>
           </div>
-          <div v-if="queryParams.projectType === '变更单'">
-            <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="asupervisorLeader">
-              <el-input v-model="form.asupervisorLeader" placeholder="请输入项目经理姓名" />
-            </el-form-item>
-            <el-form-item label="日期" prop="asupervisorDate">
-              <el-date-picker v-model="form.asupervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
-            </el-form-item>
-            <el-divider class="mb-10! mt-10!">总承包单位</el-divider>
-            <el-form-item label="项目技术负责人" prop="bsupervisorLeader">
-              <el-input v-model="form.bsupervisorLeader" placeholder="请输入项目技术负责人姓名" />
-            </el-form-item>
-            <el-form-item label="日期" prop="bsupervisorDate">
-              <el-date-picker v-model="form.bsupervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
-            </el-form-item>
-            <el-divider class="mb-10! mt-10!">设计单位</el-divider>
-            <el-form-item label="设计代表" prop="csupervisorLeader">
-              <el-input v-model="form.csupervisorLeader" placeholder="请输入设计代表姓名" />
-            </el-form-item>
-            <el-form-item label="日期" prop="csupervisorDate">
-              <el-date-picker v-model="form.csupervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
-            </el-form-item>
-            <el-divider class="mb-10! mt-10!">项目监理单位</el-divider>
-            <el-form-item label="监理工程师" prop="dsupervisorLeader">
-              <el-input v-model="form.dsupervisorLeader" placeholder="请输入监理工程师姓名" />
-            </el-form-item>
-            <el-form-item label="总监理工程师" prop="dasupervisorLeader">
-              <el-input v-model="form.dasupervisorLeader" placeholder="请输入总监理工程师姓名" />
-            </el-form-item>
-            <el-form-item label="日期" prop="dsupervisorDate">
-              <el-date-picker v-model="form.dsupervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
-            </el-form-item>
-            <el-divider class="mb-10! mt-10!">建设单位</el-divider>
-            <el-form-item label="负责人" prop="esupervisorLeader">
-              <el-input v-model="form.esupervisorLeader" placeholder="请输入负责人姓名" />
-            </el-form-item>
-            <el-form-item label="日期" prop="esupervisorDate">
-              <el-date-picker v-model="form.esupervisorDate" type="date" placeholder="选择日期" style="width: 100%" />
-            </el-form-item>
-          </div>
         </div>
       </el-form>
       <template #footer>
@@ -224,15 +124,10 @@ const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const userStore = useUserStoreHook();
 // 从 store 中获取项目列表和当前选中的项目
 const currentProject = computed(() => userStore.selectedProject);
-const { safety_inspection_violation_type, safety_inspection_check_type } = toRefs<any>(
-  proxy?.useDict('safety_inspection_violation_type', 'safety_inspection_check_type')
-);
-const teamOpt = ref([]);
-const foremanOpt = ref([]);
 const thumbnailUrl = ref('');
 const tableData = ref([]);
 const total = ref(0);
-
+const activeName = ref('1')
 const formRef = ref<FormInstance>();
 const dialogVisible = ref<boolean>(false);
 const showSearch = ref(true);
@@ -338,17 +233,6 @@ const handleAdd = () => {
   dialogVisible.value = true;
 };
 
-const changeForeman = (value: string | number) => {
-  // const team = teamList.value.filter((team) => team.id === value)[0];
-  // foremanOpt.value = team.foremanList?.map((foreman: foremanQuery) => ({
-  //   label: foreman.foremanName,
-  //   value: foreman.foremanId
-  // }));
-  // form.value.correctorId = '';
-};
-
-const handleQuery = () => {};
-const resetQuery = () => {};
 const getList = async () => {
   if (!queryParams.value.projectType) {
     const res = await listContactTypeformtemplate(queryParams.value);
@@ -376,8 +260,6 @@ const handleDelete = async (id?: string) => {
     getList();
   }
 };
-const handleUpdate = () => {};
-
 /** 多选框选中数据 */
 const handleSelectionChange = (selection: any) => {
   ids.value = selection.map((item) => item.id);
@@ -392,10 +274,23 @@ const selectType = (value: string) => {
   getList();
 };
 
-const resetForm = () => {
-  formRef.value?.resetFields();
-};
-
+const handleClick=(val)=>{
+  console.log(val);
+  queryParams.value.projectType=val.props.name;
+  getList();
+}
+const handleAddApp=(row)=>{
+  // 添加审批
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/cory/template/indexEdit`,
+    query: {
+      thumbnailUrl: projectTypeOptions.value[1].thumbnail,
+      row,
+      type: 'add'
+    }
+  });
+}
 onMounted(() => {
   getList();
 });
diff --git a/src/views/cory/template/indexEdit.vue b/src/views/cory/template/indexEdit.vue
new file mode 100644
index 0000000..f87a617
--- /dev/null
+++ b/src/views/cory/template/indexEdit.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="p-4 bg-gray-50">
+    <div class="max-w-4xl mx-auto">
+      <!-- 顶部按钮区域 -->
+      <el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
+        <approvalButton
+          @submitForm="submitForm"
+          @approvalVerifyOpen="approvalVerifyOpen"
+          @handleApprovalRecord="handleApprovalRecord"
+          :buttonLoading="buttonLoading"
+          :id="form.id"
+          :status="form.status"
+          :pageType="routeParams.type"
+        />
+      </el-card>
+
+      <!-- 表单区域 -->
+      <el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
+        <div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
+          <h3 class="text-lg font-semibold text-gray-800">变更联系单</h3>
+        </div>
+        <div class="p-6">
+          <el-form
+            ref="leaveFormRef"
+            v-loading="loading"
+            :disabled="routeParams.type === 'view'"
+            :model="form"
+            :rules="rules"
+            label-width="100px"
+            class="space-y-4"
+          >
+            <div class="grid grid-cols-1 gap-4">
+              <div class="flex">
+                <div><image-preview :src="thumbnailUrl" width="150px"></image-preview></div>
+                <div>
+                  <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>
+              </div>
+            </div>
+          </el-form>
+        </div>
+      </el-card>
+      <!-- 提交组件 -->
+      <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
+      <approvalRecord ref="approvalRecordRef"></approvalRecord>
+      <!-- 流程选择对话框 -->
+      <el-dialog
+        draggable
+        v-model="dialogVisible.visible"
+        :title="dialogVisible.title"
+        :before-close="handleClose"
+        width="500"
+        class="rounded-lg shadow-lg"
+      >
+        <div class="p-4">
+          <p class="text-gray-600 mb-4">请选择要启动的流程：</p>
+          <el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
+            <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+        <template #footer>
+          <div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
+            <el-button @click="handleClose" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+              >取消</el-button
+            >
+            <el-button type="primary" @click="submitFlow()" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
+              >确认</el-button
+            >
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { startWorkFlow } from '@/api/workflow/task';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
+import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { useUserStoreHook } from '@/store/modules/user';
+import { listByIds } from '@/api/system/oss';
+import { addContactnotice,getContactnotice ,updateContactnotice} from '@/api/cory/contactnotice';
+
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const buttonLoading = ref(false);
+const loading = ref(true);
+const thumbnailUrl = ref('');
+//路由参数
+const routeParams = ref<Record<string, any>>({});
+const flowCodeOptions = [
+  {
+    value: currentProject.value?.id + '_changecontact',
+    label: '变更联系单审批'
+  },
+];
+
+const flowCode = ref<string>('');
+const status = ref<string>('');
+const dialogVisible = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义'
+});
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+//审批记录组件
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+const leaveFormRef = ref<ElFormInstance>();
+const dialog = reactive({
+  visible: false,
+  title: '',
+  isEdit: false
+});
+const submitFormData = ref<StartProcessBo>({
+  businessId: '',
+  flowCode: '',
+  variables: {}
+});
+const taskVariables = ref<Record<string, any>>({});
+
+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: '',
+  status: ''
+};
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    projectId: currentProject.value?.id,
+    fileName: undefined,
+    fileType: undefined,
+    fileSuffix: undefined,
+    fileStatus: undefined,
+    originalName: undefined,
+    newest: undefined,
+    params: {}
+  },
+  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 handleClose = () => {
+  dialogVisible.visible = false;
+  flowCode.value = '';
+  buttonLoading.value = false;
+};
+const { form, rules } = toRefs(data);
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  leaveFormRef.value?.resetFields();
+};
+
+/** 获取详情 */
+const getInfo = () => {
+  loading.value = true;
+  buttonLoading.value = false;
+  nextTick(async () => {
+    const res = await getContactnotice(routeParams.value.id);
+    var data = {
+      ...JSON.parse(routeParams.value.row),
+      ...JSON.parse(res.data.detail)
+    };
+    console.log(routeParams.value);
+    
+    Object.assign(form.value, data);
+    loading.value = false;
+    buttonLoading.value = false;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = (status1: string) => {
+  status.value = status1;
+  leaveFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      // var res;
+      // if (form.value.id) {
+      //   res = await updateContactnotice(form.value).finally(() => (buttonLoading.value = false));
+      // } else {
+      //   res = await addContactnotice(form.value).finally(() => (buttonLoading.value = false));
+      // }
+      // if (res.code == 200) {
+        dialog.visible = false;
+        submit(status.value, form.value);
+      // }
+    }
+  });
+};
+
+const submitFlow = async () => {
+  handleStartWorkFlow(form.value);
+  dialogVisible.visible = false;
+};
+//提交申请
+const handleStartWorkFlow = async (data: LeaveForm) => {
+  try {
+    submitFormData.value.flowCode = flowCode.value;
+    submitFormData.value.businessId = data.id;
+    //流程变量
+    taskVariables.value = {
+      // leave4/5 使用的流程变量
+      userList: ['1', '3', '4']
+    };
+    submitFormData.value.variables = taskVariables.value;
+    const resp = await startWorkFlow(submitFormData.value);
+    if (submitVerifyRef.value) {
+      buttonLoading.value = false;
+      submitVerifyRef.value.openDialog(resp.data.taskId);
+    }
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+//审批记录
+const handleApprovalRecord = () => {
+  approvalRecordRef.value.init(form.value.id);
+};
+//提交回调
+const submitCallback = async () => {
+  await proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  submitVerifyRef.value.openDialog(routeParams.value.taskId);
+};
+// 图纸上传成功之后 开始提交
+const submit = async (status, data) => {
+  form.value = data;
+  if (status === 'draft') {
+    buttonLoading.value = false;
+    proxy?.$modal.msgSuccess('暂存成功');
+    proxy.$tab.closePage(proxy.$route);
+    proxy.$router.go(-1);
+  } else {
+    if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
+      flowCode.value = flowCodeOptions[0].value;
+      dialogVisible.visible = true;
+      return;
+    }
+    //说明启动过先随意穿个参数
+    if (flowCode.value === '' || flowCode.value === null) {
+      flowCode.value = 'xx';
+    }
+    console.log(data);
+    await handleStartWorkFlow(data);
+  }
+};
+
+onMounted(() => {
+  nextTick(async () => {
+    routeParams.value = proxy.$route.query;
+    thumbnailUrl.value = proxy.$route.query.thumbnailUrl;
+    reset();
+    loading.value = false;
+    if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
+      getInfo();
+    }
+  });
+});
+</script>
+<style scoped lang="scss">
+/* 全局样式 */
+:root {
+  --primary: #409eff;
+  --primary-light: #66b1ff;
+  --primary-dark: #3a8ee6;
+  --success: #67c23a;
+  --warning: #e6a23c;
+  --danger: #f56c6c;
+  --info: #909399;
+}
+
+/* 表单样式优化 */
+.el-form-item {
+  .el-form-item__label {
+    color: #606266;
+    font-weight: 500;
+  }
+
+  .el-input__inner,
+  .el-select .el-input__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+
+  .el-textarea__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+}
+
+/* 按钮样式优化 */
+.el-button {
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &.is-primary {
+    background-color: var(--primary);
+    border-color: var(--primary);
+
+    &:hover {
+      background-color: var(--primary-light);
+      border-color: var(--primary-light);
+    }
+
+    &:active {
+      background-color: var(--primary-dark);
+      border-color: var(--primary-dark);
+    }
+  }
+
+  &.is-text {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-light);
+      background-color: rgba(64, 158, 255, 0.05);
+    }
+  }
+}
+
+/* 卡片样式优化 */
+.el-card {
+  transition: all 0.3s ease;
+
+  &:hover {
+    /* transform: translateY(-2px); */
+  }
+}
+
+/* 对话框样式优化 */
+.el-dialog {
+  .el-dialog__header {
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #ebeef5;
+    padding: 15px 20px;
+  }
+
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .el-dialog__footer {
+    padding: 15px 20px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+</style>
diff --git a/src/views/design/designChange/index.vue b/src/views/design/designChange/index.vue
index 2a8bcd0..765de8d 100644
--- a/src/views/design/designChange/index.vue
+++ b/src/views/design/designChange/index.vue
@@ -38,12 +38,7 @@
       <template #header>
         <el-row :gutter="10" class="mb8">
           <el-col :span="1.5">
-            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['design:designChange:add']">新增</el-button>
-          </el-col>
-          <el-col :span="1.5">
-            <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['design:designChange:remove']"
-              >删除</el-button
-            >
+            <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['design:designChange:add']">上传设计变更</el-button>
           </el-col>
           <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
         </el-row>
@@ -68,16 +63,24 @@
         </el-table-column>
         <el-table-column label="变更内容" align="center" prop="changeContent" />
         <!-- <el-table-column label="变更费用估算" align="center" prop="costEstimation" /> -->
-        <el-table-column label="变更文件" align="center" prop="fileId">
+        <el-table-column label="变更文件" align="center" >
           <template #default="scope">
-            <span style="color: rgb(41 145 255); cursor: pointer" @click="onOpen(scope.row.file.url)"> {{ scope.row.file.originalName }}</span>
+            <span v-if="scope.row.file" style="color: rgb(41 145 255); cursor: pointer" @click="onOpen(scope.row.file.url)"> {{ scope.row.file.originalName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="流程状态" align="center" prop="status">
+          <template #default="scope">
+            <dict-tag :options="wf_business_status" :value="scope.row.status" />
           </template>
         </el-table-column>
         <el-table-column label="备注" align="center" prop="remark" />
         <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
           <template #default="scope">
-            <el-tooltip content="查看" placement="top">
-              <el-button link type="primary" icon="View" @click="handleView(scope.row)"></el-button>
+            <el-tooltip content="查看流程" placement="top">
+              <el-button link type="primary" icon="View" @click="handleViewInfo(scope.row)"></el-button>
+            </el-tooltip>
+            <el-tooltip content="查看文档" placement="top">
+              <el-button link type="primary" icon="Word" @click="handleView(scope.row)"></el-button>
             </el-tooltip>
             <el-tooltip content="修改" placement="top">
               <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['design:designChange:edit']"></el-button>
@@ -90,91 +93,13 @@
       </el-table>
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
-    <el-dialog
-      :title="dialog.title"
-      v-model="dialog.visible"
-      :close-on-click-modal="false"
-      :close-on-press-escape="false"
-      width="800px"
-      append-to-body
-    >
-      <el-form ref="designChangeFormRef" :model="form" :rules="rules" label-width="110px">
-        <el-row>
-          <el-col :span="12">
-            <el-form-item label="申请单编号" prop="formNo">
-              <el-input v-model="form.formNo" placeholder="请输入申请单编号" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="工程名称" prop="projectName"> <el-input v-model="form.projectName" placeholder="请输入工程名称" /> </el-form-item
-          ></el-col>
-          <el-col :span="12">
-            <el-form-item label="提出单位" prop="submitUnit">
-              <el-input v-model="form.submitUnit" placeholder="请输入提出单位" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="专业" prop="specialty">
-              <el-input v-model="form.specialty" placeholder="请输入专业" />
-            </el-form-item>
-          </el-col>
-          <el-col :span="12">
-            <el-form-item label="提出日期" prop="submitDate">
-              <el-date-picker clearable v-model="form.submitDate" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择提出日期">
-              </el-date-picker> </el-form-item
-          ></el-col>
-          <el-col :span="12">
-            <el-form-item label="卷册名称" prop="volumeName"> <el-input v-model="form.volumeName" placeholder="请输入卷册名称" /> </el-form-item
-          ></el-col>
-          <el-col :span="12">
-            <el-form-item label="卷册号" prop="volumeNo"> <el-input v-model="form.volumeNo" placeholder="请输入卷册号" /> </el-form-item
-          ></el-col>
-          <el-col :span="24">
-            <el-form-item label="附图" prop="attachmentPic"> <image-upload v-model="form.attachmentPic" :fileSize="100" /> </el-form-item
-          ></el-col>
-          <el-col :span="24">
-            <el-form-item label="变更原因" prop="changeReason">
-              <el-checkbox-group v-model="form.changeReason">
-                <el-checkbox v-for="dict in design_change_reason_type" :key="dict.value" :label="dict.value">
-                  {{ dict.label }}
-                </el-checkbox>
-              </el-checkbox-group>
-            </el-form-item></el-col
-          >
-          <el-col :span="24">
-            <el-form-item label="变更内容" prop="changeContent">
-              <el-input v-model="form.changeContent" type="textarea" placeholder="请输入内容" /> </el-form-item
-          ></el-col>
-          <!-- <el-col :span="12">
-            <el-form-item label="变更费用估算" prop="costEstimation">
-              <el-input v-model="form.costEstimation" type="textarea" placeholder="请输入内容" /> </el-form-item
-          ></el-col> -->
-          <el-col :span="24">
-            <el-form-item label="变更费用估算表" label-width="110px" prop="costEstimationFile">
-              <file-upload v-model="form.costEstimationFile" :fileSize="100" /> </el-form-item
-          ></el-col>
-          <el-col :span="24">
-            <el-form-item label="变更文件" prop="fileId"> <file-upload v-model="form.fileId" :fileSize="100" /> </el-form-item
-          ></el-col>
-          <el-col :span="24"
-            ><el-form-item label="备注" prop="remark"> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> </el-form-item
-          ></el-col>
-        </el-row>
-      </el-form>
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
-          <el-button @click="cancel">取 消</el-button>
-        </div>
-      </template>
-    </el-dialog>
     <wordDetial ref="wordDetialRef"></wordDetial>
   </div>
 </template>
 
 <script setup name="DesignChange" lang="ts">
-import { listDesignChange, getDesignChange, delDesignChange, addDesignChange, updateDesignChange } from '@/api/design/designChange';
-import { DesignChangeVO, DesignChangeQuery, DesignChangeForm } from '@/api/design/designChange/types';
+import { listDesignChange,  delDesignChange } from '@/api/design/designChange';
+import { DesignChangeVO, } from '@/api/design/designChange/types';
 import { useUserStoreHook } from '@/store/modules/user';
 import wordDetial from '@/components/wordDetial/index';
 
@@ -185,7 +110,6 @@ const userStore = useUserStoreHook();
 // 从 store 中获取项目列表和当前选中的项目
 const currentProject = computed(() => userStore.selectedProject);
 const designChangeList = ref<DesignChangeVO[]>([]);
-const buttonLoading = ref(false);
 const wordDetialRef = ref<InstanceType<typeof wordDetial>>();
 const loading = ref(true);
 const showSearch = ref(true);
@@ -193,36 +117,9 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
 const queryFormRef = ref<ElFormInstance>();
-const designChangeFormRef = ref<ElFormInstance>();
-
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: DesignChangeForm = {
-  id: undefined,
-  projectId: currentProject.value?.id,
-  formNo: undefined,
-  projectName: undefined,
-  submitUnit: undefined,
-  specialty: undefined,
-  submitDate: undefined,
-  volumeName: undefined,
-  volumeNo: undefined,
-  attachmentPic: undefined,
-  changeReason: [],
-  changeContent: undefined,
-  costEstimation: undefined,
-  costEstimationFile: undefined,
-  fileId: undefined,
-  status: undefined,
-  remark: undefined
-};
-const data = reactive<PageData<DesignChangeForm, DesignChangeQuery>>({
-  form: { ...initFormData },
+const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -238,13 +135,9 @@ const data = reactive<PageData<DesignChangeForm, DesignChangeQuery>>({
     status: undefined,
     params: {}
   },
-  rules: {
-    id: [{ required: true, message: '主键id不能为空', trigger: 'blur' }],
-    projectId: [{ required: true, message: '项目id不能为空', trigger: 'blur' }]
-  }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams} = toRefs(data);
 
 /** 查询设计变更管理列表 */
 const getList = async () => {
@@ -255,18 +148,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-/** 取消按钮 */
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  designChangeFormRef.value?.resetFields();
-};
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -288,40 +169,37 @@ const handleSelectionChange = (selection: DesignChangeVO[]) => {
 
 /** 新增按钮操作 */
 const handleAdd = () => {
-  reset();
-  dialog.visible = true;
-  dialog.title = '添加设计变更';
-};
-
-/** 修改按钮操作 */
-const handleUpdate = async (row?: DesignChangeVO) => {
-  reset();
-  const _id = row?.id || ids.value[0];
-  const res = await getDesignChange(_id);
-  Object.assign(form.value, res.data);
-  form.value.changeReason = form.value.changeReason.split(',');
-  dialog.visible = true;
-  dialog.title = '修改设计变更';
-};
-
-/** 提交按钮 */
-const submitForm = () => {
-  designChangeFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      form.value.changeReason = form.value.changeReason.join(',');
-      if (form.value.id) {
-        await updateDesignChange({ ...form.value }).finally(() => (buttonLoading.value = false));
-      } else {
-        await addDesignChange(form.value).finally(() => (buttonLoading.value = false));
-      }
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/workflows/designChange/indexEdit`,
+    query: {
+      type: 'add'
     }
   });
 };
 
+/** 修改按钮操作 */
+const handleUpdate = async (row?: DesignChangeVO) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/workflows/designChange/indexEdit`,
+    query: {
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+/** 查看按钮操作 */
+const handleViewInfo = (row) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/workflows/designChange/indexEdit`,
+    query: {
+      id: row.id,
+      type: 'view'
+    }
+  });
+};
 /** 删除按钮操作 */
 const handleDelete = async (row?: DesignChangeVO) => {
   const _ids = row?.id || ids.value;
@@ -346,7 +224,6 @@ const listeningProject = watch(
   () => currentProject.value.id,
   (nid, oid) => {
     queryParams.value.projectId = nid;
-    form.value.projectId = nid;
     getList();
   }
 );
diff --git a/src/views/design/designChange/indexEdit.vue b/src/views/design/designChange/indexEdit.vue
new file mode 100644
index 0000000..a44033e
--- /dev/null
+++ b/src/views/design/designChange/indexEdit.vue
@@ -0,0 +1,442 @@
+<template>
+  <div class="p-4 bg-gray-50">
+    <div class="max-w-4xl mx-auto">
+      <!-- 顶部按钮区域 -->
+      <el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
+        <approvalButton
+          @submitForm="submitForm"
+          @approvalVerifyOpen="approvalVerifyOpen"
+          @handleApprovalRecord="handleApprovalRecord"
+          :buttonLoading="buttonLoading"
+          :id="form.id"
+          :status="form.status"
+          :pageType="routeParams.type"
+        />
+      </el-card>
+      <!-- 表单区域 -->
+      <el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
+        <div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
+          <h3 class="text-lg font-semibold text-gray-800">设计变更信息</h3>
+        </div>
+        <div class="p-6">
+          <el-form
+            ref="leaveFormRef"
+            v-loading="loading"
+            :disabled="routeParams.type === 'view'"
+            :model="form"
+            :rules="rules"
+            label-width="100px"
+            class="space-y-4"
+          >
+            <div class="grid grid-cols-1  gap-4">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="申请单编号" prop="formNo">
+                    <el-input v-model="form.formNo" placeholder="请输入申请单编号" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="工程名称" prop="projectName">
+                    <el-input v-model="form.projectName" placeholder="请输入工程名称" /> </el-form-item
+                ></el-col>
+                <el-col :span="12">
+                  <el-form-item label="提出单位" prop="submitUnit">
+                    <el-input v-model="form.submitUnit" placeholder="请输入提出单位" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="专业" prop="specialty">
+                    <el-input v-model="form.specialty" placeholder="请输入专业" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="提出日期" prop="submitDate">
+                    <el-date-picker clearable v-model="form.submitDate" type="date" value-format="YYYY-MM-DD HH:mm:ss" placeholder="请选择提出日期">
+                    </el-date-picker> </el-form-item
+                ></el-col>
+                <el-col :span="12">
+                  <el-form-item label="卷册名称" prop="volumeName"> <el-input v-model="form.volumeName" placeholder="请输入卷册名称" /> </el-form-item
+                ></el-col>
+                <el-col :span="12">
+                  <el-form-item label="卷册号" prop="volumeNo"> <el-input v-model="form.volumeNo" placeholder="请输入卷册号" /> </el-form-item
+                ></el-col>
+                <el-col :span="24">
+                  <el-form-item label="附图" prop="attachmentPic"> <image-upload v-model="form.attachmentPic" :fileSize="100" /> </el-form-item
+                ></el-col>
+                <el-col :span="24">
+                  <el-form-item label="变更原因" prop="changeReason">
+                    <el-checkbox-group v-model="form.changeReason">
+                      <el-checkbox v-for="dict in design_change_reason_type" :key="dict.value" :value="dict.value">
+                        {{ dict.label }}
+                      </el-checkbox>
+                    </el-checkbox-group>
+                  </el-form-item></el-col
+                >
+                <el-col :span="24">
+                  <el-form-item label="变更内容" prop="changeContent">
+                    <el-input v-model="form.changeContent" type="textarea" placeholder="请输入内容" /> </el-form-item
+                ></el-col>
+                <el-col :span="24">
+                  <el-form-item label="变更费用估算表" label-width="110px" prop="costEstimationFile">
+                    <file-upload v-model="form.costEstimationFile" :fileSize="100" /> </el-form-item
+                ></el-col>
+                <el-col :span="24">
+                  <el-form-item label="变更文件" prop="fileId"> <file-upload v-model="form.fileId" :fileSize="100" /> </el-form-item
+                ></el-col>
+                <el-col :span="24"
+                  ><el-form-item label="备注" prop="remark">
+                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /> </el-form-item
+                ></el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+      </el-card>
+      <!-- 提交组件 -->
+      <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
+      <approvalRecord ref="approvalRecordRef"></approvalRecord>
+      <!-- 流程选择对话框 -->
+      <el-dialog
+        draggable
+        v-model="dialogVisible.visible"
+        :title="dialogVisible.title"
+        :before-close="handleClose"
+        width="500"
+        class="rounded-lg shadow-lg"
+      >
+        <div class="p-4">
+          <p class="text-gray-600 mb-4">请选择要启动的流程：</p>
+          <el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
+            <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+        <template #footer>
+          <div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
+            <el-button @click="handleClose" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+              >取消</el-button
+            >
+            <el-button type="primary" @click="submitFlow()" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
+              >确认</el-button
+            >
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { startWorkFlow } from '@/api/workflow/task';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
+import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { useUserStoreHook } from '@/store/modules/user';
+import { getDesignChange, addDesignChange, updateDesignChange } from '@/api/design/designChange';
+const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
+
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const buttonLoading = ref(false);
+const loading = ref(true);
+//路由参数
+const routeParams = ref<Record<string, any>>({});
+const flowCodeOptions = [
+  {
+    value: currentProject.value?.id + '_designchanged',
+    label: '设计变更审批'
+  },
+];
+
+const flowCode = ref<string>('');
+const status = ref<string>('');
+const dialogVisible = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义'
+});
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+//审批记录组件
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+//按钮组件
+const approvalButtonRef = ref<InstanceType<typeof ApprovalButton>>();
+
+const leaveFormRef = ref<ElFormInstance>();
+const dialog = reactive({
+  visible: false,
+  title: '',
+  isEdit: false
+});
+const submitFormData = ref<StartProcessBo>({
+  businessId: '',
+  flowCode: '',
+  variables: {}
+});
+const taskVariables = ref<Record<string, any>>({});
+
+const initFormData = {
+  id: undefined,
+  projectId: currentProject.value?.id,
+  formNo: undefined,
+  projectName: undefined,
+  submitUnit: undefined,
+  specialty: undefined,
+  submitDate: undefined,
+  volumeName: undefined,
+  volumeNo: undefined,
+  attachmentPic: undefined,
+  changeReason: [],
+  changeContent: undefined,
+  costEstimation: undefined,
+  costEstimationFile: undefined,
+  fileId: undefined,
+  status: undefined,
+  remark: undefined
+};
+const data = reactive({
+  form: { ...initFormData },
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    projectId: currentProject.value?.id,
+    fileName: undefined,
+    fileType: undefined,
+    fileSuffix: undefined,
+    fileStatus: undefined,
+    originalName: undefined,
+    newest: undefined,
+    params: {}
+  },
+  rules: {}
+});
+
+const handleClose = () => {
+  dialogVisible.visible = false;
+  flowCode.value = '';
+  buttonLoading.value = false;
+};
+const { form, rules } = toRefs(data);
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  leaveFormRef.value?.resetFields();
+};
+
+/** 获取详情 */
+const getInfo = () => {
+  loading.value = true;
+  buttonLoading.value = false;
+  nextTick(async () => {
+    const res = await getDesignChange(routeParams.value.id);
+    Object.assign(form.value, res.data);
+    if(form.value.changeReason.length >0){
+      form.value.changeReason = form.value.changeReason.split(',');
+    }
+    loading.value = false;
+    buttonLoading.value = false;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = (status1: string) => {
+  status.value = status1;
+  var changeReason=''
+  if(form.value.changeReason.length >0){
+    changeReason = form.value.changeReason.join(',');
+  }
+  leaveFormRef.value?.validate(async (valid: boolean) => {
+    if (valid) {
+      buttonLoading.value = true;
+      var res;
+      if (form.value.id) {
+        res = await updateDesignChange({...form.value,changeReason}).finally(() => (buttonLoading.value = false));
+      } else {
+        res = await addDesignChange({...form.value,changeReason}).finally(() => (buttonLoading.value = false));
+      }
+      if (res.code == 200) {
+        dialog.visible = false;
+        submit(status.value, res.data);
+      }
+    }
+  });
+};
+
+const submitFlow = async () => {
+  handleStartWorkFlow(form.value);
+  dialogVisible.visible = false;
+};
+//提交申请
+const handleStartWorkFlow = async (data: LeaveForm) => {
+  try {
+    submitFormData.value.flowCode = flowCode.value;
+    submitFormData.value.businessId = data.id;
+    //流程变量
+    taskVariables.value = {
+      // leave4/5 使用的流程变量
+      userList: ['1', '3', '4']
+    };
+    submitFormData.value.variables = taskVariables.value;
+    const resp = await startWorkFlow(submitFormData.value);
+    if (submitVerifyRef.value) {
+      buttonLoading.value = false;
+      submitVerifyRef.value.openDialog(resp.data.taskId);
+    }
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+//审批记录
+const handleApprovalRecord = () => {
+  approvalRecordRef.value.init(form.value.id);
+};
+//提交回调
+const submitCallback = async () => {
+  await proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  submitVerifyRef.value.openDialog(routeParams.value.taskId);
+};
+// 图纸上传成功之后 开始提交
+const submit = async (status, data) => {
+  form.value = data;
+  if (status === 'draft') {
+    buttonLoading.value = false;
+    proxy?.$modal.msgSuccess('暂存成功');
+    proxy.$tab.closePage(proxy.$route);
+    proxy.$router.go(-1);
+  } else {
+    if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
+      flowCode.value = flowCodeOptions[0].value;
+      dialogVisible.visible = true;
+      return;
+    }
+    //说明启动过先随意穿个参数
+    if (flowCode.value === '' || flowCode.value === null) {
+      flowCode.value = 'xx';
+    }
+    await handleStartWorkFlow(data);
+  }
+};
+
+onMounted(() => {
+  nextTick(async () => {
+    routeParams.value = proxy.$route.query;
+    reset();
+    loading.value = false;
+    if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
+      getInfo();
+    }
+  });
+});
+</script>
+<style scoped lang="scss">
+/* 全局样式 */
+:root {
+  --primary: #409eff;
+  --primary-light: #66b1ff;
+  --primary-dark: #3a8ee6;
+  --success: #67c23a;
+  --warning: #e6a23c;
+  --danger: #f56c6c;
+  --info: #909399;
+}
+
+/* 表单样式优化 */
+.el-form-item {
+  .el-form-item__label {
+    color: #606266;
+    font-weight: 500;
+  }
+
+  .el-input__inner,
+  .el-select .el-input__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+
+  .el-textarea__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+}
+
+/* 按钮样式优化 */
+.el-button {
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &.is-primary {
+    background-color: var(--primary);
+    border-color: var(--primary);
+
+    &:hover {
+      background-color: var(--primary-light);
+      border-color: var(--primary-light);
+    }
+
+    &:active {
+      background-color: var(--primary-dark);
+      border-color: var(--primary-dark);
+    }
+  }
+
+  &.is-text {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-light);
+      background-color: rgba(64, 158, 255, 0.05);
+    }
+  }
+}
+
+/* 卡片样式优化 */
+.el-card {
+  transition: all 0.3s ease;
+
+  &:hover {
+    /* transform: translateY(-2px); */
+  }
+}
+
+/* 对话框样式优化 */
+.el-dialog {
+  .el-dialog__header {
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #ebeef5;
+    padding: 15px 20px;
+  }
+
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .el-dialog__footer {
+    padding: 15px 20px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+</style>
diff --git a/src/views/design/drawing/index.vue b/src/views/design/drawing/index.vue
index abe2210..8d5cd53 100644
--- a/src/views/design/drawing/index.vue
+++ b/src/views/design/drawing/index.vue
@@ -88,8 +88,8 @@
 </template>
 
 <script setup name="Drawing" lang="ts">
-import { listDrawing, getDrawing, delDrawing, addDrawing, updateDrawing } from '@/api/design/drawing';
-import { DrawingVO, DrawingQuery, DrawingForm } from '@/api/design/drawing/types';
+import { listDrawing,delDrawing, } from '@/api/design/drawing';
+import { DrawingVO} from '@/api/design/drawing/types';
 import { useUserStoreHook } from '@/store/modules/user';
 import { LeaveVO } from '@/api/workflow/leave/types';
 import { cancelProcessApply } from '@/api/workflow/instance';
@@ -110,29 +110,9 @@ const ids = ref<Array<string | number>>([]);
 const single = ref(true);
 const multiple = ref(true);
 const total = ref(0);
-const fileList = ref([]); // 存储上传的文件列表
-const selectedFile = ref(null); // 当前选中的文件
 const queryFormRef = ref<ElFormInstance>();
-const drawingFormRef = ref<ElFormInstance>();
 const activeName = ref('1');
-const dialog = reactive({
-  visible: false,
-  title: '',
-  isEdit: false
-});
-const initFormData: DrawingForm = {
-  id: undefined,
-  projectId: currentProject.value?.id,
-  versionNumber: undefined,
-  fileName: undefined,
-  fileUrl: undefined,
-  fileType: undefined,
-  fileSuffix: undefined,
-  originalName: undefined,
-  remark: undefined
-};
-const data = reactive<PageData<DrawingForm, DrawingQuery>>({
-  form: { ...initFormData },
+const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -145,30 +125,9 @@ const data = reactive<PageData<DrawingForm, DrawingQuery>>({
     newest: undefined,
     params: {}
   },
-  rules: {
-    versionNumber: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
-    fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
-    fileType: [{ required: true, message: '文件类型不能为空', trigger: 'change' }],
-    file: [
-      {
-        validator: (rule, value, callback) => {
-          console.log(dialog.isEdit);
-          console.log(fileList.value);
-
-          // 新增时必须上传文件
-          if (!dialog.isEdit && !fileList.value.length) {
-            callback(new Error('请上传图纸文件'));
-          } else {
-            callback();
-          }
-        },
-        trigger: 'change'
-      }
-    ]
-  }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams } = toRefs(data);
 
 /** 查询图纸管理列表 */
 const getList = async () => {
@@ -179,20 +138,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-/** 取消按钮 */
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  drawingFormRef.value?.resetFields();
-  fileList.value = [];
-  selectedFile.value = null;
-};
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -288,7 +233,6 @@ const listeningProject = watch(
   () => currentProject.value.id,
   (nid, oid) => {
     queryParams.value.projectId = nid;
-    form.value.projectId = nid;
     getList();
   }
 );
diff --git a/src/views/design/drawing/indexEdit.vue b/src/views/design/drawing/indexEdit.vue
index 0b1613a..51f076c 100644
--- a/src/views/design/drawing/indexEdit.vue
+++ b/src/views/design/drawing/indexEdit.vue
@@ -176,7 +176,7 @@ const data = reactive<PageData<LeaveForm, LeaveQuery>>({
     versionNumber: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
     fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }],
     fileType: [{ required: true, message: '文件类型不能为空', trigger: 'change' }],
-    file: [
+    fileUrl: [
       {
         validator: (rule, value, callback) => {
           // 新增时必须上传文件
diff --git a/src/views/design/specialScheme/index.vue b/src/views/design/specialScheme/index.vue
index 47109e4..b92de09 100644
--- a/src/views/design/specialScheme/index.vue
+++ b/src/views/design/specialScheme/index.vue
@@ -78,15 +78,14 @@
           </template>
         </el-table-column>
       </el-table>
-
       <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
     </el-card>
   </div>
 </template>
 
 <script setup name="SpecialScheme" lang="ts">
-import { listSpecialScheme, getSpecialScheme, delSpecialScheme, addSpecialScheme, updateSpecialScheme } from '@/api/design/specialScheme';
-import { SpecialSchemeVO, SpecialSchemeQuery, SpecialSchemeForm } from '@/api/design/specialScheme/types';
+import { listSpecialScheme,delSpecialScheme} from '@/api/design/specialScheme';
+import { SpecialSchemeVO } from '@/api/design/specialScheme/types';
 import { useUserStoreHook } from '@/store/modules/user';
 import { cancelProcessApply } from '@/api/workflow/instance';
 
@@ -97,7 +96,6 @@ const userStore = useUserStoreHook();
 // 从 store 中获取项目列表和当前选中的项目
 const currentProject = computed(() => userStore.selectedProject);
 const specialSchemeList = ref<SpecialSchemeVO[]>([]);
-const buttonLoading = ref(false);
 const loading = ref(true);
 const showSearch = ref(true);
 const ids = ref<Array<string | number>>([]);
@@ -106,24 +104,8 @@ const multiple = ref(true);
 const total = ref(0);
 
 const queryFormRef = ref<ElFormInstance>();
-const specialSchemeFormRef = ref<ElFormInstance>();
 
-const dialog = reactive<DialogOption>({
-  visible: false,
-  title: ''
-});
-
-const initFormData: SpecialSchemeForm = {
-  id: undefined,
-  projectId: currentProject.value?.id,
-  versionNumber: undefined,
-  fileName: undefined,
-  fileUrl: undefined,
-  fileSuffix: undefined,
-  remark: undefined
-};
-const data = reactive<PageData<SpecialSchemeForm, SpecialSchemeQuery>>({
-  form: { ...initFormData },
+const data = reactive({
   queryParams: {
     pageNum: 1,
     pageSize: 10,
@@ -134,13 +116,9 @@ const data = reactive<PageData<SpecialSchemeForm, SpecialSchemeQuery>>({
     status: undefined,
     params: {}
   },
-  rules: {
-    versionNumber: [{ required: true, message: '版本号不能为空', trigger: 'blur' }],
-    fileName: [{ required: true, message: '文件名称不能为空', trigger: 'blur' }]
-  }
 });
 
-const { queryParams, form, rules } = toRefs(data);
+const { queryParams } = toRefs(data);
 
 /** 查询专项方案管理列表 */
 const getList = async () => {
@@ -151,18 +129,6 @@ const getList = async () => {
   loading.value = false;
 };
 
-/** 取消按钮 */
-const cancel = () => {
-  reset();
-  dialog.visible = false;
-};
-
-/** 表单重置 */
-const reset = () => {
-  form.value = { ...initFormData };
-  specialSchemeFormRef.value?.resetFields();
-};
-
 /** 搜索按钮操作 */
 const handleQuery = () => {
   queryParams.value.pageNum = 1;
@@ -204,24 +170,6 @@ const handleUpdate = async (row?: SpecialSchemeVO) => {
     }
   });
 };
-
-/** 提交按钮 */
-const submitForm = () => {
-  specialSchemeFormRef.value?.validate(async (valid: boolean) => {
-    if (valid) {
-      buttonLoading.value = true;
-      if (form.value.id) {
-        await updateSpecialScheme(form.value).finally(() => (buttonLoading.value = false));
-      } else {
-        await addSpecialScheme(form.value).finally(() => (buttonLoading.value = false));
-      }
-      proxy?.$modal.msgSuccess('操作成功');
-      dialog.visible = false;
-      await getList();
-    }
-  });
-};
-
 /** 删除按钮操作 */
 const handleDelete = async (row?: SpecialSchemeVO) => {
   const _ids = row?.id || ids.value;
@@ -265,7 +213,6 @@ const listeningProject = watch(
   () => currentProject.value.id,
   (nid, oid) => {
     queryParams.value.projectId = nid;
-    form.value.projectId = nid;
     getList();
   }
 );
diff --git a/src/views/design/technicalStandard/index.vue b/src/views/design/technicalStandard/index.vue
index 4a7fce4..08e7046 100644
--- a/src/views/design/technicalStandard/index.vue
+++ b/src/views/design/technicalStandard/index.vue
@@ -1,143 +1,155 @@
 <template>
-  <el-tabs v-model="activeName" class="demo-tabs p5" @tab-click="handleCheckMian">
-    <el-tab-pane label="资料" name="first">
-      <div class="profile_engin">
-        <div class="box_info">
-          <div class="tree_left1" id="tree_left1">
-            <div class="file_upload check_select">
-              <div class="box_btn">
-                <file-upload
-                  v-model="state.paramsQuery.file"
-                  :limit="100"
-                  :uploadUrl="uploadUrl"
-                  :params="uploadParams"
-                  :on-upload-success="uploadFile"
-                  :fileType="[]"
+  <div>
+    <el-tabs v-model="activeName" class="demo-tabs p5" @tab-click="handleCheckMian">
+      <el-tab-pane label="资料" name="first">
+        <div class="profile_engin">
+          <div class="box_info">
+            <div class="tree_left1" id="tree_left1">
+              <div class="file_upload check_select">
+                <div class="box_btn">
+                  <file-upload
+                    v-model="state.paramsQuery.file"
+                    :limit="100"
+                    :uploadUrl="uploadUrl"
+                    :params="uploadParams"
+                    :on-upload-success="uploadFile"
+                    :fileType="[]"
+                  >
+                    <el-button type="primary" style="float: left" :disabled="!state.parentPid">
+                      <el-icon size="small"><Plus /></el-icon>上传文件
+                    </el-button>
+                  </file-upload>
+                </div>
+                <el-button type="primary" :disabled="!state.parentPid" @click="onExport"
+                  ><el-icon><Download /></el-icon>下载</el-button
+                >
+                <el-button type="primary" @click="onBook"
+                  ><el-icon><View /></el-icon>查看全项目文件</el-button
                 >
-                  <el-button type="primary" style="float: left" :disabled="!state.parentPid">
-                    <el-icon size="small"><Plus /></el-icon>上传文件
-                  </el-button>
-                </file-upload>
               </div>
-              <el-button type="primary" :disabled="!state.parentPid" @click="onExport"
-                ><el-icon><Download /></el-icon>下载</el-button
+              <div class="file_upload check_select">
+                <el-input class="input_left" v-model="filterText" size="small" placeholder="请输入文件名称" />
+              </div>
+              <el-tree
+                ref="treeRef"
+                highlight-current
+                :default-expand-all="state.checked"
+                :filter-node-method="filterFolder"
+                :data="state.treeList"
+                node-key="id"
+                accordion
+                :expand-on-click-node="false"
+                @node-click="handleNodeClick"
+                :current-node-key="state.selectedNodeId"
               >
-              <el-button type="primary" @click="onBook"
-                ><el-icon><View /></el-icon>查看全项目文件</el-button
-              >
-            </div>
-            <div class="file_upload check_select">
-              <el-input class="input_left" v-model="filterText" size="small" placeholder="请输入文件名称" />
-            </div>
-            <el-tree
-              ref="treeRef"
-              highlight-current
-              :default-expand-all="state.checked"
-              :filter-node-method="filterFolder"
-              :data="state.treeList"
-              node-key="id"
-              accordion
-              :expand-on-click-node="false"
-              @node-click="handleNodeClick"
-              :current-node-key="state.selectedNodeId"
-            >
-              <template #default="{ node, data }">
-                <span class="custom-tree-node">
-                  <el-icon color="#f1a81a"><FolderOpened /></el-icon>
-                  <span>{{ node.label }}</span>
-                </span>
-              </template>
-            </el-tree>
-            <div class="resize-handle resize-handle-right right"></div>
-          </div>
-          <div class="list_right" id="list_right1">
-            <div>
-              <el-form :model="state.paramsQuery" ref="queryRef" :inline="true" label-width="100px">
-                <el-row>
-                  <el-col :span="7" class="colBlock">
-                    <el-form-item label="文件名称" prop="fileName">
-                      <el-input
-                        v-model="state.paramsQuery.fileName"
-                        placeholder="请输入文件名称"
-                        clearable
-                        @keyup.enter.native="getdocumentDataList"
-                      />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6" class="m-l10">
-                    <el-form-item>
-                      <el-button type="primary" @click="searchInfo"
-                        ><el-icon><Search /></el-icon>搜索</el-button
-                      >
-                      <el-button @click="resetQuery"
-                        ><el-icon><Refresh /></el-icon>重置</el-button
-                      >
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-              </el-form>
-            </div>
-            <el-table v-loading="state.loading" :data="state.infoList" height="67vh" border>
-              <el-table-column label="序号" align="center" type="index" min-width="50px" />
-              <el-table-column label="文件名称" align="center" prop="fileName"></el-table-column>
-              <el-table-column label="文件类型" align="center" prop="fileSuffix" width="100px" />
-
-              <el-table-column label="上传时间" align="center" prop="createTime"> </el-table-column>
-              <el-table-column label="操作" align="center" width="300">
-                <template #default="scope">
-                  <el-button type="primary" link @click="handleView(scope.row)" v-if="acceptType.includes(scope.row.fileSuffix)"
-                    ><el-icon><View /></el-icon>查看</el-button
-                  >
-                  <el-button type="primary" v-if="state.wordType.includes(scope.row.fileSuffix)" link @click="updataView(scope.row)"
-                    ><el-icon><EditPen /></el-icon>修改文件</el-button
-                  >
-                  <el-button type="primary" link @click="onExportView(scope.row)"
-                    ><el-icon><Download /></el-icon>下载</el-button
-                  >
-                  <el-button type="success" link @click="updateName(scope.row)"
-                    ><el-icon><EditPen /></el-icon>修改名称</el-button
-                  >
-                  <el-button type="danger" link @click="handleDelete(scope.row)"
-                    ><el-icon><DeleteFilled /></el-icon>删除</el-button
-                  >
+                <template #default="{ node, data }">
+                  <span class="custom-tree-node">
+                    <el-icon color="#f1a81a"><FolderOpened /></el-icon>
+                    <span>{{ node.label }}</span>
+                  </span>
                 </template>
-              </el-table-column>
-            </el-table>
-            <pagination
-              :total="state.total"
-              v-model:page="state.paramsQuery.pageNum"
-              v-model:limit="state.paramsQuery.pageSize"
-              @pagination="getdocumentDataList"
-            />
+              </el-tree>
+              <div class="resize-handle resize-handle-right right"></div>
+            </div>
+            <div class="list_right" id="list_right1">
+              <div>
+                <el-form :model="state.paramsQuery" ref="queryRef" :inline="true" label-width="100px">
+                  <el-row>
+                    <el-col :span="7" class="colBlock">
+                      <el-form-item label="文件名称" prop="fileName">
+                        <el-input
+                          v-model="state.paramsQuery.fileName"
+                          placeholder="请输入文件名称"
+                          clearable
+                          @keyup.enter.native="getdocumentDataList"
+                        />
+                      </el-form-item>
+                    </el-col>
+                    <el-col :span="6" class="m-l10">
+                      <el-form-item>
+                        <el-button type="primary" @click="searchInfo"
+                          ><el-icon><Search /></el-icon>搜索</el-button
+                        >
+                        <el-button @click="resetQuery"
+                          ><el-icon><Refresh /></el-icon>重置</el-button
+                        >
+                      </el-form-item>
+                    </el-col>
+                  </el-row>
+                </el-form>
+              </div>
+              <el-table v-loading="state.loading" :data="state.infoList" height="67vh" border>
+                <el-table-column label="序号" align="center" type="index" min-width="50px" />
+                <el-table-column label="文件名称" align="center" prop="fileName"></el-table-column>
+                <el-table-column label="文件类型" align="center" prop="fileSuffix" width="100px" />
+                <el-table-column label="流程状态" align="center" prop="status">
+                  <template #default="scope">
+                    <dict-tag :options="wf_business_status" :value="scope.row.status" />
+                  </template>
+                </el-table-column>
+                <el-table-column label="上传时间" align="center" prop="createTime"> </el-table-column>
+                <el-table-column label="操作" align="center" width="300">
+                  <template #default="scope">
+                    <el-button type="primary" link @click="handleApproval(scope.row)"
+                      ><el-icon><Plus /></el-icon>审批</el-button
+                    >
+                    <el-button type="primary" link @click="handleViewApproval(scope.row)"
+                      ><el-icon><View /></el-icon>流程查看</el-button
+                    >
+                    <el-button type="primary" link @click="handleView(scope.row)" v-if="acceptType.includes(scope.row.fileSuffix)"
+                      ><el-icon><View /></el-icon>查看</el-button
+                    >
+                    <el-button type="primary" v-if="state.wordType.includes(scope.row.fileSuffix)" link @click="updataView(scope.row)"
+                      ><el-icon><EditPen /></el-icon>修改文件</el-button
+                    >
+                    <el-button type="primary" link @click="onExportView(scope.row)"
+                      ><el-icon><Download /></el-icon>下载</el-button
+                    >
+                    <el-button type="success" link @click="updateName(scope.row)"
+                      ><el-icon><EditPen /></el-icon>修改名称</el-button
+                    >
+                    <el-button type="danger" link @click="handleDelete(scope.row)"
+                      ><el-icon><DeleteFilled /></el-icon>删除</el-button
+                    >
+                  </template>
+                </el-table-column>
+              </el-table>
+              <pagination
+                :total="state.total"
+                v-model:page="state.paramsQuery.pageNum"
+                v-model:limit="state.paramsQuery.pageSize"
+                @pagination="getdocumentDataList"
+              />
+            </div>
           </div>
+          <documentsDeailsVue ref="documentDetailRef" v-if="state.showDocumentDetail" @onClose="onClose"></documentsDeailsVue>
+          <documentsEdit ref="documentDataEditRef" v-if="state.showdocumentDataEdit" @onClose="onCloseEdit"></documentsEdit>
+          <bookFile ref="bookFileRef" @onExportView="onExportView" @onBook="handleView" @onExport="onExport"></bookFile>
+          <el-dialog draggable title="上传文件" v-model="uploadFileder" width="30%">
+            <file-upload v-model="state.paramsQuery.file"></file-upload>
+            <template #footer>
+              <span>
+                <el-button @click="uploadFileder = false">取消</el-button>
+                <el-button type="primary" @click="subMitUpload">确定</el-button>
+              </span>
+            </template>
+          </el-dialog>
         </div>
-        <documentsDeailsVue ref="documentDetailRef" v-if="state.showDocumentDetail" @onClose="onClose"></documentsDeailsVue>
-        <documentsEdit ref="documentDataEditRef" v-if="state.showdocumentDataEdit" @onClose="onCloseEdit"></documentsEdit>
-        <bookFile ref="bookFileRef" @onExportView="onExportView" @onBook="handleView" @onExport="onExport"></bookFile>
-        <el-dialog draggable title="上传文件" v-model="uploadFileder" width="30%">
-          <file-upload v-model="state.paramsQuery.file"></file-upload>
-          <template #footer>
-            <span>
-              <el-button @click="uploadFileder = false">取消</el-button>
-              <el-button type="primary" @click="subMitUpload">确定</el-button>
-            </span>
-          </template>
-        </el-dialog>
-      </div>
-      <el-image-viewer
-        ref="imageRef"
-        style="width: 100%; height: 100%"
-        :url-list="[imgUrl]"
-        v-if="imgUrl"
-        show-progress
-        fit="cover"
-        @close="imgUrl = ''"
-      />
-    </el-tab-pane>
-    <el-tab-pane label="回收站" name="second">
-      <RecyclingStation ref="recylingRef"></RecyclingStation>
-    </el-tab-pane>
-  </el-tabs>
+        <el-image-viewer
+          ref="imageRef"
+          style="width: 100%; height: 100%"
+          :url-list="[imgUrl]"
+          v-if="imgUrl"
+          show-progress
+          fit="cover"
+          @close="imgUrl = ''"
+        />
+      </el-tab-pane>
+      <el-tab-pane label="回收站" name="second">
+        <RecyclingStation ref="recylingRef"></RecyclingStation>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
 </template>
 
 <script setup name="KnowledgeDocument" lang="ts">
@@ -153,7 +165,6 @@ import {
 import documentsEdit from './component/documentsEdit.vue';
 import documentsDeailsVue from './component/documentsDeails.vue';
 import RecyclingStation from './component/recyclingStation.vue';
-
 import { useUserStoreHook } from '@/store/modules/user';
 import bookFile from './component/bookFile.vue';
 const activeName = ref('first');
@@ -162,6 +173,7 @@ const { proxy } = getCurrentInstance() as any;
 const userStore = useUserStoreHook();
 // 从 store 中获取项目列表和当前选中的项目
 const currentProject = computed(() => userStore.selectedProject);
+const { wf_business_status } = toRefs<any>(proxy?.useDict('wf_business_status'));
 const uploadUrl = computed(() => {
   return `/design/technicalStandard/file`;
 });
@@ -171,7 +183,6 @@ const uploadParams = computed(() => {
     projectId: state.projectId
   };
 });
-
 const imgUrl = ref<string>('');
 const filterText = ref('');
 const treeRef = ref();
@@ -289,7 +300,7 @@ const setInfo = (arr) => {
 const handleNodeClick = (row) => {
   state.parentRow = row;
   state.parentPid = row.parentId;
-  console.log('🚀 ~ handleNodeClick ~ state.parentPid:', state.parentPid);
+  console.log(row);
   state.parentName = row.label;
   state.paramsQuery.folderId = row.id;
   getdocumentDataList();
@@ -461,6 +472,26 @@ const listeningProject = watch(
 onUnmounted(() => {
   listeningProject();
 });
+const handleApproval = (row) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/technicalStandard/indexEdit`,
+    query: {
+      id: row.id,
+      type: 'update'
+    }
+  });
+};
+const handleViewApproval = (row) => {
+  proxy.$tab.closePage(proxy.$route);
+  proxy.$router.push({
+    path: `/technicalStandard/indexEdit`,
+    query: {
+      id: row.id,
+      type: 'view'
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>
@@ -491,7 +522,7 @@ onUnmounted(() => {
     width: 100%;
   }
   .tree_left1 {
-    width: 30%;
+    width: 20%;
     background-color: #fff;
     border: 1px solid #dddddd;
     border-radius: 6px;
@@ -554,7 +585,7 @@ onUnmounted(() => {
     }
   }
   .list_right {
-    width: 69.5%;
+    width:79.5%;
     background: white;
     border: 1px solid #ededed;
     padding: 10px;
diff --git a/src/views/design/technicalStandard/indexEdit.vue b/src/views/design/technicalStandard/indexEdit.vue
new file mode 100644
index 0000000..67223c5
--- /dev/null
+++ b/src/views/design/technicalStandard/indexEdit.vue
@@ -0,0 +1,356 @@
+<template>
+  <div class="p-4 bg-gray-50">
+    <div class="max-w-4xl mx-auto">
+      <!-- 顶部按钮区域 -->
+      <el-card class="mb-4 rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md">
+        <approvalButton
+          @submitForm="submitForm"
+          @approvalVerifyOpen="approvalVerifyOpen"
+          @handleApprovalRecord="handleApprovalRecord"
+          :buttonLoading="buttonLoading"
+          :id="form.id"
+          :status="form.status"
+          :pageType="routeParams.type"
+        />
+      </el-card>
+      <!-- 表单区域 -->
+      <el-card class="rounded-lg shadow-sm bg-white border border-gray-100 transition-all hover:shadow-md overflow-hidden">
+        <div class="p-4 bg-gradient-to-r from-blue-50 to-indigo-50 border-b border-gray-100">
+          <h3 class="text-lg font-semibold text-gray-800">设计原则</h3>
+        </div>
+        <div class="p-6">
+          <el-form
+            ref="leaveFormRef"
+            v-loading="loading"
+            :disabled="routeParams.type === 'view'"
+            :model="form"
+            :rules="rules"
+            label-width="100px"
+            class="space-y-4"
+          >
+            <div class="grid grid-cols-1 gap-4">
+              <el-row>
+                <el-col :span="12">
+                  <el-form-item label="文件名称" prop="formNo">
+                    <el-input disabled v-model="form.fileName" placeholder="请输入文件名称" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item  label="文件" prop="formNo">
+                   <div style="display: flex;">
+                    <span style="color: rgb(50, 142, 248);" >{{ form.originalName }}</span>
+                    <!-- <el-button type="primary" link @click="handleView(scope.row)" 
+                    ><el-icon><View /></el-icon>查看</el-button
+                  > -->
+                   </div>
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </div>
+          </el-form>
+        </div>
+      </el-card>
+      <!-- 提交组件 -->
+      <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
+      <approvalRecord ref="approvalRecordRef"></approvalRecord>
+      <!-- 流程选择对话框 -->
+      <el-dialog
+        draggable
+        v-model="dialogVisible.visible"
+        :title="dialogVisible.title"
+        :before-close="handleClose"
+        width="500"
+        class="rounded-lg shadow-lg"
+      >
+        <div class="p-4">
+          <p class="text-gray-600 mb-4">请选择要启动的流程：</p>
+          <el-select v-model="flowCode" placeholder="请选择流程" style="width: 100%">
+            <el-option v-for="item in flowCodeOptions" :key="item.value" :label="item.label" :value="item.value" />
+          </el-select>
+        </div>
+        <template #footer>
+          <div class="dialog-footer p-4 border-t border-gray-100 flex justify-end space-x-3">
+            <el-button @click="handleClose" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50 transition-colors"
+              >取消</el-button
+            >
+            <el-button type="primary" @click="submitFlow()" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-primary/90 transition-colors"
+              >确认</el-button
+            >
+          </div>
+        </template>
+      </el-dialog>
+    </div>
+  </div>
+</template>
+
+<script setup name="Leave" lang="ts">
+import { LeaveForm, LeaveQuery, LeaveVO } from '@/api/workflow/leave/types';
+import { startWorkFlow } from '@/api/workflow/task';
+import SubmitVerify from '@/components/Process/submitVerify.vue';
+import ApprovalRecord from '@/components/Process/approvalRecord.vue';
+import ApprovalButton from '@/components/Process/approvalButton.vue';
+import { StartProcessBo } from '@/api/workflow/workflowCommon/types';
+const { proxy } = getCurrentInstance() as ComponentInternalInstance;
+import { useUserStoreHook } from '@/store/modules/user';
+const { design_change_reason_type } = toRefs<any>(proxy?.useDict('design_change_reason_type'));
+import { getKnowledgeDocument } from '@/api/design/technicalStandard';
+// 获取用户 store
+const userStore = useUserStoreHook();
+// 从 store 中获取项目列表和当前选中的项目
+const currentProject = computed(() => userStore.selectedProject);
+const buttonLoading = ref(false);
+const loading = ref(true);
+//路由参数
+const routeParams = ref<Record<string, any>>({});
+const flowCode = ref<string>('');
+const status = ref<string>('');
+const dialogVisible = reactive<DialogOption>({
+  visible: false,
+  title: '流程定义'
+});
+//提交组件
+const submitVerifyRef = ref<InstanceType<typeof SubmitVerify>>();
+//审批记录组件
+const approvalRecordRef = ref<InstanceType<typeof ApprovalRecord>>();
+//按钮组件
+const flowCodeOptions = [
+  {
+    value: currentProject.value?.id + '_principletechnical',
+    label: '设计原则审批'
+  },
+  {
+    value: currentProject.value?.id + '_requirementstechnica',
+    label: '业主需求清单审批'
+  }
+];
+
+const leaveFormRef = ref<ElFormInstance>();
+const dialog = reactive({
+  visible: false,
+  title: '',
+  isEdit: false
+});
+const submitFormData = ref<StartProcessBo>({
+  businessId: '',
+  flowCode: '',
+  variables: {}
+});
+const taskVariables = ref<Record<string, any>>({});
+
+const initFormData = {
+  id: undefined,
+  fileName:undefined,
+  fileUrl:undefined,
+  status:undefined,
+  originalName:undefined
+};
+const data = reactive({
+  form: { ...initFormData },
+  rules: {}
+});
+
+const handleClose = () => {
+  dialogVisible.visible = false;
+  flowCode.value = '';
+  buttonLoading.value = false;
+};
+const { form, rules } = toRefs(data);
+
+/** 表单重置 */
+const reset = () => {
+  form.value = { ...initFormData };
+  leaveFormRef.value?.resetFields();
+};
+
+/** 获取详情 */
+const getInfo = () => {
+  loading.value = true;
+  buttonLoading.value = false;
+  nextTick(async () => {
+    const res = await getKnowledgeDocument(routeParams.value.id);
+    Object.assign(form.value, res.data);
+    loading.value = false;
+    buttonLoading.value = false;
+  });
+};
+
+/** 提交按钮 */
+const submitForm = (status1: string) => {
+  status.value = status1;
+  submit(status.value,form.value);
+};
+
+const submitFlow = async () => {
+  handleStartWorkFlow(form.value);
+  dialogVisible.visible = false;
+};
+//提交申请
+const handleStartWorkFlow = async (data: LeaveForm) => {
+  try {
+    submitFormData.value.flowCode = flowCode.value;
+    submitFormData.value.businessId = data.id;
+    //流程变量
+    taskVariables.value = {
+      // leave4/5 使用的流程变量
+      userList: ['1', '3', '4']
+    };
+    submitFormData.value.variables = taskVariables.value;
+    const resp = await startWorkFlow(submitFormData.value);
+    if (submitVerifyRef.value) {
+      buttonLoading.value = false;
+      submitVerifyRef.value.openDialog(resp.data.taskId);
+    }
+  } finally {
+    buttonLoading.value = false;
+  }
+};
+//审批记录
+const handleApprovalRecord = () => {
+  approvalRecordRef.value.init(form.value.id);
+};
+//提交回调
+const submitCallback = async () => {
+  await proxy.$tab.closePage(proxy.$route);
+  proxy.$router.go(-1);
+};
+//审批
+const approvalVerifyOpen = async () => {
+  submitVerifyRef.value.openDialog(routeParams.value.taskId);
+};
+// 图纸上传成功之后 开始提交
+const submit = async (status, data) => {
+  form.value = data;
+  if (status === 'draft') {
+    buttonLoading.value = false;
+    proxy?.$modal.msgSuccess('暂存成功');
+    proxy.$tab.closePage(proxy.$route);
+    proxy.$router.go(-1);
+  } else {
+    if ((form.value.status === 'draft' && (flowCode.value === '' || flowCode.value === null)) || routeParams.value.type === 'add') {
+      flowCode.value = flowCodeOptions[0].value;
+      dialogVisible.visible = true;
+      return;
+    }
+    //说明启动过先随意穿个参数
+    if (flowCode.value === '' || flowCode.value === null) {
+      flowCode.value = 'xx';
+    }
+    await handleStartWorkFlow(data);
+  }
+};
+
+onMounted(() => {
+  nextTick(async () => {
+    routeParams.value = proxy.$route.query;
+    reset();
+    loading.value = false;
+    if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
+      getInfo();
+    }
+  });
+});
+</script>
+<style scoped lang="scss">
+/* 全局样式 */
+:root {
+  --primary: #409eff;
+  --primary-light: #66b1ff;
+  --primary-dark: #3a8ee6;
+  --success: #67c23a;
+  --warning: #e6a23c;
+  --danger: #f56c6c;
+  --info: #909399;
+}
+
+/* 表单样式优化 */
+.el-form-item {
+  .el-form-item__label {
+    color: #606266;
+    font-weight: 500;
+  }
+
+  .el-input__inner,
+  .el-select .el-input__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+
+  .el-textarea__inner {
+    border-radius: 4px;
+    transition:
+      border-color 0.2s,
+      box-shadow 0.2s;
+
+    &:focus {
+      border-color: var(--primary-light);
+      box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
+    }
+  }
+}
+
+/* 按钮样式优化 */
+.el-button {
+  border-radius: 4px;
+  transition: all 0.2s;
+
+  &.is-primary {
+    background-color: var(--primary);
+    border-color: var(--primary);
+
+    &:hover {
+      background-color: var(--primary-light);
+      border-color: var(--primary-light);
+    }
+
+    &:active {
+      background-color: var(--primary-dark);
+      border-color: var(--primary-dark);
+    }
+  }
+
+  &.is-text {
+    color: var(--primary);
+
+    &:hover {
+      color: var(--primary-light);
+      background-color: rgba(64, 158, 255, 0.05);
+    }
+  }
+}
+
+/* 卡片样式优化 */
+.el-card {
+  transition: all 0.3s ease;
+
+  &:hover {
+    /* transform: translateY(-2px); */
+  }
+}
+
+/* 对话框样式优化 */
+.el-dialog {
+  .el-dialog__header {
+    background-color: #f5f7fa;
+    border-bottom: 1px solid #ebeef5;
+    padding: 15px 20px;
+  }
+
+  .el-dialog__title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+  }
+
+  .el-dialog__footer {
+    padding: 15px 20px;
+    border-top: 1px solid #ebeef5;
+  }
+}
+</style>