[暂存]: 暂存工作区
This commit is contained in:
落小梅
parent
b3538eba74
commit
729e1d2e18
107
src/module/tree/TreeEntity.vue
Normal file
107
src/module/tree/TreeEntity.vue
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'LayTreeEntity',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { computed, unref, VNode, VNodeChild } from 'vue'
|
||||||
|
import LayIcon from '../icon'
|
||||||
|
|
||||||
|
interface TreeData {
|
||||||
|
/**
|
||||||
|
* 节点唯一索引值，用于对指定节点进行各类操作
|
||||||
|
*/
|
||||||
|
id: string | number
|
||||||
|
/**
|
||||||
|
* 节点标题
|
||||||
|
*/
|
||||||
|
title: string | (() => string)
|
||||||
|
/**
|
||||||
|
* 节点字段名
|
||||||
|
*/
|
||||||
|
field: string | (() => string)
|
||||||
|
/**
|
||||||
|
* 子节点。支持设定选项同父节点
|
||||||
|
*/
|
||||||
|
children: TreeData[]
|
||||||
|
/**
|
||||||
|
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||||
|
* 废弃，通过 on-click事件用户控制
|
||||||
|
*/
|
||||||
|
href: string | URL
|
||||||
|
/**
|
||||||
|
* 节点是否初始展开，默认 false
|
||||||
|
* 废弃：设置 v-model:spreadKeys
|
||||||
|
*/
|
||||||
|
spread: boolean
|
||||||
|
/**
|
||||||
|
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||||
|
* 废弃：设置 v-model:checkedKeys
|
||||||
|
*/
|
||||||
|
checked: boolean
|
||||||
|
/**
|
||||||
|
* 节点是否为禁用状态。默认 false
|
||||||
|
*/
|
||||||
|
disabled: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface TreeEntityProps {
|
||||||
|
node: TreeData
|
||||||
|
id: string | number
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps<TreeEntityProps>()
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<template v-if="node.children && node.children.length > 0">
|
||||||
|
<div
|
||||||
|
class="layui-tree-set"
|
||||||
|
:class="{
|
||||||
|
// 'layui-tree-setLineShort': (index + 1) === data.length,
|
||||||
|
'layui-tree-setLineShort': false,
|
||||||
|
'layui-tree-setHide': node._isRoot,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<!-- {{index}}, {{ data.length }}-->
|
||||||
|
<div class="layui-tree-entry">
|
||||||
|
<div class="layui-tree-main">
|
||||||
|
<span
|
||||||
|
class="layui-tree-iconClick layui-tree-icon"
|
||||||
|
>
|
||||||
|
<LayIcon
|
||||||
|
type="layui-icon-subtraction"
|
||||||
|
></LayIcon>
|
||||||
|
</span>
|
||||||
|
<span class="layui-tree-txt">{{ node.title }}---{{node._hasChild}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||||
|
style="display: block"
|
||||||
|
>
|
||||||
|
<LayTreeEntity
|
||||||
|
v-for="(item, index) in node.children"
|
||||||
|
:key="index"
|
||||||
|
:node="item"
|
||||||
|
:id="item.id"
|
||||||
|
></LayTreeEntity>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<div class="layui-tree-set" :class="{'layui-tree-setLineShort': false}"><!-- :class="{'layui-tree-setLineShort': isLast}"-->
|
||||||
|
<div class="layui-tree-entry">
|
||||||
|
<div class="layui-tree-main">
|
||||||
|
<span
|
||||||
|
class="layui-tree-iconClick">
|
||||||
|
<LayIcon
|
||||||
|
type="layui-icon-file"
|
||||||
|
></LayIcon>
|
||||||
|
</span>
|
||||||
|
<span class="layui-tree-txt">{{ node.title }}, {{node._hasChild}},{{node._parentExtend}}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<style scoped lang="less"></style>
|
||||||
@ -1,5 +1,6 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { VNode, VNodeChild } from 'vue'
|
import { computed, unref, VNode, VNodeChild } from 'vue'
|
||||||
|
import TreeEntity from './TreeEntity.vue'
|
||||||
|
|
||||||
interface TreeData {
|
interface TreeData {
|
||||||
/**
|
/**
|
||||||
@ -20,14 +21,17 @@ interface TreeData {
|
|||||||
children: TreeData[]
|
children: TreeData[]
|
||||||
/**
|
/**
|
||||||
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
* 点击节点弹出新窗口对应的 url。需开启 isJump 参数
|
||||||
|
* 废弃，通过 on-click事件用户控制
|
||||||
*/
|
*/
|
||||||
href: string | URL
|
href: string | URL
|
||||||
/**
|
/**
|
||||||
* 节点是否初始展开，默认 false
|
* 节点是否初始展开，默认 false
|
||||||
|
* 废弃：设置 v-model:spreadKeys
|
||||||
*/
|
*/
|
||||||
spread: boolean
|
spread: boolean
|
||||||
/**
|
/**
|
||||||
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
* 节点是否初始为选中状态（如果开启复选框的话），默认 false
|
||||||
|
* 废弃：设置 v-model:checkedKeys
|
||||||
*/
|
*/
|
||||||
checked: boolean
|
checked: boolean
|
||||||
/**
|
/**
|
||||||
@ -41,6 +45,18 @@ type EditAction = 'add' | 'update' | 'del'
|
|||||||
type EditType = boolean | EditAction[]
|
type EditType = boolean | EditAction[]
|
||||||
|
|
||||||
interface TreeProps {
|
interface TreeProps {
|
||||||
|
/**
|
||||||
|
* 指定唯一的id
|
||||||
|
*/
|
||||||
|
id?: string
|
||||||
|
/**
|
||||||
|
* 选中的节点
|
||||||
|
*/
|
||||||
|
checkedKeys?: any[]
|
||||||
|
/**
|
||||||
|
* 展开的节点
|
||||||
|
*/
|
||||||
|
spreadKeys?: any[]
|
||||||
/**
|
/**
|
||||||
* 数据源
|
* 数据源
|
||||||
*/
|
*/
|
||||||
@ -66,6 +82,7 @@ interface TreeProps {
|
|||||||
onlyIconControl?: boolean
|
onlyIconControl?: boolean
|
||||||
/**
|
/**
|
||||||
* 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式
|
* 是否允许点击节点时弹出新窗口跳转。默认 false，若开启，需在节点数据中设定 link 参数（值为 url 格式
|
||||||
|
* 废弃：能过事件用户自行控制
|
||||||
*/
|
*/
|
||||||
isJump?: boolean
|
isJump?: boolean
|
||||||
/**
|
/**
|
||||||
@ -121,9 +138,10 @@ interface TreeEmits {
|
|||||||
* @param treeNode
|
* @param treeNode
|
||||||
*/
|
*/
|
||||||
(e: 'on-operate', treeNode: TreeNode): void
|
(e: 'on-operate', treeNode: TreeNode): void
|
||||||
|
(e: 'update:checkedKeys', keys: any[]): void
|
||||||
|
(e: 'update:spreadKeys', keys: any[]): void
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const props = withDefaults(defineProps<TreeProps>(), {
|
const props = withDefaults(defineProps<TreeProps>(), {
|
||||||
showCheckbox: false,
|
showCheckbox: false,
|
||||||
accordion: false,
|
accordion: false,
|
||||||
@ -133,7 +151,44 @@ const props = withDefaults(defineProps<TreeProps>(), {
|
|||||||
edit: true,
|
edit: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
console.log(props)
|
// tree wrapper style
|
||||||
|
const treeWrapperClass = computed(() => {
|
||||||
|
const { showCheckbox, showLine } = unref(props)
|
||||||
|
return {
|
||||||
|
'layui-tree': true,
|
||||||
|
'layui-form': showCheckbox,
|
||||||
|
'layui-tree-line': showLine,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 按 layui的思路，这里改变数据
|
||||||
|
* @param data
|
||||||
|
* @param isRootNode
|
||||||
|
*/
|
||||||
|
function transformTreeData (data: TreeData[], parentExtend = false, isRootNode = true) {
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
item._parentExtend = !parentExtend ? (index + 1) !== data.length: parentExtend
|
||||||
|
if(isRootNode) {
|
||||||
|
item._isRoot = true
|
||||||
|
}
|
||||||
|
if (item.children) {
|
||||||
|
item._hasChild = true
|
||||||
|
transformTreeData(item.children, item._parentExtend, false)
|
||||||
|
} else {
|
||||||
|
item._hasChild = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const renderData = computed(() => {
|
||||||
|
const { data } = unref(props)
|
||||||
|
transformTreeData(data)
|
||||||
|
console.log(data)
|
||||||
|
return data
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(renderData)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
@ -142,141 +197,145 @@ export default {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<div id="test1" class="demo-tree demo-tree-box">
|
<div :class="treeWrapperClass">
|
||||||
<div class="layui-tree layui-tree-line" lay-filter="LAY-tree-2">
|
<TreeEntity
|
||||||
<div
|
v-for="(node) in renderData"
|
||||||
data-id="1"
|
:key="node.id"
|
||||||
class="layui-tree-set layui-tree-setHide layui-tree-spread"
|
:id="node.id"
|
||||||
>
|
:node="node"
|
||||||
<div class="layui-tree-entry">
|
></TreeEntity>
|
||||||
<div class="layui-tree-main">
|
</div>
|
||||||
<span class="layui-tree-iconClick layui-tree-icon"
|
<hr />
|
||||||
><i class="layui-icon layui-icon-subtraction"></i></span
|
<div class="layui-tree layui-tree-line" lay-filter="LAY-tree-2">
|
||||||
><span class="layui-tree-txt">江西</span>
|
<div
|
||||||
</div>
|
data-id="1"
|
||||||
|
class="layui-tree-set layui-tree-setHide layui-tree-spread"
|
||||||
|
>
|
||||||
|
<div class="layui-tree-entry">
|
||||||
|
<div class="layui-tree-main">
|
||||||
|
<span class="layui-tree-iconClick layui-tree-icon"
|
||||||
|
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||||
|
><span class="layui-tree-txt">江西</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
<div
|
||||||
style="display: block"
|
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||||
>
|
style="display: block"
|
||||||
<div data-id="1000" class="layui-tree-set layui-tree-spread">
|
>
|
||||||
<div class="layui-tree-entry">
|
<div data-id="1000" class="layui-tree-set layui-tree-spread">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick layui-tree-icon"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-subtraction"></i></span
|
<span class="layui-tree-iconClick layui-tree-icon"
|
||||||
><span class="layui-tree-txt">南昌</span>
|
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">南昌</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
<div
|
||||||
style="display: block"
|
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||||
>
|
style="display: block"
|
||||||
<div data-id="10001" class="layui-tree-set">
|
>
|
||||||
<div class="layui-tree-entry">
|
<div data-id="10001" class="layui-tree-set">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
<span class="layui-tree-iconClick"
|
||||||
><span class="layui-tree-txt">青山湖区</span>
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">青山湖区</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
data-id="10002"
|
<div data-id="10002" class="layui-tree-set layui-tree-setLineShort">
|
||||||
class="layui-tree-set layui-tree-setLineShort"
|
<div class="layui-tree-entry">
|
||||||
>
|
<div class="layui-tree-main">
|
||||||
<div class="layui-tree-entry">
|
<span class="layui-tree-iconClick"
|
||||||
<div class="layui-tree-main">
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
<span class="layui-tree-iconClick"
|
><span class="layui-tree-txt">高新区</span>
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
|
||||||
><span class="layui-tree-txt">高新区</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-id="1001" class="layui-tree-set">
|
</div>
|
||||||
<div class="layui-tree-entry">
|
<div data-id="1001" class="layui-tree-set">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
<span class="layui-tree-iconClick"
|
||||||
><span class="layui-tree-txt">九江</span>
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">九江</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-id="1002" class="layui-tree-set">
|
</div>
|
||||||
<div class="layui-tree-entry">
|
<div data-id="1002" class="layui-tree-set">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
<span class="layui-tree-iconClick"
|
||||||
><span class="layui-tree-txt">赣州</span>
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">赣州</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
data-id="2"
|
<div
|
||||||
class="layui-tree-set layui-tree-setHide layui-tree-spread"
|
data-id="2"
|
||||||
>
|
class="layui-tree-set layui-tree-setHide layui-tree-spread"
|
||||||
<div class="layui-tree-entry">
|
>
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick layui-tree-icon"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-subtraction"></i></span
|
<span class="layui-tree-iconClick layui-tree-icon"
|
||||||
><span class="layui-tree-txt">广西</span>
|
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">广西</span>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
<div
|
||||||
style="display: block"
|
class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine"
|
||||||
>
|
style="display: block"
|
||||||
<div data-id="2000" class="layui-tree-set">
|
>
|
||||||
<div class="layui-tree-entry">
|
<div data-id="2000" class="layui-tree-set">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
<span class="layui-tree-iconClick"
|
||||||
><span class="layui-tree-txt">南宁</span>
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">南宁</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-id="2001" class="layui-tree-set">
|
</div>
|
||||||
<div class="layui-tree-entry">
|
<div data-id="2001" class="layui-tree-set">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
<span class="layui-tree-iconClick"
|
||||||
><span class="layui-tree-txt">桂林</span>
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">桂林</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
data-id="3"
|
<div
|
||||||
class="layui-tree-set layui-tree-setHide layui-tree-setLineShort"
|
data-id="3"
|
||||||
>
|
class="layui-tree-set layui-tree-setHide layui-tree-setLineShort layui-tree-spread"
|
||||||
<div class="layui-tree-entry">
|
>
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick layui-tree-icon"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-addition"></i></span
|
<span class="layui-tree-iconClick layui-tree-icon"
|
||||||
><span class="layui-tree-txt">陕西</span>
|
><i class="layui-icon layui-icon-subtraction"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">陕西</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="layui-tree-pack layui-tree-lineExtend">
|
</div>
|
||||||
<div data-id="3000" class="layui-tree-set">
|
<div class="layui-tree-pack layui-tree-lineExtend" style="display: block">
|
||||||
<div class="layui-tree-entry">
|
<div data-id="3000" class="layui-tree-set">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
<span class="layui-tree-iconClick"
|
||||||
><span class="layui-tree-txt">西安</span>
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">西安</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div data-id="3001" class="layui-tree-set layui-tree-setLineShort">
|
</div>
|
||||||
<div class="layui-tree-entry">
|
<div data-id="3001" class="layui-tree-set layui-tree-setLineShort">
|
||||||
<div class="layui-tree-main">
|
<div class="layui-tree-entry">
|
||||||
<span class="layui-tree-iconClick"
|
<div class="layui-tree-main">
|
||||||
><i class="layui-icon layui-icon-file"></i></span
|
<span class="layui-tree-iconClick"
|
||||||
><span class="layui-tree-txt">延安</span>
|
><i class="layui-icon layui-icon-file"></i></span
|
||||||
</div>
|
><span class="layui-tree-txt">延安</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user