SelectDemo.vue
3.64 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<template>
<a-card :bordered="false" style="height:100%">
<div class="table-page-search-wrapper">
<a-form layout="inline">
<!-- 选择多个用户，可排序 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="人员列表">
<a-select
mode="multiple"
placeholder="Please select"
:value=nameList
@change="handleChange"
>
</a-select>
</a-form-item>
</a-col>
<a-col :span="8">
<span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
<a-button type="primary" @click="handleSelect" icon="search">选择</a-button>
<a-button type="primary" @click="selectReset" icon="reload" style="margin-left: 8px">清空</a-button>
</span>
</a-col>
</a-row>
<!-- 通过部门筛选，选择人 -->
<a-row :gutter="24">
<a-col :span="12">
<a-form-item label="人员列表">
<a-input-search
v-model="this.selectedDepUsers"
placeholder="请先选择用户"
disabled
@search="onSearchDepUser"
size="large">
<a-button slot="enterButton">选择用户</a-button>
</a-input-search>
</a-form-item>
</a-col>
</a-row>
</a-form>
</div>
<!-- 选择多个用户支持排序 -->
<select-multiple-user-modal ref="selectDemoModal" @selectFinished="selectOK"></select-multiple-user-modal>
<!-- 通过部门筛选，选择人 -->
<search-user-by-dep-modal ref="SearchUserByDepModal" @ok="onSearchDepUserCallBack"></search-user-by-dep-modal>
</a-card>
</template>
<script>
import SelectMultipleUserModal from '@/components/jeecgbiz/SelectMultipleUserModal'
import SearchUserByDepModal from '@/components/jeecgbiz/SearchUserByDepModal'
export default {
name: "SelectDemo",
components: {
SelectMultipleUserModal,
SearchUserByDepModal
},
data() {
return {
selectList: [],
selectedDepUsers: ''
}
},
computed: {
nameList: function () {
var names = [];
for (var a = 0; a < this.selectList.length; a++) {
names.push(this.selectList[a].name);
}
return names;
}
},
methods: {
handleChange() {
},
selectOK: function (data) {
this.selectList = data;
},
handleSelect: function () {
this.$refs.selectDemoModal.add();
},
selectReset() {
this.selectList = [];
},
//通过组织机构筛选选择用户
onSearchDepUser() {
this.$refs.SearchUserByDepModal.showModal()
this.selectedDepUsers = ''
this.$refs.SearchUserByDepModal.selectedKeys = []
this.$refs.SearchUserByDepModal.title = '根据部门查询用户'
},
onSearchDepUserCallBack(selectedDepUsers) {
this.selectedDepUsers = selectedDepUsers
}
}
}
</script>
<style lang="less" scoped>
.ant-card-body .table-operator {
margin-bottom: 18px;
}
.ant-table-tbody .ant-table-row td {
padding-top: 15px;
padding-bottom: 15px;
}
.anty-row-operator button {
margin: 0 5px
}
.ant-btn-danger {
background-color: #ffffff
}
.ant-modal-cust-warp {
height: 100%
}
.ant-modal-cust-warp .ant-modal-body {
height: calc(100% - 110px) !important;
overflow-y: auto
}
.ant-modal-cust-warp .ant-modal-content {
height: 90% !important;
overflow-y: hidden
}
</style>