mirror of
http://112.124.100.131/ebiz-ai/ebiz-ai-knowledge-manage.git
synced 2025-12-15 13:56:51 +08:00
feat(riskCheck): 新增 Monaco 编辑器组件并优化风险检查数据提交功能
- 添加 Monaco 编辑器组件，用于代码编辑 - 更新 BaseForm 组件，调整样式和输入方式 - 新增 taDataSubmit.js 文件，实现外部数据映射和保存功能 - 在项目中集成 monaco-editor 和相关配置
This commit is contained in:
陈昱达
@@ -33,6 +33,8 @@
|
||||
"markdown-it": "^14.1.0",
|
||||
"markdown-it-katex": "^2.0.3",
|
||||
"mavon-editor": "^2.9.1",
|
||||
"monaco-editor": "^0.30.0",
|
||||
"monaco-editor-webpack-plugin": "^6.0.0",
|
||||
"node-gyp": "^8.0.0",
|
||||
"normalize.css": "7.0.0",
|
||||
"nprogress": "0.2.0",
|
||||
@@ -48,6 +50,7 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.0.0",
|
||||
"@babel/preset-env": "^7.28.0",
|
||||
"@babel/register": "7.0.0",
|
||||
"@vue/cli-plugin-babel": "3.6.0",
|
||||
"@vue/cli-plugin-eslint": "^3.9.1",
|
||||
|
||||
61
src/generatedComponents/render-monaco-editor.vue
Normal file
61
src/generatedComponents/render-monaco-editor.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div :id="id" style="height: 100%;width:100%"></div>
|
||||
</template>
|
||||
<script>
|
||||
import uuid from 'uuid'
|
||||
import * as monaco from 'monaco-editor'
|
||||
export default {
|
||||
name: 'render-monaco-editor',
|
||||
data() {
|
||||
return {
|
||||
id: 'monaco' + uuid.v4(),
|
||||
standaloneEditorConstructionOptions: {
|
||||
value: this.monacoValue, // 编辑器的值
|
||||
language: 'javascript', //语言
|
||||
theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark
|
||||
autoIndent: true, // 自动缩进
|
||||
readOnly: false // 是否只读
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
settings: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
},
|
||||
monacoValue:{
|
||||
type: String,
|
||||
default: ''
|
||||
}
|
||||
},
|
||||
watch: {},
|
||||
components: {},
|
||||
filters: {},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.createMonacoEditor()
|
||||
},
|
||||
methods: {
|
||||
createMonacoEditor() {
|
||||
const container = document.getElementById(this.id)
|
||||
this.monacoEditor = monaco.editor.create(container, {
|
||||
...this.standaloneEditorConstructionOptions,
|
||||
...this.settings
|
||||
})
|
||||
this.monacoEditor.onDidChangeModelContent(event => {
|
||||
// 格式化
|
||||
// this.monacoEditor.getAction('editor.action.formatDocument').run()
|
||||
this.$emit('update:value', this.monacoEditor.getValue())
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
computed: {}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#render-monaco-editor-container {
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +1,22 @@
|
||||
<template>
|
||||
<!-- 基本信息 -->
|
||||
<el-card class="box-card">
|
||||
<el-card class="box-card" shadow="never">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>基本信息</span>
|
||||
</div>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form ref="form" :model="formData.data.baseInfo" label-width="120px">
|
||||
<el-form ref="form" :model="formData.data.baseInfo" label-width="140px">
|
||||
<el-form-item label="客户名称">
|
||||
<el-input
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.customerName"
|
||||
placeholder="请输入客户名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="起保日期">
|
||||
<el-date-picker
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.insureStartDate"
|
||||
type="date"
|
||||
placeholder="选择起保日期"
|
||||
@@ -24,19 +26,28 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="归属机构">
|
||||
<el-input
|
||||
size="medium"
|
||||
type="text"
|
||||
placeholder="输入归属机构"
|
||||
v-model="formData.data.baseInfo.orgName"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否续保">
|
||||
<el-radio-group v-model="formData.data.baseInfo.isRenew">
|
||||
<el-radio label="是">是</el-radio>
|
||||
<el-radio label="否">否</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-input
|
||||
size="medium"
|
||||
type="text"
|
||||
placeholder="输入归属机构"
|
||||
v-model="formData.data.baseInfo.isRenew"
|
||||
></el-input>
|
||||
<!-- <el-radio-group v-model="formData.data.baseInfo.isRenew">-->
|
||||
<!-- <el-radio label="是">是</el-radio>-->
|
||||
<!-- <el-radio label="否">否</el-radio>-->
|
||||
<!-- </el-radio-group>-->
|
||||
</el-form-item>
|
||||
<el-form-item label="业务来源">
|
||||
<el-input
|
||||
size="medium"
|
||||
type="text"
|
||||
placeholder="输入业务来源"
|
||||
v-model="formData.data.baseInfo.bizSource"
|
||||
@@ -44,6 +55,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="签报有效起期">
|
||||
<el-date-picker
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.signStartDate"
|
||||
type="date"
|
||||
placeholder="选择签报有效起期"
|
||||
@@ -53,6 +65,7 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="业务详细说明">
|
||||
<el-input
|
||||
size="medium"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="说明业务来源、背景及分公司初步风险判断"
|
||||
@@ -62,27 +75,35 @@
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form ref="form" :model="formData.data.baseInfo" label-width="120px">
|
||||
<el-form ref="form" :model="formData.data.baseInfo" label-width="140px">
|
||||
<el-form-item label="终保日期">
|
||||
<el-date-picker
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.insureEndDate"
|
||||
type="date"
|
||||
placeholder="选择终保日期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="共保标志">
|
||||
<el-select
|
||||
<!-- <el-select
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.isCoUnderwriting"
|
||||
placeholder="请选择共保标志"
|
||||
>
|
||||
<el-option label="独家承保" value="独家承保"></el-option>
|
||||
<el-option label="共保" value="共保"></el-option>
|
||||
</el-select>
|
||||
</el-select>-->
|
||||
<el-input
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.isCoUnderwriting"
|
||||
placeholder="请输入共保标志"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="业务细分">
|
||||
<el-input
|
||||
size="medium"
|
||||
type="text"
|
||||
placeholder="输入业务细分"
|
||||
v-model="formData.data.baseInfo.bizDetailSource"
|
||||
@@ -90,34 +111,39 @@
|
||||
</el-form-item>
|
||||
<el-form-item label="签报有效止期">
|
||||
<el-date-picker
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.signEndDate"
|
||||
type="date"
|
||||
placeholder="选择签报有效止期"
|
||||
format="yyyy-MM-dd"
|
||||
value-format="yyyy-MM-dd"
|
||||
type="datetime"
|
||||
format="yyyy-MM-dd HH:mm:ss"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<!-- 补充的字段 -->
|
||||
<el-form-item label="主险代码">
|
||||
<el-input
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.mainRiskCode"
|
||||
placeholder="请输入主险代码"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="总保额">
|
||||
<el-input
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.totalAmt"
|
||||
placeholder="请输入总保额"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="总保费">
|
||||
<el-input
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.totalPrem"
|
||||
placeholder="请输入总保费"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="币种">
|
||||
<el-input
|
||||
size="medium"
|
||||
v-model="formData.data.baseInfo.currency"
|
||||
placeholder="如：CNY"
|
||||
></el-input>
|
||||
|
||||
86
src/views/riskCheck/taDataSubmit.js
Normal file
86
src/views/riskCheck/taDataSubmit.js
Normal file
@@ -0,0 +1,86 @@
|
||||
export default {
|
||||
name: 'index',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
// 映射外部数据到formData结构的函数
|
||||
mapExternalDataToFormData(externalData) {
|
||||
// 确保目标数据结构存在
|
||||
const formData = {
|
||||
orderCode: externalData.ordercode || externalData.orderCode || '',
|
||||
orderTime: externalData.ordertime || externalData.orderTime || '',
|
||||
data: {
|
||||
baseInfo: {},
|
||||
targetInfo: {},
|
||||
specAgreement: [],
|
||||
mainRisk: {},
|
||||
additionalRisk: [],
|
||||
targetListInfo: [],
|
||||
sellingCosts: [],
|
||||
commission: []
|
||||
}
|
||||
};
|
||||
|
||||
// 映射基础信息
|
||||
if (externalData.data && externalData.data.baseInfo) {
|
||||
formData.data.baseInfo = { ...externalData.data.baseInfo };
|
||||
}
|
||||
|
||||
// 映射标的物信息
|
||||
if (externalData.data && externalData.data.targetInfo) {
|
||||
formData.data.targetInfo = { ...externalData.data.targetInfo };
|
||||
}
|
||||
|
||||
// 映射特别约定
|
||||
if (externalData.data && externalData.data.specAgreement) {
|
||||
formData.data.specAgreement = [...externalData.data.specAgreement];
|
||||
}
|
||||
|
||||
// 映射主险信息
|
||||
if (externalData.data && externalData.data.mainRisk) {
|
||||
formData.data.mainRisk = { ...externalData.data.mainRisk };
|
||||
}
|
||||
|
||||
// 映射附加险信息
|
||||
if (externalData.data && externalData.data.additionalRisk) {
|
||||
formData.data.additionalRisk = [...externalData.data.additionalRisk];
|
||||
}
|
||||
|
||||
// 映射销售成本信息
|
||||
if (externalData.data && externalData.data.sellingCosts) {
|
||||
formData.data.sellingCosts = [...externalData.data.sellingCosts];
|
||||
}
|
||||
|
||||
// 映射佣金信息
|
||||
if (externalData.data && externalData.data.commission) {
|
||||
formData.data.commission = [...externalData.data.commission];
|
||||
}
|
||||
|
||||
// 关键转换：将targetList转换为targetListInfo
|
||||
if (externalData.data && externalData.data.targetList) {
|
||||
formData.data.targetListInfo = externalData.data.targetList.map(item => ({ ...item }));
|
||||
} else if (externalData.data && externalData.data.targetListInfo) {
|
||||
formData.data.targetListInfo = externalData.data.targetListInfo.map(item => ({ ...item }));
|
||||
}
|
||||
|
||||
return formData;
|
||||
},
|
||||
|
||||
saveMonaco(){
|
||||
try {
|
||||
const parsedData = JSON.parse(this.monacoValue);
|
||||
// 使用映射函数转换数据结构
|
||||
this.formData = this.mapExternalDataToFormData(parsedData);
|
||||
this.chooseImpart = false;
|
||||
this.$message.success('数据导入成功');
|
||||
} catch (error) {
|
||||
this.$message.error('JSON格式错误，请检查后重试');
|
||||
console.error('JSON解析错误:', error);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -2,6 +2,7 @@
|
||||
const path = require('path')
|
||||
const defaultSettings = require('./src/assets/js/utils/settings.js')
|
||||
const { DIFY_URL } = require('./src/config/base-url')
|
||||
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
|
||||
|
||||
function resolve(dir) {
|
||||
return path.join(__dirname, dir)
|
||||
@@ -81,6 +82,7 @@ module.exports = {
|
||||
//在webpack的名称字段中提供应用程序的标题，以便
|
||||
//可以在index.html中对其进行访问以注入正确的标题。
|
||||
name: name,
|
||||
plugins: [new MonacoWebpackPlugin()],
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
@@ -127,6 +129,30 @@ module.exports = {
|
||||
return options
|
||||
})
|
||||
.end()
|
||||
|
||||
// 为 monaco-editor 添加特殊规则
|
||||
config.module
|
||||
.rule('monaco')
|
||||
.test(/\.js$/)
|
||||
.include.add(path.resolve(__dirname, 'node_modules/monaco-editor'))
|
||||
.end()
|
||||
.use('babel-loader')
|
||||
.loader('babel-loader')
|
||||
.options({
|
||||
babelrc: false,
|
||||
configFile: false,
|
||||
presets: [
|
||||
[
|
||||
'@babel/preset-env',
|
||||
{
|
||||
targets: {
|
||||
browsers: ['> 1%', 'last 2 versions']
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
})
|
||||
|
||||
// https://webpack.js.org/configuration/devtool/#development
|
||||
config.when(process.env.NODE_ENV === 'development', config =>
|
||||
config.devtool('cheap-source-map')
|
||||
|
||||
Reference in New Issue
Block a user