three-trees-ui 1.0.0

package/packages/Subtable/src/SubtableBackfill.vue

@@ -0,0 +1,150 @@
+<template>
+  <span></span>
+</template>
+<script>
+import utils from '@/utils.js'
+import CustomQuery from '@/services/CustomQuery'
+
+export default {
+  name: 'HtSubtableBackfill',
+  props: {
+    customQuery: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+    maxRow: Number,
+    initFillDataType: String,
+    extendProp: {
+      type: Object,
+      default: () => {
+        return {}
+      },
+    },
+  },
+  watch: {
+    extendProp: function (newVal) {
+      if (newVal) {
+        this.initSubData()
+      }
+    },
+  },
+  data() {
+    return {
+      dataPath: [],
+    }
+  },
+  mounted() {
+    this.initSubData()
+  },
+  methods: {
+    initSubData() {
+      let _this = this
+      if (!this.extendProp.initFillData) {
+        return
+      }
+      if (
+        this.customQuery.alias &&
+        this.customQuery.resultfield &&
+        this.customQuery.resultfield.length
+      ) {
+        // 如果初始化类型是空时 此处不进行请求
+        this.dataPath = this.getDataPath(this.customQuery.resultfield)
+        const formInst = utils.getOnlineFormInstance(this)
+        if (
+          this.dataPath &&
+          this.initFillDataType === 'empty' &&
+          formInst['data'][this.dataPath[0]][this.dataPath[1]].length
+        ) {
+          return
+        }
+        let params = this.prepareLoadParams(this.customQuery.conditionfield)
+        const loading = this.$loading({
+          lock: true,
+          text: '正在初始化子表数据...',
+          spinner: 'el-icon-loading',
+          background: 'rgba(0, 0, 0, 0.7)',
+        })
+        CustomQuery.load(this.customQuery.alias, params).then(
+          (rows) => {
+            if (loading) {
+              loading.close()
+            }
+            this.backfill(
+              this.maxRow > 0 && rows.length > this.maxRow
+                ? rows.splice(0, this.maxRow)
+                : rows
+            )
+          },
+          () => {
+            if (loading) {
+              loading.close()
+            }
+          }
+        )
+      }
+    },
+    getDataPath(data) {
+      let path = []
+      data.forEach((item) => {
+        if (item.fieldPath) {
+          let pathArr = item.fieldPath.split('.')
+          if (pathArr.length > 1) {
+            path = pathArr
+          }
+        }
+      })
+      return path
+    },
+    backfill(rows) {
+      const formInst = utils.getOnlineFormInstance(this)
+      if (this.customQuery.resultfield) {
+        if (this.initFillDataType === 'cover') {
+          formInst['data'][this.dataPath[0]][this.dataPath[1]] = []
+        }
+        rows.forEach((item) => {
+          let subLineData = {}
+          let targetArray = null
+          this.customQuery.resultfield.forEach((sub) => {
+            if (sub.fieldPath) {
+              targetArray = sub.fieldPath.split('.')
+              subLineData[targetArray[targetArray.length - 1]] = !utils.isEmpty(item[sub.field]) ? item[sub.field] : ''
+            }
+          })
+          if (Object.keys(subLineData).length) {
+            // 回填时默认展开逻辑添加
+            subLineData.sub_guid = this.guid()
+            this.$root.$emit('add-new-collapse-item', subLineData.sub_guid)
+            formInst['data'][targetArray[0]][targetArray[1]].push(subLineData)
+          }
+        })
+      }
+    },
+    guid() {
+      return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(
+        c
+      ) {
+        var r = (Math.random() * 16) | 0,
+          v = c == 'x' ? r : (r & 0x3) | 0x8
+        return v.toString(16)
+      })
+    },
+    // 准备查询参数
+    prepareLoadParams(condition) {
+      let params = {}
+      if (condition && condition.length) {
+        const formInst = utils.getOnlineFormInstance(this)
+        condition.forEach((item) => {
+          if (item.fieldPath) {
+            let arr = item.fieldPath.split('.')
+            if (!utils.isEmpty(formInst[arr[0]][arr[1]][arr[2]]))
+              params[item.field] = formInst[arr[0]][arr[1]][arr[2]]
+          }
+        })
+      }
+      return params
+    },
+  },
+}
+</script>

