pblUserManage/src/components/examine.vue

<template>
  <div class="table_container">
    <div class="title_examine">
      <p style="font-size: 30px;font-weight: 400;margin-left: -91%;padding-top: 20px">账号审核</p>
    </div>
    <div class="examine">
      <div class="examine_title1">
        <a @click="showPending"
          :style="{ color: isPending ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold'}">待审核({{ tableData.length}})</a>
      </div>
      <div class="examine_title2">
        <a @click="showApproved"
          :style="{ color: isApproved ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已通过({{approvedData.length}})</a>
      </div>
      <div class="examine_title3">
        <a @click="showRefused"
          :style="{ color: isRefused ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">已拒绝({{RefusedData.length}})</a>
      </div>
      <div class="examine_title4">
        <a @click="showAll" :style="{ color: isAll ? 'black' : 'rgb(179, 179, 179)', fontWeight: 'bold' }">全部记录({{AllData.length}})</a>
      </div>
    </div>

    <div class="content">
      <div class="search-container">
        <div class="Search">
          <input type="text" placeholder="搜索记录" style="width: 120px; height: 40px; border-radius: 40px">
          <button class="search-button" @click="performSearch">
            <img src="@/assets/搜索框.png" alt="搜索" class="search-icon" />
          </button>
        </div>
      </div>

      <!-- 待审核的数据 -->
      <div v-if="isPending">
    <!-- 禁用 stripe 属性，完全自定义背景色 -->
    <el-table :data="currentTableData" stripe border style="width: 100%; background-color: white;"
      @selection-change="handleSelectionChange"  :header-cell-style="headerCellStyle">
      
      <el-table-column type="selection" width="50"></el-table-column>
      <el-table-column prop="company" label="组织名称" width="450">
        <template slot-scope="scope">{{ scope.row.company }}</template>
      </el-table-column>
      <el-table-column prop="phone" label="电话/邮箱" width="450"></el-table-column>
      <el-table-column prop="name" label="姓名" width="450" show-overflow-tooltip
        :label-class-name="'address-column'"></el-table-column>
      <el-table-column prop="submission_time" label="提交时间" width="450"></el-table-column>
      <el-table-column prop="remarks" label="备注" width="450"></el-table-column>
      <el-table-column label="操作" width="345">
        <template slot-scope="{ row }">
          <button @click="ajax_move_to_approved(row.userid, row.companyNumber,row.orgid,row.phone,row.name,row.submission_time,)"
            style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">通过</button>
          <button @click="ajax_move_to_rejected(row.userid, row.companyNumber)"
            style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 35px;">拒绝</button>
        </template>
      </el-table-column>
    </el-table>
  </div>
      <!-- 分页组件 -->
      <el-pagination v-if="Pending_request" :current-page="currentPage" :page-size="pageSize"
        :page-sizes="pageSizeOptions" :total="tableData.length" @size-change="handlePageSizeChange"
        @current-change="handlePageChange" layout="total,sizes,prev, pager, next, jumper">
      </el-pagination>

      <!-- 已通过的数据 -->
      <div v-if="isApproved">
        <el-table :data="currentApprovedData" stripe border style="width: 100%; background-color: white;"
          @selection-change="handleApprovedSelectionChange"  :header-cell-style="headerCellStyle">
          <el-table-column type="selection" width="50" />
          <el-table-column prop="company" label="组织名称" width="400">
            <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
          </el-table-column>
          <el-table-column prop="phone" label="电话/邮箱" width="400" />
          <el-table-column prop="name" label="姓名" width="400" show-overflow-tooltip
            :label-class-name="'address-column'" />
          <el-table-column prop="submission_time" label="提交时间" width="350" />
          <el-table-column prop="remarks" label="备注" width="350" />
          <el-table-column prop="Pending_time" label="审核时间" width="300" />
          <el-table-column prop="open_organization" label="开通组织" width="395">
            <template slot="default" slot-scope="scope">{{ scope.row.open_organization }}</template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination :current-page="currentApprovedPage" :page-size="pageSize" :page-sizes="pageSizeOptions"
          :total="approvedData.length" @size-change="handlePageSizeChange" @current-change="handleApprovedPageChange"
          layout="total,sizes,prev, pager, next, jumper" />
      </div>

      <!-- 已拒绝的数据 -->
      <div v-if="isRefused">
        <el-table :data="currentRefusedData" stripe border style="width: 100%; background-color: white;"
          @selection-change="handleRefusedSelectionChange"  :header-cell-style="headerCellStyle">
          <el-table-column type="selection" width="50" />
          <el-table-column prop="company" label="组织名称" width="400">
            <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
          </el-table-column>
          <el-table-column prop="phone" label="电话/邮箱" width="400" />
          <el-table-column prop="name" label="姓名" width="350" show-overflow-tooltip
            :label-class-name="'address-column'" />
          <el-table-column prop="submission_time" label="提交时间" width="300" />
          <el-table-column prop="remarks" label="备注" width="400" />
          <el-table-column prop="Pending_time" label="审核时间" width="400" />
          <el-table-column label="操作" width="345">
            <template slot-scope="{ row }">
              <button @click="ajax__move_to_pending_from_rejected(row.userid, row.companyNumber)"
                style="color: #308fff; background: none; border: none; cursor: pointer; margin-left: 25px;">移动至待审核</button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination :current-page="currentRefusedPage" :page-size="pageSize" :page-sizes="pageSizeOptions"
          :total="RefusedData.length" @size-change="handlePageSizeChange" @current-change="handleRefusedPageChange"
          layout="total,sizes,prev, pager, next, jumper" />
      </div>

      <!-- 全部记录的数据 -->
      <div v-if="isAll">
        <el-table :data="currentAllData" stripe border style="width: 100%; background-color: white;"
          @selection-change="handleAllSelectionChange"  :header-cell-style="headerCellStyle">
          <el-table-column type="selection" width="50" />
          <el-table-column prop="company" label="组织名称" width="400">
            <template slot="default" slot-scope="scope">{{ scope.row.company }}</template>
          </el-table-column>
          <el-table-column prop="phone" label="电话/邮箱" width="400" />
          <el-table-column prop="name" label="姓名" width="350" show-overflow-tooltip
            :label-class-name="'address-column'" />
          <el-table-column prop="submission_time" label="提交时间" width="350" />
          <el-table-column prop="remarks" label="备注" width="350" />
          <el-table-column prop="Pending_time" label="审核时间" width="400" />
          <el-table-column label="操作" width="345" prop="status">
            <template slot="default" slot-scope="scope">
          <!-- 根据状态值显示不同颜色的按钮 -->
          <el-button :type="getButtonType(scope.row.status)" :disabled="false" style="border-radius: 5px; padding: 4px 12px; font-size: 14px;">
            {{ getStatusText(scope.row.status) }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
        <!-- 分页组件 -->
        <el-pagination :current-page="currentAllPage" :page-size="pageSize" :page-sizes="[5, 10, 25]"
          :total="AllData.length" @size-change="handlePageSizeChange" @current-change="handleAllPageChange"
          layout="total,sizes,prev, pager, next, jumper" />
      </div>
    </div>



  </div>
</template>

<script>
import { reactive } from 'vue' // 引入 reactive
import { API_CONFIG } from '@/common/apiConfig';
// import { ref } from 'vue';
// 使用 ref() 包装数组
// const myArray = ref([]);

// // 更新数组时可以通过 .value 来访问
// myArray.value.push(1);  // 这样修改数组是响应式的

// // 使用 watch 监听
// watch(() => myArray.value, (newValue) => {
//   console.log(newValue);
// });
export default {
  name: 'IndexTable',
  components: {
  },
  data() {
    return {
      checked: true,
      selectedOptions: [], // 用于存储选中的复选框
      showCompany: false, // 默认隐藏
      selectedOrg: "CN", // 默认选中CN组织
      checkboxStates: Array(10).fill(false), // 确保初始化为一个包含10个元素的数组
      selectedSchools: Array(16).fill(''), // 确保初始化为一个包含16个空字符串的数组
      showCompanyList: reactive(Array(8).fill(false)), // 确保初始化为一个包含8个元素的数组
      button: Array(10).fill(false), // 确保初始化为一个包含10个元素的数组
      currentPage: 1,
      currentApprovedPage: 1,
      currentRefusedPage: 1,
      currentAllPage: 1,
      pageSize: 10, // 每页显示的条目数
      pageSizeOptions: [10, 25, 50],  // 可选的页大小
      // 待审核数据
      tableData: [ {
          company: "北京科技有限公司",
          phone: "010-12345678",
          name: "张三",
          submission_time: "2024-12-20 10:00",
          remarks: "暂无备注",
          userid: 1,
          companyNumber: "BJKJ001"
        },
        {
          company: "上海创新企业",
          phone: "021-87654321",
          name: "李四",
          submission_time: "2024-12-21 12:00",
          remarks: "待审核",
          userid: 2,
          companyNumber: "SHCX002"
        },
        {
          company: "广州实业集团",
          phone: "020-23456789",
          name: "王五",
          submission_time: "2024-12-22 14:30",
          remarks: "需要更多资料",
          userid: 3,
          companyNumber: "GZSY003"
        }],
      // 已审核数据
      approvedData: [],
      RefusedData: [],
      AllData: [],
      Pending_request: true,
      isPending: true, // 初始状态为待审核
      isApproved: false,
      isRefused: false,
      isAll: false,
      showModal: false,// 弹窗是否显示
      showConfirmationModal: false,   // 控制确认通知申请人的弹窗
      




    }
  },
  computed: {
    currentTableData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      return this.tableData.slice(start, end);
    },
    currentApprovedData() {
      const start = (this.currentApprovedPage - 1) * this.pageSize;
      const end = this.currentApprovedPage * this.pageSize;
      return this.approvedData.slice(start, end);
    },
    currentRefusedData() {
      const start = (this.currentRefusedPage - 1) * this.pageSize;
      const end = this.currentRefusedPage * this.pageSize;
      return this.RefusedData.slice(start, end);
    },
    currentAllData() {
      const start = (this.currentAllPage - 1) * this.pageSize;
      const end = this.currentAllPage * this.pageSize;
      return this.AllData.slice(start, end);
    },
  },
  methods: {
     // 获取状态文本
     getStatusText(status) {
      const statusMap = {
        0: "待审核",
        1: "已通过",
        2: "已拒绝"
      };
      return statusMap[status] || "未知状态"; 
    },

    // 获取状态对应的按钮类型
    getButtonType(status) {
      const typeMap = {
        0: "primary",  // 待审核 -> 蓝色
        1: "success",  // 已通过 -> 绿色
        2: "danger",   // 已拒绝 -> 红色
      };
      return typeMap[status] || "default";  // 默认为默认按钮类型
    },
    // 表头的背景色
    headerCellStyle() {
      return { backgroundColor: '#f1f1f1' };
    },
    // 多选框选择事件处理
    handleSelectionChange(selection) {
      this.selectedPendingData = selection;
    },
    handleApprovedSelectionChange(selection) {
      this.selectedApprovedData = selection;
    },
    handleRefusedSelectionChange(selection) {
      this.selectedRefusedData = selection;
    },
    handleAllSelectionChange(selection) {
      this.selectedAllData = selection;
    },
    // 待审核的分页逻辑
    handlePageChange(page) {
      this.currentPage = page;
    },
    // 已通过的分页逻辑
    handleApprovedPageChange(page) {
      this.currentApprovedPage = page;
    },
    // 已拒绝的分页逻辑
    handleRefusedPageChange(page) {
      this.currentRefusedPage = page;
    },
    // 全部记录的分页逻辑
    handleAllPageChange(page) {
      this.currentAllPage = page;
    },
    // 显示创建账户的弹窗
    showModalHandler() {
      this.showModal = true;
    },
    performSearch() {
      console.log('执行搜索');
    },

    // 创建账户的逻辑
    handleCreateAccount() {
      // 在这里可以进行创建账户的逻辑
      console.log('账户创建完成');
      // 点击创建账户后弹出通知确认的灰色弹窗
      this.showModal = false; // 关闭创建账户弹窗
      this.showConfirmationModal = true; // 打开通知确认弹窗
    },
    // 通知申请人
    notifyApplicant() {
      // 在这里进行通知申请人的逻辑
      this.$message.success('通知申请人成功！');
      this.showConfirmationModal = false; // 关闭通知确认弹窗
    },
    show_company() {
      this.showCompany = !this.showCompany;  // 切换 showCompany 的值
    },
    toggleCompany(index) {
      this.showCompanyList[index] = !this.showCompanyList[index];
    },

    // 待审核
    showPending() {
      this.isPending = true;
      this.isApproved = false;
      this.isRefused = false;
      this.isAll = false;
      this.Pending_request = true;
    },
    // 已通过
    showApproved() {
      this.Pending_request = false;
      this.isPending = false;
      this.isApproved = true;
      this.isRefused = false;
      this.isAll = false;
    },
    // 已拒绝
    showRefused() {
      // console.log("Clicked Refused!");
      this.isPending = false;
      this.isApproved = false;
      this.isRefused = true;
      this.isAll = false;
      this.Pending_request = false;
    },
    //全部记录
    showAll() {
      this.isPending = false;
      this.isApproved = false;
      this.isRefused = false;
      this.isAll = true;
      this.Pending_request = false;
    },
    // 用于切换组织
    selectOrg(org) {
      this.selectedOrg = org;
    },
    // 处理每页条目数量变化
    handlePageSizeChange(size) {
      this.pageSize = size;
    },
    // 用于显示待审核的表格数据
    ajaxpending() {

      const params = [API_CONFIG.pending]; // 使用配置中的待审核接口参数

      // let params = [
      //   {
      //     functionName: "select_requestuser",  // 调用存储过程的名称
      //     r_type: 0,
      //     page: 1,
      //     r_num: 100,
      //   },
      // ];

      this.$ajax.post(API_CONFIG.baseUrl, params)
        .then((res) => {
          // 假设res.data是一个返回待审核数据的数组
          // console.log("返回结果为：", res.data);  // 打印返回的查询结果

          this.tableData = res.data[0].map(user => ({
            company: user.schoolName || '未知', // 组织名称
            phone: user.contact_info || '未知',
            name: user.name || '未知', // 真实姓名对应 name
            submission_time: user.create_at || '未知', // 提交时间对应 数据库里的create_at 
            remarks: user.remark || '未知', // 备注内容对应 remark
            userid: user.id || '未知',
            orgid: user.org_id,
          })); // 将数据存储到 tableData 中
          // 打印映射后的用户信息
          console.log("待审核的数据为：", res.data);
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error(err);  // 打印错误信息
        });
    },

    // 用于显示已通过的表格数据
    ajaxapproved() {
      const params = [API_CONFIG.approved]; // 使用配置中的已通过接口参数

      // let params = [
      //   {
      //     functionName: "select_requestuser",  // 调用存储过程的名称
      //     r_type: 1,
      //     page: 1,
      //     r_num: 100,
      //   },
      // ];

      this.$ajax.post(API_CONFIG.baseUrl, params)
        .then((res) => {
          // 假设res.data是一个返回已通过的数组
          this.approvedData = res.data[0].map(user => ({
            company: user.schoolName || '未知', // 组织名称对应 schoolName
            phone: user.contact_info || '未知',
            name: user.name || '未知', // 真实姓名对应 alias
            submission_time: user.create_at || '未知', // 提交时间对应 数据库里的create_at
            remarks: user.remark || '未知', // 备注内容对应 remark
            Pending_time: user.active_at || '未知', // 处理时间对应 update_time
            open_organization: user.school_name || '未知', // 所属组织对应 school_name
            userid: user.id || '未知',
          }));
          // 在这里进行已通过数据的获取和处理
          console.log("已通过的数据为：", res.data);
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error(err);  // 打印错误信息
        });
    },

    // 用于显示已拒绝的表格数据
    ajaxrefused() {
      const params = [API_CONFIG.refused]; // 使用配置中的已拒绝接口参数

      // let params = [
      //   {
      //     functionName: "select_requestuser",  // 调用存储过程的名称
      //     r_type: 2,
      //     page: 1,
      //     r_num: 100,
      //   },
      // ];

      this.$ajax.post(API_CONFIG.baseUrl, params)
        .then((res) => {
          this.RefusedData = res.data[0].map(user => ({
            company: user.schoolName || '未知', // 组织名称对应 organizeid
            phone: user.contact_info || '未知', // 用户名对应 username,使用数据库里的username因为有邮箱作为联系方式
            name: user.name || '未知', // 真实姓名对应 alias
            submission_time: user.create_at || '未知', // 提交时间对应 数据库里的create_at
            remarks: user.remark || '未知', // 备注内容对应 remark
            Pending_time: user.active_at || '未知', // 处理时间对应 update_time
            userid: user.id || '未知',
          }));
          // 在这里进行已拒绝数据的获取和处理
          // console.log(this.RefusedData);
          console.log("已拒绝的数据为：", res.data);
        })
        .catch((err) => {
          // 处理失败的响应
          this.$message.error("查询失败");
          console.error(err);  // 打印错误信息
        })
    },

    // 用于显示全部记录的表格数据
    ajaxAll() {
      console.log("获取所有记录");

      // 根据 allRecords 配置生成请求
      const requests = API_CONFIG.allRecords.r_types.map(r_type => {
        const params = {
          functionName: API_CONFIG.allRecords.functionName,
          r_type,
          page: API_CONFIG.allRecords.page,
          r_num: API_CONFIG.allRecords.r_num
        };
        return this.$ajax.post(API_CONFIG.baseUrl, [params]);
      });

      // 使用 Promise.all 发起多个请求
      Promise.all(requests)
        .then((responses) => {
          // 使用 processData 方法处理响应数据
          const allData = API_CONFIG.allRecords.processData(responses);

          // 更新组件中的数据
          this.AllData = allData;

          // 打印处理后的数据
          console.log(this.AllData);

          // 刷新表格数据
          this.refreshTableData();  // 例如刷新表格数据
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error(err);
        });
    },
    
    // 通过操作，将数据移到已通过
    // ajax_move_to_approved(userid) {
    //   const successMessage = API_CONFIG.moveToApproved.successMessage;

    //   // 弹出确认框
    //   this.$confirm(`您确定将此数据移至“已通过”状态吗？`, '确认操作', {
    //     confirmButtonText: '确定',
    //     cancelButtonText: '取消',
    //     type: 'warning',
    //   }).then(() => {
    //     // 确认后发起请求
    //     let params = [
    //       {
    //         functionName: API_CONFIG.moveToApproved.functionName,   // 这里是将数据移至已通过状态的操作,使用配置中的存储过程名称
    //         u_id: userid,  // id
    //       },
    //     ];

    //     // 发起请求
    //     this.$ajax
    //       .post(API_CONFIG.moveToApproved.url, params) // 使用配置中的URL
    //       .then((res) => {
    //         console.log(res);
    //         this.$message({
    //           type: 'success',
    //           message: successMessage,
    //         });
    //         // 更新数据状态
    //         this.refreshTableData();  // 例如刷新表格数据
    //         console.log("此条数据处理后的id为：", userid);
    //       })
    //       .catch((err) => {
    //         this.$message.error("操作失败");
    //         console.error("请求失败，错误信息：", err);
    //       });
    //   }).catch(() => {
    //     // 取消操作后的提示
    //     this.$message({
    //       type: 'info',
    //       message: '已取消操作',
    //     });
    //   });
    // },
        // 通过操作，将数据移到已通过
    ajax_move_to_approved(userid,orgid,phone,name,submission_time) {
      const successMessage = API_CONFIG.moveToApproved.successMessage;

      // 弹出确认框
      this.$confirm(`您确定将此数据移至“已通过”状态吗？`, '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 确认后发起请求
        let params = [
          {
            functionName: "insert_request_type1",   // 这里是将数据移至已通过状态的操作,使用配置中的存储过程名称
            p_userid: userid,  // id
            //组织id
            p_schoolName:orgid,
            //账户
            p_u_couent:phone,
            //姓名
            p_u_name:name,
            //时间
            p_u_time:submission_time,
          },
        ];

        // 发起请求
        this.$ajax
          .post(API_CONFIG.moveToApproved.url, params) // 使用配置中的URL
          .then((res) => {
            console.log(res);
            this.$message({
              type: 'success',
              message: successMessage,
            });
            // 更新数据状态
            this.refreshTableData();  // 例如刷新表格数据
            // console.log("此条数据处理后的id为：", userid);
            console.log("通过的数据内容为：",res.data);
          })
          .catch((err) => {
            this.$message.error("操作失败");
            console.error("请求失败，错误信息：", err);
          });
      }).catch(() => {
        // 取消操作后的提示
        this.$message({
          type: 'info',
          message: '已取消操作',
        });
      });
    },


    // 忽略操作，将数据移到已拒绝
    ajax_move_to_rejected(userid) {
      const successMessage = API_CONFIG.moveToRejected.successMessage;

      // 弹出确认框
      this.$confirm(`您确定将此数据移至“已拒绝”状态吗？`, '确认操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        // 确认后发起请求
        let params = [
          {
            functionName: API_CONFIG.moveToRejected.functionName,  // 这里是将数据移至已拒绝状态的操作,使用配置中的存储过程名称
            u_id: userid,  // 公司编号
          },
        ];

        // 发起请求
        this.$ajax
          .post(API_CONFIG.moveToRejected.url, params)
          .then((res) => {
            console.log(res);
            this.$message({
              type: 'success',
              message: successMessage,
            });
            // 更新数据状态
            this.refreshTableData();  // 例如刷新表格数据
            console.log("此条数据处理后的id为：", userid);
          })
          .catch((err) => {
            this.$message.error("操作失败");
            console.error("请求失败，错误信息：", err);
          });
      }).catch(() => {
        // 取消操作后的提示
        this.$message({
          type: 'info',
          message: '已取消操作',
        });
      });
    },

    // 刷新数据（假设你需要刷新表格数据）
    refreshTableData() {
      // 在这里重新获取数据或者更新视图
      this.ajaxpending();  // 例如通过接口重新获取数据
      this.ajaxapproved();  // 例如通过接口重新获取数据
      this.ajaxrefused();  // 例如通过接口重新获取数据
    },


   

    // 在已拒绝区域点击移动至待审核
    ajax__move_to_pending_from_rejected(userid) {
      let params = [
        {
          functionName: API_CONFIG.moveToPending.functionName,  // 移动至待审核的操作
          u_id: userid,  // id
        },
      ];

      const successMessage = API_CONFIG.moveToPending.successMessage;
      // const successMessage = '已移动至待审核!';

      // 弹窗确认。
      this.$confirm(`此操作将会将该条数据移回待审核, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 发起请求
        this.$ajax
          .post(API_CONFIG.moveToPending.url,params)
          .then((res) => {
            console.log(res);
            this.$message({
              type: 'success',
              message: successMessage
            });
            // 调用函数更新数据
            // 更新数据状态
            this.refreshTableData();  // 例如刷新表格数据
            console.log("此条数据处理后的id为：", userid);
            this.ajaxpending(userid);  // 数据移回待审核区域
          })
          .catch((err) => {
            this.$message.error("处理失败");
            console.error("请求失败，错误信息：", err);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消移动至待审核'
        });
      });
    }

  },
  mounted() {
    this.ajaxpending(); // 组件挂载后调用 ajaxpending 方法
    this.ajaxapproved(); // 组件挂载后调用 ajaxapproved 方法
    this.ajaxrefused(); // 组件挂载后调用 ajaxrefused 方法
    this.ajaxAll(); // 组件挂载后调用 ajaxAll 方法
  },
}

</script>

<style scoped>
.content {
  display: flex;
  /* flex-direction: column; */
  align-items: stretch;
  width: 100%;
}

/* 表格容器样式 */
.table_container{
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 30px;
}

/* 账号审核标题样式 */
.title_examine {
  width: 100%;
  height: 100px;
  background-color: #fff;
  border-radius: 10px 10px 10px 10px;
}

/* 搜索框容器样式 */
.search-container {
  position: absolute;
  /* 设置为绝对定位 */
  right: -420px;
  /* 右对齐 */
  top: -50px;
  /* 根据需要调整顶部位置 */
}

/* 搜索框样式 */
.Search input {
  border: none;
  /* 去掉边框 */
  padding: 0 10px;
  /* 添加内边距 */
  padding-left: 15px;
  /* 增加左内边距以移动文字 */
  font-size: 18px;
  /* 增大字体大小 */
  outline: none;
  /* 去掉聚焦时的轮廓 */
  color: black;
}

/* 搜索框按钮样式 */
.search-button {
  position: absolute;
  /* 设置为绝对定位 */
  right: 10px;
  /* 右对齐，距离右边10px */
  height: 40px;
  /* 设置按钮高度与输入框一致 */
  border: none;
  /* 去掉边框 */
  background: none;
  /* 去掉背景 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
  padding: 0;
  /* 去掉内边距 */
}

/* 搜索框图标样式 */
.search-icon {
  width: 40px;
  /* 设置图标宽度 */
  height: 40px;
  /* 设置图标高度 */
  opacity: 0.5;
  /* 设置透明度 */
}

.el-table {
  width: 100%;
  border: 1px solid #dcdfe6;
  
  /* 设置表格边框 */
}

.el-table th,
.el-table td {
  border: 1px solid #dcdfe6;
  /* 设置单元格边框 */
  height: 80px;
}

/* 使用v-deep深度，进入元素设置表格行的背景色 */
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  background-color: #f1f1f1;
}


.address-column {
  margin: 0;
  /* 调整边距 */
  padding: 5px;
  /* 调整填充 */
}

/*审核框架 */
.examine {
  width: 55%;
  height: 50px;
  margin-top: 20px;
  /* border: 1px solid black; */
}

.examine_title1,
.examine_title2,
.examine_title3,
.examine_title4 {
  width: 15%;
  height: 50px;
  float: left;
}

/* 文字移入鼠标呈现手掌样式 */
.examine_title1 a{
  cursor: pointer;
}
.examine_title2 a{
  cursor: pointer;
}
.examine_title3 a{
  cursor: pointer;
}
.examine_title4 a{
  cursor: pointer;
}

.examine_title1 p,
.examine_title2 p,
.examine_title3 p,
.examine_title4 p {
  margin-top: 10px;
  margin-left: -20px;
}

/* 新增账户对话框样式 */
.add-account-button {
  margin-top: 20px;
  /* 添加顶部间距 */
  padding: 10px 20px;
  /* 添加内边距 */
  background-color: transparent;
  /* 去掉按钮背景 */
  color: black;
  /* 设置字体颜色为黑色 */
  border-radius: 4px;
  /* 设置圆角 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
  font-size: 18px;
  /* 增大字体 */
  display: flex;
  /* 使用 Flexbox 布局 */
  border: none;
  align-items: center;
  /* 垂直居中对齐 */
}

.add-icon {
  width: 20px;
  /* 设置小图片的宽度 */
  height: 20px;
  /* 设置小图片的高度 */
  margin-right: 8px;
  /* 图片与文字之间的间距 */
}

/* 对话框内容样式 */
.modal-content {
  display: flex;
  flex-direction: column;
}

/* 标题样式 */
.modal-header {
  display: flex;
  gap: 80px;
  /* 设置元素之间的固定间距 */
  justify-content: center;
  /* 居中对齐所有元素 */
  align-items: center;
  /* 垂直居中对齐 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
}

/* 组织标题样式 */
.org-title {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.org-title h3 {
  margin-right: 10px;
  font-weight: bold;
}

/* dialog搜索框容器 */
.dialogsearch-container input {
  border: none;
  /* 去掉边框 */
  padding: 0 10px;
  /* 添加内边距 */
  padding-left: 15px;
  /* 增加左内边距以移动文字 */
  font-size: 18px;
  /* 增大字体大小 */
  outline: none;
  /* 去掉聚焦时的轮廓 */
  color: black;
  border: 1px solid black;
}




/* dialog搜索框按钮样式 */
.dialogsearch-button {
  position: absolute;
  /* 设置为绝对定位 */
  right: 310px;
  /* 右对齐，距离右边310px */
  height: 40px;
  /* 设置按钮高度与输入框一致 */
  border: none;
  /* 去掉边框 */
  background: none;
  /* 去掉背景 */
  cursor: pointer;
  /* 鼠标悬停时显示手型 */
  padding: 0;
  /* 去掉内边距 */
}


/* 复选框容器样式 */
.checkbox-container {
  display: flex;
  flex-direction: row;
  /* 水平排列 */
  gap: 10px;
  /* justify-content: space-between; 在两排之间留出空间 */
  margin-top: 100px;
  /* 添加顶部间距 */
}


/* 复选框组样式 */
.checkbox-group {
  float: right;
  margin-left: 140px;
  /* border: 1px solid red; */
  height: 400px;
  width: 350px;
  padding-top: 20px;
}

/* 复选框在右侧样式 */
.checkbox-left {
  flex-direction: row-reverse;
  /* 选择框在右侧 */
  display: flex;
  /* 使用 Flexbox */
  align-items: center;
  /* 垂直居中 */
  position: relative;
  /* 为下划线定位 */
  padding-top: 15px;
  /* 设置文本与下划线之间的间距 */
}

/*复选框文本样式 */
.checkbox-left::after {
  content: '';
  display: block;
  width: 150%;
  height: 1px;
  background-color: black;
  position: absolute;
  bottom: 0;
  left: -12%;
}

hr {
  margin: 20px 0;
  /* 上下间距 */
  border: 1px solid #dcdfe6;
  /* 分隔线颜色 */
}

/* dialog学校复选框样式 */
.checkbox-group span.el-checkbox__inner {
  position: absolute;
  right: -125px;
  width: 20px;
  height: 20px;
}

/* dialog组织下拉框复选框样式 */
.checkbox-company span.el-checkbox__inner {
  width: 20px;
  height: 20px;
}

/* 复选框在右侧样式 */
.checkbox-company {
  float: right;
  margin-left: 140px;
  /* border: 1px solid red; */
  height: 400px;
  width: 350px;
  padding-top: 20px;
}

.checkbox-right {
  align-items: center;
  /* 垂直居中 */
  position: relative;
  /* 为下划线定位 */
  padding-bottom: 5px;
  /* 设置文本与下划线之间的间距 */
  padding-top: 15px;
}

.checkbox-right::after {
  content: '';
  /* 创建伪元素 */
  display: block;
  /* 使其成为块级元素 */
  width: 80%;
  /* 下划线宽度，调整为所需的宽度 */
  height: 1px;
  /* 下划线高度 */
  background-color: black;
  /* 下划线颜色 */
  position: absolute;
  /* 绝对定位 */
  bottom: 0;
  /* 距离底部 */
  left: 8%;
  /* 调整下划线的水平位置，设置为10% */
}

/* 为 select 添加自定义下拉箭头 */
.select_right {
  border: none;
  /* 去掉边框 */
  outline: none;
  /* 去掉聚焦时的轮廓线 */
}

/* 公司下拉菜单 */
.company_checkbox {
  position: absolute;
  /* 设置为绝对定位 */
  width: 278px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(239, 239, 239);
  margin-left: 28px;
  margin-top: 6px;
  z-index: 200;
  padding: 10px 0;
  /* 给下拉菜单加一点内边距，避免内容太紧 */
}

/* 每个下拉项的容器，使用flexbox布局 */
.com_check {
  display: flex;
  /* 使用flex布局 */
  justify-content: space-between;
  /* 让文本和复选框两端对齐 */
  align-items: center;
  /* 让文本和复选框垂直居中对齐 */
  padding: 5px 20px;
  /* 给复选框加点内边距，避免紧凑 */
  position: relative;
  /* 确保伪元素的定位是相对当前元素 */
  margin-bottom: 10px;
  /* 给每个复选框之间留点空隙 */
}

/* 复选框下的下划线 */
.com_check::after {
  content: '';
  /* 创建伪元素 */
  display: block;
  /* 使其成为块级元素 */
  width: 100%;
  /* 下划线宽度与复选框相同 */
  height: 1px;
  /* 下划线高度 */
  background-color: rgb(214, 214, 214);
  /* 下划线颜色 */
  position: absolute;
  /* 绝对定位 */
  bottom: 0;
  /* 距离底部 */
  left: 0;
  /* 距离左边 */
}

/* 新增学校按钮 */
.com_but {
  width: 275px;
  height: 35px;
  margin-top: 10px;
  /* 给按钮与上面的选项留一点空隙 */
  border: none;
  background-color: rgb(255, 255, 255);
  /* 按钮背景色 */
  outline: none;
  color: rgb(98, 98, 98);
  text-align: left;
  text-indent: 20px;
  /* 左侧文字缩进 */
  font-size: 15px;
  padding-bottom: 5px;
  /* 设置文本与下划线之间的间距 */
}

/* 给每个下拉项之间加点空隙 */
.checkbox-right {
  margin-bottom: 10px;
  /* 给每个项之间留点空隙 */
}





/* 弹窗部分的样式 */
.confirmation-dialog .el-dialog {
  position: absolute;
  top: 20%;
  left: 40%;
}

/* 弹窗内容部分的样式 */
.modal-content .el-overlay .el-dialog {
  text-align: center;
  padding: 20px;
}

/* 弹窗标题部分的样式 */

/* 是否通知申请人弹窗标题部分的样式 */
.confirmation-modal {
  position: fixed;
  /* 使用固定定位 */
  transform: translate(-50%, -50%);
  /* 使其真正居中 */
  background-color: rgba(255, 255, 255, 0.9);
  /* 背景颜色 */
  border: 1px solid #ccc;
  /* 边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* 阴影效果 */
  padding: 20px;
  /* 内边距 */
  z-index: 2000;
  /* 确保在其他元素之上 */
}

/* 是否通知申请人弹窗标题部分按钮的样式 */
.button-container {
  display: flex;
  /* 使用flex布局 */
  justify-content: space-around;
  /* 按钮之间的间距 */
  margin-top: 120px;
  /* 按钮与文本之间的间距 */
}


/* 分页功能的样式 */
.el-pagination {
 position: absolute;
 top: 810px;
 left: 30%;
  /* 调整分页组件的顶部向上方距离50px */
}

/* 设置分页按钮的宽度 */
.el-pagination .el-pagination__prev,
.el-pagination .el-pagination__next {
  width: 60px;
  /* 设置上一页和下一页按钮的宽度 */
}

/* 设置页码按钮的宽度 */
.el-pagination .el-pager li {
  width: 50px;
  /* 设置每个页码按钮的宽度 */
}

/* 设置分页大小选择框的宽度 */
.el-pagination .el-select {
  width: 80px;
  /* 设置分页大小选择框的宽度 */
}

/*取消dialog学校最后一个的margin值 */
.el-checkbox {
  margin-right: none !important;
}

.cell {
  position: absolute;
}

.el-checkbox span {
  margin-left: 3px;
}

/* 取消 ElTableColumn 默认的 inline-block 和 vertical-align 样式 */
.el-scrollbar__view {
  display: block !important;
  /* 或者 display: flex; 根据你的需求 */
}
/* 取消 ElTableColumn 的下方滚动条样式 */
.el-table--scrollable-x .el-table__body-wrapper{
  overflow-x: hidden !important;  /* 禁止水平滚动 */
  overflow-y: auto;    /* 保留垂直滚动（如果需要） */
}
</style>