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

src/views/riskCheck/taDataSubmit.vue

@@ -1,22 +1,25 @@
 <template>
-  <div class="ta-data-form">
+  <div class="ta-data-form render-container">
+    <div class="mb20" style="overflow: auto">
       <h3>审批单录入</h3>
       <!-- 审批单基本信息 -->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>审批单基本信息</span>
         </div>
         <el-row :gutter="20">
           <el-col :span="12">
-          <el-form ref="form" :model="formData" label-width="120px">
+            <el-form ref="form" :model="formData" label-width="140px">
               <el-form-item label="审批单号">
                 <el-input
+                  size="medium"
                   v-model="formData.orderCode"
                   placeholder="请输入审批单号"
                 ></el-input>
               </el-form-item>
               <el-form-item label="审批单出单时间">
                 <el-date-picker
+                  size="medium"
                   v-model="formData.orderTime"
                   type="datetime"
                   placeholder="选择日期时间"
@@ -37,7 +40,7 @@
       <!-- 基本信息 -->
       <base-form :formData="formData"></base-form>
       <!-- 标的基本信息 -->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>标的基本信息</span>
         </div>
@@ -46,67 +49,78 @@
             <el-form
               ref="form"
               :model="formData.data.targetInfo"
-            label-width="120px"
+              label-width="140px"
             >
               <el-form-item label="企业是否首次投保">
-              <el-radio-group v-model="formData.data.targetInfo.isFirstAppnt">
+                <el-input
-                <el-radio label="是">是</el-radio>
+                  size="medium"
-                <el-radio label="否">否</el-radio>
+                  v-model="formData.data.targetInfo.isFirstAppnt"
-              </el-radio-group>
+                  placeholder="请输入我司份额"
+                ></el-input>
+<!--                <el-radio-group v-model="formData.data.targetInfo.isFirstAppnt">-->
+<!--                  <el-radio label="是">是</el-radio>-->
+<!--                  <el-radio label="否">否</el-radio>-->
+<!--                </el-radio-group>-->
               </el-form-item>
               <el-form-item label="渠道名称">
-              <el-select
+                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.channelName"
-                placeholder="请选择渠道名称"
+                  placeholder="请输入渠道名称"
-              >
+                ></el-input>
-                <el-option label="线上渠道" value="线上渠道"></el-option>
-                <el-option label="线下渠道" value="线下渠道"></el-option>
-              </el-select>
               </el-form-item>
               <el-form-item label="首席承保人名称">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.firstAppntName"
                   placeholder="请输入首席承保人名称"
                 ></el-input>
               </el-form-item>
               <el-form-item label="我司份额">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.myShare"
                   placeholder="请输入我司份额"
                 ></el-input>
               </el-form-item>
               <el-form-item label="绿色产业">
-              <el-radio-group v-model="formData.data.targetInfo.isGreen">
+                <el-input
-                <el-radio label="是">是</el-radio>
+                  size="medium"
-                <el-radio label="否">否</el-radio>
+                  v-model="formData.data.targetInfo.isGreen"
-              </el-radio-group>
+                  placeholder="请输入我司份额"
+                ></el-input>
+<!--                <el-radio-group v-model="formData.data.targetInfo.isGreen">-->
+<!--                  <el-radio label="是">是</el-radio>-->
+<!--                  <el-radio label="否">否</el-radio>-->
+<!--                </el-radio-group>-->
               </el-form-item>
               <el-form-item label="投保工伤人数">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.insureInjuryCount"
                   placeholder="请输入投保工伤人数"
                 ></el-input>
               </el-form-item>
               <el-form-item label="雇员总人数">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.totalEmployeeCount"
                   placeholder="请输入雇员总人数"
                 ></el-input>
               </el-form-item>
               <el-form-item label="年龄结构：65岁（含）以内比例">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.agePercentUnder65"
                   placeholder="请输入比例"
                 ></el-input>
               </el-form-item>
               <el-form-item label="续保类型">
