大屏
This commit is contained in:
yanran200730
@@ -298,7 +298,7 @@ export default {
|
||||
},
|
||||
|
||||
getCommunityList() {
|
||||
this.instance.post('/app/appcommunitybuildinginfo/listByBuildingAndHomestead', null, {
|
||||
this.instance.post('/app/appcommunitybuildinginfo/listByBuilding', null, {
|
||||
params: {
|
||||
current: 1,
|
||||
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.getTypeList()
|
||||
this.getCorpLocation()
|
||||
|
||||
|
||||
},
|
||||
|
||||
methods: {
|
||||
@@ -117,7 +117,7 @@ export default {
|
||||
|
||||
renderMarker(context) {
|
||||
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" />`
|
||||
|
||||
context.marker.setContent(el);
|
||||
@@ -154,7 +154,7 @@ export default {
|
||||
initMap({lng, lat}) {
|
||||
this.center = [lng, lat];
|
||||
AMapLoader.load({
|
||||
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
||||
key: '54a02a43d9828a8f9cd4f26fe281e74e',
|
||||
version: '2.0',
|
||||
plugins: ['AMap.ToolBar', 'AMap.Scale', 'AMap.MouseTool', 'AMap.MarkerClusterer'],
|
||||
AMapUI: {
|
||||
@@ -418,7 +418,7 @@ export default {
|
||||
::v-deep .el-input, ::v-deep input {
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
||||
::v-deep .el-select {
|
||||
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