qmx_page_admin/src/views/system/components/AssignUserGroup.vue

<template>
    <div>
        <table-lists style="min-height:auto" ref="tableLists" v-model="data" :filter="filter" :filterReset="0" requestApi="/system/auth/getUserGroup">
            <template slot="filterContent">
                <FormItem>
                    <Input type="text" size="large" v-model="filter.keyword" placeholder="搜索关键词"/>
                </FormItem>
            </template>
            <Table size="large" ellipsis :columns="columns" :data="data.lists['noAssign']" stripe height="270">
                <template slot-scope="{ row }" slot="op">
                    <Button size="small" type="success" @click="add(row)">加入</Button>
                </template>
            </Table>
        </table-lists>
        <Table size="large" ellipsis style="margin-top: 10px" :columns="columns" :data="data.lists['assign']" stripe height="270">
            <template slot-scope="{row,index}" slot="op">
                <Button size="small" type="error" @click="remove(row,index)">移出</Button>
            </template>
        </Table>
    </div>
</template>
<script>
    export default {
        name: 'AssignUserGroup',
        data() {
            return {
                data: {
                    lists: []
                },
                filter: {
                    keyword: "",
                    id: 0,
                },
                columns: [
                    {
                        type: 'ID',
                        key: 'id',
                        width: 70,
                        align: 'center'
                    },
                    {
                        title: '名称',
                        key: 'name',
                    },
                    {
                        title: '操作',
                        slot: 'op',
                        width: 140,
                    },
                ]
            }
        },
        props: {
            id: Number,
        },
        created() {
            this.filter.id = this.id;
        },
        methods: {
            remove(row) {
                this.$request('/system/auth/removeUserGroup').data({
                    id: this.id,
                    userGroupId: row.id
                }).success(() => {
                    this.reload();
                }).get();
            },
            add(row) {
                this.$request('/system/auth/assignUserGroup').data({
                    id: this.id,
                    userGroupId: row.id
                }).success(() => {
                    this.reload();
                }).get();
            },
            reload() {
                this.$refs.tableLists.reload(true);
                this.$emit('reload')
            }
        }
    }
</script>