ChuangHeng/src/views/modules/agent/user.vue

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