three-trees-ui 1.0.0

package/packages/RoleSelectorInput/src/main.vue

@@ -0,0 +1,166 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <ht-role-selector
+      v-model="value"
+      :title="title"
+      :form-inputs-display="formInputsDisplay"
+      :validate="validate"
+      select-label="name"
+      :placeholder="placeholder"
+      :permission="permission_sub"
+      :single="single"
+      :config="config"
+      :name="inputName"
+      :data="data"
+      :pagination="pagination"
+      :append-to-body="appendToBody"
+      :quick-search-props="quickSearchProps"
+      :mode="mode"
+      @valueChange="valueChange"
+      @change="handleChange"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+    ></ht-role-selector>
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import mobileMode from '@/mixins/mobileMode.js'
+
+  export default {
+    name: 'HtRoleSelectorInput',
+    mixins: [permission, inputName, form, mobileMode],
+    props: {
+      value: String,
+      single: Boolean,
+      config: Object,
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: '选择角色',
+      },
+      pageSize: {
+        type: Number,
+        default: 20,
+      },
+      quickSearchProps: {
+        type: String,
+        default: 'name,code',
+      },
+    },
+    data() {
+      return {
+        data: [],
+        mode: 'search', // 搜索模式
+        searchWord: null,
+        pagination: {
+          page: 1,
+          pageSize: this.pageSize,
+          total: 0,
+          showTotal: true,
+        },
+      }
+    },
+    mounted() {
+      if (!this.data || this.data.length == 0) {
+        this.handleLoad()
+      }
+    },
+    methods: {
+      getQueryFilter(page) {
+        const queryFilter = {
+          querys: [],
+          pageBean: this.getPageBean(page),
+        }
+
+        if (
+          this.quickSearchProps &&
+          this.quickSearchProps.constructor == String &&
+          this.searchWord
+        ) {
+          const props = this.quickSearchProps.split(',')
+          props.forEach((item) => {
+            let query = {
+              property: item,
+              value: this.searchWord,
+              group: 'main',
+              operation: 'LIKE',
+              relation: 'OR',
+            }
+            queryFilter.querys.push(query)
+          })
+        }
+        return queryFilter
+      },
+      handleLoad(page) {
+        const param = this.getQueryFilter(page)
+        this.data = this.data || []
+        this.loadAllRole(param)
+      },
+      // 加载全部角色
+      loadAllRole(param) {
+        this.$requestConfig.getRoleList(param).then((data) => {
+          const { rows, page, pageSize, total } = data
+          if (this.isMobile && page > 1) {
+            this.data = this.data.concat(rows)
+          } else {
+            this.data = rows
+          }
+          const paginationResult = { page, pageSize, total }
+          this.$set(this, 'pagination', paginationResult)
+        })
+      },
+      valueChange(value) {
+        this.$emit('input', value)
+      },
+      handleChange(data) {
+        this.$emit('change', data)
+      },
+      handleSearch(word) {
+        if (!word || !word.trim()) {
+          this.handleReset()
+          return
+        }
+        // 存储搜索关键词
+        this.searchWord = word
+        // 进入搜索模式
+        this.mode = 'search'
+        this.handleLoad()
+      },
+      handleReset() {
+        // 置空搜索关键词
+        this.searchWord = null
+        // 退出搜索模式
+        this.mode = 'search'
+        this.handleLoad()
+      },
+      handlePageChange(page) {
+        // 搜索模式下或者未进行过滤时，查询所有数据
+        this.handleLoad(page)
+      },
+      // 获取查询参数中的分页信息(不传page时默认查询第一页)
+      getPageBean(page) {
+        const pageBean = { ...this.pagination }
+        delete pageBean['total']
+        pageBean.page = page || 1
+        return pageBean
+      },
+    },
+  }
+</script>

package/packages/SaveButton/index.js

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

package/packages/SaveButton/src/main.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-button
+    :type="type"
+    :loading="loading"
+    :disabled="disabled"
+    :icon="icon"
+    @click="preSubmitData"
+  >
+    <slot></slot>
+  </el-button>
+</template>
+
+<script>
+  export default {
+    name: 'HtSaveButton',
+    props: {
+      isSubmit: {
+        type: Boolean,
+        default: true,
+      },
+      type: {
+        type: String,
+        default: 'primary',
+      },
+      scopeName: {
+        type: String,
+        required: true,
+      },
+      loading: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      icon: String,
+    },
+    data() {
+      return {}
+    },
+    mounted() {
+      this.$validator = this.$root.$validator
+    },
+    methods: {
+      preSubmitData() {
+        this.$validator.validateAll(this.scopeName).then((result) => {
+          if (result) {
+            this.submitData()
+          } else {
+            let arr = this.$validator.errors.items.filter(
+              (item) => item.scope == this.scopeName
+            )
+            let errorLength = arr.length
+            this.$message({
+              showClose: true,
+              message: `有${errorLength}个字段未通过校验，请正确填写表单内容。`,
+              type: 'warning',
+            })
+          }
+        })
+      },
+      async submitData() {
+        // 表单数据 model  是否提交  true 提交 false 不提交
+        await this.$emit('before-save-data')
+
+        if (this.isSubmit) {
+          this.$emit('request-save-data')
+        }
+      },
+    },
+  }
+</script>

