web-component-gallery 1.3.12 → 2.0.2

package/lib/tree/Directory.js

@@ -1,428 +0,0 @@
-import { h } from 'vue'
-import { getTreeKey, filterTreeById } from '../../utils/Tree'
-import { Tree, Menu, Input, Icon, Button, Dropdown, Popconfirm } from 'ant-design-vue'
-import './style/Directory.less'
-
-import SvgIcon from '../svgIcon' 
-
-/* 明天来了做一下@快捷指向 */
-
-const TreeNode = Tree.TreeNode
-const DirectoryTree = Tree.DirectoryTree
-
-export default {
-  name: 'DirectoryTreeMenu',
-  props: {
-    treeData: {
-      type: Array,
-      default: () => ([])
-    },
-    treeExpandKeys: {
-      type: Array,
-      default: () => ([])
-    },
-    treePlus: {
-      type: Boolean,
-      default: true
-    },
-    treeActions: {
-      type: Array, 
-      default: () => ([])
-    },
-    /** 是否只显示父级一层操作 */
-    treeActionsParent: {
-      type: Boolean,
-      default: false
-    },
-    treeActionsPlus: {
-      type: Boolean,
-      default: true
-    },
-    replaceFields: {
-      type: Object,
-      default: () => ({
-        children: 'children',
-        key: 'id',
-        title: 'title'
-      })
-    }
-  },
-  data() {
-    return {
-      NodeCheckedKeys: [],
-      NodeSelectedKeys: [],
-      NodeExpandKeys: [],
-      NodeKey: [],
-      NodeActions: null,
-      MenuDropdown: false,
-      NodeActionsStyle: {}
-    }
-  },
-  mounted() {
-    this.onInitTree()
-    // this.NodeExpandKeys = ( this.treeExpandKeys.length && this.treeExpandKeys ) || ( treeExpend && getTreeKey(this.treeData, true, this.replaceFields) ) || []
-  },
-  watch: {
-    treeData(newValue, oldValue) {
-      this.onInitTree( !oldValue.length ) 
-    },
-    treeExpandKeys: {
-      handler(newValue) {
-        this.NodeExpandKeys = newValue
-      },
-      immediate: true
-    }
-  },
-  methods: {
-    TreeNodeRender(node, nodeIndex, parentNode) {
-      const {
-        replaceFields,
-        NodeActions,
-        treeActions,
-        NodeActionsStyle,
-        NodeExpandKeys,
-        NodeKey,
-        treeActionsPlus,
-        createTreeNode,
-        handleMouseLeave,
-        handleOperateClick,
-        handlePlusClick
-      } = this 
-      const key = node[replaceFields.key]
-      const treeActionsParent = this.treeActionsParent ? !parentNode : true
-      return (
-        <TreeNode
-          key={key}
-          class="DirectoryTreeMenu__Node"
-          scopedSlots={{
-            title: props => {
-              return (
-                <div class="__Title">
-                  {node.type != 'input' ? (
-                    <span>{node[replaceFields.title]}</span> 
-                  ) : (
-                    <Input
-                      placeholder="请输入节点名称"
-                      {...{ 
-                        on: {
-                          blur: ({ target }) => createTreeNode(target, node),
-                          pressEnter: event => event.target.blur(event, true)
-                        }
-                      }}
-                      default-value={node[replaceFields.title]}
-                      ref="inputNodeRef"
-                    />
-                  )}  
-                  {NodeActions && NodeKey.includes(props.eventKey) && treeActionsParent && node.type != 'input' && (
-                    <div
-                      ref="TreeMenuActions"
-                      class="DirectoryTreeMenu__Actions"
-                      // 通过阻止mouseenter事件冒泡来达到 触发中的时候不切换
-                      {...{on: { mouseenter: event => event.stopPropagation() }} }
-                    >
-                      <Dropdown
-                        trigger={['click']}
-                        overlayClassName="DirectoryTreeMenu__Dropdown"
-                      > 
-                      {/* getPopupContainer={() => this.$refs.TreeMenuActions}  */}
-                        <SvgIcon
-                          class="ActionsIcons"
-                          icon-class="tree-more"
-                          {...{
-                            on: {
-                              click: e => e.preventDefault()
-                            }
-                          }}
-                        />
-                        <div slot="overlay" class="DirectoryTreeMenu__Dropdown__Menu">
-                          {treeActions.map((handle, i) => {
-                            return (
-                              <span
-                                key={i}
-                                {...{
-                                  on: {
-                                    // this.$emit('handleOperateClick', handle, NodeActions)
-                                    click: () => handleOperateClick(handle, { ...node, nodeIndex }, parentNode)
-                                  }
-                                }}
-                              >
-                                <SvgIcon icon-class={handle.svg} /> {handle.text}
-                              </span>
-                            )
-                          })}
-                        </div>
-                      </Dropdown>
-                      {
-                        treeActionsPlus && 
-                        <SvgIcon
-                          class="ActionsIcons"
-                          icon-class="tree-plus"
-                          {...{
-                            on: {
-                              click: () => handlePlusClick()
-                            }
-                          }}
-                        />
-                      }
-                    </div>
-                  )}
-                </div>
-              )
-            }
-          }}
-        >
-          {node[replaceFields.children] &&
-            node[replaceFields.children].length &&
-            node[replaceFields.children].map((childNode, childNodeIndex) =>
-              this.TreeNodeRender(childNode, childNodeIndex, node)
-            )}
-        </TreeNode>
-      )
-    },
-    appendTreeNode() {
-      this.treeData.push({
-        type: 'input',
-        append: true,
-        [this.replaceFields.key]: new Date().getTime()
-      })
-      this.$nextTick(() => this.$refs.inputNodeRef.focus())
-    },
-    createTreeNode({ value }, node) {
-      this.$set(node, 'type', 'text')
-      this.$emit(
-        `handlePlus${node.append ? 'Add' : 'Update'}`,
-        value,
-        node.append ? node.parentOrgId : node[this.replaceFields.key]
-      )
-      const parentNodes = node.parentOrgId
-        ? this.findItemById(this.treeData, node.parentOrgId)[this.replaceFields.children]
-        : this.treeData
-      if (node.append) {
-        const i = parentNodes.findIndex(child => child[this.replaceFields.key] == node[this.replaceFields.key])
-        parentNodes.splice(i, 1)
-      }
-    }, 
-    handleOperateClick(handle, node, parentNode) {
-      const key = node[this.replaceFields.key]
-      let that = this
-      switch (handle.type) {
-        case 'update':
-          const updateNode = this.findItemById(this.treeData, key)
-          this.$set(updateNode, 'type', 'input')
-          this.$nextTick(() => this.$refs.inputNodeRef.focus())
-          break
-        case 'copy':
-          // 明天来了优化一下
-          const cloneNode = parentNode ? parentNode[this.replaceFields.children] : this.treeData
-          cloneNode.splice(node.nodeIndex + 1, 0, {
-            type: 'input',
-            append: true,
-            parentOrgId: parentNode ? parentNode[this.replaceFields.key] : null,
-            [this.replaceFields.key]: new Date().getTime(),
-            [this.replaceFields.title]: node[this.replaceFields.title]
-          })
-          this.$nextTick(() => this.$refs.inputNodeRef.focus())
-          break
-        case 'delete':
-          this.$confirm({
-            title: '确定要删除当前节点吗?',
-            okText: '确定',
-            cancelText: '取消',
-            onOk() {
-              that.$emit('handleDeleteClick', node)
-              console.log('OK')
-            },
-            onCancel() {
-              console.log('Cancel')
-            }
-          })
-          break
-        default:
-          this.$emit('handleOperateClick', handle, node)
-          break
-      }
-    }, 
-    handlePlusClick() {
-      const node = this.findItemById(this.treeData, this.NodeActions.id)
-      const childNode = node[this.replaceFields.children] ?? []
-      childNode.push({
-        type: 'input',
-        append: true,
-        parentOrgId: this.NodeActions.id,
-        [this.replaceFields.key]: new Date().getTime()
-      })
-      this.NodeExpandKeys.push(this.NodeActions.id)
-      node[this.replaceFields.children] = childNode
-      this.$nextTick(() => this.$refs.inputNodeRef.focus())
-    },
-    findItemById(treeData, id) {
-      for (let i = 0; i < treeData.length; i++) {
-        if (treeData[i][this.replaceFields.key] === id) return treeData[i]
-        let childNode = treeData[i][this.replaceFields.children]
-        if (childNode && childNode.length > 0) {
-          const foundItem = this.findItemById(treeData[i][this.replaceFields.children], id)
-          if (foundItem) return foundItem
-        }
-      }
-    },
-    onInitTree(treeExpend = true) {
-      this.treeData && (this.NodeSelectedKeys = [this.treeData.at(0)?.[this.replaceFields.key]])
-      // this.NodeExpandKeys = ( this.treeExpandKeys.length && this.treeExpandKeys ) || ( treeExpend && getTreeKey(this.treeData, true, this.replaceFields) ) || []
-    },
-    onCheck(keys, {}) {
-      this.NodeCheckedKeys = keys
-      this.$emit('onCheck', keys)
-    },
-    onSelect(keys, { nativeEvent, node }) {
-      this.NodeSelectedKeys = keys
-      this.NodeKey = [].concat(this.NodeSelectedKeys)
-      this.$emit('onSelect', keys)
-    },
-    onExpand(expandedKeys, { expanded, node }) {
-      this.NodeExpandKeys = [].concat(expandedKeys)
-      console.log(expandedKeys, expanded, node, 'Trigger Expand')
-    },
-    getIcon(props) {
-      const { isLeaf, expanded } = props
-      if (isLeaf) {
-        return <Icon type="home" />
-      }
-      return <Icon type={expanded ? 'folder-open' : 'folder'} />
-    },
-    handleMouseEnter({ event, node }) {
-      this.NodeActions = {
-        id: node._props.eventKey,
-        title: node._props.title,
-        parentOrgId: node.$parent.eventKey || null
-      }  
-      // this.MenuDropdown = false 
-      this.NodeKey = [].concat(this.NodeSelectedKeys)
-      this.NodeKey.push(node.eventKey)
-      // console.log(node, 'handleMouseEnter')
-      // 是否加个参数 判断是否处于打开状态
-    },
-    handleMouseLeave({ event, node }) {
-      if( this.NodeKey.includes(node.eventKey) && this.NodeSelectedKeys != node.eventKey ) {
-        const i = this.NodeKey.findIndex( key => key == node.eventKey )
-        this.NodeKey.splice( i, 1 )
-      }
-      // this.NodeKey = []
-    }, 
-    onDragEnter(node) {
-      console.log(node, '--onDragEnter')
-      // expandedKeys 需要受控时设置
-      // this.expandedKeys = info.expandedKeys
-    },
-    onDrop(info) {
-      
-      const dragKey = info.dragNode.eventKey
-      const dropPos = info.node.pos.split("-")
-      // 拖动的位置
-      const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1])
-
-      const node = info.node //目标节点
-      const dragNode = info.dragNode // 拖动节点
-      const dropKey = node.eventKey
-
-      console.log( dragNode, node, '--dropToGap' )    
-
-      if (dragNode.$parent?.eventKey !== node.$parent?.eventKey || !info.dropToGap) {
-        // 阻止跨父级拖拽
-        this.$message.warning("只能在同级排序")
-        return false
-      } 
-
-      const { key, children } = this.replaceFields
- 
-      const loop = (data, eventKey, callback) => {
-        data.forEach((node, i, array) => {
-          if ( node[key] === eventKey ) {
-            return callback( node, i, array )
-          }
-          if ( node[children] ) {
-            return loop( node[children], eventKey, callback )
-          }
-        })
-      }
- 
-      const data = [...this.treeData]
-
-      let dragObj
-      let dragObjIndex
-      loop(data, dragKey, (node, i, array) => {
-        dragObj = node
-        dragObjIndex = i
-      })
-
-      let dropIndex
-      loop(data, dropKey, (node, i, array) => {
-        dropIndex = i
-        console.log( node, i, dragObj, dragObjIndex,  '--i' )
-      })
-
-      this.$emit(
-        'onDrop', 
-        { 
-          [key]: dragObj[key], 
-          originalIndex: dragObjIndex, 
-          presentIndex: dropPosition === -1 ? dropIndex : dropIndex + 1 
-        }
-      )
-    }
-  },
-  render() {
-    const {
-      $attrs,
-      treePlus,
-      treeData,
-      NodeCheckedKeys,
-      NodeSelectedKeys,
-      NodeExpandKeys,
-      onCheck,
-      onSelect,
-      onExpand,
-      handleMouseEnter,
-      handleMouseLeave,
-      onDragEnter,
-      onDrop,
-      TreeNodeRender,
-      appendTreeNode,
-      replaceFields
-    } = this
-    return (
-      <div class="DirectoryTreeMenu">
-        {
-          $attrs.menuTitle &&
-          <div class="treeDirectory">
-            <span>{$attrs.menuTitle || '目录'}</span>
-            {treePlus && <Button icon="plus" size="small" {...{ on: { click: appendTreeNode } }} />}
-          </div>
-        }
-        <DirectoryTree
-          draggable
-          class="DirectoryTreeMenu__Tree"
-          default-expand-all
-          checkedKeys={NodeCheckedKeys}
-          selectedKeys={NodeSelectedKeys}
-          expandedKeys={NodeExpandKeys}
-          expandAction="dblclick"
-          {...{
-            on: {
-              check: onCheck,
-              select: onSelect,
-              expand: onExpand,
-              mouseenter: handleMouseEnter,
-              mouseleave: handleMouseLeave,
-              dragenter: onDragEnter,
-              drop: onDrop
-            },
-            attrs: $attrs
-          }}
-          tree-node-filter-prop="title"
-        >
-          {treeData.map((node, nodeIndex) => TreeNodeRender(node, nodeIndex))}
-        </DirectoryTree>
-      </div>
-    )
-  }
-}

