|
|
@@ -0,0 +1,264 @@
|
|
|
+<template>
|
|
|
+ <div class="agent_page">
|
|
|
+ <div class="title">用户管理</div>
|
|
|
+ <div class="query adfacjb">
|
|
|
+ <div class="left adfac">
|
|
|
+ <el-input placeholder="请输入姓名搜索" prefix-icon="el-icon-search" v-model="queryParams.name" style="width: 300px;"></el-input>
|
|
|
+ <el-select v-model="queryParams.company" placeholder="所属公司" style="width: 200px;margin-left: 23px;"></el-select>
|
|
|
+ <el-select v-model="queryParams.sortType" placeholder="排序方式" style="width: 200px;margin-left: 23px;"></el-select>
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <el-button type="primary" icon="el-icon-plus" @click="userShow=true">添加用户</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-table :data="userList" border cell-class-name="vertical-top-cell" v-loading="loading" empty-text="暂无用户" max-height="578px" style="margin-top: 24px;">
|
|
|
+ <el-table-column label="序号" width="50">
|
|
|
+ <template #default="scope">
|
|
|
+ {{ scope.$index + 1 }}
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="姓名" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="性别" prop="bbb">
|
|
|
+ <template #default="{ row }"></template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column label="出生日期" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="手机号码" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="用户类型" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="教练资格类型" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="教练时长" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="教练特长" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="创建时间" prop="aaa"></el-table-column>
|
|
|
+ <el-table-column label="操作" width="200">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button link type="text" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
|
|
|
+ <el-button link type="text" size="mini" @click="handleStudent(scope.row)">教练学员</el-button>
|
|
|
+ <el-button link type="text" size="mini" @click="handleDelete(scope.row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ <el-row style="display: flex;justify-content: center;">
|
|
|
+ <el-pagination
|
|
|
+ @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ :current-page="queryParams.page"
|
|
|
+ :page-sizes="[5, 10, 20, 50]"
|
|
|
+ :page-size="10"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ :total="total"
|
|
|
+ v-show="total > 0">
|
|
|
+ </el-pagination>
|
|
|
+ </el-row>
|
|
|
+ <el-drawer :title="userTitle" :visible.sync="userShow" append-to-body size="60%" @close="userShow=false">
|
|
|
+ <el-form ref="userRef" :model="userForm" :rules="userRules" label-width="120px" style="width: 95%;margin: 0 auto;">
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="姓名" prop="aaa">
|
|
|
+ <el-input v-model="userForm.aaa" placeholder="请输入姓名" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="性别" prop="bbb">
|
|
|
+ <el-select v-model="userForm.bbb" placeholder="请选择性别" style="width: 100%;"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="出生日期" prop="ccc">
|
|
|
+ <el-select v-model="userForm.ccc" placeholder="请选择出生日期" style="width: 100%;"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="手机号码" prop="ddd">
|
|
|
+ <el-input type="phone" v-model="userForm.ddd" placeholder="请输入手机号码" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="教练资格类型" prop="eee">
|
|
|
+ <el-input type="phone" v-model="userForm.eee" placeholder="请输入教练资格类型" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="用户类型" prop="fff">
|
|
|
+ <el-select v-model="userForm.fff" placeholder="请选择用户类型" style="width: 100%;"></el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="教练特长" prop="ggg">
|
|
|
+ <el-input v-model="userForm.ggg" placeholder="请输入教练特长" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="教练时长" prop="hhh">
|
|
|
+ <el-input v-model="userForm.hhh" placeholder="请输入教练时长" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
+ <div class="demo-drawer__footer" style="display: flex;justify-content: end;">
|
|
|
+ <el-button :loading="buttonLoading" type="primary" @click="submitForm">保 存</el-button>
|
|
|
+ <el-button @click="cancel" style="margin-right: 5%;">取 消</el-button>
|
|
|
+ </div>
|
|
|
+ </el-drawer>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup name="">
|
|
|
+ import { ref, getCurrentInstance } from 'vue'
|
|
|
+ const { proxy } = getCurrentInstance();
|
|
|
+
|
|
|
+ const queryParams = ref({
|
|
|
+ page:1,
|
|
|
+ limit:10,
|
|
|
+ name:'',
|
|
|
+ company:'',
|
|
|
+ sortType:''
|
|
|
+ })
|
|
|
+ const userList = ref([1])
|
|
|
+ const loading = ref(false)
|
|
|
+ const total = ref(0)
|
|
|
+ const userShow = ref(false)
|
|
|
+ const userTitle = ref('添加用户')
|
|
|
+ const userForm = ref({
|
|
|
+ aaa:'',
|
|
|
+ bbb:'',
|
|
|
+ ccc:'',
|
|
|
+ ddd:'',
|
|
|
+ eee:'',
|
|
|
+ fff:'',
|
|
|
+ ggg:'',
|
|
|
+ hhh:''
|
|
|
+ })
|
|
|
+ const userRules = ref({
|
|
|
+ aaa: [
|
|
|
+ { required: true, message: '请输入姓名', trigger: 'blur' },
|
|
|
+ ],
|
|
|
+ bbb: [
|
|
|
+ { required: true, message: '请选择性别', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ ccc: [
|
|
|
+ { required: true, message: '请选择出生日期', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ ddd: [
|
|
|
+ { required: true, message: '请输入手机号码', trigger: 'blur' },
|
|
|
+ { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不正确', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ eee: [
|
|
|
+ { required: true, message: '请输入教练资格类型', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ fff: [
|
|
|
+ { required: true, message: '请选择用户类型', trigger: 'change' }
|
|
|
+ ],
|
|
|
+ ggg: [
|
|
|
+ { required: true, message: '请输入教练特长', trigger: 'blur' }
|
|
|
+ ],
|
|
|
+ hhh: [
|
|
|
+ { required: true, message: '请输入教练时长', trigger: 'blur' }
|
|
|
+ ]
|
|
|
+ })
|
|
|
+ const buttonLoading = ref(false)
|
|
|
+ const submitForm = () => {
|
|
|
+ proxy.$refs.userRef.validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ buttonLoading.value = true;
|
|
|
+ // addOrUpdateUser(userForm.value).then(()=>{
|
|
|
+ // buttonLoading.value = false;
|
|
|
+ // userShow.value = false;
|
|
|
+ // })
|
|
|
+ } else {
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ const cancel = () => {
|
|
|
+ userShow.value = false;
|
|
|
+ proxy.$refs.userRef.resetFields();
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const getList = async () => {
|
|
|
+ let query = {...queryParams.value};
|
|
|
+ loading.value = true;
|
|
|
+ // const res = await listOrder(query);
|
|
|
+ // userList.value = res.data.list;
|
|
|
+ // total.value = res.data.total;
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
+ const handleSizeChange = (e)=>{
|
|
|
+ queryParams.value.limit = e;
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+ const handleCurrentChange = (e)=>{
|
|
|
+ queryParams.value.page = e;
|
|
|
+ getList();
|
|
|
+ }
|
|
|
+
|
|
|
+ const handleEdit = (row) => {
|
|
|
+ userTitle.value = '编辑用户';
|
|
|
+ Object.keys(row).forEach((key)=>{
|
|
|
+ if (key === 'createTime') {
|
|
|
+ userForm.value[key] = proxy.$moment(row[key]).format('YYYY-MM-DD HH:mm');
|
|
|
+ } else {
|
|
|
+ userForm.value[key] = row[key];
|
|
|
+ }
|
|
|
+ })
|
|
|
+ userShow.value = true;
|
|
|
+ }
|
|
|
+ const handleDelete = (row) => {
|
|
|
+ proxy.$confirm('是否确认删除该条数据?', '警告', {
|
|
|
+ confirmButtonText: '确定',
|
|
|
+ cancelButtonText: '取消',
|
|
|
+ type: 'warning'
|
|
|
+ }).then(() => {
|
|
|
+ // deleteUser(row.id).then(()=>{
|
|
|
+ // getList();
|
|
|
+ // })
|
|
|
+ })
|
|
|
+ }
|
|
|
+ const handleStudent = (row) => {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ getList();
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+ .agent_page{
|
|
|
+ padding: 20px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ .title{
|
|
|
+ font-family: PingFang-SC, PingFang-SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #111111;
|
|
|
+ line-height: 16px;
|
|
|
+ }
|
|
|
+ .query{
|
|
|
+ margin-top: 24px;
|
|
|
+ .left{
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ :v-deep .el-dialog__wrapper{
|
|
|
+ background: rgba(0,0,0,.3) !important;
|
|
|
+ }
|
|
|
+ ::v-deep .el-dialog__title{
|
|
|
+ font-weight: bold !important;
|
|
|
+ }
|
|
|
+ ::v-deep .el-dialog{
|
|
|
+ margin-top: 15vh !important;
|
|
|
+ }
|
|
|
+ ::v-deep .el-drawer__header span{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #1D2129;
|
|
|
+ line-height: 22px;
|
|
|
+ }
|
|
|
+</style>
|
