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

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

@ -94,7 +94,7 @@ export const asyncRouterMap = [
path: '/project/unitSelect', path: '/project/unitSelect',
name: 'unitSelect', name: 'unitSelect',
component: () => import('@/views/project/ProjectUnitSelect'), component: () => import('@/views/project/ProjectUnitSelect'),
meta: { title: '部门选择', keepAlive: true, permission: ['form'] } meta: { title: '选择单位', keepAlive: true, permission: ['form'] }
}, },
{ {
path: '/form/step-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: 'createBy', dataIndex: 'createBy' },
{ title: '创建时间', key: 'createDate', dataIndex: 'createDate' }, { title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
// { {
// title: '操作', title: '操作',
// width: 200, width: 200,
// key: 'status', key: 'status',
// align: 'center', align: 'center',
// scopedSlots: { customRender: 'action' }, scopedSlots: { customRender: 'action' },
// }, },
], ],
// 加载数据方法 必须为 Promise 对象 // 加载数据方法 必须为 Promise 对象

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

@ -1,23 +1,24 @@
<template> <template>
<div> <page-header-wrapper title="请选择单位">
<!-- showSearch -->
<!-- height: '500px',overflowY: 'auto' -->
<a-transfer <a-transfer
class="tree-transfer" class="tree-transfer"
:data-source="treeData" :data-source="dataSource"
:list-style="{
height: '600px',
}"
:titles="['全部单位列表', '已经选中单位']" :titles="['全部单位列表', '已经选中单位']"
:target-keys="targetKeys" :target-keys="targetKeys"
:render="(item) => item.title" :render="(item) => item.title"
:show-select-all="false" :operations="['选 中', '取 消']"
:show-select-all="true"
:filter-option="filterOption"
@change="onChange" @change="onChange"
> >
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }"> <template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
<!-- checkStrictly -->
<a-tree <a-tree
v-if="direction === 'left'" v-if="direction === 'left'"
blockNode blockNode
checkable checkable
checkStrictly
defaultExpandAll defaultExpandAll
:checkedKeys="[...selectedKeys, ...targetKeys]" :checkedKeys="[...selectedKeys, ...targetKeys]"
:treeData="treeData" :treeData="treeData"
@ -34,20 +35,43 @@
/> />
</template> </template>
</a-transfer> </a-transfer>
</div> </page-header-wrapper>
</template> </template>
<script> <script>
const treeData = [ const treeData = [
{ id: '0-0', title: '0-0' },
{ {
id: '0-1', title: '三峡大学',
title: '0-1', key: '0001',
children: [ children: [
{ id: '0-1-0', title: '0-1-0' }, { title: '三峡大学文学院', key: '00010001' },
{ id: '0-1-1', title: '0-1-1' }, {
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 = [] const transferDataSource = []
@ -64,8 +88,9 @@ function isChecked(selectedKeys, eventKey) {
} }
function handleTreeData(data, targetKeys = []) { function handleTreeData(data, targetKeys = []) {
console.log("执行了handleTreeData函数：",data,targetKeys)
data.forEach((item) => { data.forEach((item) => {
item['disabled'] = targetKeys.includes(item.id) item['disabled'] = targetKeys.includes(item.key)
if (item.children) { if (item.children) {
handleTreeData(item.children, targetKeys) handleTreeData(item.children, targetKeys)
} }
@ -78,6 +103,15 @@ export default {
return { return {
targetKeys: [], targetKeys: [],
dataSource: transferDataSource, dataSource: transferDataSource,
// 加载数据方法 必须为 Promise 对象
loadData: (parameter) => {
console.log('加载数据方法', parameter)
return transferDataSource
// return getProjectList(Object.assign(parameter, this.queryParam)).then((res) => {
// return res
// })
},
} }
}, },
computed: { computed: {
@ -94,15 +128,24 @@ export default {
const { eventKey } = e.node const { eventKey } = e.node
itemSelect(eventKey, !isChecked(checkedKeys, eventKey)) 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> </script>
<style scoped>
.tree-transfer .ant-transfer-list:first-child {
width: 50%;
flex: none;
height: 100%;
}
</style>