lift-web/src/apps/mobile/views/payment-bank/user-account/index.vue

<template>
    <div class="common-container my-open-img">
        <TitleBar></TitleBar>
        <div class="main-container">
            <div class="search-container TableSelectMain">
                <el-form class="table-select-main" :model="searchForm" label-position="left">
                    <el-row :gutter="15">
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="昵称" v-model="searchForm.name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="真实名" v-model="searchForm.realName"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-input placeholder="手机号" v-model="searchForm.mobile"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item>
                                <el-select v-model="searchForm.userLevel" placeholder="app用户类型">
                                    <el-option
                                        v-for="item in customerTypeList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item class="displayRight">
                                <el-button type="primary" plain round @click="reset">重置</el-button>
                                <el-button type="primary" plain round @click="query">查询</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>

            <div class="SearchTitle">
                已选择
                <span class="subject-color">{{ ids.length }}</span> 项
            </div>
            <div class="MaintenanceTable">
                <el-table
                    ref="multipleTable"
                    :data="tableData"
                    style="width: 100%"
                    tooltip-effect="dark"
                    @selection-change="selectionChange"
                    class="OutTable"
                    border
                    v-loading="listLoading"
                >
                    <el-table-column type="selection"></el-table-column>
                    <el-table-column prop="name" label="昵称" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column
                        prop="realName"
                        label="真实名"
                        min-width="100px;"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column label="头像">
                        <template slot-scope="scope">
                            <!-- <span @click="imgOpen(scope.row.avatarUrl)"></span> -->
                            <el-image
                                :src="scope.row.avatarUrl | pathPipe"
                                style="width:50px;height:50px;cursor:pointer"
                                :preview-src-list="[scope.row.avatarUrl]"
                            ></el-image>
                            
                        </template>
                    </el-table-column>
                    <el-table-column prop="mobile" label="手机号" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column
                        prop="roleName"
                        label="app用户类型"
                        :show-overflow-tooltip="true"
                    ></el-table-column>
                    <el-table-column prop="companyName" label="关联企业" :show-overflow-tooltip="true"></el-table-column>
                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                type="primary"
                                plain
                                round
                                @click="detailsFormShow(scope.row.userId)"
                            >查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="pagenation">
                    <PageComponent
                        :total="total"
                        @pagination="handlePagination"
                        :pageSize.sync="page.pageSize"
                        :pageNum.sync="page.pageNum"
                    ></PageComponent>
                </div>
            </div>
        </div>
        <detailsDialog ref="detailsVisible"></detailsDialog>
    </div>
</template>
<script>
import TitleBar from '@/apps/mobile/components/common/TitleBar';
import detailsDialog from './components/detaisDialog';
import { queryPageUser, queryPageCompany, queryCustomerType } from '@/apps/mobile/api/operation/user/index';
// import { queryPage } from '@/apps/mobile/api/template-library-maintenance/index'; //获取公司列表接口
export default {
    components: {
        TitleBar,
        detailsDialog,
    },
    data() {
        return {
            searchForm: {},
            tableData: [],
            page: {
                pageNum: 1,
                pageSize: 5,
            },
            total: 5,
            listLoading: false,
            time: [],
            ids: [],
            customerTypeList: [],
        };
    },
    created() {
        this.queryListData();
        this.getCustomerType();
    },
    methods: {
        selectionChange(data) {
            this.ids = data.map(item => {
                return item.id;
            });
        },
        handlePagination(val) {
            this.page = val;
            this.queryListData();
        },
        detailsFormShow(id) {
            this.$refs.detailsVisible.open(id);
        },
        queryListData() {
            this.listLoading = true;
            let obj = {
                ...this.page,
                ...this.searchForm,
                sort: {
                    order: 'desc',
                    orderBy: 'create_time',
                },
            };
            queryPageUser(obj)
                .then(res => {
                    console.log('res.data.records---',res.data.records);
                    if(res.statusCode == "10"){
                        this.$router.replace("/login");
                    }
                    this.tableData = res.data.records;
                    this.total = res.data.total;
                    this.listLoading = false;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 查询
        query() {
            for (let k in this.searchForm) {
                if (this.searchForm[k] === '') {
                    delete this.searchForm[k];
                }
            }
            this.page.pageNum = 1;
            this.queryListData();
        },
        // 重置
        reset() {
            this.searchForm = {};
            this.page.pageNum = 1;
            this.queryListData();
        },
        getCustomerType() {
            queryCustomerType({})
                .then(res => {
                    this.customerTypeList = res.data.records || [];
                })
                .catch();
        },
        imgOpen(imgs){
            window.open(imgs);
        }
    },
};
</script>
<style lang="stylus" scoped>

.my-open-img{
    .TableSelectMain .el-date-editor.el-input.el-input--prefix.el-input--suffix.el-date-editor--date {
        width: 95%;
    }
    ::v-deep .el-image{
        img{
            pointer-events: auto;
        }

        .el-icon-circle-close {
            font-size: 50px;
            color: #fff;
        }
    }
}
</style>