ylrz_saas_his_scrm_adminUI/src/views/qw/user/index.vue

<template>

  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="100px">
      <el-form-item label="公司" prop="companyId">
        <el-select filterable v-model="queryParams.companyId" placeholder="请选择公司名" clearable size="small" @change="handleCompanyChange">
          <el-option
            v-for="item in myCompanyList"
            :key="item.companyId"
            :label="item.companyName"
            :value="item.companyId"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="企微主体" prop="corpId">
        <el-select v-model="queryParams.corpId" placeholder="企微主体" size="small" @change="handleCorpChange">
          <el-option
            v-for="dict in myQwCompanyList"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="企微部门">
<!--        <treeselect :clearable="false"  v-model="queryParams.deptId"  :options="deptOptions" :show-count="true" placeholder="请选择归属部门"/>-->
        <treeselect
          :clearable="false"
          v-model="queryParams.deptId"
          :options="deptOptions"
          :show-count="true"
          placeholder="请选择归属部门"
          :load-options="loadOptions"
          :normalizer="normalizer"
        />
      </el-form-item>
      <el-form-item label="企微账号" prop="qwUserId">
        <el-input
          v-model="queryParams.qwUserId"
          placeholder="请输入企微账号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="企微昵称" prop="qwUserName">
        <el-input
          v-model="queryParams.qwUserName"
          placeholder="请输入企微昵称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>

      <el-form-item label="授权码" prop="appKey">
        <el-input
          v-model="queryParams.appKey"
          placeholder="请输入授权码"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="ipad状态" prop="loginStatus">
        <el-select v-model="queryParams.loginStatus" placeholder="请选择ipad状态" clearable>
          <el-option
            v-for="item in loginStatusOption"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="员工状态" prop="isDel">
        <el-select v-model="queryParams.isDel" placeholder="请选择员工状态" clearable>
          <el-option
            v-for="item in optionsStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" 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"
          :disabled="multiple"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="updateSendType"
        >修改发送方式
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          :loading="exportLoading"
          @click="handleExport"
          v-hasPermi="['qw:user:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table border v-loading="loading" :data="userList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="企微成员ID" align="center" prop="id" />
      <el-table-column label="企微账号" align="center" prop="qwUserId" />
      <el-table-column label="企微昵称" align="center" prop="qwUserName" />
      <el-table-column label="员工称呼" align="center" prop="welcomeText" />
      // 部门
      <el-table-column label="部门" align="center" prop="departmentName" />
      <el-table-column label="员工状态" align="center" prop="isDel">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.isDel == 0" type="success">正常</el-tag>
          <el-tag v-else type="error">离职</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="联系我二维码" align="center" prop="contactWay" >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.contactWay!=null"
            style="width: 100px; height: 100px"
            :src="scope.row.contactWay"
            fit="contain"
            @click="openImageViewer(scope.row.contactWay)"/>
        </template>
      </el-table-column>
      <el-table-column label="绑定的AI客服" align="center" prop="fastGptRoleName" />
      <el-table-column label="授权码" align="center" prop="appKey" />
      <el-table-column label="发送方式" align="center" prop="sendMsgType">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.sendMsgType == 0">方式一</el-tag>
          <el-tag v-if="scope.row.sendMsgType == 1" type="success">方式二</el-tag>
          <el-tag v-if="scope.row.sendMsgType == 2" type="warning">掉线通知</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="vid" align="center" prop="vid" />
      <el-table-column label="uid" align="center" prop="uid" />
      <el-table-column label="serverId" align="center" prop="serverId" />
      <el-table-column label="ipad状态" align="center" prop="loginStatus">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.ipadStatus == 1" type="success">在线</el-tag>
          <el-tag v-else type="danger">离线</el-tag>
        </template>
      </el-table-column>
      <!--      <el-table-column label="插件状态" align="center" prop="toolStatus">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tag v-if="scope.row.toolStatus == 1" type="success">在线</el-tag>-->
      <!--          <el-tag v-else type="danger">离线</el-tag>-->
      <!--        </template>-->
      <!--      </el-table-column>-->
      <!--      <el-table-column label="插件版本" align="center" prop="version"/>-->
<!--      <el-table-column label="服务器地址" align="center" prop="loginCodeUrl">-->
<!--        <template slot-scope="scope">-->
<!--          <el-tooltip class="item" effect="dark" :content="scope.row.loginCodeUrl" placement="top">-->
<!--            <div style="display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; text-overflow: ellipsis;">-->
<!--              <span>{{ scope.row.loginCodeUrl }}</span>-->
<!--            </div>-->
<!--          </el-tooltip>-->
<!--        </template>-->
<!--      </el-table-column>-->

