feat(riskCheck): 新增 Monaco 编辑器组件并优化风险检查数据提交功能

- 添加 Monaco 编辑器组件，用于代码编辑
- 更新 BaseForm 组件，调整样式和输入方式
- 新增 taDataSubmit.js 文件，实现外部数据映射和保存功能
- 在项目中集成 monaco-editor 和相关配置

package.json

@@ -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",

src/generatedComponents/render-monaco-editor.vue

@@ -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>

src/views/riskCheck/components/taData/BaseForm.vue

@@ -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-input
-              <el-radio label="否">否</el-radio>
+              size="medium"
-            </el-radio-group>
+              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"
+              type="datetime"
-              value-format="yyyy-MM-dd"
+              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"
+              type="datetime"
-              value-format="yyyy-MM-dd"
+              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>

src/views/riskCheck/taDataSubmit.js

@@ -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);
+      }
+    }
+  }
+}

vue.config.js

@@ -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')