swordpass-ui 1.0.0

package/packages/Duration/src/main.vue

@@ -0,0 +1,172 @@
+<template>
+  <div
+    ref="inputs"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <cl-input
+      v-model="data.day"
+      type="number"
+      :min="0"
+      :size="size"
+      style="width:90px"
+      :validate="validate"
+      :disabled="disabled"
+      @change="change"
+    ></cl-input>
+    天
+    <cl-select
+      v-model="data.hour"
+      :size="size"
+      style="width:65px"
+      :validate="validate"
+      :options="hours"
+      :disabled="disabled"
+      @change="change"
+    ></cl-select>
+    时
+    <cl-select
+      v-model="data.minute"
+      :size="size"
+      style="width:65px"
+      :validate="validate"
+      :options="minutes"
+      :disabled="disabled"
+      @change="change"
+    ></cl-select>
+    分
+    <cl-select
+      v-if="type == 'second'"
+      v-model="data.second"
+      :size="size"
+      style="width:65px"
+      :validate="validate"
+      :options="minutes"
+      :disabled="disabled"
+      @change="change"
+    ></cl-select>
+    {{ type == 'second' ? '秒' : '' }}
+  </div>
+</template>
+
+<script>
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'ClDuration',
+    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.cl-form-inputs__inline {
+    width: auto;
+  }
+</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,280 @@
+<template>
+  <div
+    v-show="permission_sub != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+    :style="styleEditor"
+  >
+    <input
+      v-if="inputWriteable && !hasTextValue"
+      v-model="value"
+      v-validate="inputValidate"
+      :name="inputName"
+      type="hidden"
+    />
+    <div v-if="inputWriteable && !hasTextValue" :id="editorId"></div>
+    <div v-else :style="showBorder ? textDivStyle : {}" v-html="inputVal"></div>
+    <cl-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: 'ClEditor',
+    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: '',
+      },
+      initialFrameHeight: {
+        type: String,
+        default: '300',
+      },
+    },
+    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，并安装插件sword-vue-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 = [
+            'head',
+            'bold',
+            'fontSize',
+            'fontName',
+            'italic',
+            'underline',
+            'strikeThrough',
+            'indent',
+            'lineHeight',
+            'foreColor',
+            'backColor',
+            'link',
+            'list',
+            'todo',
+            'justify',
+            'quote',
+            'emoticon',
+            'image',
+            'video',
+            'table',
+            'code',
+            'splitLine',
+            'undo',
+            'redo',
+          ]
+          if (eval(this.noToolbar)) {
+            menus = []
+          }
+          this.editor.config.zIndex = 0
+          this.editor.config.height = eval(this.initialFrameHeight)
+
+          this.editor.config.menus = menus
+
+          this.editor.create()
+
+          // 首次赋值
+          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.cl-form-inputs__inline {
+    width: auto;
+  }
+  input[type='hidden'][aria-invalid='true'] + div[data-we-id] {
+    outline: 1px solid #f56c6c;
+  }
+</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,55 @@
+<template>
+  <!-- 说明控件 -->
+  <div class="cl-explain" :style="textStyle" v-if="permission_sub != 'n'">
+    <div v-if="isLabelShow" class="cl-explain_label">说明：</div>
+    <div class="cl-explain_content" v-html="htmlValue"></div>
+  </div>
+</template>
+<script>
+  import { decode } from '@/util/base64'
+  import permission from '@/mixins/permission.js'
+  export default {
+    name: 'ClExplain',
+    mixins: [permission],
+    props: {
+      textValue: String,
+      marginTop: String,
+      marginBottom: String,
+      isLabelShow: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    computed: {
+      htmlValue() {
+        if (!this.textValue) {
+          return ''
+        }
+        return decode(this.textValue)
+      },
+      textStyle() {
+        return {
+          marginTop: this.marginTop,
+          marginBottom: this.marginBottom,
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .cl-explain {
+    display: flex;
+    align-items: baseline;
+    .cl-explain_label {
+      width: 60px;
+      text-align: right;
+      font-size: 14px;
+    }
+    .cl-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

package/packages/FieldTail/src/main.vue

@@ -0,0 +1,163 @@
+<template>
+  <span class="field-tail__wrap">
+    <small v-if="hasErrors" class="el-form-item__error">
+      {{ errorMessage }}
+    </small>
+    <div v-if="readonly && tagFormatValue.length == 0" class="field-tail">
+      <div v-if="isReadonlyTextarea">
+        <div v-for="(item, index) in formatInputValue" :key="index">
+          <p v-if="item" class="readonly_p">
+            <slot name="prefix" class="el-input-group__append"></slot>
+            <slot name="suffix" class="el-input-group__append"></slot>
+            <slot name="prepend" class="el-input-group__append"></slot>
+            {{ item }}
+            <slot name="append" class="el-input-group__append"></slot>
+          </p>
+          <br v-else />
+        </div>
+      </div>
+      <el-input
+        v-else-if="$readonlyInput"
+        v-model="inputValue"
+        disabled
+      ></el-input>
+      <span v-else class="test">
+        <slot name="prefix" class="el-input-group__append"></slot>
+        <slot name="suffix" class="el-input-group__append"></slot>
+        <slot name="prepend" class="el-input-group__append"></slot>
+        {{ inputValue }}
+        <template v-if="company">{{ company }}</template>
+        <slot name="append" class="el-input-group__append"></slot>
+      </span>
+    </div>
+    <template
+      v-if="
+        readonly &&
+          tagFormatValue.constructor == Array &&
+          tagFormatValue.length > 0
+      "
+    >
+      <template v-for="(label, index) in tagFormatValue">
+        <el-tooltip
+          :key="index"
+          class="tooltip-item"
+          effect="dark"
+          :content="label"
+          placement="top-start"
+        >
+          <el-tag class="field-tail-tag">
+            {{ label }}
+          </el-tag>
+        </el-tooltip>
+      </template>
+    </template>
+  </span>
+</template>
+<script>
+  import utils from '@/utils.js'
+
+  export default {
+    name: 'ClFieldTail',
+    props: {
+      fieldName: {
+        type: String,
+        required: true,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      inputValue: {
+        type: [String, Number, Object, Array, Boolean],
+      },
+      tagFormatValue: {
+        type: [Array],
+        default() {
+          return []
+        },
+      },
+      writeable: {
+        type: Boolean,
+        default: true,
+      },
+      company: String,
+    },
+    data() {
+      return {
+        scopeName: null,
+      }
+    },
+    computed: {
+      fieldScopePath: function() {
+        let path = this.fieldName
+        if (this.scopeName) {
+          path = `${this.scopeName}.${this.fieldName}`
+        }
+        return path
+      },
+      hasErrors: function() {
+        return this.errors && this.errors.has(this.fieldScopePath)
+      },
+      errorMessage: function() {
+        return this.errors.first(this.fieldScopePath)
+      },
+      formatInputValue() {
+        let value = []
+        if (this.readonly && typeof this.inputValue === 'string') {
+          if (this.inputValue.includes('↵')) {
+            value = this.inputValue.split('↵')
+          } else if (this.inputValue.includes('\n')) {
+            value = this.inputValue.split('\n')
+          } else {
+            value = [this.inputValue]
+          }
+        }
+        return value
+      },
+      isReadonlyTextarea() {
+        return typeof this.inputValue === 'string'
+          ? this.inputValue.includes('↵') || this.inputValue.includes('\n')
+          : false
+      },
+    },
+    mounted() {
+      this.scopeName = utils.getSomeAttributeFromParentElement(
+        this.$el.parentElement,
+        'data-vv-scope'
+      )
+      const { subScopeEl } = utils.getSubScopeElAndIndex(this.$el.parentElement)
+      if (
+        subScopeEl &&
+        (subScopeEl.getAttribute('row_readonly') == 'true' ||
+          subScopeEl.getAttribute('row_readonly') === true)
+      ) {
+        this.$emit('update:writeable', false)
+      }
+    },
+    created() {
+      this.$validator = this.$root.$validator
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .field-tail {
+    display: block;
+    word-break: break-all;
+    word-wrap: break-word;
+  }
+  .el-tag + .el-tag {
+    margin-left: 5px;
+  }
+  td .el-form-item__error,
+  th .el-form-item__error {
+    transform: scale(0.9);
+  }
+  td .el-form-item__error,
+  th .el-form-item__error {
+    top: calc(100% - 3px);
+  }
+  .readonly_p {
+    margin: 0;
+  }
+</style>

package/packages/File/index.js

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