ylrz_scrm_companyUI/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="corpId">
        <el-select v-model="queryParams.corpId" placeholder="企微主体" size="small" @change="updateCorpId()">
          <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="企微账号" 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>
        <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="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 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="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="loginStatus">-->
      <!--        <template slot-scope="scope">-->
      <!--          <el-tag v-if="scope.row.loginStatus == 1 && 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="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" 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-->
          <!--            v-if="scope.row.toolStatus==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.appKey!=null && scope.row.toolStatus === 1 && scope.row.loginStatus === 1"-->
          <!--            size="mini"-->
          <!--            type="text"-->
          <!--            icon="el-icon-moon"-->
          <!--            plain-->
          <!--            @click="handleLoginOutQwStatus(scope.row)"-->
          <!--            v-hasPermi="['qw:user:login']"-->
          <!--          >-->
          <!--            退出企微-->
          <!--          </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"
            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>
        </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>
        </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="授权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="qwLogin.title"
      :visible.sync="qwLogin.open"
      width="600px"
      append-to-body
      custom-class="qr-login-dialog"
    >
      <div class="qr-login-container">
        <!-- 包裹 el-image 的 div，控制加载状态 -->
        <div class="image-wrapper" v-loading="imageLoading" element-loading-text="加载中..." element-loading-spinner="el-icon-loading">
          <!-- 如果图片未加载或加载失败，显示一个占位图 -->
          <el-image
            :src="'data:image/png;base64,' + qwLogin.codeUrl"
            style="display: block; margin: 0 auto; width: 300px; height: 300px;"
            @click="handleQrCodeClick"
          />
        </div>
        <p class="qr-login-instructions">使用企业微信扫码授权登录</p>
        <el-input
          v-model="qwLogin.code"
          placeholder="请输入六位验证码 按回车"
          clearable
          size="small"
          type="text"
          maxlength="6"
          class="verification-code-input"
          @input="validateCode"
          @keyup.native.enter="handleLoginQwCodeMsg"
        />
      </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>

  </div>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  exportUser,
  updateUserWeclome,
  getMyQwCompanyList,
  relieveFastGptRoleById,
  staffListUser,
  loginQwCode,
  modifyLoginQwStatus,
  loginQwCodeMsg,
  getQwCodeUrl,
  logoutQwLogout,
  loginQwCodeUrl,
  getLoginQwStatus,
  qwBindCloudHost, qwUnbindCloudHost, handleAuthAppKey, handleInputAuthAppKey, selectCloudAP
} from '@/api/qw/user'
import fastGptRole from "@/views/fastGpt/fastGptRole/fastGptRole";
import {updateSop, updateSopQwUser} from "@/api/qw/sop";

