|
|
@@ -1,33 +1,215 @@
|
|
|
<!-- -->
|
|
|
<template>
|
|
|
-<div class='tab7'>
|
|
|
- <div class="top">
|
|
|
-
|
|
|
- </div>
|
|
|
-</div>
|
|
|
+ <div class="tab7">
|
|
|
+ <div class="top">
|
|
|
+ <el-form
|
|
|
+ :model="ruleForm"
|
|
|
+ ref="ruleForm"
|
|
|
+ label-width="100px"
|
|
|
+ class="demo-ruleForm"
|
|
|
+ >
|
|
|
+ <el-form-item label="注册时间：">
|
|
|
+ <el-date-picker
|
|
|
+ style="width: 300px"
|
|
|
+ v-model="time"
|
|
|
+ type="daterange"
|
|
|
+ range-separator="-"
|
|
|
+ start-placeholder="开始日期"
|
|
|
+ end-placeholder="结束日期"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ <span class="userName">用户账号：</span>
|
|
|
+ <el-input
|
|
|
+ placeholder="请输入"
|
|
|
+ v-model="ruleForm.searchKey"
|
|
|
+ style="width: 300px; margin-right: 50px"
|
|
|
+ ></el-input>
|
|
|
+ <el-button @click="inquire">查 询</el-button>
|
|
|
+ <el-button @click="reset">重 置</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ <div class="addUser">
|
|
|
+ <el-button type="primary" @click="$router.push('/layout/tab7Edit')"
|
|
|
+ >新 增</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- 表格 -->
|
|
|
+ <div class="table">
|
|
|
+ <el-table :data="tableData" style="width: 100%">
|
|
|
+ <el-table-column label="序号" width="80">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ {{ scope.$index + (ruleForm.pageNum - 1) * ruleForm.pageSize + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="userName" label="用户账号"> </el-table-column>
|
|
|
+ <el-table-column prop="phone" label="联系电话"> </el-table-column>
|
|
|
+ <el-table-column prop="sexTxt" label="性别"> </el-table-column>
|
|
|
+ <el-table-column prop="createTime" label="注册时间"> </el-table-column>
|
|
|
+ <el-table-column label="启用状态">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-switch :disabled='scope.row.id===1' @change='change($event,scope.row.id)' v-model="tableData[scope.$index].isEnabled" :active-value='1' :inactive-value="0"></el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="操作" width="230">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="text" @click="edit(row)" v-if="row.id!==1">编 辑</el-button>
|
|
|
+ <el-button type="text" style="color: #b6242b" @click="delUser(row.id)" v-if="row.id!==1">删 除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </div>
|
|
|
+ <!-- 分页 -->
|
|
|
+ <div class="paging">
|
|
|
+ <span class="zong">共 {{ total }} 条</span>
|
|
|
+ <el-pagination
|
|
|
+ layout="sizes,prev,pager,next,jumper"
|
|
|
+ :total="total"
|
|
|
+ :page-sizes="[15, 30, 45, 60]"
|
|
|
+ :current-page="ruleForm.pageNum"
|
|
|
+ @current-change="currentChange"
|
|
|
+ @size-change="sizeChange"
|
|
|
+ >
|
|
|
+ </el-pagination>
|
|
|
+ </div> </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import { userList, userEditStatus, userRemoves } from '@/apis/tab7'
|
|
|
export default {
|
|
|
name: 'tab7',
|
|
|
components: {},
|
|
|
data () {
|
|
|
return {
|
|
|
-
|
|
|
+ total: 0,
|
|
|
+ time: '',
|
|
|
+ ruleForm: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ searchKey: ''
|
|
|
+ },
|
|
|
+ tableData: []
|
|
|
}
|
|
|
},
|
|
|
computed: {},
|
|
|
+ // 监控data中的数据变化
|
|
|
+ watch: {
|
|
|
+ time (val) {
|
|
|
+ this.handleSelect(val)
|
|
|
+ }
|
|
|
+ },
|
|
|
methods: {
|
|
|
-
|
|
|
+ // 点击编辑
|
|
|
+ edit (val) {
|
|
|
+ this.$router.push({
|
|
|
+ path: '/layout/tab7Edit',
|
|
|
+ query: val
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 点击删除
|
|
|
+ delUser (id) {
|
|
|
+ this.$confirm('确定删除吗?', '提示', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ await userRemoves(id)
|
|
|
+ this.$message.success('删除成功!')
|
|
|
+ this.userList(this.ruleForm)
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.$message.info('已取消删除')
|
|
|
+ })
|
|
|
+ },
|
|
|
+ // 分页器方法
|
|
|
+ currentChange (val) {
|
|
|
+ // console.log('当前页改变了', val)
|
|
|
+ this.ruleForm.pageNum = val
|
|
|
+ this.userList(this.ruleForm)
|
|
|
+ },
|
|
|
+ sizeChange (val) {
|
|
|
+ // console.log('条数改变了', val)
|
|
|
+ this.ruleForm.pageNum = 1
|
|
|
+ this.ruleForm.pageSize = val
|
|
|
+ this.userList(this.ruleForm)
|
|
|
+ },
|
|
|
+ // 点击查询
|
|
|
+ inquire () {
|
|
|
+ this.ruleForm.pageNum = 1
|
|
|
+ this.userList(this.ruleForm)
|
|
|
+ },
|
|
|
+ // 点击重置
|
|
|
+ reset () {
|
|
|
+ this.ruleForm = {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 15,
|
|
|
+ searchKey: ''
|
|
|
+ }
|
|
|
+ this.time = ''
|
|
|
+ this.userList(this.ruleForm)
|
|
|
+ },
|
|
|
+ // 点击启用-停用账户
|
|
|
+ async change (val, id) {
|
|
|
+ const res = await userEditStatus(id, val)
|
|
|
+ if (res.code === 0) {
|
|
|
+ this.$message.success('操作成功')
|
|
|
+ this.userList(this.ruleForm)
|
|
|
+ } else this.$message.warning(res.msg)
|
|
|
+ },
|
|
|
+ // 封装获取列表方法
|
|
|
+ async userList (data) {
|
|
|
+ const res = await userList(data)
|
|
|
+ this.tableData = res.data.records
|
|
|
+ this.total = res.data.total
|
|
|
+ this.tableData.forEach((v) => {
|
|
|
+ if (v.sex === 0) v.sexTxt = '男'
|
|
|
+ else if (v.sex === 1) v.sexTxt = '女'
|
|
|
+ })
|
|
|
+ // console.log(998, res.data.records)
|
|
|
+ },
|
|
|
+ // 时间处理----------------
|
|
|
+ handleSelect (e) {
|
|
|
+ const date = []
|
|
|
+ for (const i in e) {
|
|
|
+ date.push(this.gettime(e[i]))
|
|
|
+ }
|
|
|
+ this.ruleForm.startTime = date[0]
|
|
|
+ if (date[1]) {
|
|
|
+ this.ruleForm.endTime = date[1].replace('00:00:00', '23:59:59')
|
|
|
+ }
|
|
|
+ if (e === null) this.ruleForm.endTime = ''
|
|
|
+ },
|
|
|
+ gettime (data) {
|
|
|
+ const value =
|
|
|
+ data.getFullYear() +
|
|
|
+ '-' +
|
|
|
+ this.checkTime(data.getMonth() + 1) +
|
|
|
+ '-' +
|
|
|
+ this.checkTime(data.getDate()) +
|
|
|
+ ' ' +
|
|
|
+ this.checkTime(data.getHours()) +
|
|
|
+ ':' +
|
|
|
+ this.checkTime(data.getMinutes()) +
|
|
|
+ ':' +
|
|
|
+ this.checkTime(data.getSeconds())
|
|
|
+ return value
|
|
|
+ },
|
|
|
+ checkTime (i) {
|
|
|
+ if (i < 10) {
|
|
|
+ i = '0' + i
|
|
|
+ }
|
|
|
+ return i
|
|
|
+ }
|
|
|
},
|
|
|
// 生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created () {
|
|
|
-
|
|
|
+ this.userList(this.ruleForm)
|
|
|
},
|
|
|
// 生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted () {
|
|
|
-
|
|
|
- },
|
|
|
+ mounted () {},
|
|
|
beforeCreate () {}, // 生命周期 - 创建之前
|
|
|
beforeMount () {}, // 生命周期 - 挂载之前
|
|
|
beforeUpdate () {}, // 生命周期 - 更新之前
|
|
|
@@ -38,6 +220,33 @@ export default {
|
|
|
}
|
|
|
</script>
|
|
|
<style lang='less' scoped>
|
|
|
-//@import url(); 引入公共css类
|
|
|
-
|
|
|
+.tab7 {
|
|
|
+ .top {
|
|
|
+ position: relative;
|
|
|
+ border-bottom: 1px solid black;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ .userName {
|
|
|
+ margin-left: 50px;
|
|
|
+ }
|
|
|
+ .addUser {
|
|
|
+ position: absolute;
|
|
|
+ right: 20px;
|
|
|
+ top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.el-table__body-wrapper{
|
|
|
+ max-height: 580px;
|
|
|
+ overflow-y: auto;
|
|
|
+ }
|
|
|
+ .paging {
|
|
|
+ width: auto;
|
|
|
+ display: flex;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ right: 50px;
|
|
|
+ .zong {
|
|
|
+ margin-right: 20px;
|
|
|
+ margin-top: 4px;
|
|
|
+ }
|
|
|
+ }}
|
|
|
</style>
|
