前端集成onlyoffice

2025-11-10 09:46:22 +08:00 · 2025-11-10 09:46:22 +08:00 · c16aa923e2
parent 17ad8a9000
commit c16aa923e2
16 changed files with 341 additions and 226 deletions
--- a/.env.development
+++ b/.env.development
@ -8,7 +8,7 @@ VUE_APP_ENV = 'development'
 # 智能投标系统/开发环境
 VUE_APP_BASE_API = '/dev-api'

-VUE_APP_ONLYOFFICE_URL = 'http://192.168.0.14:19840'
+VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840'

 # 路由懒加载
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
--- a/.env.production
+++ b/.env.production
@ -4,6 +4,7 @@ VUE_APP_TITLE = 智能投标系统
 # 生产环境配置
 ENV = 'production'
 VUE_APP_ENV = 'production'
+VUE_APP_ONLYOFFICE_URL = 'http://36.33.26.201:19840'

 # 智能投标系统/生产环境
-VUE_APP_BASE_API = '/smart-archiving-api'
+VUE_APP_BASE_API = '/smart-bid-api'
--- a/src/api/common/onlyOfficeViewer.js
+++ b/src/api/common/onlyOfficeViewer.js
@ -8,3 +8,12 @@ export function getConfigAPI(params) {
        params
    })
 }
+
+// 调用后端生成专用 token
+export function generateCallbackTokenAPI(params) {
+    return request({
+        url: '/smartBid/documents/handleCallbackToken',
+        method: 'get',
+        params
+    })
+}
--- a/src/assets/styles/element-variables.scss
+++ b/src/assets/styles/element-variables.scss
@ -4,7 +4,7 @@
 **/

 /* theme color */
-$--color-primary: #006E6B;
+$--color-primary: #1E6BFF;
 $--color-success: #13ce66;
 $--color-warning: #ffba00;
 $--color-danger: #ff4949;
--- a/src/components/ThemePicker/index.vue
+++ b/src/components/ThemePicker/index.vue
@ -1,14 +1,14 @@
 <template>
  <el-color-picker
    v-model="theme"
-    :predefine="['#006E6B', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
+    :predefine="['#1E6BFF', '#1890ff', '#304156','#212121','#11a983', '#13c2c2', '#6959CD', '#f5222d', ]"
    class="theme-picker"
    popper-class="theme-picker-dropdown"
  />
 </template>

 <script>
-const ORIGINAL_THEME = '#006E6B' // default color
+const ORIGINAL_THEME = '#1E6BFF' // default color

 export default {
  data() {
--- a/src/layout/components/Navbar.vue
+++ b/src/layout/components/Navbar.vue
@ -104,7 +104,7 @@ export default {
      }).then(() => {
        getSystemConfigApi();
        this.$store.dispatch('LogOut').then(() => {
-          location.href = process.env.VUE_APP_ENV === 'production'? '/smart-archiving/index': '/index'
+          location.href = process.env.VUE_APP_ENV === 'production'? '/smart-bid/index': '/index'
          
        })
      }).catch(() => {})
@ -131,7 +131,7 @@ export default {
    -webkit-tap-highlight-color:transparent;

    &:hover {
-      background: #006E6B50
+      background: #1E6BFF50
    }
  }

--- a/src/layout/components/Sidebar/Logo.vue
+++ b/src/layout/components/Sidebar/Logo.vue
@ -58,7 +58,7 @@ export default {
  height: 50px;
  line-height: 50px;
  // background: #2b2f3a;
-  background: #006E6B !important;
+  background: #1E6BFF !important;
  text-align: center;
  overflow: hidden;

--- a/src/router/index.js
+++ b/src/router/index.js
@ -541,6 +541,20 @@ export const dynamicRoutes = [
      }
    ]
  },
+  {
+    path: '/testOnlyOffice',
+    component: Layout,
+    hidden: true,
+    permissions: ['enterpriseLibrary:analysis:detail'],
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/analysis/components/TestOnlyOffice'),
+        name: 'TestOnlyOffice',
+        meta: { title: '预览文档', activeMenu: '/analysis', noCache: true }
+      }
+    ]
+  },
 ]

 // 防止连续点击多次路由报错