package/lib/tree/Tree.vue

@@ -1,181 +0,0 @@
-<template>
-  <div class="publicTreeCheck">
-    <div class="TreeSelect">
-      <slot name="SearchTree" v-if="isHasSearch">
-        <InputSearch placeholder="请输入关键字" @change="searchHandle" />
-      </slot> 
-
-      <Tree
-        checkable
-        v-bind="$attrs"
-        :treeData="treeData"
-        :replaceFields="replaceFields"
-        :expandedKeys="innerExpandedKeys"
-        :checkedKeys="innerCheckedKeys"
-        @expand="onExpand"
-        @check="onCheck"
-      />
-    </div>
-
-    <div class="TreeReveal">
-      <div class="TreeSelectCount">
-        <span>已选: {{ innerTreeOptions.length }}</span>
-        <span class="clear" @click="innerCheckedKeys = []">清空</span>
-      </div>
-
-      <div class="TreeListPage">
-        <CheckboxGroup
-          v-model="innerCheckedKeys"
-          name="checkboxgroup"
-          :options="innerTreeOptions"
-          @change="onChange"
-        />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { Tree, Checkbox, Input } from 'ant-design-vue'
-
-import { getTreeKey, findCheckNodes } from '../../utils/Tree'
-
-export default {
-  name: 'TreeTransfer',
-  components: { 
-    Tree,
-    InputSearch: Input.Search,
-    CheckboxGroup: Checkbox.Group
-  },
-  props: {
-    /** 是否携带搜索 */
-    isHasSearch: {
-      type: Boolean,
-      default: true
-    },
-    checkedKeys: {
-      // 传递选中的key
-      type: Array,
-      default: () => []
-    },
-    checkNodes: {
-      // 传递选中的node节点
-      type: Array,
-      default: () => []
-    },
-    expandedKeys: {
-      // 传递需要展开的key / 默认为全部展开
-      type: Array,
-      default: () => []
-    },
-    treeData: {
-      type: Array,
-      // 传递树形结构数据
-      default: () => []
-    },
-    replaceFields: {
-      type: Object,
-      default: () => ({
-        children: 'children',
-        key: 'id',
-        title: 'title'
-      })
-    }
-  },
-  data() {
-    return {
-      initTreeData: [], // 缓存原始组树结构
-      openSearch: false, // 是否开启搜索
-      innerCheckedKeys: [], // 选中的值
-      innerExpandedKeys: [] //  展开的值
-    }
-  },
-  watch: {
-    checkedKeys: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        newValue && (this.innerCheckedKeys = newValue)
-      }
-    },
-    expandedKeys: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        newValue && (this.innerExpandedKeys = newValue)
-      }
-    },
-    checkNodes: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        newValue && (this.innerCheckedKeys = newValue.map(e => e[this.replaceFields.key]))
-      }
-    },
-    treeData: {
-      immediate: true,
-      deep: true,
-      handler(newValue, oldValue) {
-        !this.openSearch && (this.initTreeData = [].concat(this.treeData))
-        newValue && (this.innerExpandedKeys = this.getTreeAllGroupKey)
-      }
-    }
-  },
-  mounted() {
-    // 缓存原始组
-    this.initTreeData = [].concat(this.treeData)
-    this.innerExpandedKeys = this.getTreeAllGroupKey
-  },
-  computed: {
-    cacheEmitValue() {
-      // 缓存响应的值
-      return {
-        checkedKeys: this.innerCheckedKeys,
-        expandedKeys: this.innerExpandedKeys
-      }
-    },
-    getTreeAllKey() {
-      // 获取树的所有key
-      return getTreeKey(this.initTreeData)
-    },
-    getTreeAllGroupKey() {
-      // 获取树的所有组key
-      return getTreeKey(this.initTreeData, true, this.replaceFields)
-    }, 
-    innerTreeOptions() {
-      const { key, title, children } = this.replaceFields
-      return findCheckNodes(this.initTreeData, this.innerCheckedKeys, key, children).filter(
-        e => ((e.label = e[title]), (e.value = e[key])) 
-      )
-    }
-  },
-
-  methods: {
-    onExpand(expandedKeys) {
-      this.innerExpandedKeys = expandedKeys
-    },
-    onCheck(checkedKeys, { checked, checkedNodes, node, event }) {
-      const { key, children } = this.replaceFields
-      if (!this.openSearch) return (this.innerCheckedKeys = checkedKeys)
-      checked
-        ? (this.innerCheckedKeys = this.innerCheckedKeys.concat(
-            findCheckNodes(this.initTreeData, checkedKeys, key, children).map(node => node[key])
-          ))
-        : this.innerCheckedKeys.splice(
-            this.innerCheckedKeys.findIndex(nodeKey => nodeKey == node.eventKey),
-            1
-          )
-    },
-    onChange(checkedKeys) {
-      console.log(checkedKeys, 'checkedKeys')
-    },
-    searchHandle({ target }) {
-      this.openSearch = Boolean(target.value)
-      this.$emit('SearchTree', target.value)
-    }
-  }
-}
-</script>
-<style lang="less" scoped>
-@import url('./style/Tree.less');
-</style>

