three-trees-ui 1.0.0

package/packages/PostSelectorInput/src/PostSelectorInput.vue

@@ -0,0 +1,317 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <ht-post-selector
+      v-model="value"
+      :title="title"
+      :form-inputs-display="formInputsDisplay"
+      :validate="validate"
+      :name="inputName"
+      :placeholder="placeholder"
+      :permission="permission_sub"
+      :single="single"
+      :config="config"
+      :data="data"
+      :table-columns="tableColumns"
+      :pagination="pagination"
+      :demensions="demensions"
+      :default-demension="defaultDemension"
+      :orgs="orgs"
+      :append-to-body="appendToBody"
+      :show-switch-dimension="showSwitchDimension"
+      select-label="name"
+      :quick-search-props="quickSearchProps"
+      :mode="mode"
+      @filter-type-change="handleFilterTypeChange"
+      @valueChange="valueChange"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @load-org-post="loadOrgPost"
+      @load-policy-post="loadPolicyPost"
+      @change="handleChange"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+    ></ht-post-selector>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  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: 'HtPostSelectorInput',
+    mixins: [permission, inputName, form, mobileMode],
+    props: {
+      value: String,
+      single: Boolean,
+      config: Object,
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      selectCurrent: Boolean,
+      title: {
+        type: String,
+        default: '选择岗位',
+      },
+      showSwitchDimension: {
+        type: Boolean,
+        default: true,
+      },
+      pageSize: {
+        type: Number,
+        default: 20,
+      },
+      quickSearchProps: {
+        type: String,
+        default: 'p.pos_name_,p.code_,o.path_name_',
+      },
+    },
+    data() {
+      return {
+        data: [],
+        demensions: [],
+        defaultDemension: null,
+        orgs: [],
+        tableColumns: [
+          { prop: 'name', label: '名称' },
+          { prop: 'code', label: '编码' },
+          { prop: 'orgName', label: '所属组织' },
+        ],
+        orgLength: 0,
+        createQuery: {},
+        mode: null, // 搜索模式
+        filterType: 'org', //过滤类型(org:组织，policy:策略)
+        currentGroup: null,
+        currentOrg: null,
+        currentPolicy: null,
+        searchWord: null,
+        pagination: {
+          page: 1,
+          pageSize: this.pageSize,
+          total: 0,
+          showTotal: true,
+        },
+      }
+    },
+    mounted() {
+      if (!this.value && this.selectCurrent) {
+        this.$requestConfig.getCurrentUser('post').then((currentUserPost) => {
+          this.initCurrentPost(currentUserPost)
+        })
+      }
+      if (!this.data || this.data.length == 0) {
+        this.handleLoad()
+      }
+    },
+    methods: {
+      initCurrentPost(post) {
+        post && post.postName && this.$emit('input', post.postName)
+        if (post && this.config) {
+          // 配置了id的绑定关系，则回填到指定属性上
+          if (this.config.hasOwnProperty('id')) {
+            utils.setValueByConfigKey(this, this.config, 'id', post.postId)
+          }
+          // 配置了code的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('code')) {
+            utils.setValueByConfigKey(this, this.config, 'code', post.postCode)
+          }
+          // 配置了name的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('name')) {
+            utils.setValueByConfigKey(this, this.config, 'name', post.postName)
+          }
+        }
+      },
+      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 = null
+        this.handleLoad()
+      },
+      handlePageChange(page) {
+        // 搜索模式下或者未进行过滤时，查询所有数据
+        if (this.mode != 'filter') {
+          this.handleLoad(page)
+        } else {
+          // 过滤模式下，根据过滤类型查询数据
+          switch (this.filterType) {
+            case 'org':
+              this.loadOrgPost(this.currentOrg, page)
+              break
+            case 'policy':
+              this.loadPolicyPost(this.currentPolicy, page)
+              break
+          }
+        }
+      },
+      // 处理过滤类型变化的事件
+      handleFilterTypeChange(type) {
+        this.filterType = type
+      },
+      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
+      },
+      // 获取查询参数中的分页信息(不传page时默认查询第一页)
+      getPageBean(page) {
+        const pageBean = { ...this.pagination }
+        delete pageBean['total']
+        pageBean.page = page || 1
+        return pageBean
+      },
+      handleLoad(page) {
+        const param = this.getQueryFilter(page)
+        this.data = this.data || []
+        this.loadAllPost(param)
+      },
+      // 加载全部岗位
+      loadAllPost(param) {
+        this.$requestConfig.getPostList(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)
+        })
+      },
+      // 通过组织查询岗位
+      loadOrgPost(org, page) {
+        this.mode = 'filter'
+        this.currentOrg = org
+        let queryFilter = {
+          pageBean: this.getPageBean(page),
+          querys: [],
+        }
+        let query = {
+          property: 'path_',
+          value: org.path,
+          group: 'main',
+          operation: 'RIGHT_LIKE',
+          relation: 'AND',
+        }
+        if (org.path) {
+          queryFilter.querys.push(query)
+        }
+        this.loadAllPost(queryFilter)
+      },
+      // 通过策略查询岗位
+      loadPolicyPost(params, page) {
+        this.mode = 'filter'
+        this.currentOrg = params
+        let queryFilter = {
+          pageBean: this.getPageBean(page),
+          querys: [],
+        }
+        let query = null
+        const { type, ids, paths } = params
+        switch (type) {
+          // 所在主部门
+          case '1':
+            query = {
+              property: 'o.id_',
+              value: params.id,
+              group: 'main',
+              operation: 'EQUAL',
+              relation: 'AND',
+            }
+            queryFilter.querys.push(query)
+            this.loadAllPost(queryFilter)
+            break
+          // 所在主部门及下级部门
+          case '2':
+            query = {
+              property: 'o.path_',
+              value: params.path,
+              group: 'main',
+              operation: 'RIGHT_LIKE',
+              relation: 'AND',
+            }
+            queryFilter.querys.push(query)
+            this.loadAllPost(queryFilter)
+            break
+          // 所在部门
+          case '3':
+            ids.forEach((id) => {
+              query = {
+                property: 'o.id_',
+                value: id,
+                group: 'main',
+                operation: 'EQUAL',
+                relation: 'OR',
+              }
+              queryFilter.querys.push(query)
+            })
+            this.loadAllPost(queryFilter)
+            break
+          // 所在部门及下级部门
+          case '4':
+            paths.forEach((path) => {
+              query = {
+                property: 'o.path_',
+                value: path,
+                group: 'main',
+                operation: 'RIGHT_LIKE',
+                relation: 'OR',
+              }
+              queryFilter.querys.push(query)
+            })
+            this.loadAllPost(queryFilter)
+            break
+        }
+      },
+    },
+  }
+</script>

package/packages/Preview/index.js

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