three-trees-ui 1.0.0

package/packages/Divider/src/main.vue

@@ -0,0 +1,38 @@
+<template>
+  <div
+    :class="['el-divider', `el-divider--${direction}`]"
+    :style="'background-color:' + color"
+  >
+    <div
+      v-if="$slots.default && direction !== 'vertical'"
+      :class="['el-divider__text', `is-${contentPosition}`]"
+    >
+      <slot></slot>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    name: 'HtDivider',
+    props: {
+      direction: {
+        type: String,
+        default: 'horizontal',
+        validator: function(value) {
+          return ['horizontal', 'vertical'].indexOf(value) !== -1
+        },
+      },
+      contentPosition: {
+        type: String,
+        default: 'center',
+        validator: function(value) {
+          return ['left', 'right', 'center'].indexOf(value) !== -1
+        },
+      },
+      color: {
+        type: String,
+        default: '#dcdfe6',
+      },
+    },
+  }
+</script>

package/packages/Duration/index.js

@@ -0,0 +1,7 @@
+import Duration from './src/main.vue'
+
+Duration.install = function(Vue) {
+  Vue.component(Duration.name, Duration)
+}
+
+export default Duration

package/packages/Duration/src/main.vue

@@ -0,0 +1,180 @@
+<template>
+  <div
+    ref="inputs"
+    :class="[
+      'inputs',
+      'ht-duration',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <ht-input
+      v-model="data.day"
+      type="number"
+      :min="0"
+      :size="size"
+      style="width:90px"
+      :validate="validate"
+      :disabled="disabled"
+      @change="change"
+    ></ht-input>
+    天
+    <ht-select
+      v-model="data.hour"
+      :size="size"
+      style="width:65px"
+      :validate="validate"
+      :options="hours"
+      :disabled="disabled"
+      @change="change"
+    ></ht-select>
+    时
+    <ht-select
+      v-model="data.minute"
+      :size="size"
+      style="width:65px"
+      :validate="validate"
+      :options="minutes"
+      :disabled="disabled"
+      @change="change"
+    ></ht-select>
+    分
+    <ht-select
+      v-if="type == 'second'"
+      v-model="data.second"
+      :size="size"
+      style="width:65px"
+      :validate="validate"
+      :options="minutes"
+      :disabled="disabled"
+      @change="change"
+    ></ht-select>
+    {{ type == 'second' ? '秒' : '' }}
+  </div>
+</template>
+
+<script>
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'HtDuration',
+    mixins: [form],
+    props: {
+      value: {
+        type: [String, Number],
+      },
+      name: {
+        type: String,
+      },
+      size: {
+        type: String,
+        default: 'small',
+      },
+      validate: {
+        type: [String, Object],
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      type: {
+        type: String,
+        default: 'minute',
+        validator: function(value) {
+          return ['minute', 'second'].indexOf(value) !== -1
+        },
+      },
+    },
+    data() {
+      return {
+        hours: [],
+        minutes: [],
+        data: {
+          day: 0,
+          hour: 0,
+          minute: 0,
+          second: 0,
+        },
+      }
+    },
+    watch: {
+      value: function(newVal, oldVal) {
+        if (newVal && newVal != oldVal) {
+          this.initData()
+        }
+        if (!newVal) {
+          this.data = {
+            day: 0,
+            hour: 0,
+            minute: 0,
+            second: 0,
+          }
+        }
+      },
+    },
+    mounted() {
+      for (let i = 0; i <= 23; i++) {
+        this.hours.push({ key: i, value: i + '' })
+      }
+      for (let i = 0; i <= 59; i++) {
+        this.minutes.push({ key: i, value: i + '' })
+      }
+      this.initData()
+    },
+    methods: {
+      initData() {
+        if (this.value && this.type == 'second') {
+          //天数计算
+          this.data.day = parseInt(this.value / (24 * 3600))
+          //小时计算
+          this.data.hour = parseInt((this.value % (24 * 3600)) / 3600)
+          //分钟计算
+          this.data.minute = parseInt((this.value % 3600) / 60)
+          //秒计算
+          this.data.second = this.value % 60
+        }
+        if (this.value && this.type == 'minute') {
+          //天数计算
+          this.data.day = parseInt(this.value / 60 / 24)
+          //小时计算
+          this.data.hour = parseInt((this.value / 60) % 24)
+          //分钟计算
+          this.data.minute = parseInt(this.value % 60)
+        }
+      },
+      change() {
+        let second = 0
+        if (this.data.second) {
+          second += this.data.second
+        }
+
+        if (this.data.minute) {
+          second += this.data.minute * 60
+        }
+        if (this.data.hour) {
+          second += this.data.hour * 60 * 60
+        }
+        if (this.data.day) {
+          second += this.data.day * 24 * 60 * 60
+        }
+        if (this.type == 'minute') {
+          second = second / 60
+        }
+        this.$emit('input', second)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .inputs.ht-form-inputs__inline {
+    width: auto;
+  }
+  .ht-duration.inputs.ht-form-inputs__inline {
+    ::v-deep {
+      .el-input-number {
+        width: 100%;
+      }
+    }
+  }
+</style>

package/packages/Editor/index.js

@@ -0,0 +1,7 @@
+import Editor from './src/main.vue'
+
+Editor.install = function(Vue) {
+  Vue.component(Editor.name, Editor)
+}
+
+export default Editor

package/packages/Editor/src/main.vue

@@ -0,0 +1,320 @@
+<template>
+  <div
+    v-show="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+      disabled ? 'is-disabled' : '',
+    ]"
+    :style="styleEditor"
+  >
+    <input
+      v-if="inputWriteable && !hasTextValue"
+      v-model="value"
+      v-validate="inputValidate"
+      :name="inputName"
+      type="hidden"
+    />
+    <div
+      v-if="inputWriteable && !hasTextValue && type !== 'property-text'"
+      :id="editorId"
+    ></div>
+    <div
+      v-else
+      :style="showBorder ? textDivStyle : {}"
+      :class="{ 'empty-div': type === 'property-text' && !hasTextValue }"
+      v-html="inputVal"
+    ></div>
+    <ht-field-tail :field-name="inputName" :readonly="false" />
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import utils from '@/utils.js'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import { encode, decode } from '@/util/base64'
+
+  export default {
+    name: 'HtEditor',
+    mixins: [inputName, permission, form],
+    props: {
+      value: String,
+      textValue: String,
+      showBorder: {
+        type: Boolean,
+        default: true,
+      },
+      borderColor: {
+        type: String,
+        default: '#ccc',
+      },
+      borderWidth: {
+        type: Number,
+        default: 1,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      config: {
+        type: Object,
+        default: () => {
+          return {}
+        },
+      },
+      encode: {
+        type: Boolean,
+        default: false,
+      },
+      noToolbar: {
+        type: String,
+        default: 'false',
+      },
+      initialFrameWidth: {
+        type: String,
+        default: '',
+      },
+      type: {
+        type: String,
+        default: '',
+      },
+      initialFrameHeight: {
+        type: String,
+        default: '300',
+      },
+      customMenus: {
+        type: Array,
+        default: () => {
+          return [
+            'head',
+            'bold',
+            'fontSize',
+            'fontName',
+            'italic',
+            'underline',
+            'strikeThrough',
+            'indent',
+            'lineHeight',
+            'foreColor',
+            'backColor',
+            'link',
+            'list',
+            'todo',
+            'justify',
+            'quote',
+            'emoticon',
+            'image',
+            'video',
+            'table',
+            'code',
+            'splitLine',
+            'undo',
+            'redo',
+          ]
+        },
+      },
+    },
+    data() {
+      return {
+        editor: null,
+        editorId: `editor_${utils.getName()}`,
+        compiledTextValue: null,
+        formInstance: null,
+      }
+    },
+    computed: {
+      hasTextValue() {
+        return this.textValue != null && this.textValue != undefined
+      },
+      inputVal() {
+        return this.hasTextValue
+          ? this.compiledTextValue
+          : this.getValue(this.value)
+      },
+      textDivStyle() {
+        return {
+          border: `${this.borderWidth}px solid ${decode(this.borderColor)}`,
+          padding: '0 10px',
+        }
+      },
+      styleEditor() {
+        let style = {}
+        if (this.initialFrameWidth) {
+          style = { width: this.initialFrameWidth + 'px' }
+        }
+        return style
+      },
+    },
+    watch: {
+      value: function (newVal) {
+        if (this.editor && newVal) {
+          let text = this.editor.txt.html()
+          if (text !== newVal && encode(text) !== newVal) {
+            this.editor.txt.html(this.getValue(newVal))
+          }
+        }
+      },
+      textValue: {
+        handler: function (newVal) {
+          this.loadCompiledTextValue(newVal)
+        },
+        immediate: true,
+      },
+      permission_sub: function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          // 现在是无权限，需要销毁
+          newVal == 'n' && this.destroyEditor()
+        }
+      },
+      inputWriteable: function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          // 可编辑，渲染
+          if (newVal && !this.hasTextValue) {
+            this.initEditor()
+          }
+          // 不可编辑，销毁
+          if (!newVal || this.hasTextValue) {
+            this.destroyEditor()
+          }
+        }
+      },
+      formInstance: function (newVal, oldVal) {
+        if (!oldVal && newVal && newVal.$on) {
+          newVal.$off('updateData', this.loadCompiledTextValue)
+          newVal.$on('updateData', this.loadCompiledTextValue)
+        }
+      },
+    },
+    mounted() {
+      this.initEditor()
+    },
+    beforeDestroy() {
+      this.formInstance &&
+        this.formInstance.$off &&
+        this.formInstance.$off('updateData', this.loadCompiledTextValue)
+      this.destroyEditor()
+    },
+    methods: {
+      destroyEditor() {
+        if (this.editor) {
+          this.editor.destroy()
+          this.editor = null
+        }
+      },
+      initEditor() {
+        if (!this.$WangEditor) {
+          throw '要使用富文本组件，必须引入wangeditor，并安装插件three-trees-ui/packages/plugins/wangeditor'
+        }
+        if (this.editor || !this.inputWriteable || this.hasTextValue) {
+          return
+        }
+        const that = this
+        this.$nextTick(() => {
+          if (!this.inputWriteable) {
+            return
+          }
+          this.editor = new this.$WangEditor(`#${this.editorId}`)
+          Object.assign(
+            this.editor.config,
+            this.$WangEditorConfig,
+            this.config,
+            {
+              onchange() {
+                that.$emit('change', that.setValue(that.editor.txt.html()))
+                that.$emit('input', that.setValue(that.editor.txt.html()))
+              },
+              onblur(newHtml) {
+                that.$emit('onblur', that.setValue(newHtml))
+              },
+              onfocus(newHtml) {
+                that.$emit('onfocus', that.setValue(newHtml))
+              },
+            }
+          )
+          let menus = [...this.customMenus]
+          if (eval(this.noToolbar)) {
+            menus = []
+          }
+          this.editor.config.zIndex = 0
+          this.editor.config.height = eval(this.initialFrameHeight)
+
+          this.editor.config.menus = menus
+          if (
+            this.editor.config.uploadImgHeaders &&
+            !this.editor.config.uploadImgHeaders.Authorization
+          ) {
+            this.editor.config.uploadImgHeaders.Authorization =
+              this.$requestConfig.getToken()
+          }
+          this.editor.create()
+          if (this.disabled) {
+            this.editor.disable()
+          } else {
+            this.editor.enable()
+          }
+          // 首次赋值
+          this.editor.txt.html(this.inputVal)
+        })
+      },
+      setValue(val) {
+        return this.encode ? encode(val) : val
+      },
+      getValue(val) {
+        return this.encode ? decode(val) : val
+      },
+      loadCompiledTextValue() {
+        if (!this.textValue) {
+          return
+        }
+        this.$nextTick(() => {
+          this.getTextValue(decode(this.textValue)).then((result) => {
+            this.compiledTextValue = result
+          })
+        })
+      },
+      getTextValue(val) {
+        if (this.formInstance == null) {
+          this.formInstance = utils.getOnlineFormInstance(this)
+        }
+        const instance = this.formInstance || this
+        return new Promise((resolve) => {
+          const tempComponent = Vue.extend({
+            data() {
+              return {
+                data: instance.data,
+              }
+            },
+            template: `<div>${val}</div>`,
+          })
+          const component = new tempComponent().$mount()
+          component.$nextTick(() => {
+            resolve(component.$el.innerHTML)
+          })
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div.inputs.ht-form-inputs__inline {
+    width: auto;
+  }
+  input[type='hidden'][aria-invalid='true'] + div[data-we-id] {
+    outline: 1px solid #f56c6c;
+  }
+  .empty-div {
+    height: 32px;
+  }
+  .is-disabled {
+    cursor: not-allowed;
+    ::v-deep {
+      .w-e-text-container {
+        background: #f5f7fa;
+      }
+    }
+  }
+</style>

package/packages/Explain/index.js

@@ -0,0 +1,7 @@
+import Explain from './src/main.vue'
+
+Explain.install = function(Vue) {
+  Vue.component(Explain.name, Explain)
+}
+
+export default Explain

package/packages/Explain/src/main.vue

@@ -0,0 +1,126 @@
+<template>
+  <!-- 说明控件 -->
+  <div v-if="permission != 'n'" class="ht-explain" :style="textStyle">
+    <div
+      v-if="isLabelShow"
+      class="ht-explain_label"
+      :style="{ width: labelWidth }"
+    >
+      <slot name="tip"></slot>
+      <span class="label">说明:</span>
+    </div>
+    <div class="ht-explain_content" v-html="compiledTextValue"></div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import utils from '@/utils.js'
+  import { decode } from '@/util/base64'
+  import permission from '@/mixins/permission.js'
+  export default {
+    name: 'HtExplain',
+    mixins: [permission],
+    props: {
+      textValue: String,
+      marginTop: String,
+      marginBottom: String,
+      isLabelShow: {
+        type: Boolean,
+        default: false,
+      },
+      labelWidth: {
+        type: String,
+        default: '120px',
+      },
+      fontColor: {
+        type: String,
+        default: '#333333',
+      },
+    },
+    data() {
+      return {
+        formInstance: null,
+        compiledTextValue: null,
+      }
+    },
+    computed: {
+      textStyle() {
+        return {
+          marginTop: this.marginTop,
+          marginBottom: this.marginBottom,
+          color: this.fontColor,
+        }
+      },
+    },
+    watch: {
+      textValue: {
+        handler: function(newVal) {
+          this.loadCompiledTextValue(newVal)
+        },
+        immediate: true,
+      },
+      formInstance: function(newVal, oldVal) {
+        if (!oldVal && newVal && newVal.$on) {
+          newVal.$off('updateData', this.loadCompiledTextValue)
+          newVal.$on('updateData', this.loadCompiledTextValue)
+        }
+      },
+    },
+    beforeDestroy() {
+      this.formInstance &&
+        this.formInstance.$off &&
+        this.formInstance.$off('updateData', this.loadCompiledTextValue)
+    },
+    methods: {
+      loadCompiledTextValue() {
+        if (!this.textValue) {
+          return
+        }
+        this.$nextTick(() => {
+          this.getTextValue(decode(this.textValue)).then((result) => {
+            this.compiledTextValue = result
+          })
+        })
+      },
+      getTextValue(val) {
+        if (this.formInstance == null) {
+          this.formInstance = utils.getOnlineFormInstance(this)
+        }
+        const instance = this.formInstance || this
+        return new Promise((resolve) => {
+          const tempComponent = Vue.extend({
+            data() {
+              return {
+                data: instance.data,
+              }
+            },
+            template: `<div>${val}</div>`,
+          })
+          const component = new tempComponent().$mount()
+          component.$nextTick(() => {
+            resolve(component.$el.innerHTML)
+          })
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .ht-explain {
+    display: flex;
+    align-items: baseline;
+    .ht-explain_label {
+      text-align: right;
+      font-size: 14px;
+      .label {
+        padding-right: 12px;
+      }
+    }
+    .ht-explain_content {
+      flex: 1;
+      ::v-deep p {
+        margin: 0;
+      }
+    }
+  }
+</style>

package/packages/FieldTail/index.js

@@ -0,0 +1,7 @@
+import FieldTail from './src/main.vue'
+
+FieldTail.install = function(Vue) {
+  Vue.component(FieldTail.name, FieldTail)
+}
+
+export default FieldTail