package/lib/tree/style/Tree.less

@@ -1,52 +0,0 @@
-/* 混入样式 */
-@import '../../style/mixins.less'; 
-@import 'ant-design-vue/lib/style/themes/default.less';
-
-.publicTreeCheck { 
-    display: flex;
-    .square( 100% );
-  
-    & > div {
-      flex: 1;
-      padding: @padding-md @padding-lg; 
-      box-sizing: border-box;
-      overflow-y: auto;
-      .scrollbarStyle();
-      .flex-layout( column );
-    }
-  
-    .TreeSelect {
-      border-right: 1px solid @border-color-split;
-    }
-  
-    .TreeReveal {
-      .TreeSelectCount {
-        display: flex;
-        color: @primary-color;
-        margin-bottom: @padding-md;
-  
-        .clear {
-          flex: 1;
-          text-align: right;
-          color: @info-color;
-          cursor: pointer;
-        }
-      }
-  
-      .TreeListPage {
-        .scrollbarStyle();
-        :deep(.ant-checkbox-group) {
-          width: 100%;
-          .flex-layout( column );
-        }
-        :deep(.ant-checkbox-group-item) {
-          height: 40px;
-          display: flex;
-          align-items: center;
-          margin-right: 0;
-          padding: 0 @padding-sm;
-          box-sizing: border-box;
-        }
-      }
-    }
-}