Merge branch 'build' of http://git.sinoecare.com/sinoecare/digital_village_v2/dvcp_v2_webapp into build
This commit is contained in:
yanran200730
@@ -0,0 +1,647 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppIntegralStatistics">
|
||||||
|
<el-row class="overallStatistics">
|
||||||
|
<div class="title">
|
||||||
|
<p>总体统计</p>
|
||||||
|
<div class="title_right">
|
||||||
|
<div>
|
||||||
|
<span v-for="(item,index) in timeCheck" :key="index" :class="type == index? 'active':''"
|
||||||
|
@click="timeChange(index)">{{ item }}</span>
|
||||||
|
</div>
|
||||||
|
<el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small"
|
||||||
|
:props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card_list">
|
||||||
|
<div class="card">
|
||||||
|
<h2>积分余额汇总
|
||||||
|
<el-tooltip
|
||||||
|
placement="right"
|
||||||
|
style="width: 16px;"
|
||||||
|
content="截止目前所有网格员剩余可用积分余额的总和">
|
||||||
|
<i class="el-icon-warning-outline"></i>
|
||||||
|
</el-tooltip>
|
||||||
|
</h2>
|
||||||
|
<p class="color1">{{ data.nowIntegral || 0 }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2>发放积分</h2>
|
||||||
|
<p class="color1">{{ data.addIntegral || 0 }}</p>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<h2>消耗积分</h2>
|
||||||
|
<p class="color1">{{ Math.abs(data.reduceIntegral) || 0 }}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="echertsBox">
|
||||||
|
<div class="left_Box">
|
||||||
|
<p>个人积分排行</p>
|
||||||
|
<div>
|
||||||
|
<div id="chart1" style="height: 300px; width: 100%;" v-show="userSortListX.length && userSortListY.length"></div>
|
||||||
|
<ai-empty v-show="!userSortListX.length && !userSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="right_Box">
|
||||||
|
<p>网格积分排行</p>
|
||||||
|
<div>
|
||||||
|
<div id="chart2" style="height: 300px; width: 100%;" v-show="girdSortListX.length && girdSortListY.length"></div>
|
||||||
|
<ai-empty v-show="!girdSortListX.length && !girdSortListY.length" style="height: 200px; width: 100%;" id="empty"></ai-empty>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-row>
|
||||||
|
|
||||||
|
<ai-card>
|
||||||
|
<ai-title slot="title" title="积分明细"/>
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-cascader ref="cascader2" v-model="girdIdArr" :options="girdOptions" placeholder="所属网格" size="small"
|
||||||
|
:props="defaultProps" :show-all-levels="false" clearable @change="gridChangeOpt"></el-cascader>
|
||||||
|
<ai-select v-model="search.integralType" placeholder="请选择类型" @change="current=1, getTableData()"
|
||||||
|
:selectList="dict.getDict('integralType')"/>
|
||||||
|
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||||
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input size="small" placeholder="请输入姓名" v-model="search.userName" clearable
|
||||||
|
@clear="current = 1, search.userName = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||||
|
v-throttle="() => {(current = 1), getTableData();}" />
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
|
||||||
|
@getList="getTableData" :col-configs="colConfigs" :dict="dict">
|
||||||
|
<el-table-column slot="eventDesc" label='事件' align="center" width="400px" show-overflow-tooltip>
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<span>{{ row.integralRuleName || row.eventDesc}}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column slot="changeIntegral" label="变动积分" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<span>{{ row.integralCalcType == 0 ? '-' : '+' }}{{ row.changeIntegral }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column slot="options" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="open(row.id)">详情</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-card>
|
||||||
|
|
||||||
|
<el-dialog title="详情" :visible.sync="dialog" customFooter width="700">
|
||||||
|
<ai-detail>
|
||||||
|
<template #content>
|
||||||
|
<ai-wrapper>
|
||||||
|
<ai-info-item label="姓名" :value="details.integralUserName" />
|
||||||
|
<ai-info-item label="所属网格" :value="details.girdName"/>
|
||||||
|
<ai-info-item label="事件" isLine :value="details.eventDesc">
|
||||||
|
<span v-if="details.integralRuleId">{{ details.integralRuleName }}</span>
|
||||||
|
<span v-else>{{ details.eventDesc }}</span>
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="时间" isLine :value="details.createTime"/>
|
||||||
|
<ai-info-item label="积分变动">
|
||||||
|
{{ details.integralCalcType == 0 ? '-' : '+' }}{{ details.changeIntegral }}
|
||||||
|
</ai-info-item>
|
||||||
|
<ai-info-item label="积分余额" :value="details.nowIntegral"/>
|
||||||
|
<ai-info-item label="凭证" isLine v-if="fileDownLoad.length">
|
||||||
|
<ai-file-list :fileList="fileDownLoad" style="width: 200px;" :fileOps="{name: 'name'}"></ai-file-list>
|
||||||
|
</ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
</template>
|
||||||
|
</ai-detail>
|
||||||
|
<span slot="footer" class="dialog-footer" center>
|
||||||
|
<el-button @click="dialog = false" style="width: 92px">关闭</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<ai-dialog :visible.sync="dialogDate" title="选择时间" width="500px" customFooter>
|
||||||
|
<el-date-picker v-model="timeList" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||||
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
|
||||||
|
</el-date-picker>
|
||||||
|
<el-button slot="footer" @click="selectDete" type="primary">确认</el-button>
|
||||||
|
</ai-dialog>
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from "vuex"
|
||||||
|
import * as echarts from 'echarts';
|
||||||
|
import dayjs from 'dayjs'
|
||||||
|
export default {
|
||||||
|
name: "AppIntegralStatistics",
|
||||||
|
label: "积分统计",
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
myChart1: null,
|
||||||
|
myChart2: null,
|
||||||
|
tableData: [],
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
userName: '',
|
||||||
|
girdId: '',
|
||||||
|
integralType: '',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
},
|
||||||
|
girdIdArr:[],
|
||||||
|
total: 0,
|
||||||
|
size: 10,
|
||||||
|
current: 1,
|
||||||
|
girdList: [],
|
||||||
|
time: [],
|
||||||
|
timeCheck: ['昨日','近7天','近30天','自定义'],
|
||||||
|
dialog: false,
|
||||||
|
dialogDate: false,
|
||||||
|
timeList: [],
|
||||||
|
type: '1',
|
||||||
|
startTime: '',
|
||||||
|
endTime: '',
|
||||||
|
data: {},
|
||||||
|
girdId: '',
|
||||||
|
girdArr: [],
|
||||||
|
girdOptions: [],
|
||||||
|
defaultProps: {
|
||||||
|
label: 'girdName',
|
||||||
|
value: 'id',
|
||||||
|
children: 'children',
|
||||||
|
checkStrictly: true,
|
||||||
|
},
|
||||||
|
details: {},
|
||||||
|
fileDownLoad: [],
|
||||||
|
userSortListX: [],
|
||||||
|
userSortListY: [],
|
||||||
|
girdSortListX: [],
|
||||||
|
girdSortListY: [],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{ prop: "integralUserName", label: '姓名', align: "left", width: "200px" },
|
||||||
|
{ prop: "girdName", label: '所属网格', align: "center", width: "180px" },
|
||||||
|
{ slot: "eventDesc"},
|
||||||
|
{ prop: "integralType", label: '类型', align: "center", dict: "integralType"},
|
||||||
|
{ slot: "changeIntegral", label: '积分变动', align: "center", },
|
||||||
|
{ prop: "nowIntegral", label: '剩余积分', align: "center", },
|
||||||
|
{ prop: "createTime", label: '时间', align: "center", },
|
||||||
|
{ slot: "options" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.time = [dayjs().subtract(1,'week').format('YYYY-MM-DD'),dayjs().format('YYYY-MM-DD')]
|
||||||
|
this.$dict.load('epidemicDangerousAreaLevel','integralType','integralRuleEvent','integralRuleEventType').then(() => {
|
||||||
|
this.getStatistics()
|
||||||
|
this.getGridList()
|
||||||
|
this.getRanking()
|
||||||
|
this.search.startTime = this.time?.[0]
|
||||||
|
this.search.endTime = this.time?.[1]
|
||||||
|
this.getTableData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
// 统计接口
|
||||||
|
getStatistics() {
|
||||||
|
this.instance.post('/app/appintegraluser/allAppletUserIntegral',null, {
|
||||||
|
params: {
|
||||||
|
type: this.type,
|
||||||
|
girdId: this.girdId,
|
||||||
|
startTime: this.startTime,
|
||||||
|
endTime: this.endTime,
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if(res?.data) {
|
||||||
|
this.data = res.data
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 人员、网格排行
|
||||||
|
getRanking() {
|
||||||
|
this.instance.post('/app/appintegraluser/userAndGirdIntegralSortByApplet',null,{
|
||||||
|
params: {
|
||||||
|
type: this.type,
|
||||||
|
girdId: this.girdId,
|
||||||
|
startTime: this.startTime,
|
||||||
|
endTime: this.endTime
|
||||||
|
}
|
||||||
|
}).then((res) => {
|
||||||
|
if(res?.data) {
|
||||||
|
this.userSortListX = res.data.userSortList.map(e=> e.userName).reverse()
|
||||||
|
this.userSortListY = res.data.userSortList.map(e=> e.changeIntegral).reverse()
|
||||||
|
this.girdSortListX = res.data.girdSortList.map(e=> e.girdName).reverse()
|
||||||
|
this.girdSortListY = res.data.girdSortList.map(e=> e.changeIntegral).reverse()
|
||||||
|
this.getColEcherts1(this.userSortListX,this.userSortListY)
|
||||||
|
this.getColEcherts2(this.girdSortListX,this.girdSortListY)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
// 积分明细
|
||||||
|
getTableData() {
|
||||||
|
this.instance.post('/app/appintegraluser/girdIntegralDetailByApplet',null,{
|
||||||
|
params: {
|
||||||
|
...this.search,
|
||||||
|
current: this.current,
|
||||||
|
size: this.size,
|
||||||
|
total: this.total,
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if(res?.data) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
gridChangeOpt(val) {
|
||||||
|
this.girdIdArr = val
|
||||||
|
this.search.girdId = val?.[val.length - 1]
|
||||||
|
this.$refs.cascader2.dropDownVisible = false;
|
||||||
|
this.getTableData()
|
||||||
|
},
|
||||||
|
|
||||||
|
getColEcherts1(xData,yData) {
|
||||||
|
let chartDom1 = document.getElementById('chart1');
|
||||||
|
chartDom1.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||||
|
this.myChart1 = echarts.init(chartDom1);
|
||||||
|
this.myChart1.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '16px',
|
||||||
|
right: '28px',
|
||||||
|
bottom: '14px',
|
||||||
|
top: '16px',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xData,
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: yData,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#5087ec",
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'right', //在上方显示
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: '#666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '20%',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, true);
|
||||||
|
window.addEventListener("resize", this.onResize)
|
||||||
|
},
|
||||||
|
getColEcherts2(xData,yData) {
|
||||||
|
let chartDom2 = document.getElementById('chart2');
|
||||||
|
chartDom2.style.width = (window.innerWidth - 435) / 2 + "px";
|
||||||
|
this.myChart2 = echarts.init(chartDom2);
|
||||||
|
this.myChart2.setOption({
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '16px',
|
||||||
|
right: '28px',
|
||||||
|
bottom: '14px',
|
||||||
|
top: '16px',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'value',
|
||||||
|
boundaryGap: [0, 0.01],
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: xData,
|
||||||
|
axisTick: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
axisLine: {
|
||||||
|
show: false,
|
||||||
|
},
|
||||||
|
triggerEvent: true,
|
||||||
|
//设置文本过长超出隐藏...表示
|
||||||
|
axisLabel:{
|
||||||
|
margin: 8,
|
||||||
|
formatter: function(params){
|
||||||
|
var val=""
|
||||||
|
if(params.length > 8) {
|
||||||
|
val = params.substr(0,8)+'...'
|
||||||
|
return val
|
||||||
|
} else {
|
||||||
|
return params;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
data: yData,
|
||||||
|
type: 'bar',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: "#5087ec",
|
||||||
|
label: {
|
||||||
|
show: true, //开启显示
|
||||||
|
position: 'right', //在右方显示
|
||||||
|
textStyle: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: '#666'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
barWidth: 10,
|
||||||
|
barGap: '20%',
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}, true);
|
||||||
|
window.addEventListener("resize", this.onResize2)
|
||||||
|
// this.extension(this.myChart2)
|
||||||
|
},
|
||||||
|
onResize1() {
|
||||||
|
this.myChart1.resize()
|
||||||
|
},
|
||||||
|
onResize2() {
|
||||||
|
this.myChart2.resize()
|
||||||
|
},
|
||||||
|
gridChange(val) {
|
||||||
|
this.girdArr = val
|
||||||
|
this.girdId = val?.[val.length - 1]
|
||||||
|
this.$refs.cascader1.dropDownVisible = false;
|
||||||
|
this.getStatistics()
|
||||||
|
this.getRanking()
|
||||||
|
},
|
||||||
|
// 所有网格
|
||||||
|
getGridList() {
|
||||||
|
this.instance.post(`/app/appgirdinfo/listAll3`).then((res) => {
|
||||||
|
if (res?.code == 0) {
|
||||||
|
this.girdOptions = this.toTree(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 转树形结构
|
||||||
|
toTree(data) {
|
||||||
|
let result = [];
|
||||||
|
if (!Array.isArray(data)) {
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
let map = {};
|
||||||
|
data.forEach(item => {
|
||||||
|
map[item.id] = item;
|
||||||
|
});
|
||||||
|
data.forEach(item => {
|
||||||
|
let parent = map[item.parentGirdId];
|
||||||
|
if (parent) {
|
||||||
|
(parent.children || (parent.children = [])).push(item);
|
||||||
|
} else {
|
||||||
|
result.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
timeChange(index) {
|
||||||
|
if(index == 3) {
|
||||||
|
this.dialogDate = true
|
||||||
|
}
|
||||||
|
this.type = index
|
||||||
|
this.getStatistics()
|
||||||
|
this.getRanking()
|
||||||
|
},
|
||||||
|
|
||||||
|
open(id) {
|
||||||
|
this.dialog = true
|
||||||
|
this.getDetail(id)
|
||||||
|
},
|
||||||
|
|
||||||
|
onChange(val) {
|
||||||
|
this.search.startTime = val?.[0]
|
||||||
|
this.search.endTime = val?.[1]
|
||||||
|
this.getTableData()
|
||||||
|
},
|
||||||
|
|
||||||
|
getDetail(id) {
|
||||||
|
this.instance.post(`/app/appintegraldetail/queryDetailById?id=${id}`).then(res=> {
|
||||||
|
if(res?.data) {
|
||||||
|
this.details = res.data
|
||||||
|
if(res.data.enclosure) {
|
||||||
|
let str = res.data.enclosure.split('/')
|
||||||
|
this.fileDownLoad = [{
|
||||||
|
url:res.data.enclosure,
|
||||||
|
name: str?.[str.length - 1]
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
selectDete() {
|
||||||
|
if(!this.timeList || !this.timeList.length) {
|
||||||
|
return this.$message.error('请选择自定义时间');
|
||||||
|
}
|
||||||
|
this.startTime = this.timeList?.[0]
|
||||||
|
this.endTime = this.timeList?.[1]
|
||||||
|
this.dialogDate = false
|
||||||
|
this.getStatistics()
|
||||||
|
this.getRanking()
|
||||||
|
},
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
filters: {
|
||||||
|
formatTime(num) {
|
||||||
|
if(num > 0) {
|
||||||
|
return '+' + num
|
||||||
|
} else {
|
||||||
|
return num
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
this.getColEcherts1()
|
||||||
|
this.getColEcherts2()
|
||||||
|
},
|
||||||
|
|
||||||
|
destroyed () {
|
||||||
|
window.removeEventListener('resize', this.onResize1)
|
||||||
|
window.removeEventListener('resize', this.onResize2)
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppIntegralStatistics {
|
||||||
|
height: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding-top: 20px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
.overallStatistics {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: #FFF;
|
||||||
|
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
p {
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: MicrosoftYaHeiSemibold;
|
||||||
|
color: #222222;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
width: 70px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid #D0D4DC;
|
||||||
|
margin-right: 8px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
color: #2266FF;
|
||||||
|
border: 1px solid #2266FF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.card_list {
|
||||||
|
display: flex;
|
||||||
|
.card {
|
||||||
|
flex: 1;
|
||||||
|
height: 96px;
|
||||||
|
background: #F9F9F9;
|
||||||
|
border-radius: 2px;
|
||||||
|
margin-right: 20px;
|
||||||
|
padding: 16px 24px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
h2 {
|
||||||
|
color: #888888;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
margin-top: 8px;
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.color1 {
|
||||||
|
color: #2891FF;
|
||||||
|
}
|
||||||
|
.color2 {
|
||||||
|
color: #22AA99;
|
||||||
|
}
|
||||||
|
.color3 {
|
||||||
|
color: #F8B425;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.card:last-child {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.echertsBox {
|
||||||
|
width: 100%;
|
||||||
|
margin-top: 20px;
|
||||||
|
background: #FFF;
|
||||||
|
display: flex;
|
||||||
|
.left_Box {
|
||||||
|
margin-right: 16px;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.right_Box {
|
||||||
|
width: 100%;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left_Box,
|
||||||
|
.right_Box {
|
||||||
|
background: #F9F9F9;
|
||||||
|
box-shadow: 0px 4px 6px -2px rgba(15,15,21,0.1500);
|
||||||
|
border-radius: 4px;
|
||||||
|
padding: 16px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
#chart1,
|
||||||
|
#chart2 {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// .chartCss {
|
||||||
|
// position: absolute;
|
||||||
|
// color: black;
|
||||||
|
// background:white;
|
||||||
|
// font-family: Aril;
|
||||||
|
// font-size: 12px;
|
||||||
|
// padding: 5px;
|
||||||
|
// display: inline;
|
||||||
|
// }
|
||||||
|
|
||||||
|
:deep( .el-dialog__footer ){
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
:deep( .el-dialog__header ){
|
||||||
|
border-bottom: 1px solid #DDD;
|
||||||
|
}
|
||||||
|
:deep( .ai-detail ){
|
||||||
|
background: #FFF;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
309
project/pidu/app/AppKeywordManagement/AppKeywordManagement.vue
Normal file
309
project/pidu/app/AppKeywordManagement/AppKeywordManagement.vue
Normal file
@@ -0,0 +1,309 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppKeywordManagement">
|
||||||
|
<ai-list>
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加</el-button>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input size="small" placeholder="关键词搜索" v-model="search.name" clearable
|
||||||
|
@clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||||
|
v-throttle="() => {(current = 1), getTableData();}"/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
|
||||||
|
@getList="getTableData()" :col-configs="colConfigs" :dict="dict">
|
||||||
|
<el-table-column slot="options" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="edit(row)">启用</el-button>
|
||||||
|
<el-button type="text" @click="edit(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="del(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
<ai-dialog
|
||||||
|
:title="form.id ? '编辑敏感词' : '添加敏感词'"
|
||||||
|
:visible.sync="dialog"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
width="720px"
|
||||||
|
@onConfirm="onConfirm"
|
||||||
|
@closed="form={}">
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="敏感词" prop="registerCount">
|
||||||
|
<el-input v-model.trim="form.registerCount" placeholder="请输入正整数" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生效地区" prop="friendCount">
|
||||||
|
<el-input v-model.trim="form.friendCount" placeholder="请输入正整数" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="生效部门" prop="confidantCount">
|
||||||
|
<el-input v-model.trim="form.confidantCount" placeholder="请输入正整数" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ai-dialog>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
name: "AppKeywordManagement",
|
||||||
|
label: '关键词管理',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function,
|
||||||
|
menuName:String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
name: '',
|
||||||
|
departmentId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
areaId: '',
|
||||||
|
},
|
||||||
|
departIdList: [],
|
||||||
|
tableData: [],
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
current: 1,
|
||||||
|
girdList: [],
|
||||||
|
form: {
|
||||||
|
registerCount: 0,
|
||||||
|
friendCount: 0,
|
||||||
|
confidantCount: 0
|
||||||
|
},
|
||||||
|
personList: [],
|
||||||
|
dialog: false,
|
||||||
|
girdOptions: [],
|
||||||
|
defaultProps: {
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
checkStrictly: true,
|
||||||
|
},
|
||||||
|
chooseUserList: [],
|
||||||
|
flag: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$dict.load('integralCalcType')
|
||||||
|
this.getTableData()
|
||||||
|
this.getGridList()
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{ prop: "name", label: '关键词', align: "left"},
|
||||||
|
{ prop: "areaName", label: '创建时间'},
|
||||||
|
{ prop: "departmentName", label: '创建人'},
|
||||||
|
{ prop: "phone", label: '生效地区'},
|
||||||
|
{ prop: "registerCount", label: '生效部门'},
|
||||||
|
{ slot: "options" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
rules() {
|
||||||
|
return {
|
||||||
|
registerCount: [{required: true, message: '请输入登记数', trigger: 'blur' },
|
||||||
|
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||||
|
friendCount: [{required: true, message: '请输入朋友数', trigger: 'blur' },
|
||||||
|
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||||
|
confidantCount: [{required: true, message: '请输入知己数', trigger: 'blur' },
|
||||||
|
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTableData() {
|
||||||
|
this.instance.post(`/app/appwxuserfamiliarityrate/list`,null,{
|
||||||
|
params: {
|
||||||
|
...this.search,
|
||||||
|
current: this.current,
|
||||||
|
size: this.size,
|
||||||
|
total: this.total
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if(res?.data) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onAreaChange () {
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getTableData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
del(row) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/appwxuserfamiliarityrate/delete?id=${row.id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getTableData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
edit(row) {
|
||||||
|
this.dialog = true
|
||||||
|
this.form = {...row}
|
||||||
|
},
|
||||||
|
|
||||||
|
selectPerson(val) {
|
||||||
|
console.log(val)
|
||||||
|
if (val) {
|
||||||
|
this.personList = val
|
||||||
|
this.form.ids = [...this.personList.map(e => e.sysUserId)]
|
||||||
|
} else {
|
||||||
|
this.form.ids = this.chooseUserList.map(e => e.sysUserId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getGridList() {
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.girdOptions = this.toTree(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 转树形结构
|
||||||
|
toTree(data) {
|
||||||
|
let result = [];
|
||||||
|
if (!Array.isArray(data)) {
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
let map = {};
|
||||||
|
data.forEach(item => {
|
||||||
|
map[item.id] = item;
|
||||||
|
});
|
||||||
|
data.forEach(item => {
|
||||||
|
let parent = map[item.parentid];
|
||||||
|
if (parent) {
|
||||||
|
(parent.children || (parent.children = [])).push(item);
|
||||||
|
} else {
|
||||||
|
result.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
gridChange(val) {
|
||||||
|
this.departIdList = val
|
||||||
|
this.search.departmentId = val?.[val.length - 1]
|
||||||
|
this.$refs.cascader1.dropDownVisible = false;
|
||||||
|
this.getTableData()
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm() {
|
||||||
|
if(this.flag) return
|
||||||
|
|
||||||
|
this.$refs.form.validate((valid)=> {
|
||||||
|
if(valid) {
|
||||||
|
this.flag = true
|
||||||
|
this.instance.post(`/app/appwxuserfamiliarityrate/webUpdate`,{...this.form}).then(res => {
|
||||||
|
if(res?.code == 0) {
|
||||||
|
this.$message.success('分类信息修改成功')
|
||||||
|
setTimeout(() =>{
|
||||||
|
this.dialog = false
|
||||||
|
this.getTableData()
|
||||||
|
this.flag = false
|
||||||
|
}, 600)
|
||||||
|
} else {
|
||||||
|
this.flag = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
toDetail(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Detail',
|
||||||
|
params: {
|
||||||
|
id: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppKeywordManagement {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
:deep( .ai-dialog .ai-dialog__content ){
|
||||||
|
max-height: 600px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.userlist {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userlist, .user {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
width: 70px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.remove-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 7px;
|
||||||
|
top: -4px;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 6px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: crimson;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img, h2 {
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
background-color: $primaryColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .selectCont .pagination ){
|
||||||
|
width: 100%!important;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
329
project/pidu/app/AppSensitive/AppSensitive.vue
Normal file
329
project/pidu/app/AppSensitive/AppSensitive.vue
Normal file
@@ -0,0 +1,329 @@
|
|||||||
|
<template>
|
||||||
|
<section class="AppSensitive">
|
||||||
|
<ai-list>
|
||||||
|
<template #content>
|
||||||
|
<ai-search-bar>
|
||||||
|
<template #left>
|
||||||
|
<ai-area-get
|
||||||
|
style="width: 180px;"
|
||||||
|
placeholder="请选择地区"
|
||||||
|
:instance="instance"
|
||||||
|
v-model="search.areaId"
|
||||||
|
@select="onAreaChange"/>
|
||||||
|
<el-cascader ref="cascader1" clearable v-model="departIdList" :options="girdOptions" placeholder="所属部门" size="small"
|
||||||
|
:props="defaultProps" :show-all-levels="false" @change="gridChange"></el-cascader>
|
||||||
|
<ai-select v-model="search.integralType" placeholder="会话类型" @change="current=1, getTableData()"
|
||||||
|
:selectList="dict.getDict('integralType')"/>
|
||||||
|
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||||
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||||
|
</el-date-picker>
|
||||||
|
</template>
|
||||||
|
<template #right>
|
||||||
|
<el-input size="small" placeholder="敏感词、涉及对象、姓名、手机号" v-model="search.name" clearable
|
||||||
|
@clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||||
|
v-throttle="() => {(current = 1), getTableData();}"/>
|
||||||
|
</template>
|
||||||
|
</ai-search-bar>
|
||||||
|
<ai-table :tableData="tableData" :total="total" :current.sync="current" :size.sync="size"
|
||||||
|
@getList="getTableData()" :col-configs="colConfigs" :dict="dict">
|
||||||
|
<el-table-column slot="options" label="操作" align="center">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<el-button type="text" @click="edit(row)">编辑</el-button>
|
||||||
|
<el-button type="text" @click="del(row)">删除</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
<ai-dialog
|
||||||
|
title="分类信息详情"
|
||||||
|
:visible.sync="dialog"
|
||||||
|
:destroyOnClose="true"
|
||||||
|
width="720px"
|
||||||
|
@onConfirm="onConfirm"
|
||||||
|
@closed="form={}">
|
||||||
|
<ai-wrapper>
|
||||||
|
<ai-info-item label="姓名" :value="form.name"></ai-info-item>
|
||||||
|
<ai-info-item label="部门" :value="form.departmentName"></ai-info-item>
|
||||||
|
<ai-info-item label="手机号" :value="form.phone"></ai-info-item>
|
||||||
|
<ai-info-item label="行政区划" :value="form.areaName"></ai-info-item>
|
||||||
|
</ai-wrapper>
|
||||||
|
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
|
||||||
|
<el-form-item label="登记数" prop="registerCount">
|
||||||
|
<el-input v-model.trim="form.registerCount" placeholder="请输入正整数" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="朋友数" prop="friendCount">
|
||||||
|
<el-input v-model.trim="form.friendCount" placeholder="请输入正整数" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="知己数" prop="confidantCount">
|
||||||
|
<el-input v-model.trim="form.confidantCount" placeholder="请输入正整数" size="small"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</ai-dialog>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { mapState } from "vuex";
|
||||||
|
export default {
|
||||||
|
name: "AppSensitive",
|
||||||
|
label: '敏感词触发',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
permissions: Function,
|
||||||
|
menuName:String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
search: {
|
||||||
|
name: '',
|
||||||
|
departmentId: '',
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
areaId: '',
|
||||||
|
},
|
||||||
|
departIdList: [],
|
||||||
|
tableData: [],
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
current: 1,
|
||||||
|
girdList: [],
|
||||||
|
form: {
|
||||||
|
registerCount: 0,
|
||||||
|
friendCount: 0,
|
||||||
|
confidantCount: 0
|
||||||
|
},
|
||||||
|
personList: [],
|
||||||
|
dialog: false,
|
||||||
|
girdOptions: [],
|
||||||
|
defaultProps: {
|
||||||
|
label: 'name',
|
||||||
|
value: 'id',
|
||||||
|
checkStrictly: true,
|
||||||
|
},
|
||||||
|
chooseUserList: [],
|
||||||
|
flag: false,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.$dict.load('integralCalcType')
|
||||||
|
this.getTableData()
|
||||||
|
this.getGridList()
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(['user']),
|
||||||
|
colConfigs() {
|
||||||
|
return [
|
||||||
|
{ prop: "name", label: '触发敏感词', align: "left"},
|
||||||
|
{ prop: "departmentName", label: '会话类型'},
|
||||||
|
{ prop: "areaName", label: '行政区划'},
|
||||||
|
{ prop: "phone", label: '部门'},
|
||||||
|
{ prop: "registerCount", label: '涉及对象'},
|
||||||
|
{ prop: "friendCount", label: '姓名'},
|
||||||
|
{ prop: "confidantCount", label: '手机号'},
|
||||||
|
{ prop: "createTime", label: '日期', width:220},
|
||||||
|
{ slot: "options" },
|
||||||
|
]
|
||||||
|
},
|
||||||
|
rules() {
|
||||||
|
return {
|
||||||
|
registerCount: [{required: true, message: '请输入登记数', trigger: 'blur' },
|
||||||
|
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||||
|
friendCount: [{required: true, message: '请输入朋友数', trigger: 'blur' },
|
||||||
|
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||||
|
confidantCount: [{required: true, message: '请输入知己数', trigger: 'blur' },
|
||||||
|
{pattern: /^[0-9]+$/, message: '请输入正整数'}],
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTableData() {
|
||||||
|
this.instance.post(`/app/appwxuserfamiliarityrate/list`,null,{
|
||||||
|
params: {
|
||||||
|
...this.search,
|
||||||
|
current: this.current,
|
||||||
|
size: this.size,
|
||||||
|
total: this.total
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if(res?.data) {
|
||||||
|
this.tableData = res.data.records
|
||||||
|
this.total = res.data.total
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
onAreaChange () {
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getTableData()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
del(row) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/appwxuserfamiliarityrate/delete?id=${row.id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getTableData()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
edit(row) {
|
||||||
|
this.dialog = true
|
||||||
|
this.form = {...row}
|
||||||
|
},
|
||||||
|
|
||||||
|
selectPerson(val) {
|
||||||
|
console.log(val)
|
||||||
|
if (val) {
|
||||||
|
this.personList = val
|
||||||
|
this.form.ids = [...this.personList.map(e => e.sysUserId)]
|
||||||
|
} else {
|
||||||
|
this.form.ids = this.chooseUserList.map(e => e.sysUserId)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
getGridList() {
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/listAll`).then((res) => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.girdOptions = this.toTree(res.data)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 转树形结构
|
||||||
|
toTree(data) {
|
||||||
|
let result = [];
|
||||||
|
if (!Array.isArray(data)) {
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
let map = {};
|
||||||
|
data.forEach(item => {
|
||||||
|
map[item.id] = item;
|
||||||
|
});
|
||||||
|
data.forEach(item => {
|
||||||
|
let parent = map[item.parentid];
|
||||||
|
if (parent) {
|
||||||
|
(parent.children || (parent.children = [])).push(item);
|
||||||
|
} else {
|
||||||
|
result.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
},
|
||||||
|
|
||||||
|
gridChange(val) {
|
||||||
|
this.departIdList = val
|
||||||
|
this.search.departmentId = val?.[val.length - 1]
|
||||||
|
this.$refs.cascader1.dropDownVisible = false;
|
||||||
|
this.getTableData()
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm() {
|
||||||
|
if(this.flag) return
|
||||||
|
|
||||||
|
this.$refs.form.validate((valid)=> {
|
||||||
|
if(valid) {
|
||||||
|
this.flag = true
|
||||||
|
this.instance.post(`/app/appwxuserfamiliarityrate/webUpdate`,{...this.form}).then(res => {
|
||||||
|
if(res?.code == 0) {
|
||||||
|
this.$message.success('分类信息修改成功')
|
||||||
|
setTimeout(() =>{
|
||||||
|
this.dialog = false
|
||||||
|
this.getTableData()
|
||||||
|
this.flag = false
|
||||||
|
}, 600)
|
||||||
|
} else {
|
||||||
|
this.flag = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
toDetail(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Detail',
|
||||||
|
params: {
|
||||||
|
id: id
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.AppSensitive {
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
:deep( .ai-dialog .ai-dialog__content ){
|
||||||
|
max-height: 600px!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.userlist {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.userlist, .user {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user {
|
||||||
|
position: relative;
|
||||||
|
width: 70px;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
.remove-icon {
|
||||||
|
position: absolute;
|
||||||
|
right: 7px;
|
||||||
|
top: -4px;
|
||||||
|
line-height: 1;
|
||||||
|
padding: 6px 0;
|
||||||
|
font-size: 16px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: crimson;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
img, h2 {
|
||||||
|
display: block;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto 4px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
background-color: $primaryColor;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
word-break: break-all;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .selectCont .pagination ){
|
||||||
|
width: 100%!important;
|
||||||
|
background: pink;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
70
project/pidu/app/AppSessionArchive/AppSessionArchive.vue
Normal file
70
project/pidu/app/AppSessionArchive/AppSessionArchive.vue
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<template>
|
||||||
|
<div class="AppSessionArchive">
|
||||||
|
<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 Detail from "./components/Detail";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "AppSessionArchive",
|
||||||
|
label: "会话存档",
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
component: "List",
|
||||||
|
params: {},
|
||||||
|
include: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
components: {
|
||||||
|
Detail,
|
||||||
|
List,
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
onChange(data) {
|
||||||
|
if (data.type === "Detail") {
|
||||||
|
this.component = "Detail";
|
||||||
|
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">
|
||||||
|
.AppSessionArchive {
|
||||||
|
height: 100%;
|
||||||
|
background: #f3f6f9;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
412
project/pidu/app/AppSessionArchive/components/Detail.vue
Normal file
412
project/pidu/app/AppSessionArchive/components/Detail.vue
Normal file
@@ -0,0 +1,412 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list v-loading="isLoading" class="detail">
|
||||||
|
<template slot="title">
|
||||||
|
<ai-title title="会话存档详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)"></ai-title>
|
||||||
|
</template>
|
||||||
|
<template #left>
|
||||||
|
<div class="addressBook-left">
|
||||||
|
<div class="addressBook-left__title">
|
||||||
|
<h2 :class="[tabIndex === 0 ? 'tab-active' : '']">群聊会话</h2>
|
||||||
|
<h2 :class="[tabIndex === 1 ? 'tab-active' : '']">私聊会话</h2>
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list--title">
|
||||||
|
<el-input
|
||||||
|
size="mini"
|
||||||
|
placeholder="请输入联系人姓名"
|
||||||
|
v-model="searchName"
|
||||||
|
clearable
|
||||||
|
suffix-icon="iconfont iconSearch">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list--wrapper">
|
||||||
|
<div class="addressBook-left__list--item active">
|
||||||
|
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list--item">
|
||||||
|
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||||
|
</div>
|
||||||
|
<div class="addressBook-left__list--item">
|
||||||
|
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt=""> 张三
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<div class="content-right-title">
|
||||||
|
<div class="tab-content">
|
||||||
|
<h2 class="tab-active">全部</h2>
|
||||||
|
<h2>图片/视频</h2>
|
||||||
|
<h2>文件</h2>
|
||||||
|
</div>
|
||||||
|
<div class="search-content">
|
||||||
|
<el-date-picker v-model="time" size="small" type="daterange" value-format="yyyy-MM-dd"
|
||||||
|
range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" @change="onChange">
|
||||||
|
</el-date-picker>
|
||||||
|
<el-input size="small" placeholder="输入搜索内容" v-model="search.name" clearable
|
||||||
|
@clear="current = 1, search.name = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||||
|
v-throttle="() => {(current = 1), getTableData();}"/>
|
||||||
|
<ai-download :instance="instance" url="/app/appconvenientaddressbook/export" :params="search" fileName="会话存档"
|
||||||
|
:disabled="tableData.length == 0">
|
||||||
|
<el-button icon="iconfont iconExported" :disabled="tableData.length == 0">导出</el-button>
|
||||||
|
</ai-download>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content-right-info">
|
||||||
|
<div v-for="(item, index) in list" :key="index">
|
||||||
|
<div class="item item-left" v-if="item.type">
|
||||||
|
<p class="time">2023-04-26 16:11:43</p>
|
||||||
|
<div class="item-content-flex">
|
||||||
|
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img">
|
||||||
|
<div class="content">
|
||||||
|
<span></span>
|
||||||
|
<p>{{item.content}}</p>
|
||||||
|
</div>
|
||||||
|
<i class="el-icon-warning"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="item item-right" v-else>
|
||||||
|
<p class="time">2023-04-26 16:11:43</p>
|
||||||
|
<div class="item-content-flex">
|
||||||
|
<i class="el-icon-warning"></i>
|
||||||
|
<div class="content">
|
||||||
|
<span></span>
|
||||||
|
<p>{{item.content}}</p>
|
||||||
|
</div>
|
||||||
|
<img src="https://img1.baidu.com/it/u=413643897,2296924942&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500" alt="" class="user-img">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'Detail',
|
||||||
|
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object,
|
||||||
|
params: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
info: {},
|
||||||
|
isShow: false,
|
||||||
|
currIndex: 0,
|
||||||
|
isLoading: false,
|
||||||
|
tableData: [],
|
||||||
|
form: {
|
||||||
|
code: ''
|
||||||
|
},
|
||||||
|
colConfigs: [
|
||||||
|
{ slot: 'goods', label: '商品' },
|
||||||
|
{ prop: 'merchandiseIntegral', align: 'center', label: '单价' },
|
||||||
|
{ prop: 'merchandiseNumber', align: 'center', label: '数量' },
|
||||||
|
{ prop: 'merchandiseIntegral', align: 'center', label: '小计' }
|
||||||
|
],
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
tabIndex: 0,
|
||||||
|
searchName: '',
|
||||||
|
time: [],
|
||||||
|
search: {
|
||||||
|
name: ''
|
||||||
|
},
|
||||||
|
current: 1,
|
||||||
|
list: [
|
||||||
|
{type: 0, content: '123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右123全部全部全部全部全部全部全部全部全部全部全部全部右右右右'},
|
||||||
|
{type: 1, content: '123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左123左左左左左左'},
|
||||||
|
{type: 0, content: '456右右右右'},
|
||||||
|
{type: 0, content: '123右右右右'},
|
||||||
|
{type: 1, content: '123左左左左'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created () {
|
||||||
|
// this.isLoading = true
|
||||||
|
if (this.params && this.params.id) {
|
||||||
|
this.id = this.params.id
|
||||||
|
this.dict.load(['merchandiseOrderStatus']).then(() => {
|
||||||
|
// this.getInfo(this.params.id)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getInfo (id) {
|
||||||
|
this.instance.post(`/app/appintegralmerchandiseorder/queryDetailById?id=${id}`).then(res => {
|
||||||
|
if (res.code === 0) {
|
||||||
|
this.info = res.data
|
||||||
|
this.tableData = [this.info]
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isLoading = false
|
||||||
|
}).catch(() => {
|
||||||
|
this.isLoading = false
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onConfirm() {
|
||||||
|
this.$refs.form.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance.post(`/app/appintegralmerchandiseorder/writeOffOrder`, null, {
|
||||||
|
params: {
|
||||||
|
code: this.form.code,
|
||||||
|
id: this.params.id
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.isShow = false
|
||||||
|
this.getInfo(this.params.id)
|
||||||
|
this.$message.success('核销成功')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
cancel () {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'List',
|
||||||
|
isRefresh: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.detail {
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left__list--wrapper {
|
||||||
|
height: calc(100% - 68px);
|
||||||
|
padding: 8px;
|
||||||
|
.addressBook-left__list--item {
|
||||||
|
line-height: 44px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
padding: 8px;
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addressBook-left__list--item:hover {
|
||||||
|
background-color: #E8EFFF;
|
||||||
|
}
|
||||||
|
.active {
|
||||||
|
background-color: #E8EFFF;
|
||||||
|
color: #26f;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.addressBook-left__list--title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 8px 8px 0;
|
||||||
|
|
||||||
|
.addressBook-left__list--search {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
:deep( input ){
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-button {
|
||||||
|
width: 84px;
|
||||||
|
flex-shrink: 1;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep( .ai-list__content--right ){
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
margin-left: 1px;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
.ai-list__content--right-wrapper {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep .ai-list__content--right-wrapper {
|
||||||
|
padding: 0!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-right-title {
|
||||||
|
height: 40px;
|
||||||
|
border-bottom: 1px solid #ddd;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
box-sizing: content-box;
|
||||||
|
.tab-content {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 300px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search-content {
|
||||||
|
display: flex;
|
||||||
|
padding: 4px 8px 4px 0;
|
||||||
|
.ai-download,
|
||||||
|
.el-input {
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
.el-input {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
.el-date-editor--daterange {
|
||||||
|
width: 240px;
|
||||||
|
}
|
||||||
|
:deep .el-date-editor .el-range-separator {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content-right-info {
|
||||||
|
padding: 24px 16px;
|
||||||
|
.item {
|
||||||
|
margin-bottom: 48px;
|
||||||
|
.time {
|
||||||
|
color: #999;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 44px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.item-content-flex {
|
||||||
|
display: flex;
|
||||||
|
.user-img {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
max-width: calc(100% - 144px);
|
||||||
|
position: relative;
|
||||||
|
background-color: #f3f6f9;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
|
border: 10px solid transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
p {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 8px;
|
||||||
|
line-height: 28px;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #333;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-icon-warning {
|
||||||
|
font-size: 32px;
|
||||||
|
color: #f46;
|
||||||
|
margin-top: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.item-left {
|
||||||
|
.item-content-flex {
|
||||||
|
.user-img {
|
||||||
|
margin: 0 20px 0 0;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
span {
|
||||||
|
left: -18px;
|
||||||
|
border-right-color: #f3f6f9;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-icon-warning {
|
||||||
|
margin-left: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.item-right {
|
||||||
|
width: 100%;
|
||||||
|
justify-content: right;
|
||||||
|
.item-content-flex {
|
||||||
|
justify-content: end;
|
||||||
|
.user-img {
|
||||||
|
margin: 0 0 0 20px;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
background-color: #90e287;
|
||||||
|
span {
|
||||||
|
border-left-color:#90e287;
|
||||||
|
right: -18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.el-icon-warning {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
931
project/pidu/app/AppSessionArchive/components/List.vue
Normal file
931
project/pidu/app/AppSessionArchive/components/List.vue
Normal file
@@ -0,0 +1,931 @@
|
|||||||
|
<template>
|
||||||
|
<ai-list class="List">
|
||||||
|
<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"
|
||||||
|
:data="unitList"
|
||||||
|
highlight-current
|
||||||
|
@node-contextmenu="nodeContextmenu"
|
||||||
|
:current-node-key="search.departmentId"
|
||||||
|
:default-expanded-keys="defaultExpanded"
|
||||||
|
:default-checked-keys="defaultChecked"
|
||||||
|
@current-change="onTreeChange">
|
||||||
|
</el-tree>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template slot="content">
|
||||||
|
<ai-search-bar class="search-bar">
|
||||||
|
<template #left>
|
||||||
|
<!-- <el-button size="small" type="primary" icon="iconfont iconAdd" v-if="tabIndex === 0" @click="toAdd('')">添加成员
|
||||||
|
</el-button>
|
||||||
|
<ai-import :instance="instance" :dict="dict" v-if="tabIndex === 0" type="wxcp/wxuser" name="会话存档"
|
||||||
|
:importParams="{departmentId:search.departmentId}" @success="getList"/> -->
|
||||||
|
<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>
|
||||||
|
<ai-wechat-selecter refs="addTags" :instance="instance" v-model="users" @change="onChooseUser"
|
||||||
|
:disabled="currIndex < 0" v-if="tabIndex === 1">
|
||||||
|
<!-- <el-button size="small" :disabled="currIndex < 0" type="primary" icon="iconfont iconAdd">添加成员</el-button> -->
|
||||||
|
</ai-wechat-selecter>
|
||||||
|
</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="tags" label="标签" align="left">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<div class="table-tags" v-if="row.tagNames">
|
||||||
|
<el-tag type="info" v-for="(item, index) in row.tagNames.split('、')" size="small" :key="index">{{
|
||||||
|
item
|
||||||
|
}}
|
||||||
|
</el-tag>
|
||||||
|
</div>
|
||||||
|
</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="toDetail(row.id)">查看会话记录</el-button>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<div slot="paginationBtns" class="addressBook-table__btns">
|
||||||
|
<span style="margin-right: 8px;" @click="removeAll">{{ tabIndex === 0 ? '批量删除' : '批量移除' }}</span>
|
||||||
|
<ai-wechat-selecter :instance="instance" v-model="department" isChooseUnit @change="onDepartment"
|
||||||
|
v-if="tabIndex === 0">
|
||||||
|
<span>批量导出</span>
|
||||||
|
</ai-wechat-selecter>
|
||||||
|
</div>
|
||||||
|
</ai-table>
|
||||||
|
</template>
|
||||||
|
</ai-list>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {mapState} from 'vuex'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'List',
|
||||||
|
props: {
|
||||||
|
instance: Function,
|
||||||
|
dict: Object
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
users: [],
|
||||||
|
isShowMenu: false,
|
||||||
|
department: [],
|
||||||
|
btnLoading: false,
|
||||||
|
menuInfo: {
|
||||||
|
x: '',
|
||||||
|
y: '',
|
||||||
|
node: {}
|
||||||
|
},
|
||||||
|
search: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
title: '',
|
||||||
|
tagname: '',
|
||||||
|
name: '',
|
||||||
|
tagIds: '',
|
||||||
|
departmentId: ''
|
||||||
|
},
|
||||||
|
tagForm: {
|
||||||
|
tagname: ''
|
||||||
|
},
|
||||||
|
isShowDepart: false,
|
||||||
|
departForm: {
|
||||||
|
name: ''
|
||||||
|
},
|
||||||
|
loading: false,
|
||||||
|
isShowTags: false,
|
||||||
|
defaultChecked: [],
|
||||||
|
defaultExpanded: [],
|
||||||
|
tabIndex: 0,
|
||||||
|
currIndex: -1,
|
||||||
|
areaList: [],
|
||||||
|
total: 0,
|
||||||
|
colConfigs: [
|
||||||
|
{type: 'selection', label: ''},
|
||||||
|
{slot: 'avatar', label: ''},
|
||||||
|
{prop: 'name', label: '姓名'},
|
||||||
|
{prop: 'position', label: '职务'},
|
||||||
|
{prop: 'departmentNames', label: '部门'},
|
||||||
|
{prop: 'mobile', label: '手机号'},
|
||||||
|
// {slot: 'tags', label: '标签'},
|
||||||
|
// {prop: 'status', label: '账号状态', align: 'center', format: v => v == 1 ? '已激活' : '未激活'}
|
||||||
|
],
|
||||||
|
defaultProps: {
|
||||||
|
children: 'children',
|
||||||
|
label: 'name'
|
||||||
|
},
|
||||||
|
unitName: '',
|
||||||
|
rootId: '',
|
||||||
|
unitList: [],
|
||||||
|
tagsList: [],
|
||||||
|
tagName: '',
|
||||||
|
sourceTagList: [],
|
||||||
|
tableData: [],
|
||||||
|
tagId: '',
|
||||||
|
departmentName: '',
|
||||||
|
departId: '',
|
||||||
|
ids: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
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()
|
||||||
|
document.querySelector('html').addEventListener('click', this.bindEvent)
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
changeTag(index) {
|
||||||
|
this.currIndex = index
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
bindEvent() {
|
||||||
|
this.isShowMenu = false
|
||||||
|
},
|
||||||
|
|
||||||
|
nodeContextmenu(e, node) {
|
||||||
|
this.isShowMenu = true
|
||||||
|
let y = e.y + 6
|
||||||
|
if (y + 202 > document.body.clientHeight) {
|
||||||
|
y = y - 202
|
||||||
|
}
|
||||||
|
this.menuInfo = {
|
||||||
|
x: e.x + 16, y,
|
||||||
|
node
|
||||||
|
}
|
||||||
|
},
|
||||||
|
removeTags(id) {
|
||||||
|
if (this.currIndex < 0) {
|
||||||
|
return this.$message.error('请选择标签')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$confirm('确定移除该成员？').then(() => {
|
||||||
|
this.instance.post(`/app/wxcp/wxtag/removeTag?userIds=${id}&tagId=${this.tagsList[this.currIndex].id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('移除成功!')
|
||||||
|
this.search.current = 1
|
||||||
|
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onDepartment(e) {
|
||||||
|
if (!e.length) {
|
||||||
|
return this.$message.error('请选择部门')
|
||||||
|
}
|
||||||
|
const ids = e.map(v => v.id).join(',')
|
||||||
|
|
||||||
|
this.department = []
|
||||||
|
this.instance.post(`/app/wxcp/wxuser/export?departmentId=${ids}`, null, {
|
||||||
|
responseType: 'blob'
|
||||||
|
}).then(res => {
|
||||||
|
if (res?.type == "application/json") {
|
||||||
|
let reader = new FileReader()
|
||||||
|
reader.readAsText(res, "utf-8")
|
||||||
|
reader.onload = e => {
|
||||||
|
if (e.target.readyState === 2) {
|
||||||
|
let ret = JSON.parse(e.target.result)
|
||||||
|
if (ret?.code == 0) {
|
||||||
|
this.$message.success(ret.msg)
|
||||||
|
} else this.$message.error(ret.msg)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const link = document.createElement('a')
|
||||||
|
let blob = new Blob([res], {type: res.type})
|
||||||
|
link.style.display = 'none'
|
||||||
|
link.href = URL.createObjectURL(blob)
|
||||||
|
link.setAttribute('download', `${e[0].name}.xls`)
|
||||||
|
document.body.appendChild(link)
|
||||||
|
link.click()
|
||||||
|
document.body.removeChild(link)
|
||||||
|
this.$message.success('导出成功！')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onChooseUser(e) {
|
||||||
|
if (!e.length) {
|
||||||
|
return this.$message.error('请选择成员')
|
||||||
|
}
|
||||||
|
|
||||||
|
this.instance.post(`/app/wxcp/wxtag/markTag`, null, {
|
||||||
|
params: {
|
||||||
|
tagId: this.tagsList[this.currIndex].id,
|
||||||
|
userIds: e.map(v => v.id).join(',')
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.getList()
|
||||||
|
this.users = []
|
||||||
|
this.search.current = 1
|
||||||
|
this.$refs.addTags.reset()
|
||||||
|
} else {
|
||||||
|
this.users = []
|
||||||
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
this.users = []
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleTreeCommand(e, item) {
|
||||||
|
this.isShowMenu = false
|
||||||
|
|
||||||
|
if (e === 'add') {
|
||||||
|
this.departForm.id = ''
|
||||||
|
this.departForm.parentid = item.id
|
||||||
|
this.departId = ''
|
||||||
|
this.isShowDepart = true
|
||||||
|
} else if (e === 'edit') {
|
||||||
|
this.departForm = {
|
||||||
|
...item
|
||||||
|
}
|
||||||
|
|
||||||
|
this.departId = item.id
|
||||||
|
this.isShowDepart = true
|
||||||
|
} else if (e === 'top') {
|
||||||
|
if (!item.i) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.moveDepart(item.id, 0)
|
||||||
|
} else if (e === 'bottom') {
|
||||||
|
if ((item.i === item.len - 1) || (!item.i && item.i !== 0)) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
this.moveDepart(item.id, 1)
|
||||||
|
} else if (e === 'remove') {
|
||||||
|
this.removeDepart(item.id, item.parentid)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
removeDepart(id, parentid) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/delete?id=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.defaultChecked = [parentid]
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getTree()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
moveDepart(id, type) {
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/move?id=${id}&type=${type}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.defaultChecked = [id]
|
||||||
|
this.getTree()
|
||||||
|
this.$message.success(type === 0 ? '上移成功' : '下移成功')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onDepartConfirm() {
|
||||||
|
this.$refs.departForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance.post(`/app/wxcp/wxdepartment/addOrUpdate`, {
|
||||||
|
...this.departForm,
|
||||||
|
departId: this.departId
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.defaultChecked = [this.departForm.parentid]
|
||||||
|
this.isShowDepart = false
|
||||||
|
this.getTree()
|
||||||
|
this.$message.success(this.departId ? '编辑成功' : '新增成功')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onFormConfirm() {
|
||||||
|
this.$refs.tagForm.validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.instance.post(`/app/wxcp/wxtag/addOrUpdate`, {
|
||||||
|
...this.tagForm
|
||||||
|
}).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.isShowTags = false
|
||||||
|
this.getTags()
|
||||||
|
this.$message.success(this.tagId ? '编辑成功' : '新增成功')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
handleCommand(e, item) {
|
||||||
|
if (e === 'edit') {
|
||||||
|
this.tagId = item.id
|
||||||
|
this.tagForm = {
|
||||||
|
...item
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isShowTags = true
|
||||||
|
} else {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/wxcp/wxtag/delete?id=${item.id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getTags()
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onClose() {
|
||||||
|
this.tagId = ''
|
||||||
|
this.tagForm.tagname = ''
|
||||||
|
this.departForm.name = ''
|
||||||
|
this.departId = ''
|
||||||
|
this.departForm.nameEn = ''
|
||||||
|
this.departForm.parentid = ''
|
||||||
|
this.departForm.showIndex = ''
|
||||||
|
},
|
||||||
|
|
||||||
|
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
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onSwitchChange(id) {
|
||||||
|
this.instance.post(`/app/wxcp/wxuser/enable?id=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
onTreeChange(e) {
|
||||||
|
this.departmentName = e.name
|
||||||
|
this.search.departmentId = e.id || ''
|
||||||
|
this.search.current = 1
|
||||||
|
this.isShowMenu = false
|
||||||
|
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getList()
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
getList() {
|
||||||
|
this.loading = true
|
||||||
|
this.instance.post(`/app/wxcp/wxuser/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
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
removeAll() {
|
||||||
|
if (!this.ids) return
|
||||||
|
|
||||||
|
if (this.tabIndex === 1) {
|
||||||
|
this.removeTags(this.ids)
|
||||||
|
} else {
|
||||||
|
this.remove(this.ids)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
handleSelectionChange(e) {
|
||||||
|
this.ids = e.map(v => v.id).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
|
||||||
|
},
|
||||||
|
|
||||||
|
remove(id) {
|
||||||
|
this.$confirm('确定删除该数据？').then(() => {
|
||||||
|
this.instance.post(`/app/wxcp/wxuser/delete?id=${id}`).then(res => {
|
||||||
|
if (res.code == 0) {
|
||||||
|
this.$message.success('删除成功！')
|
||||||
|
this.getList()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
toDetail(id) {
|
||||||
|
this.$emit('change', {
|
||||||
|
type: 'Detail',
|
||||||
|
params: {
|
||||||
|
id: id || '',
|
||||||
|
departmentId: this.search.departmentId || '',
|
||||||
|
departmentName: this.departmentName || ''
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.List {
|
||||||
|
.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;
|
||||||
|
|
||||||
|
:deep( span ){
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.addressBook-left__list--title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 8px 8px 0;
|
||||||
|
|
||||||
|
.addressBook-left__list--search {
|
||||||
|
flex: 1;
|
||||||
|
|
||||||
|
: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;
|
||||||
|
|
||||||
|
:deep( .el-tree ){
|
||||||
|
width: fit-content;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
: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