脚本函数体编辑优化

ruoyi-ui/package.json

@@ -74,6 +74,8 @@
     "less-loader": "^4.1.0",
     "lucide-vue": "^0.89.0",
     "mockjs": "^1.1.0",
+    "monaco-editor": "^0.30.1",
+    "monaco-editor-webpack-plugin": "^6.0.0",
     "nprogress": "0.2.0",
     "quill": "1.3.7",
     "screenfull": "5.0.2",
@@ -88,6 +90,7 @@
     "vue-meta": "2.4.0",
     "vue-quill-editor": "^3.0.6",
     "vue-router": "3.4.9",
+    "vue2-ace-editor": "^0.0.15",
     "vuedraggable": "2.24.3",
     "vuex": "3.6.0",
     "vuex-persistedstate": "^4.1.0",

ruoyi-ui/src/api/tablelist/style.js

@@ -0,0 +1,44 @@
+import request from '@/utils/request'
+
+// 查询动态格样式列表
+export function listStyle(query) {
+  return request({
+    url: '/system/style/list',
+    method: 'get',
+    params: query
+  })
+}
+
+// 查询动态格样式详细
+export function getStyle(id) {
+  return request({
+    url: '/system/style/' + id,
+    method: 'get'
+  })
+}
+
+// 新增动态格样式
+export function addStyle(data) {
+  return request({
+    url: '/system/style',
+    method: 'post',
+    data: data
+  })
+}
+
+// 修改动态格样式
+export function updateStyle(data) {
+  return request({
+    url: '/system/style',
+    method: 'put',
+    data: data
+  })
+}
+
+// 删除动态格样式
+export function delStyle(id) {
+  return request({
+    url: '/system/style/' + id,
+    method: 'delete'
+  })
+}

ruoyi-ui/src/assets/styles/index.scss

