<template>
<el-dialog title="新增/編輯" :visible.sync="dialogVisible" width="60%" :before-close="handleClose" :destroy-on-close="false" :close-on-click-modal="false">
<el-table :data="companyData" v-loading="companyLoading" height="300" ref="multipleTable" @select="handleSelectionChange" @select-all="handleAllChange" :row-key="(row)=>{ return row.companyId}">
<el-table-column label="全選" type="selection" width="55" :reserve-selection="true"></el-table-column>
<el-table-column prop="companyName" label="企業名稱" />
</el-table>
<div class="pagination" style='text-align: right; margin-top: 10px'>
<element-pagination :page-size="pagination.size" :current-page="pagination.page" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange" />
</div>
</el-dialog>
</template>
<script>
export default {
data () {
return {
dialogVisible: false,
companyData: [],
selectList: [],
companyLoading: false,
pagination: {
page: 1,
size: 20
},
total: 0,
}
},
methods: {
show (id) {
this.dialogVisible = true
this.getDetail()
},
// 獲取詳情
async getDetail () {
const res = await this.$http.get('/api/detail?id=1')
this.selectList = res.companyIdList
},
handleSizeChange (size) {
this.pagination.size = size
this.getList()
},
handleCurrentChange (page) {
this.pagination.page = page
this.getList()
},
// 獲取數據
async getList () {
try {
this.companyLoading = true
const { page, size } = this.pagination
const params = {
url: '/api/search',
params: {
page: page - 1,
size,
like_companyName: this.value2
}
}
const { rows = [], total = 0 } = await this.$http(params)
this.companyLoading = false
this.companyData = rows
this.total = total
setTimeout(() => {
if (this.selectList.length > 0) {
this.echo(rows)
}
}, 10);
} catch (error) {
console.log(error)
} finally {
this.companyLoading = false
}
},
echo (data) {
let rows = []
data.forEach(item => {
this.selectList.forEach(item2 => {
if (item.companyId === item2) {
rows.push(item)
}
})
})
this.toggleSelection(rows)
},
// 在獲取企業數據下調用
toggleSelection (rows) {
if (rows) {
rows.forEach(row => {
this.$refs.multipleTable.toggleRowSelection(row, true)
})
} else {
this.$refs.multipleTable.clearSelection()
}
},
// 選擇企業， 打鉤或者取消
handleSelectionChange (selecteds, row) {
// console.log(selecteds, row)
if (!this.selectList.includes(row.companyId)) {
// 回顯數據裏沒有本條， 把這條加進來（選中）
this.selectList.push(row.companyId)
} else {
// 回顯數據有本條，把這條數據刪除（取消選中）
this.selectList.splice(this.selectList.indexOf(row.companyId), 1)
}
},
// 全選、取消全選
handleAllChange (selects) {
// console.log(selects)
if (selects.length > 0) {
selects.forEach(item => {
if (!this.selectList.includes(item.companyId)) {
this.selectList.push(item.companyId)
}
})
} else {
this.companyData.list.forEach(item => {
this.selectList.forEach((id, index) => {
if (item.companyId === id) {
this.selectList.splice(index, 1)
}
})
})
}
},
}
}
</script>
<style lang="scss" scoped>
</style>