package/packages/Subtable/src/dialog.js

@@ -0,0 +1,42 @@
+import utils from '@/utils.js'
+
+export default {
+  data() {
+    return {
+      total: 0,
+      dialogData: [],
+    }
+  },
+  methods: {
+    getDialogByAlias(alias) {
+      return this.$requestConfig.getCustomDialogByAlias(alias)
+    },
+    getListJson(dialog) {
+      const params = {
+        url: dialog.queryUrl,
+        method: dialog.requestType,
+        data: dialog.pageBean,
+      }
+      return this.$requestConfig.request(params).then((data) => {
+        // TODO 返回的数据 key是否需要转小写？？
+        this.dialogData = utils.getValueByPath(data, dialog.listKey || 'rows')
+        this.total = utils.getValueByPath(data, dialog.totalKey || 'total')
+        return
+      })
+    },
+    setListJson(rows) {
+      return new Promise((resolve) => {
+        this.dialogData = rows
+        resolve()
+      })
+    },
+    getTreeListJson(dialog) {
+      const params = {
+        url: dialog.url,
+        method: dialog.requestType,
+        data: dialog.paramsObj,
+      }
+      return this.$requestConfig.request(params)
+    },
+  },
+}

package/packages/Switch/index.js

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

package/packages/Switch/src/main.vue

@@ -0,0 +1,92 @@
+<template>
+  <div
+    v-if="permission !== 'n'"
+    v-express
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-switch
+      v-if="isShowSwitch"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      :name="inputName"
+      :width="width"
+      :active-color="activeColor"
+      :inactive-color="inactiveColor"
+      :active-value="activeValue"
+      :inactive-value="inactiveValue"
+      :active-text="activeText"
+      :inactive-text="inactiveText"
+      :disabled="isDisabled"
+      @change="(val) => $emit('change', val)"
+    ></el-switch>
+    <ht-field-tail
+      v-if="isShowText"
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      input-value
+      :tag-format-value="tagValue"
+    ></ht-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: 'HtSwitch',
+    mixins: [permission, inputName, form],
+    props: {
+      value: [String, Number, Boolean],
+      disabled: Boolean,
+      width: Number,
+      activeValue: {
+        type: [String, Number, Boolean],
+        default: true,
+      },
+      inactiveValue: {
+        type: [String, Number, Boolean],
+        default: false,
+      },
+      activeText: String,
+      inactiveText: String,
+      activeColor: String,
+      inactiveColor: String,
+    },
+    computed: {
+      inputVal: {
+        get() {
+          return this.value
+        },
+        set(val) {
+          if (val || [0, false].includes(val)) {
+            this.$emit('input', val)
+          }
+        },
+      },
+      tagValue() {
+        const tagVal =
+          this.value == this.activeValue
+            ? this.activeText
+              ? this.activeText
+              : this.value
+            : this.inactiveText
+            ? this.inactiveText
+            : this.value
+
+        return [tagVal]
+      },
+      isShowText() {
+        return this.permission !== 'n' && this.currentShowMode !== 'input'
+      },
+      isShowSwitch() {
+        return this.inputWriteable || this.currentShowMode === 'input'
+      },
+    },
+  }
+</script>

package/packages/Table/index.js

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

package/packages/Table/src/CustomColumn.vue

