@kyfe/ks-query-table 0.0.9 → 0.0.11

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

@@ -1,247 +0,0 @@
-<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

@@ -1,154 +0,0 @@
-<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

@@ -1,240 +0,0 @@
-<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>