前端集成onlyoffice
This commit is contained in:
parent
17ad8a9000
commit
c16aa923e2
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
|
|
|
|||
|
|
@ -7,4 +7,13 @@ export function getConfigAPI(params) {
|
|||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
// 调用后端生成专用 token
|
||||
export function generateCallbackTokenAPI(params) {
|
||||
return request({
|
||||
url: '/smartBid/documents/handleCallbackToken',
|
||||
method: 'get',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
**/
|
||||
|
||||
/* theme color */
|
||||
$--color-primary: #006E6B;
|
||||
$--color-primary: #1E6BFF;
|
||||
$--color-success: #13ce66;
|
||||
$--color-warning: #ffba00;
|
||||
$--color-danger: #ff4949;
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ export default {
|
|||
height: 50px;
|
||||
line-height: 50px;
|
||||
// background: #2b2f3a;
|
||||
background: #006E6B !important;
|
||||
background: #1E6BFF !important;
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
|
|||
|
|
@ -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' : ''
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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'
|
||||
})
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
},
|
||||
})
|
||||
},
|
||||
|
||||
|
|
@ -144,31 +146,35 @@ export default {
|
|||
handleQuery() {
|
||||
this.$refs.analysisTableRef.getTableList()
|
||||
},
|
||||
|
||||
|
||||
/** 删除操作 */
|
||||
handleDelete(row) {
|
||||
this.$confirm(`确定要删除"${row.toolName}"吗？删除后将无法恢复！`, '操作提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'delete-confirm-dialog'
|
||||
}).then(() => {
|
||||
delDataAPI(
|
||||
{
|
||||
toolId: row.toolId,
|
||||
enterpriseId: this.enterpriseId
|
||||
}
|
||||
).then(res => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('删除成功');
|
||||
this.handleQuery();
|
||||
} else {
|
||||
this.$message.error(res.msg || '删除失败');
|
||||
}
|
||||
}).catch(error => {
|
||||
console.error('删除失败:', error);
|
||||
});
|
||||
this.$confirm(
|
||||
`确定要删除"${row.toolName}"吗？删除后将无法恢复！`,
|
||||
'操作提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
dangerouslyUseHTMLString: true,
|
||||
customClass: 'delete-confirm-dialog',
|
||||
},
|
||||
).then(() => {
|
||||
delDataAPI({
|
||||
toolId: row.toolId,
|
||||
enterpriseId: this.enterpriseId,
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 200) {
|
||||
this.$message.success('删除成功')
|
||||
this.handleQuery()
|
||||
} else {
|
||||
this.$message.error(res.msg || '删除失败')
|
||||
}
|
||||
})
|
||||
.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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="loading-spinner"></div>
|
||||
<p>正在加载文档...</p>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 错误状态 -->
|
||||
<div v-if="error" class="error-state">
|
||||
<div class="error-icon">❌</div>
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<p>{{ error }}</p>
|
||||
<button @click="retry" class="retry-btn">重试</button>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- 编辑器容器（始终存在，通过样式控制显示） -->
|
||||
<div v-show="!loading && !error" id="placeholder" class="editor-placeholder"></div>
|
||||
</div>
|
||||
|
|
@ -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,18 +93,16 @@ 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
|
||||
});
|
||||
|
||||
|
||||
console.log('获取配置响应:', res);
|
||||
|
||||
if (res.code !== 200) {
|
||||
|
|
@ -122,10 +123,10 @@ export default {
|
|||
events: {
|
||||
onDocumentReady: () => this.onDocumentReady(),
|
||||
onError: (error) => this.onEditorError(error),
|
||||
onAppReady: () => this.onAppReady()
|
||||
onAppReady: () => this.onAppReady(),
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
this.configReady = true;
|
||||
console.log('编辑器配置准备完成:', this.editorConfig);
|
||||
|
||||
|
|
@ -153,7 +154,7 @@ export default {
|
|||
|
||||
// 等待 DOM 准备好
|
||||
await this.$nextTick();
|
||||
|
||||
|
||||
// 初始化编辑器
|
||||
await this.initDocEditor();
|
||||
} catch (error) {
|
||||
|
|
@ -191,12 +192,12 @@ export default {
|
|||
const script = document.createElement('script');
|
||||
// onlyOfficeUrl 是 OnlyOffice 服务地址
|
||||
const onlyOfficeUrl = process.env.VUE_APP_ONLYOFFICE_URL || process.env.VUE_APP_BASE_API || '';
|
||||
|
||||
|
||||
if (!onlyOfficeUrl) {
|
||||
reject(new Error('OnlyOffice 服务地址未配置，请检查环境变量 VUE_APP_ONLYOFFICE_URL'));
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
const scriptUrl = `${onlyOfficeUrl}/web-apps/apps/api/documents/api.js`;
|
||||
console.log('加载 OnlyOffice 脚本，URL:', scriptUrl);
|
||||
script.src = scriptUrl;
|
||||
|
|
@ -239,7 +240,7 @@ export default {
|
|||
// 验证容器元素（容器可能被 v-show 隐藏，但 DOM 中应该存在）
|
||||
await this.$nextTick();
|
||||
let container = document.getElementById('placeholder');
|
||||
|
||||
|
||||
// 如果容器不存在，等待一下再试
|
||||
if (!container) {
|
||||
console.warn('容器元素不存在，等待 DOM 渲染...');
|
||||
|
|
@ -247,7 +248,7 @@ export default {
|
|||
await this.$nextTick();
|
||||
container = document.getElementById('placeholder');
|
||||
}
|
||||
|
||||
|
||||
if (!container) {
|
||||
throw new Error('找不到编辑器容器元素 #placeholder，请确保容器已正确渲染');
|
||||
}
|
||||
|
|
@ -269,7 +270,7 @@ export default {
|
|||
if (container.offsetWidth === 0 || container.offsetHeight === 0) {
|
||||
console.warn('容器尺寸为0，等待尺寸调整...');
|
||||
await new Promise(resolve => setTimeout(resolve, 300));
|
||||
|
||||
|
||||
if (container.offsetWidth === 0 || container.offsetHeight === 0) {
|
||||
console.warn('容器尺寸仍为0，但继续尝试创建编辑器');
|
||||
}
|
||||
|
|
@ -277,15 +278,15 @@ export default {
|
|||
|
||||
try {
|
||||
console.log('创建 OnlyOffice 编辑器，配置:', this.editorConfig);
|
||||
|
||||
|
||||
// 清空容器
|
||||
container.innerHTML = '';
|
||||
|
||||
|
||||
// 创建编辑器实例
|
||||
this.docEditor = new window.DocsAPI.DocEditor('placeholder', this.editorConfig);
|
||||
|
||||
|
||||
console.log('编辑器实例创建成功:', this.docEditor);
|
||||
|
||||
|
||||
// 编辑器创建成功，隐藏加载状态
|
||||
this.loading = false;
|
||||
this.$emit('initialized', this.docEditor);
|
||||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -4,18 +4,33 @@
|
|||
<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-item label="开户许可证" prop="fileList">
|
||||
<UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule"
|
||||
@del-file="handleDelFile" @file-change="handleFileChange" type="account_opening_license"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="开户银行" prop="openingBank">
|
||||
<el-input v-model.trim="form.openingBank" placeholder="自动提取" clearable show-word-limit maxlength="64"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开户账号" prop="openingAccount">
|
||||
<el-input v-model.trim="form.openingAccount" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<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" />
|
||||
</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-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-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -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: [
|
||||
|
|
@ -59,7 +74,7 @@ export default {
|
|||
openingAccount: [
|
||||
{ required: true, message: '请输入开户账号', trigger: 'blur' }
|
||||
],
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -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,17 +174,17 @@ export default {
|
|||
},
|
||||
immediate: true // 立即执行一次
|
||||
},
|
||||
detailData:{
|
||||
detailData: {
|
||||
handler(newVal) {
|
||||
if (Object.keys(newVal).length > 0) {
|
||||
this.setFormData();
|
||||
}
|
||||
},
|
||||
immediate: true, // 立即执行一次
|
||||
deep:true
|
||||
deep: true
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -178,7 +193,8 @@ export default {
|
|||
display: flex;
|
||||
align-items: center;
|
||||
margin: 10px 0;
|
||||
span{
|
||||
|
||||
span {
|
||||
margin: 0 5px;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,39 +5,62 @@
|
|||
<span>基本信息</span>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="basicInfoForm" label-width="110px" label-position="top">
|
||||
<!-- 营业执照 -->
|
||||
<el-form-item label="营业执照" prop="fileList">
|
||||
<UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule" @file-change="handleFileChange"
|
||||
@del-file="handleDelFile" type="business_license" />
|
||||
</el-form-item>
|
||||
<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-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-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-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-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-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-form-item label="经营范围" prop="businessScope">
|
||||
<el-input :autosize="{ minRows: 8, maxRows: 12 }" clearable show-word-limit maxlength="255"
|
||||
type="textarea" v-model.trim="form.businessScope" placeholder="自动提取"></el-input>
|
||||
</el-form-item>
|
||||
<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" />
|
||||
</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: 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'],
|
||||
|
|
@ -146,7 +169,7 @@ export default {
|
|||
// 文件变化
|
||||
handleFileChange(file) {
|
||||
console.log(file);
|
||||
|
||||
|
||||
this.form.fileList = file;
|
||||
if (file instanceof Array && file.length > 0 && file[0].response) {
|
||||
const response = file[0].response;
|
||||
|
|
@ -175,14 +198,14 @@ 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(){
|
||||
const fileList = this.getFileList('business_license');
|
||||
|
||||
this.form = {
|
||||
setFormData() {
|
||||
const fileList = this.getFileList('business_license');
|
||||
|
||||
this.form = {
|
||||
enterpriseName: this.detailData.enterpriseName || '',
|
||||
enterpriseCode: this.detailData.enterpriseCode || '',
|
||||
registeredCapital: this.detailData.registeredCapital || '',
|
||||
|
|
@ -194,17 +217,17 @@ 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
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
computed: {
|
||||
fileUploadRule() {
|
||||
|
|
@ -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
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,46 +5,73 @@
|
|||
<span>法人信息</span>
|
||||
</div>
|
||||
<el-form :model="form" :rules="rules" ref="legalPersonForm" label-width="110px" label-position="top">
|
||||
<!-- 身份证人像面 -->
|
||||
<el-form-item label="身份证人像面" prop="fileList">
|
||||
<UploadFile :fileList="form.fileList" :fileUploadRule="fileUploadRule"
|
||||
@del-file="handleDelFile" @file-change="handleFileChange" type="face_id_card_portrait" />
|
||||
</el-form-item>
|
||||
<!-- 身份证国徽面 -->
|
||||
<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-form-item label="法人姓名" prop="legalPersonName">
|
||||
<el-input v-model.trim="form.legalPersonName" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法人身份证号" prop="legalPersonIdCard">
|
||||
<el-input v-model.trim="form.legalPersonIdCard" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="身份证有效期" prop="idCardStartDate">
|
||||
<el-input v-model.trim="form.idCardStartDate" placeholder="自动提取" clearable show-word-limit maxlength="32"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法人职务" prop="legalPersonPosition">
|
||||
<el-input v-model.trim="form.legalPersonPosition" placeholder="请输入法人职务" clearable show-word-limit maxlength="32"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="法人联系方式" prop="legalPersonPhone">
|
||||
<el-input v-model.trim="form.legalPersonPhone" placeholder="请输入法人联系方式" clearable show-word-limit maxlength="11"></el-input>
|
||||
</el-form-item>
|
||||
<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" />
|
||||
</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-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-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-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-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-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() {
|
||||
|
|
@ -166,18 +193,18 @@ export default {
|
|||
this.form.fileList2 = file;
|
||||
this.$refs.legalPersonForm.validateField(['idCardStartDate']);
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
},
|
||||
// 文件删除时触发
|
||||
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
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue