暂存修改穿梭框
This commit is contained in:
Yuanjianghong
parent
dd58d093f3
commit
46ca4f3b72
|
|
@ -117,6 +117,18 @@
|
|||
}
|
||||
|
||||
/* 组织机构数选择组件样式修改 end */
|
||||
|
||||
/* 项目管理 - 选择单位组件样式 start */
|
||||
.tree-transfer .ant-transfer-list-body-customize-wrapper {
|
||||
overflow-y: auto !important;
|
||||
height: 500px !important;
|
||||
}
|
||||
|
||||
.tree-transfer .ant-transfer-list-content {
|
||||
height: 500px !important;
|
||||
}
|
||||
|
||||
/* 项目管理 - 选择单位组件样式 end */
|
||||
</style>
|
||||
<!-- require cdn assets css -->
|
||||
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
|
||||
|
|
|
|||
|
|
@ -94,7 +94,7 @@ export const asyncRouterMap = [
|
|||
path: '/project/unitSelect',
|
||||
name: 'unitSelect',
|
||||
component: () => import('@/views/project/ProjectUnitSelect'),
|
||||
meta: { title: '部门选择', keepAlive: true, permission: ['form'] }
|
||||
meta: { title: '选择单位', keepAlive: true, permission: ['form'] }
|
||||
},
|
||||
{
|
||||
path: '/form/step-form',
|
||||
|
|
|
|||
|
|
@ -129,13 +129,13 @@ export default {
|
|||
},
|
||||
{ title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
|
||||
{ title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
|
||||
// {
|
||||
// title: '操作',
|
||||
// width: 200,
|
||||
// key: 'status',
|
||||
// align: 'center',
|
||||
// scopedSlots: { customRender: 'action' },
|
||||
// },
|
||||
{
|
||||
title: '操作',
|
||||
width: 200,
|
||||
key: 'status',
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
],
|
||||
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
<template>
|
||||
<div>
|
||||
<page-header-wrapper title="请选择单位">
|
||||
<!-- showSearch -->
|
||||
<!-- height: '500px',overflowY: 'auto' -->
|
||||
<a-transfer
|
||||
class="tree-transfer"
|
||||
:data-source="treeData"
|
||||
:list-style="{
|
||||
height: '600px',
|
||||
}"
|
||||
:data-source="dataSource"
|
||||
:titles="['全部单位列表', '已经选中单位']"
|
||||
:target-keys="targetKeys"
|
||||
:render="(item) => item.title"
|
||||
:show-select-all="false"
|
||||
: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
|
||||
checkStrictly
|
||||
defaultExpandAll
|
||||
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
||||
:treeData="treeData"
|
||||
|
|
@ -34,20 +35,43 @@
|
|||
/>
|
||||
</template>
|
||||
</a-transfer>
|
||||
</div>
|
||||
</page-header-wrapper>
|
||||
</template>
|
||||
|
||||
|
||||
<script>
|
||||
const treeData = [
|
||||
{ id: '0-0', title: '0-0' },
|
||||
{
|
||||
id: '0-1',
|
||||
title: '0-1',
|
||||
title: '三峡大学',
|
||||
key: '0001',
|
||||
children: [
|
||||
{ id: '0-1-0', title: '0-1-0' },
|
||||
{ id: '0-1-1', title: '0-1-1' },
|
||||
{ title: '三峡大学文学院', key: '00010001' },
|
||||
{
|
||||
title: '三峡大学水利学院',
|
||||
key: '00010002',
|
||||
children: [
|
||||
{ title: '三峡大学水利学院第一学院', key: '000100020001' },
|
||||
{ title: '三峡大学水利学院第二学院', key: '000100020002' },
|
||||
{ title: '三峡大学水利学院第三学院', key: '000100020003' },
|
||||
{ title: '三峡大学水利学院第四学院', key: '000100020004' },
|
||||
{ title: '三峡大学水利学院第五学院', key: '000100020005' },
|
||||
{ title: '三峡大学水利学院第六学院', key: '000100020006' },
|
||||
{ title: '三峡大学水利学院第一学院', key: '000100020007' },
|
||||
{ title: '三峡大学水利学院第二学院', key: '000100020008' },
|
||||
{ title: '三峡大学水利学院第三学院', key: '000100020009' },
|
||||
{ title: '三峡大学水利学院第四学院', key: '000100020010' },
|
||||
{ title: '三峡大学水利学院第五学院', key: '000100020011' },
|
||||
{ title: '三峡大学水利学院第六学院', key: '000100020012' },
|
||||
{ title: '三峡大学水利学院第一学院', key: '000100020013' },
|
||||
{ title: '三峡大学水利学院第二学院', key: '000100020014' },
|
||||
{ title: '三峡大学水利学院第三学院', key: '000100020015' },
|
||||
{ title: '三峡大学水利学院第四学院', key: '000100020016' },
|
||||
{ title: '三峡大学水利学院第五学院', key: '000100020017' },
|
||||
{ title: '三峡大学水利学院第六学院', key: '000100020018' },
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{ id: '0-2', title: '0-3' },
|
||||
]
|
||||
|
||||
const transferDataSource = []
|
||||
|
|
@ -64,8 +88,9 @@ function isChecked(selectedKeys, eventKey) {
|
|||
}
|
||||
|
||||
function handleTreeData(data, targetKeys = []) {
|
||||
console.log("执行了handleTreeData函数：",data,targetKeys)
|
||||
data.forEach((item) => {
|
||||
item['disabled'] = targetKeys.includes(item.id)
|
||||
item['disabled'] = targetKeys.includes(item.key)
|
||||
if (item.children) {
|
||||
handleTreeData(item.children, targetKeys)
|
||||
}
|
||||
|
|
@ -78,6 +103,15 @@ export default {
|
|||
return {
|
||||
targetKeys: [],
|
||||
dataSource: transferDataSource,
|
||||
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
loadData: (parameter) => {
|
||||
console.log('加载数据方法', parameter)
|
||||
return transferDataSource
|
||||
// return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
|
||||
// return res
|
||||
// })
|
||||
},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -94,15 +128,24 @@ export default {
|
|||
const { eventKey } = e.node
|
||||
itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
|
||||
},
|
||||
//搜索使用
|
||||
filterOption(value, tree) {
|
||||
console.log('filterOption:', value, tree)
|
||||
// getParentKey(value, tree) {
|
||||
if (!value) return
|
||||
|
||||
for (let i = 0; i < tree.length; i++) {
|
||||
const node = tree[i]
|
||||
|
||||
if (node.children) {
|
||||
if (node.children.some((item) => item.title.indexOf(value) > -1)) {
|
||||
this.expandedKeys.push(node.key)
|
||||
}
|
||||
|
||||
this.filterOption(value, node.children)
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.tree-transfer .ant-transfer-list:first-child {
|
||||
width: 50%;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue