会话存档整理
This commit is contained in:
liuye
@@ -1,224 +0,0 @@
|
||||
<template>
|
||||
<section class="AppSeatManagement">
|
||||
<ai-list>
|
||||
<template slot="title">
|
||||
<ai-title title="席位管理" isShowBottomBorder></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-select v-model="configInfo.id" filterable placeholder="请选择机位" size="small" @change="configChange">
|
||||
<el-option
|
||||
v-for="item in configList"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
<span class="tips">当前机位1有效期为：{{configInfo.validity}} ip地址为：{{configInfo.xbotIp}}</span>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-button size="small" :type="configInfo.status != 1 ? 'info' : 'primary'" @click="openWechat()" :disabled="configInfo.status != 1">{{configInfo.status != 1 ? '已启动' : '启动'}}</el-button>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
|
||||
@getList="getTableData()" :col-configs="colConfigs">
|
||||
<el-table-column slot="groupCount" label="监控群聊" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<div @click="showDialog(row)" style="cursor: pointer;color:#26f">{{row.groupCount}}</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
<ai-dialog
|
||||
title="监控群聊"
|
||||
:visible.sync="dialog"
|
||||
:destroyOnClose="true"
|
||||
width="720px"
|
||||
:customFooter="true">
|
||||
<ai-table :tableData="tableDataGroup" :isShowPagination="false"
|
||||
@getList="getTableDataGroup()" :col-configs="colConfigsGroup">
|
||||
<el-table-column slot="avatar" label="群聊头像" align="left">
|
||||
<template slot-scope="{ row }">
|
||||
<img :src="row.avatar" alt="" class="group-avatar">
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
<div class="dialog-footer" slot="footer">
|
||||
<el-button @click="dialog=false">关闭</el-button>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "AppSeatManagement",
|
||||
label: '席位管理',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
menuName:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
tableData: [],
|
||||
total: 0,
|
||||
dialog: false,
|
||||
configList: [],
|
||||
configId: '',
|
||||
configInfo: {id: ''},
|
||||
groupInfo: {},
|
||||
searchGroup: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
tableDataGroup: [],
|
||||
totalGroup: 0,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load('yesOrNo').then(() => {
|
||||
this.getConfigList()
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{ slot: "loginUserId", label: '用户id'},
|
||||
{ prop: "loginUserName", label: '姓名', align: "left"},
|
||||
{ prop: "phone", label: '手机号'},
|
||||
{ prop: "girdNames", label: '管辖区域'},
|
||||
{ slot: "groupCount", label: '监控群聊'},
|
||||
// { prop: "status", label: '状态'},
|
||||
]
|
||||
},
|
||||
colConfigsGroup() {
|
||||
return [
|
||||
{ slot: "avatar", label: '群聊头像'},
|
||||
{ prop: "nickname", label: '群聊名称', align: 'center'},
|
||||
{ prop: "is_manager", label: '是否管理员', dict: 'yesOrNo', align: 'center'},
|
||||
{ prop: "num", label: '群聊成员（人数）', align: 'center'},
|
||||
// { prop: "phone", label: '群主'},
|
||||
]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getConfigList() {
|
||||
this.instance.post(`/app/appxbotconfig/list?size=1000`).then(res => {
|
||||
if(res?.data) {
|
||||
res.data.records.map((item) => {
|
||||
item.label = item.xbotName
|
||||
item.value = item.id
|
||||
})
|
||||
this.configList = res.data.records
|
||||
this.configInfo = this.configList[0]
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
},
|
||||
configChange(e) {
|
||||
this.configInfo = this.configList.filter(item => item.id == e)[0]
|
||||
this.search.current = 1
|
||||
this.getTableData()
|
||||
},
|
||||
openWechat() {
|
||||
this.instance.post(`/app/appxbotconfig/openWechat?id=${this.configInfo.id}`).then(res => {
|
||||
if(res.code === 0) {
|
||||
this.configInfo.status = 0
|
||||
this.$message.success('启动成功!')
|
||||
}
|
||||
})
|
||||
},
|
||||
getTableData() {
|
||||
this.instance.post(`/app/xbotCallback/list`,null,{
|
||||
params: {
|
||||
...this.search,
|
||||
xbotId: this.configInfo.id
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
showDialog(row) {
|
||||
this.dialog = true
|
||||
this.groupInfo = row
|
||||
this.getTableDataGroup()
|
||||
},
|
||||
getTableDataGroup() {
|
||||
this.instance.post(`/app/xbotCallback/groupList`,null,{
|
||||
params: {
|
||||
// ...this.searchGroup,
|
||||
current: 1,
|
||||
managerWxid: this.groupInfo.loginUserId
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.tableDataGroup = JSON.parse(res.data)
|
||||
this.tableDataGroup.map((item) => {
|
||||
item.num = item.member_list.length
|
||||
})
|
||||
// this.totalGroup = res.data.total
|
||||
}
|
||||
})
|
||||
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.AppSeatManagement {
|
||||
height: 100%;
|
||||
|
||||
.time-select {
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border: 1px solid #d0d4dc;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.el-icon-arrow-down {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep .is-error {
|
||||
.time-select {
|
||||
border: 1px solid #f46!important;
|
||||
}
|
||||
}
|
||||
.tips {
|
||||
display: inline-block;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
.group-avatar {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
:deep .ai-dialog__content--wrapper {
|
||||
// height: 1000px;
|
||||
// overflow-y: scroll;
|
||||
.ai-table {
|
||||
// height: 1000px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,66 +0,0 @@
|
||||
<template>
|
||||
<div class="AppSensitiveWechat">
|
||||
<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: "AppSensitiveWechat",
|
||||
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.getTableData();
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppSensitiveWechat {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,254 +0,0 @@
|
||||
<template>
|
||||
<section class="list">
|
||||
<ai-list>
|
||||
<template slot="title">
|
||||
<ai-title title="敏感词触发" isShowBottomBorder></ai-title>
|
||||
</template>
|
||||
<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.type" placeholder="会话类型" @change="current=1, getTableData()"
|
||||
:selectList="dict.getDict('appSessionType')"/>
|
||||
<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.content" clearable
|
||||
@clear="current = 1, search.content = '', 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="toDetail(row)">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "list",
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
content: '',
|
||||
departmentId: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
areaId: '',
|
||||
type: ''
|
||||
},
|
||||
departIdList: [],
|
||||
tableData: [],
|
||||
size: 10,
|
||||
total: 0,
|
||||
current: 1,
|
||||
girdOptions: [],
|
||||
defaultProps: {
|
||||
label: 'name',
|
||||
value: 'id',
|
||||
checkStrictly: true,
|
||||
},
|
||||
flag: false,
|
||||
time: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$dict.load('appSessionType').then(() => {
|
||||
this.getTableData()
|
||||
})
|
||||
this.getGridList()
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: "wordName", label: '触发敏感词', align: "left"},
|
||||
{ prop: "type", label: '会话类型', dict: 'appSessionType'},
|
||||
// { prop: "areaName", label: '行政区划'},
|
||||
{ prop: "departmentName", label: '部门'},
|
||||
{ prop: "toName", label: '涉及对象'},
|
||||
{ prop: "userName", label: '姓名'},
|
||||
{ prop: "phone", label: '手机号'},
|
||||
{ prop: "createTime", label: '日期', width:220},
|
||||
{ slot: "options" },
|
||||
]
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
this.instance.post(`/app/appsessionarchivekeywordrecord/listForXbot`,null,{
|
||||
params: {
|
||||
...this.search,
|
||||
current: this.current,
|
||||
size: this.size,
|
||||
total: this.total,
|
||||
startTime: this.time && this.time.length ? this.time[0] : '',
|
||||
endTime: this.time && this.time.length ? this.time[1] : ''
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
onAreaChange () {
|
||||
this.search.current = 1
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
this.time = e
|
||||
this.getTableData()
|
||||
},
|
||||
|
||||
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()
|
||||
},
|
||||
|
||||
toDetail(row) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params:row
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list {
|
||||
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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 830 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
@@ -1,65 +0,0 @@
|
||||
<template>
|
||||
<div class="AppSessionArchiveWechat">
|
||||
<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: "AppSessionArchiveWechat",
|
||||
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">
|
||||
.AppSessionArchiveWechat {
|
||||
height: 100%;
|
||||
background: #f3f6f9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,929 +0,0 @@
|
||||
<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 || ''
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 830 B |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<section class="AppWorkOrder">
|
||||
<component ref="component" :is="currentPage" @change="onChange" :params="params" :instance="instance" :dict="dict" :menuName="menuName" />
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import List from './components/List'
|
||||
import Detail from './components/Detail'
|
||||
import Setting from './components/Setting'
|
||||
|
||||
export default {
|
||||
name: 'AppWorkOrder',
|
||||
label: '工单管理',
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
menuName: {default: '工单管理'}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
component: 'List',
|
||||
params: {}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
currentPage() {
|
||||
let {hash, query: {id}} = this.$route
|
||||
return hash == "#Setting" ? Setting :
|
||||
!!id ? Detail : List
|
||||
}
|
||||
},
|
||||
components: {
|
||||
List,
|
||||
Detail,
|
||||
Setting
|
||||
},
|
||||
|
||||
methods: {
|
||||
onChange(data) {
|
||||
this.$router.push({query: data.params, hash: data.type == "Setting" ? "#Setting" : ""})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.AppWorkOrder {
|
||||
height: 100%;
|
||||
background: #F3F6F9;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -1,599 +0,0 @@
|
||||
<template>
|
||||
<ai-detail class="reportAtWillDetail" v-loading="isLoading">
|
||||
<template #title>
|
||||
<ai-title title="详情" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
|
||||
<template #rightBtn>
|
||||
<div class="title-btns">
|
||||
<el-button type="primary" icon="iconfont iconPerson_Transfered" @click="isShowForward = true" v-if="detail.eventStatus < 2">指派事件</el-button>
|
||||
<el-button type="primary" icon="iconfont iconRegister" @click="isShowAdd = true" v-if="detail.eventStatus < 2">处理事件</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<div class="detail-content__wrapper">
|
||||
<div class="detail-content__wrapper--left">
|
||||
<ai-card title="基础信息">
|
||||
<template #content>
|
||||
<ai-wrapper>
|
||||
<ai-info-item label="上报人员" :value="detail.name"></ai-info-item>
|
||||
<ai-info-item label="当前状态" :value="dict.getLabel('clapEventStatus', detail.eventStatus)"></ai-info-item>
|
||||
<ai-info-item label="联系方式">{{ detail.phone }}</ai-info-item>
|
||||
<ai-info-item label="上报时间">{{ detail.createTime }}</ai-info-item>
|
||||
<!-- <ai-info-item label="事件来源">{{ dict.getLabel('residentEventSource', detail.eventSource) }}</ai-info-item> -->
|
||||
<ai-info-item label="事件类型">{{ detail.flName }}</ai-info-item>
|
||||
<ai-info-item label="事件描述" isLine>{{ detail.content }}</ai-info-item>
|
||||
<ai-info-item label="现场照片" isLine>
|
||||
<ai-uploader :instance="instance" disabled v-model="detail.files"></ai-uploader>
|
||||
</ai-info-item>
|
||||
<ai-info-item label="所属网格">{{ detail.girdName }}</ai-info-item>
|
||||
<ai-info-item label="事件位置" isLine>
|
||||
<div id="map" style="width: 500px; height: 280px;"></div>
|
||||
</ai-info-item>
|
||||
</ai-wrapper>
|
||||
</template>
|
||||
</ai-card>
|
||||
<ai-evaluation v-if="!!detail.id" :bid="detail.id" :info.sync="evaluation"/>
|
||||
</div>
|
||||
<div class="rightZone">
|
||||
<ai-card title="办理进度">
|
||||
<template #content>
|
||||
<el-steps direction="vertical" :active="1">
|
||||
<el-step
|
||||
v-for="(item, i) in process"
|
||||
:key="i"
|
||||
:title="item.systemExplain"
|
||||
:description="item.doTime">
|
||||
<template #title>
|
||||
<h2 class="step-title" style="font-weight: 500; font-size: 14px;">
|
||||
{{ item.systemExplain }}
|
||||
</h2>
|
||||
</template>
|
||||
<template #description>
|
||||
<p style="color: #888; margin: 0 4px 10px 0; font-size: 14px;">{{ item.doTime }}</p>
|
||||
<div style="color: #444;margin-bottom: 10px;" v-if="item.doExplain">{{ item.doExplain }}</div>
|
||||
<ai-uploader :instance="instance" disabled v-model="item.files"></ai-uploader>
|
||||
</template>
|
||||
</el-step>
|
||||
</el-steps>
|
||||
</template>
|
||||
</ai-card>
|
||||
</div>
|
||||
</div>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowAdd"
|
||||
width="800px"
|
||||
title="事件处理"
|
||||
@closed="onClose"
|
||||
@onConfirm="handleEvent">
|
||||
<el-form class="ai-form" label-width="120px" :model="form" ref="form">
|
||||
<el-form-item label="事件分类" prop="groupId" style="width: 100%;" :rules="[{ required: true, message: '请选择事件分类' }]">
|
||||
<ai-select
|
||||
v-model="form.groupId"
|
||||
placeholder="请选择事件分类"
|
||||
:selectList="dictList">
|
||||
</ai-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理结果" prop="eventStatus" style="width: 100%;" :rules="[{ required: true, message: '请选择处理结果' }]">
|
||||
<el-radio-group v-model="form.eventStatus">
|
||||
<el-radio label="1">已办结</el-radio>
|
||||
<el-radio label="0">已拒绝</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入处理意见' }]">
|
||||
<el-input type="textarea" :rows="5" :maxlength="500" v-model="form.content" clearable placeholder="请输入处理意见" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="files" style="width: 100%;">
|
||||
<ai-uploader
|
||||
:instance="instance"
|
||||
isShowTip
|
||||
v-model="form.files"
|
||||
:limit="9">
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowForward"
|
||||
width="800px"
|
||||
@close="onClose"
|
||||
title="事件指派"
|
||||
@onConfirm="onForwardConfirm">
|
||||
<el-form class="ai-form" label-width="120px" :model="forwardForm" ref="forwardForm">
|
||||
<el-form-item label="转交" prop="name" style="width: 100%;" :rules="[{ required: true, message: '请选择网格员或网格' }]">
|
||||
<el-input disabled size="small" v-model="forwardForm.name" clearable placeholder="请选择网格员或网格">
|
||||
<template slot="append">
|
||||
<el-button @click="getGirdList().then(()=>isShowUser=true )">选择</el-button>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="办理意见" prop="content" style="width: 100%;" :rules="[{ required: true, message: '请输入办理意见' }]">
|
||||
<el-input type="textarea" :rows="5" :maxlength="500" v-model="forwardForm.content" clearable placeholder="请输入办理意见" show-word-limit></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="图片" prop="files" style="width: 100%;">
|
||||
<ai-uploader
|
||||
:instance="instance"
|
||||
v-model="forwardForm.files"
|
||||
isShowTip
|
||||
:limit="9">
|
||||
</ai-uploader>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
<ai-dialog
|
||||
:visible.sync="isShowUser"
|
||||
width="800px"
|
||||
title="选择网格员"
|
||||
@onConfirm="onConfirm">
|
||||
<div class="grid-wrapper">
|
||||
<el-input
|
||||
style="margin-bottom: 10px;"
|
||||
size="small"
|
||||
placeholder="请输入网格名称/网格员姓名/网格员电话"
|
||||
v-model="name" @change="$refs.tree.filter(name)"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
<el-tree
|
||||
:filter-node-method="filterNode"
|
||||
ref="tree"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
:data="tree"
|
||||
highlight-current
|
||||
@current-change="onTreeChange">
|
||||
<div class="tree-container" slot-scope="{ data }">
|
||||
<div class="tree-container__user">
|
||||
<div class="tree-user__item">
|
||||
<span v-if="!data.isUser">{{ data.girdName }}</span>
|
||||
<span v-else>{{data.name}}<span v-if="data.phone">-{{data.phone}}</span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-tree>
|
||||
</div>
|
||||
</ai-dialog>
|
||||
</template>
|
||||
</ai-detail>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AMapLoader from '@amap/amap-jsapi-loader'
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'Detail',
|
||||
props: ['dict', 'instance'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
forwardForm: {
|
||||
content: '',
|
||||
girdId: '',
|
||||
girdName: '',
|
||||
girdMemberId: '',
|
||||
girdMemberName: '',
|
||||
name: ''
|
||||
},
|
||||
isLoading: true,
|
||||
name: '',
|
||||
detail: {},
|
||||
isShowUser: false,
|
||||
eventList: [],
|
||||
isShowAdd: false,
|
||||
userList: [],
|
||||
processList: [],
|
||||
dictList: [],
|
||||
defaultProps: {
|
||||
label: 'girdName'
|
||||
},
|
||||
isShowForward: false,
|
||||
tree: [],
|
||||
gridInfo: {},
|
||||
form: {
|
||||
files: [],
|
||||
groupId: '',
|
||||
groupName: '',
|
||||
content: [],
|
||||
eventStatus: '1'
|
||||
},
|
||||
evaluation: {}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
process: v => [v.evaluation.id ? {
|
||||
systemExplain: `${v.evaluation.createUserName}完成评价 (${v.evaluation.score}星评价)`,
|
||||
doTime: v.evaluation.createTime,
|
||||
doExplain: v.evaluation.rateText,
|
||||
} : null, v.processList].flat().filter(Boolean)
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getDict()
|
||||
this.dict.load('clapEventStatus', 'residentEventSource').then(() => {
|
||||
this.getDetail()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
getDetail() {
|
||||
this.instance.post('/app/appsessionarchivereportinfo/queryDetailById', null, {
|
||||
params: {id: this.$route.query.id}
|
||||
}).then(res => {
|
||||
if (res?.data) {
|
||||
this.detail = res.data
|
||||
this.processList = res.data.processList
|
||||
this.form.groupId = res.data.groupId
|
||||
|
||||
this.$nextTick(() => {
|
||||
this.initMap()
|
||||
})
|
||||
this.isLoading = false
|
||||
}
|
||||
}).catch(() => {
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
|
||||
getGirdList() {
|
||||
return this.instance.post(`/app/appresidentreportinfo/listGirdInfoByTransfer?id=${this.$route.query.id}`).then(res => {
|
||||
if (res?.data) {
|
||||
// return this.tree = this.formatList([res.data])
|
||||
this.tree = res.data
|
||||
this.tree.map((item) => {
|
||||
item.children = [item.girdMemberList?.map(e => ({
|
||||
...e, isUser: true, girdName: item.girdName
|
||||
})) || []].flat()
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onClose() {
|
||||
this.form.files = []
|
||||
this.form.groupId = ''
|
||||
this.form.groupName = ''
|
||||
this.form.content = ''
|
||||
this.form.eventStatus = ''
|
||||
this.forwardForm.content = ''
|
||||
this.forwardForm.girdId = ''
|
||||
this.forwardForm.girdName = ''
|
||||
this.forwardForm.girdMemberId = ''
|
||||
this.forwardForm.girdMemberName = ''
|
||||
this.forwardForm.name = ''
|
||||
},
|
||||
|
||||
formatList(list) {
|
||||
for (let item of list) {
|
||||
item.children = [item.girdList, item.girdMemberList?.map(e => ({
|
||||
...e, isUser: true, girdName: item.girdName,
|
||||
girdId: item.id
|
||||
})) || []].flat()
|
||||
if (item.girdList?.length > 0) {
|
||||
this.formatList(item.girdList)
|
||||
}
|
||||
}
|
||||
return list
|
||||
},
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true
|
||||
|
||||
return (data.girdName && data.girdName.indexOf(value) !== -1) || (data.name && data.name.indexOf(value) !== -1) || (data.name && data.phone.indexOf(value) !== -1)
|
||||
},
|
||||
|
||||
onTreeChange(e) {
|
||||
this.gridInfo = e
|
||||
},
|
||||
|
||||
onForwardConfirm() {
|
||||
this.$refs.forwardForm.validate(v => {
|
||||
if (v) {
|
||||
this.instance.post('/app/appsessionarchivereportinfo/transfer', {
|
||||
...this.forwardForm,
|
||||
id: this.$route.query.id
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.isShowForward = false
|
||||
this.getDetail()
|
||||
this.$message.success('转交成功!')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onConfirm() {
|
||||
// if (this.gridInfo.userId) {
|
||||
// this.forwardForm.girdId = this.gridInfo.girdId
|
||||
// this.forwardForm.girdName = this.gridInfo.girdName
|
||||
// this.forwardForm.girdMemberId = this.gridInfo.id
|
||||
// this.forwardForm.girdMemberName = this.gridInfo.name
|
||||
// } else {
|
||||
// this.forwardForm.girdId = this.gridInfo.id
|
||||
// }
|
||||
// this.forwardForm.girdName = this.gridInfo.girdName
|
||||
// this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
|
||||
// this.isShowUser = false
|
||||
if(!this.gridInfo.userId) {
|
||||
return this.$message.error('请选择网格员!')
|
||||
}
|
||||
this.forwardForm.girdId = this.gridInfo.girdId
|
||||
this.forwardForm.girdName = this.gridInfo.girdName
|
||||
this.forwardForm.girdMemberId = this.gridInfo.id
|
||||
this.forwardForm.girdMemberName = this.gridInfo.name
|
||||
this.forwardForm.name = `${this.gridInfo.girdName}${this.gridInfo.name ? '-' + this.gridInfo.name : ''}`
|
||||
this.isShowUser = false
|
||||
},
|
||||
getDict() {
|
||||
this.instance.post(`/app/appresidentreportgroup/list?current=1&size=100000`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.dictList = res.data.records.map(v => {
|
||||
return {
|
||||
dictValue: v.id,
|
||||
dictName: v.groupName
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
close() {
|
||||
this.$confirm('确定关闭该事件？').then(() => {
|
||||
this.instance.post(`/app/appresidentreportinfo/delete?ids=${this.$route.query.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
cancel(isRefresh) {
|
||||
this.$emit('change', {
|
||||
type: 'list',
|
||||
isRefresh: !!isRefresh
|
||||
})
|
||||
},
|
||||
|
||||
onChange(e) {
|
||||
this.instance.post(`/app/appvillagerintegralrule/list?size=1000&classification=${e}&ruleStatus=1`).then(res => {
|
||||
if (res.code === 0) {
|
||||
this.form.ruleId = ''
|
||||
this.eventList = res.data.records
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
initMap() {
|
||||
let {lng, lat} = this.detail
|
||||
let center = [lng, lat]
|
||||
AMapLoader.load({
|
||||
key: 'b553334ba34f7ac3cd09df9bc8b539dc',
|
||||
version: '2.0'
|
||||
}).then(AMap => {
|
||||
let map = new AMap.Map('map', {
|
||||
center,
|
||||
zoom: 14
|
||||
})
|
||||
let marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(lng, lat),
|
||||
title: this.detail.address
|
||||
})
|
||||
map.add(marker)
|
||||
})
|
||||
},
|
||||
|
||||
handleEvent() {
|
||||
this.$refs.form.validate(v => {
|
||||
if (v) {
|
||||
this.instance.post('/app/appsessionarchivereportinfo/finish', {
|
||||
...this.form,
|
||||
groupName: this.dictList.filter(v => v.dictValue === this.form.groupId)[0].dictName,
|
||||
id: this.$route.query.id
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.isShowAdd = false
|
||||
this.getDetail()
|
||||
this.$message.success('处理成功!')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.reportAtWillDetail {
|
||||
height: 100%;
|
||||
|
||||
.grid-wrapper {
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.title-btns {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
:deep( .el-step__icon ) {
|
||||
font-size: 12px;
|
||||
color: #555555;
|
||||
border-color: #d0d4dc;
|
||||
}
|
||||
|
||||
:deep( .el-step__head.is-finish ) {
|
||||
.el-step__icon.is-text {
|
||||
border: none;
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
background: #2266ff;
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .el-step__line ) {
|
||||
background-color: #d0d4dc;
|
||||
}
|
||||
}
|
||||
|
||||
.imgs {
|
||||
font-size: 0;
|
||||
|
||||
img {
|
||||
width: 108px;
|
||||
height: 108px;
|
||||
margin-right: 4px;
|
||||
margin-bottom: 4px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:nth-of-type(2n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .report-dialog ) {
|
||||
.el-select {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .el-step__head.is-process ) {
|
||||
color: #555;
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
:deep( .is-finish h2 ) {
|
||||
color: #2266ff;
|
||||
}
|
||||
|
||||
.step-title {
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.detail-content__wrapper {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.detail-content__wrapper--left {
|
||||
flex: 1;
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .ai-detail__content ) {
|
||||
background: #f3f6f9;
|
||||
|
||||
.ai-detail__content--wrapper {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding: 16px;
|
||||
box-sizing: border-box;
|
||||
|
||||
& > .el-card {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.rightZone {
|
||||
width: 400px;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep( .el-card ) {
|
||||
.el-card__header {
|
||||
padding: 12px 16px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.el-card__body {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
#amap {
|
||||
width: 466px;
|
||||
height: 232px;
|
||||
}
|
||||
|
||||
.el-steps {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.imgFormItem > .el-form-item__content {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
&:before {
|
||||
content: none;
|
||||
}
|
||||
|
||||
.el-image__inner {
|
||||
width: 82px;
|
||||
height: 82px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,194 +0,0 @@
|
||||
<template>
|
||||
<ai-list>
|
||||
<template #title>
|
||||
<ai-title :title="menuName" isShowBottomBorder>
|
||||
<el-button type="primary" slot="rightBtn" @click="toSetting">工单特征库设置</el-button>
|
||||
</ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<ai-select
|
||||
v-model="search.eventStatus"
|
||||
clearable
|
||||
placeholder="处理状态"
|
||||
:selectList="dict.getDict('clapEventStatus')"
|
||||
@change="search.current = 1, getList()">
|
||||
</ai-select>
|
||||
<!-- <ai-select
|
||||
v-model="search.eventSource"
|
||||
clearable
|
||||
placeholder="事件来源"
|
||||
:selectList="dict.getDict('residentEventSource')"
|
||||
@change="search.current = 1, getList()">
|
||||
</ai-select>
|
||||
<ai-select
|
||||
v-model="search.groupId"
|
||||
clearable
|
||||
placeholder="事件类型"
|
||||
:selectList="typeList"
|
||||
@change="search.current = 1, getList()">
|
||||
</ai-select>
|
||||
<el-cascader ref="cascader1" v-model="girdArr" :options="girdOptions" placeholder="所属网格" size="small"
|
||||
:props="defaultProps" :show-all-levels="false" @change="gridChange" clearable></el-cascader>
|
||||
<el-date-picker size="small" v-model="searchDotime" type="daterange" range-separator="至" @change="timeChange"
|
||||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd" format="yyyy-MM-dd"></el-date-picker> -->
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input
|
||||
v-model="search.content"
|
||||
class="search-input"
|
||||
size="small"
|
||||
v-throttle="() => {search.current = 1, getList()}"
|
||||
placeholder="请输入内容描述/上报人员/联系方式"
|
||||
clearable
|
||||
@change="getList"
|
||||
@clear="search.current = 1, search.content = '', getList()"
|
||||
suffix-icon="iconfont iconSearch">
|
||||
</el-input>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :colConfigs="colConfigs" :total="total" :current.sync="search.current" :size.sync="search.size" @getList="getList">
|
||||
<el-table-column slot="options" label="操作" fixed="right" width="120" align="center">
|
||||
<div class="table-options" slot-scope="{row}">
|
||||
<el-button type="text" title="详情" @click="toDetail(row.id)">详情</el-button>
|
||||
<el-button type="text" title="删除" @click="handleDelete(row.id)">删除</el-button>
|
||||
</div>
|
||||
</el-table-column>
|
||||
</ai-table>
|
||||
</template>
|
||||
</ai-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {mapState} from 'vuex'
|
||||
|
||||
export default {
|
||||
name: 'List',
|
||||
label: "工单管理",
|
||||
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
menuName: String
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
userList: [],
|
||||
search: {
|
||||
current: 1,
|
||||
size: 10,
|
||||
eventStatus: '',
|
||||
content: '',
|
||||
eventSource: '',
|
||||
groupId: '',
|
||||
createTimeStart: '',
|
||||
createTimeEnd: '',
|
||||
girdId: ''
|
||||
},
|
||||
total: 0,
|
||||
tableData: [],
|
||||
content: '',
|
||||
id: '',
|
||||
girdId: '',
|
||||
girdArr: [],
|
||||
girdOptions: [],
|
||||
defaultProps: {
|
||||
label: 'girdName',
|
||||
value: 'id',
|
||||
children: 'children',
|
||||
checkStrictly: true,
|
||||
},
|
||||
searchDotime: [],
|
||||
typeList: []
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
|
||||
colConfigs() {
|
||||
return [
|
||||
{prop: 'content', label: '内容描述', width: '300px'},
|
||||
{prop: 'flName', label: '事件类型', align: 'center'},
|
||||
{prop: 'girdName', label: '所属网格', align: 'center'},
|
||||
{prop: 'createTime', label: '上报时间', align: 'center'},
|
||||
{prop: 'name', label: '昵称', align: 'center'},
|
||||
// {prop: 'phone', label: '联系方式', align: 'center'},
|
||||
{prop: 'eventStatus', label: '处理状态', align: 'center', format: v => this.dict.getLabel('clapEventStatus', v)},
|
||||
{prop: 'processTime', label: '处理时长', align: 'center'},
|
||||
{slot: 'options'}
|
||||
]
|
||||
},
|
||||
|
||||
handleStatusOps() {
|
||||
return this.dict.getDict("reportAtWillHandleStatus").map(e => ({label: e.dictName, value: e.dictValue}))
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.dict.load('clapEventStatus', 'residentEventSource').then(() => {
|
||||
this.getList()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
timeChange() {
|
||||
if (this.searchDotime) {
|
||||
this.search.createTimeStart = this.searchDotime[0]
|
||||
this.search.createTimeEnd = this.searchDotime[1]
|
||||
} else {
|
||||
this.search.createTimeStart = null
|
||||
this.search.createTimeEnd = null
|
||||
}
|
||||
this.search.current = 1
|
||||
this.getList()
|
||||
},
|
||||
getList() {
|
||||
this.instance.post(`/app/appsessionarchivereportinfo/list`, null, {
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
toDetail(id) {
|
||||
this.$emit('change', {
|
||||
type: 'Detail',
|
||||
params: {
|
||||
id: id || ''
|
||||
}
|
||||
})
|
||||
},
|
||||
toSetting() {
|
||||
this.$emit('change', {
|
||||
type: 'Setting',
|
||||
params: {
|
||||
id: ''
|
||||
}
|
||||
})
|
||||
},
|
||||
handleDelete(ids) {
|
||||
this.$confirm("是否要进行删除?").then(() => {
|
||||
this.instance.post("/app/appsessionarchivereportinfo/delete", null, {
|
||||
params: {ids}
|
||||
}).then(res => {
|
||||
if (res?.code == 0) {
|
||||
this.$message.success("删除成功!")
|
||||
this.getList()
|
||||
}
|
||||
})
|
||||
}).catch(() => 0)
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
</style>
|
||||
@@ -1,191 +0,0 @@
|
||||
<template>
|
||||
<section class="Setting">
|
||||
<ai-list>
|
||||
<template slot="title">
|
||||
<ai-title title="工单特征库" isShowBack isShowBottomBorder @onBackClick="cancel"></ai-title>
|
||||
</template>
|
||||
<template #content>
|
||||
<ai-search-bar>
|
||||
<template #left>
|
||||
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="add('')">添加</el-button>
|
||||
</template>
|
||||
<template #right>
|
||||
<el-input size="small" placeholder="特征词搜索" v-model="search.wordName" clearable
|
||||
@clear="search.current = 1, search.wordName = '', getTableData()" suffix-icon="iconfont iconSearch"
|
||||
v-throttle="() => {(search.current = 1), getTableData();}"/>
|
||||
</template>
|
||||
</ai-search-bar>
|
||||
<ai-table :tableData="tableData" :total="total" :current.sync="search.current" :size.sync="search.size"
|
||||
@getList="getTableData()" :col-configs="colConfigs" :dict="dict">
|
||||
<el-table-column slot="options" label="操作" width="200" align="center">
|
||||
<template slot-scope="{ row }">
|
||||
<el-button type="text" @click="changeStatus(row, '停用')" v-if="row.status == 1">停用</el-button>
|
||||
<el-button type="text" @click="changeStatus(row, '启用')" v-else>启用</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="wordName">
|
||||
<el-input v-model.trim="form.wordName" type="textarea" :rows="2" placeholder="多个特征词以；隔开"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</ai-dialog>
|
||||
</section>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from "vuex";
|
||||
export default {
|
||||
name: "Setting",
|
||||
label: '工单特征库',
|
||||
props: {
|
||||
instance: Function,
|
||||
dict: Object,
|
||||
permissions: Function,
|
||||
menuName:String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search: {
|
||||
wordName: '',
|
||||
current: 1,
|
||||
size: 10,
|
||||
},
|
||||
total: 0,
|
||||
tableData: [],
|
||||
current: 1,
|
||||
form: {
|
||||
wordName: '',
|
||||
},
|
||||
dialog: false,
|
||||
flag: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.dict.load(['processDefStatus']).then(() => {
|
||||
this.getTableData()
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
...mapState(['user']),
|
||||
colConfigs() {
|
||||
return [
|
||||
{ prop: "wordName", label: '特征词', align: "left"},
|
||||
{ prop: "createTime", label: '创建时间', width: 200, align: 'center'},
|
||||
{ prop: "createUserName", label: '创建人', width: 200, align: 'center'},
|
||||
{ prop: "status", label: '状态', width: 200, dict: 'processDefStatus', align: 'center'},
|
||||
{ slot: "options"},
|
||||
]
|
||||
},
|
||||
rules() {
|
||||
return {
|
||||
wordName: [{required: true, message: '请输入特征词', trigger: 'blur' }],
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
getTableData() {
|
||||
this.instance.post(`/app/appsessionarchivefeaturelibrary/list`,null,{
|
||||
params: {
|
||||
...this.search
|
||||
}
|
||||
}).then(res => {
|
||||
if(res?.data) {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
}
|
||||
})
|
||||
},
|
||||
del(row) {
|
||||
this.$confirm('确定删除该数据？').then(() => {
|
||||
this.instance.post(`/app/appsessionarchivefeaturelibrary/delete?ids=${row.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('删除成功！')
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
changeStatus(row, text) {
|
||||
this.$confirm(`确定${text}该特征词？`).then(() => {
|
||||
this.instance.post(`/app/appsessionarchivefeaturelibrary/enable?id=${row.id}`).then(res => {
|
||||
if (res.code == 0) {
|
||||
this.$message.success('操作成功！')
|
||||
this.getTableData()
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
edit(row) {
|
||||
this.form = {...row}
|
||||
this.dialog = true
|
||||
},
|
||||
add() {
|
||||
this.dialog = true
|
||||
},
|
||||
onConfirm() {
|
||||
if(this.flag) return
|
||||
this.$refs.form.validate((valid)=> {
|
||||
if(valid) {
|
||||
this.flag = true
|
||||
this.instance.post(`/app/appsessionarchivefeaturelibrary/addOrUpdate`,{
|
||||
...this.form,
|
||||
}).then(res => {
|
||||
if(res?.code == 0) {
|
||||
this.$message.success(this.form.id ? '特征词编辑成功' : '特征词添加成功')
|
||||
setTimeout(() =>{
|
||||
this.dialog = false
|
||||
this.getTableData()
|
||||
this.flag = false
|
||||
}, 600)
|
||||
} else {
|
||||
this.flag = false
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
cancel() {
|
||||
this.$router.push({})
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.Setting {
|
||||
height: 100%;
|
||||
|
||||
.time-select {
|
||||
padding: 0 16px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
border: 1px solid #d0d4dc;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
.el-icon-arrow-down {
|
||||
line-height: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep .is-error {
|
||||
.time-select {
|
||||
border: 1px solid #f46!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user