zx-admin-erp/src/views/accounts/ttAdWarrant/lookAccountButton.vue

<template>
    <el-button size="mini" type="text" icon="el-icon-view" @click="lookHangdle()">
        <span>查看账号</span>
        <el-dialog :title="'查看 ' + authUserId" :visible.sync="visible" width="900px" append-to-body v-if="visible">

            <el-row :gutter="10" class="mb8" align="middle">
                <el-col :span="10">
                    <el-input type="textarea" autosize v-model="queryParams.accountIds" placeholder="输入账号ID(多个，,)" />
                </el-col>
                <el-col :span="1.5">
                    <el-button type="cyan" icon="el-icon-search" @click="getList">搜索</el-button>
                </el-col>
                <el-col :span="1.5">
                    <el-button type="primary" icon="el-icon-sort" @click="putuser"
                        :disabled="adAccountList.length === 0">批量指派</el-button>
                </el-col>
            </el-row>
            <el-table :data="accountList" ref="multipleTable" :loading="loading" @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="50" align="center" />
                <el-table-column label="账号ID" prop="accountId" align="center" fixed width="150"
                    :show-overflow-tooltip="true" />
                <el-table-column label="账号名称" prop="accountName" align="center" :show-overflow-tooltip="true" width="300" />
                <el-table-column label="投手" prop="putUser" align="center" width="120" :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span v-if="scope.row.putUser">{{ scope.row.putUser.nickName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="投手ID" prop="putUserId" align="center" width="120" :show-overflow-tooltip="true" />
                <el-table-column label="运营账号" prop="operationUserList" align="center" width="120"
                    :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <span>{{ scope.row.operationUserList | filterUser }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="所属组" prop="groupName" align="center" width="120" :show-overflow-tooltip="true" />
                <el-table-column label="Enabled?" prop="enabled" align="center" width="80">
                    <template slot-scope="scope">
                        <span>{{ scope.row.enabled ? '可用' : '禁用' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="90">
                    <template slot-scope="scope">
                        <!-- 指派 -->
                        <put-user-button :accountId="scope.row.accountId" :authUserId="scope.row.authUserId"
                            :putUserId="scope.row.putUserId" @onChange="getList()" />
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize" @pagination="getList" />

            <putUser :visible="putuserVisible" :adAccountList="adAccountList" @onChange="getList()" @onClose="onClose()" />
        </el-dialog>
    </el-button>
</template>
<script>
import { getAdAccountList } from "@/api/accounts/ttAdapi";
import putUserButton from "./putUserButton.vue"
import putUser from "./putUser.vue"
export default {
    components: { putUserButton, putUser },
    data() {
        return {
            visible: false,
            loading: false,
            queryParams: {
                pageNum: 1,
                pageSize: 10,
            },
            accountList: [],
            total: 0,
            ids: [],
            adAccountList: [],
            putuserVisible: false
        }
    },
    filters: {
        filterUser(val) {
            if (val && val.length > 0) {
                return val.map(item => item.nickname).toString()
            }
            return '-1'
        }
    },
    props: {
        adAppId: {
            type: Number,
            default: null,
        },
        authUserId: {
            type: Number,
            default: null,
        }
    },
    methods: {
        onClose() {
            this.putuserVisible = false
            // this.$nextTick(() => {
            //     this.adAccountList = []
            //     this.ids = []
            //     this.$refs.multipleTable.clearSelection();
            // })
        },
        // 批量指派
        putuser() {
            this.putuserVisible = true
        },
        handleSelectionChange(selection) {
            console.log(selection)
            this.adAccountList = selection.map(item => ({ accountId: item.accountId, authUserId: this.authUserId }));
            this.ids = selection.map(item => item.accountId);
        },
        lookHangdle() {
            this.visible = true
            this.queryParams.pageNum = 1
            this.getList()
        },
        getList() {
            this.$nextTick(() => {
                this.adAccountList = []
                this.ids = []
                this.$refs.multipleTable.clearSelection();
            })

            if (this.adAppId && this.authUserId) {
                let params = { ...this.queryParams, adAppId: this.adAppId, authUserId: this.authUserId, accountIds: this.queryParams.accountIds ? this.queryParams.accountIds.split(/[,，\n\s]+/ig) : [] }
                this.loading = true
                getAdAccountList(params).then(res => {
                    this.loading = false
                    this.accountList = res.data.records
                    this.total = res.data.total
                }).catch(() => this.loading = false)
            }
        }
    }
}
</script>