|
|
@@ -0,0 +1,214 @@
|
|
|
+<template>
|
|
|
+ <el-dialog append-to-body :title="title" :visible.sync="innerVisible" width="40%">
|
|
|
+ <el-row class="transfer">
|
|
|
+ <el-col :span="12">
|
|
|
+ <header>
|
|
|
+ <el-input
|
|
|
+ v-model="queryForm.keyWords"
|
|
|
+ clearable
|
|
|
+ placeholder="请输入关键字"
|
|
|
+ suffix-icon="el-icon-search"
|
|
|
+ @change="search" />
|
|
|
+ </header>
|
|
|
+ <el-dropdown>
|
|
|
+ <span class="el-dropdown-link">
|
|
|
+ 按字母顺序查看
|
|
|
+ <i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </span>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>按创建顺序查看</el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ <ul v-infinite-scroll="fetchData" class="options" :infinite-scroll-disabled="disabled">
|
|
|
+ <li v-for="(item, index) in options" :key="index" @click="transfer(index)">
|
|
|
+ <span>{{ item.userName }}</span>
|
|
|
+ <i class="el-icon-arrow-right"></i>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <header>
|
|
|
+ <span>已选： {{ selected.length }}个员工</span>
|
|
|
+ <el-button :disabled="selected.length == 0" type="text" @click="clear">清空</el-button>
|
|
|
+ </header>
|
|
|
+ <ul class="options">
|
|
|
+ <li v-for="(item, index) in selected" :key="index" @click="goBack(index)">
|
|
|
+ <span>{{ item.userName }}</span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <span slot="footer">
|
|
|
+ <el-button size="mini" type="primary" @click="save">保存</el-button>
|
|
|
+ <el-button size="mini" @click="innerVisible = false">取消</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import userApi from '@/api/system/user'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: 'SelectUser',
|
|
|
+ props: {
|
|
|
+ title: {
|
|
|
+ type: String,
|
|
|
+ default: '选择',
|
|
|
+ },
|
|
|
+ multiple: Boolean,
|
|
|
+ queryParams: {
|
|
|
+ type: Object,
|
|
|
+ default() {
|
|
|
+ return {}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ innerVisible: false,
|
|
|
+ queryForm: {
|
|
|
+ keyWords: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 50,
|
|
|
+ },
|
|
|
+ disabled: false,
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ options: [],
|
|
|
+ selected: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ // this.fetchData()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ open() {
|
|
|
+ this.innerVisible = true
|
|
|
+ },
|
|
|
+ save() {
|
|
|
+ this.innerVisible = false
|
|
|
+ this.$emit('save', this.selected)
|
|
|
+ },
|
|
|
+ search() {
|
|
|
+ this.queryForm.pageNum = 1
|
|
|
+ this.fetchData('new')
|
|
|
+ },
|
|
|
+ async fetchData(type) {
|
|
|
+ let query = Object.assign(this.queryForm, this.queryParams)
|
|
|
+ const {
|
|
|
+ data: { list, total },
|
|
|
+ } = await userApi.getList(query)
|
|
|
+ this.total = total
|
|
|
+ if (list && list.length > 0) {
|
|
|
+ for (let index in list) {
|
|
|
+ list[index].sort = (this.queryForm.pageNum - 1) * this.queryForm.pageSize + index
|
|
|
+ }
|
|
|
+ if (type === 'new') {
|
|
|
+ this.list = list
|
|
|
+ this.options = list
|
|
|
+ } else {
|
|
|
+ this.list = this.list.concat(list)
|
|
|
+ this.options = this.options.concat(list)
|
|
|
+ }
|
|
|
+ this.queryForm.pageNum++
|
|
|
+ }
|
|
|
+ // 禁用加载请求
|
|
|
+ this.disabled = false
|
|
|
+ if (this.list.length >= this.total) {
|
|
|
+ this.disabled = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ transfer(index) {
|
|
|
+ if (!this.multiple && this.selected.length === 1) {
|
|
|
+ this.$message({
|
|
|
+ type: 'warning',
|
|
|
+ message: '只能选择一个员工，请勿多选！',
|
|
|
+ })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const arr = this.options.splice(index, 1)
|
|
|
+ if (arr[0]) this.selected.push(arr[0])
|
|
|
+ this.selected.sort(function (a, b) {
|
|
|
+ return a.sort - b.sort
|
|
|
+ })
|
|
|
+ },
|
|
|
+ goBack(index) {
|
|
|
+ const arr = this.selected.splice(index, 1)
|
|
|
+ if (arr[0]) this.options.push(arr[0])
|
|
|
+ this.options.sort(function (a, b) {
|
|
|
+ return a.sort - b.sort
|
|
|
+ })
|
|
|
+ },
|
|
|
+ clear() {
|
|
|
+ this.selected = []
|
|
|
+ this.options = this.list
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .transfer {
|
|
|
+ height: 500px;
|
|
|
+ border: 1px solid #ebeef5;
|
|
|
+
|
|
|
+ .el-col {
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+ &:first-child {
|
|
|
+ border-right: 1px solid #ebeef5;
|
|
|
+ }
|
|
|
+
|
|
|
+ .el-dropdown {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ margin: 0 8px;
|
|
|
+ width: calc(100% - 16px);
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+
|
|
|
+ span {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .options {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0 10px;
|
|
|
+ list-style: none;
|
|
|
+ height: 400px;
|
|
|
+ overflow-y: auto;
|
|
|
+
|
|
|
+ li {
|
|
|
+ height: 50px;
|
|
|
+ line-height: 50px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+
|
|
|
+ & i {
|
|
|
+ transition: all 0.3s;
|
|
|
+ cursor: pointer;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ color: #1d66dc;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ header {
|
|
|
+ height: 50px;
|
|
|
+ padding: 9px 8px;
|
|
|
+ border-bottom: 1px solid #ebeef5;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|
ZZH-wl