Files
income_payments_client/src/components/company/BusinessSelect.vue
T

249 lines
7.4 KiB
Vue

<template>
<j-modal
:title="title"
:width="width"
:visible="visible"
:confirmLoading="confirmLoading"
switchFullscreen
@ok="handleOk"
@cancel="handleCancel"
cancelText="关闭">
<div class="table-page-search-wrapper">
<a-form layout="inline" @keyup.enter.native="searchQuery">
<a-row>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<a-form-item>
<a-input placeholder="请输入企业名称" v-model="queryParam.companyName"></a-input>
</a-form-item>
</a-col>
<a-col :xl="6" :lg="7" :md="8" :sm="24">
<span class="table-page-search-submitButtons">
<a-button type="primary" icon="search" @click="searchQuery">查询</a-button>
<a-button icon="reload" @click="searchReset">重置</a-button>
</span>
</a-col>
</a-row>
</a-form>
</div>
<div>
<a-table
ref="table"
size="middle"
bordered
rowKey="id"
:columns="columns"
:dataSource="dataSource"
:pagination="ipagination"
:loading="loading"
:rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange, type: isMultiple ? 'checkbox' : 'radio'}"
@change="handleTableChange"
class="j-table-force-nowrap">
<template slot="htmlSlot" slot-scope="text">
<div v-html="text"></div>
</template>
<template slot="imgSlot" slot-scope="text">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
<img v-else :src="getImgView(text)" height="25px" alt=""
style="max-width:80px;font-size: 12px;font-style: italic;"/>
</template>
<template slot="fileSlot" slot-scope="text,record">
<span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
<j-ellipsis @click.native="uploadFile(record.chargeNoticeFileId)" style="color:#219AFF;cursor: pointer"
:value="text" :length="20"/>
</template>
<template slot="text" slot-scope="text">
<j-ellipsis :value="text" :length="30"></j-ellipsis>
</template>
</a-table>
</div>
</j-modal>
</template>
<script>
import { JeroListMixin } from '@/mixins/JeroListMixin'
import { getAction } from '../../api/manage'
export default {
name: 'BusinessSelect',
mixins: [JeroListMixin],
props: {
// 理事会时需要传2,默认为0
memberNature: {
type: Number,
default: null
},
// 是否多选-默认false
isMultiple: {
type:Boolean,
required:false,
default:false
},
// 自定义列表接口(功能安全中心只能看到父级已添加的企业)
customListUrl: {
type: String,
required: false,
default: ''
},
// 自定义列表查询参数,功能安全中心会议
customListParams: {
type: Object,
required: false,
default: () => ({})
}
},
data() {
return {
title: '选择企业',
width: 800,
visible: false,
confirmLoading: false,
url: {
list: '/company/payCompanyManagement/list'
},
selectedCompany: {},
selectedRowKeys: [],
columns: [
{
title: '序号',
dataIndex: '',
key: 'rowIndex',
width: 60,
align: 'center',
customRender: function (t, r, index) {
return parseInt(index) + 1
}
}, {
title: '企业名称',
align: 'center',
dataIndex: 'companyName',
scopedSlots: { customRender: 'text' }
}
],
dataSource: [],
// 是否调用无权限接口
isLimit: false
}
},
methods: {
/**
* 重写获取数据方法,理事会需要传参
* @param arg
*/
loadData(arg) {
console.log(this.memberNature)
if (!this.url.list) {
this.$message.error('请设置url.list属性!')
return
}
//加载数据 若传入参数1则加载第一页的内容
if (arg === 1) {
this.ipagination.current = 1
}
let params = this.getQueryParams()//查询条件
// 是理事会单位则需要传参
if (this.memberNature && this.memberNature === 2) {
params.memberNature = this.memberNature
}
this.loading = true
let url = this.url.list
// 如果有自定义的查询列表接口,就用自定义的查询以及查询参数
if (this.customListUrl) {
url = this.customListUrl
}
// 如果有自定义查询参数,就将参数合并进去
if (this.customListParams) {
Object.assign(params, this.customListParams)
}
getAction(url, params).then((res) => {
if (res.success) {
//update-begin---author:zhangyafei Date:20201118 for:适配不分页的数据列表------------
this.dataSource = res.result.records || res.result
if (res.result.total) {
this.ipagination.total = res.result.total
//清空列表选中
} else {
this.ipagination.total = 0
}
//update-end---author:zhangyafei Date:20201118 for:适配不分页的数据列表------------
}
if (res.code === 510) {
this.$message.warning(res.message)
}
this.loading = false
}).finally(() => {
this.loading = false
})
},
handleOk() {
this.$emit('ok', this.selectedCompany)
this.close()
},
handleCancel() {
this.close()
},
close() {
this.onClearSelected()
this.visible = false
this.selectedCompany = {}
if (this.isMultiple) {
this.selectedCompany = []
}
},
onSelectChange(selectedRowKeys, selectionRows) {
if(!this.isMultiple) {
this.selectedCompany = selectionRows[0]
} else {
// selectionRows只会返回当前页数据的返回,所以多选的时候需要比对各个数据是否存在,不存在的话就从当前数据中查询推入selectedCompany中
let resultArr = []
selectionRows.forEach(row => {
let ele = this.selectedCompany.find(ele => ele.id === row.id)
if(!ele) {
resultArr.push(row)
}
})
// 2024-07-25 当前页没有选择的数据
let unSelectedCompany = []
this.dataSource.map(tt => {
if(!selectedRowKeys.includes(tt.id)) {
unSelectedCompany.push(tt)
}
})
// 获取之前选择的 非本页的标准信息
let lastSelectedCompany = []
this.selectedCompany.forEach(row => {
let ele = unSelectedCompany.find(ele => ele.id === row.id)
if(!ele) {
lastSelectedCompany.push(row)
}
})
this.selectedCompany = [...lastSelectedCompany, ...resultArr]
// this.selectedCompany = selectionRows
}
this.selectedRowKeys = selectedRowKeys
},
/*
* 重写一下查询 之前调用的是混入的查询
* */
searchReset() {
// 调用无权限接口
if (this.isLimit) {
this.url.list = '/company/payCompanyManagement/listMeeting'
}
this.lastQueryParam = {}
this.queryParam = {}
this.loadData(1)
}
},
created() {
if (this.isMultiple) {
this.selectedCompany = []
}
}
}
</script>
<style scoped lang="less">
@import '~@assets/less/common.less';
</style>