This commit is contained in:
Yuanjianghong 2021-08-28 17:43:09 +08:00
parent 46ca4f3b72
commit c0056a2764
1 changed files with 45 additions and 35 deletions

View File

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