three-trees-ui 1.0.0

package/packages/TableSearchPanel/src/main.vue

@@ -0,0 +1,182 @@
+<template>
+  <el-form v-form data-vv-scope="searchForm">
+    <div class="search-panel__container">
+      <component
+        :is="isFlexLayout ? 'div' : 'el-row'"
+        class="search-panel__row"
+        :class="{ 'search-field__row': isFlexLayout }"
+      >
+        <slot></slot>
+      </component>
+    </div>
+    <div
+      :class="{ 'flex-search__group': isFlexLayout }"
+      class="search-btn__wrap"
+    >
+      <el-button
+        type="primary"
+        size="small"
+        icon="el-icon-search"
+        @click="search(true)"
+      >
+        搜索
+      </el-button>
+      <el-button size="small" icon="el-icon-refresh-left" @click="reset">
+        重置
+      </el-button>
+    </div>
+  </el-form>
+</template>
+<script>
+  import emitter from '@/mixins/emitter.js'
+  import utils from 'three-trees-ui/src/utils.js'
+  import _ from 'lodash'
+  export default {
+    name: 'HtTableSearchPanel',
+    componentName: 'HtTableSearchPanel',
+    mixins: [emitter],
+    props: {
+      value: Object,
+      divide: {
+        type: Number,
+        default: 4,
+        validator: (value) => {
+          return value > 0 && value < 5
+        },
+      },
+      labelWidth: {
+        type: Number,
+        default: 70,
+      },
+      isFlexLayout: {
+        type: Boolean,
+        default: false,
+      },
+      displayStyle: String,
+    },
+    data() {
+      return {
+        fieldVms: [],
+        fieldArray: [],
+        formModelExpression: null,
+        data: {},
+        defaultData: {},
+      }
+    },
+    computed: {
+      calcSpan: {
+        get() {
+          return 24 / this.divide
+        },
+      },
+    },
+    created() {
+      if (this.$vnode.data.model && this.$vnode.data.model.expression) {
+        this.formModelExpression = this.$vnode.data.model.expression
+      }
+      this.$slots.default.forEach((v) => {
+        if (!v.componentOptions) {
+          return
+        }
+        this.fieldArray.push({ ...v.componentOptions.propsData })
+      })
+      this.$on('field-loaded', (ref) => {
+        // 搜索条件挂载完成后，添加其实例到数组中
+        this.fieldVms.push(ref)
+      })
+      this.$on('input-change', (obj, prop) => {
+        this.fieldArray = this.fieldArray.map((field) => {
+          return field.prop == prop ? { ...field, ...obj } : field
+        })
+      })
+      this.$on('search', (isSearchBtn) => this.search(isSearchBtn))
+    },
+    mounted() {
+      if (this.formModelExpression) {
+        this.$set(this.data, this.formModelExpression, this.value)
+        this.defaultData = _.cloneDeep(this.value)
+      }
+      this.broadcast('HtTableSearchField', 'panel-props', [
+        this.labelWidth,
+        this.calcSpan,
+        this.isFlexLayout,
+        this.displayStyle,
+      ])
+    },
+    methods: {
+      search(isSearchBtn) {
+        if (isSearchBtn) {
+          utils
+            .validateForm(this, 'searchForm')
+            .then((result) => {
+              this.$parent.$parent.$emit(
+                'advance-search',
+                this.fieldArray,
+                isSearchBtn
+              )
+            })
+            .catch((items) => {
+              this.$message.error(
+                `有${items.length}个字段未通过校验，请正确填写表单内容。`
+              )
+              this.multipleTemplateTableloading = false
+            })
+            .finally(() => {
+              this.multipleTemplateTableloading = false
+            })
+        } else {
+          this.$parent.$parent.$emit(
+            'advance-search',
+            this.fieldArray,
+            isSearchBtn
+          )
+        }
+      },
+      reset() {
+        if (this.formModelExpression) {
+          Object.keys(this.data[this.formModelExpression]).forEach((key) => {
+            this.$set(
+              this.data[this.formModelExpression],
+              key,
+              this.defaultData[key] ? this.defaultData[key] : null
+            )
+          })
+        }
+        this.fieldVms.forEach((vm) => {
+          vm.$emit('input-reset')
+        })
+        this.$nextTick(() => {
+          this.search()
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .search-panel__container {
+    width: 100%;
+    overflow-x: auto;
+    max-height: 141px;
+  }
+  .search-panel__row {
+    min-width: 1280px;
+  }
+  .flex-search__group {
+    margin: 0 0 8px 0;
+    width: 170px;
+    display: inline-block;
+  }
+  .search-btn__wrap {
+    ::v-deep {
+      .el-button {
+        font-size: 14px;
+        i {
+          font-size: 16px;
+        }
+      }
+      .el-button--small {
+        padding: 7px 12px;
+      }
+    }
+  }
+</style>

package/packages/Tabs/index.js

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

package/packages/Tabs/src/Tabs.vue

@@ -0,0 +1,140 @@
+<template>
+  <div>
+    <el-tabs
+      ref="tabs"
+      v-model="val"
+      :tab-position="tabPosition"
+      :before-leave="beforeLeaveTab"
+      :type="type"
+      :active-name="activeName"
+      :closable="closable"
+      :addable="addable"
+      :editable="editable"
+      :stretch="stretch"
+      @tab-click="tabClickHandle"
+      @tab-remove="tabRemoveHandle"
+      @tab-add="tabAddHandle"
+      @edit="tabEditHandle"
+    >
+      <slot></slot>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+  import regionValidator from '@/mixins/regionValidator.js'
+
+  export default {
+    name: 'HtTabs',
+    mixins: [regionValidator],
+    props: {
+      tabsValue: String,
+      type: String,
+      activeName: String,
+      beforeLeave: Function,
+      closable: {
+        type: Boolean,
+        default: false,
+      },
+      addable: {
+        type: Boolean,
+        default: false,
+      },
+      editable: {
+        type: Boolean,
+        default: false,
+      },
+      tabPosition: {
+        type: String,
+        default: 'top',
+      },
+      stretch: {
+        type: Boolean,
+        default: false,
+      },
+      isVerify: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        val: this.tabsValue,
+      }
+    },
+    mounted() {
+      let me_ = this
+      this.$refs.tabs.$watch('panes', function() {
+        me_.val = me_.getShowPanes(me_.val)
+      })
+    },
+    methods: {
+      beforeLeaveTab(activeName, oldActiveName) {
+        // 切换tab时是否校验
+        if (this.isVerify) {
+          return new Promise((resolve, reject) => {
+            // 应用侧绑定了前置处理方法
+            if (this.beforeLeave) {
+              const result = this.beforeLeave(activeName, oldActiveName)
+              // 应用侧的前置处理方法返回了拒绝切换的结果时 直接 驳回切换操作
+              if (result && result.constructor == Promise) {
+                result.catch(() => reject())
+              } else if (
+                result != null &&
+                result != undefined &&
+                result === false
+              ) {
+                reject()
+              }
+            }
+            // 执行校验逻辑
+            this.validateRegion('.el-tab-pane:not([aria-hidden])').then(
+              (errorItems) => {
+                if (errorItems.length > 0) {
+                  reject()
+                } else {
+                  resolve()
+                }
+              }
+            )
+          })
+        } else {
+          // 不校验时直接 应用侧的结果 或 直接返回true
+          return this.beforeLeave
+            ? this.beforeLeave(activeName, oldActiveName)
+            : true
+        }
+      },
+      getShowPanes(key) {
+        let panes = this.$refs.tabs.panes
+        let name = ''
+        let flag = false
+        for (let i = 0; i < panes.length; i++) {
+          if (panes[i].name == key) {
+            flag = true
+          }
+          if (panes[i].$attrs.isShow && !name) {
+            name = panes[i].name
+          }
+        }
+        if (flag) {
+          return key
+        } else {
+          return name
+        }
+      },
+      tabClickHandle(tab) {
+        this.$emit('tab-click', tab)
+      },
+      tabRemoveHandle(tabName) {
+        this.$emit('tab-remove', tabName)
+      },
+      tabAddHandle() {
+        this.$emit('tab-add')
+      },
+      tabEditHandle(targetName, action) {
+        this.$emit('edit', targetName, action)
+      },
+    },
+  }
+</script>

package/packages/Tag/index.js

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

package/packages/Tag/src/main.vue

@@ -0,0 +1,266 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <el-select
+      v-if="inputWriteable"
+      ref="fuzzySearch"
+      v-model="inputVal"
+      v-validate="inputValidate"
+      style="width: 100%"
+      :size="inputSize"
+      :filterable="filterable"
+      :remote="filterable"
+      :remote-method="remoteMethod"
+      :multiple="multiple"
+      clearable
+      :name="inputName"
+      @focus="focusSelectValue"
+      @visible-change="visibleChange"
+    >
+      <div v-loading="loading">
+        <el-option
+          v-for="item in options"
+          :key="item.id"
+          :label="item.name"
+          :value="item.name"
+        ></el-option>
+      </div>
+
+      <div class="text-center">
+        <a class="text-normal">
+          <el-pagination
+            layout="prev, pager, next"
+            :page-size="pagination.pageSize"
+            :pager-count="5"
+            :current-page="pagination.page"
+            :total="pagination.total"
+            @current-change="currentChange"
+          ></el-pagination>
+        </a>
+      </div>
+      <div class="ht-tag__append">
+        <el-button v-if="creatingTag" size="small" type="primary" @click="add">
+          添加
+        </el-button>
+      </div>
+      <template v-if="creatingTag" slot="empty">
+        <div class="ht-tag__empty" @click="add">
+          <span>{{ currentQuery }}</span>
+        </div>
+      </template>
+    </el-select>
+    <ht-field-tail
+      :field-name="inputName"
+      :readonly="!inputWriteable"
+      :input-value="inputVal"
+      :tag-format-value="tagValue"
+    />
+  </div>
+</template>
+
+<script>
+  import permission from '@/mixins/permission.js'
+  import linkage from '@/mixins/linkage.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+
+  export default {
+    name: 'HtTag',
+    mixins: [permission, inputName, linkage, form],
+    props: {
+      value: String,
+      filterable: {
+        type: Boolean,
+        default: false,
+      },
+      expand: {
+        type: Boolean,
+        default: false,
+      },
+      tagKey: String,
+      multiple: {
+        type: Boolean,
+        default: false,
+      },
+    },
+    data() {
+      return {
+        options: [],
+        pagination: {
+          pageSize: 5,
+          page: 1,
+          total: 0,
+        },
+        loading: false,
+        currentQuery: '',
+      }
+    },
+    computed: {
+      inputVal: {
+        set(value) {
+          if (value && this.multiple) {
+            this.$emit('input', value.join(','))
+          } else {
+            this.$emit('input', value)
+          }
+        },
+        get() {
+          if (this.value && this.multiple) {
+            return this.value.split(',')
+          }
+          return this.value
+        },
+      },
+      tagValue() {
+        return this.inputVal && this.inputVal.constructor == Array
+          ? this.inputVal
+          : this.inputVal && this.inputVal.constructor == String
+          ? [this.inputVal]
+          : []
+      },
+      creatingTag() {
+        return this.expand && this.currentQuery !== ''
+      },
+    },
+    mounted() {
+      this.search()
+    },
+    methods: {
+      focusSelectValue() {
+        if (this.$refs.fuzzySearch.$refs.input) {
+          this.$refs.fuzzySearch.$refs.input.blur = () => {
+            this.currentQuery = ''
+            this.search()
+          }
+        }
+      },
+      visibleChange(flag) {
+        //单选时输入框关闭时重新搜索内容
+        if (!flag && !this.multiple) {
+          this.currentQuery = ''
+          this.search()
+        }
+      },
+      remoteMethod(query) {
+        this.currentQuery = query
+        let param = {
+          pageBean: this.pagination,
+          querys: [
+            {
+              property: 'type_key_',
+              value: this.tagKey,
+              group: 'query',
+              operation: 'EQUAL',
+              relation: 'AND',
+            },
+          ],
+        }
+        if (query) {
+          param.querys.push({
+            property: 'name_',
+            value: query,
+            group: 'query',
+            operation: 'LIKE',
+            relation: 'AND',
+          })
+        }
+        this.loading = true
+        this.$requestConfig
+          .getTagList(param)
+          .then((data) => {
+            this.options = data.rows
+            this.pagination = {
+              pageSize: data.pageSize,
+              page: data.page,
+              total: data.total,
+            }
+          })
+          .finally(() => {
+            this.loading = false
+          })
+      },
+      currentChange(page) {
+        this.pagination.page = page
+        this.remoteMethod(this.currentQuery)
+      },
+      add() {
+        let param = {
+          name: this.currentQuery,
+          typeKey: this.tagKey,
+        }
+        this.$requestConfig
+          .saveTag(param)
+          .then((data) => {
+            if (data.state) {
+              this.$message({ type: 'success', message: '添加成功' })
+              this.remoteMethod(this.currentQuery)
+            } else {
+              this.$message({ type: 'error', message: '添加失败' })
+            }
+          })
+          .catch(() => {
+            // this.$message({ type: 'error', message: '添加失败' })
+          })
+      },
+      search() {
+        let param = {
+          pageBean: this.pagination,
+          querys: [
+            {
+              property: 'type_key_',
+              value: this.tagKey,
+              group: 'query',
+              operation: 'EQUAL',
+              relation: 'AND',
+            },
+          ],
+        }
+        this.$requestConfig.getTagList(param).then((data) => {
+          this.options = data.rows
+          this.pagination = {
+            pageSize: data.pageSize,
+            page: data.page,
+            total: data.total,
+          }
+        })
+      },
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+  .text-center {
+    position: sticky;
+    background: #fff;
+    height: 30px;
+    top: 0;
+    z-index: 1;
+    text-align: center;
+  }
+  div[aria-invalid='true'] {
+    ::v-deep {
+      .el-input__inner,
+      .el-input__inner:focus {
+        border-color: #f56c6c;
+      }
+    }
+  }
+  .ht-tag__append {
+    text-align: center;
+    padding: 5px 0;
+  }
+  .ht-tag__empty {
+    background: #f5f7fa;
+    text-align: center;
+    margin: 5px 0;
+    padding: 8px 0;
+    cursor: pointer;
+  }
+</style>

package/packages/TemplateBatchUpdate/index.js

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