zbcx_ckyc 1.0.0

package/src/plugins/app/znycpjxt/CusTools/CodeEditor/CodeEditor.vue

@@ -0,0 +1,227 @@
+<style lang="scss" scoped>
+.body {
+  position: relative;
+  height: inherit;
+
+  .code-editor {
+    width: 100%;
+    height: calc(100% - 0.01rem)
+  }
+
+  .tools {
+    position: absolute;
+    width: 100%;
+    bottom: .1rem;
+    display: flex;
+    justify-content: center;
+    overflow: hidden;
+    pointer-events: none;
+  }
+
+  .button {
+    pointer-events: all;
+  }
+}
+</style>
+
+<template>
+  <main class="body">
+    <section class="code-editor" ref="codeEditor"></section>
+    <section class="tools">
+      <el-tooltip v-for="tool in tools" :key="tool.title" effect="dark" :content="tool.title" placement="top-start">
+        <cx-button class="button" type="text" :icon="tool.icon" @click="tool.click"></cx-button>
+      </el-tooltip>
+    </section>
+  </main>
+</template>
+
+<script>
+/**
+ * 组件: 前端代码编辑器
+ * npm install monaco-editor@0.52.0 monaco-editor-webpack-plugin@7.1.0 --force
+ */
+
+import * as monaco from 'monaco-editor'
+const DefFontSize = 16
+export default
+{
+  mixins: [cx.mixin.IComBase],
+  props:
+  {
+    modelValue: String,
+    language: { type: String, default: 'javascript' },
+    readonly: { type: Boolean, default: false },
+    option: Object,
+    filterTools: Function
+  },
+  emits: ['update:modelValue', 'change'],
+  data()
+  {
+    return {
+      fontSize: DefFontSize,
+      tools: this.makeTools()
+    }
+  },
+  // watch:
+  // {
+  //   code:
+  //   {
+  //     handler(newValue)
+  //     {
+  //       // 当 code 变化时，更新 Monaco 编辑器的内容
+  //       if (this.editor)
+  //         this.editor.getModel().setValue(newValue)
+  //     },
+  //     immediate: true
+  //   }
+  // },
+  mounted()
+  {
+    this.init()
+  },
+  beforeUnmount()
+  {
+    if (this.editor)
+      this.editor.dispose()
+
+    // 移除对dom容器元素的监听事件
+    if (this.resizeObserver)
+      this.resizeObserver.disconnect()
+  },
+  methods:
+  {
+    init()
+    {
+      cx.base.watch(() => !!this.$refs.codeEditor && this.$refs.codeEditor.clientWidth > 0, () =>
+      {
+        // 实例化编辑器
+        this.editorOption =
+          {
+            value: this.modelValue || '',
+            language: this.language || 'javascript',
+
+            acceptSuggestionOnCommitCharacter: true, // 接受关于提交字符的建议
+            acceptSuggestionOnEnter: 'on', // 接受输入建议 "on" | "off" | "smart"
+            accessibilityPageSize: 10, // 辅助功能页面大小 Number 说明：控制编辑器中可由屏幕阅读器读出的行数。警告：这对大于默认值的数字具有性能含义。
+            accessibilitySupport: 'on', // 辅助功能支持 控制编辑器是否应在为屏幕阅读器优化的模式下运行。
+            autoClosingBrackets: 'always', // 是否自动添加结束括号(包括中括号) "always" | "languageDefined" | "beforeWhitespace" | "never"
+            autoClosingDelete: 'always', // 是否自动删除结束括号(包括中括号) "always" | "never" | "auto"
+            autoClosingOvertype: 'always', // 是否关闭改写 即使用insert模式时是覆盖后面的文字还是不覆盖后面的文字 "always" | "never" | "auto"
+            autoClosingQuotes: 'always', // 是否自动添加结束的单引号 双引号 "always" | "languageDefined" | "beforeWhitespace" | "never"
+            autoIndent: 'None', // 控制编辑器在用户键入、粘贴、移动或缩进行时是否应自动调整缩进
+            codeLens: false, // 是否显示codeLens 通过 CodeLens，你可以在专注于工作的同时了解代码所发生的情况 – 而无需离开编辑器。 可以查找代码引用、代码更改、关联的 Bug、工作项、代码评审和单元测试。
+            codeLensFontFamily: '', // codeLens的字体样式
+            codeLensFontSize: 14, // codeLens的字体大小
+            comments: {
+              ignoreEmptyLines: true, // 插入行注释时忽略空行。默认为真。
+              insertSpace: true // 在行注释标记之后和块注释标记内插入一个空格。默认为真。
+            }, // 注释配置
+            contextmenu: true, // 启用上下文菜单
+            columnSelection: false, // 启用列编辑 按下shift键位然后按↑↓键位可以实现列选择 然后实现列编辑
+            autoSurround: 'never', // 是否应自动环绕选择
+            copyWithSyntaxHighlighting: true, // 是否应将语法突出显示复制到剪贴板中 即 当你复制到word中是否保持文字高亮颜色
+            cursorBlinking: 'Solid', // 光标动画样式
+            cursorSmoothCaretAnimation: true, // 是否启用光标平滑插入动画  当你在快速输入文字的时候 光标是直接平滑的移动还是直接"闪现"到当前文字所处位置
+            cursorStyle: 'UnderlineThin', // "Block"|"BlockOutline"|"Line"|"LineThin"|"Underline"|"UnderlineThin" 光标样式
+            cursorSurroundingLines: 0, // 光标环绕行数 当文字输入超过屏幕时 可以看见右侧滚动条中光标所处位置是在滚动条中间还是顶部还是底部 即光标环绕行数 环绕行数越大 光标在滚动条中位置越居中
+            cursorSurroundingLinesStyle: 'all', // "default" | "all" 光标环绕样式
+            cursorWidth: 2, // <=25 光标宽度
+            folding: true, // 是否启用代码折叠
+            links: true, // 是否点击链接
+            overviewRulerBorder: false, // 是否应围绕概览标尺绘制边框
+            renderLineHighlight: 'gutter', // 当前行突出显示方式
+            roundedSelection: false, // 选区是否有圆角
+            scrollBeyondLastLine: false, // 设置编辑器是否可以滚动到最后一行之后
+
+            minimap: { enabled: true },
+            fontSize: this.fontSize,  // 设置字体大小
+            automaticLayout: false, // 自动布局
+            colorDecorators: true,    // 颜色装饰器
+            readOnly: this.readonly,          // 是否开启已读功能
+            theme: 'vs-dark',         // 主题
+            ...this.option
+          }
+        this.editor = monaco.editor.create(this.$refs.codeEditor, this.editorOption)
+
+        // 监听编辑器内容变化
+        this.editor.onDidChangeModelContent(() =>
+        {
+          // 触发父组件的 change 事件，通知编辑器内容变化
+          this.$emit('change', this.editor.getValue())
+          this.$emit('update:modelValue', this.editor.getValue())
+        })
+        this.observeDom(this.$refs.codeEditor)
+      })
+    },
+
+    /**
+       * 更新编辑器内的代码内容
+       * @method
+       * @param     {String}        code      待更新的代码
+       */
+    updateCode(code)
+    {
+      if (this.editor)
+        this.editor.getModel().setValue(code)
+    },
+
+    /**
+       * 监听dom容器尺寸变化，变化后让编辑器重新布局
+       * @method
+       * @param         {Dom}       dom       容器dom元素
+       */
+    observeDom(dom)
+    {
+      this.resizeObserver = new ResizeObserver(() => this.editor.layout())
+      this.resizeObserver.observe(dom)
+    },
+
+    makeTools()
+    {
+      const list =
+          [
+            { key: 'reLayout', title: cx.i18n.locBase('refresh'), icon: 'cx-fi ic-refresh', click: () => this.reLayout() },
+            { key: 'format', title: vm.$t('lc.format'), icon: 'cx-fi ic-filter', click: () => this.formatter() },
+            { key: 'zoomIn', title: vm.$t('lc.zoomInFontSize'), icon: 'cx-fi ic-zoomIn', click: () => this.updateFontSize(this.fontSize + 2) },
+            { key: 'zoomOut', title: vm.$t('lc.zoomOutFontSize'), icon: 'cx-fi ic-zoomOut', click: () => this.updateFontSize(this.fontSize - 2) },
+            { key: 'refresh', title: vm.$t('lc.resetFontSize'), icon: 'cx-fi ic-rresetFont', click: () => this.updateFontSize(DefFontSize) },
+            { key: 'fullScreen', title: vm.$t('lc.fullScreenEdit'), icon: 'cx-fi ic-preview', click: () => this.fullScreenEdit() }
+          ]
+      if (cx.base.isFunc(this.filterTools))
+        return this.filterTools(list)
+      return list
+    },
+
+    reLayout()
+    {
+      if (this.editor)
+        this.editor.layout()
+      else
+        this.init()
+    },
+
+    /**
+       * 弹框对代码进行全屏编辑
+       * @method
+       */
+    fullScreenEdit()
+    {
+      cx.run.runPlug('PlugCodeEditor', { code: this.editor.getValue(), language: this.language, option: this.option, onChange: newCode => this.updateCode(newCode) })
+    },
+
+    formatter()
+    {
+      this.editor.getAction('editor.action.formatDocument')?.run()
+    },
+
+    updateFontSize(fontSize)
+    {
+      if (this.editor)
+      {
+        this.editor.updateOptions({ fontSize })
+        this.fontSize = fontSize
+      }
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/CusTools/CodeEditor/PlugCodeEditor.vue

@@ -0,0 +1,78 @@
+<style lang="scss" scoped>
+  :deep(.region-north) { padding-bottom: 0.12rem; }
+  :deep(.cx-region) { overflow: hidden; }
+</style>
+
+<template>
+  <cx-layout>
+    <cx-region region="center">
+      <CxCodeEditor v-model="code" :language="language" :option="option" :filterTools="filterTools" @change="onCodeChange"></CxCodeEditor>
+    </cx-region>
+    <cx-region region="north" class="region-north">
+      <cx-cmd-ok-close @ok-click="onOk" @cancel-click="close" />
+    </cx-region>
+  </cx-layout>
+</template>
+
+<script>
+/**
+ * 组件名称: 自定义过滤器函数代码编辑
+ * 研发时间: 2024/07/29
+ * 研发人员: 高旭龙
+ * 功能说明:
+ *
+ * 参数说明:
+ * @prop  类型               参数名                          参数说明
+ *
+ * 事件说明:
+ * @event 事件名             参数解构                        事件和参数说明
+ *
+ * 插槽说明:
+ * @slot  插槽名             插槽prop解构                    插槽和prop说明
+ */
+
+/**
+ * 维护历史:
+ * 修改时间  人员      说明
+ */
+import CxCodeEditor from './CodeEditor'
+export default
+{
+  mixins: [cx.mixin.IPlugBase],
+
+  components: { CxCodeEditor },
+
+  data()
+  {
+    return {
+      code: '',
+      language: 'javascript',
+      option: {}
+    }
+  },
+  created()
+  {
+    this.code = this.params.code || this.code
+    this.language = this.params.language || this.language
+    this.option = this.params.option || this.option
+  },
+  methods:
+  {
+    onOk()
+    {
+      cx.base.call(this.params.onOk, this.code, this)
+      this.close()
+    },
+
+    filterTools(list)
+    {
+      return list.filter(item => item.key !== 'fullScreen')
+    },
+
+    onCodeChange(newCode)
+    {
+      cx.base.call(this.params.onChange, newCode, this)
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/CusTools/CodeEditor/demo/basic.vue

@@ -0,0 +1,27 @@
+<style lang="scss" scoped>
+</style>
+
+<template>
+  <cx-code-editor ref="codeEditor" v-model="selCode" :readOnly="readOnly" @change="onChange"></cx-code-editor>
+</template>
+
+<script>
+
+export default
+{
+  data()
+  {
+    return {
+      selCode: '',
+      readOnly: false
+    }
+  },
+  methods:
+  {
+    onChange(newCode)
+    {
+      console.log('onChange', newCode)
+    }
+  }
+}
+</script>

package/src/plugins/app/znycpjxt/CusTools/DmbjForm.vue

@@ -0,0 +1,76 @@
+<style lang='scss' scoped>
+  .cust-border {width: 100%; height: 100%; border: 0.01rem solid var(--cx-colorBorder1); padding: 0.16rem;box-sizing:border-box}
+  .active-name{width: 98.8%; height: 6%; font-size: 0.2rem; font-weight: 400; box-sizing: border-box; padding-left: 0.1rem; padding-right: 0.1rem;  margin: auto; line-height: 0.5rem; border-radius: 0.06rem; box-shadow: 0 0 .03rem .03rem rgba(0,0,0,.05); border: .01rem solid var(--cx-colorBorder1); color: var(--cx-colorText1); background: var(--cx-colorBg5); display: flex;align-items: center;justify-content: space-between;}
+</style>
+
+<template>
+  <div class="active-name">
+    <span>{{}}</span>
+    <el-button class="btn_sm" type="primary" @click="back">返回</el-button>
+  </div>
+  <cx-layout padding style="height: 94%;">
+    <cx-region region="west" width="4.2rem" gutter></cx-region>
+    <cx-region region="center" >
+      <RightContent :noBtn="true"  title="输出" @ok-click="onExportResult">
+      </RightContent>
+    </cx-region>
+  </cx-layout>
+</template>
+
+<script>
+
+/**
+ * 插件 - 公共工具
+ */
+
+/**
+ * 修改记录:
+ * 25-04-15    黄佳龙     首次编写
+ */
+
+import RightContent from '../coms/RightContent.vue'
+
+export default
+{
+  mixins: [cx.mixin.IComBase],
+  components: { RightContent },
+  data()
+  {
+    return {
+      sfmk: { name: '证据权', type: 'dataanly' },
+      tabdatas: {},
+      plzftdatas: {
+        x: [], y: []
+      },
+      czdx: '',
+      file: '',
+      select: '',
+      graph: '',
+      datasPc: null,
+      hygl: null
+    }
+  },
+
+  // 按功能相关性组织函数块，函数名体现功能
+  methods:
+  {
+    /**
+     * 错误处理
+     * @param {Error} err 错误对象
+     */
+    onError(err)
+    {
+      vm.$processing.close()
+      this.$showRet(err)
+    },
+
+    /**
+     * 返回
+     */
+    back()
+    {
+      cx.run.runPlug('Gjbjyfb')
+    }
+  }
+}
+</script>