-              <el-select
+                <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.renewType"
-                placeholder="请选择续保类型"
+                  placeholder="请输入续保类型"
-              >
+                ></el-input>
-                <el-option label="正常续保" value="正常续保"></el-option>
-                <el-option label="降额续保" value="降额续保"></el-option>
-              </el-select>
               </el-form-item>
               <el-form-item label="是否存在系统外赔案">
                 <el-radio-group
@@ -122,59 +136,75 @@
             <el-form
               ref="form"
               :model="formData.data.targetInfo"
-            label-width="120px"
+              label-width="140px"
             >
               <el-form-item label="是否渠道业务">
-              <el-radio-group
+                <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.isChannelBusiness"
-              >
+                  placeholder="请输入审批单有效期"
-                <el-radio label="是">是</el-radio>
+                ></el-input>
-                <el-radio label="否">否</el-radio>
+<!--                <el-radio-group-->
-              </el-radio-group>
+<!--                  v-model="formData.data.targetInfo.isChannelBusiness"-->
+<!--                >-->
+<!--                  <el-radio label="是">是</el-radio>-->
+<!--                  <el-radio label="否">否</el-radio>-->
+<!--                </el-radio-group>-->
               </el-form-item>
               <el-form-item label="审批单有效期">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.approvalValidityPeriod"
                   placeholder="请输入审批单有效期"
                 ></el-input>
               </el-form-item>
               <el-form-item label="首席承保人比例">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.chiefInsurerRatio"
                   placeholder="请输入首席承保人比例"
                 ></el-input>
               </el-form-item>
               <el-form-item label="原审批号">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.originTaCode"
                   placeholder="请输入原审批号"
                 ></el-input>
               </el-form-item>
               <el-form-item label="投保雇员人数">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.insuredEmployeeCount"
                   placeholder="请输入投保雇员人数"
                 ></el-input>
               </el-form-item>
               <el-form-item label="年龄结构：67岁以上比例">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.agePercentAbove67"
                   placeholder="请输入比例"
                 ></el-input>
               </el-form-item>
               <el-form-item label="续保单号">
                 <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.renewalPolicyNumber"
                   placeholder="请输入续保单号"
                 ></el-input>
               </el-form-item>
               <el-form-item label="未决立案是否充足">
-              <el-radio-group
+                <el-input
+                  size="medium"
                   v-model="formData.data.targetInfo.isPendingCaseSufficient"
-              >
+                  placeholder="请输入续保单号"
-                <el-radio label="是">是</el-radio>
+                ></el-input>
-                <el-radio label="否">否</el-radio>
+<!--                <el-radio-group-->
-              </el-radio-group>
+<!--                  v-model="formData.data.targetInfo.isPendingCaseSufficient"-->
+<!--                >-->
+<!--                  <el-radio label="是">是</el-radio>-->
+<!--                  <el-radio label="否">否</el-radio>-->
+<!--                </el-radio-group>-->
               </el-form-item>
             </el-form>
           </el-col>
@@ -182,7 +212,7 @@
       </el-card>
 
       <!-- 特别约定 -->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>特别约定</span>
           <el-button
@@ -200,10 +230,15 @@
           style="width: 100%"
           v-if="formData.data.specAgreement.length > 0"
         >
-        <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+          ></el-table-column>
           <el-table-column prop="specCode" label="特别约定编码" width="180">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.specCode"
                 placeholder="请输入编码"
               ></el-input>
@@ -212,6 +247,7 @@
           <el-table-column prop="specName" label="特别约定名称" width="180">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.specName"
                 placeholder="请输入名称"
               ></el-input>
@@ -220,6 +256,7 @@
           <el-table-column prop="specContent" label="特别约定内容">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.specContent"
                 type="textarea"
                 :rows="2"
