557 lines
19 KiB
Vue
557 lines
19 KiB
Vue
<template>
|
||
<div v-loading="loading">
|
||
<div class="heior_box">
|
||
<el-button size="small" type="primary" icon="el-icon-edit" @click="batchSelectUser">批量修改归属</el-button>
|
||
<el-button size="small" type="primary" icon="el-icon-edit" @click="dels">批量删除</el-button>
|
||
<el-button size="small" type="primary" icon="el-icon-sold-out" @click="dataExport" v-if="$local.isRoot()">导出</el-button>
|
||
<!-- <el-button size="small" type="primary" icon="el-icon-edit">检测</el-button> -->
|
||
<!-- <el-button size="small" type="primary" icon="el-icon-edit">老账号认证</el-button> -->
|
||
|
||
<div class="search-box">
|
||
<!-- <el-cascader
|
||
placeholder="选择产品/套餐"
|
||
size="small"
|
||
v-model="searchModel.pModel"
|
||
:options="options"
|
||
:props="{ checkStrictly: true}"
|
||
clearable
|
||
></el-cascader> -->
|
||
<el-select
|
||
v-model="searchModel.ProductIds"
|
||
multiple
|
||
collapse-tags
|
||
style="width:200px;"
|
||
size=small
|
||
placeholder="请选择产品">
|
||
<el-option
|
||
v-for="item in products"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<el-select
|
||
v-model="searchModel.PackageNames"
|
||
multiple
|
||
collapse-tags
|
||
style="width:200px;"
|
||
size=small
|
||
placeholder="请选择套餐">
|
||
<el-option
|
||
v-for="item in packages"
|
||
:key="item.value"
|
||
:label="item.label"
|
||
:value="item.value">
|
||
</el-option>
|
||
</el-select>
|
||
<!-- <el-select v-model="searchModel.ProductId" placeholder="选择产品" clearable size="small">
|
||
<el-option v-for="item in products" :key="item.Name" :label="item.Name" :value="item.Id"></el-option>
|
||
</el-select> -->
|
||
<el-select
|
||
v-model="searchModel.accountTypes"
|
||
multiple
|
||
style="width:150px;"
|
||
collapse-tags
|
||
clearable
|
||
size="small"
|
||
placeholder="选择类型"
|
||
>
|
||
<el-option v-for="item in types" :key="item.text" :label="item.text" :value="item.value"></el-option>
|
||
</el-select>
|
||
<el-date-picker
|
||
size="small"
|
||
style="width:200px"
|
||
v-model="dateRange1"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="账号开通"
|
||
end-placeholder="日期选择"
|
||
></el-date-picker>
|
||
<el-date-picker
|
||
size="small"
|
||
style="width:200px"
|
||
v-model="dateRange"
|
||
type="daterange"
|
||
range-separator="至"
|
||
start-placeholder="账号到期"
|
||
end-placeholder="日期选择"
|
||
></el-date-picker>
|
||
<el-select v-model="searchModel.ExpirdDay" placeholder="选择过期时间" style="width:100px" clearable size="small">
|
||
<el-option
|
||
v-for="item in expirdtypes"
|
||
:key="item.text"
|
||
:label="item.text"
|
||
:value="item.value"
|
||
></el-option>
|
||
</el-select>
|
||
<el-input v-model="searchModel.keyWord" placeholder="请输入产品/套餐/会员/账号" clearable size="small">
|
||
<el-button slot="append" icon="el-icon-search" @click="search"></el-button>
|
||
</el-input>
|
||
</div>
|
||
</div>
|
||
<el-table
|
||
ref="multipleTable"
|
||
row-key="Id"
|
||
border
|
||
size="medium"
|
||
:data="retData.Data"
|
||
:height="$getHeight(100)"
|
||
@selection-change="handleSelectionChange"
|
||
>
|
||
<el-table-column type="selection" width="55"></el-table-column>
|
||
<el-table-column prop="UserCode" label="会员">
|
||
<template slot-scope="scope">
|
||
<phoneHide :text="scope.row.UserCode"></phoneHide>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="ProductName" label="产品"></el-table-column>
|
||
<el-table-column prop="PackageName" label="套餐"></el-table-column>
|
||
<el-table-column prop="AccountType" label="类型" :formatter="typeFormat"></el-table-column>
|
||
<el-table-column prop="Account" label="账号"></el-table-column>
|
||
<el-table-column prop="Pwd" label="密码"></el-table-column>
|
||
<el-table-column prop="ConnectCount" label="连接数"></el-table-column>
|
||
<el-table-column prop="StartTime" label="开通时间" width="160px"></el-table-column>
|
||
<el-table-column prop="EndTime" label="到期时间" width="160px"></el-table-column>
|
||
<el-table-column prop="RestTime" label="剩余时间" width="150px">
|
||
<template slot-scope="scope">
|
||
<span
|
||
v-if="scope.row.Status==1"
|
||
:class="{red:scope.row.RestTime=='已过期'}"
|
||
>{{scope.row.RestTime}}</span>
|
||
<span v-else class="red">已退款</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="im" label="腾讯限制" width="150px">
|
||
<template slot-scope="scope">
|
||
<span style="color:green;"
|
||
v-if="scope.row.im==1"
|
||
>已解除</span>
|
||
<span v-else >未解除</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column label="操作" width="140px">
|
||
<template slot-scope="scope">
|
||
<span class="handel cursor edit" @click="selectUser(scope.row)">归属</span>
|
||
<span class="handel cursor edit" @click="del(scope.row)">删除</span>
|
||
<span class="handel cursor edit" @click="online(scope.row)">查看在线</span>
|
||
<span v-if="scope.row.ProductId == 27" class="handel cursor edit" @click="openLimit(scope.row)">解除限制</span>
|
||
<span v-if="scope.row.ProductId == 28" class="handel cursor edit" @click="openLimitjt(scope.row)">解除限制</span>
|
||
<span v-if="scope.row.ProductId == 18" class="handel cursor edit" @click="openLimitother(scope.row)">解除限制</span>
|
||
<span v-if="scope.row.ProductId == 29" class="handel cursor edit" @click="openLimitother(scope.row)">解除限制</span>
|
||
<span v-if="scope.row.ProductId == 3" class="handel cursor edit" @click="openLimitother(scope.row)">解除限制</span>
|
||
<span v-if="scope.row.ProductId == 26" class="handel cursor edit" @click="openLimitother(scope.row)">解除限制</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
<div class="block">
|
||
<el-pagination
|
||
v-if="retData.Data.length>0"
|
||
@current-change="get"
|
||
:page-size="50"
|
||
:current-page.sync="searchModel.PageIndex"
|
||
layout="total,prev, pager, next"
|
||
:total="retData.TotalCount"
|
||
></el-pagination>
|
||
<span>共有连接数：{{countConnect}}</span>
|
||
</div>
|
||
<userDrawer ref="userDrawer" @select="onSelect"></userDrawer>
|
||
<el-dialog title="查看在线" :visible.sync="showOnlineDialog" width="900px" v-loading="loadingOnline">
|
||
<el-table
|
||
row-key="Id"
|
||
border
|
||
size="medium"
|
||
:data="onlineClient"
|
||
:height="$getHeight(300)"
|
||
>
|
||
<el-table-column
|
||
type="index" label="序号"
|
||
width="50">
|
||
</el-table-column>
|
||
<el-table-column prop="Account" label="账号"></el-table-column>
|
||
<el-table-column prop="LoginTime" label="登录时间"></el-table-column>
|
||
<el-table-column prop="OnlineTime" label="在线时间"></el-table-column>
|
||
<el-table-column prop="ServerIP" label="服务器Ip"></el-table-column>
|
||
<el-table-column prop="LoginIP" label="登录Ip">
|
||
<template slot-scope="scope">
|
||
<span class="handel cursor edit" @click="findaddr(scope.row)">{{scope.row.LoginIP}}</span>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="UpStream" label="上行" ></el-table-column>
|
||
<el-table-column prop="DownStream" label="下行"></el-table-column>
|
||
<el-table-column label="操作" width="140px">
|
||
<template slot-scope="scope">
|
||
<span class="handel cursor edit" @click="killout(scope.row)">强制离线</span>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
export default {
|
||
name: 'treeTable',
|
||
components: {
|
||
userDrawer: () => import('@/components/common/userDrawer'),
|
||
phoneHide: () => import('@/components/common/phonehide')
|
||
},
|
||
data () {
|
||
return {
|
||
options: [],
|
||
showOnlineDialog: false,
|
||
loading: false,
|
||
loadingOnline: false,
|
||
retData: { TotalCount: 0, Data: [] },
|
||
products: [],
|
||
countConnect: 0,
|
||
packages: [
|
||
{
|
||
label: '年卡',
|
||
value: '年卡'
|
||
}, {
|
||
label: '季卡',
|
||
value: '季卡'
|
||
}, {
|
||
label: '月卡',
|
||
value: '月卡'
|
||
}, {
|
||
label: '周卡',
|
||
value: '周卡'
|
||
}, {
|
||
label: '天卡',
|
||
value: '天卡'
|
||
}, {
|
||
label: '测试卡',
|
||
value: '测试卡'
|
||
}, {
|
||
label: '双月卡',
|
||
value: '双月卡'
|
||
}, {
|
||
label: '双月卡(活动)',
|
||
value: '双月卡(活动)'
|
||
}, {
|
||
label: '月卡(活动)',
|
||
value: '月卡(活动)'
|
||
}, {
|
||
label: '季卡(活动)',
|
||
value: '季卡(活动)'
|
||
}
|
||
],
|
||
dateRange: [],
|
||
dateRange1: [],
|
||
searchModel: {
|
||
ExpirdDay: -100,
|
||
UserId: 0,
|
||
PageIndex: 1,
|
||
keyWord: '',
|
||
ProductIds: [],
|
||
PackageNames: [],
|
||
accountTypes: null,
|
||
pModel: [],
|
||
Btime: '',
|
||
Etime: '',
|
||
Bktime: '',
|
||
Ektime: '',
|
||
ProductId: '',
|
||
PackageId: '',
|
||
PackageName: '',
|
||
},
|
||
onlineClient: [],
|
||
currentAccount: {},
|
||
account: [],
|
||
types: [
|
||
{ text: '新开', value: 1 },
|
||
{ text: '批量新开', value: 2 },
|
||
{ text: '续费', value: 3 },
|
||
{ text: '批量续费', value: 4 },
|
||
{ text: '老账号认证', value: 100 },
|
||
{ text: '测试', value: 200 }
|
||
],
|
||
expirdtypes: [
|
||
{ text: '全部', value: -100 },
|
||
{ text: '已过期', value: 0 },
|
||
{ text: '未过期', value: -2 },
|
||
{ text: '1天过期', value: 1 },
|
||
{ text: '3天过期', value: 3 },
|
||
{ text: '1周过期', value: 7 },
|
||
{ text: '已经到期1天内', value: -1 },
|
||
{ text: '已经到期3天内', value: -3 },
|
||
{ text: '已经到期3天以上', value: -4 }
|
||
],
|
||
typeFormat (row, column, cellValue, index) {
|
||
switch (cellValue) {
|
||
case 1:
|
||
return '新开'
|
||
case 2:
|
||
return '批量新开'
|
||
case 3:
|
||
return '续费'
|
||
case 4:
|
||
return '批量续费'
|
||
case 100:
|
||
return '老账号认证'
|
||
case 200:
|
||
return '测试'
|
||
}
|
||
return ''
|
||
}
|
||
}
|
||
},
|
||
created () {
|
||
this.$store.commit('setCurrentNav', '会员管理>>账号管理')
|
||
var userId = this.$route.query.userId
|
||
if (userId) this.searchModel.UserId = userId
|
||
this.get()
|
||
this.getCount()
|
||
// this.getProductWithPackage()
|
||
this.getProduct()
|
||
// eslint-disable-next-line camelcase
|
||
let user_info = this.$local.getUserByCache().Manager.RealName
|
||
// eslint-disable-next-line camelcase
|
||
if (userId) {
|
||
this.$api.post(this.$api.phpURL + 'logs/index/clickInfo', {
|
||
user: user_info,
|
||
operation: '点击客户信息产品账号',
|
||
record: '查看该客户的产品信息',
|
||
userid: userId
|
||
}).then(res => {})
|
||
}
|
||
},
|
||
methods: {
|
||
search () {
|
||
this.searchModel.PageIndex = 1
|
||
this.get()
|
||
this.getCount()
|
||
},
|
||
get () {
|
||
if (this.dateRange && this.dateRange.length === 2) {
|
||
this.searchModel.Btime = this.dateRange[0]
|
||
this.searchModel.Etime = this.dateRange[1]
|
||
}
|
||
if (this.dateRange1 && this.dateRange1.length === 2) {
|
||
this.searchModel.Bktime = this.dateRange1[0]
|
||
this.searchModel.Ektime = this.dateRange1[1]
|
||
}
|
||
this.$api
|
||
.get('course/v1/productaccount/page', this.searchModel)
|
||
.then(res => {
|
||
this.retData = res
|
||
})
|
||
},
|
||
|
||
getCount () {
|
||
if (this.dateRange && this.dateRange.length === 2) {
|
||
this.searchModel.Btime = this.dateRange[0]
|
||
this.searchModel.Etime = this.dateRange[1]
|
||
}
|
||
if (this.dateRange1 && this.dateRange1.length === 2) {
|
||
this.searchModel.Bktime = this.dateRange1[0]
|
||
this.searchModel.Ektime = this.dateRange1[1]
|
||
}
|
||
var that =this;
|
||
|
||
this.$api.post(this.$api.phpURL + 'manager/account/getAccountCount', this.searchModel).then(res => {
|
||
that.countConnect = res.data.sum
|
||
})
|
||
},
|
||
getProduct () {
|
||
this.loading = true
|
||
this.$api.get('course/v1/product/page', this.searchModel).then(res => {
|
||
res.Data.forEach(m => {
|
||
var product = {
|
||
label: m.Name,
|
||
value: m.Id
|
||
}
|
||
this.products.push(product)
|
||
})
|
||
this.loading = false
|
||
})
|
||
this.loading = false
|
||
},
|
||
getProductWithPackage () {
|
||
this.loading = true
|
||
this.$api.get('course/v1/product/ProductWithPackage').then(res => {
|
||
this.options = res.Data
|
||
var options = []
|
||
res.Data.forEach(m => {
|
||
var product = {
|
||
label: m.Product.Name,
|
||
value: m.Product.Id,
|
||
children: []
|
||
}
|
||
|
||
m.Packages.forEach(p => {
|
||
var pkg = {
|
||
label: p.Name,
|
||
value: p.Id
|
||
}
|
||
product.children.push(pkg)
|
||
})
|
||
options.push(product)
|
||
})
|
||
this.options = options
|
||
this.loading = false
|
||
})
|
||
},
|
||
del (item) {
|
||
var that = this
|
||
this.$confirm('确定删除？', '', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(_ => {
|
||
this.$api.post(this.$api.phpURL + 'manager/account/delete', {'id':item.Id}).then(res => {
|
||
this.$message.success('删除成功')
|
||
that.get()
|
||
})
|
||
})
|
||
},
|
||
dels () {
|
||
var that = this
|
||
if (this.account.length === 0) {
|
||
// eslint-disable-next-line no-undef
|
||
$this.$warn('请选账号')
|
||
return
|
||
}
|
||
var ids = this.account.map(m => m.Id)
|
||
this.$confirm('确定删除？', '', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning'
|
||
}).then(_ => {
|
||
this.$api
|
||
.post('course/v1/productaccount/Deletes',ids)
|
||
.then(res => {
|
||
that.searchModel.PageIndex = 1
|
||
that.get()
|
||
})
|
||
})
|
||
},
|
||
goAdd () {
|
||
this.$router.push({ name: 'addPackage', query: { optype: 1 } })
|
||
},
|
||
goEdit (item) {
|
||
this.$router.push({
|
||
name: 'addPackage',
|
||
query: { id: item.Id, optype: 2 }
|
||
})
|
||
},
|
||
batchSelectUser () {
|
||
if (this.account.length == 0) {
|
||
this.$warn('请选择账号')
|
||
return
|
||
}
|
||
this.$refs['userDrawer'].show()
|
||
},
|
||
selectUser (row) {
|
||
this.$refs.multipleTable.clearSelection()
|
||
this.$refs.multipleTable.toggleRowSelection(row)
|
||
this.$refs['userDrawer'].show()
|
||
},
|
||
handleSelectionChange (val) {
|
||
this.account = val
|
||
},
|
||
onSelect (item) {
|
||
var data = {
|
||
AccountIds: this.account.map(m => m.Id),
|
||
UserId: item.Id
|
||
}
|
||
this.$confirm('确定要迁移吗？').then(_ => {
|
||
this.$api.post('course/v1/productaccount/BindUser', data).then(res => {
|
||
this.get()
|
||
})
|
||
})
|
||
},
|
||
online (item) {
|
||
this.showOnlineDialog = true
|
||
this.loadingOnline = true
|
||
var params = {
|
||
productId: item.ProductId,
|
||
account: item.Account
|
||
}
|
||
this.onlineClient = []
|
||
this.$api
|
||
.get('course/v1/productaccount/OnLine', params)
|
||
.then(res => {
|
||
// eslint-disable-next-line no-unused-expressions
|
||
this.loadingOnline = false,
|
||
this.onlineClient = res.Data
|
||
// eslint-disable-next-line no-return-assign
|
||
this.onlineClient.forEach(m => m.info = item)
|
||
})
|
||
},
|
||
openLimit(item) {
|
||
this.$api.post(this.$api.phpURL + 'jinyou/jinyoudt/openTxLimit', {
|
||
account: item.Account,
|
||
productId:item.ProductId,
|
||
}).then(res => {
|
||
this.$message.success('设置成功')
|
||
this.get()
|
||
})
|
||
},
|
||
|
||
openLimitjt(item) {
|
||
this.$api.post(this.$api.phpURL + 'jinyou/jinyoujt/openTxLimit', {
|
||
account: item.Account,
|
||
productId:item.ProductId,
|
||
PackageName:item.PackageName
|
||
}).then(res => {
|
||
this.$message.success('设置成功')
|
||
this.get()
|
||
})
|
||
},
|
||
|
||
openLimitother(item) {
|
||
this.$api.post(this.$api.phpURL + 'product/OpenAccountLimit/openTxLimit', {
|
||
account: item.Account,
|
||
productId:item.ProductId
|
||
}).then(res => {
|
||
this.$message.success('设置成功')
|
||
this.get()
|
||
})
|
||
},
|
||
killout (item) {
|
||
var params = {
|
||
productId: item.info.ProductId,
|
||
id: item.Id
|
||
}
|
||
this.$api
|
||
.get('course/v1/productaccount/KillOut', params)
|
||
.then(res => {
|
||
if (res.Data) {
|
||
this.$info('离线成功')
|
||
}
|
||
this.online(item.info)
|
||
})
|
||
},
|
||
findaddr (item) {
|
||
this.$api.get(this.$api.phpURL + 'api/index/getIpAddress?ip='+item.LoginIP).then(res => {
|
||
alert(res.data);
|
||
})
|
||
},
|
||
dataExport () {
|
||
if (this.dateRange && this.dateRange.length === 2) {
|
||
this.searchModel.Btime = this.dateRange[0]
|
||
this.searchModel.Etime = this.dateRange[1]
|
||
}
|
||
if (this.dateRange1 && this.dateRange1.length === 2) {
|
||
this.searchModel.Bktime = this.dateRange1[0]
|
||
this.searchModel.Ektime = this.dateRange1[1]
|
||
}
|
||
if (this.searchModel.ProductIds.length>0){
|
||
this.searchModel.ProductId=parseInt(this.searchModel.ProductIds[0]);
|
||
}
|
||
|
||
if (this.searchModel.PackageNames.length>0){
|
||
this.searchModel.PackageName=this.searchModel.PackageNames[0];
|
||
}
|
||
this.$api.getDownloadFile('/course/v1/productaccount/Export', this.searchModel)
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
.red {
|
||
color: red;
|
||
}
|
||
</style>
|