refactor(create-order): 将合同信息中的协议归档状态等功能模块化

- 新增 ContractInfoProtocolModule 组件，用于显示协议归档状态等信息
- 从 ContractInfo 组件中移除原有的协议归档状态相关代码
- 在 ContractInfo 组件中引入新的 ContractInfoProtocolModule 组件

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/views/create-order/components/order-detail-submodule/ContractInfo.vue

@@ -10,20 +10,7 @@
           <button @click="editContractArchive" v-if="contractRes?.contract_archive_status === 1" class="edit-btn">编辑</button>
         </div>
       </template>
-      <div class="contract-info-card">
-        <div class="contract-info-card-item">
-          协议归档状态：{{contractRes?.contract_archive_status === 1 ? '已归档' : '未归档' }}
-        </div>
-        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
-          归档时间：{{ formatDate(contractRes?.contract_archive_time)  }}
-        </div>
-        <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
-          归档份数：{{ contractRes?.contract_archive_num || '-'  }}
-        </div>
-        <div class="contract-info-card-item" @click="viewfileEvent" v-if="contractRes?.contract_archive_status === 1">
-          归档协议：<span class="column-cell">{{ contractRes?.contract_file_name || '-'  }}</span>
-        </div>
-      </div>
+      <ContractInfoProtocolModule></ContractInfoProtocolModule>
     </InfoCard>
     <ContractInfoElectronModule @refresh="doRefresh"></ContractInfoElectronModule>
     <new-d-model :data="orderDetail"  ref="detailModelContract" @refresh="doRefresh"></new-d-model>
@@ -35,6 +22,7 @@ import InfoCard from '../../ui/InfoCard.vue';
 import NewDModel from "@/views/order/components/new-detailModel.vue";
 import ContractInfoSignModule from './ContractInfoSignModule.vue';
 import ContractInfoElectronModule from './ContractInfoElectronModule.vue';
+import ContractInfoProtocolModule from './ContractInfoProtocolModule.vue';
 import { mapState } from 'vuex'
 export default {
   name: 'ContractInfo',
@@ -42,7 +30,8 @@ export default {
     NewDModel,
     InfoCard,
     ContractInfoSignModule,
-    ContractInfoElectronModule
+    ContractInfoElectronModule,
+    ContractInfoProtocolModule
   },
   computed: {
     ...mapState({
@@ -89,25 +78,6 @@ export default {
       } else {
         this.$message.error('暂无权限')
       }
-    },
-    formatDate(timeString) {
-      if (!timeString) return '-';
-      // 只取空格前的日期部分
-      return timeString.split(' ')[0];
-    },
-    // 查看归档协议
-    viewfileEvent() {
-      const url = this.contractRes?.contract_file_url;
-      if(url) {
-        const urls = this.$router.resolve(url)
-        const fileUrl = '/shareFile' + urls.href.split('/shareFile')[1]
-        this.$confirm("确定下载该归档协议吗？", "提示").then(() => {
-          const a1 = document.createElement('a')
-          a1.download = this.contractRes.contract_file_name
-          a1.href = fileUrl
-          a1.click()
-        })
-      }
     }
   }
 }
@@ -138,31 +108,6 @@ export default {
     cursor: pointer;
   }
 }
-.contract-info-card {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  &.card-noflex {
-    display: block;
-  }
-  &-item {
-    display: flex;
-    align-items: center;
-    margin-right: 32px;
-    min-width: 255px;
-    font-size: 14px;
-    line-height: 22px;
-    color: $gray_10;
-    .red-chong {
-      color: $red_light;
-    }
-  }
-  .arow {
-    display: flex;
-    align-items: center;
-    margin: 10px 0;
-  }
-}
 .edit-contract-archive-dialog {
     width: 100%;
     ::v-deep {

src/views/create-order/components/order-detail-submodule/ContractInfoProtocolModule.vue

@@ -0,0 +1,129 @@
+<template>
+  <div class="contract-info-protocol">
+    <div class="contract-info-card">
+      <div class="contract-info-card-item">
+        协议归档状态：{{contractRes?.contract_archive_status === 1 ? '已归档' : '未归档' }}
+      </div>
+      <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
+        归档时间：{{ formatDate(contractRes?.contract_archive_time)  }}
+      </div>
+      <div class="contract-info-card-item" v-if="contractRes?.contract_archive_status === 1">
+        归档份数：{{ contractRes?.contract_archive_num || '-'  }}
+      </div>
+      <div class="contract-info-card-item" @click="viewfileEvent" v-if="contractRes?.contract_archive_status === 1">
+        归档协议：<span class="column-cell">{{ contractRes?.contract_file_name || '-'  }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+export default {
+  name: 'ContractInfo',
+  components: {
+  },
+  computed: {
+    ...mapState({
+      orderDetail: state => state.order.orderDetail
+    }),
+    contractRes () {
+      return this.orderDetail?.contractRes || {}
+    },
+  },
+  methods: {
+    formatDate(timeString) {
+      if (!timeString) return '-';
+      // 只取空格前的日期部分
+      return timeString.split(' ')[0];
+    },
+    // 查看归档协议
+    viewfileEvent() {
+      const url = this.contractRes?.contract_file_url;
+      if(url) {
+        const urls = this.$router.resolve(url)
+        const fileUrl = '/shareFile' + urls.href.split('/shareFile')[1]
+        this.$confirm("确定下载该归档协议吗？", "提示").then(() => {
+          const a1 = document.createElement('a')
+          a1.download = this.contractRes.contract_file_name
+          a1.href = fileUrl
+          a1.click()
+        })
+      }
+    }
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+.contract-info {
+  background: #f5f7f9;
+  ::v-deep {
+    .info-card {
+      margin-bottom: 16px;
+    }
+  }
+}
+.contract-info-card-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .edit-btn {
+    padding: 4px 31px;
+    background: $color_main;
+    color: $white;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    border: none;
+    cursor: pointer;
+  }
+}
+.contract-info-card {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  &.card-noflex {
+    display: block;
+  }
+  &-item {
+    display: flex;
+    align-items: center;
+    margin-right: 32px;
+    min-width: 255px;
+    font-size: 14px;
+    line-height: 22px;
+    color: $gray_10;
+    .red-chong {
+      color: $red_light;
+    }
+  }
+  .arow {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+  }
+}
+.edit-contract-archive-dialog {
+    width: 100%;
+    ::v-deep {
+      .el-dialog {
+        width: 100%;
+        .dialog-footer {
+          justify-content: center;
+        }
+        .action-button {
+          flex: none;
+          width: 132px;
+        }
+      }
+    }
+
+  }
+.column-cell {
+  color: $color_main;
+  cursor: pointer;
+  text-decoration: underline;
+}
+</style>