暂存修改穿梭框
This commit is contained in:
Yuanjianghong
parent
dd58d093f3
commit
46ca4f3b72
|
|
@ -1,148 +1,160 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="zh-cmn-Hans">
|
||||
|
||||
<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">
|
||||
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
||||
<title>Ant Design Pro</title>
|
||||
<style>
|
||||
.first-loading-wrp {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 420px;
|
||||
height: 100%
|
||||
<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">
|
||||
<link rel="icon" href="<%= BASE_URL %>logo.png">
|
||||
<title>Ant Design Pro</title>
|
||||
<style>
|
||||
.first-loading-wrp {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
min-height: 420px;
|
||||
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 {
|
||||
font-size: 128px
|
||||
@-webkit-keyframes antRotate {
|
||||
to {
|
||||
-webkit-transform: rotate(405deg);
|
||||
transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
|
||||
.first-loading-wrp .loading-wrp {
|
||||
padding: 98px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center
|
||||
@keyframes antSpinMove {
|
||||
to {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
@-webkit-keyframes antSpinMove {
|
||||
to {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
.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
|
||||
}
|
||||
/* 组织机构数选择组件样式修改 start */
|
||||
.popover-tree>.ant-popover-content {
|
||||
margin-top: -15px;
|
||||
border: 1px solid #1890ff;
|
||||
max-height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.dot i:nth-child(1) {
|
||||
top: 0;
|
||||
left: 0
|
||||
}
|
||||
.popover-tree>.ant-popover-content>.ant-popover-arrow {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dot i:nth-child(2) {
|
||||
top: 0;
|
||||
right: 0;
|
||||
-webkit-animation-delay: .4s;
|
||||
animation-delay: .4s
|
||||
}
|
||||
/* 组织机构数选择组件样式修改 end */
|
||||
|
||||
.dot i:nth-child(3) {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
-webkit-animation-delay: .8s;
|
||||
animation-delay: .8s
|
||||
}
|
||||
/* 项目管理 - 选择单位组件样式 start */
|
||||
.tree-transfer .ant-transfer-list-body-customize-wrapper {
|
||||
overflow-y: auto !important;
|
||||
height: 500px !important;
|
||||
}
|
||||
|
||||
.dot i:nth-child(4) {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
-webkit-animation-delay: 1.2s;
|
||||
animation-delay: 1.2s
|
||||
}
|
||||
.tree-transfer .ant-transfer-list-content {
|
||||
height: 500px !important;
|
||||
}
|
||||
|
||||
@keyframes antRotate {
|
||||
to {
|
||||
-webkit-transform: rotate(405deg);
|
||||
transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
/* 项目管理 - 选择单位组件样式 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>
|
||||
|
||||
@-webkit-keyframes antRotate {
|
||||
to {
|
||||
-webkit-transform: rotate(405deg);
|
||||
transform: rotate(405deg)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes antSpinMove {
|
||||
to {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@-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> -->
|
||||
<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>
|
||||
<!-- require cdn assets js -->
|
||||
<% 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>
|
||||
</div>
|
||||
<!-- require cdn assets js -->
|
||||
<% 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>
|
||||
|
||||
</html>
|
||||
|
|
@ -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