@kyfe/ks-query-table 0.0.21 → 0.0.22

package/kuasheng-ui/components/ks-org/ks-org-tree.vue

@@ -0,0 +1,247 @@
+<template>
+  <div class="ks-org-tree">
+    <div class="ks-org-tree-header">
+      <slot name="title">
+        <div v-if="showTitle" class="ks-org-tree-header-title">
+          <van-icon name="arrow-left" color="#000" size="22" @click="onClose" />
+          <span class="ks-org-tree-header-title-label">选择组织</span>
+        </div>
+      </slot>
+      <ks-tree-input
+        class="ks-org-tree-header-input"
+        :clearable="true"
+        style="width:100%"
+        :inputNumber="inputNumber"
+        :tree-data="treeData"
+        @change="change"
+        @selectOrg="selectOrg"
+        @inputChecked="inputChecked"
+        @clear="clearInput"
+        ref="treeInput"
+      ></ks-tree-input>
+    </div>
+    <div class="ks-org-tree-wrapper" v-show="visibleTree">
+      <ks-tree
+        ref="tree"
+        :treeId="treeId"
+        :default-checked-keys="defaultCheckedKeys"
+        :filterNodeMethod="filterNodeMethod"
+        :filterTreeMethods="filterTreeMethods"
+        @node-click="treeNodeClick"
+        @node-checked="checkedListChange"
+        @updateTreeData="updateTreeData"
+      >
+        <template slot="treeNode" slot-scope="{ node, attrs }">
+          <slot name="treeNode" :node="node" :attrs="attrs"></slot>
+        </template>
+      </ks-tree>
+    </div>
+    <div class="ks-org-tree-footer" v-show="visibleTree">
+      <van-grid column-num="2" :border="false">
+        <van-grid-item>
+          <van-button size="large" :disabled="btnDisabled" @click="onReset" class="btn-normal">重置</van-button>
+        </van-grid-item>
+        <van-grid-item>
+          <van-button type="primary" size="large" :disabled="btnDisabled" @click="handleChange">确定</van-button>
+        </van-grid-item>
+      </van-grid>
+    </div>
+  </div>
+</template>
+
+<script>
+import ksTree from './ks-tree.vue'
+import ksTreeInput from './ks-tree-input.vue'
+import { deepSearch } from './utils'
+export default {
+  name: 'ks-org-tree',
+  components: {
+    ksTree,
+    ksTreeInput
+  },
+  props: {
+    defaultCheckedKeys: {
+      type: Array,
+      default: () => []
+    },
+    inputNumber: {
+      type: Number,
+      default: 0
+    },
+    treeId: {
+      type: String,
+      default: ''
+    },
+    showTitle: {
+      type: Boolean,
+      default: true
+    },
+    filterNodeMethod: Function,
+    filterTreeMethods: Function
+  },
+  data() {
+    this.treeData = []
+    return {
+      selectNode: null,
+      visibleTree: true,
+      checkedList: []
+    }
+  },
+  computed: {
+    btnDisabled() {
+      return !this.selectNode
+    }
+  },
+  mounted() {
+    this.open()
+  },
+  methods: {
+    updateTreeData(treeData) {
+      this.treeData = treeData
+    },
+    inputChecked(node) {
+      const { id } = node
+      const item = deepSearch(id, this.treeData)
+      this.$refs.tree.nodeChecked(item)
+    },
+    checkedListChange(checkedList, treeData) {
+      this.checkedList = checkedList
+      this.treeData = treeData
+    },
+    onClose() {
+      this.$emit('onClose')
+    },
+    change(val) {
+      this.visibleTree = !val
+    },
+    clearInput() {
+      this.visibleTree = true
+      this.$emit('clear')
+    },
+    treeNodeClick(item) {
+      if (this.multiple) {
+        // 多选的时候不改变input
+        this.$emit('node-click', item)
+        return
+      }
+      this.selectNode = item
+      item && item.name && this.$refs.treeInput.setSearchValue(item.name)
+      this.$emit('node-click', item)
+    },
+    async queryNodeDetail(id) {
+      return await this.$refs.tree.queryNodeDetail(id)
+    },
+    getTreeData() {
+      return this.$refs.tree.treeData
+    },
+    setNodeStatus(id) {
+      this.$refs.tree.setNodeStatus(id)
+    },
+    async open() {
+      this.$refs.tree.openTree()
+      const { id = '' } = this.selectNode || {}
+      if (!this.multiple) {
+        const defaultId = this.defaultCheckedKeys[0]
+        if (defaultId !== id) {
+          const item = await this.queryNodeDetail(defaultId)
+          item.name && this.$refs.treeInput.setSearchValue(item.name)
+          this.selectNode = item
+        }
+        this.setNodeStatus(defaultId)
+      }
+    },
+    selectOrg(val) {
+      if (this.multiple) {
+        return
+      }
+      this.visibleTree = true
+      this.selectNode = val
+      this.$refs.tree.setNodeStatus(val.id)
+      this.handleChange()
+    },
+    /*
+     * 确定
+     */
+    handleChange() {
+      if (!this.selectNode) {
+        window.vant.Toast('请选择组织')
+        return
+      }
+      this.$emit('handleChange', this.selectNode)
+    },
+    /*
+     * 重置
+     */
+    onReset() {
+      this.inputValue = ''
+      this.$refs.tree.resetNodeStatus()
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.flex-1 {
+  flex: 1;
+}
+.ks-org-tree {
+  display: flex;
+  flex-direction: column;
+  // height: 100%;
+  background: #fff;
+  &-header {
+    display: flex;
+    flex-direction: column;
+    padding-top: 14px;
+    margin-bottom: 10px;
+    overflow-y: auto;
+    &-title {
+      display: flex;
+      align-items: center;
+      margin-bottom: 10px;
+      padding: 0 16px;
+      &-label {
+        font-size: 18px;
+        margin-left: 8px;
+      }
+    }
+    &-input {
+      flex: 1;
+      .van-field__control {
+        font-size: 12px !important;
+        font-weight: 400 !important;
+      }
+    }
+  }
+  &-wrapper {
+    .flex-1;
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+    background-color: #fff;
+    padding: 0 16px;
+  }
+  &-footer {
+    background: #ffffff;
+    padding: 0 10px;
+    .btn-normal {
+      color: #165DFF !important;
+      background: #fff !important;
+      border: 1px solid rgba(22, 93, 255, 0.5);
+    }
+    /deep/ .van-grid-item__content {
+      padding: 16px;
+    }
+  }
+}
+</style>
+<style>
+.ks-org-tree .van-button--large {
+  height: 36px;
+  line-height: 36px;
+  font-size: 14px;
+  font-weight: 400;
+}
+.ks-org-tree .van-search {
+  padding: 0 16px !important;
+}
+</style>

package/kuasheng-ui/components/ks-org/ks-popup-tree.vue

@@ -0,0 +1,154 @@
+<template>
+  <van-popup
+    class="ks-pop-org-tree"
+    :value="value"
+    :position="position"
+    :overlay='overlay'
+    :overlay-style='overlayStyle'
+    :get-container="getContainer"
+    :style="{...defaultStyle}"
+    ref="pop"
+    :lazy-render="lazyRender"
+    :closeable="closeable"
+    :close-on-click-overlay="closeOnClickOverlay"
+    @click-overlay="onClose"
+    @open="open"
+  >
+    <ks-org-tree
+      style="height:100%"
+      ref="KsOrgTree"
+      :show-title="showTitle"
+      :default-checked-keys='defaultCheckedKeys'
+      :tree-id='treeId'
+      :filterNodeMethod="filterNodeMethod"
+      :filterTreeMethods="filterTreeMethods"
+      @node-click='treeNodeClick'
+      @handleChange='handleChange'
+      @clear='clear'
+      @onClose='onClose'
+    >
+      <template slot="title">
+        <slot name="title"></slot>
+      </template>
+      <template slot="treeNode" slot-scope="{node, attrs}">
+        <slot name="treeNode" :node='node' :attrs='attrs'></slot>
+      </template>
+    </ks-org-tree>
+  </van-popup>
+</template>
+
+<script>
+  import KsOrgTree from './ks-org-tree.vue'
+  export default {
+    name: 'ks-org-tree-pop',
+    components: {
+      KsOrgTree
+    },
+    props: {
+      defaultStyle: {
+        type: Object,
+        default: () => ({
+          height: '100%',
+          borderRadius: '12px 0px 0px 12px',
+          width: '90%'
+        })
+      },
+      overlay: {
+        type: Boolean,
+        default: false
+      },
+      closeable: {
+        type: Boolean,
+        default: false
+      },
+      lazyRender: {
+        type: Boolean,
+        default: false
+      },
+      closeOnClickOverlay: {
+        type: Boolean,
+        default: false
+      },
+      getContainer: {
+        type: String,
+        default: 'body'
+      },
+      position: {
+        type: String,
+        default: 'right'
+      },
+      defaultCheckedKeys: {
+        type: Array,
+        default: () => ([])
+      },
+      treeId: String,
+      value: Boolean,
+      showTitle: {
+        type: Boolean,
+        default: true
+      },
+      filterNodeMethod: Function,
+      filterTreeMethods: Function
+    },
+    data () {
+      return {
+        height: 0,
+        overlayStyle: {
+          zIndex: 99
+        },
+      }
+    },
+    watch: {
+      value(val) {
+        window.ks && window.ks.setCloseButton && window.ks.setCloseButton({ isShow: !val })
+      }
+    },
+    methods: {
+      treeNodeClick(item) {
+        this.$emit('node-click', item)
+      },
+      clear() {
+        this.$emit('clear')
+      },
+      queryNodeDetail(id) {
+        return this.$refs.KsOrgTree.$refs.tree.queryNodeDetail(id)
+      },
+      getTreeData() {
+        return this.$refs.KsOrgTree.$refs.tree.treeData
+      },
+      open () {
+        this.$nextTick(() => {
+          this.$refs.KsOrgTree.open()
+        })
+      },
+      /*
+      * 确定
+      */
+      async handleChange (v) {
+        this.$emit('handleChange', v)
+        this.$emit('input', false)
+      },
+       /*
+      * 关闭
+      */
+      onClose () {
+        this.$emit('input', false)
+        this.$emit('onClose')
+      },
+    }
+  }
+</script>
+<style lang="less">
+.ios .ks-pop-org-tree .ks-org-tree-header {
+  padding-top: 30px !important;
+}
+.ipx .ks-pop-org-tree .ks-org-tree-header {
+  padding-top: 56px !important;
+}
+
+.afc .ks-pop-org-tree .ks-org-tree-header {
+  padding-top: calc(12px + var(--status-bar-height, 0px))
+}
+</style>
+
+

package/kuasheng-ui/components/ks-org/ks-tree-input.vue

@@ -0,0 +1,240 @@
+<template>
+  <div class="ks-org-input">
+    <kye-input-search ref="ksInputSearch" :value="searchVal" :clearable="false" :placeholder="placeholder" @focus="focus" @blur="blur" @change="change">
+      <template v-if="clearable" #right-icon>
+        <div v-show="showClearVal.length > 0" style="color: #c8c9cc;padding: 0 8px;" @click.stop="clear">
+          <van-icon name="clear" />
+        </div>
+      </template>
+    </kye-input-search>
+    <transition name="el-zoom-in-top">
+      <div v-show="showList" class="ks-org-input-search-list">
+        <ul class="ks-org-input-search-list-ul">
+          <li class="ks-org-input-search-list-list-item" v-for="item in orgList" :key="item.id" @click="selectOrg(item)">
+            <div class="ks-org-input-search-list-item-name" v-html="item.$name"></div>
+          </li>
+          <div v-show="!orgList.length" class="ks-org-input-search-list-no-data-container">
+            <img class="ks-org-input-search-list-no-data-container-img" src="https://erphostjs.kye-erp.com/kuasheng-h5/pe/empty-image/NoContent.png" />
+            <div class="ks-org-input-search-list-no-data-container-text">
+              没有找到<span v-if="searchVal">“</span><span class="ks-org-input-search-list-no-data-container-text-label">{{ searchVal }}</span
+              ><span v-if="searchVal">”</span>相关结果
+            </div>
+          </div>
+        </ul>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import KyeInputSearch from '../ks-input-search/index.vue'
+import { deepSearch } from './utils.js'
+export default {
+  name: 'ks-tree-input',
+  props: {
+    clearable: Boolean,
+    inputNumber: {
+      type: Number,
+      default: 0
+    },
+    value: {
+      type: String,
+      default: ''
+    },
+    treeData: {
+      type: Array,
+      default: () => []
+    },
+  },
+  data() {
+    return {
+      searchVal: this.value,
+      placeholder: '请搜索关键词',
+      showClearVal: '',
+      showList: false,
+      orgList: []
+    }
+  },
+  components: {
+    KyeInputSearch
+  },
+  methods: {
+    getItemCheckedStatus(id, node) {
+      const that = this
+      const item = deepSearch(id, this.treeData)
+      const { checked = false, parentIdList = [] } = item || {}
+      // 如果父级中的某个节点被选中，则勾上
+      let parentNodeIsChecked =
+        parentIdList.length &&
+        parentIdList.some(x => {
+          const parentNode = deepSearch(x, that.treeData)
+          if (parentNode && parentNode.checked) {
+            return true
+          }
+        })
+      this.$set(node, 'checked', parentNodeIsChecked || checked)
+      return node.checked
+    },
+    nodeChecked(e, node) {
+      const checkedVm = e.currentTarget && e.currentTarget.__vue__
+      const v = checkedVm.value
+      // 反选
+      node.checked = !node.checked
+      checkedVm && this.$emit('inputChecked', { ...node, checked: v })
+    },
+    setSearchValue(val) {
+      this.searchVal = val
+      this.$refs.ksInputSearch.setValue(val)
+    },
+    focus() {
+      this.$emit('focus')
+    },
+    blur() {
+      this.$emit('blur')
+    },
+    change(val) {
+      this.showClearVal = val
+      this.searchVal = val
+      this.searchInput(val)
+      this.$emit('change', val)
+    },
+    clear() {
+      this.searchVal = ''
+      this.showClearVal = ''
+      this.$refs.ksInputSearch && this.$refs.ksInputSearch.setValue('')
+      this.orgList = []
+      this.showList = false
+      this.$emit('clear')
+    },
+    /*
+     * 即时搜索
+     */
+    async searchInput() {
+      if (this.searchVal.length === this.inputNumber) {
+        this.orgList = []
+        this.showList = false
+        return
+      }
+      this.showList = true
+      await this.getOrgList()
+    },
+    /*
+     * 获取搜索数据
+     */
+    async getOrgList() {
+      const v = this.searchVal
+      this.showList = true
+      const res = await this.$http('hr.department.refactoring.getByFuzzyValue', 10179, { fuzzyValue: v })
+      this.orgList = this.processOrgList(v, res)
+    },
+    processOrgList(v, res) {
+      if (!res || !res.length) {
+        return []
+      }
+      const reg = new RegExp(v, 'gi')
+      res = res.map(v => {
+        let $name = v.departmentRoute.replace(/\//g, ` / `) // / 的前后添加空格
+        $name = $name.replace(reg, value => `<span style="color: #165DFF;">${value}</span>`)
+        const { id, parentId, name } = v
+        return {
+          id,
+          parentId,
+          name,
+          $name
+        }
+      })
+      return res
+    },
+    selectOrg(val) {
+      if (this.multiple) {
+        return
+      }
+      this.showList = false
+      this.searchVal = val.name
+      this.$emit('selectOrg', val)
+    }
+  }
+}
+</script>
+
+<style lang="less">
+.ks-org-input {
+  // height: 100%;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  .van-search__content {
+    border-radius: 8px !important;
+  }
+  .van-cell {
+    height: 28px;
+    display: flex;
+    align-items: center;
+  }
+  .van-field__left-icon {
+    margin-right: 7px;
+  }
+  .van-field__right-icon {
+    margin-right: -12px;
+  }
+
+  &-search-list {
+    &-ul {
+      flex: 1;
+      overflow-y: scroll;
+    }
+    &-btn {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      margin-top: 18px;
+    }
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    background-color: #fff;
+    padding: 0 12px;
+    z-index: 99;
+    overflow: hidden;
+    -webkit-overflow-scrolling: touch;
+    border-top: 1px solid #ebedf5;
+    margin-top: 9px;
+    li {
+      padding: 13px 0 10px 0;
+      border-bottom: 1px solid #ebedf5;
+      font-size: 13px;
+      color: #333;
+      line-height: 17px;
+      font-weight: 400;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &-no-data-container {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 26px;
+      color: #b0b3bf;
+      flex-direction: column;
+      width: 100%;
+      &-img {
+        width: 140px;
+        height: 140px;
+      }
+      &-text {
+        margin-top: 8px;
+        font-size: 14px;
+        font-weight: 400;
+        text-align: center;
+        color: #b0b3bf;
+        line-height: 18px;
+        &-label {
+          color: #4581ff;
+        }
+      }
+    }
+  }
+}
+</style>