<!--      <el-table-column label="自动发课" align="center" prop="isAuto">-->
<!--        <template slot-scope="scope">-->
<!--          <dict-tag :options="isAutoOptions" :value="scope.row.isAuto"/>-->
<!--        </template>-->
<!--      </el-table-column>-->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-user-solid"
            plain
            @click="handleAppellation(scope.row)"
          >
            修改员工称呼
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-user-solid"
            plain
            @click="handleAutoRemark(scope.row)"
          >
            完课备注修改
          </el-button>

          <el-button
            v-if="scope.row.serverStatus==1&&scope.row.ipadStatus!=1"
            size="mini"
            type="text"
            icon="el-icon-sunny"
            plain
            @click="handleLoginQwCode(scope.row)"
            v-hasPermi="['qw:user:login']"
          >
            登录企微
          </el-button>
          <el-button
            v-if="scope.row.serverStatus==1&&scope.row.ipadStatus==1"
            size="mini"
            type="text"
            icon="el-icon-moon"
            plain
            @click="handleLoginOutQwStatus(scope.row)"
            v-hasPermi="['qw:user:login']"
          >
            退出企微
          </el-button>
          <el-button
            v-if="scope.row.ipadStatus==1"
            size="mini"
            type="text"
            icon="el-icon-moon"
            plain
            @click="handleTwoCode(scope.row)"
            v-hasPermi="['qw:user:login']">
            二次验证
          </el-button>
<!--          <el-button-->
<!--            v-if="scope.row.serverStatus!=1"-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-moon"-->
<!--            plain-->
<!--            @click="handleGetQwIpad(scope.row)"-->
<!--            v-hasPermi="['qw:user:login']"-->
<!--          >-->
<!--            获取Ai主机-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            v-if="scope.row.serverStatus==1 && scope.row.ipadStatus!=1"-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-moon"-->
<!--            plain-->
<!--            @click="handleDelQwIpad(scope.row)"-->
<!--            v-hasPermi="['qw:user:login']"-->
<!--          >-->
<!--            解绑Ai主机-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            v-if="scope.row.isAuto=='00'"-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-moon"-->
<!--            plain-->
<!--            @click="handleUpdateIsAuto(scope.row,'01')"-->
<!--            v-hasPermi="['qw:user:isauto']"-->
<!--          >-->
<!--            启用插件-->
<!--          </el-button>-->
<!--          <el-button-->
<!--            v-if="scope.row.isAuto=='01'"-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-moon"-->
<!--            plain-->
<!--            @click="handleUpdateIsAuto(scope.row,'00')"-->
<!--            v-hasPermi="['qw:user:isauto']"-->
<!--          >-->
<!--            禁用插件-->
<!--          </el-button>-->
        </template>
      </el-table-column>
      <el-table-column label="主机" align="center" class-name="small-padding fixed-width" width="110px" fixed="right">
        <template slot-scope="scope">

          <el-button
            v-if="scope.row.appKey==null"
            size="mini"
            type="text"
            icon="el-icon-s-check"
            plain
            v-hasPermi="['qw:user:authAppKey']"
            @click="uploadAuthorizeKey2(scope.row)"
          >授权key
          </el-button>
<!--          <el-button
            v-if="scope.row.loginCodeUrl==null && scope.row.appKey !=null"
            v-show="false"
            size="mini"
            type="text"
            icon="el-icon-sunny"
            plain
            @click="handleBindCloudHost(scope.row)"
            v-hasPermi="['qw:user:loginIp']"
          >
            绑定主机
          </el-button>-->
          <!--          <el-button-->
          <!--            v-if="scope.row.loginCodeUrl!=null"-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-video-camera-solid"-->
          <!--            plain-->
          <!--            @click="handleCloudAP(scope.row.loginCodeUrl)"-->
          <!--            v-hasPermi="['qw:user:cloudAP']"-->
          <!--          >-->
          <!--            获取主机帐密-->
          <!--          </el-button>-->
<!--          <el-button-->
<!--            v-if="scope.row.loginCodeUrl!=null"-->
<!--            size="mini"-->
<!--            type="text"-->
<!--            icon="el-icon-moon"-->
<!--            plain-->
<!--            @click="handleUnbindCloudHost(scope.row)"-->
<!--            v-hasPermi="['qw:user:loginIpOut']"-->
<!--          >-->
<!--            解除主机-->
<!--          </el-button>-->
          <el-button
            size="mini"
            type="text"
            :icon="scope.row.videoGetStatus == 0 ? 'el-icon-circle-check' : 'el-icon-remove-outline'"
            plain
            @click="changeVideoStatus(scope.row)"
          >
            {{ scope.row.videoGetStatus == 0 ? "开启" : "禁用" }}视频号接收
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="AI客服" align="center" class-name="small-padding fixed-width" width="100px" fixed="right">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-connection"
            plain
            v-if="scope.row.fastGptRoleName!=null"
            @click="bindFastGptRole(scope.row)"
          >换绑AI客服</el-button>
          <el-button
            size="mini"
            type="text"
            plain
            icon="el-icon-link"
            v-else
            @click="bindFastGptRole(scope.row)"
          >绑定AI客服</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-unlock"
            plain
            v-if="scope.row.fastGptRoleName!=null"
            @click="relieveFastGptRole(scope.row)"
          >解绑AI客服</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-unlock"
            plain
            v-hasPermi="['qw:user:aiStatus']"
            v-if="scope.row.aiStatus == 0 && projectFrom === 'sxjz'"
            @click="updateFastGptRoleStatus(scope.row)"
          >Ai客服下线</el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-unlock"
            plain
            v-hasPermi="['qw:user:aiStatus']"
            v-if="scope.row.aiStatus == 1 && projectFrom === 'sxjz'"
            @click="updateFastGptRoleStatus(scope.row)"
          >Ai客服上线</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 绑定AI客服-->
    <el-dialog :title="bindAiTitle" :visible.sync="bindAiOpen" width="1200px" append-to-body>
      <fast-gpt-role ref="fastGptRole" @refreshFastGptList="refreshFastGptList" ></fast-gpt-role>
    </el-dialog>

    <!--    <el-dialog :visible.sync="updateIp.open" width="600px" append-to-body>-->
    <!--      <el-form ref="updateIpForm" :model="updateIpForm" :rules="updateIpRule" label-width="100px">-->
    <!--        <el-form-item label="新云主机IP" prop="Ip">-->
    <!--          <el-input v-model="updateIpForm.newIp" placeholder="请输入新IP" />-->
    <!--        </el-form-item>-->
    <!--      </el-form>-->
    <!--      <div slot="footer" class="dialog-footer" >-->
    <!--        <el-button type="primary" @click="submitUpdateIpForm">确 定</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->

    <el-dialog title="云主机信息" :visible.sync="cloudAPOpen.open" append-to-body>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>账号：{{cloudAPOpen.admin}}</span>
        </div>
        <div slot="header" class="clearfix">
          <span>密码：{{cloudAPOpen.passWord}}</span>
        </div>
      </el-card>
    </el-dialog>

    <el-dialog :title="callOpen.title" :visible.sync="callOpen.open" width="500px" append-to-body>
      <el-form ref="callOpenFrom" :model="callOpenFrom" :rules="callOpenRule" label-width="110px">
        <el-form-item label="员工称呼" prop="welcomeText">
          <el-input v-model="callOpenFrom.welcomeText" placeholder="请输入员工称呼" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="submitCallOpenFrom">确 定</el-button>
      </div>
    </el-dialog>


    <el-dialog :title="editRemarkOpen.title" :visible.sync="editRemarkOpen.open" width="500px" append-to-body>
      <el-form ref="callOpenFrom" :model="editRemarkOpen" label-width="110px">
        <el-radio-group v-model="editRemarkOpen.isSendMsg">
          <el-card>
            <el-row :gutter="20">
              <el-col>
                <el-radio
                  :label="1"
                  style="font-size: 16px; margin: 10px 0;"
                >添加【完课备注】在最【旧备注-(前面)】</el-radio>
              </el-col>
              <el-col>
                <el-radio
                  :label="2"
                  style="font-size: 16px; margin: 10px 0;"
                >添加【完课备注】在最【旧备注-(后面)】</el-radio>
              </el-col>
              <el-col>
                <el-radio
                  :label="3"
                  style="font-size: 16px; margin: 10px 0;"
                >使用简洁版备注【*日期完】,在【旧备注-前面】</el-radio>
              </el-col>
              <el-col>
                <el-radio
                  :label="4"
                  style="font-size: 16px; margin: 10px 0;"
                >使用简洁版备注【*日期完】,在【旧备注-后面】</el-radio>
              </el-col>
              <el-col>
                <el-radio
                  :label="5"
                  style="font-size: 16px; margin: 10px 0;"
                >不用完课备注</el-radio>
              </el-col>
            </el-row>
          </el-card>
        </el-radio-group>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitEditRemarkOpenFrom">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="授权key" :visible.sync="authorizeKeyOpen" width="500px" append-to-body>
      <el-form ref="authorizeKeyFrom" :model="authorizeKeyFrom" :rules="authorizeKeyRule" label-width="110px">
        <el-form-item label="授权的key值" prop="appKey">
          <el-input v-model="authorizeKeyFrom.appKey" placeholder="请输入授权key" type="Number"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="submitAuthorizeKeyForm">确 定</el-button>
      </div>
    </el-dialog>
    <!--二维码   -->
    <el-dialog
      title="企微二次认证"
      :visible.sync="qwLoginTwo.open"
      width="600px"
      append-to-body
      custom-class="qr-login-dialog"
    >
      <div class="qr-login-container">
        <div class="image-wrapper" v-loading="imageLoading" >
          <el-image
            :src="'data:image/png;base64,' +qwLoginTwo.codeUrl"
            style="display: block; margin: 0 auto; width: 300px; height: 300px;"
          />
        </div>
        <p class="qr-login-instructions">二次验证二维码</p>
      </div>
      <div slot="footer" class="dialog-footer" >
        <el-button type="primary" @click="qwLoginTwo.open=false">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="qwLogin.title"
      :visible.sync="qwLogin.open"
      width="600px"
      append-to-body
      custom-class="qr-login-dialog"
    >
      <div class="qr-login-container">
        <div class="image-wrapper" v-loading="imageLoading" >
          <el-image
            :src="'data:image/png;base64,' +qwLogin.codeUrl"
            style="display: block; margin: 0 auto; width: 300px; height: 300px;"
          />
        </div>
        <p class="qr-login-instructions">使用企业微信扫码授权登录</p>
      </div>
    </el-dialog>

    <el-dialog
      title="输入企微验证码"
      :visible.sync="qwCode.open"
      width="600px"
      append-to-body>
      <el-form  :model="qwCode"  label-width="80px" @submit.native.prevent="handleSubmit">
        <el-form-item label="验证码" prop="companyName">
          <el-input v-model="qwCode.code" placeholder="输入企微6位验证码" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitCodeForm">确 定</el-button>

      </div>
    </el-dialog>



    <!-- 大图预览对话框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :modal="false"
      width="1200"
      append-to-body>
      <img
        :src="this.dialogImageUrl"
        style="display: block; max-width: 100%; margin: 0 auto"
      />
    </el-dialog>
    <el-dialog
      :visible.sync="updateSendOpen"
      width="1000px"
      append-to-body>
      <el-form label-width="80px">
        <p>是否修改企微账号发送方式：
          <el-tag style="margin-left: 10px" v-for="name in names">{{ name }}</el-tag>
        </p>
        <el-form-item label="发送方式" prop="type">
          <el-radio-group v-model="type">
            <el-radio
              :label="0"
            >方式一
            </el-radio>
            <el-radio
              :label="1"
            >方式二
            </el-radio>
            <el-radio
              :label="2"
            >掉线通知
            </el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpdateSendTypeForm">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  updateIsAuto,
  updateUser,
  getMyQwCompanyList,
  relieveFastGptRoleById,
  loginQwIpad,
  loginQwCodeMsg,
  twoCode,
  twoCodeStatus,
  qrCodeStatus,
  updateSendType,
  getQwIpad,
  delQwIpad,
  qrCodeVerify,
  outLoginQwIpad,
  changeVideoStatus,
  handleAllocateRemoteHost,
  qwBindCloudHost, qwUnbindCloudHost, handleAuthAppKey,
  handleInputAuthAppKey, selectCloudAP, staffListUser, exportStaff, updateFastGptRoleStatusById, staffListPost
} from '../../../api/qw/user'
import fastGptRole from "@/views/fastGpt/fastGptRole/fastGptRole";
import { treeselect } from "@/api/qw/qwDept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {getCompanyList} from "../../../api/company/company";

