暂存修改穿梭框
This commit is contained in:
Yuanjianghong
parent
dd58d093f3
commit
46ca4f3b72
|
|
@ -1,148 +1,160 @@
|
||||||
<!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">
|
||||||
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
||||||
<title>Ant Design Pro</title>
|
<title>Ant Design Pro</title>
|
||||||
<style>
|
<style>
|
||||||
.first-loading-wrp {
|
.first-loading-wrp {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
min-height: 420px;
|
min-height: 420px;
|
||||||
height: 100%
|
height: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-loading-wrp>h1 {
|
||||||
|
font-size: 128px
|
||||||
|
}
|
||||||
|
|
||||||
|
.first-loading-wrp .loading-wrp {
|
||||||
|
padding: 98px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot {
|
||||||
|
animation: antRotate 1.2s infinite linear;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 32px;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
box-sizing: border-box
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot i {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
background-color: #1890ff;
|
||||||
|
border-radius: 100%;
|
||||||
|
transform: scale(.75);
|
||||||
|
transform-origin: 50% 50%;
|
||||||
|
opacity: .3;
|
||||||
|
animation: antSpinMove 1s infinite linear alternate
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot i:nth-child(1) {
|
||||||
|
top: 0;
|
||||||
|
left: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot i:nth-child(2) {
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
-webkit-animation-delay: .4s;
|
||||||
|
animation-delay: .4s
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot i:nth-child(3) {
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
-webkit-animation-delay: .8s;
|
||||||
|
animation-delay: .8s
|
||||||
|
}
|
||||||
|
|
||||||
|
.dot i:nth-child(4) {
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
-webkit-animation-delay: 1.2s;
|
||||||
|
animation-delay: 1.2s
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes antRotate {
|
||||||
|
to {
|
||||||
|
-webkit-transform: rotate(405deg);
|
||||||
|
transform: rotate(405deg)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.first-loading-wrp>h1 {
|
@-webkit-keyframes antRotate {
|
||||||
font-size: 128px
|
to {
|
||||||
|
-webkit-transform: rotate(405deg);
|
||||||
|
transform: rotate(405deg)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.first-loading-wrp .loading-wrp {
|
@keyframes antSpinMove {
|
||||||
padding: 98px;
|
to {
|
||||||
display: flex;
|
opacity: 1
|
||||||
justify-content: center;
|
|
||||||
align-items: center
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dot {
|
@-webkit-keyframes antSpinMove {
|
||||||
animation: antRotate 1.2s infinite linear;
|
to {
|
||||||
transform: rotate(45deg);
|
opacity: 1
|
||||||
position: relative;
|
|
||||||
display: inline-block;
|
|
||||||
font-size: 32px;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
box-sizing: border-box
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dot i {
|
/* 组织机构数选择组件样式修改 start */
|
||||||
width: 14px;
|
.popover-tree>.ant-popover-content {
|
||||||
height: 14px;
|
margin-top: -15px;
|
||||||
position: absolute;
|
border: 1px solid #1890ff;
|
||||||
display: block;
|
max-height: 400px;
|
||||||
background-color: #1890ff;
|
overflow-y: auto;
|
||||||
border-radius: 100%;
|
}
|
||||||
transform: scale(.75);
|
|
||||||
transform-origin: 50% 50%;
|
|
||||||
opacity: .3;
|
|
||||||
animation: antSpinMove 1s infinite linear alternate
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot i:nth-child(1) {
|
.popover-tree>.ant-popover-content>.ant-popover-arrow {
|
||||||
top: 0;
|
display: none;
|
||||||
left: 0
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.dot i:nth-child(2) {
|
/* 组织机构数选择组件样式修改 end */
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
-webkit-animation-delay: .4s;
|
|
||||||
animation-delay: .4s
|
|
||||||
}
|
|
||||||
|
|
||||||
.dot i:nth-child(3) {
|
/* 项目管理 - 选择单位组件样式 start */
|
||||||
right: 0;
|
.tree-transfer .ant-transfer-list-body-customize-wrapper {
|
||||||
bottom: 0;
|
overflow-y: auto !important;
|
||||||
-webkit-animation-delay: .8s;
|
height: 500px !important;
|
||||||
animation-delay: .8s
|
}
|
||||||
}
|
|
||||||
|
|
||||||
.dot i:nth-child(4) {
|
.tree-transfer .ant-transfer-list-content {
|
||||||
bottom: 0;
|
height: 500px !important;
|
||||||
left: 0;
|
}
|
||||||
-webkit-animation-delay: 1.2s;
|
|
||||||
animation-delay: 1.2s
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes antRotate {
|
/* 项目管理 - 选择单位组件样式 end */
|
||||||
to {
|
</style>
|
||||||
-webkit-transform: rotate(405deg);
|
<!-- require cdn assets css -->
|
||||||
transform: rotate(405deg)
|
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
|
||||||
}
|
<link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" />
|
||||||
}
|
<% } %>
|
||||||
|
</head>
|
||||||
|
|
||||||
@-webkit-keyframes antRotate {
|
<body>
|
||||||
to {
|
<noscript>
|
||||||
-webkit-transform: rotate(405deg);
|
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to
|
||||||
transform: rotate(405deg)
|
continue.</strong>
|
||||||
}
|
</noscript>
|
||||||
}
|
<div id="app">
|
||||||
|
<div class="first-loading-wrp">
|
||||||
@keyframes antSpinMove {
|
<!-- <h1>Pro</h1> -->
|
||||||
to {
|
<div class="loading-wrp">
|
||||||
opacity: 1
|
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@-webkit-keyframes antSpinMove {
|
|
||||||
to {
|
|
||||||
opacity: 1
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 组织机构数选择组件样式修改 start */
|
|
||||||
.popover-tree>.ant-popover-content {
|
|
||||||
margin-top: -15px;
|
|
||||||
border: 1px solid #1890ff;
|
|
||||||
max-height: 400px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.popover-tree>.ant-popover-content>.ant-popover-arrow {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 组织机构数选择组件样式修改 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>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to
|
|
||||||
continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app">
|
|
||||||
<div class="first-loading-wrp">
|
|
||||||
<!-- <h1>Pro</h1> -->
|
|
||||||
<div class="loading-wrp">
|
|
||||||
<span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
|
|
||||||
</div>
|
|
||||||
<!-- <div style="display: flex; justify-content: center; align-items: center;">Ant Design</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
<!-- <div style="display: flex; justify-content: center; align-items: center;">Ant Design</div> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- require cdn assets js -->
|
</div>
|
||||||
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
|
<!-- require cdn assets js -->
|
||||||
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
|
||||||
<% } %>
|
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
|
||||||
<!-- built files will be auto injected -->
|
<% } %>
|
||||||
</body>
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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',
|
||||||
|
|
|
||||||
|
|
@ -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 对象
|
||||||
|
|
|
||||||
|
|
@ -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>
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue