supermarkpp/src/views/user/index.vue

<template>
    <section class="content">
        <h4>用户管理</h4>
        <el-divider></el-divider>
        <el-form label-width="40px" class="filter-form">
            <el-row>
                <el-col :span="4">
                    <el-form-item label="用户">
                        <el-input clearable @clear="getData()" v-model="queryParams.username" placeholder="请输入用户名/代码" size="mini"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="4">
                    <el-form-item label-width="10" style='margin-left:10px'>
                        <el-button type="primary" @click="getData" size="mini">筛选</el-button>
                        <el-button
                        type="primary"
                        plain
                        icon="el-icon-plus"
                        size="mini"
                        @click="handleAdd"
                        >新增用户</el-button>
                    </el-form-item>
                </el-col>
            </el-row>   
        </el-form>
        <el-table v-loading='loading' :data="list" style="width: 100%;margin-top:10px;" height="50vh">
                <el-table-column align="center" prop="usercode" label="代码"/>
                <el-table-column align="center"  prop="username" label="用户名"/>
                <el-table-column align="center"  prop="date" label="绑定">
                    <template slot-scope="scope">
                        <span v-if='scope.row.is_bind'>已绑定</span>
                         <span v-else>未绑定</span>
                    </template>
                </el-table-column>
                <!-- <el-table-column align="center"  prop="date" label="资产"/> -->
                <el-table-column align="center"  prop="date" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="title='编辑用户',open=true,form=scope.row" size="mini" type="warning">编辑</el-button>
                        <el-button @click="del(scope.row.id)" size="mini" type="danger">删除</el-button>
                    </template>
                </el-table-column>
        </el-table>
        <Page
            ref="pageButton"
            :current="form.page"
            :page_size="form.page_size"
            :total="total"
            @pageChange="gopage"
        />
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input clearable v-model="form.username" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item label="用户代码" prop="usercode">
                    <el-input clearable v-model="form.usercode" placeholder="请输入代码"></el-input>
                </el-form-item>
                <el-form-item label="用户代码" v-if='form.id'>
                    <el-select v-model="form.is_bind" placeholder="请选择比赛分组">
                        <el-option label="已绑定" :value="1"></el-option>
                        <el-option label="未绑定" :value="0"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="open=false">取 消</el-button>
            </div>
        </el-dialog>
    </section>
</template>
<script>
import Page from "../../components/Page";
export default {
    components: {
        Page,
    },
    data(){
        return{
            loading:false,
            queryParams:{
                page:1
            },
            form:{},
            list:[{},{}],
            total:0,
            title:'新增用户',
            open:false,
            rules:{
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        del(id) {
        this.$confirm("删除用户会删除相关数据,确定删除吗?", "提示", {
            type: "warning",
        }).then(() => {
            this.$api.delUser({ id: id }).then((res) => {
            this.$message({
                message: "删除成功",
                type: "success",
            });
            this.getData();
            });
        });
        },
        gopage(size) {
            if (size) {
                this.queryParams.page_size = size;
            }
            this.queryParams.page = this.$refs.pageButton.page;
            this.getData();
        },
        getData(){
            this.loading = true;
            this.$api.getUserList(this.queryParams).then(res=>{
                this.list=res.data.data.list
                this.total = res.data.data.total;
                this.loading = false;
            })
        },
        handleAdd(){
            this.open=true;
            this.title='新增用户';
            this.form={}
        },
        /** 提交按钮 */
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                if (this.form.id != null) {
                    this.$api.editUser(this.form).then(res => {
                    if(res.data.code==0){
                        this.msgSuccess("成功!");
                        this.open = false;
                        this.getData();
                    }else{
                        this.msgError(res.data.message);
                    }
                    
                    });
                } else {
                    this.$api.addUser(this.form).then(res => {
                    if(res.data.code==0){
                        this.msgSuccess("成功!");
                        this.open = false;
                        this.getData();
                    }else{
                        this.msgError(res.data.message);
                    }
                    });
                }
        }
      });
    },
    },
    created(){
       this.getData() 
    }
}
</script>