<template>
|
<div class="inner">
|
<a-row>
|
<a-col :span="4">
|
<a-menu
|
style="width: calc(100% - 20px)"
|
:default-selected-keys="currentKey"
|
:open-keys.sync="openKeys"
|
:selectedKeys="currentKey"
|
mode="inline"
|
@click="handleClick"
|
>
|
<template v-for="(item,index) in treeData">
|
<sub-menu ref="subMenuRef" :key="item.id+'-'+item.name" :menu-info="item"></sub-menu>
|
</template>
|
</a-menu>
|
</a-col>
|
<a-col :span="20">
|
<div style="display: flex;justify-content: space-between">
|
<div>最新更新要求下发时间：{{updateData.gmtModified?updateData.gmtModified:'暂无数据'}}</div>
|
<div style="display: flex;align-items: center">
|
<div>总数：<span style="color: blue;margin-right: 10px">{{updateData.totalCount?updateData.totalCount:'暂无数据'}}</span>待更新：<span style="color: orange;margin-right: 10px">{{updateData.updateNoCount?updateData.updateNoCount:'暂无数据'}}</span>已更新：<span style="color: green;margin-right: 10px">{{updateData.updateYesCount?updateData.updateYesCount: '暂无数据'}}</span>更新率：<span style="color: blue;margin-right: 10px">{{updateData.updatedRate?updateData.updatedRate + '%':'暂无数据'}}</span></div>
|
<a-button type="danger" @click="deliverTask" v-if="!unittype || unittype == 1">下发更新任务</a-button>
|
</div>
|
</div>
|
<div style="margin: 20px 0;display: flex;justify-content: space-between">
|
<div>
|
<a-button type="primary" style="margin-right: 10px" @click="editData('add',{})">新增</a-button>
|
<a-button type="primary" @click="massImport()">批量导入</a-button>
|
</div>
|
<a-button type="primary" @click="openExport">批量导出</a-button>
|
|
<!-- <download-excel :data="json_data" :fields="json_fields" name="责任人导出.xlsx" >-->
|
<!-- <a-button type="primary">批量导出</a-button>-->
|
<!-- </download-excel>-->
|
|
</div>
|
|
<div class="table-cont">
|
<a-table :columns="columns" :data-source="tableData" :pagination="pagination" :rowKey="record=>record.id.toString()" bordered>
|
<template #index="text,record,index">
|
{{ index + 1 }}
|
</template>
|
<!-- <template #orgStructureName="text,record,index">-->
|
<!-- {{currentKey.length>0?currentKey[0].split('-')[1]: ''}}-->
|
<!-- </template>-->
|
<template #orgUserTypes="text,record,index">
|
{{record.orgUserTypes?record.orgUserTypes.map(i=>i.typeName + '(' + i.orgUserTags.map(j=>j.tagName).join('/') +')').join(','): ''}}
|
</template>
|
<template #updateStatus="text,record,index">
|
<span v-if="text == 0" style="color: green">已更新</span>
|
<span v-else style="color: red">待更新</span>
|
</template>
|
<template #action="action,row">
|
<a-button type="link" @click="editData('view',row)">详情</a-button>
|
<a-button type="link" @click="editData('edit',row)">更新</a-button>
|
<a-button type="link" v-if="row.updateStatus == 1" @click="noNeed(row)">无需更改</a-button>
|
<a-button type="link" class="delBtn" @click="delData(row)">删除</a-button>
|
</template>
|
</a-table>
|
</div>
|
</a-col>
|
<contactors-mod ref="contactMod" @refresh="getUserList()"></contactors-mod>
|
</a-row>
|
<a-modal v-model="visible" title="导入通讯录" ok-text="导入通讯录" :confirmLoading="uploadLoading" cancel-text="取消" @ok="uploadFile" centered :afterClose="clearMod">
|
<a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
|
<a-form-model-item label="通讯录表格模板" extra="导入通讯录须依据此模板">
|
<a-button type="primary" @click="downloadFile">下载模板</a-button>
|
</a-form-model-item>
|
<a-form-model-item label="通讯录表格文件">
|
<a-upload :file-list="fileList" :remove="handleRemove" :before-upload="beforeUpload" accept=".xlsx,.xls">
|
<a-button> <a-icon type="upload"/> 点击上传 </a-button>
|
</a-upload>
|
</a-form-model-item>
|
</a-form-model>
|
</a-modal>
|
<a-modal v-model="exportDialog" title="导出通讯录" :footer="null" centered :afterClose="closeDialog">
|
<a-form-model ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :colon="false">
|
<a-form-model-item label="行政区划" >
|
<a-tree-select
|
v-model="exportAreaId"
|
style="width: 100%"
|
:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
|
:tree-data="treeData"
|
placeholder="请选择行政区划"
|
:replaceFields="replaceFields"
|
@change="changeArea"
|
/>
|
</a-form-model-item>
|
<div v-if=" json_data.length>0">
|
<download-excel :data="json_data" :fields="json_fields" name="责任人导出.xlsx" style="display: flex;justify-content: flex-end">
|
<a-button type="primary">批量导出</a-button>
|
</download-excel>
|
</div>
|
<div v-else style="text-align: center;color: salmon">暂无人员导出</div>
|
|
</a-form-model>
|
</a-modal>
|
</div>
|
</template>
|
|
<script>
|
import {getUserInfo} from "@/util/storage";
|
import {
|
getStructure,
|
getStructureDetail,
|
getUpdateData,
|
getContactors,
|
delContactors,
|
noUpdate, deliverUpdate
|
} from "@/api/contactBook";
|
import subMenu from "@/views/Admin/contactBook/subMenu";
|
import contactorsMod from "@/views/Admin/components/contactorsMod"
|
import {getExportData, importUser} from "@/api/user";
|
import importNew from "@/assets/importNew.xlsx";
|
import JSONBig from 'json-bigint'
|
export default {
|
name: 'sameLevel',
|
components: {
|
subMenu,
|
contactorsMod
|
},
|
data () {
|
return {
|
visible: false,
|
uploadLoading: false,
|
fileList: [],
|
labelCol: { span: 8 },
|
wrapperCol: { span: 14 },
|
importNew,
|
openKeys: [],
|
areaVal: [],
|
unittype: null,
|
districtId: null,
|
currentKey: [],
|
search:{
|
pageIndex: 1,
|
pageSize: 10,
|
searchParams: {
|
name: '',
|
phone: '',
|
orgStructureId: null
|
}
|
},
|
columns:[
|
{
|
title: '序号',
|
dataIndex: 'index',
|
scopedSlots: {
|
customRender: 'index'
|
}
|
},
|
{
|
title: '姓名',
|
dataIndex: 'name',
|
key: 'name',
|
align: 'center'
|
},
|
{
|
title: '所属组织架构',
|
dataIndex: 'orgStructureName',
|
key: 'orgStructureName'
|
},
|
{
|
title: '所属单位',
|
dataIndex: 'company',
|
key: 'company',
|
},
|
{
|
title: '职务',
|
dataIndex: 'post',
|
key: 'post',
|
},
|
{
|
title: '电话号码',
|
dataIndex: 'phone',
|
key: 'phone',
|
},
|
{
|
title: '责任类型',
|
dataIndex: 'orgUserTypes',
|
scopedSlots: {
|
customRender: 'orgUserTypes'
|
}
|
},
|
{
|
title: '更新状态',
|
dataIndex: 'updateStatus',
|
scopedSlots: {
|
customRender: 'updateStatus'
|
}
|
},
|
{
|
title: '操作',
|
width: '12%',
|
key: 'action',
|
scopedSlots: { customRender: 'action' }
|
},
|
],
|
treeData: [],
|
updateData: {},
|
tableData: [],
|
pagination: {
|
current: 1,
|
defaultCurrent: 1,
|
defaultPageSize: 10,
|
total: 0,
|
onChange: ( page, pageSize ) => this.onPageChange(page,pageSize),
|
showTotal: total => `共 ${total} 条`
|
},
|
fieldNames:{
|
label: 'name',
|
value: 'id',
|
children: 'children'
|
},
|
currentId: null,
|
exportDialog: false,
|
areaId: null,
|
areaData: [],
|
exportAreaId: null,
|
replaceFields: {
|
children:'children',
|
title:'name',
|
key:'id',
|
value: 'code'
|
},
|
json_fields: {
|
'ID': {
|
field: 'id',
|
callback: value => {
|
return ' '+value
|
}
|
},
|
'姓名': 'name',
|
'所属当前级别行政区划': 'districtName',
|
'区划编号': 'districtCode',
|
'组织架构': 'orgStructureName',
|
'单位': 'company',
|
'职务': 'post',
|
'电话号码': 'phone',
|
'责任类型': {
|
field: 'orgUserTypes',
|
callback: (value) => {
|
return value?value.map(i=>i.typeName + '(' + i.orgUserTags.map(j=>j.tagName).join('/') +')').join(','): ''
|
}
|
},
|
},
|
json_data: []
|
}
|
},
|
created() {
|
const t = this
|
t.unittype = getUserInfo().unittype
|
t.districtId = getUserInfo().districtId
|
t.getStructure()
|
t.getUserList()
|
t.getUpdataData()
|
},
|
mounted() {
|
|
},
|
watch: {
|
openKeys(val) {
|
console.log('openKeys', val);
|
}
|
},
|
methods:{
|
downloadFile(){
|
const link = document.createElement('a')
|
link.href = importNew
|
link.target = '_blank'
|
link.download = '通讯录导入模板.xlsx'
|
link.click()
|
},
|
|
handleRemove(file) {
|
const index = this.fileList.indexOf(file)
|
const newFileList = this.fileList.slice()
|
newFileList.splice(index, 1)
|
this.fileList = newFileList;
|
},
|
beforeUpload(file) {
|
this.fileList = [...this.fileList, file]
|
this.fileList = this.fileList.slice(-1)
|
return false;
|
},
|
|
async uploadFile(){
|
if(!this.currentId || !this.search.searchParams.orgStructureId){
|
this.$message.warning('请先在页面左侧单位架构处选择需要导入人员的单位')
|
return
|
}
|
if(this.fileList.length == 0){
|
this.$message.warning('请先上传通讯录表格');
|
return
|
}else{
|
this.uploadLoading = true
|
const { fileList } = this;
|
const formData = new FormData();
|
fileList.forEach((file) => {
|
formData.append('file', file)
|
})
|
formData.append('districtId', this.currentId)
|
formData.append('orgStructureId', this.search.searchParams.orgStructureId)
|
const res = await importUser(formData)
|
if(res.data.code == 100){
|
this.$message.success(res.data.msg,2);
|
this.fileList = []
|
this.uploadLoading = false
|
this.visible = false
|
await this.getUserList()
|
}else{
|
this.$message.warning(res.data.msg);
|
this.uploadLoading = false
|
}
|
}
|
},
|
clearMod(){
|
this.fileList = []
|
},
|
closeDialog(){
|
this.exportAreaId = null;
|
this.json_data = [];
|
this.exportDialog = false;
|
},
|
async getStructure(){
|
const t = this
|
const res = await getStructure()
|
if(res.data.code == 100){
|
t.treeData = t.filterBranches(res.data.data,['自治区直辖县级行政区划'])
|
// const firstItem = this.firstIdWithOrgStructures(res.data.data[0])
|
// if(firstItem){
|
// t.openKeys = [firstItem.id +'-'+ firstItem.name]
|
// t.currentId = firstItem.id
|
// t.currentKey = [firstItem.orgStructures[0].id +'-'+ firstItem.orgStructures[0].orgName]
|
// }else{
|
// t.$message.warning('暂无可操作的单位，请先进入“组织架构维护页面”新建相应的本级单位')
|
// }
|
}else{
|
t.$message.warning(res.data.msg)
|
}
|
},
|
|
|
filterBranches(branches, targetNames) {
|
return branches.filter(branch => {
|
if (targetNames.includes(branch.name)) {
|
return false; // 过滤掉当前分支
|
}
|
if (branch.children && branch.children.length > 0) {
|
branch.children = this.filterBranches(branch.children, targetNames);
|
}
|
return true; // 保留当前分支
|
});
|
},
|
|
firstIdWithOrgStructures(node) {
|
if (node.orgStructures && node.orgStructures.length > 0) {
|
return node
|
}
|
|
if (node.children && node.children.length > 0) {
|
for (let child of node.children) {
|
const result = this.firstIdWithOrgStructures(child);
|
if (result) {
|
return result
|
}
|
}
|
}
|
return null;
|
},
|
|
async getUpdataData(){
|
const t = this
|
const res = await getUpdateData();
|
if(res.data.code == 100){
|
t.updateData = res.data.data
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
},
|
|
openExport() {
|
this.exportDialog = true
|
},
|
|
handleClick(e) {
|
this.currentId = e.keyPath[1]?e.keyPath[1].split('-')[0]:e.keyPath[0].split('-')[0]
|
this.search = {
|
pageIndex: 1,
|
pageSize: 10,
|
searchParams: {
|
name: '',
|
phone: '',
|
orgStructureId: null
|
}
|
}
|
this.currentKey = [e.key]
|
this.search.searchParams.orgStructureId = Number(e.key.split('-')[0])
|
this.getUserList()
|
},
|
titleClick(e) {
|
console.log('titleClick', e);
|
},
|
async getUserList(){
|
const t = this
|
const res = await getContactors(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);
|
}
|
},
|
|
massImport(){
|
this.visible = true
|
},
|
|
resetSearch(){
|
const t = this
|
t.areaVal = []
|
t.search = {
|
pageIndex: 1,
|
pageSize: 10,
|
}
|
t.getUserList()
|
},
|
|
editData(type,data){
|
const t = this
|
if(type == 'add'){
|
if(!t.currentId || !t.currentKey){
|
t.$message.warning('请先在左侧选择单位再进行新增')
|
return
|
}else {
|
const areaId = t.currentId
|
const orgName = t.currentKey.length>0?t.currentKey[0].split('-')[1]: ''
|
const orgId = t.currentKey.length>0?t.currentKey[0].split('-')[0]: null
|
t.$refs.contactMod.openDialog(type,data,areaId,orgName,orgId)
|
}
|
}else{
|
t.$refs.contactMod.openDialog(type,data,data.districtId,data.orgStructureName,data.orgStructureId)
|
}
|
},
|
|
async delData(row){
|
const t = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>是否删除该条信息？</div>,
|
cancelText: '取消',
|
okText: '确认',
|
centered: true,
|
onOk() {
|
delContactors(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');
|
},
|
});
|
},
|
changeArea(value){
|
console.log('val',this.exportAreaId)
|
getExportData(this.exportAreaId).then(res => {
|
if(res.data.code == 100){
|
this.json_data = res.data.data
|
console.log('this.json_data',this.json_data)
|
}else{
|
this.$message.warning(res.data.msg);
|
}
|
})
|
|
},
|
|
async deliverTask(){
|
const t = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>是否确认下发更新任务？</div>,
|
cancelText: '取消',
|
okText: '确认',
|
centered: true,
|
onOk() {
|
deliverUpdate().then(res=>{
|
if(res.data.code == 100){
|
t.$message.success('下发成功')
|
t.getUpdataData()
|
t.getUserList()
|
}else{
|
t.$message.warning(res.data.msg);
|
}
|
})
|
},
|
onCancel() {
|
console.log('Cancel');
|
},
|
});
|
},
|
|
async noNeed(row){
|
const t = this
|
this.$confirm({
|
title: '提示',
|
content: h => <div>是否确认该信息无需更改？</div>,
|
cancelText: '取消',
|
okText: '确认',
|
centered: true,
|
onOk() {
|
noUpdate(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');
|
},
|
});
|
},
|
|
onPageChange(page, pageSize) {
|
const t= this
|
t.pagination.current = page
|
t.search.pageIndex = page
|
t.getUserList()
|
},
|
}
|
}
|
</script>
|
|
<style lang="less" scoped>
|
.delBtn{
|
color: @danger
|
}
|
</style>
|
