hx-mini-web/src/views/manage/user/components/table.vue

<template>
    <scTable ref="table" :apiObj="list.apiObj" :params="searchKey" @selectionChange="selectionChange" row-key="id">
        <el-table-column type="selection" width="50" fixed="left"></el-table-column>
        <el-table-column label="账户昵称" width="150" fixed="left" prop="truename">
            <template #default="scope">
                <span v-if="scope.row.truename">{{ scope.row.truename }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="账户ID" width="150" prop="user_id"></el-table-column>
        <el-table-column label="登录账号" prop="username" width="150">
            <template #default="scope">
                <span v-if="scope.row.username">{{ scope.row.username }}</span>
                <span class="status-danger" v-else>未设置</span>
            </template>
        </el-table-column>
        <el-table-column label="账户类型" prop="type" width="120" align="center">
            <template #default="scope">
                <div class="status-success" v-if="scope.row.type==1"><sc-status-indicator type="success"></sc-status-indicator> 系统管理员</div>
                <div class="status-danger" v-if="scope.row.type==2"><sc-status-indicator type="danger"></sc-status-indicator> 代理账号</div>
                <div class="status-info" v-if="scope.row.type==3"><sc-status-indicator type="info"></sc-status-indicator> 店铺账号</div>
            </template>
        </el-table-column>
        <el-table-column label="手机号码" prop="mobile" width="150">
            <template #default="scope">
                <span v-if="scope.row.mobile">{{ scope.row.mobile }}</span>
                <span class="status-danger" v-else>-</span>
            </template>
        </el-table-column>
        <el-table-column label="登录时间" prop="login_at" width="180">
            <template #default="scope">
                {{scope.row.login_at?scope.row.login_at:'-'}}
            </template>
        </el-table-column>
        <el-table-column label="登录IP" prop="login_ip" width="180">
            <template #default="scope">
                {{scope.row.login_ip?scope.row.login_ip:'-'}}
            </template>
        </el-table-column>
        <el-table-column label="登录次数" prop="login_num" width="180"></el-table-column>
        <el-table-column label="注册时间" prop="create_at" width="180"></el-table-column>
        <el-table-column label="注册IP" prop="create_ip" width="180"></el-table-column>
        <el-table-column label="状态" prop="status" width="120" align="center">
            <template #default="scope">
                <el-popconfirm title="确定要启用或冻结该账号吗？" @confirm="table_state(scope.row)">
                    <template #reference>
                        <div class="status-success" v-if="scope.row.status==1"><sc-status-indicator type="success"></sc-status-indicator> 正常</div>
                        <div class="status-danger" v-else><sc-status-indicator type="danger"></sc-status-indicator> 禁用</div>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
        <el-table-column label="操作" width="160" align="right" fixed="right">
            <template #default="scope">
                <el-button-group>
                    <el-button text type="warning" size="small" @click="table_passwd(scope.row)">修改密码</el-button>
                    <el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row, scope.$index)">
                        <template #reference>
                            <el-button text type="danger" size="small">删除</el-button>
                        </template>
                    </el-popconfirm>                    
                </el-button-group>
            </template>
        </el-table-column>
    </scTable>
    <passwd ref="userPasswd"></passwd>
</template>

<script>
import passwd from "@/views/manage/user/password";
export default {
    components: {
        passwd
    },
    props: {
        type: { type: String, default: "1" }
    },
    data(){
        return {
            list: {
                apiObj: this.$API.user.list
            },
            dataSelect:[],
            dataSelectFull:[],
            searchKey:{}
        }
    },
    methods: {
        async table_state(data){
            var status = 1;
            if (data.status == 1) {
                status = 0;
            }
            var resp = await this.$API.user.state.post({"id":data.id});
            if (resp.code == 0) {
                this.$message.warning(resp.msg)
                return false;
            }
            this.$message.success(resp.msg)
            this.$refs.table.refresh()
        },
        refresh(){
            this.$refs.table.refresh()
        },
        upData(data){
            this.$refs.table.upData(data)
        },
        handleSuccess(){
            this.$refs.table.refresh()
        },
        sortChange(event){
            if (event.order) {
                var data = {
                    "field":event.prop,
                    "order":event.order
                }
                this.$refs.table.upData(data)
            } else {
                this.$refs.table.reload(this.searchKey)
            }
            return ;
        },
        selectionChange(event){
            this.dataSelect = [];
            var arr = [];
            var arrCompany = [];
            event.forEach(function(val,index){
                arr[index] = val.id;
                arrCompany[index] = val;
            });
            this.dataSelectFull = arrCompany;
            this.dataSelect = arr;
            this.$emit("success",this.dataSelect);
            this.$emit("successFull",this.dataSelectFull);
        },
        table_passwd(row){
            this.$nextTick(() => {
                this.$refs.userPasswd.open("edit").setData(row)
            })
        },
    }
}
</script>