zx-admin-erp/src/views/accounts/account/index.vue

<template>
    <div class="app-container" ref='appFull' style="background: #fff;">
        <el-form :model="queryParams" ref="queryParams" v-show="showSearch" :inline="true">
            <el-form-item>
                <el-select v-model="queryParams.userId" size="small" placeholder="选择用户" filterable style="width: 140px" clearable>
                    <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-select v-model="queryParams.resourceTag" size="small" :disabled="!queryParams.userId" placeholder="角色标签" filterable style="width: 100px" clearable>
                    <el-option v-for="(item, index) in tagAll" :key="index" :label="item.resourceTag" :value="item.resourceTag" />
                </el-select>
            </el-form-item>
            <el-form-item label="" prop="resourceName">
                <el-input v-model="queryParams.resourceName" placeholder="请输入资源名称" clearable size="small" style="width: 150px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="resourceKey">
                <el-input v-model="queryParams.resourceKey" placeholder="请输入资源标识" clearable size="small" style="width: 150px" @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="" prop="resourceGroupId">
                <el-select v-model="queryParams.resourceGroupId" placeholder="资源分组" clearable filterable style="width: 140px" size="small">
                    <el-option v-for="dict in groupingData" :key="dict.id" :label="dict.groupName" :value="dict.id" />
                </el-select>
            </el-form-item>
            <el-form-item prop="resourceType">
                <el-select style="width: 140px" v-model="queryParams.resourceType" placeholder="资源类型" filterable clearable size="small">
                    <el-option v-for="item in resourceTypes" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="resourceType">
                <el-select v-model="queryParams.businessGroupId" size="small" placeholder="选择项目组" filterable style="width: 140px" clearable>
                    <el-option v-for="item in teamsList" :key="item.id" :label="item.businessGroupName" :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增资源</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" icon="el-icon-refresh" size="mini" @click="handleRefresh">刷新服务器缓存</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" icon="el-icon-delete-solid" size="mini" :disabled="delIds.length == 0" @click="handleDel">删除</el-button>
            </el-col>
            <!-- <el-col :span="1.5">
                <el-button
                    type="info"
                    icon="el-icon-upload2"
                    size="mini"
                    @click="handleImport"
                    >导入</el-button>
            </el-col> -->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-table 
            :data="accountList" 
            size="mini" 
            v-loading="loading"
            @selection-change="handleSelectionChange"
        >
            <el-table-column type="selection" width="50" align="center" fixed="left"/>
            <el-table-column label="资源名称" prop="resourceName" :show-overflow-tooltip="true" width="120" fixed="left"/>
            <el-table-column label="资源标识" prop="resourceKey" :show-overflow-tooltip="true" width="150" fixed="left"/>
            <el-table-column label="项目组" prop="businessGroupInfo" width="80" :show-overflow-tooltip="true" align="center">
                <template slot-scope="scope" v-if="scope.row.businessGroupInfo">
                    <span>{{scope.row.businessGroupInfo.businessGroupName}}</span>
                </template>
            </el-table-column>
            <el-table-column prop="operUserInfo" width="100" align="center" label="运营">
                <template slot-scope="scope" v-if="scope.row.operUserInfo">
                    <el-popover :width="200" trigger="hover" placement="top" :title="scope.row.operUserInfo.nickname">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                            电话：{{ scope.row.operUserInfo.phone }}
                        </div>
                        <div slot="reference">{{ scope.row.operUserInfo.nickname }}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="putUserInfo" width="100" align="center" label="投手">
                <template slot-scope="scope" v-if="scope.row.putUserInfo">
                    <el-popover :width="200" trigger="hover" placement="top" :title="scope.row.putUserInfo.nickname">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                        电话：{{ scope.row.putUserInfo.phone }}
                        </div>
                        <div slot="reference">{{ scope.row.putUserInfo.nickname }}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="userRelationList" width="100" align="center" label="审查">
                <template slot-scope="scope" v-if="scope.row.userRelationList">
                    <el-popover :width="200" trigger="hover" placement="top" :title="scope.row.userRelationList.nickName">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                        电话：{{ scope.row.userRelationList.phone }}
                        </div>
                        <div slot="reference">{{ scope.row.userRelationList.nickName }}</div>
                    </el-popover>
                </template>
            </el-table-column> -->
            <el-table-column label="资源类型" prop="resourceType" align="center" width="150">
                <template slot-scope="scope">
                    <el-tag size="mini" :type="resourceTypes[0].type" v-if="scope.row.resourceType === 0">{{resourceTypes[0].label}}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[1].type" v-if="scope.row.resourceType === 1">{{resourceTypes[1].label}}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[2].type" v-if="scope.row.resourceType === 3">{{resourceTypes[2].label}}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[3].type" v-if="scope.row.resourceType === 10">{{resourceTypes[3].label}}</el-tag>
                    <el-tag size="mini" :type="resourceTypes[4].type" v-if="scope.row.resourceType === 20">{{resourceTypes[4].label}}</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="所属分组" prop="groupInfo" width="120" align="center">
                <template slot-scope="scope">
                    <span v-if="scope.row.groupInfo">{{scope.row.groupInfo.groupName}}</span>
                    <span v-else></span>
                </template>
            </el-table-column>
            <el-table-column label="投放状态" prop="putStatus" width="80" align="center">
                <template slot-scope="scope">
                    <el-tag type="warning" v-if="scope.row.putStatus === 'wait'">待投放</el-tag>
                    <el-tag type="success" v-else-if="scope.row.putStatus === 'ing'">投放中</el-tag>
                    <el-tag type="info" v-else-if="scope.row.putStatus === 'stop'">停投</el-tag>
                    <el-tag type="danger" v-else-if="scope.row.putStatus === 'destroy'">账号已注销</el-tag>
                    <div v-else>--</div>
                </template>
            </el-table-column>
            <el-table-column label="投放渠道" prop="putChannel" align="center" width="80" />
            <el-table-column label="期数"  prop="periodInfo" width="100" align="center">
                <template slot-scope="scope" v-if="scope.row.periodInfo">
                    <div>
                        {{ scope.row.periodInfo.period }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="当前书籍" prop="bookInfo" width="120" align="center">
                <template slot-scope="scope" v-if="scope.row.bookInfo">
                    <el-popover width="200" trigger="hover" placement="top" :title="scope.row.bookInfo.bookName">
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                            <strong>来源：</strong>
                            <span>{{ scope.row.bookInfo.source }}-{{ scope.row.bookInfo.author }}</span>
                        </div>
                        <div style="color: rgb(136, 136, 136); font-size: 13px">
                            <strong>信息：</strong>
                            <span>{{ scope.row.bookInfo.protagonist }}-{{ scope.row.bookInfo.channel }}</span>
                        </div>
                        <div slot="reference">{{ scope.row.bookInfo.bookName }}</div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="platformInfo" label="书城信息" width="100" align="center">
                <template slot-scope="scope" v-if="scope.row.platformInfo">
                    <div>
                        {{ scope.row.platformInfo.platformName }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="rechargeTemplate" label="充值模板" width="100" align="center">
                <template slot-scope="scope">
                    <div>
                        {{ scope.row.rechargeTemplate }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="账号" prop="platformAccountInfo" width="300">
                <template slot-scope="scope">
                    <div v-if="scope.row.platformAccountInfo && scope.row.platformAccountInfo.account">
                        <span style="color: rgb(136, 136, 136); font-size: 12px">
                            <span>
                                {{ scope.row.platformAccountInfo.account }}&nbsp;
                                <!-- <i class="el-icon-document-copy copy" @click="Copy(scope.row.platformAccountInfo.account)"></i>
                                {{ scope.row.platformAccountInfo.password }}&nbsp;
                                <i class="el-icon-document-copy copy" @click="Copy(scope.row.platformAccountInfo.password)"></i> -->
                            </span>
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="createTime" width="135"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">
                <template slot-scope="scope">
                    <!-- <div class="Space"></div> -->
                    <el-popover placement="top" width="200" @hide="handlePullHide" trigger="click">
                        <div>
                            <el-row type="flex" justify="space-between" class="grouping">
                                <span>移动至</span>
                                <el-button
                                    size="mini"
                                    type="text"
                                    :icon="gVis ? 'el-icon-close' : 'el-icon-plus'"
                                    @click="handleGAdd"
                                >{{gVis ? '取消' : '新增'}}</el-button>
                            </el-row>
                            
                            <div v-show="gVis">
                                <div class="Space"></div>
                                <el-input placeholder="请输入内容" v-model="groupValue" class="input-with-select" size="mini">
                                    <el-button slot="append" type="primary" @click="handleAddGroup">添加</el-button>
                                </el-input>
                            </div>
                            
                            <ul class="groupingNames">
                                <li v-for="gItem in groupingData" :key="gItem.id">
                                    <template v-if="!gItem.isUpdata">
                                        <div class="gnTxt" v-if="scope.row.groupInfo && scope.row.groupInfo.id == gItem.id">
                                            <span style="color: red">*</span>{{gItem.groupName}}
                                        </div>
                                        <div class="gnTxt" v-else>
                                            {{gItem.groupName}}
                                        </div>
                                        <div class="gnBts gnnone" v-if="!scope.row.groupInfo || scope.row.groupInfo.id != gItem.id"  @click.stop.prevent="editAccountGroup(scope.row.id, gItem.id)">
                                            <el-row type="flex" justify="space-around" align="middle" class="bts">
                                                <el-button size="mini" type="text" icon="el-icon-edit" style="color: #409EFF" @click.stop="handleGUpdata(gItem.id)"></el-button>
                                                <el-popconfirm title="确定删除该分组？" @confirm="handleGroupDel(gItem.id)">
                                                    <el-button slot="reference" size="mini" type="text" icon="el-icon-delete" style="color: red" @click.stop=""></el-button>
                                                </el-popconfirm>
                                            </el-row>
                                        </div>
                                    </template>
                                    <template v-else>
                                        <el-input placeholder="请输入内容" v-model="newGroupName" class="input-with-select" size="mini">
                                            <el-button slot="append" type="primary" @click="handleGroupEdit(gItem.id, )">修改</el-button>
                                        </el-input>
                                    </template>
                                </li>
                            </ul>
                        </div>
                        <el-button size="mini" type="text" icon="el-icon-folder-opened" slot="reference" >分组</el-button>
                    </el-popover>
                    <el-dropdown trigger="click" size="mini">
                        <span class="el-dropdown-link">
                            更多<i class="el-icon-arrow-down el-icon--right"></i>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><change-record v-model="scope.row" :periodList="periodList" :bookCity="bookCity" :bookList="bookList" :teamsList="teamsList" :userAll="userAll" type="acc"/></el-dropdown-item>
                            <el-dropdown-item><div class="dropdownItem" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i>编辑</div></el-dropdown-item>
                            <el-dropdown-item><div class="dropdownItem" @click="handleState(scope.row)"><i class="el-icon-s-check"></i> 指派</div></el-dropdown-item>
                            <el-dropdown-item><cut-book v-model="scope.row" :periodList="periodList" :bookCity="bookCity" :bookList="bookList" @change="getList" :teamsList="teamsList"/></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList"/>
        <!-- 新增 编辑弹窗 -->
        <el-dialog 
            :title="isAdd ? '新增资源库' : '编辑资源库'" 
            :visible.sync="openEdit" 
            :width="isAdd ? '500px' : '640px'"
            append-to-body
            @close="addClose"
        >
            <el-form :model="queryPlatform" :rules="rules" ref="platForm" label-position="top" :inline="true">
                <el-form-item label="开始时间" prop="beginTime" style="width: 100%">
                    <el-date-picker v-model="queryPlatform.beginTime" size="small" format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择开始时间" />
                </el-form-item>
                <el-form-item label="资源名称" prop="resourceName" style="width: 140px">
                    <el-input v-model="queryPlatform.resourceName" placeholder="输入资源名称"/>
                </el-form-item>
                <el-form-item label="资源标识" prop="resourceKey" style="width: 140px">
                    <el-input v-model="queryPlatform.resourceKey" placeholder="输入资源标识"/>
                </el-form-item>
                <el-form-item prop="resourceType" label="资源类型" style="width: 140px">
                    <el-select v-model="queryPlatform.resourceType" placeholder="资源类型" filterable clearable size="small">
                        <el-option
                            v-for="item in resourceTypes"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="资源分组" prop="resourceGroupId" style="width: 140px;">
                    <el-select v-model="queryPlatform.resourceGroupId" placeholder="资源分组" clearable filterable size="small">
                        <el-option v-for="dict in groupingData" :key="dict.id" :label="dict.groupName" :value="dict.id"/>
                    </el-select>
                </el-form-item>
                <el-form-item label="项目组" prop="businessGroupId" v-if="isAdd">
                    <el-select v-model="queryPlatform.businessGroupId" size="small" placeholder="选择项目组" filterable style="width: 140px" clearable>
                        <el-option v-for="item in teamsList" :key="item.id" :label="item.businessGroupName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="期数" prop="periodId" v-if="isAdd">
                    <el-select v-model="queryPlatform.periodId" size="small" placeholder="选择期数" filterable style="width: 140px" clearable>
                        <el-option v-for="item in periodList" :key="item.id" :label="item.period" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="书城" prop="platformId" v-if="isAdd">
                    <el-select v-model="queryPlatform.platformId" @change="selectZh" size="small" placeholder="选择书城" filterable style="width: 140px" clearable>
                        <el-option v-for="item in bookCity" :key="item.id" :label="item.platformName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="账号" prop="platformAccountId" v-if="isAdd">
                    <el-select v-model="queryPlatform.platformAccountId" :disabled="!queryPlatform.platformId" size="small" placeholder="选择账号" filterable style="width: 140px" clearable>
                        <el-option v-for="item in accList" :key="item.id" :label="item.account" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="书" prop="bookId" v-if="isAdd">
                    <el-select v-model="queryPlatform.bookId" size="small" placeholder="选择书" filterable style="width: 140px" clearable>
                        <el-option v-for="item in bookList" :key="item.id" :label="item.bookName" :value="item.id" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投放状态" prop="putStatus" v-if="isAdd">
                    <el-select v-model="queryPlatform.putStatus" size="small" placeholder="选择投放状态" filterable style="width: 140px" clearable>
                        <el-option label="待投放" value="wait" />
                        <el-option label="投放中" value="ing" />
                        <el-option label="停投" value="stop" />
                        <el-option label="账号已注销" value="destroy" />
                    </el-select>
                </el-form-item>
                <el-form-item label="投放渠道" prop="putChannel" v-if="isAdd">
                    <el-select v-model="queryPlatform.putChannel" size="small" placeholder="选择投放渠道" filterable style="width: 140px" clearable>
                        <el-option label="MP" value="MP" />
                        <el-option label="GDT" value="GDT" />
                        <el-option label="头条" value="头条" />
                        <el-option label="企微" value="企微" />
                    </el-select>
                </el-form-item>
                <el-form-item label="充值模板" prop="rechargeTemplate" v-if="isAdd">
                    <el-input v-model="queryPlatform.rechargeTemplate" size="small" style="width: 140px" placeholder="输入充值模板" />
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="openEdit = false">取 消</el-button>
                <el-button type="primary" @click="submit('platForm')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 指派 -->
        <el-dialog 
            title="指派用户" 
            :visible.sync="openEditType" 
            width="450px"
            append-to-body
        >
            <el-form label-width="80px" label-position="top" ref="platFormTimeType" :model="timeData" :rules="rulesTimeType">
                <el-form-item label="开始时间(修改运营和投手后必选)" prop="beginTime">
                    <el-date-picker
                        v-model="timeData.beginTime"
                        type="date"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                        placeholder="选择开始时间">
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <el-form :model="item" :rules="rulesType" ref="platFormType" label-width="80px" label-position="top" v-for="(item, index) in queryPlatformType" :key="index">
                <el-row :gutter="20">
                    <el-col :span="14">
                        <el-form-item label="用户" prop="userId" >
                            <el-select v-model="item.userId" placeholder="请选择" filterable style="width: 100%" clearable>
                                <el-option
                                    v-for="item in userAll"
                                    :key="item.id"
                                    :label="item.nickName"
                                    :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="角色标签" prop="resourceTag">
                            <el-select v-model="item.resourceTag" placeholder="角色标签" filterable clearable>
                                <el-option
                                    v-for="(item1, index1) in tagAll"
                                    :key="index1"
                                    :label="item1.resourceTag"
                                    :value="item1.resourceTag">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="6">
                        <el-form-item label="开始时间" prop="beginTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="item.beginTime"
                                type="date"
                                format="yyyy-MM-dd"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开始时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="结束时间" prop="endTime">
                            <el-date-picker
                                style="width: 100%"
                                v-model="item.endTime"
                                type="date"
                                value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择结束时间">
                            </el-date-picker>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="2">
                        <div style="margin-top: 42px">
                            <el-button @click.prevent="removeResource(index)" type="text" icon="el-icon-delete" style="color: red; margin-left: 10px"></el-button>
                        </div>
                    </el-col>
                </el-row>
            </el-form>
            <el-button type="text" icon="el-icon-plus" @click="addResource">新增用户</el-button>
            <span slot="footer" class="dialog-footer">
                <el-button @click="queryPlatformType = [];openEditType = false">取 消</el-button>
                <el-button type="primary" @click="submitState('platFormType')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 公众号导入对话框 -->
        <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
            <el-upload
                ref="upload"
                :limit="1"
                accept=".xlsx, .xls"
                :headers="upload.headers"
                :action="upload.url + '?updateSupport=' + upload.updateSupport"
                :disabled="upload.isUploading"
                :on-progress="handleFileUploadProgress"
                :on-success="handleFileSuccess"
                :auto-upload="false"
                drag
            >
                <i class="el-icon-upload"></i>
                <div class="el-upload__text">
                    将文件拖到此处，或
                    <em>点击上传</em>
                </div>
                <!-- <div class="el-upload__tip" slot="tip">
                    <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的公众号数据
                    <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>
                </div> -->
                <div class="el-upload__tip" style="color:red" slot="tip">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
            </el-upload>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="upload.open = false">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
import { getResourceList, addResource, delResource,
    editResource, addGroup, getGroupAllList, refreshCache,
    delGroup, editGroup, editAccountGroup, assignResourceUser, getRoleAll } from "@/api/accounts/account";
import { allUser } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import { Copy } from "@/utils";
import { getBusinessGroupAll } from "@/api/admin/teams";
import { getPeriodAll } from "@/api/accounts/period";
import { getBookPlatInfoAll } from "@/api/accounts/bookCity";
import { getBookAcc, getBookAll } from "@/api/system/books";
import cutBook from './components/cutBook.vue'
import changeRecord from './components/changeRecord.vue'
export default {
    name: 'Account',
    components: { cutBook, changeRecord },
    data() {
        return {
            loading: false,
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url: process.env.VUE_APP_BASE_API + "/system/mp/admin/importExcel"
            },
            groupValue: '',
            newGroupName: '',
            gVis: false,  // 控制新增分组输入框
            queryParams: {
                pageNum: 1,
                pageSize: 10
            },
            showSearch: true,
            // 状态信息
            statusOptions: [
                {
                    dictLabel: '待分配',
                    dictValue: 0
                },
                {
                    dictLabel: '投放中',
                    dictValue: 1
                },
                {
                    dictLabel: '停投',
                    dictValue: 2
                },
                {
                    dictLabel: '已注销',
                    dictValue: 3
                }
            ],
            resourceTypes: [
                {label: '公众号', value: 0, type: 'success'},
                {label: '小程序', value: 1, type: 'danger'},
                {label: '企业微信', value: 3, type: 'info'},
                {label: '快应用', value: 10, type: 'warning'},
                {label: '头条账号', value: 20, type: ''}
            ],
            // 编辑弹窗
            openEdit: false,
            // 总条数
            total: 0,
            // 公众号表格信息
            accountList: [],
            // 分组数据
            groupingData: [],
            isAdd: true,
            queryPlatform: {},
            rules: {
                beginTime: [
                    { required: true, message: '请输入开始时间', trigger: 'blur' }
                ],
                resourceName: [
                    { required: true, message: '请输入资源名称', trigger: 'blur' }
                ],
                resourceKey: [
                    { required: true, message: '请输入资源Key', trigger: 'blur' }
                ],
                resourceType: [
                    { required: true, message: '请选择类型', trigger: 'blur' }
                ],
                putStatus: [
                    { required: true, message: '请选择投放状态', trigger: 'blur' }
                ]
            },
            userAll: [], //所有用户
            openEditType: false,  // 指派弹窗控制
            queryPlatformType: [],
            rulesType: {
                userId: [
                    { required: true, message: '请选择用户', trigger: 'change' }
                ],
                resourceTag: [
                    { required: true, message: '请选择角色标签', trigger: 'change' }
                ]
            },
            state: [
                {label: 1, value: '投放中'},
                {label: 2, value: '停投'},
                {label: 3, value: '已注销'}
            ],
            // 所有资源角色标签
            tagAll: [],
            resourceId: null,
            // 保存多选ID
            delIds: [],
            resourceData: {}, // 保存当前资源信息
            teamsList: [], // 项目组
            periodList: [], // 所有期数
            bookCity: [], // 所有书城
            bookList: [], // 所有书
            accList: [], // 所有账号
            timeData: {},
            rulesTimeType: {
                // beginTime: [
                //     { required: true, message: '请选择开始时间', trigger: 'change' }
                // ],
            },
        }
    },
    mounted(){
        this.total = this.accountList.length
        window.addEventListener('storage', (e) => {
            if (e.key === 'code') {
                if (e.newValue === 'ok') {
                    this.$router.go(0)
                    this.msgSuccess("授权成功");
                    localStorage.removeItem('code')
                } else {
                    this.$message.error('授权失败');
                    localStorage.removeItem('code')
                }
            }
        })
    },
    created() {
        this.getAll()
        this.getList()
        this.getGroupList()
        this.getCutXgData()
    },
    methods: {
        selectZh(e, id) {
            // 获取所有账号
            getBookAcc(e).then(res => {
                this.accList = res.data
            })
        },
        /** 新增编辑记录获取数据 */
        getCutXgData() {
            // 获取项目组
            getBusinessGroupAll().then(res => {
                this.teamsList = res.data
            })
            // 获取期数
            getPeriodAll().then(response => {
                this.periodList = response.data
            });
            // 获取所有书城
            getBookPlatInfoAll().then(res => {
                this.bookCity = res.data
            })
            // 获取所有书
            getBookAll().then(res => {
                this.bookList = res.data
            })
        },
        /** 新增用户 */
        addResource() {
            let oldData = JSON.parse(JSON.stringify(this.queryPlatformType))
            oldData.push({
                userId: null,
                resourceTag: null,
                beginTime: null,
                endTime: null
            })
            this.queryPlatformType = oldData
        },
        /** 删除用户 */
        removeResource(index) {
            this.queryPlatformType.splice(index, 1)
        },
        /** 刷新缓存 */
        handleRefresh() {
            refreshCache().then(res => {
                if(res.data) {
                    this.msgSuccess('刷新成功');
                }
            })
        },
        /**图片返回失败 */
        avatarErr() {
            return true
        },
        /** 获取所有 */
        getAll() {
            // 所有用户
            allUser().then(response => {
                let data = response.data
                this.userAll = data.map((item) => {
                    return { id: item.userId, nickName: item.nickname }
                })
            })
            // 获取所有角色
            getRoleAll().then(res => {
                this.tagAll = res.data
            })
        },
        /** 分组拉取 */
        handlePullHide() {
            this.gVis = false
            this.groupingData = this.groupingData.map((gitem)=>{
                return { ...gitem, isUpdata: false }
            })
        },
        /** 分组新增 */
        handleGAdd(){
            this.gVis = !this.gVis
        },
        /** 分组修改 */
        handleGUpdata(id){
            this.groupingData = this.groupingData.map((gitem)=>{
                if(id === gitem.id){
                    this.newGroupName = gitem.groupName
                    return { ...gitem, isUpdata: true }
                }else{
                    return { ...gitem, isUpdata: false }
                }
            })
        },
        /** 编辑按钮方法 */
        handleEdit(value) {
            console.log(value)
            let { id, resourceKey, resourceName, bookId, rechargeTemplate, putChannel, putStatus, platformAccountId, platformId, resourceType, resourceGroupId, businessGroupId, periodId } = value
            this.$nextTick(() => {
                this.queryPlatform = Object.assign({}, {
                    id, 
                    resourceKey,
                    resourceName,
                    resourceType,
                    resourceGroupId,
                    businessGroupId,
                    periodId,
                    platformId,
                    platformAccountId,
                    bookId,
                    putStatus,
                    putChannel,
                    rechargeTemplate
                }) // 给表单赋值
            })
            this.isAdd = false
            this.openEdit = true
        },
        /** 查询公众号列表 */
        getList() {
            this.loading = true
            getResourceList(this.queryParams).then(response => {
                this.loading = false
                let data = response.data
                this.accountList = data.records
                this.total = data.total
            }).catch(() => this.loading = false)
        },
        /** 搜索 */
        handleQuery() {
            this.queryParams.pageNum = 1
            this.getList()
        },
        /** 状态修改 */
        handleState(value){
            if (value.userRelationList && value.userRelationList.length > 0) {
                this.queryPlatformType = value.userRelationList.map(item => {
                    return {
                        userId: item.userId,
                        resourceTag: item.resourceTag,
                        beginTime: item.beginTime,
                        endTime: item.endTime
                    }
                })
            } else {
                this.queryPlatformType = [{
                    userId: null,
                    resourceTag: null,
                    beginTime: null,
                    endTime: null
                }]
            }
            this.timeData = {}
            this.resourceId = value.id
            this.openEditType = true
        },
        /** 重置搜索条件 */
        resetQuery() {
            this.queryParams = {
                pageNum: 1,
                pageSize: 10
            }
            this.getList()
        },
        // 新增公众号
        handleAdd() {
            this.isAdd = true
            this.openEdit = true
            this.queryPlatform = {}
        },
        /** 新增 编辑 提交 */
        submit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if(this.isAdd){
                        addResource(this.queryPlatform).then(response => {
                            if(response.data){
                                this.msgSuccess("新增成功");
                                this.resetForm("platForm");
                                this.openEdit = false
                                this.getList()
                            }
                            this.addClose()
                        })
                    }else{
                        editResource(this.queryPlatform).then(response => {
                            if(response.data){
                                this.msgSuccess("修改成功");
                                this.resetForm("platForm");
                                this.openEdit = false
                                this.getList()
                            }
                            this.addClose()
                        })
                    }
                } else {
                    return false;
                }
            });
        },
        /** 状态提交 */
        submitState(formName) {
            
            this.$refs['platFormTimeType'].validate((valid) => {
                if (valid) {
                    let state = this.$refs[formName].map(async item => {
                        return await this.stateHandle(item)
                    })

                    Promise.all(state).then(res => {
                        if(res.every(item => item)) {
                            assignResourceUser({ resourceId: this.resourceId, beginTime: this.timeData.beginTime, relationList: this.queryPlatformType }).then(response => {
                                if(response.data){
                                    this.msgSuccess("指派成功");
                                    // this.resetForm(formName);
                                    this.queryPlatformType = []
                                    this.timeData = {}
                                    this.openEditType = false
                                    this.getList()
                                }
                            })
                        }
                    })
                }
            })
            
        },
        stateHandle(ref) {
            return new Promise((resolve) => {
                ref.validate(valid => resolve(valid))
            })
        },
        /** 多选 */
        handleSelectionChange(selection) {
            this.delIds = selection.map((item) => item.id)
        },
        // 删除
        handleDel() {
            this.$confirm('确定删除？', '删除', {
                distinguishCancelAndClose: true,
                confirmButtonText: '确定',
                cancelButtonText: '取消'
            }).then(() => {
                delResource(this.delIds.toString()).then(res => {
                    if(res.data) {
                        this.msgSuccess('删除成功');
                        this.getList()
                    }
                })
            })
            
        },
        /** 时间转换 */
        parserTime(time){
            const d = new Date(time)
            const resDate = d.getFullYear() + '-' + this.p((d.getMonth() + 1)) + '-' + this.p(d.getDate())
            return resDate
        },
        p(s) {
            return s < 10 ? '0' + s : s
        },
        /** 关闭弹窗调用 */
        addClose() {
            if(!this.isAdd){
                this.queryPlatform = {}
            }
        },
        /** 分组新政 */
        handleAddGroup() {
            if(this.groupValue === ''){
                this.$message.error('请输入分组');
                return
            }
            addGroup({groupName: this.groupValue}).then(response => {
                if(response.data){
                    this.getGroupList()
                    this.msgSuccess("新增成功");
                    this.groupValue = ''
                    this.gVis = false
                }
            })
        },
        /** 获取分组 */
        getGroupList() {
            getGroupAllList().then(response => {
                this.groupingData = response.data.map((item) => {
                    return {...item, isUpdata: false}
                })
            })
        },
        /** 删除分组 */
        handleGroupDel(id){
            delGroup(id).then(response => {
                if(response.data){
                    this.msgSuccess("删除成功");
                    this.getGroupList()
                }
            })
        },
        /** 修改分组 */
        handleGroupEdit(id){
            if(this.newGroupName === ''){
                this.$message.error('请输入要修改的分组名字');
                return
            }
            editGroup({ id, groupName: this.newGroupName }).then(response => {
                if(response.data){
                    this.getGroupList()
                    this.msgSuccess("修改成功");
                }
            })
        },
        /** 修改公众号分组 */
        editAccountGroup(id, resourceGroupId){
            editAccountGroup({id, resourceGroupId}).then(response => {
                if(response.data){
                    this.getList()
                    this.msgSuccess("设置成功");
                }
            })
        },
        /** 导入按钮操作 */
        handleImport() {
            this.upload.title = "公众号导入";
            this.upload.open = true;
        },
        // 文件上传中处理
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.upload.open = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
            this.$alert(response.msg, "导入结果", { dangerouslyUseHTMLString: true });
            this.getList();
        },
        /** 下载模板操作 */
        importTemplate() {
            this.download('system/user/importTemplate', {
                ...this.queryParams
            }, `user_${new Date().getTime()}.xlsx`)
        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        /** 复制 */
        Copy(value){
            Copy(value)
        }
    }
}
</script>
<style lang="scss">
    .el-table {
        .warning-row {
            background: oldlace;
        }
        .danger-row {
            background: rgb(253, 187, 187);
        }
        .info-row {
            background: #909399;
        }
    }

    .el-table 
    .el-drawer__header span:focus {
        outline: 0;
    }
    .Space{
        width: 10px;
        display: inline-block;
    }
    .my_padding{
        margin: 0 10px 10px 10px;
    }
    .verticalCenter{
        display: flex;
        flex-direction: column;
        justify-content: center;
        margin-left: 5px;
        &>div.child{
            color: rgb(136, 136, 136); 
            font-size: 13px;
            &>span{
                color: #606266;
            }
        }
        .font12{
            font-size: 12px;
        }
    }
    .copy{
        color: #409EFF;
        margin-left: 5px;
        cursor: pointer;
    }
    .elli{
        display: flex;
        justify-content: center;
        align-items: center;
        span{
            flex: 1;
            overflow:hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
    }
    .myElli{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
    .grouping{
        span{
            font-size: 12px;
        }
        button{
            padding: 0;
        }
    }
    .groupingNames{
        padding: 0;
        li{
            list-style: none;
            padding: 5px 2px;
            box-sizing: border-box;
            position: relative;
            cursor: pointer;
            .gnnone{
                display: none;
            }
            .gnTxt{
                overflow: hidden;
                text-overflow:ellipsis;
                white-space: nowrap;
            }
            .gnBts{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
                .bts{
                    position: absolute;
                    top: 0;
                    right: 0;
                    height: 100%;
                    width: 50px;
                    padding-right: 10px;
                }
            }
            &:hover .gnnone{
                display: block;
                background-color: rgba(211, 211, 211, .5);
                border-radius: 2px;
            }
            i{
                cursor: pointer;
            }
            
            
        }
        
    }
    .custom {
        width: 75% !important;
    }
    .cut {
        padding: 0 10px;
        box-sizing: border-box;

        .button {
            margin-bottom: 10px;
        }
        .el-table .cell {
            line-height: normal;
        }
        ul {
            padding-left: 0;
            .sumitInfo {
                // margin-top: 20px;
                font-weight: 600;
                margin-bottom: 10px;

                .button {
                    margin-left: 20px;
                }
            }
        }
    }
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
        font-size: 12px;
        margin-left: 10px;
    }
    .dropdownItem {
        cursor: pointer;
        color: #409EFF;
        font-size: 12px;
        padding: 4px 0;
    }
</style>