@@ -240,7 +277,7 @@
         </el-table>
       </el-card>
       <!--    主险-->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>主险信息</span>
         </div>
@@ -253,30 +290,39 @@
             <el-col :span="12">
               <el-form-item label="风险代码">
                 <el-input
+                  size="medium"
                   v-model="formData.data.mainRisk.riskCode"
                   placeholder="请输入风险代码"
                 ></el-input>
               </el-form-item>
               <el-form-item label="风险名称">
                 <el-input
+                  size="medium"
                   v-model="formData.data.mainRisk.riskName"
                   placeholder="如：雇主责任险（2015版）"
                 ></el-input>
               </el-form-item>
               <el-form-item label="是否计入总保额">
-              <el-radio-group v-model="formData.data.mainRisk.incluedAmt">
+                <el-input
-                <el-radio label="计入总保额">计入总保额</el-radio>
+                  size="medium"
-                <el-radio label="不计入总保额">不计入总保额</el-radio>
+                  v-model="formData.data.mainRisk.incluedAmt"
-              </el-radio-group>
+                  placeholder="如：雇主责任险（2015版）"
+                ></el-input>
+<!--                <el-radio-group v-model="formData.data.mainRisk.incluedAmt">-->
+<!--                  <el-radio label="计入总保额">计入总保额</el-radio>-->
+<!--                  <el-radio label="不计入总保额">不计入总保额</el-radio>-->
+<!--                </el-radio-group>-->
               </el-form-item>
               <el-form-item label="累计赔偿限额">
                 <el-input
+                  size="medium"
                   v-model="formData.data.mainRisk.aggregateLiabilityLimit"
                   placeholder="请输入累计赔偿限额"
                 ></el-input>
               </el-form-item>
               <el-form-item label="费率 (‰)">
                 <el-input
+                  size="medium"
                   v-model="formData.data.mainRisk.rate"
                   placeholder="如：0.789474"
                 ></el-input>
@@ -285,12 +331,14 @@
             <el-col :span="12">
               <el-form-item label="保险保费">
                 <el-input
+                  size="medium"
                   v-model="formData.data.mainRisk.insurePrem"
                   placeholder="请输入保险保费"
                 ></el-input>
               </el-form-item>
               <el-form-item label="项目保费">
                 <el-input
+                  size="medium"
                   v-model="formData.data.mainRisk.itemPrem"
                   placeholder="请输入项目保费"
                 ></el-input>
@@ -311,7 +359,7 @@
         </el-form>
       </el-card>
       <!-- 附加险 -->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>附加险</span>
           <el-button
@@ -329,10 +377,15 @@
           style="width: 100%"
           v-if="formData.data.additionalRisk.length > 0"
         >
-        <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+          ></el-table-column>
           <el-table-column prop="riskCode" label="风险代码" width="140">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.riskCode"
                 placeholder="请输入代码"
               ></el-input>
@@ -341,6 +394,7 @@
           <el-table-column prop="riskName" label="风险名称" width="140">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.riskName"
                 placeholder="如：附加24小时"
               ></el-input>
@@ -348,10 +402,16 @@
           </el-table-column>
           <el-table-column prop="incluedAmt" label="是否计入总保额" width="120">
             <template slot-scope="scope">
-            <el-radio-group v-model="scope.row.incluedAmt">
+
-              <el-radio label="计入">计入</el-radio>
+              <el-input
-              <el-radio label="不计入">不计入</el-radio>
+                size="medium"
-            </el-radio-group>
+                v-model="scope.row.incluedAmt"
+                placeholder="如：附加24小时"
+              ></el-input>
+<!--              <el-radio-group v-model="scope.row.incluedAmt">-->
+<!--                <el-radio label="计入">计入</el-radio>-->
+<!--                <el-radio label="不计入">不计入</el-radio>-->
+<!--              </el-radio-group>-->
             </template>
           </el-table-column>
           <el-table-column
