<template>
|
<BasicModal
|
@register="register"
|
:getContainer="getContainer"
|
:canFullscreen="false"
|
:title="title"
|
:width="500"
|
destroyOnClose
|
@ok="handleOk"
|
wrapClassName="j-user-select-modal2" >
|
|
<div style="position: relative; min-height: 350px">
|
<div style="width: 100%">
|
<a-input v-model:value="searchText" allowClear style="width: 100%" placeholder="搜索">
|
<template #prefix>
|
<SearchOutlined style="color: #c0c0c0" />
|
</template>
|
</a-input>
|
</div>
|
|
<!-- tabs -->
|
<div class="modal-select-list-container">
|
<div class="scroll">
|
<div class="content" style="right: -10px">
|
|
<label class="item" v-for="item in showDataList" @click="(e)=>onSelect(e, item)">
|
<a-checkbox v-model:checked="item.checked">
|
<span>{{ item.name }}</span>
|
</a-checkbox>
|
</label>
|
</div>
|
|
</div>
|
</div>
|
|
<!-- 选中用户 -->
|
<div class="selected-users" style="width: 100%; overflow-x: hidden">
|
<SelectedUserItem v-for="item in selectedList" :info="item" @unSelect="unSelect" />
|
</div>
|
</div>
|
</BasicModal>
|
</template>
|
|
<script lang="ts">
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
import { SearchOutlined, CloseOutlined } from '@ant-design/icons-vue';
|
import SelectedUserItem from '../userSelect/SelectedUserItem.vue';
|
import { defHttp } from '/@/utils/http/axios';
|
import { computed, ref, toRaw, watch } from 'vue';
|
|
export default {
|
name: 'PositionSelectModal',
|
components: {
|
BasicModal,
|
SearchOutlined,
|
CloseOutlined,
|
SelectedUserItem,
|
},
|
props: {
|
multi: {
|
type: Boolean,
|
default: true,
|
},
|
getContainer: {
|
type: Function,
|
default: null,
|
},
|
title:{
|
type: String,
|
default: '',
|
},
|
type: {
|
type: String,
|
default: 'sys_position',
|
},
|
appId: {
|
type: String,
|
default: '',
|
}
|
},
|
emits: ['selected', 'register'],
|
setup(props, { emit }) {
|
|
const searchText = ref('');
|
const selectedIdList = computed(() => {
|
let arr = selectedList.value;
|
if (!arr || arr.length == 0) {
|
return [];
|
} else {
|
return arr.map((k) => k.id);
|
}
|
});
|
|
watch(()=>props.appId, async (val)=>{
|
if(val){
|
await loadDataList();
|
}
|
}, {immediate: true});
|
|
|
// 弹窗事件
|
const [register] = useModalInner(() => {
|
let list = dataList.value;
|
if(!list || list.length ==0 ){
|
}
|
for(let item of list){
|
item.checked = false
|
}
|
});
|
|
// 确定事件
|
function handleOk() {
|
let arr = toRaw(selectedIdList.value);
|
emit('selected', arr);
|
}
|
|
const dataList = ref<any[]>([]);
|
const showDataList = computed(()=>{
|
let list = dataList.value;
|
if(!list || list.length ==0 ){
|
return []
|
}
|
let text = searchText.value;
|
if(!text){
|
return list
|
}
|
return list.filter(item=>item.name.indexOf(text)>=0)
|
});
|
|
const selectedList = computed(()=>{
|
let list = dataList.value;
|
if(!list || list.length ==0 ){
|
return []
|
}
|
return list.filter(item=>item.checked)
|
});
|
|
function unSelect(id) {
|
let list = dataList.value;
|
if(!list || list.length ==0 ){
|
return;
|
}
|
let arr = list.filter(item=>item.id == id);
|
arr[0].checked = false;
|
}
|
|
async function loadDataList() {
|
let params = {
|
pageNo: 1,
|
pageSize: 200,
|
column: 'createTime',
|
order: 'desc'
|
};
|
const url = '/sys/position/list'
|
const data = await defHttp.get({ url, params }, { isTransformResponse: false });
|
if (data.success) {
|
const { records } = data.result;
|
let arr:any[] = [];
|
if(records && records.length>0){
|
for(let item of records){
|
arr.push({
|
id: item.id,
|
name: item.name || item.roleName,
|
selectType: props.type,
|
checked: false
|
})
|
}
|
}
|
dataList.value = arr;
|
} else {
|
console.error(data.message);
|
}
|
console.log('loadDataList', data);
|
}
|
|
|
function onSelect(e, item) {
|
prevent(e);
|
console.log('onselect');
|
item.checked = !item.checked;
|
}
|
|
function prevent(e) {
|
e.preventDefault();
|
e.stopPropagation();
|
}
|
|
return {
|
register,
|
showDataList,
|
searchText,
|
handleOk,
|
selectedList,
|
selectedIdList,
|
unSelect,
|
onSelect
|
|
};
|
},
|
};
|
</script>
|
<style scoped lang="less">
|
.modal-select-list-container{
|
height: 352px;
|
margin-top: 12px;
|
overflow: auto;
|
.scroll{
|
height: 100%;
|
position: relative;
|
width: 100%;
|
overflow: hidden;
|
.content{
|
bottom: 0;
|
left: 0;
|
overflow: scroll;
|
overflow-x: hidden;
|
position: absolute;
|
right: 0;
|
top: 0;
|
.item{
|
padding: 7px 5px;
|
cursor: pointer;
|
display: block;
|
&:hover{
|
background-color: #f5f5f5;
|
}
|
}
|
|
}
|
}
|
|
|
}
|
</style>
|
|
<style lang="less">
|
.j-user-select-modal2 {
|
.depart-select {
|
.ant-select-selector {
|
color: #fff !important;
|
background-color: #409eff !important;
|
border-radius: 5px !important;
|
}
|
.ant-select-selection-item,
|
.ant-select-arrow {
|
color: #fff !important;
|
}
|
}
|
.my-search {
|
position: absolute;
|
top: 14px;
|
z-index: 1;
|
&.all-width {
|
width: 100%;
|
}
|
|
.anticon {
|
cursor: pointer;
|
&:hover {
|
color: #0a8fe9 !important;
|
}
|
}
|
.hidden {
|
display: none;
|
}
|
}
|
|
.my-tabs {
|
}
|
|
.selected-users {
|
display: flex;
|
flex-wrap: wrap;
|
flex-direction: row;
|
padding-top: 15px;
|
}
|
|
.scroll-container {
|
padding-bottom: 0 !important;
|
}
|
}
|
</style>
|
