用户管理页面画写

src/router/index.js

@@ -57,6 +57,7 @@ export const moduleRoutes = {
     { path: '/agentKnowledge', component: () => import('@/views/modules/agent/knowledge'), name: 'agentKnowledge', meta: { title: '知识库管理', isTab: false } },
     { path: '/agentKnowledgeAdd', component: () => import('@/views/modules/agent/knowledge/add'), name: 'agentKnowledgeAdd', meta: { title: '创建知识库', isTab: false } },
     { path: '/agentKnowledgeCategory', component: () => import('@/views/modules/agent/knowledgeCategory'), name: 'agentKnowledgeCategory', meta: { title: '类目管理', isTab: false } },
+    { path: '/agentUser', component: () => import('@/views/modules/agent/user'), name: 'agentUser', meta: { title: '用户管理', isTab: false } },
   ]
 }
 

src/views/modules/agent/user.vue

@@ -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>