three-trees-ui 1.0.0

package/packages/Checkbox/index.js

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

package/packages/Checkbox/src/main.vue

@@ -0,0 +1,205 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-checkbox-group
+      v-if="inputWriteable"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :size="inputSize"
+      :name="inputName"
+      :min="min"
+      :max="max"
+      :disabled="disabled || readonly"
+    >
+      <el-checkbox
+        v-for="item in optionsVal"
+        :key="item.key"
+        :class="{
+          'el-checkbox-vertical': optionLayout == 'vertical',
+          'el-checkbox-horizontal': optionLayout == 'horizontal',
+        }"
+        :label="item.key"
+        :disabled="item.disabled"
+        @change="handleCheckboxChange"
+      >
+        {{ item.value }}
+      </el-checkbox>
+    </el-checkbox-group>
+    <ht-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      input-value
+      :tag-format-value="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: 'HtCheckbox',
+    components: {
+      HtFieldTail,
+    },
+    mixins: [permission, inputName, linkage, ganged, form, formDataUpdate],
+    props: {
+      value: String,
+      optionLayout: {
+        type: String,
+        default: 'horizontal',
+        validator: function(value) {
+          return ['horizontal', 'vertical'].some((i) => i == value)
+        },
+      },
+      options: Array,
+      cklist: String,
+      readonly: {
+        type: Boolean,
+        default: false,
+      },
+      disabled: {
+        type: Boolean,
+        default: false,
+      },
+      min: Number,
+      max: Number,
+    },
+    data() {
+      return {
+        optionsVal: [],
+      }
+    },
+    computed: {
+      inputVal: {
+        get: function() {
+          if (
+            utils.isEmpty(this.value) ||
+            !this.optionsVal ||
+            this.optionsVal.length == 0
+          ) {
+            return []
+          }
+          if (this.value.constructor == String) {
+            const ary = this.value.split(',')
+            if (this.inputWriteable) {
+              return ary
+            } else {
+              let opts = []
+              ary.forEach((m) => {
+                const currentObj = this.optionsVal.find((opt) => opt.key === m)
+                currentObj && opts.push(currentObj.value)
+              })
+              return opts
+            }
+          }
+          return []
+        },
+        set: function() {},
+      },
+    },
+    watch: {
+      options: function() {
+        this.loadOption()
+      },
+    },
+    created() {
+      this.$on('formDataUpdate', () => {
+        this.loadOption()
+      })
+    },
+    mounted() {
+      this.$isCheckbox = true
+      this.loadOption()
+    },
+    methods: {
+      //加载选项
+      loadOption: function() {
+        // 动态选项
+        if (this.ganged && this.ganged.alias) {
+          this.dynamicLoadOption()
+        } else {
+          // 静态选项
+          this.optionsVal = this.cklist
+            ? JSON.parse(this.cklist)
+            : this.options
+            ? this.options
+            : []
+        }
+      },
+      // 动态加载选项
+      dynamicLoadOption() {
+        this.doCustomQuery(null, true).then((data) => {
+          if (data != null || data != undefined) {
+            this.optionsVal = data
+          }
+        })
+      },
+      // 通过选项值数组 获取 选项key数组
+      getOptionKeyByValue: function(valueAry) {
+        const keyAry = []
+        if (
+          !valueAry ||
+          valueAry.constructor !== Array ||
+          valueAry.length == 0
+        ) {
+          return keyAry
+        }
+        valueAry.forEach((m) => {
+          const _option = this.optionsVal.find((opt) => opt.value === m)
+          if (_option) {
+            keyAry.push(_option.key)
+          }
+        })
+        return keyAry
+      },
+      handleCheckboxChange: function(m, n) {
+        let vals = [...this.inputVal]
+        const currentVal = n.currentTarget.value
+        if (m) {
+          vals.push(currentVal)
+        } else {
+          vals.remove(currentVal)
+        }
+        vals = vals.filter((i) => i !== '')
+        this.$emit('input', vals.join(','))
+        this.$emit('change', m, n)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  label.el-checkbox-horizontal {
+    margin: 0px 30px 5px 0;
+  }
+
+  label.el-checkbox-vertical {
+    display: block;
+  }
+
+  label.el-checkbox-vertical ~ label.el-checkbox-vertical {
+    margin-top: 10px;
+    margin-left: 0px;
+  }
+
+  .el-checkbox-group {
+    line-height: 14px;
+  }
+
+  div.el-checkbox-group[aria-invalid='true'] {
+    outline: 1px solid #f56c6c;
+  }
+</style>

package/packages/Collapse/index.js

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

package/packages/Collapse/src/HtCollapse.vue

@@ -0,0 +1,85 @@
+<template>
+  <el-collapse
+    ref="collapse"
+    :accordion="accordion"
+    :value="openDefaultArr"
+    @change="handleChange"
+  >
+    <slot></slot>
+  </el-collapse>
+</template>
+<script>
+  import regionValidator from '@/mixins/regionValidator.js'
+
+  export default {
+    name: 'HtCollapse',
+    mixins: [regionValidator],
+    props: {
+      accordion: {
+        type: Boolean,
+        default: false,
+      },
+      openDefault: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      isVerify: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        openDefaultArr: this.openDefault,
+        preActiveNames: [],
+      }
+    },
+    watch: {
+      openDefaultArr: {
+        handler(val) {
+          this.$root.$emit('collapse-active-names', val)
+        },
+        deep: true,
+      },
+    },
+    created() {
+      this.$root.$on('add-new-collapse-item', (result) => {
+        if (result && !this.openDefaultArr.includes(result)) {
+          this.openDefaultArr.push(result)
+        }
+      })
+    },
+    mounted() {
+      this.preActiveNames = [].concat(this.openDefaultArr)
+    },
+    methods: {
+      handleChange(activeNames) {
+        // 收起来时才去判断是否校验
+        if (activeNames.length < this.preActiveNames.length) {
+          if (this.isVerify) {
+            this.validateRegion('.el-collapse-item.is-active').then(
+              (errorItems) => {
+                if (errorItems.length > 0) {
+                  // 还原将要折叠的面板
+                  this.openDefaultArr = [].concat(this.preActiveNames)
+                } else {
+                  // 更新当前打开的面板名称数组
+                  this.preActiveNames = [].concat(activeNames)
+                  this.openDefaultArr = [].concat(activeNames)
+                  this.$emit('change', activeNames)
+                }
+              }
+            )
+            return
+          }
+          this.openDefaultArr = [].concat(activeNames)
+        }
+        this.preActiveNames = [].concat(activeNames)
+        this.openDefaultArr = [].concat(activeNames)
+        this.$emit('change', activeNames)
+      },
+    },
+  }
+</script>

package/packages/Collapse/src/HtCollapseItem.vue

@@ -0,0 +1,21 @@
+<template>
+  <el-collapse-item :title="title" :name="name" :disabled="disabled">
+    <slot slot="title" name="title"></slot>
+    <slot></slot>
+  </el-collapse-item>
+</template>
+<script>
+  export default {
+    name: 'HtCollapseItem',
+    props: {
+      title: String,
+      name: {
+        type: [String, Number],
+        default() {
+          return this._uid
+        },
+      },
+      disabled: Boolean,
+    },
+  }
+</script>

package/packages/CollapseItem/index.js

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

package/packages/CustomComponent/index.js

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

package/packages/CustomComponent/src/main.vue

@@ -0,0 +1,87 @@
+<template>
+  <div>
+    <template v-if="loadOver">
+      <component
+        :is="componentName"
+        :ref="vueObj.alias"
+        :data="data"
+        :permission="permission"
+        :vueObj="vueObj"
+        :component="component"
+      ></component>
+    </template>
+  </div>
+</template>
+
+<script>
+import Vue from 'vue'
+
+export default {
+  name: 'HtCustomComponent',
+  componentName: 'HtCustomComponent',
+  props: ['data', 'permission', 'ccAlias'],
+  data() {
+    return {
+      loadOver: false,
+      vueObj: {},
+      component: {},
+      componentName: '',
+    }
+  },
+  methods: {
+    init() {
+      //解析jscode;
+      this.component = {}
+      if (this.vueObj.jsCode) {
+        let jsCode = Base64.decode(this.vueObj.jsCode, 'utf-8')
+        let parseJsCode = function () {
+          return eval('(function(){return {' + jsCode + '} })()')
+        }
+        this.component = parseJsCode()
+      }
+
+      this.component.props = ['data', 'permission', 'vueObj', 'component']
+      if (this.vueObj.template) {
+        this.component.template = Base64.decode(this.vueObj.template, 'utf-8')
+      } else {
+        this.component.template = '<div></div>'
+      }
+      if (this.vueObj.dataCode) {
+        let dataCodeStr = Base64.decode(this.vueObj.dataCode)
+        let parseDataCode = function () {
+          return eval('(function(){return ' + dataCodeStr + ' })()')
+        }
+        let data = parseDataCode()
+        this.component.data = function () {
+          return data
+        }
+      }
+
+      this.componentName = this.ccAlias + '-component'
+      //加载动态组件
+      Vue.component(this.componentName, this.component)
+      //加载完成后显示
+      this.loadOver = true
+    },
+  },
+  mounted() {
+    // this.init();
+  },
+  created() {
+    //根据自定义组件id查询组件对象
+    // this.$http
+    //   .get('${form}/formCustomComponent/v1/getByAlias?alias=' + this.ccAlias)
+    //   .then((resp) => {
+    //     this.vueObj = resp.data
+    //     this.init()
+    //   })
+
+    this.$requestConfig
+      .getFormCustomComponentByAlias(this.ccAlias)
+      .then((resp) => {
+        this.vueObj = resp
+        this.init()
+      })
+  },
+}
+</script>

package/packages/CustomDialog/index.js

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

package/packages/CustomDialog/src/customDialog.js

@@ -0,0 +1,126 @@
+import utils from '@/utils.js'
+import mobileMode from '@/mixins/mobileMode.js'
+import { Loading } from 'element-ui'
+
+export default {
+  mixins: [mobileMode],
+  data() {
+    return {
+      pagination: {},
+      dialogData: [],
+      total: 0,
+      form: {},
+      itemSavestate: {},
+    }
+  },
+  methods: {
+    //更新对话框数据
+    setDialogData(data) {
+      data.forEach(item => {
+        delete item.row_id
+      })
+      if (this.isMobile && this.pagination && this.pagination.page > 1) {
+        this.dialogData = this.dialogData.concat(data)
+      } else {
+        this.dialogData = data
+      }
+    },
+    getDialoglistJson(pagination) {
+      let loadingInstance
+      if (this.isMobile) {
+        this.$showLoading()
+      } else {
+        loadingInstance = Loading.service({ fullscreen: true, text: '查询中...' })
+      }
+      return this.$requestConfig
+        .request({
+          url: pagination.queryUrl,
+          method: 'post',
+          data: pagination.pageBean,
+        })
+        .then((response) => {
+          if (this.isMobile) {
+            this.$cancelLoading()
+          } else {
+            loadingInstance.close()
+          }
+          const listKey = pagination.listKey
+            ? pagination.listKey
+            : pagination.dsType && pagination.dsType == 'dataSource'
+              ? 'rows'
+              : ''
+          if (!listKey) {
+            console.warn(
+              '自定义对话框未获取到数据返回的listKey，数据加载可能产生异常。'
+            )
+          }
+          // 通过路径取得对象中的属性
+          const rows = utils.getValueByPath(response, listKey)
+          const pathPage = utils.getValueByPath(response, pagination.pageKey)
+          const pathPageSize = utils.getValueByPath(
+            response,
+            pagination.pageSizeKey
+          )
+          const pathTotal = utils.getValueByPath(response, pagination.totalKey)
+          if (pathPage) {
+            this.pageResult = {
+              page: pathPage,
+              pageSize: pathPageSize,
+              total: pathTotal,
+            }
+          }
+          this.setTotal(pathTotal) //总数据条数
+          let pageBean = {
+            page: pathPage,
+            pageSize: pathPageSize,
+            showTotal: true,
+            total: pathTotal,
+          }
+          this.setPagination(pageBean)
+          this.setTodoRows(rows) //列表数据
+        }).catch(err=>{
+          if (this.isMobile) {
+            this.$cancelLoading()
+          } else {
+            loadingInstance.close()
+          }
+        })
+    },
+    //更新每页下拉显示数据
+    setPaginationSize(size) {
+      this.pagination.pageSize = size
+    },
+    //更新第几页
+    setPaginationPageNum(currentPage) {
+      this.pagination.page = currentPage
+    },
+    getTreeData(data) {
+      return new Promise((resolve) => {
+        if (data.requestType == 'GET') {
+          this.$requestConfig.request({ url: data.url }).then((response) => {
+            resolve(response.data)
+          })
+        }
+      })
+    },
+    setPagination(pagination) {
+      this.pagination = pagination
+    },
+    setTodoRows(rows) {
+      let newRows = []
+      for (let i = 0; i < rows.length; i++) {
+        let data = rows[i]
+        let keys = Object.keys(data)
+        let objRows = {}
+        keys.forEach((key) => {
+          objRows[key.toLowerCase()] = data[key]
+        })
+        newRows.push(objRows)
+      }
+      this.setDialogData(newRows)
+    },
+    setTotal(total) {
+      this.total = total
+    },
+  },
+}