You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
452 lines
15 KiB
452 lines
15 KiB
<template> |
|
<div class="wrap" v-loading="loading"> |
|
<el-card shadow="hover" class="mgb20"> |
|
<div> |
|
<div class="flex-center mgb20"> |
|
<p class="hr_tag"></p> |
|
<span>筛选</span> |
|
</div> |
|
<div style="overflow: auto;"> |
|
<el-form label-width="80px"> |
|
<el-row> |
|
<el-col :span="5"> |
|
<el-form-item label="省份"> |
|
<el-select v-model="form.provinces" clearable placeholder="请选择省份" @change="getCity" |
|
@clear="clearprovince()"> |
|
<el-option v-for="(item, index) in provinceList" :key="index" :label="item.provinceName" |
|
:value="item.provinceId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="5"> |
|
<el-form-item label="城市"> |
|
<el-select v-model="form.city" clearable placeholder="请选择城市" :disabled="form.provinces ? false : true" |
|
@clear="clearcity()" @change="initData"> |
|
<el-option v-for="(item, index) in cityList" :key="index" :label="item.cityName" |
|
:value="item.cityId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="5"> |
|
<el-form-item label="来源"> |
|
<el-select v-model="form.platformId" clearable placeholder="请选择来源" @change="initData"> |
|
<el-option v-for="item in platformList" :key="item.value" :label="item.label" |
|
:value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="5"> |
|
<el-form-item label="学校"> |
|
<el-select v-model="form.schoolId" clearable filterable placeholder="请选择学校" @change="initData"> |
|
<el-option v-for="(item, index) in schoolList" :key="index" :label="item.schoolName" |
|
:value="item.schoolId"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> |
|
<!-- <el-col :span="5"> |
|
<el-form-item label="角色"> |
|
<el-select v-model="form.accountRole" clearable placeholder="请选择角色" @change="initData"> |
|
<el-option v-for="(item,index) in accountRoleList" :key="index" :label="item.name" :value="item.value"></el-option> |
|
</el-select> |
|
</el-form-item> |
|
</el-col> --> |
|
</el-row> |
|
<el-row> |
|
<el-col :span="8"> |
|
<el-form-item label="创建时间" class="userRadio"> |
|
<el-radio-group v-model="form.month"> |
|
<el-radio v-for="(item, index) in dateList" :key="index" :label="item.id" border>{{ item.name |
|
}}</el-radio> |
|
</el-radio-group> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item label="自定义"> |
|
<el-date-picker v-model="form.date" align="right" unlink-panels type="daterange" |
|
start-placeholder="开始日期" end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" |
|
clearable></el-date-picker> |
|
</el-form-item> |
|
</el-col> |
|
<el-col :span="6"> |
|
<el-form-item> |
|
<el-input placeholder="支持手机号,姓名" prefix-icon="el-icon-search" v-model="form.keyword" |
|
clearable></el-input> |
|
</el-form-item> |
|
</el-col> |
|
</el-row> |
|
|
|
</el-form> |
|
</div> |
|
</div> |
|
</el-card> |
|
|
|
<el-card shadow="hover" class="card"> |
|
<div class="flex-between mgb20"> |
|
<div class="flex-center"> |
|
<p class="hr_tag"></p> |
|
<span>用户列表</span> |
|
</div> |
|
<div> |
|
<el-button type="primary" round @click="delAllSelection" v-auth>批量删除</el-button> |
|
</div> |
|
</div> |
|
<el-table :data="userData" class="table" ref="table" header-align="center" |
|
@selection-change="handleSelectionChange" row-key="userId"> |
|
<el-table-column type="selection" width="55" align="center" :reserve-selection="true"></el-table-column> |
|
<el-table-column type="index" width="100" label="序号" align="center"></el-table-column> |
|
<el-table-column prop="userName" label="姓名" align="center"></el-table-column> |
|
<el-table-column prop="phone" label="手机号" align="center"></el-table-column> |
|
<el-table-column prop="schoolName" label="学校" align="center"></el-table-column> |
|
<el-table-column prop="platformName" label="来源" align="center"></el-table-column> |
|
<el-table-column prop="createTime" label="创建时间" width="150" align="center"></el-table-column> |
|
<el-table-column prop="logInNumber" label="登录次数" align="center"></el-table-column> |
|
<el-table-column prop="lastLoginTime" label="最近登录时间" align="center"></el-table-column> |
|
<el-table-column label="操作" width="300" align="center"> |
|
<template slot-scope="scope"> |
|
<el-button type="text" @click="toDetail(scope.row, 1)" v-auth>查看</el-button> |
|
<el-button v-if="scope.row.userId !== 1" type="text" @click="handleDelete(scope.row)" v-auth>删除</el-button> |
|
<el-button type="text" @click="resetPassword(scope.row)" v-auth>重置密码</el-button> |
|
<!-- displayState： 0：禁用，1：启用；2：至少有一个状态为禁用（变颜色），展示为启用状态 --> |
|
<el-switch v-if="scope.row.userId !== 1" :key="loading" v-model="scope.row.enable" :active-value="1" |
|
:inactive-value="0" :class="{ error: scope.row.displayState === 2 }" style="margin: 0 10px 0 5px" |
|
:active-text="scope.row.enable ? '启用' : '禁用'" |
|
:active-color="scope.row.displayState === 2 ? '#ff552c' : '#062c87'" |
|
:inactive-color="scope.row.displayState === 2 ? '#ff552c' : '#dcdfe6'" |
|
@change="switchOff($event, scope.row, scope.$index)" v-auth="'/user:启用'"></el-switch> |
|
</template> |
|
</el-table-column> |
|
</el-table> |
|
<div class="pagination"> |
|
<el-pagination background @current-change="currentChange" :current-page="page" layout="total, prev, pager, next" |
|
:total="totals"> |
|
</el-pagination> |
|
</div> |
|
</el-card> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import Setting from '@/setting' |
|
import qs from 'qs' |
|
export default { |
|
name: 'user', |
|
data () { |
|
return { |
|
platformId: Setting.platformId, |
|
searchTimer: null, |
|
form: { |
|
countries: '中国', |
|
provinces: +this.$route.query.provinces || '', |
|
city: +this.$route.query.provinces || '', |
|
platformId: +this.$route.query.platformId || '', |
|
schoolId: +this.$route.query.schoolId || '', |
|
accountRole: '', |
|
keyword: this.$route.query.keyword || '', |
|
date: this.$route.query.startTime ? [this.$route.query.startTime, this.$route.query.endTime] : [], |
|
startTime: this.$route.query.startTime || '', |
|
endTime: this.$route.query.endTime || '', |
|
month: +this.$route.query.month || '' |
|
}, |
|
accountRoleList: [{ |
|
name: '超级管理员', |
|
value: 1 |
|
}, |
|
{ |
|
name: '管理员', |
|
value: 13 |
|
}, |
|
{ |
|
name: '教师', |
|
value: 14 |
|
}, |
|
{ |
|
name: '学生', |
|
value: 4 |
|
}], |
|
countryList: [{ |
|
name: '中国' |
|
}], |
|
provinceList: this.$store.state.provinceList, |
|
cityList: [], |
|
schoolList: [], |
|
userData: [], |
|
dateList: [{ |
|
id: '', |
|
name: '不限' |
|
}, |
|
{ |
|
id: 3, |
|
name: '3个月内' |
|
}, |
|
{ |
|
id: 6, |
|
name: '6个月内' |
|
}, |
|
{ |
|
id: 9, |
|
name: '9个月内' |
|
}, |
|
{ |
|
id: 12, |
|
name: '1年内' |
|
}], |
|
platformList: [ |
|
{ |
|
value: '', |
|
label: '不限' |
|
}, |
|
{ |
|
value: 1, |
|
label: '职站' |
|
}, |
|
{ |
|
value: 2, |
|
label: '数据前瞻' |
|
}, |
|
], |
|
page: +this.$route.query.page || 1, |
|
pageSize: 10, |
|
totals: 0, |
|
multipleSelection: [], |
|
loading: false, |
|
|
|
}; |
|
}, |
|
watch: { |
|
'form.keyword': function (val) { |
|
clearTimeout(this.searchTimer) |
|
this.searchTimer = setTimeout(() => { |
|
this.initData() |
|
}, 500) |
|
}, |
|
'form.month': function (val) { |
|
if (val) { |
|
let unit = 24 * 60 * 60 * 1000 |
|
this.form.date = [this.formatDate('yyyy-MM-dd', new Date(new Date().getTime() - unit * 30 * val)), this.formatDate('yyyy-MM-dd', new Date(new Date().getTime() + unit))] |
|
} else { |
|
this.form.date = [] |
|
} |
|
}, |
|
'form.date': function (val) { |
|
if (val && val.length) { |
|
this.form.startTime = val[0] |
|
this.form.endTime = val[1] |
|
} else { |
|
this.form.startTime = '' |
|
this.form.endTime = '' |
|
} |
|
this.initData() |
|
} |
|
}, |
|
mounted () { |
|
const { query } = this.$route |
|
if (query.page) { |
|
this.$router.push('/user').catch(() => { }) |
|
} |
|
|
|
this.getData() |
|
this.getSchoolData(); |
|
}, |
|
methods: { |
|
getData () { |
|
this.loading = true |
|
this.$post(this.api.userManagementList, { |
|
countries: this.form.countries, |
|
provinceId: this.form.provinces, |
|
cityId: this.form.city, |
|
platformId: this.form.platformId, |
|
schoolId: this.form.schoolId, |
|
month: this.form.month, |
|
creationTime: this.form.startTime, |
|
endTime: this.form.endTime, |
|
roleId: this.form.accountRole, |
|
searchContent: this.form.keyword, |
|
pageNum: this.page, |
|
pageSize: this.pageSize |
|
}).then(({ page }) => { |
|
const { records, total } = page |
|
records.map(e => { |
|
e.enable = e.displayState |
|
if (e.enable === 2) { |
|
e.enable = 1 |
|
} |
|
}) |
|
this.userData = records |
|
this.totals = total |
|
this.loading = false |
|
}).catch(res => { |
|
this.loading = false |
|
}) |
|
}, |
|
initData () { |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
// 清除省份 |
|
clearprovince () { |
|
this.form.city = '', |
|
this.form.schoolId = '' |
|
}, |
|
// 获取城市 |
|
getCity () { |
|
this.clearprovince() |
|
this.getCityData() |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
getCityData () { |
|
let data = { |
|
provinceId: this.form.provinces |
|
} |
|
this.$get(this.api.queryCity, data).then(res => { |
|
this.cityList = res.list |
|
}).catch(res => { }) |
|
}, |
|
// 清除城市 |
|
clearcity () { |
|
this.form.schoolId = '' |
|
}, |
|
// 获取学校/客户名称 |
|
getSchool () { |
|
this.clearcity() |
|
this.getSchoolData() |
|
this.page = 1 |
|
this.getData() |
|
}, |
|
getSchoolData () { |
|
let data = { |
|
provinceId: "", |
|
cityId: "" |
|
} |
|
this.$get(this.api.querySchoolData, data).then(res => { |
|
this.schoolList = res.list |
|
}).catch(res => { }) |
|
}, |
|
currentChange (val) { |
|
this.page = val |
|
this.$router.push(`user?page=${val}`) |
|
this.getData() |
|
}, |
|
toDetail (row, detail) { |
|
this.$store.commit('setReferrer', `${this.$route.path}?${qs.stringify(this.form)}&page=${this.page}`) |
|
this.$router.push(`/adduser?userId=${row.userId}${detail ? '&show=1' : ''}`) |
|
}, |
|
handleDelete (row) { |
|
this.$confirm('确定要删除吗？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
this.$post(this.api.delUserAccountsByNakadai, row.accountIds).then(res => { |
|
this.$message.success('删除成功') |
|
this.getData() |
|
}).catch(res => { }) |
|
}).catch(() => { }) |
|
}, |
|
resetPassword (row) { |
|
this.$confirm(`重置后的密码为：${Setting.initialPassword}，确定重置？`, '提示', { |
|
}).then(() => { |
|
this.$get(this.api.resetPwd, { |
|
newPwd: Setting.initialPassword, |
|
userId: row.userId, |
|
}).then(res => { |
|
if (res.message == 'success') { |
|
this.$message.success('重置成功') |
|
} else { |
|
this.$message.error('重置失败') |
|
} |
|
}).catch(res => { }) |
|
}).catch(() => { }) |
|
}, |
|
// 调禁用启用接口 |
|
switchUser (val, row) { |
|
this.$get(this.api.updateAccountAllEnable, { |
|
id: row.userId, |
|
isEnable: val, |
|
phone: row.phone |
|
}).then(res => { |
|
this.$message.success(val ? '启用成功' : '禁用成功') |
|
this.getData() |
|
}).catch(res => { }) |
|
}, |
|
// 禁用启用 |
|
switchOff (val, row) { |
|
// 如果是启用，则要判断，禁用不用判断 |
|
if (val) { |
|
// 判断是否能够一键启用（数据平台） |
|
this.$post(`${this.api.oneClickEnableVerification}?accountIds=${row.accountIds}`).then(({ result }) => { |
|
this.switchUser(val, row) |
|
}).catch((res) => { |
|
// 弹框提示是否要继续启用，点了是，才需要继续启用 |
|
this.$confirm(res.message, '提示', { |
|
type: 'info', |
|
closeOnClickModal: false |
|
}).then(() => { |
|
this.switchUser(val, row) |
|
}).catch(() => { |
|
// 选了否，还原成禁用 |
|
row.isEnable = 0 |
|
}) |
|
}) |
|
} else { |
|
this.switchUser(val, row) |
|
} |
|
}, |
|
handleSelectionChange (val) { |
|
this.multipleSelection = val; |
|
}, |
|
delAllSelection () { |
|
if (this.multipleSelection.length) { |
|
let ids = [] |
|
this.multipleSelection.map(e => { |
|
ids.push(...e.accountIds) |
|
}) |
|
this.$confirm('确定要删除选中用户吗？', '提示', { |
|
type: 'warning' |
|
}).then(() => { |
|
this.$post(this.api.delUserAccountsByNakadai, ids).then(res => { |
|
this.$message.success('删除成功') |
|
this.$refs.table.clearSelection() |
|
this.getData() |
|
}).catch(res => { |
|
|
|
}) |
|
}).catch(() => { }) |
|
} else { |
|
this.$message.error('请先选择客户 ！') |
|
} |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
.el-form { |
|
min-width: 1800px; |
|
} |
|
|
|
.card { |
|
min-height: calc(100vh - 380px); |
|
} |
|
|
|
.el-form-item { |
|
margin-bottom: 0; |
|
|
|
/deep/.el-radio { |
|
width: 87px; |
|
text-align: center; |
|
|
|
.el-radio__label { |
|
padding-left: 0; |
|
} |
|
} |
|
|
|
.el-radio.is-bordered+.el-radio.is-bordered { |
|
margin-left: 0; |
|
} |
|
} |
|
|
|
/deep/.error { |
|
.el-switch__label.is-active { |
|
color: #ff552c; |
|
} |
|
} |
|
</style>
|
|
|