2 changed files with 359 additions and 0 deletions
Unified View
Diff Options
@ -0,0 +1,358 @@ |
|||||
|
<template> |
||||
|
<div style="padding:30px;"> |
||||
|
<!-- 搜索栏 --> |
||||
|
<div class="search"> |
||||
|
<el-form :inline="true"> |
||||
|
<el-form-item label="用户昵称:" style="margin-right:50px;"> |
||||
|
<el-input |
||||
|
v-model="queryParams.query.nickName" |
||||
|
clearable |
||||
|
placeholder="请输入剧本标题" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="用户编号:" style="margin-right:50px;"> |
||||
|
<el-input |
||||
|
v-model="queryParams.query.code" |
||||
|
clearable |
||||
|
placeholder="请输入工作室" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="联系电话:" style="margin-right:50px;"> |
||||
|
<el-input |
||||
|
v-model="queryParams.query.phonenumber" |
||||
|
clearable |
||||
|
placeholder="请输入标签" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="注册时间:" style="margin-right:50px;"> |
||||
|
<el-date-picker |
||||
|
v-model="time" |
||||
|
type="daterange" |
||||
|
range-separator="至" |
||||
|
start-placeholder="开始日期" |
||||
|
end-placeholder="结束日期" |
||||
|
format="yyyy-MM-dd" |
||||
|
value-format="yyyy-MM-dd" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
<div class="search-button"> |
||||
|
<el-button |
||||
|
size="medium" |
||||
|
type="primary" |
||||
|
style="height:36px;width:100px;" |
||||
|
@click="search" |
||||
|
>搜索</el-button |
||||
|
> |
||||
|
<el-button |
||||
|
@click="refresh" |
||||
|
size="medium" |
||||
|
style="margin-left:20px;height:36px;width:100px;" |
||||
|
>重置</el-button |
||||
|
> |
||||
|
</div> |
||||
|
</div> |
||||
|
<!-- 列表 --> |
||||
|
<div class="content"> |
||||
|
<el-table |
||||
|
v-loading="loading" |
||||
|
ref="singleTable" |
||||
|
:data="tableData" |
||||
|
border |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-table-column align="center" type="index" label="序号" width="50" /> |
||||
|
<el-table-column align="center" property="avatar" label="头像"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
<img style="width: 50px;height: 50px;" :src="scope.row.avatar" alt="" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" property="nickName" label="昵称" /> |
||||
|
<el-table-column align="center" property="code" label="编号"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
<span>{{ scope.row.code }}</span> |
||||
|
<i |
||||
|
style="float: right;font-size:14px;" |
||||
|
@click="handleEditCode(scope.row)" |
||||
|
class="el-icon-edit-outline" |
||||
|
></i> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
property="phonenumber" |
||||
|
label="联系电话" |
||||
|
/> |
||||
|
<el-table-column |
||||
|
align="center" |
||||
|
property="createTime" |
||||
|
label="注册时间" |
||||
|
/> |
||||
|
<el-table-column align="center" property="level" label="用户等级"> |
||||
|
<template slot-scope="scope"> |
||||
|
{{ levelormat(scope.row) }} |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" property="remark" label="备注"> |
||||
|
<template slot-scope="scope"> |
||||
|
<div> |
||||
|
<span>{{ scope.row.remark }}</span> |
||||
|
<i |
||||
|
style="float: right;font-size:14px;" |
||||
|
@click="handleEditRemark(scope.row)" |
||||
|
class="el-icon-edit-outline" |
||||
|
></i> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column align="center" label="操作"> |
||||
|
<template slot-scope="scope"> |
||||
|
<el-button type="text" size="mini" @click="handleEdit(scope.row)" |
||||
|
>修改等级</el-button |
||||
|
> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<pagination |
||||
|
v-show="total > 0" |
||||
|
:total="total" |
||||
|
:page.sync="queryParams.pageNum" |
||||
|
:limit.sync="queryParams.pageSize" |
||||
|
@pagination="queryUserInfo" |
||||
|
/> |
||||
|
</div> |
||||
|
<!-- 修改表单 --> |
||||
|
<el-dialog |
||||
|
:title="dialog.title" |
||||
|
:visible.sync="dialog.Visible" |
||||
|
center |
||||
|
width="350px" |
||||
|
> |
||||
|
<el-form :model="form" :inline="true"> |
||||
|
<div v-if="type == 'level'"> |
||||
|
<el-form-item label="客户昵称:" style="width:100%"> |
||||
|
<span>{{ data.nickName }}</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="客户等级:" style="width:100%"> |
||||
|
<span>{{ levelormat(data) }}</span> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="修改为:" style="width:100%"> |
||||
|
<el-select v-model="form.level" placeholder="请选择客户等级"> |
||||
|
<el-option |
||||
|
v-for="item in level" |
||||
|
:key="item" |
||||
|
:label="item.dictLabel" |
||||
|
:value="item.dictValue" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div v-if="type == 'code'"> |
||||
|
<el-form-item label="客户编号"> |
||||
|
<el-input v-model="form.code" clearable placeholder="请输入客户编号" /> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
<div v-if="type == 'remark'"> |
||||
|
<el-form-item label="备注"> |
||||
|
<el-input |
||||
|
style="width:100%" |
||||
|
type="textarea" |
||||
|
:rows="5" |
||||
|
v-model="form.remark" |
||||
|
placeholder="请输入备注" |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
</div> |
||||
|
</el-form> |
||||
|
<div slot="footer" class="dialog-footer"> |
||||
|
<el-button @click="dialog.Visible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="subMit">确 定</el-button> |
||||
|
</div> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script> |
||||
|
import { queryUserInfo, updateUserInfo } from "@/api/user/user.js"; |
||||
|
export default { |
||||
|
data() { |
||||
|
return { |
||||
|
loading: true, |
||||
|
queryParams: { |
||||
|
pageNum: 1, |
||||
|
pageSize: 15, |
||||
|
query: { |
||||
|
nickName: undefined, |
||||
|
code: undefined, |
||||
|
phonenumber: undefined, |
||||
|
userType: '01', |
||||
|
params: { |
||||
|
beginTime: undefined, |
||||
|
endTime: undefined |
||||
|
} |
||||
|
}, |
||||
|
}, |
||||
|
time: [], |
||||
|
total: 0, |
||||
|
tableData: [], |
||||
|
form: { |
||||
|
userId: "" |
||||
|
}, |
||||
|
dialog: { |
||||
|
Visible: false, |
||||
|
title: "" |
||||
|
}, |
||||
|
level: [], |
||||
|
data: {}, |
||||
|
type: "level" |
||||
|
}; |
||||
|
}, |
||||
|
created() { |
||||
|
this.getDicts("jbs_user_level").then(res => { |
||||
|
console.log(res, 412312); |
||||
|
this.level = res.data; |
||||
|
console.log(this.level, "字典"); |
||||
|
}); |
||||
|
}, |
||||
|
mounted() { |
||||
|
this.queryUserInfo(); |
||||
|
}, |
||||
|
methods: { |
||||
|
//获取用户 |
||||
|
async queryUserInfo() { |
||||
|
this.loading = true; |
||||
|
try { |
||||
|
let res = await queryUserInfo(this.queryParams); |
||||
|
if (res.code == 200) { |
||||
|
this.loading = false; |
||||
|
this.tableData = res.rows; |
||||
|
this.total = res.total; |
||||
|
} |
||||
|
} catch (err) { |
||||
|
console.log(err); |
||||
|
} |
||||
|
}, |
||||
|
//搜索 |
||||
|
search() { |
||||
|
if (this.time != null) { |
||||
|
if (this.time.length > 0) { |
||||
|
this.queryParams.query.params.beginTime = this.time[0]; |
||||
|
this.queryParams.query.params.endTime = this.time[1]; |
||||
|
} |
||||
|
} else { |
||||
|
this.time = []; |
||||
|
this.queryParams.query.params.beginTime = undefined; |
||||
|
this.queryParams.query.params.endTime = undefined; |
||||
|
} |
||||
|
console.log(this.time); |
||||
|
console.log(this.queryParams); |
||||
|
this.queryUserInfo() |
||||
|
}, |
||||
|
//重置 |
||||
|
refresh() { |
||||
|
this.time = [] |
||||
|
this.queryParams = { |
||||
|
pageNum: 1, |
||||
|
pageSize: 15, |
||||
|
query: { |
||||
|
nickName: undefined, |
||||
|
code: undefined, |
||||
|
phonenumber: undefined |
||||
|
}, |
||||
|
params: { |
||||
|
beginTime: undefined, |
||||
|
endTime: undefined |
||||
|
} |
||||
|
} |
||||
|
this.queryUserInfo() |
||||
|
}, |
||||
|
// 任务组名字典翻译 |
||||
|
levelormat(row, column) { |
||||
|
return this.selectDictLabel(this.level, row.level); |
||||
|
}, |
||||
|
// 编辑用户等级 |
||||
|
handleEdit(row) { |
||||
|
this.form = {} |
||||
|
this.dialog.Visible = true; |
||||
|
this.dialog.title = "修改用户等级"; |
||||
|
this.type = "level"; |
||||
|
this.form.userId = row.userId; |
||||
|
this.data = row; |
||||
|
}, |
||||
|
//编辑用户编号 |
||||
|
handleEditCode(row) { |
||||
|
this.form = {} |
||||
|
this.dialog.Visible = true; |
||||
|
this.dialog.title = "修改用户编号"; |
||||
|
this.form.userId = row.userId; |
||||
|
this.type = "code"; |
||||
|
this.data = row; |
||||
|
}, |
||||
|
//编辑客户备注 |
||||
|
handleEditRemark(row) { |
||||
|
this.form = {} |
||||
|
this.dialog.Visible = true; |
||||
|
this.dialog.title = "修改用户备注"; |
||||
|
this.form.userId = row.userId; |
||||
|
this.type = "remark"; |
||||
|
this.data = row; |
||||
|
}, |
||||
|
//提交表单 |
||||
|
async subMit() { |
||||
|
if(this.type == "level"){ |
||||
|
if(this.form.level == undefined || this.form.level == ''){ |
||||
|
this.$message({ |
||||
|
message: '请选择用户等级', |
||||
|
type: "error" |
||||
|
}); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
if(this.type == "code"){ |
||||
|
console.log(this.form.code,312321) |
||||
|
if(this.form.code == undefined || this.form.code == ''){ |
||||
|
this.$message({ |
||||
|
message: '请输入用户编号', |
||||
|
type: "error" |
||||
|
}); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
if(this.type == "remark"){ |
||||
|
if(this.form.remark == undefined || this.form.remark == ''){ |
||||
|
this.$message({ |
||||
|
message: '请输入用户备注', |
||||
|
type: "error" |
||||
|
}); |
||||
|
return false; |
||||
|
} |
||||
|
} |
||||
|
try { |
||||
|
let res = await updateUserInfo(this.form); |
||||
|
if (res.code == 200) { |
||||
|
this.$message.success("修改成功"); |
||||
|
this.dialog.Visible = false; |
||||
|
this.queryUserInfo(); |
||||
|
} |
||||
|
} catch (err) { |
||||
|
console.log(err); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.content { |
||||
|
background: #fff; |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.add-button { |
||||
|
margin-top: 15px; |
||||
|
} |
||||
|
.search-button { |
||||
|
display: flex; |
||||
|
} |
||||
|
</style> |
||||