package/packages/Select/index.js

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

package/packages/Select/src/main.vue

@@ -0,0 +1,376 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-select
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      style="width: 100%"
+      :name="inputName"
+      :size="inputSize"
+      :clearable="clearable"
+      :disabled="readonly || disabled"
+      :placeholder="placeholder"
+      :filterable="filterable"
+      :allow-create="allowCreate"
+      :multiple="multiple"
+      :multiple-limit="limitCount"
+      :collapse-tags="collapseTags"
+      :popper-class="popperClass"
+      @change="change"
+      @visible-change="visibleChange"
+      @remove-tag="removeTag"
+      @clear="handleClear"
+      @blur="handleBlur"
+      @focus="handleFocus"
+    >
+      <slot
+        v-if="
+          optionsAry && optionsAry.constructor == Array && optionsAry.length > 0
+        "
+        :options="optionsAry"
+        :prop-key="propKey"
+        :prop-value="propValue"
+      >
+        <el-option
+          v-for="item in optionsAry"
+          :key="item[propKey]"
+          :label="item[propValue]"
+          :value="item[propKey]"
+        ></el-option>
+      </slot>
+    </el-select>
+    <ht-field-tail
+      :writeable.sync="writeable"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputVal"
+      :tag-format-value="tagFormatValue"
+    />
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import deepmerge from 'deepmerge'
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import linkage from '@/mixins/linkage.js'
+  import ganged from '@/mixins/ganged.js'
+  import form from '@/mixins/form.js'
+  import formDataUpdate from '@/mixins/formDataUpdate.js'
+
+  export default {
+    name: 'HtSelect',
+    mixins: [permission, inputName, linkage, ganged, form, formDataUpdate],
+    props: {
+      value: [String, Number, Boolean, Array],
+      options: Array,
+      selectlist: Array,
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+      clearable: {
+        type: Boolean,
+        default: true,
+      },
+      filterable: {
+        type: Boolean,
+        default: false,
+      },
+      allowCreate: {
+        type: Boolean,
+        default: false,
+      },
+      remoteMethod: Function,
+      remote: {
+        type: Boolean,
+        default: false,
+      },
+      relatedQuery: {
+        type: Array,
+        default: function() {
+          return []
+        },
+      },
+      limitCount: {
+        type: Number,
+        default: 0,
+      },
+      collapseTags: {
+        type: Boolean,
+        default: false,
+      },
+      popperClass: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        optionsAry: [],
+        tagFormatValue: [],
+        queryVersion: 0,
+      }
+    },
+    computed: {
+      inputVal: {
+        get() {
+          if (utils.isEmpty(this.value)) {
+            return ''
+          }
+          this.relatedQueryLoad() // 触发绑定的关联查询
+          if (this.value.constructor == String) {
+            const ary = this.value === '' ? [] : this.value.split(',')
+            if (this.inputWriteable) {
+              if (this.multiple) {
+                return ary
+              } else {
+                return this.value
+              }
+            } else {
+              // 只读 多选
+              if (this.multiple) {
+                const ary = this.value === '' ? [] : this.value.split(',')
+                let optionVals = []
+                let tempAry = deepmerge([], ary, { clone: true })
+                ary.forEach((m) => {
+                  this.optionsAry.find((opt) => {
+                    if (opt[this.propKey] === m) {
+                      optionVals.push(opt[this.propValue])
+                      tempAry.remove(m)
+                    }
+                    if (opt.children && opt.children.length > 0) {
+                      opt.children.find((childOpt) => {
+                        if (childOpt[this.propKey] === m) {
+                          optionVals.push(childOpt[this.propValue])
+                          tempAry.remove(m)
+                        }
+                      })
+                    }
+                  })
+                })
+                optionVals = optionVals.concat(tempAry)
+                this.tagFormatValue = optionVals // eslint-disable-line
+                return ary
+              }
+              if (this.optionsAry && this.optionsAry.length > 0) {
+                let optionVals = []
+                let tempAry = deepmerge([], ary, { clone: true })
+                ary.forEach((m) => {
+                  this.optionsAry.find((opt) => {
+                    if (opt[this.propKey] === m) {
+                      optionVals.push(opt[this.propValue])
+                      tempAry.remove(m)
+                    }
+                    if (opt.children && opt.children.length > 0) {
+                      opt.children.find((childOpt) => {
+                        if (childOpt[this.propKey] === m) {
+                          optionVals.push(childOpt[this.propValue])
+                          tempAry.remove(m)
+                        }
+                      })
+                    }
+                  })
+                })
+                optionVals = optionVals.concat(tempAry)
+                this.tagFormatValue = optionVals // eslint-disable-line
+                return this.value
+              }
+            }
+          }
+          return this.value
+        },
+        set(val) {
+          let result = ''
+          if (this.multiple) {
+            if (val && val.constructor === Array && val.length > 0) {
+              if (val[0].constructor === Number) {
+                throw '多选不支持数字类型'
+              }
+              result = val.join(',')
+            }
+          } else {
+            result = val
+          }
+          if (result != '') {
+            this.relatedQueryLoad() // 触发绑定的关联查询
+          }
+          this.$emit('input', result)
+        },
+      },
+    },
+    watch: {
+      options: function() {
+        this.loadOption()
+      },
+    },
+    created() {
+      this.$on('formDataUpdate', () => {
+        this.loadOption(true)
+      })
+    },
+    mounted() {
+      this.loadOption(false, 'init')
+    },
+    methods: {
+      //加载选项
+      loadOption: function(resetValue, isInit = '') {
+        // 动态选项
+        if (this.ganged && this.ganged.alias) {
+          // 如果初始化时不需加载选择时
+          if (isInit === 'init' && this.ganged.noInit === 'true') {
+            return
+          }
+          this.dynamicLoadOption(resetValue)
+        } else {
+          // 静态选项
+          this.optionsAry = this.selectlist
+            ? this.selectlist
+            : this.options
+            ? this.options
+            : []
+        }
+      },
+      // 动态加载选项
+      dynamicLoadOption(resetValue) {
+        this.queryVersion += 1
+        let versionFlag = this.queryVersion
+        this.doCustomQuery(null, true).then((data) => {
+          // 如果同一个动态加载项，同时出发多次时，后面的请求会被拦截，所以此处需要将标识减1
+          if (data === null) {
+            this.queryVersion -= 1
+          }
+          if (versionFlag < this.queryVersion) {
+            return
+          }
+          if (data != null || data != undefined) {
+            // 之前的选项是否是空的
+            const preOptionsAryIsEmpty =
+              !this.optionsAry || this.optionsAry.length == 0
+            // 动态选项是否相同
+            const optionsAryEquals = utils.arrayEquals(data, this.optionsAry)
+            this.optionsAry = data
+            // 选项中是否包含旧值
+            const isIncludeOldVal = this.checkValue(data)
+            if (
+              resetValue &&
+              this.inputWriteable &&
+              !preOptionsAryIsEmpty &&
+              !optionsAryEquals &&
+              !isIncludeOldVal
+            ) {
+              this.$nextTick(() => {
+                this.$emit('input', '')
+              })
+            }
+          }
+        })
+      },
+      change: function(data) {
+        let selectObj = this.optionsAry.find(
+          (opt) => opt[this.propKey] === data
+        )
+        this.$emit('change', data, selectObj)
+      },
+      visibleChange: function(m) {
+        this.$emit('visible-change', m)
+      },
+      removeTag: function(tag) {
+        this.$emit('remove-tag', tag)
+      },
+      handleClear: function() {
+        this.$emit('clear')
+      },
+      handleBlur: function(event) {
+        this.$emit('blur', event)
+      },
+      handleFocus: function(event) {
+        this.$emit('focus', event)
+        if (
+          this.ganged &&
+          this.ganged.alias &&
+          this.ganged.noInit === 'true' &&
+          !this.optionsAry.length
+        ) {
+          this.dynamicLoadOption()
+        }
+      },
+      // 准备查询参数
+      prepareLoadParams: function(condition) {
+        let params = {}
+        if (condition && !utils.isEmpty(condition)) {
+          // 获取当前控件是否在子表某行中
+          let { index } = utils.getSubScopeElAndIndex(this.$el)
+          if (this.$el) {
+            const pInst = utils.getOnlineFormInstance(this)
+            Object.keys(condition).forEach((k) => {
+              let val = null
+              // 主表
+              if (index == null) {
+                val = utils.getValueByPath(pInst, condition[k])
+              }
+              // 子表
+              else {
+                val = utils.getValueByPath(pInst, condition[k], index)
+              }
+              if (!utils.isEmpty(val)) {
+                params[k] = val
+              }
+            })
+          }
+        }
+        return params
+      },
+      // 触发绑定的关联查询
+      relatedQueryLoad: function() {
+        if (
+          this.relatedQuery &&
+          this.relatedQuery.constructor == Array &&
+          this.relatedQuery.length > 0
+        ) {
+          const pInst = utils.getOnlineFormInstance(this)
+          // 遍历所有的关联查询，逐个触发
+          this.relatedQuery.forEach((q) => {
+            const params = this.prepareLoadParams(q.condition)
+            pInst.$emit('related-query:load', q.alias, params, q.result)
+          })
+        }
+      },
+      // 判断当前选项是否包含value值
+      checkValue(data) {
+        let flag = false
+        data.forEach((item) => {
+          if (this.value.split(',').includes(item[this.propKey])) {
+            flag = true
+          }
+        })
+        return flag
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+</style>

package/packages/SelectTree/index.js

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