Gong-Ying-Lian-API/app/admin/view/user/group_user/index.html

<template>
    <el-card shadow="never">
        <el-tabs type="card" v-model="tabs" @tab-change="tabChange">
            <el-tab-pane name="all">
                <template #label>
                    录入人员
                </template>
            </el-tab-pane>
            <el-tab-pane name="group">
                <template #label>
                    组员管理
                </template>
            </el-tab-pane>
        </el-tabs>
        <yun-table :columns="columns" ref="yuntable" @render="onTableRender" toolbar="refresh" :auth="" :extend="extend">
        </yun-table>
    </el-card>
</template>
<script>
    import table from "@components/Table.js";
    export default {
        components: {
            'YunTable': table
        },
        data: {
            extend: {
                index_url: 'user/group_user/index',
                // add_url: 'user/group_user/add?add_type=2',
                // edit_url: 'user/group_user/edit',
                // del_url: 'user/group_user/del',
                // multi_url: 'user/group_user/multi',
                download_url: 'user/group_user/download',
                // import_url: 'user/group_user/import',
            },
            columns: [
                {
                    checkbox: true, selectable: function (row, index) {
                        //可以根据业务需求返回false让某些行不可选中
                        return true;
                    }
                },
                { field: "id", title: "ID", operate: false },
                // { field: "group_name", title: "组名", operate: false, visible: false },
                // { field: "username", title: "账号" },

                { field: "manage_nickname", title: "管理员", visible: false },
                { field: "nickname", title: "录入人员姓名" },
                { field: 'avatar', title: __('头像'), formatter: Yunqi.formatter.image, operate: false },
                // { field: "email", title: "电子邮箱" },
                { field: "mobile", title: "手机号" },
                {
                    field: 'role', title: __('角色'), sortable: true, operate: 'selects', formatter(value, row, index) {
                        var role = "";
                        if (value.indexOf("1") > -1) role = role + "录入员";
                        if (value.indexOf("2") > -1) role = role + "-库管";
                        if (value.indexOf("3") > -1) role = role + "-记账";
                        return role;
                    }
                },
                { field: "id_card", title: "身份证号" },
                { field: 'sex', title: __('性别'), width: 100, searchList: { 1: __('男'), 2: __('女') }, operate: false },
                // { field: "jointime", title: "加入时间", operate: "daterange", formatter: Yunqi.formatter.datetime },
                { field: "status", title: "状态", operate: "select", searchList: { normal: "正常", hidden: "隐藏" } },
                { field: "createtime", title: "创建时间", sortable: true, operate: "daterange", formatter: Yunqi.formatter.datetime },
                { field: "updatetime", title: "更新时间", visible: false, operate: "daterange", formatter: Yunqi.formatter.datetime },
                {
                    field: 'operate',
                    fixed: 'right',
                    title: __('操作'),
                    width: 150,
                    action: {
                        list: {
                            tooltip: true,
                            icon: 'fa fa-list',
                            type: 'info',
                            text: __('小组成员'),
                            method: 'group_list'
                        },
                    },
                    visible: false 
                }
            ],
            tabs: 'all'
        },
        //页面加载完成时执行
        onLoad: function (query) {
            
        },
        //页面初始显示或在框架内显示时执行
        onShow: function () {

        },
        //页面在框架内隐藏时执行
        onHide: function () {

        },
        //页面在框架内关闭时执行
        onUnload: function () {

        },
        methods: {
            tabChange(e) {
                this.tabs = e
                let group_name_visible = true
                let type = 2;
                if (this.tabs == 'all') {
                    group_name_visible = false
                    this.extend.add_url = 'user/group_user/add?add_type=2'
                } else if (this.tabs == 'group') {
                    type = 1
                    this.extend.add_url = 'user/group_user/add?add_type=1'
                }


                let columns = this.columns;
                for (let i in columns) {
                    if (columns[i].field == 'manage_nickname') {
                        columns[i].visible = group_name_visible;
                    }
                    if (columns[i].field == 'nickname') {
                        columns[i].visible = !group_name_visible;
                    }


                    if (columns[i].field == 'operate') {
                        columns[i].visible = group_name_visible;
                    }


                }
                this.columns = columns
                this.$nextTick(() => {
                    this.$refs.yuntable.reset();
                });
                this.getList(type)
            },
            getList(type) {
                let that = this;
                this.extend.index_url = 'user/group_user/index?type=' + type
                Yunqi.ajax.get(this.extend.index_url, {}).then(res => {
                    this.$refs.yuntable.reload();
                })
            },
            group_list: function (row) {
                let that = this;
                Yunqi.api.open({
                    url: 'user/group_user/group_list?pid=' + row.id,
                    width: 1000,
                    title: __(row.group_name),
                    icon: 'fa fa-list',
                    close: function (r) {
                        that.$refs.yuntable.reload();
                    }
                });
            },
            onTableRender: function (list) {
                //表格渲染完成后执行
                /**
                 * table常用方法
                 * this.$refs.yuntable.reset();//重新渲染整个组件，当columns修改时，需要重新渲染表格才能生效，可以执行该方法。
                 * this.$refs.yuntable.reload();//保持当前的page，重新获取数据
                 * this.$refs.yuntable.submit();//返回第一页，重新获取数据
                 * this.$refs.yuntable.expandAllTree();//树形表格展开所有节点
                 * this.$refs.yuntable.expandTree(topid);//树形表格展开指定节点
                 */
            }
        }
    }
</script>
<style>
</style>