This commit is contained in:
parent
46ca4f3b72
commit
c0056a2764
|
@ -1,40 +1,46 @@
|
|||
<template>
|
||||
<page-header-wrapper title="请选择单位">
|
||||
<page-header-wrapper title="请选择受训单位">
|
||||
<!-- showSearch -->
|
||||
<!-- height: '500px',overflowY: 'auto' -->
|
||||
<a-transfer
|
||||
class="tree-transfer"
|
||||
:data-source="dataSource"
|
||||
:titles="['全部单位列表', '已经选中单位']"
|
||||
:target-keys="targetKeys"
|
||||
:render="(item) => item.title"
|
||||
:operations="['选 中', '取 消']"
|
||||
:show-select-all="true"
|
||||
:filter-option="filterOption"
|
||||
@change="onChange"
|
||||
>
|
||||
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
|
||||
<!-- checkStrictly -->
|
||||
<a-tree
|
||||
v-if="direction === 'left'"
|
||||
blockNode
|
||||
checkable
|
||||
defaultExpandAll
|
||||
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
||||
:treeData="treeData"
|
||||
@check="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
@select="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</a-transfer>
|
||||
<a-form-model :model="form">
|
||||
<a-transfer
|
||||
class="tree-transfer"
|
||||
:data-source="dataSource"
|
||||
:titles="['全部单位列表', '已经选中单位']"
|
||||
:target-keys="targetKeys"
|
||||
:render="(item) => item.title"
|
||||
:operations="['选 中', '取 消']"
|
||||
:show-select-all="true"
|
||||
:filter-option="filterOption"
|
||||
@change="onChange"
|
||||
>
|
||||
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
|
||||
<!-- checkStrictly -->
|
||||
<a-tree
|
||||
v-if="direction === 'left'"
|
||||
blockNode
|
||||
checkable
|
||||
defaultExpandAll
|
||||
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
||||
:treeData="treeData"
|
||||
@check="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
@select="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</a-transfer>
|
||||
<a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
|
||||
<a-button type="primary" @click="toNext"> 下一步 </a-button>
|
||||
<a-button style="margin-left: 10px"> 取消 </a-button>
|
||||
</a-form-model-item>
|
||||
</a-form-model>
|
||||
</page-header-wrapper>
|
||||
</template>
|
||||
|
||||
|
@ -76,6 +82,7 @@ const treeData = [
|
|||
|
||||
const transferDataSource = []
|
||||
function flatten(list = []) {
|
||||
console.log('执行了flatten函数:list', list)
|
||||
list.forEach((item) => {
|
||||
transferDataSource.push(item)
|
||||
flatten(item.children)
|
||||
|
@ -84,11 +91,12 @@ function flatten(list = []) {
|
|||
flatten(JSON.parse(JSON.stringify(treeData)))
|
||||
|
||||
function isChecked(selectedKeys, eventKey) {
|
||||
console.log('执行了isChecked函数:', eventKey, selectedKeys)
|
||||
return selectedKeys.indexOf(eventKey) !== -1
|
||||
}
|
||||
|
||||
function handleTreeData(data, targetKeys = []) {
|
||||
console.log("执行了handleTreeData函数:",data,targetKeys)
|
||||
console.log('执行了handleTreeData函数:', data, targetKeys)
|
||||
data.forEach((item) => {
|
||||
item['disabled'] = targetKeys.includes(item.key)
|
||||
if (item.children) {
|
||||
|
@ -101,6 +109,7 @@ function handleTreeData(data, targetKeys = []) {
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
form: {},
|
||||
targetKeys: [],
|
||||
dataSource: transferDataSource,
|
||||
|
||||
|
@ -123,6 +132,7 @@ export default {
|
|||
onChange(targetKeys) {
|
||||
console.log('Target Keys:', targetKeys)
|
||||
this.targetKeys = targetKeys
|
||||
// this.form = targetKeys
|
||||
},
|
||||
onChecked(_, e, checkedKeys, itemSelect) {
|
||||
const { eventKey } = e.node
|
||||
|
|
Loading…
Reference in New Issue