@ -559,5 +573,5 @@ export default new Router({
  mode: 'history', // 去掉url中的#
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes,
-  base: process.env.VUE_APP_ENV === 'production' ? '/smart-archiving' : ''
+  base: process.env.VUE_APP_ENV === 'production' ? '/smart-bid' : ''
 })
--- a/src/utils/request.js
+++ b/src/utils/request.js
@ -284,7 +284,7 @@ service.interceptors.response.use(
                            store.dispatch('LogOut').then(() => {
                                location.href =
                                    process.env.VUE_APP_ENV === 'production'
-                                        ? '/smart-archiving/index'
+                                        ? '/smart-bid/index'
                                        : '/index'
                            })
                        },
@ -315,7 +315,7 @@ service.interceptors.response.use(
                        store.dispatch('LogOut').then(() => {
                            location.href =
                                process.env.VUE_APP_ENV === 'production'
-                                    ? '/smart-archiving/index'
+                                    ? '/smart-bid/index'
                                    : '/index'
                        })
                    })
--- a/src/views/analysis/components/TestOnlyOffice.vue
+++ b/src/views/analysis/components/TestOnlyOffice.vue
@ -1,8 +1,18 @@
 <template>
    <div>
-        <OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle" :document-key="documentKey"
-            :mode="mode" :type="type" @document-ready="handleDocumentReady" @app-ready="handleAppReady"
-            @error="handleError" @initialized="handleInitialized" />
+        <OnlyOfficeViewer
+            :document-url="documentUrl"
+            :document-title="documentTitle"
+            :document-key="documentKey"
+            :mode="mode"
+            :type="type"
+            @document-ready="handleDocumentReady"
+            @app-ready="handleAppReady"
+            @error="handleError"
+            @initialized="handleInitialized"
+            :force-save="true"
+            :save-timeout="15000"
+        />
    </div>
 </template>

@ -15,26 +25,27 @@ export default {
    },
    data() {
        return {
-            documentUrl: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx',
-            documentTitle: '716d9f3d89434c56bc49296dbbccc226.docx',
-            documentKey: '716d9f3d89434c56bc49296dbbccc226',
+            documentUrl:
+                'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx',
+            documentTitle: '.docx',
+            documentKey: '98',
            mode: 'edit',
            type: 'desktop', // desktop, mobile embedded
        }
    },
    methods: {
        handleDocumentReady() {
-            console.log('文档已准备就绪');
+            console.log('文档已准备就绪')
        },
        handleAppReady() {
-            console.log('应用已准备就绪');
+            console.log('应用已准备就绪')
        },
        handleError(error) {
-            console.log('错误：', error);
+            console.log('错误：', error)
        },
        handleInitialized() {
-            console.log('初始化完成');
-        }
-    }
+            console.log('初始化完成')
+        },
+    },
 }
 </script>
--- a/src/views/analysis/index.vue
+++ b/src/views/analysis/index.vue
@ -2,23 +2,15 @@
    <!-- 招标解析 -->
    <el-card class="analysis-container">
        <div class="table-container">
-            <TableModel 
-                :formLabel="formLabel" 
-                :showOperation="true" 
-                :showRightTools="false" 
-                ref="analysisTableRef"
-                :columnsList="columnsList" 
-                :request-api="listAPI" 
-                :sendParams="sendParams" 
-                :handleColWidth="250"
-            >
+            <TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="analysisTableRef"
+                :columnsList="columnsList" :request-api="listAPI" :sendParams="sendParams" :handleColWidth="250">
                <template slot="tableTitle">
                    <h3>数据列表</h3>
                </template>
                <template slot="tableActions">
                    <el-button @click="handleAdd" v-hasPermi="['analysis:analysis:add']" class="add-btn"><i
                            class="el-icon-plus"></i> 新建项目</el-button>
-                    <el-button @click="showViewer = true">预览文档</el-button>
+                    <el-button @click="handleOnlyOffice">预览文档</el-button>
                </template>
                <template slot="handle" slot-scope="{ data }">
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:analysis:detail']" class="action-btn"
@ -34,18 +26,17 @@
                        查看标段
                    </el-button>
                    <el-button type="text" v-hasPermi="['enterpriseLibrary:tool:del']" class="action-btn"
