ylrz_his_scrm_companyUI/src/views/qw/user/cuDeptIdIndex.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 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="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
            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>
        </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="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>

  </div>
</template>

<script>
import {
  updateUser,
  exportUser,
  getMyQwCompanyList,
  relieveFastGptRoleById,
  loginQwIpad,
  loginQwCodeMsg,
  twoCode,
  twoCodeStatus,
  qrCodeStatus,
  getQwIpad,
  delQwIpad,
  qrCodeVerify,
  outLoginQwIpad,
  handleAllocateRemoteHost,
  qwBindCloudHost, qwUnbindCloudHost, handleAuthAppKey, handleInputAuthAppKey, selectCloudAP, myDepartListUser
} from '../../../api/qw/user'
import fastGptRole from "@/views/fastGpt/fastGptRole/fastGptRole";

export default {
  name: "cuDeptIdIndex",
  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,
      optionsStatus: [{
        value: 0,
        label: '正常'
      }, {
        value: 2,
        label: '离职'
      }],
      // 遮罩层
      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,
      },
	 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,
      },

      editRemarkOpen: {
        open: false,
        title: '修改员工自动给完课客户打备注的规则',
        id:null,
        isSendMsg: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.queryParams.corpId=this.myQwCompanyList[0].dictValue;
        this.getList();
      }
    });


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

      }
    },
  },
  methods: {
    getList() {
      this.loading = true;
      myDepartListUser(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;
    },

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