穿梭框测试提交
This commit is contained in:
Yuanjianghong
parent
86d80a3b1a
commit
ece529ec06
|
|
@ -88,7 +88,7 @@ export const asyncRouterMap = [
|
|||
path: '/project/add',
|
||||
name: 'ProjectForm',
|
||||
component: () => import('@/views/project/ProjectForm'),
|
||||
meta: { title: '新增项目', keepAlive: true, permission: ['form'] }
|
||||
meta: { title: '新增项目', keepAlive: true, permission: ['form'], show: false}
|
||||
},
|
||||
{
|
||||
path: '/project/unitSelect',
|
||||
|
|
|
|||
|
|
@ -45,7 +45,9 @@ import {
|
|||
Descriptions,
|
||||
message,
|
||||
notification,
|
||||
space
|
||||
space,
|
||||
Transfer,
|
||||
Tree
|
||||
} from 'ant-design-vue'
|
||||
import Viser from 'viser-vue'
|
||||
|
||||
|
|
@ -99,6 +101,8 @@ Vue.use(Result)
|
|||
Vue.use(Statistic)
|
||||
Vue.use(Descriptions)
|
||||
Vue.use(space)
|
||||
Vue.use(Tree)
|
||||
Vue.use(Transfer)
|
||||
|
||||
Vue.prototype.$confirm = Modal.confirm
|
||||
Vue.prototype.$message = message
|
||||
|
|
|
|||
|
|
@ -9,12 +9,22 @@
|
|||
<a-select-option value="null">全部</a-select-option>
|
||||
<a-select-option value="1">运行中</a-select-option>
|
||||
<a-select-option value="2">已结束</a-select-option>
|
||||
<a-select-option value="1">未发布</a-select-option>
|
||||
<a-select-option value="3">未发布</a-select-option>
|
||||
</a-select>
|
||||
开始时间:
|
||||
<a-date-picker v-model="queryParam.startDate" style="width: 100%" placeholder="请输入开始时间" valueFormat="YYYY-MM-DD HH:mm:ss"/>
|
||||
<a-date-picker
|
||||
v-model="queryParam.startDate"
|
||||
style="width: 100%"
|
||||
placeholder="请输入开始时间"
|
||||
valueFormat="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
结束时间:
|
||||
<a-date-picker v-model="queryParam.endDate" style="width: 100%" placeholder="请输入结束时间" valueFormat="YYYY-MM-DD HH:mm:ss"/>
|
||||
<a-date-picker
|
||||
v-model="queryParam.endDate"
|
||||
style="width: 100%"
|
||||
placeholder="请输入结束时间"
|
||||
valueFormat="YYYY-MM-DD HH:mm:ss"
|
||||
/>
|
||||
培训方式:
|
||||
<a-select v-model="queryParam.trainWay" placeholder="请选择" default-value="null" style="width: 120px">
|
||||
<a-select-option value="null">全部</a-select-option>
|
||||
|
|
@ -36,7 +46,7 @@
|
|||
<s-table
|
||||
ref="table"
|
||||
size="default"
|
||||
rowKey="key"
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:data="loadData"
|
||||
:rowSelection="options.rowSelection"
|
||||
|
|
@ -74,7 +84,7 @@ export default {
|
|||
components: {
|
||||
STable,
|
||||
ProjectForm,
|
||||
router
|
||||
router,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
|
@ -82,20 +92,22 @@ export default {
|
|||
queryParam: {},
|
||||
// 表头
|
||||
columns: [
|
||||
{ title: '序号', width: 60, scopedSlots: { customRender: 'serial' } },
|
||||
{ title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
|
||||
{ title: '项目名称', dataIndex: 'projectName', key: 'projectName' },
|
||||
{
|
||||
title: '时间',
|
||||
dataIndex: 'startDate',
|
||||
key: 'startDate',
|
||||
customRender: (text, record, index) => {
|
||||
return record.startDate + ' - ' + record.endDate
|
||||
},
|
||||
},
|
||||
{ title: '人数', dataIndex: 'personNum', customRender: (text) => text + '人' },
|
||||
{ title: '项目类型', dataIndex: 'projectType' },
|
||||
{ title: '人数', key: 'personNum', dataIndex: 'personNum', customRender: (text) => text + '人' },
|
||||
{ title: '项目类型', dataIndex: 'projectType', key: 'projectType' },
|
||||
{
|
||||
title: '项目状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
customRender: (text, record, index) => {
|
||||
//项目状态 1-未发布 2-未开始 3-进行中 4-已完成 5-已中止
|
||||
if (text == 1) {
|
||||
|
|
@ -115,15 +127,15 @@ export default {
|
|||
}
|
||||
},
|
||||
},
|
||||
{ title: '创建人员', dataIndex: 'createBy' },
|
||||
{ title: '创建时间', dataIndex: 'createDate' },
|
||||
{
|
||||
title: '操作',
|
||||
key: 'operation',
|
||||
width: 200,
|
||||
align: 'center',
|
||||
scopedSlots: { customRender: 'action' },
|
||||
},
|
||||
{ title: '创建人员', key: 'createBy', dataIndex: 'createBy' },
|
||||
{ title: '创建时间', key: 'createDate', dataIndex: 'createDate' },
|
||||
// {
|
||||
// title: '操作',
|
||||
// width: 200,
|
||||
// key: 'status',
|
||||
// align: 'center',
|
||||
// scopedSlots: { customRender: 'action' },
|
||||
// },
|
||||
],
|
||||
|
||||
// 加载数据方法 必须为 Promise 对象
|
||||
|
|
@ -145,7 +157,7 @@ export default {
|
|||
handledCreate() {
|
||||
return this.$router.push(
|
||||
// {name: 'ProjectForm'}
|
||||
{path: 'project/project/add',}
|
||||
{ path: 'project/project/add' }
|
||||
)
|
||||
// router.push()
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,38 +1,108 @@
|
|||
<template>
|
||||
<div>
|
||||
<h1>我是张三</h1>
|
||||
<a-transfer
|
||||
class="tree-transfer"
|
||||
:data-source="treeData"
|
||||
:list-style="{
|
||||
height: '600px',
|
||||
}"
|
||||
:titles="['全部单位列表', '已经选中单位']"
|
||||
:target-keys="targetKeys"
|
||||
:render="(item) => item.title"
|
||||
:show-select-all="false"
|
||||
@change="onChange"
|
||||
>
|
||||
<template slot="children" slot-scope="{ props: { direction, selectedKeys }, on: { itemSelect } }">
|
||||
<a-tree
|
||||
v-if="direction === 'left'"
|
||||
blockNode
|
||||
checkable
|
||||
checkStrictly
|
||||
defaultExpandAll
|
||||
:checkedKeys="[...selectedKeys, ...targetKeys]"
|
||||
:treeData="treeData"
|
||||
@check="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
@select="
|
||||
(_, props) => {
|
||||
onChecked(_, props, [...selectedKeys, ...targetKeys], itemSelect)
|
||||
}
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</a-transfer>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
||||
//例如：import 《组件名称》 from '《组件路径》'
|
||||
const treeData = [
|
||||
{ id: '0-0', title: '0-0' },
|
||||
{
|
||||
id: '0-1',
|
||||
title: '0-1',
|
||||
children: [
|
||||
{ id: '0-1-0', title: '0-1-0' },
|
||||
{ id: '0-1-1', title: '0-1-1' },
|
||||
],
|
||||
},
|
||||
{ id: '0-2', title: '0-3' },
|
||||
]
|
||||
|
||||
const transferDataSource = []
|
||||
function flatten(list = []) {
|
||||
list.forEach((item) => {
|
||||
transferDataSource.push(item)
|
||||
flatten(item.children)
|
||||
})
|
||||
}
|
||||
flatten(JSON.parse(JSON.stringify(treeData)))
|
||||
|
||||
function isChecked(selectedKeys, eventKey) {
|
||||
return selectedKeys.indexOf(eventKey) !== -1
|
||||
}
|
||||
|
||||
function handleTreeData(data, targetKeys = []) {
|
||||
data.forEach((item) => {
|
||||
item['disabled'] = targetKeys.includes(item.id)
|
||||
if (item.children) {
|
||||
handleTreeData(item.children, targetKeys)
|
||||
}
|
||||
})
|
||||
return data
|
||||
}
|
||||
|
||||
export default {
|
||||
//import引入的组件需要注入到对象中才能使用
|
||||
components: {},
|
||||
props: {},
|
||||
data() {
|
||||
//这里存放数据
|
||||
return {};
|
||||
return {
|
||||
targetKeys: [],
|
||||
dataSource: transferDataSource,
|
||||
}
|
||||
},
|
||||
//计算属性 类似于data概念
|
||||
computed: {},
|
||||
//监控data中的数据变化
|
||||
watch: {},
|
||||
//方法集合
|
||||
methods: {},
|
||||
created() {}, //生命周期 - 创建完成（可以访问当前this实例）
|
||||
mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
|
||||
beforeCreate() {}, //生命周期 - 创建之前
|
||||
beforeMount() {}, //生命周期 - 挂载之前
|
||||
beforeUpdate() {}, //生命周期 - 更新之前
|
||||
updated() {}, //生命周期 - 更新之后
|
||||
beforeDestroy() {}, //生命周期 - 销毁之前
|
||||
destroyed() {}, //生命周期 - 销毁完成
|
||||
activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
|
||||
};
|
||||
|
||||
computed: {
|
||||
treeData() {
|
||||
return handleTreeData(treeData, this.targetKeys)
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onChange(targetKeys) {
|
||||
console.log('Target Keys:', targetKeys)
|
||||
this.targetKeys = targetKeys
|
||||
},
|
||||
onChecked(_, e, checkedKeys, itemSelect) {
|
||||
const { eventKey } = e.node
|
||||
itemSelect(eventKey, !isChecked(checkedKeys, eventKey))
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.tree-transfer .ant-transfer-list:first-child {
|
||||
width: 50%;
|
||||
flex: none;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue