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

<template>
  <div class="app-container" ref="appFull" style="background: #fff">
    <el-form :model="queryParams" ref="queryForm" v-show="showSearch" :inline="true">
      <el-form-item label="" prop="userId">
        <el-select v-model="queryParams.userId" placeholder="运营/投手" clearable filterable style="width: 140px" size="small">
          <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id"/>
        </el-select>
      </el-form-item>
      <el-form-item label="" prop="nickName">
        <el-input v-model="queryParams.nickName" placeholder="请输入公众号名称" clearable size="small" style="width: 150px" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="" prop="appid">
        <el-input v-model="queryParams.appid" placeholder="请输入APPID" clearable size="small" style="width: 150px" @keyup.enter.native="handleQuery"/>
      </el-form-item>
      <el-form-item label="" prop="principalName">
        <el-input v-model="queryParams.principalName" 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="platformId">
        <el-select style="width: 140px" v-model="queryParams.platformId" placeholder="请选择平台" filterable clearable size="small">
          <el-option v-for="item in bookAll" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item prop="authStatus">
        <el-select style="width: 140px" v-model="queryParams.authStatus" placeholder="请选择授权状态" filterable clearable size="small">
          <el-option v-for="item in [ { label: '未授权', value: 1 }, { label: '已授权', value: 0 }, ]" :key="item.value" :label="item.label" :value="item.value" />
        </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" size="mini" icon="el-icon-plus"  @click="handleAdd()">新增公众号</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="primary" size="mini" :disabled="!(batchAssignPlatForm.mpIds && batchAssignPlatForm.mpIds.length > 0)" @click="handleBatchAdd()">批量指派</el-button>
      </el-col>
      <el-col :span="1.5" v-if="batchAssignPlatForm.mpIds && batchAssignPlatForm.mpIds.length > 0">
        <el-button type="danger" size="mini" @click="clearMpidsHandle">清空已选</el-button>
      </el-col>
      <el-col :span="1.5" v-if="batchAssignPlatForm.mpIds && batchAssignPlatForm.mpIds.length > 0">
        <el-select style="width: 140px" v-model="queryParams.platformId" placeholder="已选公众号" size="mini">
          <el-option v-for="item in batchAssignPlatForm.mpIds" :key="item.id" :label="item.nickName" :value="item.id" disabled/>
        </el-select>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    
    <el-table :data="accountList" ref="multipleTable" row-key="id" :row-class-name="tableRowClassName" size="mini" v-loading="loading" @select="handleSelect" @select-all="handleSelectAll"> <!-- @selection-change="handleSelectionChange" -->
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="公众号" prop="account" width="300" fixed>
        <template slot-scope="scope">
          <el-row
            align="middle"
            type="flex"
            v-if="scope.row.nickName || scope.row.userName || scope.row.appid"
          >
            <el-avatar
              shape="square"
              :size="62"
              :src="scope.row.headImg"
              @error="avatarErr"
            >
              <img src="../../../assets/image/book.jpg" />
            </el-avatar>
            <div class="verticalCenter">
              <div>
                <strong>{{ scope.row.nickName }}</strong>
              </div>
              <div class="child">
                <span class="font12">原始ID：</span>{{ scope.row.userName
                }}<i
                  v-if="scope.row.userName"
                  class="el-icon-document-copy copy"
                  @click="Copy(scope.row.userName)"
                ></i>
              </div>
              <div class="child">
                <span class="font12">APPID：</span>{{ scope.row.appid
                }}<i
                  v-if="scope.row.appid"
                  class="el-icon-document-copy copy"
                  @click="Copy(scope.row.appid)"
                ></i>
              </div>
            </div>
          </el-row>
        </template>
      </el-table-column>
      <!-- <el-table-column label="APPID" prop="appid" align="center" width="120" /> -->
      <el-table-column prop="operUserInfo" width="100" align="center">
        <template slot="header">
          <div>
            运营
            <el-tooltip effect="dark" content="悬浮可显示号码" placement="top"
              ><i class="el-icon-question"></i
            ></el-tooltip>
          </div>
        </template>
        <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">
        <template slot="header">
          <div>
            投手
            <el-tooltip effect="dark" content="悬浮可显示号码" placement="top"
              ><i class="el-icon-question"></i
            ></el-tooltip>
          </div>
        </template>
        <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="checkUserInfo" width="100" align="center" label="审查">
        <template slot-scope="scope" v-if="scope.row.checkUserInfo">
          <el-popover :width="200" trigger="hover" placement="top" :title="scope.row.checkUserInfo.nickName">
            <div style="color: rgb(136, 136, 136); font-size: 13px">
              电话：{{ scope.row.checkUserInfo.phone }}
            </div>
            <div slot="reference">{{ scope.row.checkUserInfo.nickName }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="administratorName" width="115" align="center">
        <template slot="header">
          <div>
            管理员信息
            <el-tooltip
              effect="dark"
              content="悬浮可显示详细信息"
              placement="top"
              ><i class="el-icon-question"></i
            ></el-tooltip>
          </div>
        </template>
        <template slot-scope="scope">
          <el-popover
            width="200"
            trigger="hover"
            placement="top"
            :title="scope.row.administratorName"
          >
            <div style="color: rgb(136, 136, 136); font-size: 13px">
              <strong>电话号码：</strong> {{ scope.row.managePhone }}
            </div>
            <div style="color: rgb(136, 136, 136); font-size: 13px">
              <strong>编号：</strong> {{ scope.row.managePhoneNo }}
            </div>
            <div slot="reference">{{ scope.row.administratorName }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column prop="account" align="center" width="130">
        <template slot="header">
          <div>
            公众号账号信息
            <el-tooltip
              effect="dark"
              content="悬浮可显示公众号账号/密码"
              placement="top"
              ><i class="el-icon-question"></i
            ></el-tooltip>
          </div>
        </template>
        <template slot-scope="scope">
          <el-popover :width="260" trigger="hover" placement="top">
            <div style="color: rgb(136, 136, 136); font-size: 13px">
              <strong>账号：</strong> {{ scope.row.account }}
            </div>
            <div style="color: rgb(136, 136, 136); font-size: 13px">
              <strong>密码：</strong> {{ scope.row.password }}
            </div>
            <div slot="reference" class="myElli">{{ scope.row.account }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
        label="公司主体"
        prop="principalName"
        align="center"
        width="150"
      >
        <template slot-scope="scope">
          <div class="elli" v-if="scope.row.principalName">
            <el-tooltip
              class="item"
              effect="dark"
              :content="scope.row.principalName"
              placement="top"
              :enterable="false"
            >
              <span>{{ scope.row.principalName }}</span>
            </el-tooltip>
            <i
              class="el-icon-document-copy copy"
              @click="Copy(scope.row.principalName)"
            ></i>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="授权状态"
        prop="authStatus"
        align="center"
        width="80"
      >
        <template slot-scope="scope">
          <el-tag :type="scope.row.authStatus === 0 ? 'success' : 'danger'">{{
            scope.row.authStatus === 0 ? "已授权" : "未授权"
          }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="投放状态" prop="resourceInfo" width="80" align="center">
        <template slot-scope="scope">
          <el-tag type="warning" v-if="scope.row.resourceInfo.putStatus === 'wait'">待投放</el-tag>
          <el-tag type="success" v-else-if="scope.row.resourceInfo.putStatus === 'ing'">投放中</el-tag>
          <el-tag type="info" v-else-if="scope.row.resourceInfo.putStatus === 'stop'">停投</el-tag>
          <el-tag type="danger" v-else-if="scope.row.resourceInfo.putStatus === 'destroy'">账号已注销</el-tag>
          <div v-else>--</div>
        </template>
      </el-table-column>

      <el-table-column prop="platformInfo" width="80" align="center" label="书城" :show-overflow-tooltip="true">
        <template slot-scope="scope" v-if="scope.row.resourceInfo.platformInfo">
          <div>{{ scope.row.resourceInfo.platformInfo.platformName }}</div>
        </template>
      </el-table-column>
      <el-table-column label="项目组" prop="businessGroupInfo" width="80" :show-overflow-tooltip="true" align="center">
        <template slot-scope="scope" v-if="scope.row.resourceInfo.businessGroupInfo">
            <span>{{scope.row.resourceInfo.businessGroupInfo.businessGroupName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="期数" prop="period" width="100" align="center">
        <template slot-scope="scope">
          <div class="verticalCenter">
            <div v-if="scope.row.resourceInfo.periodInfo">
              {{ scope.row.resourceInfo.periodInfo.period }}
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="账号信息" prop="platformInfo" width="200">
        <template slot-scope="scope">
          <div class="elli" v-if="scope.row.resourceInfo.platformAccountInfo && scope.row.resourceInfo.platformAccountInfo.account">
            <div style="color: rgb(136, 136, 136); font-size: 12px">
              <strong>账号：</strong>
              <span>{{ scope.row.resourceInfo.platformAccountInfo.account }}</span>
            </div>
            <i class="el-icon-document-copy copy" @click="Copy(scope.row.resourceInfo.platformAccountInfo.account)"></i>
          </div>
          <div class="elli" v-if="scope.row.resourceInfo.platformAccountInfo && scope.row.resourceInfo.platformAccountInfo.password">
            <div style="color: rgb(136, 136, 136); font-size: 12px">
              <strong>密码：</strong>
              <span >{{ scope.row.resourceInfo.platformAccountInfo.password }}</span>
            </div>
            <i class="el-icon-document-copy copy" @click="Copy(scope.row.resourceInfo.platformAccountInfo.password)"></i>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="当前书籍" prop="bookInfo" width="120" align="center">
        <template slot-scope="scope" v-if="scope.row.resourceInfo.bookInfo">
          <el-popover width="200" trigger="hover" placement="top" :title="scope.row.resourceInfo.bookInfo.bookName">
            <div style="color: rgb(136, 136, 136); font-size: 13px">
              <strong>来源：</strong>
              <span>{{ scope.row.resourceInfo.bookInfo.source }}-{{ scope.row.resourceInfo.bookInfo.author }}</span>
            </div>
            <div style="color: rgb(136, 136, 136); font-size: 13px">
              <strong>信息：</strong>
              <span>{{ scope.row.resourceInfo.bookInfo.protagonist }}-{{ scope.row.resourceInfo.bookInfo.channel }}</span>
            </div>
            <div slot="reference">{{ scope.row.resourceInfo.bookInfo.bookName }}</div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="投放渠道" prop="resourceInfo" width="80" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope" v-if="scope.row.resourceInfo">
          <div>{{ scope.row.resourceInfo.putChannel }}</div>
        </template>
      </el-table-column>
      <el-table-column label="充值模板" prop="resourceInfo" width="80" align="center" :show-overflow-tooltip="true">
        <template slot-scope="scope" v-if="scope.row.resourceInfo">
          <div>{{ scope.row.resourceInfo.rechargeTemplate }}</div>
        </template>
      </el-table-column>
      <el-table-column label="认证/到期时间" prop="authTime" width="120" align="center">
        <template slot-scope="scope">
          <div>{{ scope.row.authTime }}</div>
          <div style="color: red">{{ scope.row.authTimeout }}</div>
        </template>
      </el-table-column>

      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="160">
        <template slot-scope="scope">
          <el-button v-if="scope.row.authStatus === 1" size="mini" type="text" icon="el-icon-s-promotion" @click="authorizeHandle(scope.row)">授权</el-button>
          <el-button size="mini" type="text" icon="el-icon-s-check" @click="handleState(scope.row)">指派</el-button>
          <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="use"/></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><cut-book v-model="scope.row.resourceInfo" :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="650px" append-to-body>
      <el-form :model="queryPlatform" :rules="rules" ref="platForm" label-position="top" append-to-body :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="nickName">
          <el-input v-model="queryPlatform.nickName" style="width: 140px" :disabled="queryPlatform.authStatus == 0 ? true : false" size="small" placeholder="输入公众号名称"/>
        </el-form-item>
        <el-form-item label="APPID" prop="appid">
          <el-input v-model="queryPlatform.appid" style="width: 140px" :disabled="queryPlatform.authStatus == 0 ? true : false" size="small" placeholder="输入APPID"/>
        </el-form-item>
        <el-form-item label="公众号账号" prop="account">
          <el-input v-model="queryPlatform.account" style="width: 140px" size="small" placeholder="输入公众号账号"/>
        </el-form-item>
        <el-form-item label="公众号密码" prop="password">
          <el-input v-model="queryPlatform.password" style="width: 140px" size="small" placeholder="输入公众号密码"/>
        </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-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-item label="管理员姓名" prop="administratorName">
          <el-input v-model="queryPlatform.administratorName" style="width: 140px" size="small" placeholder="输入管理员姓名"/>
        </el-form-item>
        <el-form-item label="管理员身份证" prop="administratorCard">
          <el-input v-model="queryPlatform.administratorCard" style="width: 140px" size="small" placeholder="输入管理员身份证"/>
        </el-form-item>
        <el-form-item label="管理员手机号码" prop="managePhone">
          <el-input v-model="queryPlatform.managePhone" style="width: 140px" size="small" placeholder="输入管理员手机号"/>
        </el-form-item>
        <el-form-item label="管理员微信" prop="administratorWechat">
          <el-input v-model="queryPlatform.administratorWechat" style="width: 140px" size="small" placeholder="输入管理员微信"/>
        </el-form-item>
        <el-form-item label="管理员手机号码编号" prop="managePhoneNo">
          <el-input v-model="queryPlatform.managePhoneNo" style="width: 140px" size="small" placeholder="输入管理员手机号码编号"/>
        </el-form-item>
        <el-form-item label="法人姓名" prop="legalName">
          <el-input v-model="queryPlatform.legalName" style="width: 140px" size="small" placeholder="输入法人姓名"/>
        </el-form-item>
        <el-form-item label="法人身份证" prop="legalCard">
          <el-input v-model="queryPlatform.legalCard" style="width: 140px" size="small" placeholder="输入法人身份证"/>
        </el-form-item>
        <el-form-item label="法人微信" prop="legalWechat">
          <el-input v-model="queryPlatform.legalWechat" style="width: 140px" size="small" placeholder="输入法人微信"/>
        </el-form-item>
        <el-form-item label="认证开始时间" prop="authTime">
          <el-date-picker v-model="queryPlatform.authTime" style="width: 140px" type="date" placeholder="选择开始时间" size="small"/>
        </el-form-item>
        <el-form-item label="认证结束时间" prop="authTimeout">
          <el-date-picker v-model="queryPlatform.authTimeout" style="width: 140px" type="date" placeholder="选择结束时间" size="small"/>
        </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="batchOpen" width="300px" append-to-body>
      <el-form :model="batchAssignPlatForm" :rules="rules" ref="batchplatForm" label-width="80px" label-position="top">
        <el-form-item label="开始时间" prop="beginTime">
            <el-date-picker
              v-model="batchAssignPlatForm.beginTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择开始时间">
            </el-date-picker>
        </el-form-item>
        <el-form-item label="运营" prop="operUserId">
          <el-select  v-model="batchAssignPlatForm.operUserId" placeholder="请选择" filterable style="width: 100%" 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 label="投手" prop="putUserId">
          <el-select v-model="batchAssignPlatForm.putUserId" placeholder="请选择" filterable style="width: 100%" clearable>
            <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="batchOpen = false">取 消</el-button>
        <el-button type="primary" @click="batchSubmit('batchplatForm')">确 定</el-button>
      </span>
    </el-dialog>

    
    <el-dialog title="指派用户" :visible.sync="openEditType" width="680px" append-to-body>
      <el-form :model="assignUSerData" :rules="rulesType1" ref="platFormType" label-width="80px" label-position="top">
        <el-form-item label="开始时间(修改运营和投手后必选)" prop="beginTime">
            <el-date-picker
              v-model="assignUSerData.beginTime"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择开始时间">
            </el-date-picker>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="运营" prop="operUserId">
              <el-select v-model="assignUSerData.operUserId" placeholder="请选择" filterable style="width: 100%" clearable>
                <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投手" prop="putUserId">
              <el-select v-model="assignUSerData.putUserId" placeholder="请选择" filterable style="width: 100%" clearable>
                <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="审查" prop="checkUserId">
              <el-select v-model="assignUSerData.checkUserId" placeholder="请选择" filterable style="width: 100%" clearable>
                <el-option v-for="item in userAll" :key="item.id" :label="item.nickName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openEditType = false; assignUSerData = {}">取 消</el-button>
        <el-button type="primary" @click="assignUSerHandle">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 变更信息 -->
    <AccountUpdate :drawer="drawer" v-if="drawer" @close="drawer = false" :drawerTitle="drawerTitle" :drawerId="drawerId"></AccountUpdate>
  </div>
</template>

<script>
import { getAccount, getAccountList, addAccount, editAccount, addGroup, getGroupAllList, editAccountGroup, assignUser, configUser } from "@/api/accounts/account";
import { allUser } from "@/api/system/user";
import { getAllBook } from "@/api/system/books";
import { Copy } from "@/utils";
import AccountUpdate from "./components/accountUpdate.vue";
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'
import { getBusinessGroupAll } from "@/api/admin/teams";
export default {
  name: "Account",
  components: { AccountUpdate, cutBook, changeRecord },
  data() {
    return {
      groupValue: "",
      newGroupName: "",
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      showSearch: true,
      // 编辑弹窗
      openEdit: false,
      // 总条数
      total: 0,
      // 公众号表格信息
      accountList: [],
      // 分组数据
      groupingData: [],
      isAdd: true,
      single: true,
      queryPlatform: {},
      rules: {
        beginTime: [
          { required: true, message: '请输入开始时间', trigger: 'blur' }
        ],
        appid: [
          { required: true, message: "请输入公众号appid", trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "请输入公众号名称", trigger: "blur" },
        ],
        putStatus: [
          { required: true, message: '请选择投放状态', trigger: 'blur' }
        ]
      },
      userAll: [], //所有用户
      bookAll: [], //所有书城
      queryPlatformType: {
        operUserId: "",
        putUserId: "",
        platformAccountIds: [],
        bookName: "",
        approveStatus: "",
      },
      rulesType: {
        platformAccountIds: [
          { required: true, message: "请输入公众号appid", trigger: "change" },
        ],
        bookName: [
          { required: true, message: "请输入公众号appid", trigger: "blur" },
        ],
        approveStatus: [
          { required: true, message: "请输入公众号appid", trigger: "change" },
        ],
      },
      state: [
        { label: 1, value: "投放中" },
        { label: 2, value: "停投" },
        { label: 3, value: "已注销" },
      ],
      batchAssignPlatForm: {
        putUserId: "",
        operUserId: "",
        mpIds: [],
      },
      batchOpen: false,
			// 表格loading
			loading: false,
			// 信息变更
			drawer: false,
			drawerTitle: '',
			drawerId: null,
      openEditType: false,
      rulesType1: {
        operUserId: [
          { required: true, message: "请选择运营", trigger: "change" },
        ],
        putUserId: [
          { required: true, message: "请选择投手", trigger: "change" },
        ],
      },
      assignUSerData: {},
      teamsList: [], // 项目组
      bookList: [],
      accList: [],
      bookCity: [],
      periodList: []
    };
  },
  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: {
    /** 清空选中公众号 */
    clearMpidsHandle() {
      this.batchAssignPlatForm = {
        putUserId: "",
        operUserId: "",
        mpIds: [],
      }
      this.$nextTick(() => {
        this.$refs.multipleTable.clearSelection();
      })
    },
    /** 数组去重 */
    dedupe(array){
      return Array.from(new Set(array));
    },
    handleSelect(selection, row) {
      let mpIds = this.batchAssignPlatForm.mpIds
      if(selection.length > mpIds.length) { // 选中
        this.batchAssignPlatForm.mpIds = this.dedupe([...mpIds, {nickName: row.nickName, id: row.id}])
      } else { // 取消
        this.batchAssignPlatForm.mpIds = mpIds.filter(item => item.id !== row.id)
      }
    },
    handleSelectAll(selection) {
      console.log(1111, selection)
      let mpIds = this.batchAssignPlatForm.mpIds
      if (selection.length > 0) { // 选中
        let newMpIds = selection.map(item => ({nickName: item.nickName, id: item.id}))
        this.batchAssignPlatForm.mpIds = this.dedupe([...mpIds, ...newMpIds])
      } else { // 取消
        let newMpIds = this.accountList.map(item => item.id)
        this.batchAssignPlatForm.mpIds = mpIds.filter(item => {
          if (newMpIds.includes(item.id)) {
            return false
          }
          return true
        })
      }
    },
    selectZh(e) {
      // 获取所有账号
      this.queryPlatform.platformAccountId = null
      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
      })
    },
    /** 指派 */
    handleState(value) {
      let { id, operUserId, putUserId, checkUserId } = value
      this.assignUSerData = { mpId: id, operUserId, putUserId, checkUserId }
      this.openEditType = true
    },
    /** 指派提交 */
    assignUSerHandle() {
      configUser(this.assignUSerData).then(res => {
        if(res.data) {
          this.msgSuccess('指派成功')
          this.getList()
          this.openEditType = false
        }
      })
    },
    /** 多选 */
    handleSelectionChange(selection) {
      this.batchAssignPlatForm.mpIds = selection.map((item) => item.id);
      this.single = !selection.length;
    },
    /** 批量指派打开弹窗 */
    handleBatchAdd() {
      this.batchOpen = true;
    },
    /** 批量指派提交 */
    batchSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { mpIds } = this.batchAssignPlatForm
          assignUser({ ...this.batchAssignPlatForm, mpIds: mpIds.map(item => item.id) }).then((response) => {
            if (response.data) {
              this.msgSuccess("指派成功");
              this.resetForm(formName);
              this.batchOpen = false;
              this.batchAssignPlatForm = {
                putUserId: "",
                operUserId: "",
                mpIds: [],
              }
              this.getList();
            } else {
              console.error(response);
            }
          });
        } else {
          return false;
        }
      });
    },
    /**图片返回失败 */
    avatarErr() {
      return true;
    },
    /** 获取所有 */
    getAll() {
      // 所有用户
      allUser().then((response) => {
        let data = response.data;
        this.userAll = data.map((item) => {
          return { id: item.userId, nickName: item.nickname };
        });
      });
      // 所有书城平台
      getAllBook().then((response) => {
        let data = response.data;
        this.bookAll = data.map((item) => {
          let { platformName, id } = item;
          return { label: platformName, value: id };
        });
      });
    },
    /** 新增公众号*/
    handleAdd() {
      this.isAdd = true;
      this.openEdit = true;
      this.queryPlatform = {}
    }, 
    /** 编辑按钮方法 */
    handleEdit(value) {
      let { id, nickName, authStatus, appid, account, password, authTime, authTimeout, administratorName, managePhone, managePhoneNo, administratorCard, administratorWechat, legalName, legalCard, legalWechat, resourceInfo } = value;
      this.queryPlatform = { appid, account, password, authTime, authTimeout, 
        nickName, administratorName, managePhone, managePhoneNo, authStatus, 
        administratorCard, administratorWechat, legalName, legalCard, 
        legalWechat, id, putStatus: resourceInfo.putStatus, 
        putChannel: resourceInfo.putChannel, 
        rechargeTemplate: resourceInfo.rechargeTemplate,
        periodId: resourceInfo.periodId, 
        platformId: resourceInfo.platformId, 
        platformAccountId: resourceInfo.platformAccountId,
        bookId: resourceInfo.bookId,
        businessGroupId: resourceInfo.businessGroupId
      };
      this.isAdd = false;
      this.openEdit = true;
    },
    /** 查询公众号列表 */
    getList() {
			this.loading = true
      getAccountList(this.queryParams).then((response) => {
				this.loading = false
        let data = response.data;
        this.accountList = data.records;
        this.total = data.total;
        if (this.batchAssignPlatForm.mpIds) {
          let mpIds = this.batchAssignPlatForm.mpIds.map(item => item.id)
          this.$nextTick(() => {
            data.records.forEach(item => {
              if(mpIds.includes(item.id)) {
                this.$refs.multipleTable.toggleRowSelection(item);
              }
            })
          })
        }
      });
    },
    /** 搜索 */
    handleQuery() {
      this.getList();
    },
    /** 重置搜索条件 */
    resetQuery() {
      this.resetForm("queryForm");
      this.getList();
    },
    /** 授权 */
    authorizeHandle(value) {
      let callbackPage =
        window.location.origin + "/admin/#/accounts/account/wxCode?uuid=UUID";
      getAccount({ callbackPage, id: value.id }).then((response) => {
        if (response.data) {
          window.open(response.data);
        }
      });
    },
    /** 新增 编辑 提交 */
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let { authTime, authTimeout } = this.queryPlatform;
          let params = { ...this.queryPlatform };
          if (authTime) {
            authTime = this.parserTime(authTime);
            params.authTime = authTime
          }
          if (authTimeout) {
            authTimeout = this.parserTime(authTimeout);
            params.authTimeout = authTimeout
          }
          
          if (this.isAdd) {
            console.log(params)
            addAccount(params).then(res => {
              if (res.data) {
                this.msgSuccess("新增成功");
                this.resetForm("platForm");
                this.openEdit = false;
                this.getList();
              } else {
                console.error(res);
              }
            })
          } else {
            params.id = this.queryPlatform.id;
            editAccount(params).then((response) => {
              if (response.data) {
                this.msgSuccess("修改成功");
                this.resetForm("platForm");
                this.openEdit = false;
                this.getList();
              } else {
                console.error(response);
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    /** 时间转换 */
    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;
    },
    /** 表格状态管理 */
    tableRowClassName({ row, rowIndex }) {
      if (row.authStatus === 1) {
        return "danger-row";
      }
      return "";
    },
    /** 分组新政 */
    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;
        } else {
          console.error(response);
        }
      });
    },
    /** 获取分组 */
    getGroupList() {
      getGroupAllList().then((response) => {
        this.groupingData = response.data.map((item) => {
          return { ...item, isUpdata: false };
        });
      });
    },
    /** 修改公众号分组 */
    editAccountGroup(id, resourceGroupId) {
      editAccountGroup({ id, resourceGroupId }).then((response) => {
        if (response.data) {
          this.getList();
          this.msgSuccess("设置成功");
        } else {
          console.error(response);
        }
      });
    },
    /** 复制 */
    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: flex-start;
  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, 0.5);
      border-radius: 2px;
    }
    i {
      cursor: pointer;
    }
  }
}
.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>