337 lines
11 KiB
Plaintext
337 lines
11 KiB
Plaintext
<script setup lang="ts">
|
||
import { deptTree, getGroupList,addGroup, getPage,deleteGroup } from '@/api/daikin/base'
|
||
import { message } from '@/utils/message'
|
||
import { Search, Refresh } from '@element-plus/icons-vue'
|
||
import {noticeld} from '@/stores/modules/noticeId'
|
||
|
||
const stores = noticeld()
|
||
const treeData = ref<any>()
|
||
const emit = defineEmits(['clickChild','CloseThis'])
|
||
const FlashOutline = ref('')
|
||
const treeRef =ref()
|
||
async function getTree() {
|
||
const reviewSource =stores.article.reviewSource
|
||
const { data } = await deptTree({reviewSource})
|
||
if(data&&data!='null'&&data.length>0){
|
||
treeData.value = data
|
||
}
|
||
|
||
console.log(data)
|
||
}
|
||
|
||
const props = defineProps({
|
||
userDataList: {
|
||
type: Array as PropType<any[]>,
|
||
default: () => [],
|
||
},
|
||
})
|
||
|
||
const da = reactive({
|
||
pageNum: '1',
|
||
pageSize: '1000',
|
||
phonenumber: '',
|
||
status: '',
|
||
beingTime: '',
|
||
endTime: '',
|
||
deptId: '',
|
||
nickName:''
|
||
})
|
||
const userData = ref<any>()
|
||
async function getUserPage() {
|
||
const reviewSource =stores.article.reviewSource
|
||
const {pageNum,pageSize,phonenumber,status,beingTime,endTime,deptId,nickName} = unref(da)
|
||
const { rows } = await getPage({pageNum,pageSize,phonenumber,status,beingTime,endTime,deptId,nickName,reviewSource})
|
||
const rowsD = rows.map((i: any) => {
|
||
if (i.loginDate) {
|
||
i.loginDate = i.loginDate.slice(0, 10)
|
||
}
|
||
|
||
return i
|
||
})
|
||
userData.value = rowsD
|
||
|
||
|
||
|
||
|
||
}
|
||
|
||
function selection(){
|
||
const list = props.userDataList
|
||
if(userData.value&&list){
|
||
const commonItems = userData.value.filter((item1: { userId: any; }) =>
|
||
list.some(item2 => item2.userId === item1.userId)
|
||
);
|
||
toggleSelection(commonItems)
|
||
}
|
||
|
||
}
|
||
onMounted(() => {
|
||
setTimeout(() => {
|
||
selection()
|
||
}, 1000);
|
||
})
|
||
|
||
const ss = computed(() => [da.deptId,da.nickName])
|
||
watch(() => unref(ss),
|
||
async (v) => {
|
||
getUserPage()
|
||
},
|
||
{ immediate: true, deep: true },
|
||
)
|
||
const thisClick = (e: { id: string }) => {
|
||
da.deptId = e.id
|
||
// console.log(e)
|
||
}
|
||
|
||
const formInline = ref()
|
||
const onSubmit = () => {
|
||
// console.log(formInline.value)
|
||
da.nickName= formInline.value
|
||
}
|
||
const resetForm = () => {
|
||
formInline.value =''
|
||
}
|
||
|
||
|
||
const multipleTableRef = ref()
|
||
const multipleSelection = ref<[]>([])
|
||
|
||
const handleSelectionChange = (val) => {
|
||
console.log(val)
|
||
multipleSelection.value = val
|
||
}
|
||
const selet = (rows: any) => {
|
||
multipleTableRef.value!.toggleRowSelection(rows, undefined)
|
||
// console.log(unref(multipleSelection))
|
||
}
|
||
|
||
const toggleSelection = (Data: any[]) => {
|
||
// console.log(Data)
|
||
if (Data) {
|
||
Data.forEach((row: any) => {
|
||
multipleTableRef.value!.toggleRowSelection(row, undefined)
|
||
// console.log(multipleTableRef.value.data)
|
||
})
|
||
|
||
}
|
||
}
|
||
const handleClose = (id: any) => {
|
||
multipleSelection.value.filter(item => {
|
||
|
||
if (item.userId === id) {
|
||
console.log(item.userId,id)
|
||
multipleTableRef.value!.toggleRowSelection(item, undefined)
|
||
}
|
||
})
|
||
}
|
||
const showModal = ref()
|
||
const handleChange = () => {
|
||
emit('clickChild', { multipleSelection, showModal })
|
||
}
|
||
const CloseThis=()=>{
|
||
|
||
emit('CloseThis',false)
|
||
}
|
||
const CloseT = ()=>{
|
||
showModal2.value = false
|
||
multipleSelection.value=[]
|
||
}
|
||
getTree()
|
||
|
||
const asGroup = ref()
|
||
async function getGroup(){
|
||
const {data} = await getGroupList()
|
||
asGroup.value = data
|
||
}
|
||
|
||
getGroup()
|
||
|
||
const asGroupClick = (e: any)=>{
|
||
multipleSelection.value = e.userList
|
||
}
|
||
const showModal2 =ref(false)
|
||
const groupName = ref()
|
||
const groupDeleteId = ref()
|
||
let id = 0
|
||
const modfify = (e)=>{
|
||
console.log(e.id)
|
||
groupDeleteId.value =e
|
||
id = e.id
|
||
showModal2.value = true
|
||
groupName.value = e.name
|
||
multipleSelection.value = e.userList
|
||
|
||
e.userList.forEach((row: any) => {
|
||
multipleTableRef.value!.toggleRowSelection(row, undefined)
|
||
})
|
||
|
||
}
|
||
const changeGroup=()=>{
|
||
changSave()
|
||
}
|
||
watch(FlashOutline, (val) => {
|
||
treeRef.value!.filter(val)
|
||
})
|
||
|
||
const filterNode = (value: string, data: Tree) => {
|
||
if (!value) return true
|
||
return data.label.includes(value)
|
||
}
|
||
|
||
|
||
|
||
async function changSave(){
|
||
let userIdList: any[] = []
|
||
const name = groupName.value
|
||
// console.log(multipleSelection.value)
|
||
multipleSelection.value.forEach((i: { userId: any })=>{
|
||
userIdList.push(i.userId)
|
||
})
|
||
console.log(id, groupName.value,userIdList)
|
||
// if(!id) return
|
||
let formdata = new FormData();
|
||
formdata.append("id",id);
|
||
formdata.append("name",name);
|
||
formdata.append("userIdList",userIdList);
|
||
const {msg} = await addGroup(formdata,{headers: {'Content-Type': 'application/form-data'}})
|
||
message.success(msg)
|
||
getGroup()
|
||
}
|
||
const addGroupList = () =>{
|
||
showModal2.value = true
|
||
}
|
||
const deleteGroupp =(i: any)=>{
|
||
console.log(i)
|
||
deleteGroups(i.id)
|
||
}
|
||
async function deleteGroups(id) {
|
||
if(!id) return
|
||
const {code} =await deleteGroup({id})
|
||
getGroup()
|
||
asGroup.value = []
|
||
multipleSelection.value=[]
|
||
groupName.value=''
|
||
message.info("删除成功")
|
||
}
|
||
|
||
</script>
|
||
<template>
|
||
<div>
|
||
|
||
<div class=" max-w95% h800px m-auto bg-#fff rounded-10px overflow-hidden">
|
||
<div class="pl20px text-18px w100% h60px p15px" style="border-bottom:1px solid #dfdfdf ;font-weight: 700;">
|
||
调达中心</div>
|
||
<div class="p20px flex relative">
|
||
<div class="min-w150px">
|
||
<el-input v-model="FlashOutline" class="w-50 m-2" placeholder="搜索" suffix-icon="Calendar"
|
||
:prefix-icon="Search" />
|
||
<el-tree ref="treeRef" :data="treeData" :filter-node-method="filterNode" :default-expanded-keys="[2, 4]" @node-click="thisClick" class="max-h500px"/>
|
||
|
||
|
||
<ul class="absolute max-h200px min-h100px bottom-0 list-none !p0 overflow-auto w190px" v-if="asGroup">
|
||
<li v-for="i in asGroup" class="cursor-default w190px h32px" >
|
||
<span @click="asGroupClick(i)" class="w100px h30px text-12px float-left block border border-solid border-#f5f5f5 leading-30px overflow-hidden" :title="i.name">{{i.name}}</span>
|
||
<span class="text-12px text-#3E7DF0 leading-30px float-left block w38px text-center block border border-solid border-#f5f5f5 h32px" @click="modfify(i)">编辑</span>
|
||
<el-icon @click="deleteGroupp(i)" class="mt7px ml5px"><Delete/></el-icon>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="ml20px max-w80%">
|
||
|
||
<div v-if="showModal2!=true">
|
||
<el-form :inline="true" :model="formInline" label-width="80px" size="small"
|
||
class="demo-form-inline">
|
||
<el-form-item label="用户名称">
|
||
<el-input v-model="formInline" placeholder="请输入用户名称" clearable />
|
||
</el-form-item>
|
||
|
||
<el-form-item>
|
||
<el-button type="primary" @click="onSubmit" :icon="Search">搜素</el-button>
|
||
<el-button @click="resetForm()" :icon="Refresh">重置</el-button>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
|
||
|
||
</div>
|
||
<div v-if="showModal2==true" class="w500px">
|
||
|
||
<!-- <el-form :inline="true" :model="formInline"
|
||
class="demo-form-inline"> -->
|
||
<el-form-item label="分组名称" label-width="80px" size="small">
|
||
<el-input v-model="groupName" placeholder="请输入分组名称" clearable />
|
||
</el-form-item>
|
||
|
||
|
||
<!-- </el-form> -->
|
||
|
||
</div>
|
||
<div v-if="showModal2!=true" class="float-left block">
|
||
<el-button type="warning" size="small" @click="toggleSelection(userData)">@所有人</el-button>
|
||
<el-button type="primary" color="#00A73A" size="small" @click="addGroupList">新增分组</el-button>
|
||
</div>
|
||
<div class="w100% h450px overflow-auto">
|
||
<el-table ref="multipleTableRef" :data="userData" :header-cell-style="{ 'text-align': 'center' }"
|
||
height="400" :cell-style="{ 'text-align': 'center' }" @selection-change="handleSelectionChange">
|
||
<el-table-column type="selection" width="55" />
|
||
<el-table-column property="nickName" label="用户名称" width="320" />
|
||
<el-table-column property="dept.deptName" label="部门" width="220" />
|
||
|
||
<el-table-column property="name" label="操作" width="220">
|
||
<template #default="{ row, $index }">
|
||
<el-button type="primary" size="small" @click="selet(row)">选择</el-button>
|
||
</template>
|
||
|
||
</el-table-column>
|
||
|
||
</el-table>
|
||
|
||
|
||
</div>
|
||
<div class="h80px overflow-y-auto">
|
||
<div v-if="showModal2===true && groupName" class="mb10px h32px">
|
||
{{groupName}}：
|
||
<span class="text-12px text-#959595 w30px" @click="deleteGroupp(groupDeleteId)">删除</span>
|
||
<!-- <el-icon class="mt8px"><Delete /></el-icon> -->
|
||
</div>
|
||
<el-tag v-for="i in multipleSelection" :key="i" class="mx-1" closable :disable-transitions="false"
|
||
@close="handleClose(i.userId)">
|
||
{{ i.nickName }}
|
||
</el-tag>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
<div class="w100% text-end float-right block h50px pt10px"
|
||
style="border-top:1px solid #dfdfdf ;font-weight: 700;">
|
||
<div class="pr30px" v-if="showModal2!=true">
|
||
<el-button type="warning" color="#f1f1f1" size="small" @click="CloseThis">取消</el-button>
|
||
<el-button type="primary" size="small" @click="handleChange">确认</el-button>
|
||
</div>
|
||
<div class="pr30px" v-if="showModal2==true">
|
||
<el-button type="warning" color="#f1f1f1" size="small" @click="CloseT">取消</el-button>
|
||
<el-button type="primary" size="small" @click="changeGroup">确认修改</el-button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</template>
|
||
<style lang="less">
|
||
.el-form--inline .el-input {
|
||
width: 180px !important;
|
||
}
|
||
::-webkit-scrollbar{
|
||
width: 1px;
|
||
}
|
||
.thList {
|
||
td {
|
||
border-bottom: 1px solid #f5f5f5;
|
||
line-height: 40px;
|
||
font-size: 12px;
|
||
}
|
||
}
|
||
</style> |