export default {
  name: "cuDeptIdIndex",
  components: { fastGptRole,Treeselect},
  data() {
    return {
      deptOptions:[], // 企微部门
      isAutoOptions:[],
      updateIp:{
        open:false,
        title: "修改云主机IP"
      },
      updateIpForm:{
        id:null,
        newIp:null,
      },
      projectFrom:process.env.VUE_APP_PROJECT_FROM,
      authorizeKeyOpen:false,
      authorizeKeyFrom:{
        id:null,
        appKey:null,
        qwUserId:null,
        qwUserName:null
      },
      updateIpRule:{},
      newIp:null,
      //放大图片
      dialogImageUrl:null,
      dialogVisible:false,
      optionsStatus: [{
        value: 0,
        label: '正常'
      }, {
        value: 2,
        label: '离职'
      }],
      loginStatusOption: [{
        value: 0,
        label: '离线'
      }, {
        value: 1,
        label: '在线'
      }],
      // 遮罩层
      loading: true,
      names: [],
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      updateSendOpen: false,
      // 总条数
      total: 0,
      //公司列表
      myQwCompanyList:[],
      //销售公司
      myCompanyList: [],
      // 企微用户表格数据
      userList: [],
      allowSelectOptions:[],
      // 弹出层标题
      bindAiTitle: "",
      bindAiOpen: false,
      qwLogin:{
        title:"",
        open:false,
        codeUrl:null,
        code:null,
        appKey:null,
      },
      qwLoginTwo:{
        title:"",
        open:false,
        codeUrl:null,
        code:null,
        appKey:null,
      },
      qwCode:{
        title:"",
        open:false,
        code:null,
      },
      cloudAPOpen:{
        open:false,
        admin:null,
        passWord:null,
      },
      callOpen:{
        open:false,
        title: '修改员工称呼',

      },
      callOpenFrom:{
        id:null,
        welcomeText:null,
      },
      isAutoForm:{
        id:null,
        isAuto:null,
      },

      editRemarkOpen: {
        open: false,
        title: '修改员工自动给完课客户打备注的规则',
        id:null,
        isSendMsg:null,
      },

      twoCodeInterval:null,
      type: 0,
      loginQwInterval:null,

      imageLoading: true, // 控制加载状态
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        qwUserId: null,
        loginStatus: null,
        corpId: null,
        qwUserName: null,
        deptId:null,
        companyId: null,
      },
      qwUserId:null,
      companyUserList:[],
      // 表单参数
      form: {
        isSendMsg: '2',
      },
      authorizeKeyRule:{
        appKey:[{required:true,message:"授权码不能为空",trigger:"blur"}]
      },
      callOpenRule:{
        // welcomeText:[{required:true,message:"员工称呼不能为空",trigger:"blur"}]
      },
      // 表单校验
      rules: {
      },
      //欢迎语表单校验
      weclomeRules:{
        welcomeText:[{required:true,message:"消息文本不能为空",trigger:"blur"}]
      },
    };
  },
  created() {
    Promise.all([
      this.getDicts("qw_user_is_auto"),
      getCompanyList()
    ]).then(responses => {
      this.myCompanyList = responses[1].data;
      if(this.myCompanyList && this.myCompanyList.length > 0){
        this.queryParams.companyId = this.myCompanyList[0].companyId;
      }

      return getMyQwCompanyList(this.queryParams.companyId);
    }).then(response => {
      this.myQwCompanyList = response.data;
      if(this.myQwCompanyList && this.myQwCompanyList.length > 0){
        this.queryParams.corpId = this.myQwCompanyList[0].dictValue;
        if(this.queryParams.corpId){
          this.getTreeselect();
        }
      }

      // 最后获取列表数据
      this.getList();
      this.loading = false;
    });
  },
  watch: {
    // 监听弹窗的可见性变化
    'qwLogin.open'(newVal) {
      if (!newVal) {
        // 如果弹窗关闭，清除定时器
        clearInterval(this.loginQwInterval);

      }
    },
  },
  methods: {
    /** 公司选择改变事件 */
    handleCompanyChange(companyId) {
      this.queryParams.corpId = null;
      this.queryParams.deptId = null;

      // 根据选择的公司获取对应的企微主体列表
      if (companyId) {
        getMyQwCompanyList(companyId).then(response => {
          this.myQwCompanyList = response.data;
          if (this.myQwCompanyList && this.myQwCompanyList.length > 0) {
            this.queryParams.corpId = this.myQwCompanyList[0].dictValue;
            if(this.queryParams.corpId){
              return this.getTreeselect();  // 返回Promise
            }
          } else {
            this.myQwCompanyList = [];
            this.queryParams.corpId = null;
          }
        }).then(() => {
          // 在所有异步操作完成后调用getList
          this.getList();
        }).catch(error => {
          console.error('获取企微主体列表失败:', error);
          this.myQwCompanyList = [];
          this.queryParams.corpId = null;
          this.getList();  // 即使出错也要调用getList
        });
      } else {
        this.myQwCompanyList = [];
        this.queryParams.corpId = null;
        this.getList();  // 没有companyId时也调用getList
      }
    },
    handleCorpChange(corpId) {
      this.queryParams.deptId = null;
      if (corpId) {
        // 等待 getTreeselect 完成后再调用 getList
        this.getTreeselect().then(() => {
          this.getList();
        });
      } else {
        this.getList();  // 没有 corpId 时也调用 getList
      }
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      let query = {
        corpId: this.queryParams.corpId
      }
      // 企微主体不能为空
      if (!query.corpId) {
        this.$message.error("请选择企微主体");
        // 返回一个已解决的 Promise
        return Promise.resolve();
      }

      return treeselect(query).then((response) => {
        this.deptOptions = response.data;
        if (response.data != null && response.data.length > 0) {
          this.queryParams.deptId = response.data[0].id;
        }
      });
    },

    /** 树形选择器格式化 */
    normalizer(node) {
      return {
        id: node.id,
        label: node.label || node.name,
        children: node.children,
        // 判断是否为叶子节点，没有子节点时不能再展开
        isLeaf: !node.children || node.children.length === 0
      }
    },
    /** 动态加载选项 */
    loadOptions({ action, parentNode, callback }) {
      if (action === 'LOAD_CHILDREN') {
        // 根据父节点加载子节点
        let query = {
          corpId: this.queryParams.corpId,
          parentId: parentNode.id
        };
        treeselect(query).then(response => {
          const children = response.data || [];
          parentNode.children = children;

          // 根据实际子节点数量更新父节点的叶子节点状态
          parentNode.isLeaf = !children || children.length === 0;

          callback();
        }).catch(error => {
          console.error('加载子节点失败:', error);
          // 加载失败时设置为空数组和叶子节点
          parentNode.children = [];
          parentNode.isLeaf = true;
          callback();
        });
      }
    },
    getList() {
      this.loading = true;
      staffListUser(this.queryParams).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;
      });

    },
    changeVideoStatus(val){
      changeVideoStatus(val.id).then(res => {
        this.$message.success("修改状态成功");
        this.getList()
      })
    },

    //绑定AI客服
    bindFastGptRole(row) {
      this.bindAiTitle = "绑定AI客服";
      this.bindAiOpen = true;
      setTimeout(() => {
        this.$refs.fastGptRole.handleBindAiData(row)
      }, 200);

    },
    handleAppellation(val) {
      this.callOpen.open = true;
      this.callOpenFrom.welcomeText = val.welcomeText;
      this.callOpenFrom.id = val.id;
    },

    handleAutoRemark(val) {
      this.editRemarkOpen.open = true;
      this.editRemarkOpen.id = val.id;
      this.editRemarkOpen.isSendMsg = val.isSendMsg;
    },
    //登录
    handleLoginQwCode(val) {
      if (val.appKey == null || val.appKey === '') {
        return this.$message.warning("没有授权码，无法登录企业微信，请授权");
      }
      loginQwIpad({qwUserId: val.id}).then(res => {
        this.qwUserId = val.id;
        this.qwLogin.code = null;
        this.imageLoading = false;
        console.log(res)
        if (res.msg == "success") {
          this.qwLogin.codeUrl = res.qrCode64
          this.qwLogin.open = true;
          this.loginQwPolling();
        } else {
          this.$message.success(res.msg);
          this.getList()
        }

      })
    },

    handleTwoCode(val) {

      twoCode({qwUserId: val.id}).then(res => {
        console.log(res)
        this.qwLoginTwo.open = true;
        this.qwLoginTwo.codeUrl = res.qrCode

      });


    },
    twoCodePolling() {
      this.twoCodeInterval = setInterval(() => {
        twoCodeStatus({qwUserId: this.qwUserId}).then(res => {
          console.log(res)

          if (res.msg == 104001) {
            this.$message.success('登录成功');
            this.clearDl()
            clearInterval(this.loginQwInterval);
          } else if (res.msg == 100004) {
            this.clearDl()
          }
        });
      }, 3000);
    },
    loginQwPolling() {
      this.loginQwInterval = setInterval(() => {
        qrCodeStatus({qwUserId: this.qwUserId}).then(res => {
          console.log(res)
          if (res.msg == 22) {
            this.$message.success('账号企业不一致请重新扫码登录');
            this.clearDl();
          }
          if (res.msg == 23) {
            this.$message.success('账号不匹配，请同步信息后重新扫码登录');
            this.clearDl();
          }
          if (res.msg == 104001) {
            this.$message.success('登录成功');
            this.clearDl()

          } else if (res.msg == 100004) {
            this.qwCode.open = true;
            clearInterval(this.loginQwInterval);
          }
        });
      }, 3000);
    },
    submitCodeForm() {

      qrCodeVerify({code: this.qwCode.code, qwUserId: this.qwUserId}).then(res => {
        console.log(res)

        this.$message.success('验证成功账号信息确认中。。。。');
        this.qwCode.open = false;
        this.loginQwInterval = setTimeout(() => {
          qrCodeStatus({qwUserId: this.qwUserId}).then(res => {
            console.log(res);
            if (res.msg == 23) {
              this.$message.error('账号不一致请重新扫码登录');
              this.clearDl();
            }
            if (res.msg == 22) {
              this.$message.error('账号企业不一致请重新扫码登录');
              this.clearDl();
            }
            if (res.msg == 104001) {
              this.$message.success('登录成功');
              this.clearDl();
            }
          });
        }, 4000);
      });
    },

    clearDl() {
      this.qwCode.open = false;
      this.qwLogin.open = false;
      clearInterval(this.loginQwInterval);
      this.getList()
    },


    //退出
    handleLoginOutQwStatus(val) {
      outLoginQwIpad({qwUserId: val.id}).then(res => {

        this.$message.success("退出登录成功");
        this.getList()
      })

    },


    handleGetQwIpad(val) {
      getQwIpad({qwUserId: val.id}).then(res => {
        this.$message.success("获取主机成功");
        this.getList();
      }).catch(error => {
        console.log(error);
        if (error.code === 501) {
          this.$confirm(
            '当前区域没有多余的名额，将为你分配异地名额，会导致企业微信需要扫脸重新登录，并且半个小时后需要进行验证',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning',
              dangerouslyUseHTMLString: true
            }
          ).then(() => {
            return handleAllocateRemoteHost({qwUserId: val.id});
          }).then(res => {
            this.$message.success('异地主机分配成功');
            this.getList();
          }).catch(() => {
            this.$message.info('已取消异地主机分配');
          });
        } else {
          this.$message.error('获取主机失败');
        }
      });
    },
    handleDelQwIpad(val) {
      delQwIpad({qwUserId: val.id}).then(res => {
        this.$message.success("解绑主机成功");
      }).finally(res => {
        this.getList();
      })
    },

    handleUpdateIsAuto(val,code) {
      this.isAutoForm={
        id:val.id,
        isAuto:code
      }
      updateIsAuto(this.isAutoForm).then(res => {
        if (code==='00'){
          this.$message.success('禁用成功');
        }else {
          this.$message.success('启用成功');
        }
        this.getList();
      });


    },
    //传验证码
    handleLoginQwCodeMsg() {
      loginQwCodeMsg({appKey: this.qwLogin.appKey, code: this.qwLogin.code}).then(res => {
        this.qwLogin.open = false;
        this.$message.success("登录成功");
      })
    },

    validateCode() {
      // 只允许输入数字并限制长度为6
      this.qwLogin.code = this.qwLogin.code.replace(/\D/g, "").slice(0, 6);
    },

    handleCloudAP(urlAP) {

      selectCloudAP({ipAddress: urlAP}).then(res => {
        this.cloudAPOpen.open = true
        this.cloudAPOpen.admin = res.data.apAdmin;
        this.cloudAPOpen.passWord = res.data.apPassword;
      })
    },

    handleUnbindCloudHost(val) {

      const appKey = val.appKey;

      this.$confirm(
        '确定要给企微账号：<span style="color: green;">' + val.qwUserId + '' +
        '</span><br>企微昵称：<span style="color: red;">【' + val.qwUserName + '】</span>' +
        '</span><br><span style="color: orange;">解绑【Ps:解绑后此云主机可能会分配给他人】</span></span>',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true // 允许使用 HTML 字符串
        }
      ).then(() => {
        return qwUnbindCloudHost(appKey);
      }).then(response => {
        this.$message.success('解绑成功');
      }).finally(res => {
        this.getList();
      })

    },


    handleAuthorizeKey(val) {
      this.authorizeKeyFrom.id = val.id;
      this.authorizeKeyFrom.qwUserId = val.qwUserId;
      this.authorizeKeyFrom.qwUserName = val.qwUserName;
      this.authorizeKeyOpen = true;

    },

    submitAuthorizeKeyForm() {
      this.$refs["authorizeKeyFrom"].validate(valid => {
        if (valid) {
          if (this.authorizeKeyFrom.id != null && this.authorizeKeyFrom.appKey != null) {
            this.uploadAuthorizeKey();
          }
        }
      });
    },
    submitCallOpenFrom() {

      this.$refs["callOpenFrom"].validate(valid => {
        if (valid) {

          if (this.callOpenFrom.id != null && this.callOpenFrom.welcomeText != null) {
            updateUser(this.callOpenFrom).then(res => {
              this.$message.success('修改成功');
              this.callOpen.open = false;
              this.getList();
            });
          }
        }
      });
    },

    submitEditRemarkOpenFrom() {
      if (this.editRemarkOpen.id != null && this.editRemarkOpen.isSendMsg != null) {
        updateUser(this.editRemarkOpen).then(res => {
          this.$message.success('修改成功');
          this.editRemarkOpen.open = false;
          this.getList();
        });
      } else {
        this.$message.error("请选择条件")
      }
    },


    uploadAuthorizeKey() {
      this.$confirm(
        '确定要给企微账号：<span style="color: green;">' + this.authorizeKeyFrom.qwUserId + '' +
        '</span><br>企微昵称：<span style="color: red;">【' + this.authorizeKeyFrom.qwUserName + '】</span>' +
        '</span><br>授权key：<span style="color: #04adf6;">【' + this.authorizeKeyFrom.appKey + '】</span>?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true // 允许使用 HTML 字符串
        }
      ).then(() => {
        this.authorizeKeyOpen = false;
        return handleInputAuthAppKey(this.authorizeKeyFrom);
      }).then(response => {
        this.msgSuccess("授权key完成");
      }).finally(res => {
        this.resetAuthorizeKeyFrom();
        this.getList();
      })

    },

    uploadAuthorizeKey2(val) {
      const id = val.id;
      this.$confirm(
        '确定要给企微账号：<span style="color: green;">' + val.qwUserId + '' +
        '</span><br>企微昵称：<span style="color: red;">【' + val.qwUserName + '】</span>' +
        '</span><br>授权key</span>?',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true // 允许使用 HTML 字符串
        }
      ).then(() => {
        return handleAuthAppKey({id: id});
      }).then(response => {
        this.msgSuccess("授权key完成");
      }).finally(res => {
        this.resetAuthorizeKeyFrom();
        this.getList();
      })
    },

    handleBindCloudHost(val) {

      if (val.appKey == null || val.appKey == '') {
        return this.$message.warning('没有授权码，无法绑定主机，请联系管理员');
      }

      const appKey = val.appKey;

      this.$confirm(
        '确定要给企微账号：<span style="color: green;">' + val.qwUserId + '' +
        '</span><br>企微昵称：<span style="color: red;">【' + val.qwUserName + '】</span>' +
        '</span><br><span style="color: dodgerblue;">绑定云主机?</span></span>',
        "警告",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
          dangerouslyUseHTMLString: true // 允许使用 HTML 字符串
        }
      ).then(() => {
        return qwBindCloudHost(appKey);
      }).then(response => {
        this.$message.success('绑定成功，请登录云主机进行配置~~');
      }).finally(res => {
        this.getList();
      })


    },

    openImageViewer(url) {
      // 打开大图预览对话框
      this.dialogImageUrl = url
      this.dialogVisible = true;
    },
    //刷新页面
    refreshFastGptList() {
      this.bindAiOpen = false;
      this.getList();
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        qwUserId: null,
        corpId: null,
        qwUserName: null,
        companyId: null,

      };
      this.resetForm("form");

    },

    //重置授权
    resetAuthorizeKeyFrom() {
      this.authorizeKeyFrom = {
        id: null,
        appKey: null,
        qwUserId: null,
        qwUserName: null
      };
    },
    //重置登录
    resetQwLogin() {
      this.qwLogin = {
        title: "",
        open: false,
        codeUrl: null,
        code: null,
        corpId: null,
        qwUserId: null,
      }
      this.qwLogin.open = false;
      this.loading = false;
      this.getList();
    },
    //解绑AI客服
    relieveFastGptRole(row) {
      this.$confirm('是否确认解绑AI客服?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return relieveFastGptRoleById(row.id);
      }).then(() => {
        this.getList();
        this.msgSuccess("解绑成功");
      })

    },

    updateFastGptRoleStatus(row) {
      this.$confirm('是否修改该销售的AI客服?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function () {
        return updateFastGptRoleStatusById(row.id);
      }).then(() => {
        this.getList();
        this.msgSuccess("修改成功");
      })
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.deptOptions = null;
      this.queryParams.deptId = null;
      Promise.all([
        this.getDicts("qw_user_is_auto"),
        getCompanyList()
      ]).then(responses => {
        this.myCompanyList = responses[1].data;
        if(this.myCompanyList && this.myCompanyList.length > 0){
          this.queryParams.companyId = this.myCompanyList[0].companyId;
        }

        return getMyQwCompanyList(this.queryParams.companyId);
      }).then(response => {
        this.myQwCompanyList = response.data;
        if(this.myQwCompanyList && this.myQwCompanyList.length > 0){
          this.queryParams.corpId = this.myQwCompanyList[0].dictValue;
          if(this.queryParams.corpId){
            this.getTreeselect();
          }
        }


        this.queryParams.loginStatus = null;
        this.handleQuery();
      });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.names = selection.map(item => item.qwUserName)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },


    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {

            // updateUser(this.form).then(response => {
            //   this.msgSuccess("绑定成功");
            //   this.open = false;
            //   this.getList();
            //
            // });
          } else {
            // addUser(this.form).then(response => {
            //   this.msgSuccess("新增成功");
            //   this.open = false;
            //   this.getList();
            // });
          }
        }
      });
    },

    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$confirm('是否确认导出所有企微员工数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.exportLoading = true;
        return exportStaff(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {
      });
    },
    updateSendType() {
      this.updateSendOpen = true;
    },
    cleanUpdateSendType() {
      this.updateSendOpen = false;
    },
    submitUpdateSendTypeForm(){
      updateSendType({ids: this.ids, type: this.type}).then(e => {
        this.updateSendOpen = false;
        this.$message.success("修改成功");
        this.getList();
      });
    },
  }
};
</script>
<style>
.text-container {
  max-height: 7.5em; /* 设置最大高度为6行，根据字体大小调整 */
  overflow-y: auto; /* 内容超出时显示滚动条 */
  line-height: 1.5em; /* 行高设置，确保每行高度一致 */
}

.qr-login-dialog .el-dialog__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 20px;
}

.qr-login-container {
  width: 100%;
}

.qr-login-instructions {
  font-size: 14px;
  color: #666;
  margin: 10px 0;
}

.verification-code-input {
  margin-top: 15px;
  width: 80%;
}

.vue-treeselect{
  width: 217px;
  height: 36px;
}

</style>