137 lines
4.6 KiB
Vue
137 lines
4.6 KiB
Vue
<template>
|
|
<div class="layout-content-wrap background-color-fff border-radius-8">
|
|
<div class="border-b-solid-lighter-1 p-h-24">
|
|
<div class="flex-row justify-content-between height-56 align-items-center">
|
|
<div class="color-text-primary f22">坐席列表</div>
|
|
<div class="color-text-regular f14" >
|
|
<el-button type="primary" @click="handleAddForm" size="small">新增</el-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layout-tabs-content-box">
|
|
<div class="">
|
|
<el-table ref="monthlyPlanTable"
|
|
:data="tableData"
|
|
:header-cell-style="{background:'#F5F7FA'}"
|
|
row-key="id"
|
|
:tree-props="{children: 'children', hasChildren: 'hasChildren'}"
|
|
>
|
|
<el-table-column
|
|
v-for="(item, i) in tableHead"
|
|
:key="i"
|
|
:prop="item.prop"
|
|
:label="item.label"
|
|
:width="item.width"
|
|
:show-overflow-tooltip="item.showOverflowTooltip"
|
|
:formatter="item.formatter"
|
|
>
|
|
</el-table-column>
|
|
<el-table-column label="操作" width="100">
|
|
<template slot-scope="scope">
|
|
<div class="flex-row">
|
|
<div class="f14 color-1960F4 cursor-pointer mr-8" @click="handleDelete(scope)">解绑</div>
|
|
</div>
|
|
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
|
|
<div class="text-center p-v-24">
|
|
<el-pagination
|
|
@size-change="getRoleList"
|
|
@current-change="getRoleList"
|
|
:current-page="queryData.current"
|
|
:page-size="queryData.size"
|
|
layout="total, prev, pager, next, jumper"
|
|
:total="total">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<!-- 新增-编辑 -->
|
|
<addOrEditRoleDialog v-if="addOrEditRoleConfig" :addOrEditRoleConfig.sync="addOrEditRoleConfig" />
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import systemManageApi from "@/services/systemManage";
|
|
export default {
|
|
components: {
|
|
addOrEditRoleDialog: () => import('./components/addOrEditRoleDialog.vue'),
|
|
},
|
|
data() {
|
|
return {
|
|
tableData:[],
|
|
tableHead: [
|
|
{
|
|
prop: "userShowName",
|
|
label: "用户名称",
|
|
showOverflowTooltip: false,
|
|
formatter: this.formatTable,
|
|
},
|
|
{
|
|
prop: "seatTelephone",
|
|
label: "座席电话",
|
|
showOverflowTooltip: false,
|
|
formatter: this.formatTable,
|
|
},
|
|
{
|
|
prop: "bindTime",
|
|
label: "绑定时间",
|
|
showOverflowTooltip: false,
|
|
formatter: this.formatTable,
|
|
},
|
|
|
|
],
|
|
queryData: {
|
|
current: 1,
|
|
size: 10,
|
|
},
|
|
total: 0,
|
|
addOrEditRoleConfig:null,//新增弹窗
|
|
}
|
|
},
|
|
created() {
|
|
this.getSeatList(1)
|
|
},
|
|
methods: {
|
|
getSeatList(val){
|
|
if(val!=undefined){this.queryData.current = val}
|
|
systemManageApi.getSeatList(this.queryData).then(res => {
|
|
if (!res.code) {
|
|
this.tableData = res.records;
|
|
this.total = res.total;
|
|
}
|
|
})
|
|
},
|
|
|
|
// 删除
|
|
handleDelete(scope){
|
|
this.$confirm("确定解绑坐席电话, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
}).then(() => {
|
|
if(!this.$clickThrottle()) { return }//防止重复点击
|
|
systemManageApi.seatUnbind({ id: scope.row.id }).then((res) => {
|
|
|
|
this.$message.success("解绑成功");
|
|
this.getSeatList(1)
|
|
|
|
});
|
|
}).catch(() => {});
|
|
},
|
|
formatTable(row, column, cellValue, index) {
|
|
return cellValue || "-";
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.el-table--fit {
|
|
border:1px solid $border-color-lighter !important;
|
|
border-bottom: 0!important;
|
|
}
|
|
|
|
</style> |