@@ -361,6 +421,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.personDailyLiabilityLimit"
                 placeholder="请输入限额"
               ></el-input>
@@ -369,6 +430,7 @@
           <el-table-column prop="indemnityDays" label="赔偿天数" width="100">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.indemnityDays"
                 placeholder="请输入天数"
               ></el-input>
@@ -381,6 +443,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.aggregateLiabilityLimit"
                 placeholder="请输入限额"
               ></el-input>
@@ -393,6 +456,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.personLiabilityLimit"
                 placeholder="可为空"
               ></el-input>
@@ -400,12 +464,21 @@
           </el-table-column>
           <el-table-column prop="rate" label="费率 (‰)" width="120">
             <template slot-scope="scope">
-            <el-input v-model="scope.row.rate" placeholder="如：0.1"></el-input>
+              <el-input
+                size="medium"
+                v-model="scope.row.rate"
+                placeholder="如：0.1"
+              ></el-input>
             </template>
           </el-table-column>
-        <el-table-column prop="shortRateLabel" label="短期费率标签" width="120">
+          <el-table-column
+            prop="shortRateLabel"
+            label="短期费率标签"
+            width="120"
+          >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.shortRateLabel"
                 placeholder="如：3"
               ></el-input>
@@ -414,6 +487,7 @@
           <el-table-column prop="insurePrem" label="保险保费" width="120">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.insurePrem"
                 placeholder="请输入保费"
               ></el-input>
@@ -422,6 +496,7 @@
           <el-table-column prop="itemPrem" label="项目保费" width="120">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.itemPrem"
                 placeholder="请输入保费"
               ></el-input>
@@ -440,7 +515,7 @@
         </el-table>
       </el-card>
       <!-- 标的物清单 -->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>标的物清单</span>
           <el-button
@@ -458,7 +533,11 @@
           style="width: 100%"
           v-if="formData.data.targetListInfo.length > 0"
         >
-        <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+          ></el-table-column>
           <el-table-column
             prop="insureEmployeeCount"
             label="投保员工人数"
@@ -466,6 +545,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.insureEmployeeCount"
                 placeholder="请输入人数"
               ></el-input>
@@ -474,6 +554,7 @@
           <el-table-column prop="jobType" label="工种代码" width="120">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.jobType"
                 placeholder="请输入代码"
               ></el-input>
@@ -482,6 +563,7 @@
           <el-table-column prop="jobTypeName" label="工种名称" width="140">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.jobTypeName"
                 placeholder="请输入名称"
               ></el-input>
@@ -490,6 +572,7 @@
           <el-table-column prop="jobCategory" label="岗位类别代码" width="130">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.jobCategory"
                 placeholder="请输入代码"
               ></el-input>
@@ -502,6 +585,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.jobCategoryName"
                 placeholder="请输入名称"
               ></el-input>
@@ -514,6 +598,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.jobClassification"
                 placeholder="请输入代码"
               ></el-input>
@@ -526,6 +611,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.jobClassificationName"
                 placeholder="请输入名称"
               ></el-input>
@@ -534,6 +620,7 @@
           <el-table-column prop="industry" label="行业类别" width="120">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.industry"
                 placeholder="请输入编码"
               ></el-input>
@@ -546,6 +633,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.perInjuryDustLimit"
                 placeholder="请输入限额"
               ></el-input>
@@ -558,6 +646,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.perInjuryDustLimitFee"
                 placeholder="如：1"
               ></el-input>
@@ -570,6 +659,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.lawCostDustLimit"
                 placeholder="可为空"
               ></el-input>
@@ -582,6 +672,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.lawCostDustLimitFee"
                 placeholder="可为空"
               ></el-input>
@@ -594,6 +685,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.perMedicalCostLimit"
                 placeholder="请输入限额"
               ></el-input>
@@ -606,6 +698,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.perMedicalCostLimitFee"
                 placeholder="如：0.555556"
               ></el-input>
