@arkxos/arkos-system 0.1.0

package/src/views/codeless/scriptGroovySimple.vue

@@ -0,0 +1,1057 @@
+<template>
+  <div class="page-container">
+    <el-container>
+      <el-aside class="page-aside" width="280px" v-drag v-collapse>
+        <div class="title">
+          <div class="title-content">目录</div>
+          <div class="title-button">
+            <div class="button-list">
+              <div class="button-item">
+                <ac-icon
+                  iconId="018dca412c4e207388f7"
+                  :style="'cursor: pointer;color: ' + (treeCheck ? 'rgb(0,133,246)' : '#999') + ';font-size: 18px;'"
+                  :title="treeCheck ? '导入模式' : '导出模式'"
+                  @click.stop="changeMode"
+                />
+              </div>
+              <div class="button-item">
+                <ac-icon
+                  iconId="018ece4f749ec5911772"
+                  style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
+                  title="导出脚本"
+                  @click.stop="handleExport"
+                />
+              </div>
+              <div class="button-item">
+                <el-upload
+                  action=""
+                  :http-request="handleImport"
+                  :show-file-list="false"
+                  accept=".dat"
+                >
+                  <ac-icon
+                    iconId="018ece4f70fcf0627f81"
+                    style="cursor: pointer;color: rgb(0,133,246); font-size: 18px;"
+                    title="导入脚本"
+                  />
+                </el-upload>
+              </div>
+            </div>
+            <el-dropdown trigger="hover">
+              <span class="title-button-box">
+                <ac-icon iconId="018dc9c3efed46e8b927" size="18" @click.stop />
+              </span>
+              <template #dropdown>
+                <el-dropdown-menu>
+                  <el-dropdown-item @click.stop="addScriptGroovy({})">
+                    <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" /> 新增脚本
+                  </el-dropdown-item>
+                  <el-dropdown-item @click.stop="addFolder({})" :divided="true">
+                    <ac-icon iconId="018dc9c3efed6d208a59" color="orange" style="margin-right: 5px" /> 新增目录
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </template>
+            </el-dropdown>
+          </div>
+        </div>
+        <div class="filter-box">
+          <el-input placeholder="搜索" v-model="filterText" clearable />
+        </div>
+        <div class="page-aside-grow">
+          <el-tree
+            ref="tree"
+            class="tree"
+            node-key="id"
+            v-loading="treeLoading"
+            element-loading-text="数据加载中..."
+            :data="treeData"
+            :props="treeProps"
+            :highlight-current="true"
+            :default-expanded-keys="treeExpand"
+            :expand-on-click-node="!treeCheck"
+            :filter-node-method="filterNode"
+            :show-checkbox="treeCheck"
+            @node-click="nodeClick"
+          >
+            <template v-slot="{ node, data }">
+              <div class="node-item">
+                <span v-if="data.type === 'folder'" class="icon">
+                  <ac-icon v-if="node.expanded" color="orange" iconId="018dc9c3efedbb59d0b3" />
+                  <ac-icon v-else color="orange" iconId="018dc9c3efed6d208a59" />
+                </span>
+                <span v-else-if="data.type === 'script'" class="icon">
+                  <ac-icon color="#117fe8" iconId="018dc9c3efb74ac607cb" />
+                </span>
+                <span class="node-label" :title="data.text"><span>{{data.text}}</span></span>
+                <div class="node-button">
+                  <el-dropdown trigger="hover" placement="bottom-start">
+                    <span class="node-button-item">
+                      <ac-icon iconId="018dca6283a1e534a046" @click.stop />
+                    </span>
+                    <template #dropdown>
+                      <el-dropdown-menu v-if="data.type === 'folder'">
+                        <el-dropdown-item @click="addScriptGroovy(data.data)">
+                          <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" />新增脚本
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="addFolder(data.data)">
+                          <ac-icon iconId="018dc9c3efed6d208a59" color="orange" style="margin-right: 5px" />新增目录
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="updateNode(data.data)">
+                          <ac-icon iconId="018dca6db20c6a3aaf68" color="#0085f6" style="margin-right: 5px" />修改目录
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="moveNode(data.data)">
+                          <ac-icon iconId="018dca444e0754edef13" color="#FF6600" style="margin-right: 5px" />移动目录
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="deleteNode(data.data)">
+                          <ac-icon iconId="018dc9c3efd3a0502886" color="#F56C6C" style="margin-right: 5px" />删除目录
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                      <el-dropdown-menu v-else-if="data.type === 'script'">
+                        <el-dropdown-item @click="editScriptGroovy(data.data)">
+                          <ac-icon iconId="018dc9c3efb74ac607cb" color="#67C23A" style="margin-right: 5px" />修改脚本
+                        </el-dropdown-item>
+                        <el-dropdown-item @click="deleteScriptGroovy(data.data)">
+                          <ac-icon iconId="018dc9c3efd3a0502886" color="#F56C6C" style="margin-right: 5px" />删除脚本
+                        </el-dropdown-item>
+                      </el-dropdown-menu>
+                    </template>
+                  </el-dropdown>
+                </div>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+      </el-aside>
+      <el-main class="page-main">
+        <div class="box">
+          <div class="left">
+            <div class="mirror">
+              <CodeMirrorEditor
+                ref="codeMirror"
+                v-model:value="currNode.script"
+                :options="codeOptions"
+                @cursorActivity="showHint"
+                @change="changeScript"
+                border
+              />
+            </div>
+          </div>
+          <div class="right">
+            <el-tabs v-model="tabName" class="fit-tab fit-box">
+              <el-tab-pane name="tool" label="工具" class="fit-box">
+                <div class="tool">
+                  <el-collapse v-model="collapseName" accordion>
+                    <el-collapse-item
+                      v-for="(item, index) in toolData"
+                      :key="index"
+                      :name="'tool_' + index"
+                      :title="item.text"
+                    >
+                      <div class="function-list">
+                        <div
+                          class="function-item"
+                          v-for="(fun, index2) in item.children"
+                          :key="index2"
+                        >
+                          <el-tooltip
+                            v-if="fun.data.description"
+                            placement="left"
+                            effect="light"
+                            popper-class="padding-10-15"
+                          >
+                            <template #content>
+                              <div class="content-box">
+                                <div
+                                  class="content"
+                                  v-html="(fun.data.description || '')
+                                      .replace(/</ig, '&' + 'lt;')
+                                      .replace(/>/ig, '&' + 'gt;')
+                                      .replace(/\n/ig, '<br/>')
+                                      .replace(/ {4}/g, '&nbsp;&nbsp;&nbsp;&nbsp;')"
+                                ></div>
+                              </div>
+                            </template>
+                            <div class="tooltip" @click="addCode(fun.data.code)">{{fun.data.name}}</div>
+                          </el-tooltip>
+                          <div v-else class="tooltip" @click="addCode(fun.data.code)">{{fun.data.name}}</div>
+                          <el-tooltip
+                            v-if="fun.data.example"
+                            effect="light"
+                            popper-class="padding-10-15"
+                          >
+                            <template #content>
+                              <div class="content-box">
+                                <div
+                                  class="content"
+                                  v-html="(fun.data.example || '')
+                                      .replace(/</ig, '&' + 'lt;')
+                                      .replace(/>/ig, '&' + 'gt;')
+                                      .replace(/\n/g, '<br/>')
+                                      .replace(/ {4}/g, '&nbsp;&nbsp;&nbsp;&nbsp;')"
+                                ></div>
+                              </div>
+                            </template>
+                            <div class="example" @click="addCode(fun.data.example)">示例</div>
+                          </el-tooltip>
+                        </div>
+                      </div>
+                    </el-collapse-item>
+                  </el-collapse>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane name="logger" label="日志" class="fit-box">
+                <el-input type="textarea" readonly v-model="debugLogger"></el-input>
+              </el-tab-pane>
+              <el-tab-pane name="result" label="结果" class="fit-box">
+                <el-input type="textarea" readonly v-model="debugResult"></el-input>
+              </el-tab-pane>
+            </el-tabs>
+            <div class="button">
+              <el-button
+                type="info"
+                @click="clean"
+              >清空日志</el-button>
+              <el-button
+                type="success"
+                @click="debug"
+              >调试</el-button>
+              <el-button
+                v-if="currNode.id"
+                type="primary"
+                @click="saveCode"
+              >保存</el-button>
+            </div>
+          </div>
+        </div>
+      </el-main>
+    </el-container>
+  </div>
+
+  <!--新增/编辑目录界面-->
+  <el-dialog
+    v-model="folderVisible"
+    :title="folderTitle"
+    width="500px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      ref="folderForm"
+      label-width="120px"
+      label-position="right"
+      :model="folderData"
+      :rules="folderRules"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="目录名称" prop="name">
+            <el-input v-model="folderData.name" auto-complete="off"></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="上级目录" prop="parentId">
+            <ac-tree
+              v-model="folderData.parentId"
+              dataUrl="/system/scriptFolder/queryTree"
+              :leafSelect="false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="folderVisible=false"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        size="default"
+        :loading="folderLoading"
+        @click="submitFolderForm"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+
+  <!--移动目录界面-->
+  <el-dialog
+    v-model="moveVisible"
+    :title="moveTitle"
+    width="500px"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      ref="moveForm"
+      label-width="120px"
+      label-position="right"
+      :model="moveData"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="目录">
+            <ac-input
+              v-model="moveData.name"
+              :disabled="true"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="移动到" prop="folderId">
+            <ac-tree
+              v-model="moveData.folderId"
+              dataUrl="/system/scriptFolder/queryTree"
+              :leafSelect="false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="moveVisible=false"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        size="default"
+        :loading="moveLoading"
+        @click="submitMoveForm"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+
+  <!--脚本编辑-->
+  <el-dialog
+    v-model="dialogVisible"
+    width="500px"
+    :title="dialogTitle"
+    :close-on-click-modal="false"
+    destroy-on-close
+    draggable
+  >
+    <el-form
+      ref="dataForm"
+      label-width="120px"
+      label-position="right"
+      :model="formData"
+      :rules="rules"
+    >
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="脚本编码" prop="code">
+            <el-input
+              v-model="formData.id"
+              :disabled="true"
+              placeholder="系统自动生成"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="脚本名称" prop="name">
+            <el-input v-model="formData.name" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row>
+        <el-col :span="24">
+          <el-form-item label="目录名称" prop="folderId">
+            <ac-tree
+              v-model="formData.folderId"
+              dataUrl="/system/scriptFolder/queryTree"
+              :leafSelect="false"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <el-button
+        size="default"
+        type="info"
+        @click="dialogVisible=false"
+      >取消</el-button>
+      <el-button
+        type="primary"
+        size="default"
+        :loading="dialogLoading"
+        @click="submitDataForm"
+      >提交</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<script setup>
+import { ref, nextTick, watch, onMounted, onBeforeMount } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import api from '@/http/api';
+import tool from '@/utils/tool';
+import CodeMirrorEditor from 'codemirror-editor-vue3';
+import 'codemirror/mode/css/css.js';
+import 'codemirror/lib/codemirror.css';
+import 'codemirror/theme/dracula.css';
+import 'codemirror/mode/vue/vue.js';
+import 'codemirror/mode/htmlmixed/htmlmixed.js';
+import 'codemirror/mode/javascript/javascript.js';
+import 'codemirror/mode/groovy/groovy.js';
+import 'codemirror/addon/selection/active-line.js';
+import 'codemirror/addon/selection/mark-selection.js';
+import 'codemirror/addon/search/searchcursor.js';
+import 'codemirror/addon/scroll/annotatescrollbar.js';
+import 'codemirror/addon/search/matchesonscrollbar.js';
+import 'codemirror/addon/search/match-highlighter.js';
+import 'codemirror/mode/clike/clike.js';
+import 'codemirror/addon/edit/matchbrackets.js';
+import 'codemirror/addon/comment/comment.js';
+import 'codemirror/addon/dialog/dialog.js';
+import 'codemirror/addon/dialog/dialog.css';
+import 'codemirror/addon/search/search.js';
+import 'codemirror/keymap/sublime.js';
+import 'codemirror/addon/fold/foldgutter.css';
+import 'codemirror/addon/fold/brace-fold.js';
+import 'codemirror/addon/fold/comment-fold.js';
+import 'codemirror/addon/fold/foldcode.js';
+import 'codemirror/addon/fold/foldgutter.js';
+import 'codemirror/addon/fold/indent-fold.js';
+import 'codemirror/addon/fold/markdown-fold.js';
+import 'codemirror/addon/fold/xml-fold.js';
+import 'codemirror/addon/hint/show-hint.js';
+import 'codemirror/addon/hint/anyword-hint.js';
+import 'codemirror/addon/hint/javascript-hint.js';
+import '@/assets/style/code.css';
+import loading from '@/utils/loading';
+import code from '@/admin/components/code/code.js';
+
+const toolData = ref([]);
+const hintList = ref([]);
+const tree = ref();
+const filterText = ref('');
+const treeLoading = ref(false);
+const treeKey = ref('');
+const treeData = ref([]);
+const treeExpand = ref([]);
+const treeCheck = ref(false);
+const treeProps = ref({
+  children: 'children',
+  label: function(data) {
+    return data.text +
+      (data.data.code !== undefined && data.data.code != null
+        ? ' [' + data.data.code + ']　'
+        : '　')
+  }
+});
+const currNode = ref({
+  script: ''
+});
+
+const folderTitle = ref('');
+const folderVisible = ref(false);
+const folderLoading = ref(false);
+const folderForm = ref();
+const folderData = ref({});
+const folderRules = ref({
+  name: [{ required: true, message: '请输入目录名称', trigger: ['blur', 'change'] }],
+});
+
+const moveTitle = ref('');
+const moveVisible = ref(false);
+const moveLoading = ref(false);
+const moveForm = ref();
+const moveData = ref({});
+
+const dialogVisible = ref(false);
+const dialogTitle = ref('');
+const dialogLoading = ref();
+const dataForm = ref();
+const formData = ref({});
+const rules = ref({
+  name: [
+    { required: true, message: '请输入脚本名称', trigger: ['blur', 'change'] },
+    { max: 100, message: '脚本名称长度最多只能是100个字符', trigger: ['blur', 'change'] }
+  ],
+});
+
+const codeMirror = ref();
+const codeOptions = ref({});
+const collapseName = ref('');
+const tabName = ref('tool');
+const debugLogger = ref('');
+const debugResult = ref('');
+const isChangeScript = ref(false);
+
+const changeScript = () => {
+  isChangeScript.value = true;
+};
+
+const changeMode = () => {
+  treeCheck.value = !treeCheck.value;
+  if (treeCheck.value) {
+    tree.value.setCheckedNodes([]);
+  }
+}
+
+const handleExport = () => {
+  const nodes = tree.value.getCheckedNodes(false, true);
+  if (!nodes || nodes.length === 0) {
+    ElMessage.error('请先选择脚本！');
+    return;
+  }
+  const data = { folderIds: [], scriptIds: [] };
+  nodes.forEach(node => {
+    if (node.type === 'folder') {
+      data.folderIds.push(node.id);
+    } else if (node.type === 'script') {
+      data.scriptIds.push(node.id);
+    }
+  });
+  api.downloadFile('/system/scriptGroovy/exportData', data).then(res => api.saveFileLocal(res));
+};
+
+const handleImport = (file) => {
+  api.uploadFile('/system/scriptGroovy/importData', { file: file.file }).then((res) => {
+    ElMessage.success(res.message);
+    loadTreeData();
+  });
+};
+
+const filterNode = (value, data) => {
+  if (!value) return true;
+  return data.text.indexOf(value) >= 0 ||
+    (data.data.id != null && data.data.id.indexOf(value) >= 0);
+};
+
+const lastTreeNodeId = ref('');
+const nodeClick = async(data, treeNode) => {
+  if (isChangeScript.value) {
+    const result = await ElMessageBox.confirm('代码已有修改，是否放弃修改？', '提示', { type: 'warning' }).catch(() => {});
+    if (result !== 'confirm') {
+      if (lastTreeNodeId.value) {
+        tree.value.setCurrentKey(lastTreeNodeId.value);
+      }
+      treeNode.checked = false;
+      return;
+    }
+  }
+  if (currNode.value && (currNode.value.id === data.id || currNode.value.fid === data.id)) {
+    treeNode.checked = !treeNode.checked;
+  } else {
+    treeNode.checked = true;
+  }
+  if (treeNode.checked) {
+    lastTreeNodeId.value = treeNode.data.id;
+  }
+
+  if (treeNode.checked) {
+    currNode.value = data;
+    if (data.type === 'script') {
+      loadGroovy(data);
+
+      if (isBuiltin(data)) {
+        const message = '此脚本为内置脚本，系统升级时将会被覆盖，如需要修改，请复制一份脚本内容再修改使用！';
+        await ElMessageBox.confirm(message, '警告', { type: 'warning' }).catch(() => {});
+      }
+    } else {
+      currNode.value = { fid: data.id, script: '' };
+    }
+  } else {
+    tree.value.setCurrentKey(null);
+    currNode.value = { script: '' };
+  }
+
+  await nextTick(() => {
+    isChangeScript.value = false;
+  });
+};
+
+const loadGroovy = (data) => {
+  currNode.value = { id: data.id || '', script: '' };
+  loading.showLoading();
+  api.post('/system/scriptGroovy/queryBy', { id: data.id }).then(res => {
+    const data = res.data || {};
+    if (!data.script) {
+      data.script = '';
+    }
+    currNode.value = data;
+    nextTick(() => {
+      isChangeScript.value = false;
+    });
+    loading.hideLoading();
+  }).catch(() => loading.hideLoading());
+};
+
+const addScriptGroovy = (data) => {
+  formData.value = { folderId: data.id };
+  dialogTitle.value = '新增脚本';
+  dialogVisible.value = true;
+};
+
+const editScriptGroovy = (data) => {
+  formData.value = data;
+  dialogTitle.value = '编辑脚本';
+  dialogVisible.value = true;
+};
+
+const deleteScriptGroovy = (data) => {
+  const url = '/system/scriptGroovy/delete';
+  ElMessageBox.confirm('请确认是否删除【' + data.name + '】？', '提示', { type: 'warning' }).then(() => {
+    api.post(url, { id: data.id }).then(res => {
+      ElMessage.success(res.message);
+      treeExpand.value.push(data.parentId || '0');
+      treeExpand.value.push(data.folderId || '0');
+      treeKey.value = data.parentId || data.folderId || '0';
+      loadTreeData();
+    });
+  }).catch(() => {});
+};
+
+const isBuiltin = (data) => {
+  const node = tool.findNode(data.pid, treeData.value);
+  return node && node.text === '内置脚本';
+};
+
+const addFolder = (data) => {
+  showFolderDialog('新增', { parentId: data.id || '', ordinal: 10 });
+};
+
+const showFolderDialog = (tips, data) => {
+  folderTitle.value = tips + '目录';
+  folderVisible.value = true;
+  folderData.value = Object.assign({}, data);
+  folderForm.value && folderForm.value.resetFields();
+};
+
+const updateNode = (data) => {
+  showFolderDialog('修改', data);
+};
+
+const moveNode = (data) => {
+  moveTitle.value = '移动目录';
+  moveVisible.value = true;
+  moveData.value = { id: data.id, name: data.name, folderId: data.parentId };
+  moveForm.value && moveForm.value.resetFields();
+};
+
+const deleteNode = (data) => {
+  const url = '/system/scriptFolder/delete';
+  ElMessageBox.confirm('请确认是否删除【' + data.name + '】？', '提示', { type: 'warning' }).then(() => {
+    api.post(url, { id: data.id }).then(res => {
+      ElMessage.success(res.message);
+      treeExpand.value.push(data.parentId || '0');
+      treeExpand.value.push(data.folderId || '0');
+      treeKey.value = data.parentId || data.folderId || '0';
+      loadTreeData();
+    });
+  }).catch(() => {});
+};
+
+const submitFolderForm = () => {
+  folderForm.value && folderForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        folderLoading.value = true;
+        api.post('/system/scriptFolder/save', folderData.value).then(res => {
+          ElMessage.success(res.message);
+          folderVisible.value = false;
+          folderLoading.value = false;
+          treeExpand.value.push(res.data.id || '0');
+          treeKey.value = res.data.id || '0';
+          loadTreeData();
+        }).catch(() => {
+          folderLoading.value = false;
+        });
+      }).catch(() => {});
+    }
+  });
+};
+
+const submitMoveForm = () => {
+  moveForm.value && moveForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        moveLoading.value = true;
+        const data = { id: moveData.value.id, parentId: moveData.value.folderId };
+        const url = '/system/scriptFolder/updateParentId';
+        api.post(url, data).then(res => {
+          ElMessage.success(res.message);
+          moveVisible.value = false;
+          moveLoading.value = false;
+          treeExpand.value.push(moveData.value.id || '0');
+          treeKey.value = moveData.value.id || '0';
+          loadTreeData();
+        }).catch(() => {
+          moveLoading.value = false;
+        })
+      }).catch(() => {});
+    }
+  });
+};
+
+const submitDataForm = () => {
+  dataForm.value && dataForm.value.validate((valid) => {
+    if (valid) {
+      ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+        api.post('/system/scriptGroovy/saveSimple', formData.value)
+          .then((res) => {
+            ElMessage.success(res.message);
+            afterSubmit(res.data);
+          }).catch(() => {
+          });
+      }).catch(() => {});
+    } else {
+      ElMessage.error('数据录入不正确，请重新检查！');
+    }
+  });
+};
+
+const afterSubmit = (data) => {
+  treeKey.value = data.id || '';
+  dialogVisible.value = false;
+  loadGroovy(data);
+  loadTreeData();
+};
+
+const loadTreeData = () => {
+  treeLoading.value = true;
+  api.post('/system/scriptGroovy/queryTree').then(res => {
+    const node = tree.value.getCurrentNode();
+    if (node !== undefined && node != null) {
+      treeExpand.value = [node.id, node.data.parentId, node.data.folderId, '0'];
+    } else {
+      treeExpand.value = ['0'];
+    }
+    treeData.value = res.data.children;
+    treeLoading.value = false;
+    if (treeKey.value) {
+      nextTick(() => {
+        tree.value.setCurrentKey(treeKey.value);
+      });
+    }
+  }).catch(() => {
+    treeLoading.value = false;
+  });
+};
+
+const showHint = () => {
+  code.showHint(codeMirror.value.cminstance, hintList.value);
+};
+
+const addCode = (code) => {
+  if (code && codeMirror.value) {
+    codeMirror.value.cminstance.replaceSelection(code);
+    codeMirror.value.cminstance.focus();
+  }
+};
+
+const saveCode = () => {
+  ElMessageBox.confirm('请确认是否提交？', '提示', { type: 'info' }).then(() => {
+    api.post('/system/scriptGroovy/save', currNode.value).then((res) => {
+      ElMessage.success(res.message);
+      nextTick(() => {
+        isChangeScript.value = false;
+      });
+    });
+  }).catch(() => {});
+};
+
+const clean = () => {
+  debugLogger.value = '';
+  debugResult.value = '';
+};
+
+const debug = () => {
+  if (!currNode.value.script) {
+    ElMessage.error('调试脚本不能为空！');
+    return;
+  }
+
+  debugLogger.value = '';
+  debugResult.value = '';
+  tabName.value = tabName.value === 'tool' ? 'logger' : tabName.value;
+
+  api.post('/system/scriptGroovy/debugScript', { script: currNode.value.script || '' }).then(res => {
+    debugLogger.value = ((res.data && res.data.logger) || '').replace(/\n$/, '');
+    debugResult.value = (res.data && res.data.result) || '';
+  });
+};
+
+const loadToolData = async() => {
+  const res = await api.post('/system/scriptTool/queryWithDetailTree');
+  toolData.value = res.data && res.data.children || [];
+  toolData.value.forEach(item => {
+    item.children.forEach(child => {
+      if (child.data.code && child.data.code.indexOf('\n') === -1) {
+        hintList.value.push(child.data.code);
+      }
+    });
+  });
+};
+
+watch(() => filterText.value, val => {
+  tree.value.filter(val);
+});
+
+onBeforeMount(() => {
+  codeOptions.value = code.loadOptions('groovy');
+});
+
+onMounted(async() => {
+  hintList.value.push(...await code.loadModelHint());
+  hintList.value.push(...await code.loadGroovyHint());
+  hintList.value.push(...await code.loadDictionaryHint());
+  loadTreeData();
+  await loadToolData();
+  await nextTick(() => codeMirror.value.refresh());
+});
+</script>
+
+<style scoped lang="scss">
+.mirror {
+  line-height: 25px;
+  :deep(.cm-match-highlight) {
+    background-color: #ffff0066;
+  }
+}
+.mirror pre, .mirror div, .mirror span,
+.mirror :deep(.CodeMirror pre.CodeMirror-line),
+.mirror :deep(.CodeMirror pre.CodeMirror-line-like) {
+  font-family: "Courier New", "Helvetica Neue", Helvetica, "PingFang SC",
+  "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif!important;
+}
+.title {
+  display: flex;
+  flex-direction: row;
+  margin-right: 10px;
+  height: 40px;
+  align-items: center;
+
+  .title-content {
+    flex-grow: 1;
+    font-size: 18px;
+  }
+  .title-button {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .title-button .button-list {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .button-item {
+      margin: 0 5px 0 5px;
+    }
+  }
+  .title-button .title-button-box {
+    height: 30px;
+    width: 40px;
+    border-radius: 5px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    cursor: pointer;
+  }
+
+  .title-button .title-button-box:hover {
+    background: #eaeaea;
+    border: none;
+  }
+
+  .title-button .title-button-box:focus-visible {
+    outline: unset;
+  }
+}
+
+.filter-box {
+  margin-right: 10px;
+}
+
+.tree :deep(.el-tree-node__content) {
+  height: 40px;
+}
+
+.page-aside-grow {
+  width: 100% !important;
+
+  :deep(.el-tree) {
+    display: flex;
+    flex-direction: column;
+    width: 1px !important;
+  }
+
+  :deep(.el-tree-node) {
+    display: flex;
+    flex-direction: column;
+    width: 100% !important;
+  }
+
+  :deep(.el-tree-node__content) {
+    display: flex;
+    flex-grow: 1;
+  }
+}
+
+.node-item {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+
+  .icon {
+    display: flex;
+    align-items: center;
+  }
+
+  .node-label {
+    margin-left: 6px;
+    flex-grow: 1;
+    width: 1px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: flex;
+
+    > span {
+      width: 100%;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+  .node-button {
+    margin-right: 10px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  .node-button .node-button-item {
+    height: 30px;
+    width: 40px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 5px;
+  }
+  .node-button .node-button-item:focus-visible {
+    outline: unset;
+  }
+}
+:deep(.el-tree-node:not(.is-current):focus>.el-tree-node__content) {
+  background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content) {
+  background-color: unset!important;
+}
+:deep(.el-tree-node:focus>.el-tree-node__content:hover) {
+  background-color: #f5f7fa!important;
+}
+:deep(.el-tree-node.is-current:focus>.el-tree-node__content) {
+  background-color: #ecf5ff!important;
+}
+.node-item:hover {
+  .node-button .node-button-item:hover {
+    background: #eaeaea;
+  }
+}
+.page-main {
+  padding: 0!important;
+}
+
+.box {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  .left {
+    width: 1px;
+    height: 100%;
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    .mirror {
+      height: 1px;
+      flex-grow: 1;
+      overflow: hidden;
+    }
+  }
+  .right {
+    width: 300px;
+    padding: 0 0 0 10px;
+    display: flex;
+    flex-direction: column;
+    :deep(.el-tabs) {
+      padding: 0;
+      .el-tabs__header {
+        margin-bottom: 2px !important;
+      }
+    }
+    .tool {
+      height: 1px;
+      overflow: auto;
+      flex-grow: 1;
+      :deep(.el-collapse-item__header) {
+        font-size: 14px;
+      }
+      .function-item {
+        margin-left: 10px;
+        display: flex;
+        flex-direction: row;
+        .tooltip {
+          width: 1px;
+          flex-grow: 1;
+          flex-wrap: nowrap;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          cursor: pointer;
+          color: #0055ff;
+          margin-right: 10px;
+        }
+        .example {
+          width: 50px;
+          color: coral;
+          font-weight: bold;
+          cursor: pointer;
+        }
+      }
+    }
+    :deep(.el-textarea) {
+      height: 100%;
+    }
+    :deep(.el-textarea__inner) {
+      height: 100%;
+      background: #282a36;
+      color: #f1fa8c!important;
+      box-shadow: none;
+      resize: none;
+      padding: 5px 0 5px 10px;
+      overflow-y: auto;
+      font-family: "Courier New", "Helvetica Neue", Helvetica, "PingFang SC",
+      "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif!important;
+    }
+    .button {
+      padding: 5px 0 0 10px;
+      text-align: right;
+    }
+  }
+}
+.content-box {
+  .title {
+    margin-bottom: 10px;
+    font-size: 16px!important;
+  }
+  .content {
+    font-size: 15px!important;
+  }
+}
+</style>