@@ -0,0 +1,353 @@
+<template>
+  <el-dialog
+    :visible.sync="visible"
+    width="700px"
+    custom-class="custom-column__dialog"
+    append-to-body
+    :before-close="customColumnDialogCancel"
+  >
+    <template slot="title">
+      <ht-h3 inline>自定义列</ht-h3>
+      <span class="custom-column__desc">
+        勾选需要显示的列，设置列的宽度。
+      </span>
+    </template>
+    <draggable
+      v-model="currentCustomColumns"
+      class="el-select-dropdown__list"
+      tag="ul"
+      v-bind="dragOptions"
+      handle=".custom-column__handle"
+      draggable=".draggable_disable"
+    >
+      <transition-group type="transition" name="flip-list">
+        <li
+          v-for="(column, index) in currentCustomColumns"
+          :key="column.key"
+          :class="[
+            'el-select-dropdown__item',
+            index == currentCustomColumns.length - 1 ? '' : 'draggable',
+          ]"
+        >
+          <div>
+            <div class="column-name__head">
+              <el-checkbox
+                v-model="column.checked"
+                :disabled="column.required"
+                class="column-checked"
+              ></el-checkbox>
+            </div>
+            <div
+              :class="[
+                'column-name__container',
+                index == currentCustomColumns.length - 1
+                  ? ''
+                  : 'custom-column__handle',
+              ]"
+              @click="handleNameClick(column)"
+            >
+              <div
+                class="column-name__progress"
+                :style="progressWidth(column.width)"
+              >
+                <ht-icon name="sort" class="column-name__sort" />
+                <span>{{ column.value }}</span>
+              </div>
+            </div>
+            <div class="column-name__tail">
+              <span v-if="column.required" class="column-name__required">
+                必选
+              </span>
+              <span>宽度</span>
+              <input v-model="column.width" type="text" />
+              <span>px</span>
+            </div>
+          </div>
+        </li>
+      </transition-group>
+    </draggable>
+    <span slot="footer" class="dialog-footer">
+      <el-button size="small" @click="customColumnDialogReset">
+        恢复默认
+      </el-button>
+      <el-button type="primary" size="small" @click="customColumnDialogSure">
+        确 定
+      </el-button>
+      <el-button size="small" @click="customColumnDialogCancel">
+        取 消
+      </el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import { encode, decode } from '@/util/base64'
+  const draggable = require('vuedraggable')
+
+  export default {
+    name: 'CustomColumn',
+    components: { draggable },
+    props: {
+      customColumns: {
+        type: Array,
+        default: () => {
+          return null
+        },
+      },
+      visible: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        customColumnsHashCode: null,
+        currentCustomColumns: null,
+        storageCustomColumns: null,
+      }
+    },
+    computed: {
+      dragOptions() {
+        return {
+          animation: 0,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost',
+        }
+      },
+      progressWidth() {
+        return (width) => {
+          return width == 'auto'
+            ? { width: '100%' }
+            : { width: `${(width / 500) * 100}%` }
+        }
+      },
+    },
+    watch: {
+      visible: function(newVal) {
+        if (newVal) {
+          this.initialCurrentCustomColumn()
+        } else {
+          this.currentCustomColumns = null
+          this.storageCustomColumns = null
+        }
+      },
+    },
+    mounted() {
+      setTimeout(() => {
+        this.initialCurrentCustomColumn()
+        this.applyCustomColumn()
+      }, 10)
+    },
+    methods: {
+      handleNameClick(column) {
+        if (!column.required) {
+          column.checked = !column.checked
+        }
+      },
+      getCustomColumnsHashCode() {
+        if (
+          !this.customColumnsHashCode &&
+          this.customColumns &&
+          this.customColumns.length > 0
+        ) {
+          const keys = this.customColumns.reduce((m, n) => m.concat(n.key), [])
+          // 获取当前自定义列表项的hashCode
+          this.customColumnsHashCode = utils.hashCode(keys.join(','))
+        }
+      },
+      // 自定义列表项确定按钮
+      customColumnDialogSure() {
+        this.applyCustomColumn()
+        // 同步选中状态到localStorage中
+        if (this.customColumnsHashCode) {
+          this.setLocalStorage(
+            this.customColumnsHashCode,
+            this.currentCustomColumns
+          )
+        }
+        this.$emit('update:visible', false)
+      },
+      // 自定义列表项取消按钮
+      customColumnDialogCancel() {
+        this.$emit('update:visible', false)
+      },
+      // 自定义列恢复默认
+      customColumnDialogReset() {
+        this.currentCustomColumns.forEach((item) => {
+          if (!item.checked) item.checked = !item.checked
+        })
+      },
+      // 初始化自定义列表项
+      initialCurrentCustomColumn() {
+        // 1.根据当前列构建storage存储hash
+        this.getCustomColumnsHashCode()
+        // 2.通过hash获取localStorage中的设置
+        if (this.customColumnsHashCode) {
+          this.currentCustomColumns = this.getLocalStorage(
+            this.customColumnsHashCode
+          )
+        }
+        // 3.没有localStorage时，复制一份传入的数据
+        if (!this.currentCustomColumns) {
+          this.currentCustomColumns = [...this.customColumns]
+        }
+      },
+      // 将自定义列表项应用到当前表格、自定义列表项数组中
+      applyCustomColumn() {
+        if (
+          !this.currentCustomColumns ||
+          this.currentCustomColumns.length == 0
+        ) {
+          return
+        }
+        this.$emit('apply-custom-column', [this.currentCustomColumns])
+      },
+
+      // 从localStorage中获取用于存放自定义列表项的对象
+      getObjectFromLocalStorage() {
+        if (localStorage) {
+          let customColumnSetting = localStorage.getItem('customColumnSetting')
+          if (!customColumnSetting) {
+            customColumnSetting = '{}'
+          }
+          /* eslint-disable */
+          try {
+            customColumnSetting = JSON.parse(customColumnSetting)
+          } catch (e) {}
+          /* eslint-enable */
+          if (!customColumnSetting || typeof customColumnSetting != 'object') {
+            customColumnSetting = {}
+          }
+          return customColumnSetting
+        }
+        return null
+      },
+      setLocalStorage(key, value) {
+        let customColumnSetting = this.getObjectFromLocalStorage()
+        if (customColumnSetting) {
+          customColumnSetting[key] = encode(JSON.stringify(value))
+          localStorage.setItem(
+            'customColumnSetting',
+            JSON.stringify(customColumnSetting)
+          )
+        }
+      },
+      getLocalStorage(key) {
+        let customColumnSetting = this.getObjectFromLocalStorage()
+        if (customColumnSetting) {
+          const result = customColumnSetting[key]
+          if (result) {
+            return JSON.parse(decode(result))
+          }
+        }
+        return null
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  ::v-deep {
+    .custom-column__dialog {
+      .el-dialog__header {
+        .custom-column__desc {
+          margin-left: 10px;
+          color: $base-color-gray;
+        }
+        .el-dialog__headerbtn {
+          top: 16px;
+        }
+      }
+
+      .el-dialog__body {
+        @include base-scrollbar;
+
+        padding: 10px 20px;
+        max-height: 800px;
+        overflow-y: auto;
+
+        .el-select-dropdown__item {
+          padding: 0;
+          cursor: default;
+          box-sizing: border-box;
+          border: 1px solid #ddd;
+        }
+
+        .el-select-dropdown__item ~ .el-select-dropdown__item {
+          border-top-width: 0;
+        }
+
+        .column-name__head {
+          display: inline-block;
+          padding: 0 12px;
+          box-sizing: border-box;
+          border: 1px solid #ddd;
+          border-left-width: 0;
+          border-top-width: 0;
+          border-bottom-width: 0;
+        }
+
+        .column-name__container {
+          width: 400px;
+          display: inline-block;
+          cursor: pointer;
+          position: relative;
+
+          .column-name__progress {
+            width: 30%;
+            box-sizing: border-box;
+            background: #f1f1f1;
+            max-width: 400px;
+            border-right: 1px solid #ddd;
+          }
+
+          .column-name__sort {
+            visibility: hidden;
+            margin: 0 5px;
+            cursor: move;
+          }
+
+          span {
+            color: #777;
+            font-size: 13px;
+            font-weight: bold;
+          }
+
+          &.custom-column__handle:hover .column-name__sort {
+            // visibility: inherit;
+          }
+        }
+
+        .column-name__tail {
+          display: flex;
+          float: right;
+          align-items: center;
+          justify-content: flex-end;
+          input,
+          span {
+            margin-right: 5px;
+            font-size: 13px;
+            color: $base-color-gray;
+          }
+
+          .column-name__required {
+            margin-right: 40px;
+          }
+
+          input {
+            width: 50px;
+            height: 16px;
+            border: 1px solid transparent;
+            border-radius: 2px;
+          }
+
+          input:focus {
+            outline: none;
+            border-color: $base-color-blue;
+            box-shadow: 0 0 5px $base-color-blue;
+          }
+        }
+      }
+    }
+  }
+</style>