<template>
|
<div class="inner">
|
<a-row type="flex" justify="space-between" style="margin-bottom: 20px">
|
<a-col :span="4" v-if="unittype && unittype !== null" style="margin-bottom: 10px">
|
<a-button type="primary" @click="editData('add',{})">新增用户</a-button>
|
</a-col>
|
<a-col :span="24">
|
<a-row type="flex" :gutter="24">
|
<a-col :span="4">
|
<a-select v-model="search.searchParams.peerRecipientGroupId" placeholder="选择分组" style="width: 100%" @change="handleChange" allowClear show-search :filter-option="filterOption">
|
<a-select-option v-for="item in groupData" :value="item.id" :key="item.id">{{item.name}}</a-select-option>
|
</a-select>
|
</a-col>
|
<a-col :span="3">
|
<a-input v-model="search.searchParams.company" placeholder="单位名称" style="width: 100%"/>
|
</a-col>
|
<a-col :span="3">
|
<a-input v-model="search.searchParams.name" placeholder="姓名" style="width: 100%"/>
|
</a-col>
|
<a-col :span="3">
|
<a-input v-model="search.searchParams.phone" placeholder="电话" style="width: 100%"/>
|
</a-col>
|
<a-col :span="4" v-if="unittype == null || !unittype">
|
<a-cascader :options="areaData" v-model="areaVal" placeholder="所属区域" expandTrigger="hover" :fieldNames="fieldNames" changeOnSelect @change="onChange" style="width: 100%"/>
|
</a-col>
|
<a-col :span="6">
|
<a-button type="primary" @click="getUserList" v-preventReClick="1500">查询</a-button>
|
<a-button style="margin-left: 12px" @click="resetSearch">重置</a-button>
|
<a-button type="danger" style="margin-left: 12px" @click="delBySet">批量删除</a-button>
|
</a-col>
|
</a-row>
|
</a-col>
|
</a-row>
|
<div class="table-cont">
|
<a-table :columns="columns" :data-source="tableData" :pagination="pagination" :rowKey="record=>record.id" bordered :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }">
|
<template #unittype="unittype">
|
<a-tag
|
:color="unittype === 1 ? 'purple' : unittype === 2 ? 'blue' : unittype === 3 ? 'cyan' : 'green'"
|
>
|
{{ unittype==1?'省级':unittype==2?'地（市、州）级':unittype==3?'区县级':unittype==4?'村（乡、镇）级':'管理员' }}
|
</a-tag>
|
</template>
|
<template #area="text,row">
|
<span v-if="row.province !== null && row.province !== ''">{{row.province}}</span>
|
<span v-if="row.city !== null && row.city !== ''">-{{row.city}}</span>
|
<span v-if="row.area !== null && row.area !== ''">-{{row.area}}</span>
|
<span v-if="row.town !== null && row.town !== ''">-{{row.town}}</span>
|
</template>
|
<template #action="action,row">
|
<a-button type="link" @click="editData('edit',row)">编辑</a-button>
|
<a-button type="link" class="delBtn" @click="delData(row)">删除</a-button>
|
</template>
|
</a-table>
|
</div>
|
<same-level-mod ref="sameLevelMod" @refresh="getUserList"></same-level-mod>
|
</div>
|
</template>
|
|
<script>
|
import {delRecipient, delRecipientBatch, delUser, getRecipient, getSameLevelGroupList, getUser} from '@/api/user'
|
import sameLevelMod from "@/views/Admin/components/sameLevelMod"
|
import {getUserInfo} from "@/util/storage";
|
import {getDistrictInfo} from "@/api/login";
|
export default {
|
name: 'sameLevel',
|
components: {
|
sameLevelMod
|
},
|
data () {
|
return {
|
areaVal: [],
|
unittype: null,
|
districtId: null,
|
search:{
|
pageIndex: 1,
|
pageSize: 10,
|
searchParams:{
|
company: '',
|
province: '',
|
city: '',
|
area: '',
|
town: '',
|
name: '',
|
phone: '',
|
peerRecipientGroupId: undefined
|
}
|
},
|
selectedRowKeys: [],
|
columns:[
|
{
|
title: '单位名称',
|
dataIndex: 'company',
|
key: 'company'
|
},
|
{
|
title: '接收人姓名',
|
dataIndex: 'recipientName',
|
key: 'recipientName'
|
},
|
{
|
title: '所属分组',
|
dataIndex: 'peerRecipientGroupName',
|
key: 'peerRecipientGroupName'
|
},
|
{
|
title: '手机号码',
|
dataIndex: 'phone',
|
key: 'phone'
|
},
|
{
|
title: '级别',
|
dataIndex: 'unittype',
|
// key: 'unittype',
|
scopedSlots: { customRender: 'unittype' }
|
},
|
{
|
title: '行政区划',
|
dataIndex: 'area',
|
// key: 'area',
|
scopedSlots: { customRender: 'area' }
|
},
|
{
|
title: '操作',
|
width: '12%',
|
key: 'action',
|
scopedSlots: { customRender: 'action' }
|
},
|
],
|
tableData: [],
|
groupData: [],
|
pagination: {
|
current: 1,
|
defaultCurrent: 1,
|
defaultPageSize: 10,
|
total: 0,
|
onChange: ( page, pageSize ) => this.onPageChange(page,pageSize),
|
showTotal: total => `共 ${total} 条`
|
},
|
areaData: [],
|
fieldNames:{
|
label: 'name',
|
value: 'id',
|
children: 'children'
|
}
|
}
|
},
|
created() {
|
const t = this
|
t.groupData = []
|
t.unittype = getUserInfo().unittype
|
t.districtId = getUserInfo().districtId
|
t.getGroupList()
|
t.getUserList()
|
t.getDistrictInfo()
|
},
|
methods:{
|
async getUserList(){
|
const t = this
|
if(t.search.searchParams.phone == '' && t.search.searchParams.recipientName == '' && t.search.searchParams.province == '' && t.search.searchParams.city == '' && t.search.searchParams.area == '' && t.search.searchParams.company == '' && t.search.searchParams.peerRecipientGroupId == undefined){
|
const {searchParams,...data} = t.search
|
console.log(data,'data')
|
const res = await getRecipient(data)
|
if(res.data.code == 100){
|
t.tableData = res.data.data
|
t.pagination.total = res.data.total
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
}else{
|
const res = await getRecipient(t.search)
|
if(res.data.code == 100){
|
t.tableData = res.data.data
|
t.pagination.total = res.data.total
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
}
|
},
|
|
async getDistrictInfo(){
|
let res = await getDistrictInfo()
|
if(res.data.code == 100){
|
this.areaData = res.data.data
|
} else {
|
this.$message.warning(res.data.msg);
|
}
|
},
|
|
async getGroupList() {
|
const t = this
|
const res = await getSameLevelGroupList();
|
if(res.data.code == 100){
|
if(res.data.data){
|
let arr = res.data.data
|
t.groupData = arr.concat([{id: -1, name: '未分类'}])
|
}else{
|
t.groupData = [{
|
id: -1,
|
name: '未分类'
|
}]
|
}
|
}else{
|
this.$message.error(res.data.msg)
|
}
|
},
|
resetSearch(){
|
const t = this
|
t.areaVal = []
|
t.search = {
|
pageIndex: 1,
|
pageSize: 10,
|
searchParams:{
|
company: '',
|
province: '',
|
city: '',
|
area: '',
|
town: '',
|
name: '',
|
phone: '',
|
peerRecipientGroupId: undefined
|
}
|
}
|
t.getUserList()
|
},
|
|
editData(type,data){
|
const t = this
|
t.$refs.sameLevelMod.openDialog(type,data,t.groupData)
|
t.$refs.sameLevelMod.areaData = t.areaData
|
t.$refs.sameLevelMod.form.unittype = t.unittype
|
t.$refs.sameLevelMod.form.districtId = t.districtId
|
},
|
|
filterOption(input, option) {
|
return (
|
option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
);
|
},
|
|
async delData(row){
|
const t = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>是否删除该条用户信息？</div>,
|
cancelText: '取消',
|
okText: '确认',
|
centered: true,
|
onOk() {
|
delRecipient(row.id).then(res=>{
|
if(res.data.code == 100){
|
t.$message.success('删除用户信息成功');
|
t.getUserList()
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
})
|
},
|
onCancel() {
|
console.log('Cancel');
|
},
|
});
|
},
|
|
// 根据id查对象
|
findCodeById(data,value) {
|
for (const node of data) {
|
if (node.id === value) {
|
return node;
|
}
|
if (node.children) {
|
const foundNode = this.findCodeById(node.children, value);
|
if (foundNode) {
|
return foundNode;
|
}
|
}
|
}
|
return null;
|
},
|
|
async delBySet(){
|
const t = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>是否删除所选用户信息？</div>,
|
cancelText: '取消',
|
okText: '确认',
|
centered: true,
|
onOk() {
|
delRecipientBatch(t.selectedRowKeys.join(',')).then(res=>{
|
if(res.data.code == 100){
|
t.$message.success('删除用户信息成功');
|
t.getUserList()
|
t.selectedRowKeys = []
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
})
|
},
|
onCancel() {
|
console.log('Cancel');
|
},
|
});
|
},
|
|
onPageChange(page, pageSize) {
|
const t= this
|
t.pagination.current = page
|
t.search.pageIndex = page
|
t.getUserList()
|
},
|
onChange(value) {
|
const t = this
|
t.search.searchParams = {
|
company: '',
|
province: '',
|
city: '',
|
area: '',
|
town: '',
|
name: '',
|
phone: '',
|
peerRecipientGroupId: undefined
|
}
|
if(value[0]){
|
t.search.searchParams.province = t.findCodeById(t.areaData,value[0]).name
|
}
|
if(value[1]){
|
t.search.searchParams.city = t.findCodeById(t.areaData,value[1]).name
|
}
|
if(value[2]){
|
t.search.searchParams.area = t.findCodeById(t.areaData,value[2]).name
|
}
|
if(value[3]){
|
t.search.searchParams.town = t.findCodeById(t.areaData,value[3]).name
|
}
|
},
|
handleChange(value) {
|
console.log(`selected ${value}`);
|
this.getUserList()
|
},
|
onSelectChange(selectedRowKeys) {
|
this.selectedRowKeys = selectedRowKeys;
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.delBtn{
|
color: @danger
|
}
|
</style>
|
