Commit e31ca2db authored by libin's avatar libin

客服列表

parent 39ae939f
import fetch from 'utils/fetch';
export function page(query) {
return fetch({
url: '/api/im/admin/customer_service/page',
method: 'get',
params: query
});
}
export function findById(id) {
return fetch({
url: '/api/im/admin/customer_service/' + id,
method: 'get'
});
}
/**
* 添加或编辑客服
* @param query
*/
export function add(query) {
return fetch({
url: '/api/im/admin/customer_service/add',
method: 'post',
data: query
});
}
/**
* 修改密码
* @param telphone
* @param password
*/
export function updatePassword(telphone, password) {
return fetch({
url: '/api/im/admin/customer_service/update_password/' + telphone + '/' + password,
method: 'put'
});
}
/**
* 删除
* @param id
* @param imUserId
*/
export function deleteById(id, imUserId) {
return fetch({
url: '/api/im/admin/customer_service/delete/' + id + '/' + imUserId,
method: 'delete'
});
}
...@@ -486,6 +486,12 @@ export const asyncRouterMap = [{ ...@@ -486,6 +486,12 @@ export const asyncRouterMap = [{
component: _import('userManagement/memberEnter'), component: _import('userManagement/memberEnter'),
name: '会员录入', name: '会员录入',
authority: 'memberEnter' authority: 'memberEnter'
},
{
path:'imCustomerServiceManger',
component: _import('userManagement/imCustomerServiceManger/cusomterServiceList'),
name:'客服列表',
authority: 'imCustomerServiceManger'
} }
] ]
}, },
......
<template>
<div class="app-container calendar-list-container" v-loading.body="showLoadingBody">
<div v-if="!customerServiceDialogVisible">
<div class="filter-container" ref="filter-container">
<el-form :inline="inline" ref="queryForm" :model="listQuery" label-width="100px">
</el-form>
<!-- <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>-->
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate"
type="primary" icon="edit">添加
</el-button>
</div>
<el-table :key='tableKey' :data="list" border fit highlight-current-row
style="width: 100%">
<el-table-column
type="index"
align="center" label="序号" width="65">
</el-table-column>
<el-table-column width="200" align="center" label="客服名称">
<template scope="scope">
<span>{{scope.row.name}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="客服电话">
<template scope="scope">
<span>{{scope.row.telphone}}</span>
</template>
</el-table-column>
<el-table-column width="200" align="center" label="客服密码">
<template scope="scope">
<span>{{scope.row.password}}</span>
</template>
</el-table-column>
<el-table-column align="center" label="创建时间">
<template scope="scope">
<span>{{scope.row.createTime}}</span>
</template>
</el-table-column>
<el-table-column align="center" width="200" label="操作" fixed="right">
<template scope="scope">
<el-button size="small" class="el-button el-button--text el-button--small" @click="handleUpdate(scope.row)">
{{'编辑'}}
</el-button>
<el-button class="el-button el-button--text el-button--small" style="color:red;" size="small"
@click="deleteHandler(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
:current-page.sync="listQuery.page" :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
</div>
</div>
<!-- 友情连接 -->
<!-- <FriendLink v-if="friendLinkDialogVisible" :oneRow="oneRow" :title="modalTitle"
v-on:friendLinkDialogEvent="friendLinkDialogEvent"></friendLink>-->
<customerService v-if="customerServiceDialogVisible" :oneRow="oneRow" :title="modalTitle" v-on:customerServiceDialogEvent="customerServiceDialogEvent"></customerService>
</div>
</template>
<script>
import {mapGetters} from 'vuex';
import {
page
} from '../../../api/admin/userManagement/customerservice';
import ElRow from "element-ui/packages/row/src/row";
import ElCol from "element-ui/packages/col/src/col";
import {timestamp2Date} from 'src/utils/dateUtils';
import {deleteById} from "../../../api/admin/userManagement/customerservice";
import customerService from "src/views/userManagement/imCustomerServiceManger/model/customerServiceModel";
export default {
name: 'customerServiceManager',
components: {
customerService,
ElCol,
ElRow
},
data() {
return {
modalTitle: "创建",
BASE_API: process.env.BASE_API,
customerServiceDialogVisible: false,//添加、编辑弹框
showLoadingBody: false,
list: null,
total: null,
listLoading: true,
listQuery: {
page: 1,
limit: 10,
},
inline: true,
textMap: {
update: '编辑',
create: '创建'
},
labelForm: {},
tableKey: 0
}
},
created() {
this.page()
},
methods: {
/**
* 添加
* */
handleCreate() {
this.modalTitle = '创建';
this.oneRow = {};
this.customerServiceDialogVisible = true;
},
/**
* 上下架
*/
upStatus(row, onState) {
updateOnstateById(row.id, onState).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '成功',
type: 'success',
duration: 2000
});
this.page();
} else {
this.$notify({
title: '失败',
message: '操作失败!',
type: 'error',
duration: 2000
});
}
});
},
/**
* 删除
* */
deleteHandler(row) {
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteById(row.id,row.imUserId).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '删除成功',
type: 'success',
duration: 2000
});
this.page();
} else {
this.$notify({
title: '删除失败',
message: '操作失败!',
type: 'error',
duration: 2000
});
}
});
})
},
/**
* 编辑
* */
handleUpdate(row) {
this.modalTitle = '编辑';
this.oneRow = row;
this.customerServiceDialogVisible = true;
},
/**
* modal传递回来的数据
* */
customerServiceDialogEvent(e) {
this.customerServiceDialogVisible = false;
if (e) {
//编辑成功-重新加载列表
this.page();
}
},
/**
* 获取
* */
page() {
this.listLoading = true;
page(this.listQuery).then(response => {
let totalCountRs = undefined;
let listRs = undefined;
if (!this.$utils.isEmpty(response.data.data) && this.$utils.isInteger(response.data.totalCount)) {
listRs = response.data.data;
totalCountRs = response.data.totalCount;
listRs.map(function (item) {
item.createTime = timestamp2Date(item.createTime);
});
}
this.listLoading = false;
this.list = listRs;
this.total = totalCountRs;
})
},
handleFilter() {
this.listQuery.page = 1;
this.$refs.queryForm.validate(valid => {
if (valid) {
this.getList();
} else {
return false;
}
});
},
handleSizeChange(val) {
this.listQuery.limit = val;
this.page();
},
handleCurrentChange(val) {
this.listQuery.page = val;
this.page();
}
}
}
</script>
<template>
<!-- 友情:创建、编辑 -->
<div class = "friendLink">
<h4>{{title}}</h4>
<el-form :model="form" :rules="rules" ref="form" label-width="90px">
<el-row>
<el-col :span="8">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" placeholder="请输入客服名称"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="客服电话" prop="telphone">
<el-input v-model="form.telphone" placeholder="请输入客服电话" type="number"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="密码" prop="password">
<el-input v-model="form.password" placeholder="请输入密码" type="text"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
<el-button type="primary" v-if="title=='创建'" @click="createCustomerService('form')">确 定</el-button>
<el-button type="primary" v-if="title=='编辑'" @click="updateCustomerService('form')">确 定</el-button>
</div>
</div>
</template>
<style>
textarea{
display: none;
}
.el-upload-list li{
margin-left: 10px;
}
</style>
<script>
import {
getToken
} from '../../../../utils/auth';
import {findById,add} from "src/api/admin/userManagement/customerservice";
export default {
props: ["oneRow", "title","customerServiceDialogEvent"],
name: 'customerservice',
data() {
return {
BASE_API: process.env.BASE_API,
config: {
initialFrameWidth: null,
initialFrameHeight: 350
},
form: {
name:undefined, //名称
telphone:undefined, //客服电话
password: undefined
},
rules: {
telphone:{
type: 'string',
required: true,
message: '请输入客服电话',
trigger: 'blur'
}
},
}
},
mounted() {
this.cleanForm();
if(this.title === "编辑"){
let row = this.oneRow;
this.getOne(row.id);
}
},
computed: {
getHeaderWithToken() {
return {Authorization: getToken()};
},
},
methods: {
/**
* 创建
* */
createCustomerService(formName){
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
let params = {
name:this.form.name,
telphone: this.form.telphone,
password: this.form.password
};
this.toCreate(params);
} else {
return;
}
});
},
/**
* 编辑
* */
updateCustomerService(formName){
const set = this.$refs;
set[formName].validate(valid => {
if (valid) {
let params = {
id:this.oneRow.id,
name:this.form.name,
telphone: this.form.telphone,
password: this.form.password
};
this.toUpdate(params);
} else {
return;
}
});
},
/**
* 更新
* */
toUpdate(params){
add(params).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '编辑成功',
type: 'success',
duration: 2000
});
this.$emit("customerServiceDialogEvent", true);
} else {
this.$notify({
title: '编辑失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
},
/**
* 创建
* */
toCreate(params){
add(params).then(response => {
if (response.status === 200) {
this.$notify({
title: '成功',
message: '创建成功',
type: 'success',
duration: 2000
});
this.$emit("customerServiceDialogEvent", true);
} else {
this.$notify({
title: '创建失败',
message: rsCode.msg[response.code] ? rsCode.msg[response.code] : '操作失败!',
type: 'error',
duration: 2000
});
}
});
},
/**
* 获取一条营地
* */
getOne(id){
findById(id).then(response => {
this.form = response.data;
})
},
/**
* 旅游-弹框-取消
* */
cancel() {
this.cleanForm();
this.$emit("customerServiceDialogEvent", false);
},
/**
* 清空弹框数据
*/
cleanForm() {
this.form = {
name:undefined,
telphone: undefined,
password: undefined
};
}
}
}
</script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment