eduerpos_ui_manage/src/components/page/admin/Usermanage.vue

<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 用户管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" icon="add" @click="addUser">新增用户</el-button>
            </div>
            <div class="handle-box">
               <!-- <el-select v-model="status" placeholder="状态" class="handle-select mr10">
                    <el-option key="" label="全部" value=""></el-option>
                    <el-option key="1" label="上架" value="1"></el-option>
                    <el-option key="2" label="下架" value="0"></el-option>  
                </el-select>  -->
                <el-input v-model="goodsName" placeholder="商品名称" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="getDataList">查询</el-button>
            </div>
            <dptable :columns="columns" :dataSource="tableData" :options="options" :fetch="getDataList" :pagination="pagination" @row-click="handleRowClick" @selection-change="handleSelectionChange"/>
        </div>
    </div>  
</template>

<script>
import dptable from '../../common/Dptable'

export default {
    components: {
        dptable
    },
    data(){
        return {
            //=>>需要自己根据业务进行修改
            // 访问数据的地址
            url: '/api/goodsManage/showGoodsList',
            delurl: '/api/goodsManage/deleteGoods',
            // 检索条件
            goodsName: '',
         //   status: '',
            // 数据列的定义
            columns: [
                {
                    prop: 'goodsId', label: '商品ID', width: 60
                    // render: (row) => {
                    //     if (row.status == 0) {
                    //         return (
                    //             <span style="color: blue" >{row.goodsId}</span>
                    //         );
                    //     } else {
                    //         return (
                    //             <span>{row.goodsId}</span>
                    //         );
                    //     }
                    // }
                },
                {
                    text: true, prop: 'goodsName', label: '商品名称', align: 'left', width: 300
                //   render: (row, index) => { 
                //     return (
                //       <span style="color: blue" onClick={e => this.handleClick(e, row)}>{row.title}</span>
                //     )
                //   }
                },
                {
                    prop: 'goodsTypeId', label: '类型ID', align: 'right', width: 160, formatter: (row, column) => {
                        return Number(row[column.prop]).toFixed(2);
                    }
                },
                {
                    prop: 'createDate', label: '发布时间', width: 200, formatter: (row, column) => {
                        // 自行添加数据格式化操作
                        var date = row[column.prop];//row.createDate;
                        if (date == undefined) {
                            return "";
                        }
                        return this.$moment(date).format("YYYY-MM-DD HH:mm:ss");
                    }
                },
                {
                    prop: 'status', label: '状态', width: 60, formatter: (row, column) => {
                        // 自行添加数据格式化操作
                        return row[column.prop] == 1 ? '上架' : '下架';// row.status == 1 ? '上架' : '下架';
                    // if(row.status == 1){
                    //      return row.status == '上架';
                    //  }else if(row.status == 0){
                    //       return row.status == '下架';
                    //  }
                    }
                },
                {
                    button: true, label: '操作',
                    group: [{
                        // you can props => type size icon disabled plain
                        name: '编辑',
                        type: 'warning',
                        icon: 'el-icon-edit',
                        plain: true,
                        onClick: (row, index) => { // 箭头函数写法的 this 代表 Vue 实例 
                            console.log(row, index);
                            this.enditRow(row.goodsId);
                        }
                    },
                    {
                        name: '删除',
                        type: 'danger',
                        icon: 'el-icon-delete',
                        disabled: false,
                        onClick: row => {
                            console.log(row);
                            this.deleteRow(row.goodsId);
                        }
                        // onClick(row) { // 这种写法的 this 代表 group 里的对象
                        //     this.disabled = true;
                        //     console.log(this);
                        // }
                    }]
                }
                //=>>需要自己根据业务进行修改
            ],
            tableData: [
                
            ],
            pagination: {
                resultCount: 0,
                currentPage: 1,
                pageSize: 20
            },
            options: {
                mutiSelect: true,// 是否有前部的多选框
                index: false, // 显示序号， 多选则 mutiSelect
                initTable: true, // 是否一挂载就加载数据
            }
        }
    },
    methods: {
        handleClick(e, row){
            //transform-vue-jsx 的nativeOnClick 失效 , 所以采用 event.cancelBubble 控制点击事件的冒泡... 如果点击事件不影响你的点击行事件，可以不传
            e.cancelBubble = true // 停止冒泡，否则会触发 row-click
            console.log(row)
        },
        getDataList() {
            this.options.loading = true;
            const querystring = require('querystring');
            this.$axios.post(this.url, querystring.stringify({
                //goodsId: "1",
            //    status: this.status,
                goodsName: this.goodsName, 
                pageSize: this.pagination.pageSize,
                currentPage: this.pagination.currentPage
            })).then(res => {
                console.log(res);
                const { list, page } = res.data;
                this.tableData = res.data.list;
                this.pagination.resultCount = page.resultCount;
                this.pagination.currentPage = page.currentPage;
                this.options.loading = false;
            }).catch((error) => {
                console.log(error)
                this.options.loading = false
            })
        },
        handleRowClick(row, event, column){ // 点击行的事件，同理可以绑定其他事件
            console.log('click row:',row, event, column)
        },
        handleSelectionChange(selection){
            console.log(selection)
        },
        addUser() {
            this.$router.push({
                path: '/admin/updateuser',
                params: {
                    id: 1
                }
            })
        },
        // 编辑行
        enditRow(key) {
            this.$router.push({
                path: '/admin/updateuser',
                query: {
                    goodsId: key
                    
                }
            });
            //this.getDataList();
        },
        // 删除行
        deleteRow(key) {
            const querystring = require('querystring');
            this.$axios.post(this.delurl, querystring.stringify({
                goodsId: key
            })).then(res => {
                console.log(res);
                if (res.data.rtnCode == 0) {
                    this.$message.success("删除成功！");
                } else {
                    this.$message.error(res.data.rtnMsg);
                }
                this.getDataList();
            }).catch((error) => {
                console.log(error)
                this.$message.error("数据处理异常，请与管理员联系！");
            })
            
        }
    }
}
</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
    .table{
        width: 100%;
        font-size: 14px;
    }
    .red{
        color: #ff0000;
    }
    .mr10{
        margin-right: 10px;
    }
</style>