parent
b3b0c4028a
commit
604f678b31
@ -0,0 +1,98 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhangjiabao
|
||||||
|
* @Date: 2024-02-01 22:15:37
|
||||||
|
* @LastEditors: zhangjiabao
|
||||||
|
* @LastEditTime: 2024-02-01 22:15:43
|
||||||
|
* @FilePath: \luoo_manage_fe\src\views\comment\index.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div slot="header" class="card-header clearfix">
|
||||||
|
<span class="card-header-text">评论管理</span>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "",
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pagination-right {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.box-card {
|
||||||
|
min-height: 300px;
|
||||||
|
height: calc(100vh - 140px);
|
||||||
|
border-radius: 10px;
|
||||||
|
.el-card__header {
|
||||||
|
background-color: rgba(249, 249, 249, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .el-dialog {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.popup-dialog {
|
||||||
|
.el-dialog__header {
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #f5f5f5f5;
|
||||||
|
}
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
.el-dialog__footer {
|
||||||
|
border-top: solid;
|
||||||
|
border-top-width: thin;
|
||||||
|
border-top-color: rgb(233, 233, 233);
|
||||||
|
padding: 10px 20px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.in-card-form {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
}
|
||||||
|
.card-header-text {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,266 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zhangjiabao
|
||||||
|
* @Date: 2024-02-01 22:12:08
|
||||||
|
* @LastEditors: zhangjiabao
|
||||||
|
* @LastEditTime: 2024-02-02 01:14:57
|
||||||
|
* @FilePath: \luoo_manage_fe\src\views\user\index.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="app-container">
|
||||||
|
<el-card class="box-card">
|
||||||
|
<div slot="header" class="card-header clearfix">
|
||||||
|
<span class="card-header-text">用户管理</span>
|
||||||
|
</div>
|
||||||
|
<el-form :inline="true" class="in-card-form">
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px;"
|
||||||
|
placeholder="用户昵称/ID/手机号码"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px;"
|
||||||
|
placeholder="用户标识"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px;"
|
||||||
|
placeholder="用户状态"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px;"
|
||||||
|
placeholder="在线状态"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-input
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px;"
|
||||||
|
placeholder="在线状态"
|
||||||
|
></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-date-picker
|
||||||
|
placeholder="注册时间"
|
||||||
|
:editable="false"
|
||||||
|
:clearable="false"
|
||||||
|
value-format="yyyy-MM-dd"
|
||||||
|
size="medium"
|
||||||
|
style="width: 200px;"
|
||||||
|
>
|
||||||
|
</el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-search" type="primary" size="medium"
|
||||||
|
>查询</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button icon="el-icon-refresh-left" size="medium">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="text" icon="el-icon-s-operation">高级筛选</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<el-form :inline="true" class="in-card-form">
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-error"
|
||||||
|
type="primary"
|
||||||
|
size="medium"
|
||||||
|
@click="callNotFinished"
|
||||||
|
>停用用户</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-unlock"
|
||||||
|
type="primary"
|
||||||
|
size="medium"
|
||||||
|
@click="callNotFinished"
|
||||||
|
>启用用户</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-s-tools"
|
||||||
|
type="primary"
|
||||||
|
size="medium"
|
||||||
|
@click="callNotFinished"
|
||||||
|
>标识设置</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-upload2"
|
||||||
|
size="medium"
|
||||||
|
@click="callNotFinished"
|
||||||
|
>导出数据</el-button
|
||||||
|
>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<el-table
|
||||||
|
stripe
|
||||||
|
ref="userTable"
|
||||||
|
:data="table.data"
|
||||||
|
height="calc(100vh - 345px)"
|
||||||
|
v-loading="table.loading"
|
||||||
|
element-loading-text="加载中"
|
||||||
|
:header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
|
||||||
|
border
|
||||||
|
fit
|
||||||
|
@selection-change="handleTableSelectionChange"
|
||||||
|
>
|
||||||
|
<el-table-column type="selection" width="55"> </el-table-column>
|
||||||
|
<el-table-column label="UID" sortable="" prop="id"></el-table-column>
|
||||||
|
<el-table-column label="用户昵称"></el-table-column>
|
||||||
|
<el-table-column label="用户标识"></el-table-column>
|
||||||
|
<el-table-column label="用户状态"></el-table-column>
|
||||||
|
<el-table-column label="播放记录"></el-table-column>
|
||||||
|
<el-table-column label="收藏期刊"></el-table-column>
|
||||||
|
<el-table-column label="收藏单曲"></el-table-column>
|
||||||
|
<el-table-column label="评论记录"></el-table-column>
|
||||||
|
<el-table-column label="注册时间"></el-table-column>
|
||||||
|
<el-table-column label="在线状态"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="200">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button
|
||||||
|
plain
|
||||||
|
icon="el-icon-video-play"
|
||||||
|
type="primary"
|
||||||
|
size="mini"
|
||||||
|
@click="handleDetailClick(scope.row)"
|
||||||
|
>详情</el-button
|
||||||
|
>
|
||||||
|
<el-button plain icon="el-icon-edit" type="primary" size="mini"
|
||||||
|
>编辑</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "User",
|
||||||
|
components: {},
|
||||||
|
props: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
queryForm: {
|
||||||
|
data: {},
|
||||||
|
lastQuery: {}
|
||||||
|
},
|
||||||
|
table: {
|
||||||
|
loading: false,
|
||||||
|
selection: [],
|
||||||
|
data: [{ id: 1 }, { id: 2 }, { id: 3 }],
|
||||||
|
page: {}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
watch: {},
|
||||||
|
created() {},
|
||||||
|
mounted() {},
|
||||||
|
methods: {
|
||||||
|
/**
|
||||||
|
* 表格多选框
|
||||||
|
*/
|
||||||
|
handleTableSelectionChange(val) {
|
||||||
|
this.table.selection = val;
|
||||||
|
},
|
||||||
|
callNotFinished() {
|
||||||
|
this.$message.info("未开放这个功能");
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 表格详情
|
||||||
|
*/
|
||||||
|
handleDetailClick(row) {
|
||||||
|
this.$router.push(`/userManage/detail?id=${row.id}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.pagination-right {
|
||||||
|
text-align: right;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.box-card {
|
||||||
|
min-height: 300px;
|
||||||
|
height: calc(100vh - 140px);
|
||||||
|
border-radius: 10px;
|
||||||
|
.el-card__header {
|
||||||
|
background-color: rgba(249, 249, 249, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/deep/ .el-dialog {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
.popup-dialog {
|
||||||
|
.el-dialog__header {
|
||||||
|
border-top-left-radius: 5px;
|
||||||
|
border-top-right-radius: 5px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: #f5f5f5f5;
|
||||||
|
}
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 15px;
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
.el-dialog__footer {
|
||||||
|
border-top: solid;
|
||||||
|
border-top-width: thin;
|
||||||
|
border-top-color: rgb(233, 233, 233);
|
||||||
|
padding: 10px 20px 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.in-card-form {
|
||||||
|
height: 60px;
|
||||||
|
display: flex;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.clearfix:before,
|
||||||
|
.clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.card-header {
|
||||||
|
height: 23px;
|
||||||
|
}
|
||||||
|
.app-container {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
}
|
||||||
|
.card-header-text {
|
||||||
|
font-family: "Microsoft YaHei Bold", "Microsoft YaHei Regular",
|
||||||
|
"Microsoft YaHei", sans-serif;
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-size: 16px;
|
||||||
|
text-align: left;
|
||||||
|
line-height: 20px;
|
||||||
|
letter-spacing: normal;
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue