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="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="ai状态" 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" 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.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>
        </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="企微二次认证"
      :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>

  </div>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  exportUser,
  updateUserWeclome,
  getMyQwCompanyList,
  relieveFastGptRoleById,
  staffListUser,
  loginQwCode,
  loginQwIpad,
  modifyLoginQwStatus,
  loginQwCodeMsg,
  getQwCodeUrl,
  twoCode,
  twoCodeStatus,
  qrCodeStatus,
  getQwIpad,
  delQwIpad,
  logoutQwLogout,
  qrCodeVerify,
  outLoginQwIpad,
  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: false,
      // 导出遮罩层
      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,
      },
      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,
      },
      twoCodeInterval:null,
      loginQwInterval:null,

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

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


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

      }
    },
  },
  methods: {
    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){
      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==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()
      })

    },
    handleDelQwIpad(val){
      delQwIpad({qwUserId: val.id}).then(res => {
        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();
            });
          }
        }
      });
    },


    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>