大屏
This commit is contained in:
yanran200730
@@ -298,7 +298,7 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
getCommunityList() {
|
getCommunityList() {
|
||||||
this.instance.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
|
this.instance.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
|
||||||
params: {
|
params: {
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 1000000
|
size: 1000000
|
||||||
|
|||||||
@@ -1,13 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="AppResourceMap"></div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
|
|
||||||
</style>
|
|
||||||
513
packages/bigscreen/dv/AppResourceMapDv.vue
Normal file
513
packages/bigscreen/dv/AppResourceMapDv.vue
Normal file
@@ -0,0 +1,513 @@
|
|||||||
|
<template>
|
||||||
|
<div class="map">
|
||||||
|
<div id="map" ref="rootmap" />
|
||||||
|
<div class="community-info" v-show="isShowInfo">
|
||||||
|
<div class="community-info__close" title="关闭" @click="closeInfo">
|
||||||
|
<i class="iconClean iconfont"></i>
|
||||||
|
</div>
|
||||||
|
<div class="community-info__header">
|
||||||
|
<h2>{{ info.resourceName }}</h2>
|
||||||
|
<div>{{ info.areaName }}{{ info.address }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="community-info__wrapper">
|
||||||
|
<div class="community-info__title">
|
||||||
|
<h2>基本信息</h2>
|
||||||
|
</div>
|
||||||
|
<p>{{ info.information }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppResourceMapDv',
|
||||||
|
label: '资源地图',
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
root: this
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
map: null,
|
||||||
|
community: '',
|
||||||
|
isShowInfo: false,
|
||||||
|
info: {},
|
||||||
|
satellite: null,
|
||||||
|
zoom: 11,
|
||||||
|
choosedId: '',
|
||||||
|
center: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getCorpLocation()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getCorpLocation(){
|
||||||
|
this.instance.post("/app/appdvcpconfig/getCorpLocation").then(res=>{
|
||||||
|
if(res.code==0){
|
||||||
|
this.initMap(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getList () {
|
||||||
|
this.instance.post(`/app/appresourceinfo/listAll`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
const points = res.data.map(item => {
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
lnglat: [item.lng, item.lat],
|
||||||
|
id: item.id,
|
||||||
|
corpId: item.corpId,
|
||||||
|
areaName:item.areaName,
|
||||||
|
name: item.resourceName
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
this.addMakert(points)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
changeZoom(isAdd) {
|
||||||
|
const zoom = isAdd ? this.map.getZoom() + 1 : this.map.getZoom() - 1
|
||||||
|
this.map.setZoom(zoom, false, 600)
|
||||||
|
},
|
||||||
|
|
||||||
|
getInfo (id) {
|
||||||
|
this.instance.post(`/app/appresourceinfo/queryDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.info = res.data
|
||||||
|
this.isShowInfo = true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
toCenter() {
|
||||||
|
this.map.setZoomAndCenter(this.zoom, this.center, false, 600)
|
||||||
|
},
|
||||||
|
|
||||||
|
renderClusterMarker(context) {
|
||||||
|
let el = `<div class="polymeric">
|
||||||
|
<div class="polymeric-container">
|
||||||
|
<p>${context.count}</p>
|
||||||
|
</div>
|
||||||
|
</div>`
|
||||||
|
|
||||||
|
let offset = new AMap.Pixel(-9, -9)
|
||||||
|
context.marker.setContent(el)
|
||||||
|
context.marker.setOffset(offset)
|
||||||
|
context.marker.lnglat = context.clusterData[0].lnglat
|
||||||
|
|
||||||
|
context.marker.on('click', e => {
|
||||||
|
this.map.setZoomAndCenter(this.map.getZoom() + 3, e.target.lnglat, false, 500)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
renderMarker(context) {
|
||||||
|
const buildId = context.data[0].id
|
||||||
|
|
||||||
|
let el = `<div class="mark" id="buildId-${buildId}">
|
||||||
|
<img src="${context.data[0].icon || 'https://cdn.cunwuyun.cn/dvcp/ply/icon.png'}">
|
||||||
|
</div>`
|
||||||
|
|
||||||
|
context.marker.setContent(el);
|
||||||
|
context.marker.setAnchor("center")
|
||||||
|
context.marker.id = `${buildId}`
|
||||||
|
context.marker.data = JSON.stringify(context.data[0])
|
||||||
|
context.marker.lnglat = context.data[0].lnglat
|
||||||
|
|
||||||
|
context.marker.on('click', e => {
|
||||||
|
this.choosedId = e.target.id
|
||||||
|
this.getInfo(e.target.id)
|
||||||
|
context.marker.setContent(el);
|
||||||
|
document.querySelectorAll('.mark').forEach(el => {
|
||||||
|
el.classList.remove('mark-active')
|
||||||
|
})
|
||||||
|
document.querySelector(`#buildId-${e.target.id}`).add('mark-active')
|
||||||
|
this.map.setZoomAndCenter(this.map.getZoom() + 0.000000001, e.target.lnglat, false, 300)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
closeInfo () {
|
||||||
|
this.info = {}
|
||||||
|
this.isShowInfo = false
|
||||||
|
this.choosedId = ''
|
||||||
|
this.map.setZoom(this.map.getZoom() + 0.0001)
|
||||||
|
},
|
||||||
|
|
||||||
|
addMakert(points) {
|
||||||
|
new AMap.MarkerClusterer(this.map, points, {
|
||||||
|
gridSize: 60,
|
||||||
|
maxZoom: 15,
|
||||||
|
clusterByZoomChange: false,
|
||||||
|
renderClusterMarker: this.renderClusterMarker,
|
||||||
|
renderMarker: this.renderMarker
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
initMap({lng,lat}) {
|
||||||
|
this.center = [lng,lat];
|
||||||
|
AMapLoader.load({
|
||||||
|
key: '54a02a43d9828a8f9cd4f26fe281e74e',
|
||||||
|
version: '2.0',
|
||||||
|
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
|
||||||
|
AMapUI: {
|
||||||
|
version: '1.1',
|
||||||
|
plugins: []
|
||||||
|
}
|
||||||
|
}).then((AMap) => {
|
||||||
|
this.map = new AMap.Map('map', {
|
||||||
|
resizeEnable: true,
|
||||||
|
zooms: [6, 20],
|
||||||
|
center: [lng, lat],
|
||||||
|
zoom: this.zoom,
|
||||||
|
mapStyle: 'amap://styles/40f6fba77127e061a058f670433a67ec'
|
||||||
|
})
|
||||||
|
this.satellite = new AMap.TileLayer.Satellite()
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.map {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.community-info__header {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
padding: 12px 20px;
|
||||||
|
background-image: linear-gradient(270deg, rgba(11, 158, 255, 0.2) 0%, rgba(2, 81, 227, 0.2) 100%);
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
max-width: 360px;
|
||||||
|
line-height: 28px;
|
||||||
|
margin: 0;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
color: #D2E0FF;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: block;
|
||||||
|
margin-top: 4px;
|
||||||
|
font-style: normal;
|
||||||
|
color: #82C5FF;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-info {
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
width: 400px;
|
||||||
|
max-height: calc(100% - 20px);
|
||||||
|
overflow-y: overlay;
|
||||||
|
overflow-x: hidden;
|
||||||
|
z-index: 111;
|
||||||
|
background: rgba(7,11,35,0.50);
|
||||||
|
border: 1px solid #14345F;
|
||||||
|
|
||||||
|
.community-info__close {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
padding: 16px 12px 0 12px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #8899bb;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 6px;
|
||||||
|
height: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
border-radius: 6px;
|
||||||
|
background: rgba(144, 147, 153, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.community-info__wrapper {
|
||||||
|
padding: 0 20px 40px;
|
||||||
|
|
||||||
|
.community-info__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
position: relative;
|
||||||
|
width: 169px;
|
||||||
|
padding: 0 20px;
|
||||||
|
font-size: 15px;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 700;
|
||||||
|
background: url(https://cdn.cunwuyun.cn/dvcp/ply/title-bg.png) no-repeat;
|
||||||
|
background-size: 169px 30px;
|
||||||
|
background-position-y: -5px;
|
||||||
|
background-position-x: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 52px;
|
||||||
|
height: 24px;
|
||||||
|
line-height: 24px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #82C5FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .ol-zoom {
|
||||||
|
display: none !important;
|
||||||
|
top: inherit !important;
|
||||||
|
bottom: 0.5em !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .amap-logo, ::v-deep .amap-copyright {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .amap-icon {
|
||||||
|
width: 40px !important;
|
||||||
|
height: 40px !important;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.no-more {
|
||||||
|
display: block;
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
margin-top: 2px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.community {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
height: 28px;
|
||||||
|
padding: 0 10px;
|
||||||
|
background: #0F8F64;
|
||||||
|
border-radius: 26px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&.color1 {
|
||||||
|
background: #2266FF;
|
||||||
|
|
||||||
|
em:after {
|
||||||
|
border-top-color: #2266FF !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.color2 {
|
||||||
|
background: #F46159;
|
||||||
|
|
||||||
|
em:after {
|
||||||
|
border-top-color: #F46159 !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
em {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -6px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -6px;
|
||||||
|
left: 0;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border: 6px solid #0F8F64;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-right-color: transparent;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
overflow: hidden;
|
||||||
|
content: ' ';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
padding-right: 2px;
|
||||||
|
position: relative;
|
||||||
|
color: #ffc928;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .polymeric {
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 62px;
|
||||||
|
height: 62px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
|
||||||
|
&.polymeric-active {
|
||||||
|
.polymeric-container {
|
||||||
|
background: #F46159;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
background-color: #F46159;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
position: absolute;
|
||||||
|
z-index: -1;
|
||||||
|
width: 62px;
|
||||||
|
height: 62px;
|
||||||
|
border-radius: 50%;
|
||||||
|
-webkit-animation: warn 1s ease-out 0s infinite;
|
||||||
|
animation: warn 1s ease-out 0s infinite;
|
||||||
|
background-color: rgba(15, 143, 100, 1);
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
content: " ";
|
||||||
|
}
|
||||||
|
|
||||||
|
.polymeric-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 62px;
|
||||||
|
height: 62px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(15, 143, 100, 1);
|
||||||
|
|
||||||
|
p {
|
||||||
|
text-align: center;
|
||||||
|
width: 58px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 18px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
p:first-child{
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
color: #fff;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .mark{
|
||||||
|
user-select: none;
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
border-radius: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes warn {
|
||||||
|
0% {
|
||||||
|
transform: scale(.5);
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
opacity: .5
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: scale(1.8);
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes warn {
|
||||||
|
0% {
|
||||||
|
transform: scale(.5);
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
opacity: .5
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
transform: scale(1.4);
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -71,7 +71,7 @@ export default {
|
|||||||
this.areaName = this.user.info.areaName
|
this.areaName = this.user.info.areaName
|
||||||
this.getTypeList()
|
this.getTypeList()
|
||||||
this.getCorpLocation()
|
this.getCorpLocation()
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
@@ -117,7 +117,7 @@ export default {
|
|||||||
|
|
||||||
renderMarker(context) {
|
renderMarker(context) {
|
||||||
const resourceId = context.data[0].id
|
const resourceId = context.data[0].id
|
||||||
|
|
||||||
let el = `<img src="${resourceId === this.chooseResourceId ? this.fireIconActive : this.fireIcon}" style="${resourceId === this.chooseResourceId ? 'width:40px;height:40px;' : 'width:28px;height:28px;'}" id="resourceId-${resourceId}" class="mark-icon" />`
|
let el = `<img src="${resourceId === this.chooseResourceId ? this.fireIconActive : this.fireIcon}" style="${resourceId === this.chooseResourceId ? 'width:40px;height:40px;' : 'width:28px;height:28px;'}" id="resourceId-${resourceId}" class="mark-icon" />`
|
||||||
|
|
||||||
context.marker.setContent(el);
|
context.marker.setContent(el);
|
||||||
@@ -154,7 +154,7 @@ export default {
|
|||||||
initMap({lng, lat}) {
|
initMap({lng, lat}) {
|
||||||
this.center = [lng, lat];
|
this.center = [lng, lat];
|
||||||
AMapLoader.load({
|
AMapLoader.load({
|
||||||
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
key: '54a02a43d9828a8f9cd4f26fe281e74e',
|
||||||
version: '2.0',
|
version: '2.0',
|
||||||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
|
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
|
||||||
AMapUI: {
|
AMapUI: {
|
||||||
@@ -418,7 +418,7 @@ export default {
|
|||||||
::v-deep .el-input, ::v-deep input {
|
::v-deep .el-input, ::v-deep input {
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
::v-deep .el-select {
|
::v-deep .el-select {
|
||||||
padding-right: 28px;
|
padding-right: 28px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<div class="doc-circulation ailist-wrapper">
|
||||||
|
<keep-alive :include="['List']">
|
||||||
|
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
|
||||||
|
</keep-alive>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import List from './components/List'
|
||||||
|
import Add from './components/Add'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppDataPermissionConfig',
|
||||||
|
label: '数据权限设置',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
component: 'List',
|
||||||
|
params: {},
|
||||||
|
include: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Add,
|
||||||
|
List
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted () {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange (data) {
|
||||||
|
if (data.type === 'Add') {
|
||||||
|
this.component = 'Add'
|
||||||
|
this.params = data.params
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.type === 'list') {
|
||||||
|
this.component = 'List'
|
||||||
|
this.params = data.params
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
if (data.isRefresh) {
|
||||||
|
this.$refs.component.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.doc-circulation {
|
||||||
|
height: 100%;
|
||||||
|
background: #F3F6F9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,203 @@
|
|||||||
|
<template>
|
||||||
|
<ai-detail>
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title :title="id ? '编辑成员' : '添加成员'" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||||
|
</ai-title>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<el-form ref="form" :model="form" label-width="110px" label-position="right">
|
||||||
|
<ai-card title="个人信息">
|
||||||
|
<template #content>
|
||||||
|
<div class="ai-form">
|
||||||
|
<el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名', trigger: 'blur' }]">
|
||||||
|
<el-input size="small" placeholder="请输入姓名" show-word-limit v-model="form.name" :maxlength="10"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="账号" prop="id" :rules="[{ required: true, message: '请输入账号', trigger: 'blur' }]">
|
||||||
|
<el-input size="small" :disabled="!!id" show-word-limit :maxlength="30" placeholder="成员唯一标识，设定以后不支持修改" v-model="form.id"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="手机号" prop="mobile" :rules="[{ required: true, validator: validatorPhone, trigger: 'blur' }]">
|
||||||
|
<el-input size="small" placeholder="请输入手机号" show-word-limit :maxlength="11" v-model="form.mobile"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="性别" prop="gender">
|
||||||
|
<el-radio-group v-model="form.gender">
|
||||||
|
<el-radio label="1">男</el-radio>
|
||||||
|
<el-radio label="2">女</el-radio>
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="座机" prop="telephone">
|
||||||
|
<el-input size="small" placeholder="请输入座机" v-model="form.telephone"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="邮箱" prop="email">
|
||||||
|
<el-input size="small" placeholder="请输入邮箱" v-model="form.email"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="地址" style="width: 100%;" prop="address">
|
||||||
|
<el-input size="small" style="width: 100%;" show-word-limit :maxlength="30" placeholder="请输入地址" v-model="form.address"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
<ai-card title="组织信息">
|
||||||
|
<template #content>
|
||||||
|
<el-form-item label="部门" prop="departmentName" style="width: 100%;" :rules="[{ required: true, message: '请选择部门', trigger: 'change' }]">
|
||||||
|
<el-input size="small" placeholder="请选择..." disabled v-model="form.departmentName">
|
||||||
|
<ai-wechat-selecter slot="append" isStrictly :instance="instance" @change="onChange" v-model="department" isChooseUnit>
|
||||||
|
<el-button type="info">选择</el-button>
|
||||||
|
</ai-wechat-selecter>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签" style="width: 100%;" prop="tags">
|
||||||
|
<el-select size="small" v-model="form.tagIds" multiple placeholder="请选择标签">
|
||||||
|
<el-option
|
||||||
|
v-for="item in tagsList"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.tagname"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="职务" prop="position">
|
||||||
|
<el-input size="small" placeholder="请输入职务" v-model="form.position"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
<template #footer>
|
||||||
|
<el-button @click="cancel">取消</el-button>
|
||||||
|
<el-button type="primary" @click="confirm">提交</el-button>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Add',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
const validatorPhone = function (rule, value, callback) {
|
||||||
|
if (value === '') {
|
||||||
|
callback(new Error('请输入手机号'))
|
||||||
|
} else if (!/^1\d{10}$/.test(value)) {
|
||||||
|
callback(new Error('手机号格式错误'))
|
||||||
|
} else {
|
||||||
|
callback()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
info: {},
|
||||||
|
department: [],
|
||||||
|
validatorPhone: validatorPhone,
|
||||||
|
form: {
|
||||||
|
position: '',
|
||||||
|
name: '',
|
||||||
|
email: '',
|
||||||
|
telephone: '',
|
||||||
|
gender: '',
|
||||||
|
mobile: '',
|
||||||
|
departmentName: '',
|
||||||
|
departmentIds: [],
|
||||||
|
tagIds: [],
|
||||||
|
id: ''
|
||||||
|
},
|
||||||
|
id: '',
|
||||||
|
tagsList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
this.getTags()
|
||||||
|
|
||||||
|
if (this.params && this.params.departmentId && !this.params.id) {
|
||||||
|
this.department = [{
|
||||||
|
id: String(this.params.departmentId),
|
||||||
|
name: this.params.departmentName
|
||||||
|
}]
|
||||||
|
this.form.departmentIds = [this.params.departmentId]
|
||||||
|
this.form.departmentName = this.params.departmentName
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.params && this.params.id) {
|
||||||
|
this.id = this.params.id
|
||||||
|
this.getInfo(this.params.id)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getInfo (id) {
|
||||||
|
this.instance.post(`/app/wxcp/wxuser/queryDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
const departmentNames = res.data.departmentNames.split(',')
|
||||||
|
this.department = res.data.departmentIdsStr.split(',').map((item, index) => {
|
||||||
|
return {
|
||||||
|
name: departmentNames[index],
|
||||||
|
id: item
|
||||||
|
}
|
||||||
|
})
|
||||||
|
this.form = {
|
||||||
|
...res.data,
|
||||||
|
departmentName: res.data.departmentNames,
|
||||||
|
tagIds: res.data.tags.map(v => v.id),
|
||||||
|
departmentIds: res.data.departmentIdsStr.split(',')
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange (e) {
|
||||||
|
if (e.length) {
|
||||||
|
this.form.departmentIds = e.map(v => v.id)
|
||||||
|
this.form.departmentName = e.map(v => v.name).join(',')
|
||||||
|
} else {
|
||||||
|
this.form.departmentIds = ''
|
||||||
|
this.form.departmentName = ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getTags () {
|
||||||
|
this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tagsList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose () {
|
||||||
|
this.form.explain = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
confirm () {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
const api = this.id ? '/app/wxcp/wxuser/update' : '/app/wxcp/wxuser/add'
|
||||||
|
this.instance.post(api, {
|
||||||
|
...this.form
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('提交成功')
|
||||||
|
setTimeout(() => {
|
||||||
|
this.cancel(true)
|
||||||
|
}, 600)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel (isRefresh) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'list',
|
||||||
|
isRefresh: !!isRefresh
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,763 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="addressBook">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="数据权限设置" isShowBottomBorder></ai-title>
|
||||||
|
</template>
|
||||||
|
<template #left>
|
||||||
|
<div class="addressBook-left">
|
||||||
|
<div class="addressBook-left__title">
|
||||||
|
<h2 @click="tabIndex = 0, search.current = 1, getList()" :class="[tabIndex === 0 ? 'tab-active' : '']">
|
||||||
|
组织架构</h2>
|
||||||
|
<h2 @click="tabIndex = 1, search.current = 1, getList()" :class="[tabIndex === 1 ? 'tab-active' : '']">标签</h2>
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list--title" v-if="tabIndex === 0">
|
||||||
|
<el-input
|
||||||
|
size="mini"
|
||||||
|
placeholder="请输入部门名称"
|
||||||
|
v-model="unitName"
|
||||||
|
clearable
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list--title" v-if="tabIndex === 1">
|
||||||
|
<el-input
|
||||||
|
class="addressBook-left__list--search"
|
||||||
|
size="mini"
|
||||||
|
clearable
|
||||||
|
style="width: 154px;"
|
||||||
|
placeholder="请输入标签名称"
|
||||||
|
v-model="tagName"
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list--wrapper">
|
||||||
|
<div class="addressBook-left__list" v-show="tabIndex === 0">
|
||||||
|
<el-tree
|
||||||
|
:filter-node-method="filterNode"
|
||||||
|
ref="tree"
|
||||||
|
:props="defaultProps"
|
||||||
|
node-key="id"
|
||||||
|
:expand-on-click-node="false"
|
||||||
|
:data="unitList"
|
||||||
|
highlight-current
|
||||||
|
:current-node-key="search.departmentId"
|
||||||
|
:default-expanded-keys="defaultExpanded"
|
||||||
|
:default-checked-keys="defaultChecked"
|
||||||
|
@current-change="onTreeChange">
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list" v-show="tabIndex === 1">
|
||||||
|
<div class="addressBook-left__tags">
|
||||||
|
<div
|
||||||
|
@click="changeTag(index)"
|
||||||
|
class="addressBook-left__tags--item"
|
||||||
|
:class="[currIndex === index ? 'addressBook-left__tags--item-active' : '']"
|
||||||
|
v-for="(item, index) in tagsList" :key="index">
|
||||||
|
<span>{{ item.tagname }}</span>
|
||||||
|
<el-dropdown @command="e => handleCommand(e, item)">
|
||||||
|
<i class="iconfont iconmore"></i>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item command="edit">编辑</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="remove">删除</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar class="search-bar">
|
||||||
|
<template #left>
|
||||||
|
<el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncMembers">同步部门</el-button>
|
||||||
|
<el-button size="small" icon="iconfont iconUpdate_Files" v-if="tabIndex === 0" :loading="btnLoading" @click="syncUser">同步成员</el-button>
|
||||||
|
<el-button size="small" type="primary" icon="iconfont" :disabled="!ids.length" @click="id = '', isShow = true">数据权限设置</el-button>
|
||||||
|
</template>
|
||||||
|
<template slot="right">
|
||||||
|
<el-input
|
||||||
|
v-model="search.name"
|
||||||
|
size="small"
|
||||||
|
v-throttle="() => {search.current = 1, getList()}"
|
||||||
|
placeholder="请输入成员姓名、手机号或标签名称"
|
||||||
|
clearable
|
||||||
|
@clear="search.current = 1, search.name = '', getList()"
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table
|
||||||
|
:tableData="tableData"
|
||||||
|
:col-configs="colConfigs"
|
||||||
|
:total="total"
|
||||||
|
v-loading="loading"
|
||||||
|
style="margin-top: 6px;"
|
||||||
|
:current.sync="search.current"
|
||||||
|
:size.sync="search.size"
|
||||||
|
@handleSelectionChange="handleSelectionChange"
|
||||||
|
@getList="getList">
|
||||||
|
<el-table-column slot="avatar" label="" align="right" width="100px">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<img class="table-avatar" :src="row.avatar || 'https://cdn.cunwuyun.cn/dvcp/h5/defaultAvatar.png'">
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column slot="options" width="140px" fixed="right" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-options">
|
||||||
|
<el-button type="text" @click="toSetting(row)">数据权限设置</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
<ai-dialog
|
||||||
|
:visible.sync="isShow"
|
||||||
|
width="590px"
|
||||||
|
title="数据权限设置"
|
||||||
|
@close="onClose"
|
||||||
|
@onConfirm="onConfirm">
|
||||||
|
<el-form ref="form" :model="form" label-width="110px" label-position="right">
|
||||||
|
<el-form-item label="返乡登记" prop="fxdj">
|
||||||
|
<ai-area-get multiple v-model="form.fxdj" :root="user.info.areaId" :instance="instance" showAll></ai-area-get>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="卡口登记-卡口" prop="kkdjKk">
|
||||||
|
<ai-select
|
||||||
|
v-model="form.kkdjKk"
|
||||||
|
clearable
|
||||||
|
multiple
|
||||||
|
placeholder="请选择卡口"
|
||||||
|
:selectList="dictList">
|
||||||
|
</ai-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="卡口登记-社区" prop="kkdjSq">
|
||||||
|
<ai-area-get multiple v-model="form.kkdjSq" :root="user.info.areaId" :instance="instance"></ai-area-get>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="核酸检测" prop="hsjc">
|
||||||
|
<ai-area-get multiple v-model="form.hsjc" :root="user.info.areaId" :instance="instance"></ai-area-get>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="社区管理" prop="sqgl">
|
||||||
|
<ai-area-get multiple v-model="form.sqgl" :root="user.info.areaId" :instance="instance"></ai-area-get>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ai-dialog>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
users: [],
|
||||||
|
department: [],
|
||||||
|
btnLoading: false,
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
title: '',
|
||||||
|
tagname: '',
|
||||||
|
name: '',
|
||||||
|
tagIds: '',
|
||||||
|
departmentId: ''
|
||||||
|
},
|
||||||
|
dictList: [],
|
||||||
|
form: {
|
||||||
|
fxdj: [],
|
||||||
|
sqgl: [],
|
||||||
|
hsjc: [],
|
||||||
|
kkdjSq: [],
|
||||||
|
kkdjKk: []
|
||||||
|
},
|
||||||
|
isShow: false,
|
||||||
|
loading: false,
|
||||||
|
defaultChecked: [],
|
||||||
|
defaultExpanded: [],
|
||||||
|
tabIndex: 0,
|
||||||
|
currIndex: -1,
|
||||||
|
total: 0,
|
||||||
|
colConfigs: [
|
||||||
|
{type: 'selection', label: ''},
|
||||||
|
{slot: 'avatar', label: ''},
|
||||||
|
{prop: 'name', label: '姓名'},
|
||||||
|
{prop: 'mobile', align: 'center', label: '手机号'},
|
||||||
|
{prop: 'fxdjStr', align: 'center', label: '返乡登记'},
|
||||||
|
{prop: 'kkdjKkStr', align: 'center', label: '卡口登记-卡口'},
|
||||||
|
{prop: 'kkdjSqStr', align: 'center', label: '卡口登记-社区'},
|
||||||
|
{prop: 'hsjcStr', align: 'center', label: '核酸检测'},
|
||||||
|
{prop: 'sqglStr', align: 'center', label: '社区管理'}
|
||||||
|
],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name'
|
||||||
|
},
|
||||||
|
unitName: '',
|
||||||
|
unitList: [],
|
||||||
|
tagsList: [],
|
||||||
|
tagName: '',
|
||||||
|
sourceTagList: [],
|
||||||
|
tableData: [],
|
||||||
|
tagId: '',
|
||||||
|
departmentName: '',
|
||||||
|
departId: '',
|
||||||
|
ids: '',
|
||||||
|
id: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
...mapState(['user'])
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
unitName(val) {
|
||||||
|
this.$refs.tree.filter(val)
|
||||||
|
},
|
||||||
|
|
||||||
|
tagName(val) {
|
||||||
|
if (!val) {
|
||||||
|
this.tagsList = this.sourceTagList
|
||||||
|
}
|
||||||
|
|
||||||
|
this.tagsList = this.sourceTagList.filter(v => v.tagname.indexOf(val) > -1)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getTree()
|
||||||
|
this.getList()
|
||||||
|
this.getTags()
|
||||||
|
this.getDictList()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getDictList () {
|
||||||
|
this.instance.post(`/app/appepidemicpreventiongateway/list?size=10000`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.dictList = res.data.records.map(v => {
|
||||||
|
return {
|
||||||
|
dictName: v.name,
|
||||||
|
dictValue: v.id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
toSetting (e) {
|
||||||
|
this.isShow = true
|
||||||
|
this.id = e.sysUserId
|
||||||
|
this.form.fxdj = e.fxdj.split(',')
|
||||||
|
this.form.sqgl = e.sqgl.split(',')
|
||||||
|
this.form.hsjc = e.hsjc.split(',')
|
||||||
|
this.form.kkdjSq = e.kkdjSq.split(',')
|
||||||
|
this.form.kkdjKk = e.kkdjKk.split(',')
|
||||||
|
},
|
||||||
|
|
||||||
|
changeTag(index) {
|
||||||
|
this.currIndex = index
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
this.id = ''
|
||||||
|
this.form.fxdj = []
|
||||||
|
this.form.sqgl = []
|
||||||
|
this.form.hsjc = []
|
||||||
|
this.form.kkdjSq = []
|
||||||
|
this.form.kkdjKk = []
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
onConfirm() {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance.post(`/app/appepidemicpreventiondatarole/empower`, {
|
||||||
|
fxdj: this.form.fxdj.join(','),
|
||||||
|
sqgl: this.form.sqgl.join(','),
|
||||||
|
hsjc: this.form.hsjc.join(','),
|
||||||
|
kkdjSq: this.form.kkdjSq.join(','),
|
||||||
|
kkdjKk: this.form.kkdjKk.join(','),
|
||||||
|
sysUserIds: this.id ? this.id : this.ids,
|
||||||
|
kkdjKkStr: this.dictList.filter(v => this.form.kkdjKk.includes(v.dictValue)).map(v => v.dictName).join(',')
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.isShow = false
|
||||||
|
this.getList()
|
||||||
|
this.$message.success(this.id ? '编辑成功' : '新增成功')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
syncMembers() {
|
||||||
|
this.btnLoading = true
|
||||||
|
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/syncDepart`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('同步成功')
|
||||||
|
this.getList()
|
||||||
|
this.getTree()
|
||||||
|
}
|
||||||
|
|
||||||
|
}).catch(() => {
|
||||||
|
this.btnLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
syncUser() {
|
||||||
|
let departId = this.search.departmentId;
|
||||||
|
if (!departId) departId = 1;
|
||||||
|
this.btnLoading = true
|
||||||
|
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/syncUser?departmentId=${departId}`, null, {
|
||||||
|
timeout: 1000000
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('同步成功')
|
||||||
|
this.getList()
|
||||||
|
this.getTree()
|
||||||
|
}
|
||||||
|
|
||||||
|
this.btnLoading = false
|
||||||
|
}).catch(() => {
|
||||||
|
this.btnLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getTags() {
|
||||||
|
this.instance.post(`/app/wxcp/wxtag/listAll`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.sourceTagList = res.data.length ? JSON.parse(JSON.stringify(res.data)) : []
|
||||||
|
this.tagsList = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onTreeChange(e) {
|
||||||
|
this.departmentName = e.name
|
||||||
|
this.search.departmentId = e.id || ''
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getList() {
|
||||||
|
this.loading = true
|
||||||
|
this.instance.post(`/app/appepidemicpreventiondatarole/list`, null, {
|
||||||
|
params: {
|
||||||
|
...this.search,
|
||||||
|
departmentId: this.tabIndex === 0 ? this.search.departmentId : '',
|
||||||
|
tagIds: this.tabIndex === 1 ? (this.currIndex >= 0 ? this.tagsList[this.currIndex].id : '') : '',
|
||||||
|
listType: this.tabIndex
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
this.loading = false
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.loading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectionChange(e) {
|
||||||
|
this.ids = e.map(v => v.sysUserId).join(',')
|
||||||
|
},
|
||||||
|
|
||||||
|
filterNode(value, data) {
|
||||||
|
if (!value) return true
|
||||||
|
return data.name.indexOf(value) !== -1
|
||||||
|
},
|
||||||
|
|
||||||
|
changeTab(id, index) {
|
||||||
|
this.currIndex = index
|
||||||
|
this.search.areaId = id
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getTree() {
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/listAll?unitName=${this.unitName}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
let parent = res.data.map(v => {
|
||||||
|
v.label = v.name
|
||||||
|
v.children = []
|
||||||
|
|
||||||
|
return v
|
||||||
|
}).filter(e => !e.parentid)[0]
|
||||||
|
this.defaultExpanded = [parent.id]
|
||||||
|
this.defaultChecked = [parent.id]
|
||||||
|
this.search.departmentId = parent.id
|
||||||
|
this.departmentName = parent.name
|
||||||
|
this.addChild(parent, res.data)
|
||||||
|
this.unitList = [parent]
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.tree.setCurrentKey(parent.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
addChild(parent, list) {
|
||||||
|
for (let i = 0; i < list.length; i++) {
|
||||||
|
if (list[i].parentid === parent.id) {
|
||||||
|
list[i].i = parent.children.length
|
||||||
|
parent.children.push(list[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (parent.children.length) {
|
||||||
|
parent.children.forEach(v => {
|
||||||
|
v.len = parent.children.length
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (list.length > 0) {
|
||||||
|
parent['children'].map(v => this.addChild(v, list))
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
formatList(list) {
|
||||||
|
var arr = []
|
||||||
|
for (let item of list) {
|
||||||
|
if (item.childrenUser && item.childrenUser.length) {
|
||||||
|
delete item.childrenUser
|
||||||
|
}
|
||||||
|
|
||||||
|
if (item.childrenDept && item.childrenDept.length) {
|
||||||
|
this.formatList(item.childrenDept)
|
||||||
|
}
|
||||||
|
|
||||||
|
arr.push(item)
|
||||||
|
}
|
||||||
|
|
||||||
|
return arr
|
||||||
|
},
|
||||||
|
|
||||||
|
toAdd(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Add',
|
||||||
|
params: {
|
||||||
|
id: id || '',
|
||||||
|
departmentId: this.search.departmentId || '',
|
||||||
|
departmentName: this.departmentName || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.addressBook {
|
||||||
|
.addressBook-table__btns {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.table-tags {
|
||||||
|
.el-tag {
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-wrapper {
|
||||||
|
& > h2 {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: Bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-wrapper__tips {
|
||||||
|
line-height: 1;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
color: #222222;
|
||||||
|
font-size: 14px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #2266FF;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.import-files {
|
||||||
|
i {
|
||||||
|
display: block;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
color: #999999;
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-container {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.tree-name {
|
||||||
|
padding-right: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
right: 8px;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
padding-right: 8px;
|
||||||
|
font-weight: normal;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tag {
|
||||||
|
margin-right: 8px;
|
||||||
|
border: 1px solid #D0D4DC;
|
||||||
|
background: #F3F4F7;
|
||||||
|
border-radius: 4px;
|
||||||
|
font-size: 13px;
|
||||||
|
color: #222222;
|
||||||
|
|
||||||
|
&:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-avatar {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-top: 3px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #CCCCCC;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button--mini, .el-button--mini.is-round {
|
||||||
|
height: 28px;
|
||||||
|
line-height: 28px;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
::v-deep span {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left__list--title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 8px 8px 0;
|
||||||
|
|
||||||
|
.addressBook-left__list--search {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
::v-deep input {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 84px;
|
||||||
|
flex-shrink: 1;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
background: #FAFAFB;
|
||||||
|
|
||||||
|
.addressBook-left__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
flex: 1;
|
||||||
|
height: 100%;
|
||||||
|
line-height: 40px;
|
||||||
|
color: #222;
|
||||||
|
font-size: 14px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
|
||||||
|
&.tab-active {
|
||||||
|
color: #2266FF;
|
||||||
|
border-bottom: 2px solid #2266FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ::-webkit-scrollbar {
|
||||||
|
// width: 1px;
|
||||||
|
// }
|
||||||
|
|
||||||
|
.addressBook-left__list--wrapper {
|
||||||
|
height: calc(100% - 68px);
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left__list {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
::v-deep .el-tree {
|
||||||
|
width: fit-content;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-scrollbar__wrap {
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
.el-scrollbar__view {
|
||||||
|
width: fit-content;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left__tags--item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 40px;
|
||||||
|
padding: 0 8px 0 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
color: #222222;
|
||||||
|
|
||||||
|
&.addressBook-left__tags--item-active, &:hover {
|
||||||
|
background: #E8EFFF;
|
||||||
|
color: #2266FF;
|
||||||
|
|
||||||
|
i, span {
|
||||||
|
color: #2266FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
i {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #8e9ebf;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #222222;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-tree {
|
||||||
|
background: transparent;
|
||||||
|
|
||||||
|
.el-tree-node__expand-icon.is-leaf {
|
||||||
|
color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content > .el-tree-node__expand-icon {
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree__empty-text {
|
||||||
|
color: #222;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__children .el-tree-node__content {
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tree-node__content:hover {
|
||||||
|
background: #E8EFFF;
|
||||||
|
color: #222222;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-current > .el-tree-node__content {
|
||||||
|
&:hover {
|
||||||
|
background: #2266FF;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
background: #2266FF;
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .ai-list__content--right {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
margin-left: 1px;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.ai-list__content--right-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Reference in New Issue
Block a user