three-trees-ui 1.0.0

package/packages/QuerySqlPreview/src/QuerySqlPreview.vue

@@ -0,0 +1,163 @@
+<template>
+  <div name="online-form" class="data-preview-container">
+    <el-row class="top-title__row">
+      <h3 class="top-title">{{ queryView.name ? queryView.name : '' }}</h3>
+    </el-row>
+    <template v-if="html">
+      <ht-querysql-runtime-template
+        :sql-alias="sqlAlias"
+        :alias="alias"
+        :single="single"
+        :query-view="queryView"
+        class="data-preview-wrap"
+      />
+    </template>
+    <div v-if="loadedFail" class="loaded-fail__div">
+      {{ alias }}视图不存在...
+    </div>
+  </div>
+</template>
+<script>
+  import Vue from 'vue'
+  import querySqlPreview from '@/mixins/querySqlPreview.js'
+  export default {
+    name: 'HtQuerySqlPreview',
+    props: {
+      viewId: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        queryView: {},
+        displayFields: [],
+        html: '',
+        alarmSettingMap: {},
+        summaryTypeMap: {},
+        loadedFail: false,
+        sqlAlias: '',
+        alias: '',
+      }
+    },
+    watch: {
+      viewId: function(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      },
+    },
+    created() {
+      this.init()
+    },
+    methods: {
+      // 根据当前formKey初始化
+      init() {
+        let _me = this
+        this.$requestConfig
+          .getQuerySqlView(this.viewId)
+          .then((result) => {
+            if (result) {
+              _me.queryView = result
+              _me.sqlAlias = result.sqlAlias
+              _me.alias = result.alias
+              _me.html = result.template
+              this.customInit()
+            } else {
+              this.loadedFail = true
+            }
+          })
+          .finally(() => {})
+      },
+      customInit() {
+        Vue.component('ht-querysql-runtime-template', {
+          mixins: [querySqlPreview],
+          props: {
+            single: String,
+            sqlAlias: String,
+            alias: String,
+            queryView: Object,
+          },
+          data() {
+            return {}
+          },
+          template: this.html,
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  >>> th.todo-header-row {
+    background-color: #fafafa;
+    font-size: 13px;
+  }
+
+  >>> tr.todo-row {
+    font-size: 13px;
+  }
+
+  .el-container {
+    background-color: #fff;
+  }
+
+  .top-title__row {
+    width: 100%;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    .top-title {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 0 20px;
+      font-size: 14px;
+      // border-bottom: 1px solid #ccc;
+    }
+  }
+  .data-preview-container {
+    height: 100%;
+    .data-preview-wrap {
+      height: calc(100% - 30px);
+    }
+  }
+
+  .el-header {
+    border-bottom: 1.5px solid #ededed;
+  }
+
+  .i {
+    margin-right: 4px;
+  }
+
+  .todo-subject {
+    cursor: pointer;
+  }
+
+  .todo-subject:hover {
+  }
+
+  >>> .el-dialog__body {
+    padding: 15px 10px;
+  }
+
+  >>> .el-checkbox {
+    // margin-left: 15px;
+  }
+
+  >>> .el-radio {
+    margin-left: 15px;
+  }
+
+  >>> .el-button {
+    margin-left: 0px;
+  }
+  .loaded-fail__div {
+    text-align: center;
+    font-size: 14px;
+    font-weight: bold;
+    color: #f56c6c;
+  }
+</style>

package/packages/Radio/index.js

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

package/packages/Radio/src/main.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-radio-group
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :size="inputSize"
+      :name="inputName"
+      :style="styles"
+      @change="change"
+    >
+      <el-radio
+        v-for="item in optionsVal"
+        :key="item[propKey]"
+        :class="{
+          'el-radio-vertical': optionLayout == 'vertical',
+          'el-radio-horizontal': optionLayout == 'horizontal',
+        }"
+        :label="item[propKey]"
+        :disabled="readonly || disabled || item.disabled"
+      >
+        {{ item[propValue] }}
+      </el-radio>
+    </el-radio-group>
+    <ht-field-tail
+      v-if="permission != 'n'"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="formatValue || inputVal"
+    />
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import HtFieldTail from '../../FieldTail/index'
+  import permission from '@/mixins/permission.js'
+  import linkage from '@/mixins/linkage.js'
+  import inputName from '@/mixins/inputName.js'
+  import ganged from '@/mixins/ganged.js'
+  import form from '@/mixins/form.js'
+  import formDataUpdate from '@/mixins/formDataUpdate.js'
+
+  export default {
+    name: 'HtRadio',
+    components: {
+      HtFieldTail,
+    },
+    mixins: [permission, inputName, linkage, ganged, form, formDataUpdate],
+    props: {
+      value: [String, Number, Boolean],
+      options: Array,
+      optionLayout: {
+        type: String,
+        default: 'horizontal',
+        validator: function(value) {
+          return ['horizontal', 'vertical'].some((i) => i == value)
+        },
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      rdlist: String,
+      styles: Object,
+    },
+    data() {
+      return {
+        formatValue: '',
+        optionsVal: [],
+      }
+    },
+    computed: {
+      inputVal: {
+        get: function() {
+          if (utils.isEmpty(this.value)) {
+            return ''
+          }
+          if (
+            this.value !== null &&
+            this.value !== undefined &&
+            !this.inputWriteable &&
+            this.optionsVal &&
+            this.optionsVal.length > 0
+          ) {
+            // eslint-disable-next-line
+            this.formatValue = this.optionsVal.find(
+              // eslint-disable-next-line
+              (opt) => opt[this.propKey] == this.value
+            ).value
+          }
+          return this.value
+        },
+        set: function(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    watch: {
+      options() {
+        this.loadOption()
+      },
+    },
+    created() {
+      this.$on('formDataUpdate', () => {
+        this.loadOption()
+      })
+    },
+    mounted() {
+      this.$nextTick(() => {
+        this.loadOption()
+      })
+    },
+    methods: {
+      change(radioLabel) {
+        this.$emit('change', radioLabel)
+      },
+      //加载选项
+      loadOption() {
+        // 动态选项
+        if (this.ganged && this.ganged.alias) {
+          this.dynamicLoadOption()
+        } else {
+          // 静态选项
+          this.optionsVal = this.rdlist
+            ? JSON.parse(this.rdlist)
+            : this.options
+            ? this.options
+            : []
+        }
+      },
+      // 动态加载选项
+      dynamicLoadOption() {
+        this.doCustomQuery(null, true).then((data) => {
+          if (data != null || data != undefined) {
+            this.optionsVal = data
+          }
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  label.el-radio-horizontal {
+    margin: 0px 30px 5px 0;
+  }
+
+  label.el-radio-vertical {
+    display: block;
+  }
+
+  label.el-radio-vertical ~ label.el-radio-vertical {
+    margin-top: 10px;
+    margin-left: 0px;
+  }
+
+  .el-radio-group {
+    line-height: 14px;
+  }
+
+  div.el-radio-group[aria-invalid='true'] {
+    outline: 1px solid #f56c6c;
+  }
+</style>

package/packages/Rate/index.js

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

package/packages/Rate/src/main.vue

@@ -0,0 +1,141 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <!-- 校验 -->
+    <input
+      v-model="value"
+      v-validate="inputValidate"
+      type="hidden"
+      :name="inputName"
+    />
+    <el-rate
+      v-model="inputVal"
+      :max="max"
+      :allow-half="allowHalf"
+      :show-score="showScore || !inputWriteable"
+      :text-color="textColor"
+      :disabled="!inputWriteable"
+      :icon-classes="iconClasses"
+      :void-icon-class="iconClass"
+      :disabled-void-icon-class="iconClass"
+      :colors="activeColors"
+    ></el-rate>
+    <span v-if="showScore" class="core">分</span>
+    <ht-field-tail
+      :writeable.sync="inputWriteable"
+      :field-name="inputName"
+      :input-value="value"
+      class="ht-rate-field-tail"
+    />
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'HtRate',
+    mixins: [permission, inputName, form],
+    props: {
+      value: [Number, String],
+      allowHalf: {
+        type: Boolean,
+        default: false,
+      },
+      max: {
+        type: Number,
+        default: 5,
+      },
+      defaultValue: {
+        type: Number,
+        default: 5,
+      },
+      showScore: {
+        type: Boolean,
+        default: false,
+      },
+      textColor: {
+        type: String,
+        default: '#1F2D3D',
+      },
+      iconClass: {
+        type: String,
+        default: 'el-icon-star-off',
+      },
+      activeColor: {
+        type: String,
+        default: '#F7BA2A',
+      },
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (
+            this.value !== null &&
+            this.value !== undefined &&
+            this.value.constructor == String
+          ) {
+            if (this.value.trim() == '') {
+              return 0
+            }
+            const valueNum = Number(this.value)
+            if (isNaN(valueNum)) {
+              throw `HtRate组件的值必须是数字或值为数字的字符串。`
+            }
+            return valueNum
+          }
+          return this.value
+        },
+        set(val) {
+          this.$emit('input', val === 0 ? '' : val)
+        },
+      },
+      iconClasses() {
+        console.log(this.iconClass, 'iconClass')
+        let defaultClass =
+          this.iconClass === 'el-icon-star-off'
+            ? 'el-icon-star-on'
+            : this.iconClass
+        return [defaultClass, defaultClass, defaultClass]
+      },
+      activeColors() {
+        return [this.activeColor, this.activeColor, this.activeColor]
+      },
+    },
+    mounted() {
+      if (!this.value) {
+        this.inputVal = this.defaultValue
+      }
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .ht-rate-field-tail {
+    position: absolute;
+    top: 35px;
+    width: 100%;
+  }
+  input[type='hidden'][aria-invalid='true'] + .el-rate {
+    outline: 1px solid #f56c6c;
+  }
+  ::v-deep .el-rate {
+    display: inline-block;
+    .el-icon-star-on {
+      color: #eead3e !important;
+    }
+  }
+  .core {
+    display: inline-block;
+    font-size: 12px;
+    margin-left: 2px;
+    vertical-align: middle;
+  }
+</style>

package/packages/ReadonlyInput/index.js

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

package/packages/ReadonlyInput/src/main.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-input
+      v-show="roInputDisplayMode == 'input'"
+      v-model="inputVal"
+      :type="type"
+      :size="inputSize"
+      :name="inputName"
+      :autosize="{ minRows: 1, maxRows: 4 }"
+      :style="styles"
+      readonly
+    ></el-input>
+    <el-input
+      v-show="roInputDisplayMode == 'text'"
+      v-model="inputVal"
+      :type="type"
+      :size="inputSize"
+      :name="inputName"
+      :autosize="{ minRows: 1, maxRows: 4 }"
+      :style="styles"
+      readonly
+      v-html="inputVal"
+    ></el-input>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import script from '@/mixins/script.js'
+  import permission from '@/mixins/permission.js'
+
+  export default {
+    name: 'HtReadonlyInput',
+    mixins: [inputName, permission, form, script],
+    props: {
+      value: [String, Number],
+      type: {
+        type: String,
+        default: 'text',
+        validator(val) {
+          return ['text', 'textarea'].includes(val)
+        },
+      },
+      styles: {
+        type: Object,
+      },
+    },
+    data() {
+      return {
+        roInputDisplayMode: 'input',
+      }
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (utils.isEmpty(this.value)) {
+            return ''
+          }
+          return this.value
+        },
+        set(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    created() {
+      this.roInputDisplayMode = 'input'
+      this.$on('formExtend:update', (formExtend) => {
+        this.roInputDisplayMode = formExtend.roInputDisplayMode || 'input'
+      })
+    },
+    mounted() {
+      if (this.value != null && this.value != undefined) {
+        this.inputVal = this.value
+      }
+      const result = this.evilJS()
+
+      if (result != null && result != undefined) {
+        this.inputVal = result
+      }
+    },
+  }
+</script>

package/packages/RelevantFlow/index.js

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