simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdCodeEditor/src/Codemirror/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="common-editor" style="font-size: 14px">
+    <Toolbar v-model="form"></Toolbar>
+    <textarea v-if="CodeEditor" ref="textarea" v-model="value" :placeholder="placeholder"></textarea>
+  </div>
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css'
+
+// 主题
+import 'codemirror/theme/abcdef.css'
+import 'codemirror/theme/base16-dark.css'
+import 'codemirror/theme/blackboard.css'
+import 'codemirror/theme/cobalt.css'
+import 'codemirror/theme/colorforth.css'
+import 'codemirror/theme/darcula.css'
+import 'codemirror/theme/dracula.css'
+import 'codemirror/theme/duotone-dark.css'
+import 'codemirror/theme/eclipse.css'
+import 'codemirror/theme/hopscotch.css'
+import 'codemirror/theme/icecoder.css'
+import 'codemirror/theme/idea.css'
+import 'codemirror/theme/isotope.css'
+import 'codemirror/theme/liquibyte.css'
+import 'codemirror/theme/lucario.css'
+import 'codemirror/theme/material.css'
+import 'codemirror/theme/mbo.css'
+import 'codemirror/theme/mdn-like.css'
+import 'codemirror/theme/night.css'
+import 'codemirror/theme/panda-syntax.css'
+import 'codemirror/theme/pastel-on-dark.css'
+import 'codemirror/theme/rubyblue.css'
+import 'codemirror/theme/seti.css'
+import 'codemirror/theme/shadowfox.css'
+import 'codemirror/theme/yonce.css'
+
+// 插件
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/hint/javascript-hint'
+import 'codemirror/addon/hint/sql-hint'
+import 'codemirror/addon/display/placeholder.js'
+
+// 语言
+import 'codemirror/mode/clike/clike'
+import 'codemirror/mode/css/css'
+import 'codemirror/mode/htmlmixed/htmlmixed'
+import 'codemirror/mode/htmlembedded/htmlembedded'
+import 'codemirror/mode/http/http'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/jsx/jsx'
+import 'codemirror/mode/markdown/markdown'
+import 'codemirror/mode/nginx/nginx'
+import 'codemirror/mode/php/php'
+import 'codemirror/mode/python/python'
+import 'codemirror/mode/sass/sass'
+import 'codemirror/mode/shell/shell'
+import 'codemirror/mode/sql/sql'
+import 'codemirror/mode/vue/vue'
+import 'codemirror/mode/powershell/powershell'
+import 'codemirror/mode/xml/xml'
+
+// 显示自动刷新
+import 'codemirror/addon/display/autorefresh.js'
+
+// #region 搜索功能
+// find：Ctrl-F (PC), Cmd-F (Mac)
+// findNext：Ctrl-G (PC), Cmd-G (Mac)
+// findPrev：Shift-Ctrl-G (PC), Shift-Cmd-G (Mac)
+// replace：Shift-Ctrl-F (PC), Cmd-Alt-F (Mac)
+// replaceAll：Shift-Ctrl-R (PC), Shift-Cmd-Alt-F (Mac)
+import 'codemirror/addon/dialog/dialog.css'
+import 'codemirror/addon/dialog/dialog'
+import 'codemirror/addon/search/searchcursor'
+import 'codemirror/addon/search/search'
+import 'codemirror/addon/search/jump-to-line'
+import 'codemirror/addon/search/matchesonscrollbar'
+import 'codemirror/addon/search/match-highlighter'
+// #endregion
+import CodeMirror from 'codemirror/lib/codemirror'
+
+import Toolbar from "./Toolbar";
+
+/**
+ * 一个代码编辑器,支持多种语言
+ * 该组件已经全局注册,可以直接使用
+ * - 示例
+ *
+ * ```vue
+ * <ed-code-editor v-model="value"></ed-code-editor>
+ * ```
+ */
+
+export default {
+  name: 'EdCodeEditor',
+  components: {Toolbar},
+  props: {
+    // 编辑器的值, 可以通过 v-model 双向绑定
+    value: {
+      type: String,
+      default: ''
+    },
+    // 编辑器的占位符
+    placeholder: {
+      type: String,
+      default: 'Please enter the code.'
+    },
+    // 编辑器的语言
+    language: {
+      type: String,
+      default: 'javascript'
+    }
+  },
+  data() {
+    return {
+      CodeEditor: true,
+      flag: false,
+      code: '',
+      coder: null,
+      form: {
+        mode: 'text/javascript',
+        theme: 'eclipse',
+      },
+      modes: [
+        {value: 'text/x-vue', label: 'Vue'},
+        {value: 'text/javascript', label: 'Javascript'},
+        {value: 'text/css', label: 'Css'},
+        {value: 'x-java', label: 'Java'},
+        {value: 'x-python', label: 'Python'},
+        {value: 'x-sql', label: 'SQL'},
+        {value: 'x-shell', label: 'Shell'},
+        {value: 'x-powershell', label: 'PowerShell'},
+        {value: 'x-php', label: 'PHP'}
+      ]
+    }
+  },
+  watch: {
+    "form.mode": {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          console.log("--------", newVal)
+          this.getCoder().then(() => {
+            this.coder.setOption('mode', `${newVal}`)
+          })
+        }
+      }
+    },
+    "form.theme": {
+      deep: true,
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.getCoder().then(() => {
+            this.coder.setOption('theme', `${newVal}`)
+          })
+        }
+      }
+    }
+  },
+  computed: {
+    coderOptions() {
+      return {
+        autoRefresh: true,
+        line: true,
+        mode: this.form.mode, // json数据高亮
+        theme: this.form.theme, //设置主题 记得引入对应主题才有显示   import 'codemirror/theme/blackboard.css'
+        tabSize: 2,
+        lineNumbers: true, // 显示行号
+        cursorHeight: 0.8, //光标高度，默认是1
+        autoCloseBrackets: true,
+        matchBrackets: true, // 括号匹配
+        lineWrapping: 'wrap', // 文字过长时，是换行(wrap)还是滚动(scroll),默认是滚动
+        showCursorWhenSelecting: true, // 文本选中时显示光标
+        smartIndent: true, // 智能缩进
+        completeSingle: false // 当匹配只有一项的时候是否自动补全
+      }
+    }
+  },
+  mounted() {
+    // 初始化
+    this.initialize()
+  },
+  methods: {
+    test() {
+      this.CodeEditor = false
+      this.$nextTick(() => {
+        this.CodeEditor = true
+      })
+    },
+    /**
+     * @public
+     * 刷新编辑器
+     */
+    refresh() {
+      this.coder.refresh()
+    },
+    // 初始化
+    initialize() {
+      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
+      this.coder = CodeMirror.fromTextArea(this.$refs.textarea, this.coderOptions)
+      this.coder.refresh()
+      this.coder.on('inputRead', () => {
+        this.coder.showHint()
+      })
+
+      // 编辑器赋值
+      if (this.value || this.code) {
+        this.setCodeContent(this.value || this.code)
+      } else {
+        this.coder.setValue('')
+      }
+
+      // 支持双向绑定
+      this.coder.on('change', (coder) => {
+        this.code = coder.getValue()
+        if (this.$emit) {
+          this.$emit('input', this.code)
+          this.$emit('change', this.code)
+        }
+      })
+    },
+    /**
+     * @private
+     * @param val
+     * 设置编辑器内容
+     */
+    setCodeContent(val) {
+      setTimeout(() => {
+        if (!val) {
+          this.coder.setValue('')
+        } else {
+          this.coder.setValue(val)
+        }
+      }, 300)
+    },
+    /**
+     * @private
+     * @returns {Promise<unknown>}
+     * 获取编辑器实例
+     */
+    getCoder() {
+      const that = this
+      return new Promise((resolve) => {
+        (function get() {
+          if (that.coder) {
+            resolve(that.coder)
+          } else {
+            setTimeout(get, 10)
+          }
+        })()
+      })
+    },
+    /**
+     * @private
+     * @param language
+     * @returns {{label: string, value: string} | {label: string, value: string} | {label: string, value: string} | {label: string, value: string} | {label: string, value: string}}
+     * 获取语法类型
+     */
+    getLanguage(language) {
+      // 在支持的语法类型列表中寻找传入的语法类型
+      return this.modes.find((mode) => {
+        // 所有的值都忽略大小写，方便比较
+        const currentLanguage = language.toLowerCase()
+        const currentLabel = mode.label.toLowerCase()
+        const currentValue = mode.value.toLowerCase()
+
+        // 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较
+        return (
+            currentLabel === currentLanguage || currentValue === currentLanguage
+        )
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.common-editor {
+  width: 100%;
+  height: 100%;
+
+  .CodeMirror {
+    // color: #ccc;
+    direction: ltr;
+    line-height: 20px;
+    width: 100%;
+    height: 100%;
+    // background-color: #000;
+  }
+
+  .CodeMirror-hints {
+    z-index: 9999 !important;
+  }
+
+  .custom-class .CodeMirror {
+    width: 100%;
+  }
+}
+
+.CodeMirror-hints {
+  z-index: 1000;
+}
+
+.CodeMirror pre.CodeMirror-placeholder {
+  color: #999;
+  font-size: 0.5rem;
+}
+</style>

package/src/components/ed-base-vue/package/EdCodeEditor/src/EdCodeEditor.vue

@@ -0,0 +1,238 @@
+<template>
+  <div class="common-editor">
+    <textarea ref="textarea" v-model="value" :placeholder="placeholder"></textarea>
+  </div>
+</template>
+
+<script>
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/theme/base16-dark.css'
+import 'codemirror/theme/blackboard.css'
+import 'codemirror/addon/hint/show-hint.css'
+import 'codemirror/addon/hint/show-hint.js'
+import 'codemirror/addon/hint/show-hint'
+import 'codemirror/addon/hint/javascript-hint'
+import 'codemirror/addon/hint/sql-hint'
+import 'codemirror/mode/javascript/javascript'
+import 'codemirror/mode/vue/vue'
+import 'codemirror/mode/markdown/markdown'
+import 'codemirror/mode/sql/sql'
+import 'codemirror/mode/php/php'
+import 'codemirror/mode/python/python'
+import 'codemirror/mode/shell/shell'
+import 'codemirror/mode/powershell/powershell'
+import 'codemirror/addon/display/placeholder.js'
+
+import CodeMirror from 'codemirror/lib/codemirror'
+
+/**
+ * 一个代码编辑器,支持多种语言
+ * 该组件已经全局注册,可以直接使用
+ * - 示例
+ *
+ * ```vue
+ * <ed-code-editor v-model="value"></ed-code-editor>
+ * ```
+ */
+
+export default {
+  name: 'EdCodeEditor',
+  props: {
+    // 编辑器的值, 可以通过 v-model 双向绑定
+    value: {
+      type: String,
+      default: ''
+    },
+    // 编辑器的占位符
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    // 编辑器的语言
+    language: {
+      type: String,
+      default: 'javascript'
+    }
+  },
+  data() {
+    return {
+      CodeEditor: false,
+      code: '',
+      coder: null,
+      mode: 'javascript',
+      theme: 'default',
+      modes: [
+        {value: 'text/x-vue', label: 'Vue'},
+        {value: 'text/javascript', label: 'Javascript'},
+        {value: 'text/css', label: 'Css'},
+        {value: 'x-java', label: 'Java'},
+        {value: 'x-python', label: 'Python'},
+        {value: 'x-sql', label: 'SQL'},
+        {value: 'x-shell', label: 'Shell'},
+        {value: 'x-powershell', label: 'PowerShell'},
+        {value: 'x-php', label: 'PHP'}
+      ]
+    }
+  },
+  watch: {
+    language: {
+      handler(language) {
+        this.getCoder().then(() => {
+          // 尝试从父容器获取语法类型
+          if (language) {
+            // 获取具体的语法类型对象
+            const modeObj = this.getLanguage(language)
+            // 判断父容器传入的语法是否被支持
+            if (modeObj) {
+              this.mode = modeObj.label
+              this.coder.setOption('mode', `text/${modeObj.value}`)
+            }
+          }
+        })
+      },
+      immediate: true
+    }
+  },
+  computed: {
+    coderOptions() {
+      return {
+        autoRefresh: true,
+        line: true,
+        mode: 'application/json', // json数据高亮
+        theme: 'blackboard', //设置主题 记得引入对应主题才有显示   import 'codemirror/theme/blackboard.css'
+        tabSize: 1,
+        lineNumbers: true, // 显示行号
+        cursorHeight: 0.8, //光标高度，默认是1
+        autoCloseBrackets: true,
+        matchBrackets: true, // 括号匹配
+        lineWrapping: 'wrap', // 文字过长时，是换行(wrap)还是滚动(scroll),默认是滚动
+        showCursorWhenSelecting: true, // 文本选中时显示光标
+        smartIndent: true, // 智能缩进
+        completeSingle: false // 当匹配只有一项的时候是否自动补全
+      }
+    }
+  },
+  mounted() {
+    // 初始化
+    this.initialize()
+  },
+  methods: {
+    /**
+     * @public
+     * 刷新编辑器
+     */
+    refresh() {
+      this.coder.refresh()
+    },
+    // 初始化
+    initialize() {
+      // 初始化编辑器实例，传入需要被实例化的文本域对象和默认配置
+      this.coder = CodeMirror.fromTextArea(
+        this.$refs.textarea,
+        this.coderOptions
+      )
+      this.coder.refresh()
+      this.coder.on('inputRead', () => {
+        this.coder.showHint()
+      })
+      // 编辑器赋值
+      if (this.value || this.code) {
+        this.setCodeContent(this.value || this.code)
+      } else {
+        this.coder.setValue('')
+      }
+      // 支持双向绑定
+      this.coder.on('change', (coder) => {
+        this.code = coder.getValue()
+        if (this.$emit) {
+          this.$emit('input', this.code)
+          this.$emit('change', this.code)
+        }
+      })
+    },
+    /**
+     * @private
+     * @param val
+     * 设置编辑器内容
+     */
+    setCodeContent(val) {
+      setTimeout(() => {
+        if (!val) {
+          this.coder.setValue('')
+        } else {
+          this.coder.setValue(val)
+        }
+      }, 300)
+    },
+    /**
+     * @private
+     * @returns {Promise<unknown>}
+     * 获取编辑器实例
+     */
+    getCoder() {
+      const that = this
+      return new Promise((resolve) => {
+        (function get() {
+          if (that.coder) {
+            resolve(that.coder)
+          } else {
+            setTimeout(get, 10)
+          }
+        })()
+      })
+    },
+    /**
+     * @private
+     * @param language
+     * @returns {{label: string, value: string} | {label: string, value: string} | {label: string, value: string} | {label: string, value: string} | {label: string, value: string}}
+     * 获取语法类型
+     */
+    getLanguage(language) {
+      // 在支持的语法类型列表中寻找传入的语法类型
+      return this.modes.find((mode) => {
+        // 所有的值都忽略大小写，方便比较
+        const currentLanguage = language.toLowerCase()
+        const currentLabel = mode.label.toLowerCase()
+        const currentValue = mode.value.toLowerCase()
+
+        // 由于真实值可能不规范，例如 java 的真实值是 x-java ，所以讲 value 和 label 同时和传入语法进行比较
+        return (
+          currentLabel === currentLanguage || currentValue === currentLanguage
+        )
+      })
+    },
+  }
+}
+</script>
+<style lang="scss" scoped>
+.common-editor {
+  width: 100%;
+  height: 100%;
+
+  .CodeMirror {
+    // color: #ccc;
+    direction: ltr;
+    line-height: 20px;
+    width: 100%;
+    height: 100%;
+    // background-color: #000;
+  }
+
+  .CodeMirror-hints {
+    z-index: 9999 !important;
+  }
+
+  .custom-class .CodeMirror {
+    width: 100%;
+  }
+}
+
+.CodeMirror-hints {
+  z-index: 1000;
+}
+
+.CodeMirror pre.CodeMirror-placeholder {
+  color: #999;
+  font-size: 0.5rem;
+}
+</style>

package/src/components/ed-base-vue/package/EdDate/index.js

@@ -0,0 +1,8 @@
+import EdDate from "./src/index.js";
+
+/* istanbul ignore next */
+EdDate.install = function (Vue) {
+    Vue.component(EdDate.name, EdDate)
+}
+
+export default EdDate

package/src/components/ed-base-vue/package/EdDate/src/index.js

@@ -0,0 +1,50 @@
+import {friendlyDate} from '../../../tools/date-format'
+
+export default {
+    name: "EdDate",
+    functional: true,
+    props: {
+        // date 日期对象/日期字符串/时间戳
+        date: {
+            type: [Object, String, Number],
+        },
+        // 格式化使用的语言
+        locale: {
+            type: String,
+            default: 'zh',
+        },
+        // 应用不同类型格式化的阈值
+        threshold: {
+            type: Array,
+            default() {
+                return [0, 0]
+            }
+        },
+        // 输出日期字符串时的格式
+        format: {
+            type: String,
+            default: 'yyyy/MM/dd hh:mm:ss'
+        },
+    },
+    render: (h, ctx) => {
+        let dataShow = "-"
+        if (ctx.props.date) {
+            dataShow = ctx.props.date
+        }
+
+        if (ctx.children) {
+            dataShow = ctx.children[0].text
+        }
+
+        let date = friendlyDate(dataShow, {
+            locale: ctx.props.locale,
+            threshold: ctx.props.threshold,
+            format: ctx.props.format
+        })
+        return h('span', {
+            domProps: {
+                innerHTML: date // 这里是要渲染的数据
+            }
+        })
+    }
+}

package/src/components/ed-base-vue/package/EdDescriptions/index.js

@@ -0,0 +1,8 @@
+import EdDescriptions from "./src/EdDescriptions.vue";
+
+/* istanbul ignore next */
+EdDescriptions.install = function (Vue) {
+  Vue.component(EdDescriptions.name, EdDescriptions)
+}
+
+export default EdDescriptions

package/src/components/ed-base-vue/package/EdDescriptions/src/EdDescriptions.vue

@@ -0,0 +1,46 @@
+<template>
+  <el-descriptions v-bind="_buildProps()">
+    <template v-for="(column, index) in columns">
+      <el-descriptions-item v-if="showNullValue(column)" :key="index" :label="column.label">
+        <slot :cellValue="cellValue(column)" :column="column" :index="index" :name="slotName(column)" :row="data">
+          <ed-descriptions-item :column="column" :data="data" :index="index"></ed-descriptions-item>
+        </slot>
+      </el-descriptions-item>
+    </template>
+  </el-descriptions>
+</template>
+
+<script lang="jsx">
+import EdDescriptionsItem from "./EdDescriptionsItem";
+import lodashGet          from 'lodash/get'
+import Props              from './Props'
+
+export default {
+  name: "EdDescriptions",
+  components: {EdDescriptionsItem},
+  props: Props,
+  methods: {
+    // 设置组件属性
+    _buildProps() {
+      return Object.assign({}, this.$attrs, this.$props)
+    },
+    // 获取字段名
+    slotName(column) {
+      return column.prop.includes('.') ? column.prop.split('.').pop() : column.prop
+    },
+    // 获取字段值
+    cellValue(column) {
+      return lodashGet(this.data, column.prop) || ''
+    },
+    // 是否显示空值
+    showNullValue(column) {
+      let cellValue = lodashGet(this.data, column.prop)
+      return !this.showNull ? (cellValue !== undefined && cellValue !== null) : true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+</style>

package/src/components/ed-base-vue/package/EdDescriptions/src/EdDescriptionsItem.js

@@ -0,0 +1,20 @@
+import lodashGet    from 'lodash/get'
+import {isVNode}    from "../../../tools/utils";
+
+export default {
+  name: "EdDescriptionsItem",
+  props: {
+    column: {},
+    data: {},
+    index: Number,
+  },
+  render(h) {
+    let {prop, formatter} = this.column
+    let value = lodashGet(this.data, prop) || ''
+    if (formatter) {
+      let VNode = formatter(this.data, this.column, value, this.index)
+      return isVNode(this, VNode) ? VNode : h('span', VNode)
+    }
+    return h('span', value)
+  }
+}

package/src/components/ed-base-vue/package/EdDescriptions/src/Props.js

@@ -0,0 +1,20 @@
+export default {
+    border: {type: Boolean, default: false},
+    column: {type: Number, default: 2},
+    direction: {type: String, default: 'horizontal'},
+    size: {type: String},
+    title: {type: String, default: ''},
+    extra: {type: String, default: ''},
+    labelStyle: {type: Object},
+    contentStyle: {type: Object},
+    labelClassName: {type: String, default: ''},
+    contentClassName: {type: String, default: ''},
+    colon: {type: Boolean, default: true},
+
+    // 描述
+    columns: {type: Array},
+    // 值
+    data: {type: Object},
+    // 是否显示空值
+    showNull: {type: Boolean, default: true}
+}