-                        style="color: #DB3E29;" @click="handleDelete(data)">
+                        style="color: #db3e29" @click="handleDelete(data)">
                        删除
                    </el-button>
-
                </template>
            </TableModel>
        </div>
-        <el-dialog :visible.sync="showViewer" width="60%" append-to-body>
-            <OnlyOfficeViewer :document-id="documentId" :document-name="documentName" height="80vh"
-                :allow-download="true" @close="showViewer = false" @loaded="onViewerLoaded" @error="onViewerError"
-                @download-success="onDownloadSuccess" />
-        </el-dialog>
+        <!-- <el-dialog :visible.sync="showViewer" width="80%" append-to-body title="预览">
+            <OnlyOfficeViewer :document-url="documentUrl" :document-title="documentTitle" :document-key="documentKey"
+                :mode="mode" :type="type" @document-ready="handleDocumentReady" @app-ready="handleAppReady" @error="handleError"
+                @initialized="handleInitialized" />
+        </el-dialog> -->
        <!-- 新建项目 -->
        <AnalysisForm v-if="showAnalysisForm" :title="title" :row="row" @closeDialog="showAnalysisForm = false"
            :width="600" />
@ -64,7 +55,7 @@ export default {
    components: {
        TableModel,
        OnlyOfficeViewer,
-        AnalysisForm
+        AnalysisForm,
    },
    data() {
        return {
@ -72,11 +63,14 @@ export default {
            columnsList,
            listAPI,
            sendParams: {
-                enterpriseId: 2
+                enterpriseId: 2,
            },
            showViewer: false,
-            documentId: '716d9f3d89434c56bc49296dbbccc226',
-            documentName: 'technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx',
+            documentUrl: 'http://192.168.0.14:9090/smart-bid/technicalSolutionDatabase/2025/11/03/716d9f3d89434c56bc49296dbbccc226.docx',
+            documentTitle: '716d9f3d89434c56bc49296dbbccc226.docx',
+            documentKey: '716d9f3d89434c56bc49296dbbccc226',
+            mode: 'edit',
+            type: 'desktop', // desktop, mobile embedded
            showAnalysisForm: false,
            title: '',
            row: {},
@ -84,32 +78,40 @@ export default {
        }
    },

-    created() {
-    },
+    created() { },

    methods: {
-        onViewerLoaded(editor) {
-            console.log('文档查看器已加载', editor);
+        handleDocumentReady() {
+            console.log('文档已准备就绪');
        },
-        onViewerError(error) {
-            console.error('文档查看器错误', error);
-            this.$message.error('加载文档失败');
+        handleAppReady() {
+            console.log('应用已准备就绪');
        },
-        onDownloadSuccess() {
-            this.$message.success('文档下载成功');
+        handleError(error) {
+            console.error('发生错误:', error);
+            this.$message.error('文档加载失败');
        },
+        handleInitialized(editor) {
+            console.log('编辑器已初始化', editor);
+        },
+        handleOnlyOffice() {
+            this.$router.push({
+                name: 'TestOnlyOffice',
+            })
+        },
+
        /** 新增按钮操作 */
        handleAdd() {
-            this.title = "新建项目";
-            this.showAnalysisForm = true;
+            this.title = '新建项目'
+            this.showAnalysisForm = true
        },

        /** 修改操作 */
        handleUpdate(row) {
-            this.title = "修改项目";
-            this.isAdd = 'edit';
-            this.row = row;
-            this.isflag = true;
+            this.title = '修改项目'
+            this.isAdd = 'edit'
+            this.row = row
+            this.isflag = true
        },

        /* 查看操作 */
@ -117,8 +119,8 @@ export default {
            this.$router.push({
                name: 'AnalysisDetail',
                query: {
-                    proId: encryptWithSM4('2')
-                }
+                    proId: encryptWithSM4('2'),
+                },
            })
        },
        /** 标段解析操作 */
@ -126,8 +128,8 @@ export default {
            this.$router.push({
                name: 'AnalysisBidDetail',
                query: {
-                    proId: encryptWithSM4('2')
-                }
+                    proId: encryptWithSM4('2'),
+                },
            })
        },
        /** 查看标段操作 */
@ -135,8 +137,8 @@ export default {
            this.$router.push({
                name: 'AnalysisBidIndex',
                query: {
-                    proId: encryptWithSM4('2')
-                }
+                    proId: encryptWithSM4('2'),
+                },
            })
        },

@ -147,28 +149,32 @@ export default {

        /** 删除操作 */
        handleDelete(row) {
-            this.$confirm(`确定要删除"${row.toolName}"吗？删除后将无法恢复！`, '操作提示', {
+            this.$confirm(
+                `确定要删除"${row.toolName}"吗？删除后将无法恢复！`,
+                '操作提示',
+                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    dangerouslyUseHTMLString: true,
-                customClass: 'delete-confirm-dialog'
-            }).then(() => {
-                delDataAPI(
-                    {
+                    customClass: 'delete-confirm-dialog',
+                },
+            ).then(() => {
+                delDataAPI({
                    toolId: row.toolId,
-                        enterpriseId: this.enterpriseId
-                    }
-                ).then(res => {
+                    enterpriseId: this.enterpriseId,
+                })
+                    .then((res) => {
                        if (res.code === 200) {
-                        this.$message.success('删除成功');
-                        this.handleQuery();
+                            this.$message.success('删除成功')
+                            this.handleQuery()
                        } else {
-                        this.$message.error(res.msg || '删除失败');
+                            this.$message.error(res.msg || '删除失败')
                        }
-                }).catch(error => {
-                    console.error('删除失败:', error);
-                });
+                    })
+                    .catch((error) => {
+                        console.error('删除失败:', error)
+                    })
            })
        },
    },
@ -178,19 +184,17 @@ export default {
 .analysis-container {
    height: calc(100vh - 84px);
    overflow: hidden;
-    background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
+    background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
 }

 ::v-deep .table-card {
    height: calc(100vh - 230px) !important;
 }

-
-
 .add-btn {
    width: 121px;
    height: 36px;
-    background: #1F72EA;
+    background: #1f72ea;
    box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
    border-radius: 4px 4px 4px 4px;
    color: #fff;
@ -199,7 +203,7 @@ export default {
    transition: all 0.3s;

    &:hover {
-        background: #4A8BFF;
+        background: #4a8bff;
        box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
    }
 }
--- a/src/views/common/OnlyOfficeViewer.vue
+++ b/src/views/common/OnlyOfficeViewer.vue
@ -68,6 +68,9 @@ export default {
    try {
      this.loading = true;
      this.error = null;
+      if(this.docEditor){
+        this.destroyEditor();
+      }
      // 先加载配置
      await this.getConfig();
      // 再初始化 OnlyOffice（成功后会自动设置 loading = false）
@ -90,14 +93,12 @@ export default {
      try {
        console.log('开始获取编辑器配置...', {
          fileId: this.documentKey,
-          fileName: this.fileName,
          mode: this.mode,
          type: this.type
        });

        const res = await getConfigAPI({
          fileId: this.documentKey,
-          fileName: this.fileName,
          mode: this.mode,
          type: this.type
        });
@ -122,7 +123,7 @@ export default {
          events: {
            onDocumentReady: () => this.onDocumentReady(),
            onError: (error) => this.onEditorError(error),
-            onAppReady: () => this.onAppReady()
+            onAppReady: () => this.onAppReady(),
          }
        };

@ -331,9 +332,9 @@ export default {
     * 销毁编辑器
     */
    destroyEditor() {
-      if (this.docEditor && typeof this.docEditor.destroy === 'function') {
+      if (this.docEditor) {
        try {
-          this.docEditor.destroy();
+          this.docEditor.destroyEditor()
        } catch (error) {
          console.warn('销毁编辑器时出错:', error);
        }
@ -431,8 +432,13 @@ export default {
 }

@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
 }

 .error-icon {
--- a/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue
+++ b/src/views/enterpriseLibrary/enterprise/components/EnterpriseForm.vue
@ -16,10 +16,14 @@
                <el-col :span="6" class="pane-left">
                    <BasicInfo ref="basicInfo" :detailData="detailData" />
                </el-col>
+            </el-row>
+            <el-row :gutter="24" class="content-row">
                <!-- 法人信息 -->
                <el-col :span="6" class="pane-center">
                    <LegalPerson ref="legalPerson" :detailData="detailData" />
                </el-col>
+            </el-row>
+            <el-row :gutter="24" class="content-row">
                <!-- 开户证明 -->
                <el-col :span="6" class="pane-right">
                    <AccountOpeningCertificate ref="accountOpeningCertificate" :detailData="detailData" />
--- a/src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificate.vue
+++ b/src/views/enterpriseLibrary/enterprise/components/child/AccountOpeningCertificate.vue
@ -4,17 +4,32 @@
            <img src="@/assets/enterpriseLibrary/legalperson.png" alt="开户证明">
            <span>开户证明</span>
        </div>
-        <el-form :model="form" :rules="rules" ref="accountOpeningCertificateForm" label-width="110px" label-position="top">
+        <el-form :model="form" :rules="rules" ref="accountOpeningCertificateForm" label-width="110px"
+            label-position="top">
+            <el-row :gutter="24">
+                <el-col :span="8">
                    <el-form-item label="开户许可证" prop="fileList">
-                <UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule"
-                @del-file="handleDelFile" @file-change="handleFileChange" type="account_opening_license"/>
+                        <UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule" @del-file="handleDelFile"
+                            @file-change="handleFileChange" type="account_opening_license" />
                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="8">
                    <el-form-item label="开户银行" prop="openingBank">
-                <el-input v-model.trim="form.openingBank" placeholder="自动提取" clearable show-word-limit maxlength="64"></el-input>
+                        <el-input v-model.trim="form.openingBank" placeholder="自动提取" clearable show-word-limit
+                            maxlength="64"></el-input>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="开户账号" prop="openingAccount">
-                <el-input v-model.trim="form.openingAccount" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
+                        <el-input v-model.trim="form.openingAccount" placeholder="自动提取" clearable show-word-limit
+                            maxlength="32"></el-input>
                    </el-form-item>
+                </el-col>
+            </el-row>
+
+

        </el-form>
    </div>
@ -24,18 +39,18 @@
 import UploadFile from '@/views/common/UploadFile.vue'
 export default {
    name: 'AccountOpeningCertificate',
-    components:{UploadFile},
+    components: { UploadFile },
    dicts: ['identification_tag'],
-    props:{
+    props: {
        detailData: {
            type: Object,
-            default: () => {}
+            default: () => { }
        }
    },
    data() {
        return {
            form: {
-                fileList:[],
+                fileList: [],
                openingBank: '',
                openingAccount: '',
                delFileList: []
@ -50,7 +65,7 @@ export default {
                "开户账号": "openingAccount",
            },
            rules: {
-                fileList:[
+                fileList: [
                    { required: true, message: '请上传开户许可证', trigger: 'change' }
                ],
                openingBank: [
@ -120,11 +135,11 @@ export default {
        handleDelFile(file) {
            console.log(file);
            const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
-            if(delPath){
+            if (delPath) {
                this.form.delFileList.push(delPath);
            }
        },
-        setFormData(){
+        setFormData() {
            const fileList = this.getFileList('account_opening_license');
            this.form = {
                fileList: fileList,
@ -133,13 +148,13 @@ export default {
                delFileList: []
            }
        },
-        getFileList(businessType){
+        getFileList(businessType) {
            return this.detailData.fileList.filter(item => item.businessType === businessType).map(item => {
                return {
                    name: item.fileName,
                    filePath: item.filePath,
-                    lsFilePath:item.lsFilePath,
-                    fileType:item.fileType
+                    lsFilePath: item.lsFilePath,
+                    fileType: item.fileType
                };
            });
        }
@ -159,14 +174,14 @@ export default {
            },
            immediate: true // 立即执行一次
        },
-        detailData:{
+        detailData: {
            handler(newVal) {
                if (Object.keys(newVal).length > 0) {
                    this.setFormData();
                }
            },
            immediate: true, // 立即执行一次
-            deep:true
+            deep: true
        }
    },

@ -178,7 +193,8 @@ export default {
    display: flex;
    align-items: center;
    margin: 10px 0;
-    span{
+
+    span {
        margin: 0 5px;
        font-size: 20px;
    }
--- a/src/views/enterpriseLibrary/enterprise/components/child/BasicInfo.vue
+++ b/src/views/enterpriseLibrary/enterprise/components/child/BasicInfo.vue
@ -5,39 +5,62 @@
            <span>基本信息</span>
        </div>
        <el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top">
-            <!-- 营业执照 -->
+            <el-row>
+                <el-col :span="8">
                    <el-form-item label="营业执照" prop="fileList">
-                <UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule" @file-change="handleFileChange"
-                  @del-file="handleDelFile"  type="business_license" />
+                        <UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule"
+                            @file-change="handleFileChange" @del-file="handleDelFile" type="business_license" />
                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="8">
                    <el-form-item label="企业名称" prop="enterpriseName">
                        <el-input v-model.trim="form.enterpriseName" placeholder="自动提取" clearable show-word-limit
                            maxlength="64"></el-input>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="统一社会信用代码" prop="enterpriseCode">
                        <el-input v-model.trim="form.enterpriseCode" placeholder="自动提取" clearable show-word-limit
                            maxlength="32"></el-input>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="注册资本" prop="registeredCapital">
                        <el-input v-model.trim="form.registeredCapital" placeholder="自动提取" clearable show-word-limit
                            maxlength="16"></el-input>
                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="8">
                    <el-form-item label="成立日期" prop="establishedDate">
                        <el-date-picker class="form-item" v-model="form.establishedDate" placeholder="自动提取"
                            value-format="yyyy-MM-dd" type="date"></el-date-picker>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="营业期限" prop="businessTerm">
                        <el-input v-model.trim="form.businessTerm" placeholder="自动提取" clearable show-word-limit
                            maxlength="32"></el-input>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="住所" prop="residence">
                        <el-input v-model.trim="form.residence" placeholder="自动提取" clearable show-word-limit
                            maxlength="128"></el-input>
                    </el-form-item>
+                </el-col>
+            </el-row>
+            <el-row :gutter="24">
+                <el-col :span="24">
                    <el-form-item label="经营范围" prop="businessScope">
-                <el-input :autosize="{ minRows: 8, maxRows: 12 }" clearable show-word-limit maxlength="255"
+                        <el-input :autosize="{ minRows: 3, maxRows: 5 }" clearable show-word-limit maxlength="255"
                            type="textarea" v-model.trim="form.businessScope" placeholder="自动提取"></el-input>
                    </el-form-item>
+                </el-col>
+            </el-row>
        </el-form>
    </div>
 </template>
@ -50,10 +73,10 @@ export default {
    components: {
        UploadFile
    },
-    props:{
+    props: {
        detailData: {
            type: Object,
-            default: () => {}
+            default: () => { }
        }
    },
    dicts: ['identification_tag'],
@ -175,11 +198,11 @@ export default {
        handleDelFile(file) {
            console.log(file);
            const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
-            if(delPath){
+            if (delPath) {
                this.form.delFileList.push(delPath);
            }
        },
-        setFormData(){
+        setFormData() {
            const fileList = this.getFileList('business_license');

            this.form = {
@ -194,13 +217,13 @@ export default {
                delFileList: []
            }
        },
-        getFileList(businessType){
+        getFileList(businessType) {
            return this.detailData.fileList.filter(item => item.businessType === businessType).map(item => {
                return {
                    name: item.fileName,
                    filePath: item.filePath,
-                    lsFilePath:item.lsFilePath,
-                    fileType:item.fileType
+                    lsFilePath: item.lsFilePath,
+                    fileType: item.fileType
                };
            });
        }
@ -221,14 +244,14 @@ export default {
            },
            immediate: true // 立即执行一次
        },
-        detailData:{
+        detailData: {
            handler(newVal) {
                if (Object.keys(newVal).length > 0) {
                    this.setFormData();
                }
            },
            immediate: true, // 立即执行一次
-            deep:true
+            deep: true
        }
    },
 }
--- a/src/views/enterpriseLibrary/enterprise/components/child/LegalPerson.vue
+++ b/src/views/enterpriseLibrary/enterprise/components/child/LegalPerson.vue
@ -5,46 +5,73 @@
            <span>法人信息</span>
        </div>
        <el-form :model="form" :rules="rules" ref="legalPersonForm" label-width="110px" label-position="top">
+            <el-row :gutter="24">
+                <el-col :span="8">
                    <!-- 身份证人像面 -->
                    <el-form-item label="身份证人像面" prop="fileList">
-                <UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule"
-                @del-file="handleDelFile" @file-change="handleFileChange" type="face_id_card_portrait" />
+                        <UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule" @del-file="handleDelFile"
+                            @file-change="handleFileChange" type="face_id_card_portrait" />
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <!-- 身份证国徽面 -->
                    <el-form-item label="身份证国徽面" prop="fileList2">
                        <UploadFile :fileList="form.fileList2" :fileUploadRule="fileUploadRule2"
                            @del-file="handleDelFile" @file-change="handleFileChange" type="national_emblem_id_card" />
                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="24">
+                <el-col :span="8">
                    <el-form-item label="法人姓名" prop="legalPersonName">
-                <el-input v-model.trim="form.legalPersonName" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
+                        <el-input v-model.trim="form.legalPersonName" placeholder="自动提取" clearable show-word-limit
+                            maxlength="32"></el-input>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="法人身份证号" prop="legalPersonIdCard">
-                <el-input v-model.trim="form.legalPersonIdCard" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
+                        <el-input v-model.trim="form.legalPersonIdCard" placeholder="自动提取" clearable show-word-limit
+                            maxlength="32"></el-input>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="身份证有效期" prop="idCardStartDate">
-                <el-input v-model.trim="form.idCardStartDate" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
+                        <el-input v-model.trim="form.idCardStartDate" placeholder="自动提取" clearable show-word-limit
+                            maxlength="32"></el-input>
                    </el-form-item>
+                </el-col>
+            </el-row>
+
+            <el-row :gutter="24">
+                <el-col :span="8">
                    <el-form-item label="法人职务" prop="legalPersonPosition">
-                <el-input v-model.trim="form.legalPersonPosition" placeholder="请输入法人职务" clearable show-word-limit maxlength="32"></el-input>
+                        <el-input v-model.trim="form.legalPersonPosition" placeholder="请输入法人职务" clearable
+                            show-word-limit maxlength="32"></el-input>
                    </el-form-item>
+                </el-col>
+                <el-col :span="8">
                    <el-form-item label="法人联系方式" prop="legalPersonPhone">
-                <el-input v-model.trim="form.legalPersonPhone" placeholder="请输入法人联系方式" clearable show-word-limit maxlength="11"></el-input>
+                        <el-input v-model.trim="form.legalPersonPhone" placeholder="请输入法人联系方式" clearable show-word-limit
+                            maxlength="11"></el-input>
                    </el-form-item>
+                </el-col>
+            </el-row>
        </el-form>
    </div>
 </template>

 <script>
 import UploadFile from '@/views/common/UploadFile.vue'
-import { validMobile,validIdCard } from '@/utils/validate'
+import { validMobile, validIdCard } from '@/utils/validate'
 export default {
    name: 'LegalPerson',
    components: { UploadFile },
    dicts: ['identification_tag'],
-    props:{
+    props: {
        detailData: {
            type: Object,
-            default: () => {}
+            default: () => { }
        }
    },
    data() {
@ -173,11 +200,11 @@ export default {
        handleDelFile(file) {
            console.log(file);
            const delPath = file?.response?.fileRes?.filePath || file?.filePath || null;
-            if(delPath){
+            if (delPath) {
                this.form.delFileList.push(delPath);
            }
        },
-        setFormData(){
+        setFormData() {
            const fileList = this.getFileList('face_id_card_portrait')
            const fileList2 = this.getFileList('national_emblem_id_card')
            this.form = {
@ -191,13 +218,13 @@ export default {
                delFileList: []
            }
        },
-        getFileList(businessType){
+        getFileList(businessType) {
            return this.detailData.fileList.filter(item => item.businessType === businessType).map(item => {
                return {
                    name: item.fileName,
                    filePath: item.filePath,
-                    lsFilePath:item.lsFilePath,
-                    fileType:item.fileType
+                    lsFilePath: item.lsFilePath,
+                    fileType: item.fileType
                };
            });
        }
@ -220,14 +247,14 @@ export default {
            },
            immediate: true // 立即执行一次
        },
-        detailData:{
+        detailData: {
            handler(newVal) {
                if (Object.keys(newVal).length > 0) {
                    this.setFormData();
                }
            },
            immediate: true, // 立即执行一次
-            deep:true
+            deep: true
        }
    },
 }