2 changed files with 359 additions and 0 deletions
Split 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> |
|||