软件工程应用于实践：AJ-Report项目源码分析（10）

最新推荐文章于 2024-05-06 19:53:55 发布

原创

最新推荐文章于 2024-05-06 19:53:55 发布 · 697 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

本文深入探讨AJ-Report项目的report-ui模块，重点分析resultset组件的代码实现，包括codeMirror的使用、配置选项、数据源类型处理、生命周期方法中的功能实现，如编辑数据集、预览、脚本编辑以及字典项管理和数据源下拉交互等前端功能。

2021SC@SDUSC

本次继续分析report-ui\src\views\report\resultset\components处的代码

import Dictionary from "@/components/Dictionary/index";
import { codemirror } from "vue-codemirror";
import "codemirror/mode/sql/sql.js";
import "codemirror/mode/javascript/javascript.js";
import "codemirror/lib/codemirror.css"; 
import "codemirror/theme/cobalt.css"; 
import vueJsonEditor from "vue-json-editor";
import MonacoEditor from "./MonacoEditor.vue";
export default {
  name: "Support",
  components: { Dictionary, codemirror, vueJsonEditor, MonacoEditor },
  props: {
    visib: {
      required: true,
      type: Boolean,
      default: false
    },
    dataSet: {
      required: false,
      type: Object,
      default: () => {
        return "";
      }
    }
  },
  data() {
    return {
      data: [],
      listLoading: true,
      permission: {
        add: ["admin", "alipayConfig:add"],
        edit: ["admin", "alipayConfig:edit"],
        del: ["admin", "datasource:del"]
      },
      code: "",

      optionsSql: {
        mode: "text/x-sql",
        tabSize: 2, 
        lineNumbers: true, 
        line: true,
        styleActiveLine: true,
        hintOptions: {
          completeSingle: true 
        }
      },
      optionsJavascript: {
        mode: "text/javascript",
        tabSize: 2,
        lineNumbers: true,
        line: true,
        styleActiveLine: true,
        hintOptions: {
          completeSingle: true 
        }
      },
      selectedList: [],
      clickType: "",
      formData: {},
      dialogFormVisible: false,
      dialogFormVisibleTitle: "",
      dialogPermissionVisible: false,
      dialogSwitchVisible: false,
      permissionTextarea: "",
      isItemFilterType: "", 
      itemFilterList: [
        {
          transformType: "js",
          transformScript: `function dataTransform(data){\n\t data;\n}`
        }
      ],
      transformScript: `function dataTransform(data){\n\t/data;\n}`,
      itemFilterScriptId: "",
      title: "自定义高级规则",
      totalCount: 0,
      totalPage: 0,
      params: {
        pageNumber: 1,
        pageSize: 10,
        helpTitle: "",
        enabled: null,
        helpCategory: "",
        order: "DESC",
        sort: "update_time"
      },
      formRules: {
        setName: [
          { required: true, me

最低0.47元/天解锁文章

软件工程应用于实践：AJ-Report项目 源码分析（10）

软件工程应用于实践：AJ-Report项目源码分析（10）