@@ -614,6 +707,7 @@
           <el-table-column prop="prem" label="岗位保费" width="120">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.prem"
                 placeholder="请输入保费"
               ></el-input>
@@ -626,6 +720,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.aggregateLiabilityLimit"
                 placeholder="请输入限额"
               ></el-input>
@@ -645,7 +740,7 @@
       </el-card>
 
       <!-- 销售成本 -->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>销售成本</span>
           <el-button
@@ -663,10 +758,15 @@
           style="width: 100%"
           v-if="formData.data.sellingCosts.length > 0"
         >
-        <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+          ></el-table-column>
           <el-table-column prop="riskCode" label="风险代码" width="140">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.riskCode"
                 placeholder="请输入代码"
               ></el-input>
@@ -675,6 +775,7 @@
           <el-table-column prop="costType" label="成本类型" width="160">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.costType"
                 placeholder="如：基本绩效比例"
               ></el-input>
@@ -687,6 +788,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.announceCostRate"
                 placeholder="如：2"
               ></el-input>
@@ -695,6 +797,7 @@
           <el-table-column prop="costRate" label="实际成本率 (%)" width="140">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.costRate"
                 placeholder="如：2"
               ></el-input>
@@ -714,7 +817,7 @@
       </el-card>
 
       <!-- 手续费/佣金信息 -->
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>手续费/佣金信息</span>
           <el-button
@@ -732,10 +835,15 @@
           style="width: 100%"
           v-if="formData.data.commission.length > 0"
         >
-        <el-table-column type="index" label="序号" width="60"></el-table-column>
+          <el-table-column
+            type="index"
+            label="序号"
+            width="60"
+          ></el-table-column>
           <el-table-column prop="riskCode" label="风险代码" width="140">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.riskCode"
                 placeholder="请输入代码"
               ></el-input>
@@ -744,6 +852,7 @@
           <el-table-column prop="costType" label="成本类型" width="160">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.costType"
                 placeholder="如：代理手续费"
               ></el-input>
@@ -756,6 +865,7 @@
           >
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.announceCostRate"
                 placeholder="如：13"
               ></el-input>
@@ -764,6 +874,7 @@
           <el-table-column prop="costRate" label="实际成本率 (%)" width="140">
             <template slot-scope="scope">
               <el-input
+                size="medium"
                 v-model="scope.row.costRate"
                 placeholder="如：13"
               ></el-input>
@@ -782,7 +893,7 @@
         </el-table>
       </el-card>
 
-    <el-card class="box-card">
+      <el-card shadow="never" class="box-card">
         <div slot="header" class="clearfix">
           <span>影像件上传</span>
         </div>
@@ -805,7 +916,11 @@
             >
               <el-empty v-if="fileList.length === 0">
                 <template #image>
-                <img :src="uloadPng" alt="" style="width: 50px;height: 50px;" />
+                  <img
+                    :src="uloadPng"
+                    alt=""
+                    style="width: 50px;height: 50px;"
+                  />
                 </template>
                 <template #description>
                   <div class="flex flex-direction-c">
@@ -855,11 +970,6 @@
           </el-form-item>
         </el-form>
       </el-card>
-    <!-- 提交按钮 -->
-    <div class="form-actions">
-      <el-button type="primary" @click="handleSubmit">提交</el-button>
-      <el-button @click="handleReset">重置</el-button>
-    </div>
 
       <!--    &lt;!&ndash; 当前表单数据预览 &ndash;&gt;-->
       <!--    <div class="form-preview">-->
@@ -871,6 +981,8 @@
         title="我是标题"
         :visible.sync="drawer"
         :before-close="handleClose"
+        size='50%'
+        :wrapperClosable='false'
       >
         <div class="iframe-container">
           <!-- 使用iframe展示详情内容 -->
@@ -896,6 +1008,50 @@
         </div>
       </el-drawer>
     </div>
+    <!-- 提交按钮 -->
+    <div class="form-actions">
+      <el-button
+        type="primary"
+        class="line-button"
+        @click="impartJson"
+        size="medium"
+        >JSON导入</el-button
+      >
+      <el-button type="primary" size="medium" @click="handleSubmit"
+        >提交</el-button
+      >
+      <el-button @click="handleReset" size="medium">重置</el-button>
+    </div>
+
+    <!--    json-->
+
+    <!--    <el-dialog :visible.sync="chooseImpart" width="30%" title="选择导入方式">-->
+    <!--      <div class="flex align-items-c" style="width:100%">-->
+    <!--        <el-button type="primary" size="medium">JSON文件导入</el-button>-->
+    <!--        <el-button type="primary" size="medium">JSON数据导入</el-button>-->
+    <!--      </div>-->
+    <!--    </el-dialog>-->
+
+    <el-drawer title="JSON导入" :visible.sync="chooseImpart" size="50%"  :wrapperClosable='false'>
+      <div class="flex monaco-container"   style='height: 100%;'>
+        <div style="flex:1">
+          <render-monaco-editor
+            :settings="{
+              language: 'json'
+            }"
+            style='height: 100%;'
+            :value.sync='monacoValue'
+            ref='monaco'
+          ></render-monaco-editor>
+        </div>
+        <div class='text-right pt10'>
+          <el-button type="primary" size="medium" @click="$refs.monaco.monacoEditor.getAction('editor.action.formatDocument').run()" class='line-button' >格式化</el-button>
+          <el-button type="primary" size="medium" @click='saveMonaco' >确定</el-button>
+          <el-button  size="medium">重置</el-button>
+        </div>
+      </div>
+    </el-drawer>
+  </div>
 </template>
 
 <script>
@@ -903,12 +1059,18 @@ import { taDataSubmit } from '@/api/riskCheck'
 import uloadPng from '@/assets/images/konwledge/upload.png'
 import ApprovalForm from '@/views/riskCheck/components/taData/ApprovalForm.vue'
 import BaseForm from '@/views/riskCheck/components/taData/BaseForm.vue'
+import RenderMonacoEditor from '@/generatedComponents/render-monaco-editor.vue'
+import taDataOther from './taDataSubmit'
 
 export default {
   name: 'TaDataSubmit',
-  components: { BaseForm, ApprovalForm },
+  components: { RenderMonacoEditor, BaseForm, ApprovalForm },
+  mixins:[taDataOther],
   data() {
     return {
+      monacoDialog: false,
+      chooseImpart: false,
+      monacoValue:'',
       drawer: false,
       detailUrl: '',
       loading: false,
@@ -989,6 +1151,10 @@ export default {
     }
   },
   methods: {
+    impartJson() {
+      this.chooseImpart = true
+    },
+
     handleSubmit() {
       let formData = new FormData()
       this.fileList.forEach(file => {
@@ -998,7 +1164,7 @@ export default {
       this.fileList = []
       taDataSubmit(formData).then(res => {
         if (res.success) {
-          this.handleReset()
+          // this.handleReset()
           // localStorage.setItem(
           //   'riskResult',
           //   JSON.stringify(res.content.content)
@@ -1008,7 +1174,7 @@ export default {
       })
     },
     handleReset() {
-      this.formData = ''
+      this.formData = {}
     },
     handleClose(done) {
       done()
@@ -1220,15 +1386,23 @@ export default {
 </script>
 
 <style scoped>
+.monaco-container {
+  display: flex;
+  flex-direction: column;
+}
 .ta-data-form {
   padding: 20px;
+  display: flex;
+  flex-direction: column;
 }
 .box-card {
   margin: 20px 0;
 }
 .form-actions {
   text-align: center;
-  margin-top: 20px;
+  position: sticky;
+  bottom: 0;
+  background: #fff;
 }
 .form-preview {
   margin-top: 20px;

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