@@ -1,16 +1,17 @@
-@import './variables.scss';
-@import './mixin.scss';
-@import './transition.scss';
-@import './element-ui.scss';
-@import './sidebar.scss';
-@import './btn.scss';
+@import "./variables.scss";
+@import "./mixin.scss";
+@import "./transition.scss";
+@import "./element-ui.scss";
+@import "./sidebar.scss";
+@import "./btn.scss";
 
 body {
   height: 100%;
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
+    Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
@@ -104,7 +105,8 @@ aside {
   display: block;
   line-height: 32px;
   font-size: 16px;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
   color: #2c3e50;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -134,7 +136,7 @@ aside {
 }
 
 .text-center {
-  text-align: center
+  text-align: center;
 }
 
 .sub-navbar {
@@ -145,7 +147,13 @@ aside {
   text-align: right;
   padding-right: 20px;
   transition: 600ms ease position;
-  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+  background: linear-gradient(
+    90deg,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(32, 182, 249, 1) 0%,
+    rgba(33, 120, 241, 1) 100%,
+    rgba(33, 120, 241, 1) 100%
+  );
 
   .subtitle {
     font-size: 20px;

ruoyi-ui/src/views/bpmprocess/scriptManage.vue

@@ -113,11 +113,11 @@
         prop="scriptFunctionName"
       />
       <el-table-column label="脚本名称" align="center" prop="scriptName" />
-      <el-table-column
+      <!-- <el-table-column
         label="脚本方法体"
         align="center"
         prop="scriptFunctionCode"
-      />
+      /> -->
       <el-table-column label="脚本类型" align="center" prop="scriptType">
         <template slot-scope="scope">
           {{ getDictLabel(scope.row.scriptType, dict.type.bpm_script_type) }}
@@ -215,11 +215,14 @@
         </el-form-item>
 
         <el-form-item label="方法体:" prop="scriptFunctionCode">
-          <el-input
+          <!-- <el-input
             v-model="form.scriptFunctionCode"
             type="textarea"
             placeholder="请输入内容"
-          />
+          /> -->
+          <!-- <div ref="container" class="monaco-container">
+          </div> -->
+          <el-button icon="el-icon-edit" @click="drawerOpenHandler"></el-button>
         </el-form-item>
         <el-form-item label="脚本描述:" prop="scriptDescription">
           <el-input
@@ -233,6 +236,14 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+    <el-drawer
+      :visible.sync="drawer"
+      direction="rtl"
+      :before-close="drawerHandleClose"
+      :with-header="false"
+    >
+      <div ref="container" class="monaco-container"></div>
+    </el-drawer>
   </div>
 </template>
 
@@ -245,10 +256,14 @@ import {
   updateScript,
 } from "@/api/bpmprocess/process";
 import uuid from "@/utils/bpmn/uuid";
+import Editor from "vue2-ace-editor";
+import * as monaco from "monaco-editor";
+import * as actions from "monaco-editor/esm/vs/platform/actions/common/actions";
 
 export default {
   name: "Script",
   dicts: ["bpm_script_type", "industry_type"],
+  components: { Editor },
   data() {
     return {
       // 遮罩层
@@ -301,12 +316,45 @@ export default {
           { required: true, message: "请选择脚本类型", trigger: "change" },
         ],
       },
+
+      // 代码编辑器相关数据
+      monacoEditor: null,
+      codes: "",
+      readOnly: false,
+      drawer: false,
+      editorOptions: {
+        selectOnLineNumbers: true,
+        roundedSelection: false,
+        readOnly: this.readOnly, // 只读
+        cursorStyle: "line", // 光标样式
+        automaticLayout: false, // 自动布局
+        glyphMargin: true, // 字形边缘
+        useTabStops: false,
+        fontSize: 28, // 字体大小
+        autoIndent: false, // 自动布局
+      },
     };
   },
   created() {
     this.getList();
+    // this.editorInit();
   },
   methods: {
+    // 编辑器初始化
+    editorInit() {
+      require("brace/theme/chrome");
+      require("brace/ext/language_tools"); //language extension prerequsite...
+      require("brace/mode/yaml");
+      require("brace/mode/json");
+      require("brace/mode/less");
+      require("brace/mode/java");
+      require("brace/snippets/json");
+      require("brace/mode/lua");
+      require("brace/snippets/lua");
+      require("brace/mode/javascript");
+      require("brace/snippets/javascript");
+    },
+
     /** 查询流程节点脚本列表 */
     getList() {
       this.loading = true;
@@ -358,12 +406,22 @@ export default {
     },
     /** 新增按钮操作 */
     handleAdd() {
+      this.monacoEditor?.dispose();
       this.reset();
       this.open = true;
       this.title = "添加流程节点脚本";
+      // this.$nextTick(() => {
+      //   this.monacoEditor = monaco.editor.create(this.$refs.container, {
+      //     value: this.form.scriptFunctionCode,
+      //     language: "java",
+      //     theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark
+      //     editorOptions: this.editorOptions,
+      //   });
+      // });
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
+      this.monacoEditor?.dispose();
       this.reset();
       const id = row.id || this.ids;
       getScript(id).then((response) => {
@@ -375,6 +433,7 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      // console.log(this.monacoEditor?.getValue());
       this.$refs["form"].validate((valid) => {
         if (valid) {
           if (this.form.id != null) {
@@ -424,6 +483,53 @@ export default {
         return item.value == value;
       })?.label;
     },
+    // 抽屉打开回调
+    drawerOpenHandler() {
+      this.monacoEditor?.dispose();
+      this.drawer = true;
+      this.$nextTick(() => {
+        this.monacoEditor = monaco.editor.create(this.$refs.container, {
+          value: this.form.scriptFunctionCode,
+          language: "java",
+          theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
+          contextmenu: false, // 禁用右键菜单
+          editorOptions: this.editorOptions, // 同codes
+        });
+      });
+    },
+    // 抽屉关闭前回调
+    drawerHandleClose(done) {
+      this.$confirm("即将关闭编辑器,是否保存代码?")
+        .then(
+          (val) => {
+            this.form.scriptFunctionCode = this.monacoEditor?.getValue();
+            // this.drawer = false;
+            done();
+          },
+          (res) => {
+            // this.drawer = false;
+            done();
+          }
+        )
+        .catch(() => {});
+    },
   },
 };
 </script>
+
+<style lang="scss" scoped>
+.codeEditBox {
+  width: 100%;
+  height: 200px;
+}
+
+// ::v-deep div {
+//   font-family: "新宋体", serif;
+//   // font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
+//   font-size: 16px;
+// }
+.monaco-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

ruoyi-ui/src/views/system/bpmnPro/components/Toolbar/tools/Save.vue

@@ -126,6 +126,10 @@ export default {
       // 获取xml标签内容标签内容
       let xmlPro = await this.getProcess("xml");
       var xmlObj = this.xmlStr2XmlObj(xmlPro);
+
+      // let nodeMsg = this.saveNodeMsg(xmlObj);
+      // return;
+
       // 生成节点顺序
       getNodeSequence(xmlObj);
       // return;
@@ -174,13 +178,13 @@ export default {
       // return;
       if (!data.bpmProcessConfigurationList.length) return;
       data.bpmProcessConfigurationList.forEach((item) => {
-        item.createBy = this.$store.state.user.name;
-        item.createById = this.$store.state.user.userId;
+        // item.createBy = this.$store.state.user.name;
+        // item.createById = this.$store.state.user.userId;
         item.nodeProcessKey = obj.getElementsByTagName("bpmn:process")[0].id;
-        item.createTime = moment().format("YYYY-MM-DD HH:mm:ss");
-        item.updateBy = this.$store.state.user.name;
-        item.updateById = this.$store.state.user.userId;
-        item.updateTime = moment().format("YYYY-MM-DD HH:mm:ss");
+        // item.createTime = moment().format("YYYY-MM-DD HH:mm:ss");
+        // item.updateBy = this.$store.state.user.name;
+        // item.updateById = this.$store.state.user.userId;
+        // item.updateTime = moment().format("YYYY-MM-DD HH:mm:ss");
       });
       try {
         let res = await addConfiguration(data);
@@ -193,10 +197,10 @@ export default {
       let theData = filterNodeMsg(this.nodeData(), data);
       if (!theData.bpmProcessConfigurationList.length) return;
       theData.bpmProcessConfigurationList.forEach((item) => {
-        item.updateBy = this.$store.state.user.name;
-        item.updateById = this.$store.state.user.userId;
+        // item.updateBy = this.$store.state.user.name;
+        // item.updateById = this.$store.state.user.userId;
         item.nodeProcessKey = obj.getElementsByTagName("bpmn:process")[0].id;
-        item.updateTime = moment().format("YYYY-MM-DD HH:mm:ss");
+        // item.updateTime = moment().format("YYYY-MM-DD HH:mm:ss");
       });
       try {
         let res = await updateConfiguration(theData);

ruoyi-ui/src/views/system/bpmnPro/components/bo-utils/getNodeMsg.js

@@ -92,24 +92,24 @@ function getNodeException(node, nodeObj) {
       scriptTriggerType: node.getAttribute(`${prefix}:NormalScriptTriggerType`)
     })
   }
-  if (!children.length) return [];
-  children = Array.from(children);//数组化
-  let extensionElements = children.find((item) => item.nodeName == `bpmn:extensionElements`
-  )
-
-  if (!extensionElements) return [];
-  extensionElements.childNodes.forEach(item => {
-    if (item.nodeName == `${prefix}:unusualTask`) {
-      res.push({
-        scriptKey: item.attributes.scriptKey?.nodeValue,
-        scriptTriggerType: item.attributes?.scriptTriggerType?.nodeValue || 0
+  if (children.length) {
+    children = Array.from(children);//数组化
+    let extensionElements = children.find((item) => item.nodeName == `bpmn:extensionElements`
+    )
+    if (extensionElements) {
+      extensionElements.childNodes.forEach(item => {
+        if (item.nodeName == `${prefix}:unusualTask`) {
+          res.push({
+            scriptKey: item.attributes.scriptKey?.nodeValue,
+            scriptTriggerType: item.attributes?.scriptTriggerType?.nodeValue || 0
+          })
+        }
       })
-    }
-  })
+    };
+  };
   res.forEach((item) => {
     item.nodeKey = node.id;
   })
-  // console.log(res);
   if (res.length) {
     if (node.getAttribute(`${prefix}:scriptTriggerType`) == 'false') {
       nodeObj.nodeBefore = 'true';

ruoyi-ui/src/views/tableMange/index.vue

@@ -313,9 +313,9 @@
             >
               添加数据字段
             </el-button>
-            
+
             <!-- <el-button size="mini" type="primary" @click=countHandle>确定统计</el-button> -->
-         
+
             <el-table
               :data="dragTableStatisticList"
               border
@@ -369,40 +369,51 @@
               >
               </el-table-column>
               <el-table-column
-                  label="操作"
-                  align="center"
-                  class-name="small-padding fixed-width"
-                >
-              <template slot-scope="scope">
-                <el-dropdown>
-                  <el-button type="warning" plain size="small">
-                    处理<i class="el-icon-arrow-down el-icon--right"></i>
-                  </el-button>
-                  <el-dropdown-menu slot="dropdown">
-                    <el-dropdown-item>
-                      <el-button
-                        size="mini"
-                        type="text"
-                        icon="el-icon-edit"
-                        @click="handleUpdateStat(scope.row)"
-                        >修改
-                      </el-button>
-                    </el-dropdown-item>
-                        <el-dropdown-item>
-                          <el-button
-                            size="mini"
-                            type="text"
-                            icon="el-icon-delete"
-                            @click="handleDeleteStat(scope.row)"
-                            >删除
-                          </el-button>
-                        </el-dropdown-item>
-                      </el-dropdown-menu>
-                    </el-dropdown>
-                  </template>
-               </el-table-column>
+                label="操作"
+                align="center"
+                class-name="small-padding fixed-width"
+              >
+                <template slot-scope="scope">
+                  <el-dropdown>
+                    <el-button type="warning" plain size="small">
+                      处理<i class="el-icon-arrow-down el-icon--right"></i>
+                    </el-button>
+                    <el-dropdown-menu slot="dropdown">
+                      <el-dropdown-item>
+                        <el-button
+                          size="mini"
+                          type="text"
+                          icon="el-icon-edit"
+                          @click="handleUpdateStat(scope.row)"
+                          >修改
+                        </el-button>
+                      </el-dropdown-item>
+                      <el-dropdown-item>
+                        <el-button
+                          size="mini"
+                          type="text"
+                          icon="el-icon-delete"
+                          @click="handleDeleteStat(scope.row)"
+                          >删除
+                        </el-button>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
             </el-table>
           </el-tab-pane>
+          <el-tab-pane label="表格样式" name="tableStyle">
+            <el-button
+              type="primary"
+              class="inline-large-button"
+              icon="el-icon-plus"
+              size="mini"
+              @click="addDataDialog"
+            >
+              添加样式
+            </el-button>
+          </el-tab-pane>
         </el-tabs>
       </el-col>
     </el-row>
@@ -422,7 +433,13 @@
             :content="item.statisticTitle"
             placement="top-start"
           >
-            <div class="title">{{ item.statisticTitle ? item.statisticTitle : item.statisticDescription}}</div>
+            <div class="title">
+              {{
+                item.statisticTitle
+                  ? item.statisticTitle
+                  : item.statisticDescription
+              }}
+            </div>
           </el-tooltip>
 
           <!-- <el-tooltip
@@ -596,14 +613,8 @@
     </el-dialog>
 
     <!-- 添加数据统计对话框 -->
-    <el-dialog
-      :title="staictitle"
-      :visible.sync="isShowAddData"
-      width="30%">
-      
-      <el-form 
-      label-width="100px" 
-      :model="dataCountFormData">
+    <el-dialog :title="staictitle" :visible.sync="isShowAddData" width="30%">
+      <el-form label-width="100px" :model="dataCountFormData">
         <el-form-item label="统计标题" prop="statisticTitle">
           <el-input v-model="dataCountFormData.statisticTitle"></el-input>
         </el-form-item>
@@ -617,10 +628,14 @@
               v-for="item in dataArr"
               :key="item.id"
               :label="item.fieldName"
-              :value="item.tableName + '.'  + item.fieldName"
+              :value="item.tableName + '.' + item.fieldName"
             >
-            <span style="float: left;margin-right: 5px">{{ item.tableName }}  </span>
-            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.fieldName }}</span>
+              <span style="float: left; margin-right: 5px"
+                >{{ item.tableName }}
+              </span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.fieldName
+              }}</span>
             </el-option>
           </el-select>
         </el-form-item>
@@ -629,10 +644,16 @@
             <el-option label="数量" value="num"></el-option>
             <el-option label="状态" value="status"></el-option> -->
         <el-form-item label="统计类型">
-          <el-select 
-          v-model="dataCountFormData.statisticType" 
-          placeholder="请选择统计类型">
-            <el-option v-for="item in dataType" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue"></el-option>
+          <el-select
+            v-model="dataCountFormData.statisticType"
+            placeholder="请选择统计类型"
+          >
+            <el-option
+              v-for="item in dataType"
+              :key="item.dictCode"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            ></el-option>
             <!-- <el-option label="状态" value="status"></el-option> -->
           </el-select>
         </el-form-item>
@@ -646,7 +667,12 @@
       </el-form>
       <span slot="footer" class="dialog-footer">
         <el-button @click="closeAddDialog">取 消</el-button>
-        <el-button v-if="staictitle == '修改统计数据字段'" type="primary" @click="upadtaData">确 定</el-button>
+        <el-button
+          v-if="staictitle == '修改统计数据字段'"
+          type="primary"
+          @click="upadtaData"
+          >确 定</el-button
+        >
 
         <el-button v-else type="primary" @click="addData">确 定</el-button>
       </span>
@@ -663,7 +689,7 @@ import {
   getInfoBySqlKey,
   addTableData,
   addStatistic,
-  updateStatistic
+  updateStatistic,
 } from "@/api/tablelist/commonTable";
 import { getDicts } from "@/api/system/dict/data";
 import {
@@ -688,7 +714,7 @@ export default {
   components: { Queryfrom, Treeselect },
   data() {
     return {
-      staictitle: '添加统计数据字段',
+      staictitle: "添加统计数据字段",
       isInputInvalid: false,
       // 修改表格时的menuId
       menuId: "",
@@ -705,7 +731,7 @@ export default {
       // 当前table唯一标识
       sqlKey: "",
       // 动态数据sqlkey
-      staticSqlKey: '',
+      staticSqlKey: "",
       // 表格的高度
       tableKey: "",
       // tableHeight: document.documentElement.scrollHeight - 245 + "px",
@@ -824,15 +850,36 @@ export default {
       dataCountFormData: {},
       // 添加数据统计表格
       dragTableStatisticList: [],
-      deepragTableStatisticList:[],
+      deepragTableStatisticList: [],
       tableSqlList: [],
       searchFieldList: [],
       // 是否切换到数据统计
       menudata: false,
       // 显示添加字段对话框
       isShowAddData: false,
-      dataType : [],
-      uuid: '',
+      dataType: [],
+      uuid: "",
+
+      // 表格样式数据
+      styleTableData: [],
+      styleFormData: {
+        styleName: "",
+        tableKey: "",
+        styleCode: "",
+        styleCondtion: "",
+        styleCondtionObj: {
+          styleRow: false, //当前行生效
+          styleField: "", //样式生效字段
+          styleCondtionField: "", //样式条件依赖字段
+          styleCondtionList: [], //条件列表
+          // 行样式
+          rowBgColor: "", //行背景色
+          // 字段样式
+          fontColor: "", //字体颜色
+          tagType: "", //tag类型
+          isNeedBgColor: false, //是否需要背景色
+        },
+      },
     };
   },
   computed: {
@@ -1284,7 +1331,7 @@ export default {
       let asOrSpace = sqlType == "oracle" ? " " : " AS ";
 
       sql +=
-        key + 
+        key +
         " FROM " +
         isNeedUsername +
         // prefix +
@@ -1412,15 +1459,17 @@ export default {
             this.$message.warning("请至少选择一个包含查询字段");
             return false;
           }
-          const dataType = await this.getDicts("table_statistic_type")
-          this.deepragTableStatisticList = JSON.parse(JSON.stringify(this.dragTableStatisticList))
-          this.deepragTableStatisticList.forEach(item => {
-            dataType.data.forEach(val => {
-              if(val.dictValue ==  item.statisticType){
-                item.statisticType = val.dictLabel
+          const dataType = await this.getDicts("table_statistic_type");
+          this.deepragTableStatisticList = JSON.parse(
+            JSON.stringify(this.dragTableStatisticList)
+          );
+          this.deepragTableStatisticList.forEach((item) => {
+            dataType.data.forEach((val) => {
+              if (val.dictValue == item.statisticType) {
+                item.statisticType = val.dictLabel;
               }
-            })
-          })
+            });
+          });
           this.columns = this.columnsHandler(tempColumns);
           this.queryParams.isAsc = this.formData.isAsc;
           // 发送请求获取预览数据
@@ -1450,7 +1499,7 @@ export default {
     async createHandle() {
       // console.log(123);
       // this.sqlKey = uuidv4();
-      this.isInputInvalid = true
+      this.isInputInvalid = true;
       this.$refs.formData.validate(async (valid) => {
         if (valid) {
           // 检验表单合法性
@@ -1585,21 +1634,26 @@ export default {
               data.menuId = result.data;
               res = await addDragTable(data);
             }
-            this.staticSqlKey = uuidv4()
-            this.dragTableStatisticList.forEach(item => {
-              console.log(item)
-              let key = item.statisticType + '(' + item.statisticField + ')'+ ' as result'
+            this.staticSqlKey = uuidv4();
+            this.dragTableStatisticList.forEach((item) => {
+              console.log(item);
+              let key =
+                item.statisticType +
+                "(" +
+                item.statisticField +
+                ")" +
+                " as result";
               this.tableSqlList.push({
-                tableSql: this.getStaticSQL(key), 
-                sqlKey: this.staticSqlKey, 
-              })
-              this.searchFieldList = searchFieldList
-              item.sqlKey = this.staticSqlKey
-              item.tableKey = this.tableKey
-            })
+                tableSql: this.getStaticSQL(key),
+                sqlKey: this.staticSqlKey,
+              });
+              this.searchFieldList = searchFieldList;
+              item.sqlKey = this.staticSqlKey;
+              item.tableKey = this.tableKey;
+            });
 
-            if(res.code == 200 && this.dragTableStatisticList.length !== 0){
-              this.countHandle()
+            if (res.code == 200 && this.dragTableStatisticList.length !== 0) {
+              this.countHandle();
             }
             // 关闭当前页面
             if (this.tId) {
@@ -1631,7 +1685,7 @@ export default {
     async initTableData(tId) {
       let res = await getTableInfo(tId);
       if (res.code == 200) {
-        this.dragTableStatisticList = res.data.dragTableStatisticList
+        this.dragTableStatisticList = res.data.dragTableStatisticList;
         let echoData = JSON.parse(res.data.echoData);
         this.tableName = echoData.tableName;
         this.tableFieldList = echoData.tableFieldData;
@@ -1713,29 +1767,29 @@ export default {
       // console.log(this.dataType)
     },
     // 修改数据字段
-    upadtaData(){
+    upadtaData() {
       console.log(this.dataCountFormData);
       // this.dragTableStatisticList = this.dragTableStatisticList.map(value => value.xid == this.dataCountFormData.xid || value.id == this.dataCountFormData.id ? this.dataCountFormData : value)
       this.dragTableStatisticList.forEach((item, index) => {
         console.log(this.dataCountFormData);
-        if(item?.id == this.dataCountFormData?.id){
-          this.dragTableStatisticList[index] = this.dataCountFormData
-        }else if(item?.xid == this.dataCountFormData?.xid){
-          this.dragTableStatisticList[index] = this.dataCountFormData
+        if (item?.id == this.dataCountFormData?.id) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
+        } else if (item?.xid == this.dataCountFormData?.xid) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
         }
-      })
-      this.isShowAddData = false
-      console.log(this.dragTableStatisticList)
-      this.dataCountFormData = {}
+      });
+      this.isShowAddData = false;
+      console.log(this.dragTableStatisticList);
+      this.dataCountFormData = {};
     },
     // 添加数据字段
-    addData(){
+    addData() {
       console.log(this.dataCountFormData);
-      this.dataCountFormData.xid = Date.now()
-      this.dataCountFormData.tableKey = this.tableKey
-      this.dragTableStatisticList.push(this.dataCountFormData)
-      this.isShowAddData = false
-      this.dataCountFormData = {}
+      this.dataCountFormData.xid = Date.now();
+      this.dataCountFormData.tableKey = this.tableKey;
+      this.dragTableStatisticList.push(this.dataCountFormData);
+      this.isShowAddData = false;
+      this.dataCountFormData = {};
     },
     // 关闭添加数据字段
     closeAddDialog() {
@@ -1743,46 +1797,46 @@ export default {
       this.dataCountFormData = {};
     },
     // 确定统计
-    countHandle(){
+    countHandle() {
       addStatistic({
         dragTableStatisticList: this.dragTableStatisticList,
         tableSqlList: this.tableSqlList,
         searchFieldList: this.searchFieldList,
-        dtTableName: this.tableName
-      }).then(res=> {
+        dtTableName: this.tableName,
+      }).then((res) => {
         // console.log(res)
-      })
+      });
     },
     // 修改统计信息
-    handleUpdateStat(row){
+    handleUpdateStat(row) {
       console.log(row);
-      this.staictitle = '修改统计数据字段'
-      this.dataCountFormData = row
-      this.dataCountFormData.xid = Date.now()
-      this.addDataDialog()
-      this.isShowAddData = true
-      console.log(this.dataCountFormData)
+      this.staictitle = "修改统计数据字段";
+      this.dataCountFormData = row;
+      this.dataCountFormData.xid = Date.now();
+      this.addDataDialog();
+      this.isShowAddData = true;
+      console.log(this.dataCountFormData);
       console.log(this.dragTableStatisticList);
     },
     // 删除统计信息
-    handleDeleteStat(row){
+    handleDeleteStat(row) {
       this.dragTableStatisticList.forEach((item, index) => {
         console.log(item);
-        if(item.id == row.id){
+        if (item.id == row.id) {
           this.dragTableStatisticList.splice(index, 1);
         }
-      })
+      });
     },
   },
   created() {},
-    async mounted() {
-      this.getAllTable();
-      this.initDragTable();
-      await this.getMenuList();
-      if (this.$route.query.tId) {
-        this.tId = this.$route.query.tId;
-        this.initTableData(this.tId);
-      }
+  async mounted() {
+    this.getAllTable();
+    this.initDragTable();
+    await this.getMenuList();
+    if (this.$route.query.tId) {
+      this.tId = this.$route.query.tId;
+      this.initTableData(this.tId);
+    }
   },
 };
 </script>
@@ -1831,7 +1885,7 @@ export default {
 }
 .card {
   /* width:15%; */
-  height:150px;
+  height: 150px;
   flex-basis: 15%;
   margin-bottom: 10px;
   margin-right: 15px;
@@ -1859,7 +1913,7 @@ export default {
   .type {
     float: right;
     margin-top: 40px;
-    .statisticType{
+    .statisticType {
       font-size: 18px;
     }
   }
@@ -1867,12 +1921,12 @@ export default {
     font-size: 25px;
   }
 }
-.mb8{
-  ::v-deep .el-col-18{
+.mb8 {
+  ::v-deep .el-col-18 {
     width: 30% !important;
     min-width: 220px !important;
   }
-  ::v-deep .previewbtn{
+  ::v-deep .previewbtn {
     min-width: 190px !important;
   }
 }

ruoyi-ui/vue.config.js

@@ -4,6 +4,7 @@ const path = require('path')
 function resolve(dir) {
   return path.join(__dirname, dir)
 }
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
 
 const CompressionPlugin = require('compression-webpack-plugin')
 
@@ -37,7 +38,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.110.59:8080`,
+        target: `http://192.168.110.76:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''
@@ -80,7 +81,8 @@ module.exports = {
         algorithm: 'gzip',              // 使用gzip压缩
         minRatio: 0.8,                   // 压缩率小于1才会压缩
 
-      })
+      }),
+      new MonacoWebpackPlugin()
     ],
     // devtool: isDev ? "source-map" : false
   },