ZQ/laws-sinotruk-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[update] 修改选人组件的全选

Browse Source
This commit is contained in:
lideqin
2024-02-22 19:26:53 +08:00
parent 4f737e3fe9
commit 1aefabb223
5 changed files with 361 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/selection/UserSelectByWorkGroupModal.vue
+88 -25
View File
@@ -1,5 +1,6 @@
<template>
<j-modal
:title="$t('userSelect.selectUser')"
:maskClosable="false"
:width="1200"
:closable="true"
@@ -8,11 +9,6 @@
@cancel="handleCancel"
switchFullscreen
:visible="visible">
<template v-slot:title>
<!-- 全选所有 -->
<a-checkbox v-if="type === 'checkbox'" v-model="isCheckedAll" class="modal-title-check" @change="checkedAllChange"/>
<span>{{ $t('userSelect.selectUser') }}</span>
</template>
<div class="modal-top-wrapper">
<div class="modal-left-wrapper">
<a-spin :spinning="treeLoading">
@@ -39,7 +35,7 @@
</a-spin>
</div>
<div class="modal-right-wrapper">
<div class="modal-search-wrapper table-page-search-wrapper">
<div class="modal-search-wrapper table-page-search-wrapper search-wrap">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row :gutter="24">
<a-col :span="6">
@@ -82,6 +78,8 @@
</span>
</a-row>
</a-form>
<!-- 全选所有 -->
<a-checkbox v-if="type === 'checkbox'" v-model="isCheckedAll" class="modal-title-check" @change="checkedAllChange"/>
</div>
<div class="modal-content">
<a-table
@@ -154,14 +152,44 @@ export default {
immediate: true,
deep: true,
handler (val) {
console.log(val.length, this.ipagination.total)
if (val.length !== 0 && val.length === this.ipagination.total) {
// 说明都选中了
console.log(this.currentQueryAllData)
const arrOne = this.currentQueryAllData.map(item => item.userId)
const arrTwo = this.dataSourceRight.map(item => item.userId)
const temp = []
for (const item of arrTwo) {
arrOne.includes(item) ? temp.push(item) : ''
}
if (val.length !== 0 && this.dataSourceRight.length >= this.ipagination.total && temp.length === this.currentQueryAllData.length) {
// 选中数据长度等于当前表格总长度
this.isCheckedAll = true
} else {
this.isCheckedAll = false
}
}
},
dataSource: {
immediate: true,
handler (val) {
console.log(this.currentQueryAllData)
const arrOne = this.currentQueryAllData.map(item => item.userId)
const arrTwo = this.dataSourceRight.map(item => item.userId)
const temp = []
for (const item of arrTwo) {
arrOne.includes(item) ? temp.push(item) : ''
}
if (this.dataSourceRight.length !== 0 && this.dataSourceRight.length >= this.ipagination.total && temp.length === this.currentQueryAllData.length) {
// 选中数据长度等于当前表格总长度
this.isCheckedAll = true
} else {
this.isCheckedAll = false
}
}
},
queryParam: {
deep: true,
handler (val) {
this.isClickedSearch = false
}
}
},
data () {
@@ -224,7 +252,11 @@ export default {
url: {
userList: '/act/user/workGroupPage',
userListByIds: '/sys/user/queryByIds'
}
},
isClickedSearch: false, // 改完搜索条件是否点击过搜索
oldQueryParam: {}, // 上一次的搜索条件，用于从一个搜索条件改成另一个搜索条件，但是没有点搜索，这时候全选时传旧的搜索条件
oldTotal: 0,
currentQueryAllData: [] // 当前查询条件下的所有数据
}
},
mounted () {
@@ -288,36 +320,61 @@ export default {
checkedAllChange (e) {
console.log(e.target.checked)
if (e.target.checked) {
this.loadingLeft = true
const params = {}
params.pageNo = 1
params.pageSize = this.ipagination.total + 10
getAction(this.url.userList, params).then(res => {
if (res.success) {
this.dataSourceRight = res.result.records || []
this.selectedRowKeys = (res.result.records || []).map(item => item.userId)
}
}).finally(() => {
this.loadingLeft = false
})
this.checkCurrentAll()
} else {
this.dataSourceRight = []
this.selectedRowKeys = []
}
},
checkCurrentAll () {
this.loadingLeft = true
let params
if (this.isClickedSearch) {
// 点击过搜索了，传搜索条件
params = Object.assign({}, this.queryParam)
} else {
// 没点击过搜索，传旧的搜索条件
params = Object.assign({}, this.oldQueryParam)
}
params.pageNo = 1
params.pageSize = this.ipagination.total + 10
getAction(this.url.userList, params).then(res => {
if (res.success) {
this.dataSourceRight = res.result.records || []
this.selectedRowKeys = (res.result.records || []).map(item => item.userId)
}
}).finally(() => {
this.loadingLeft = false
})
},
// 获取当前查询条件的所有数据
async getCurrentAllData () {
const params = Object.assign({}, this.queryParam)
params.pageNo = 1
params.pageSize = 100000000
await getAction(this.url.userList, params).then(res => {
if (res.success) {
this.currentQueryAllData = res.result.records || []
}
})
},
searchReset () {
this.queryParam = {}
this.loadData()
},
searchQuery () {
this.isClickedSearch = true
this.loadData()
},
// 获取用户左侧树列表
loadData () {
async loadData () {
this.loadingLeft = true
if (this.type === 'checkbox') {
await this.getCurrentAllData()
}
const params = Object.assign({}, this.queryParam)
params.pageNo = this.ipagination.current
params.pageSize = this.ipagination.pageSize
this.loadingLeft = true
getAction(this.url.userList, params).then((res) => {
if (res.success) {
if (res.result.current > 1 && res.result.records.length === 0) {
@@ -325,6 +382,7 @@ export default {
this.loadData()
return
}
this.oldQueryParam = Object.assign({}, this.queryParam)
this.dataSource = res.result.records || []
this.ipagination.total = res.result.total
} else {
@@ -430,8 +488,13 @@ export default {
<style scoped lang="less">
@import '~@assets/less/common.less';
.search-wrap {
position: relative;
}
.modal-title-check {
margin-right: 10px;
position: absolute;
left: 25px;
bottom: 10px;
}
.modal-top-wrapper {
display: flex;