lingling
/
welfare-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

暂存修改穿梭框

This commit is contained in:
Yuanjianghong 2021-08-28 14:54:27 +08:00
parent dd58d093f3
commit 46ca4f3b72
4 changed files with 215 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
public/index.html vendored
View File

@ -1,7 +1,7 @@
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
@ -117,14 +117,26 @@
}
/* 组织机构数选择组件样式修改 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) { %>
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
<% } %>
</head>
</head>
<body>
<body>
<noscript>
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
@ -143,6 +155,6 @@
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
<% } %>
<!-- built files will be auto injected -->
</body>
</body>
</html>

2
src/config/router.config.js
View File

@ -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',

14
src/views/project/ProjectList.vue
View File

@ -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 对象

91
src/views/project/ProjectUnitSelect.vue
View File

@ -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>