export default {
  name: "User",
  components: { fastGptRole},
  data() {
    return {
      updateIp:{
        open:false,
        title: "修改云主机IP"
      },
      updateIpForm:{
        id:null,
        newIp:null,
      },
      authorizeKeyOpen:false,
      authorizeKeyFrom:{
        id:null,
        appKey:null,
        qwUserId:null,
        qwUserName:null
      },
      updateIpRule:{},
      newIp:null,
      //放大图片
      dialogImageUrl:null,
      dialogVisible:false,

      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      //公司列表
      myQwCompanyList:[],
      // 企微用户表格数据
      userList: [],
      allowSelectOptions:[],
      // 弹出层标题
      bindAiTitle: "",
      bindAiOpen: false,
      qwLogin:{
        title:"",
        open:false,
        codeUrl:null,
        code:null,
        appKey:null,
      },

      cloudAPOpen:{
        open:false,
        admin:null,
        passWord:null,
      },
      callOpen:{
        open:false,
        title: '修改员工称呼',

      },
      callOpenFrom:{
        id:null,
        welcomeText:null,
      },
      qrCodeInterval:null,
      loginQwInterval:null,
      loginOutQwInterval:null,
      imageLoading: true, // 控制加载状态
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        qwUserId: null,
        corpId: null,
        qwUserName: 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() {

    getMyQwCompanyList().then(response => {
      this.myQwCompanyList = response.data;
      if(this.myQwCompanyList!=null){
        this.queryParams.corpId=this.myQwCompanyList[0].dictValue;
        this.getList();
      }
    });


  },
  watch: {
    // 监听弹窗的可见性变化
    'qwLogin.open'(newVal) {
      if (!newVal) {
        // 如果弹窗关闭，清除定时器
        this.beforeDestroy();

      }
    },
  },
  methods: {
    // handleChangeIP(row){
    //   this.updateIp.open = true
    //   this.updateIpForm.id = row.id
    //   this.updateIpForm.newIp = null;
    // },
    // submitUpdateIpForm(){
    //   if (this.updateIpForm.newIp==null){
    //     this.$message.warning("请填写IP")
    //     return
    //   }
    //   const data = {
    //     id : this.updateIpForm.id,
    //     loginCodeUrl : this.updateIpForm.newIp
    //   }
    //
    //   updateUser(data).then(response => {
    //     this.msgSuccess("绑定成功");
    //     this.updateIp.open = false;
    //     this.getList();
    //   });
    // },
    /** 查询企微用户列表 */
    getList() {
      this.loading = true;
      staffListUser(this.queryParams).then(response => {
        this.userList = response.rows;
        this.total = response.total;
        this.loading = false;

      });

    },
    updateCorpId(){
      this.reset();
      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;
    },
    //登录
    handleLoginQwCode(val){

      // v-if="scope.row.appKey!=null && scope.row.toolStatus === 1 && scope.row.loginStatus === 0"
      if (val.appKey==null || val.appKey===''){
        return this.$message.warning("没有授权码，无法登录企业微信，请授权");
      }

      if (val.toolStatus===0 || val.toolStatus==null ){
        return this.$message.warning("插件离线了，无法登录企业微信，请联系管理员~");
      }

      if (val.loginStatus===1 && val.toolStatus===1){
        return this.$message.success("已经登录了，无需重复登录");
      }

      loginQwCode({appKey:val.appKey}).then(res => {
        this.qwLogin.appKey=val.appKey;
        this.qwLogin.open=true;
        this.imageLoading=true;

        //定时器 获取登录状态(有自动登录的)
        this.loginQwPolling();

        // 调用后台接口获取新的二维码URL
        loginQwCodeUrl({ appKey: this.qwLogin.appKey }).then(res => {
          getQwCodeUrl({appKey:this.qwLogin.appKey}).then(res=>{
            this.qwLogin.codeUrl=res.base64 // 更新二维码URL
          }).catch(()=>{
            this.resetQwLogin();
          }).finally(()=>{
            this.imageLoading=false;
          })

        });

        // setTimeout(()=>{
        //
        //     getQwCodeUrl({appKey:val.appKey}).then(res=>{
        //       this.qwLogin.codeUrl=res.base64
        //     }).catch(()=>{
        //       this.resetQwLogin();
        //     }).finally(()=>{
        //       this.imageLoading=false;
        //     })
        //
        // },3000)

        // 启动定时器，每隔45秒更新一次二维码
        this.startQrCodePolling();

      })
    },

    // 每隔45秒请求一次二维码
    startQrCodePolling() {
      this.qrCodeInterval = setInterval(() => {
        this.refreshQrCode();
      }, 45000);  // 45秒更新一次
    },

    loginQwPolling() {
      let elapsedTime = 0;  // 记录已执行的时间（单位：秒）

      this.loginQwInterval = setInterval(() => {
        // 每次轮询后增加已执行的时间
        elapsedTime += 5;  // 因为每 3 秒执行一次

        // 请求登录状态
        getLoginQwStatus({ appKey: this.qwLogin.appKey }).then(res => {
          if (res.status==1) {
            this.$message.success('登录成功');
            clearInterval(this.loginQwInterval);  // 登录成功，停止轮询
            this.resetQwLogin();
          }
          // 判断是否超过最大轮询时间（60秒）
          if (elapsedTime >= 90) {
            clearInterval(this.loginQwInterval);  // 超过90秒停止轮询
            this.$message.warning('登录超时，请稍后再试！')
            this.resetQwLogin();
          }
        });
      }, 3000);  // 每 3 秒更新一次
    },

    // 退出时清除定时器
    beforeDestroy() {
      if (this.qrCodeInterval) {
        clearInterval(this.qrCodeInterval);  // 清除定时器
      }
      if (this.loginQwInterval) {
        clearInterval(this.loginQwInterval);  // 清除定时器
      }
      if (this.loginOutQwInterval){
        clearInterval(this.loginOutQwInterval);  // 清除定时器
      }
      this.resetQwLogin();
    },

    // 刷新二维码
    refreshQrCode() {
      // 调用后台接口获取新的二维码URL
      loginQwCodeUrl({ appKey: this.qwLogin.appKey }).then(res => {
        getQwCodeUrl({appKey:this.qwLogin.appKey}).then(res=>{
          this.qwLogin.codeUrl=res.base64 // 更新二维码URL
        }).catch(()=>{
          this.resetQwLogin();
        }).finally(()=>{
          this.imageLoading=false;
        })

      });
    },

    handleQrCodeClick(){
      this.imageLoading=true;
      // 调用后台接口获取新的二维码URL
      loginQwCodeUrl({ appKey: this.qwLogin.appKey }).then(res => {

        setTimeout(()=>{
          getQwCodeUrl({appKey:this.qwLogin.appKey}).then(res=>{

            //确保万一再调用一下刷新二维码
            this.qwLogin.codeUrl=res.base64 // 更新二维码URL

          }).catch(()=>{
            this.resetQwLogin();
          }).finally(()=>{
            this.imageLoading=false;
          })

        },3000)


      });
    },
    //退出
    handleLoginOutQwStatus(val){
      this.loading=true;
      logoutQwLogout({appKey:val.appKey,loginStatus:0}).then(res => {

        let elapsedTime = 0;  // 记录已执行的时间（单位：秒）

        this.loginOutQwInterval = setInterval(() => {
          // 每次轮询后增加已执行的时间
          elapsedTime += 3;  // 因为每 3 秒执行一次

          // 请求登录状态
          getLoginQwStatus({ appKey: val.appKey }).then(res => {
            if (res.status==0) {
              this.$message.success('退出成功');
              clearInterval(this.loginOutQwInterval);  // 登录成功，停止轮询
              this.resetQwLogin();
            }

            // 判断是否超过最大轮询时间（60秒）
            if (elapsedTime >= 90) {
              clearInterval(this.loginOutQwInterval);  // 超过90秒停止轮询
              this.$message.warning('退出超时，请多等待后刷新页面！')
              this.resetQwLogin();

            }
          });
        }, 3000);  // 每 3 秒更新一次

      })
    },

    //传验证码
    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();
            });
          }
        }
      });
    },


    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,
      };
      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("解绑成功");
      })

    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.corpId=this.myQwCompanyList[0].dictValue;
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      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 exportUser(queryParams);
      }).then(response => {
        this.download(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
};
</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%;
}

</style>