pblUserManage/src/components/list.vue

<template>
  <!-- 背景层，覆盖整个页面 -->
  <div class="list_container">
    <!-- 头部区域 -->
    <div class="title_examine">
      <div class="pub_title">账号列表</div>
      <div style="margin-left: auto">
        <el-input v-model="s_name" placeholder="输入检索用户名" size="normal" clearable @input="changeOid"
          style="margin-right: 10px; width: 200px"></el-input>
        <el-input v-model="s_username" placeholder="输入检索账号" size="normal" clearable @input="changeOid"
          style="margin-right: 10px; width: 200px"></el-input>
        <el-select v-model="checkRole" placeholder="选择身份" clearable filterable @change="changeOid"
          style="margin-right: 10px; width: 120px">
          <el-option v-for="item in roleArray" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="checkOid" placeholder="选择学校" clearable filterable @change="changeOid"
          style="margin-right: 10px">
          <el-option v-for="item in getSchool" :key="item.id" :label="item.name" :value="item.id">
            <span>{{ item.name }}</span> <!-- 显示学校名称 -->
            <span style="color: gray;font-size: 13px;">-&nbsp;{{ item.orgName ? item.orgName : '暂无组织' }}</span>
            <!-- 显示 orgName -->
          </el-option>
        </el-select>
        <el-select v-model="checkOrg" placeholder="选择组织" clearable filterable @change="changeOrg"
          style="margin-right: 10px">
          <el-option v-for="item in organizations" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
        <el-button type="primary" size="small" @click="nextStep()">新增账户</el-button>
      </div>
    </div>
    <!-- 学习名称组织名称表单区域 -->
    <el-dialog title="移动选择" class="table" :visible.sync="isOrgFormVisible" :before-close="close_table" width="920px">
      <!-- 搜索框区域 -->
      <div class="input-container">
        <div class="input_box">
          <input type="text" v-model="searchQuery" placeholder="搜索学校" @change="ajax_org_check" class="table_find" />
        </div>
        <el-select style="margin-left: 10px" v-model="school.OrgId" placeholder="请选择组织" class="custom-select"
          @change="ajax_org_check" filterable clearable>
          <!-- 动态生成 <el-option> -->
          <el-option v-for="(org, index) in organizations" :key="index" :label="org.name" :value="org.id">
            {{ org.name }}
          </el-option>
        </el-select>

        <el-select style="margin-left: 10px" v-model="selReg" placeholder="请选择区域" class="custom-select"
          @change="ajax_org_check" filterable clearable>
          <el-option v-for="(org, index) in regionCList" :key="index" :label="org.name" :value="org.name">
            {{ org.name }}
          </el-option>
        </el-select>
      </div>
      <div class="table_down">
        <div v-if="cn_org">
          <div class="checkbox-container">
            <!-- 循环渲染每个学校 -->
            <div v-for="(school, index) in cn_school" :key="index" class="checkbox_comment">
              <div class="checkbox-left">
                <label class="checkbox-label">
                  <!-- 学校名称，显示 school.name -->
                  <a>{{ school.name }}</a>
                  <a style="color: gray;font-size: 13px;margin: 0px">&nbsp;-&nbsp;{{ school.orgName ? school.orgName :
                    '暂无组织'}}</a>
                </label>
                <!-- 单选框，使用 v-model 绑定到一个变量 -->
                <input type="radio" class="checkbox_input_org" name="school_selection" :value="school.id"
                  v-model="selectedSchool" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="close_table">取 消</el-button>
        <el-button type="primary" @click="add_school_dialog = true">新增学校</el-button>
        <el-button type="primary" @click="add_org_dialog = true">新增组织</el-button>
        <el-button type="primary" @click="ajax_confirm">确认移动</el-button>
      </div>
    </el-dialog>
    <!-- 新增账户弹窗 -->
    <el-dialog title="新增账户" class="table" :visible.sync="isTableUseVisible" :before-close="close_table" width="700px">
      <div class="el-form-item">
        <label class="el-form-item__label">选择组织</label>
        <div class="el-form-item__content">
          <el-select v-model="person.selectedOrg" placeholder="请选择组织" class="custom-select" @change="orgChange"
            clearable filterable>
            <el-option v-for="item in organizations" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="el-form-item">
        <label class="el-form-item__label">选择学校</label>
        <div class="el-form-item__content">
          <el-select v-model="person.selectedSchool" placeholder="请选择学校" class="custom-select" @change="schoolChange"
            clearable filterable>
            <el-option v-for="item in getSchool2" :key="item.id" :label="item.name" :value="item.id">
              <span>{{ item.name }}</span> <!-- 显示学校名称 -->
              <span style="color: gray;font-size: 13px;">-&nbsp;{{ item.orgName ? item.orgName : '暂无组织' }}</span>
            </el-option>
          </el-select>
        </div>
      </div>
      <div>
        <form class="el-form">
          <div class="el-form-item">
            <label class="el-form-item__label">姓名</label>
            <div class="el-form-item__content">
              <el-input v-model="person.name" placeholder="请输入姓名" autocomplete="off" class="add_input"></el-input>
            </div>
          </div>
          <div class="el-form-item">
            <label class="el-form-item__label">账号</label>
            <div class="el-form-item__content">
              <el-input v-model="person.account" placeholder="请输入账号" autocomplete="off" class="add_input"></el-input>
            </div>
            <span style="margin-left: 5px;">{{ this.SuffixData }}</span>
          </div>
          <!-- <div class="el-form-item">
            <label class="el-form-item__label">选择身份</label>
            <div class="el-form-item__content">
              <el-select
                v-model="person.type"
                placeholder="请选择身份"
                class="custom-select"
              >
                <el-option :value="1" label="学生">学生</el-option>
                <el-option :value="2" label="老师">老师</el-option>
              </el-select>
            </div>
          </div> -->

        </form>
        <div class="input_tip">提示：如需自定义后缀，请直接在账号框输入，系统将自动识别并采用。</div>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="el-dialog__footer">
        <el-button @click="close_table">取 消</el-button>
        <el-button type="primary" @click="addUser">确认</el-button>
      </div>
    </el-dialog>
    <!-- 新增学校弹窗 -->
    <el-dialog title="新增学校" class="table" :visible.sync="add_school_dialog" :before-close="close_add_school"
      width="700px">
      <div class="el_dialog_school_content">
        <form class="el-form">
          <!-- 学校名称 -->
          <div class="el-form-item" style="margin-top: 15px">
            <label class="el-form-item__label" style="width: 100px">学校名称</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <input v-model="sch_name" type="text" autocomplete="off" placeholder="学校名称" class="el-input__inner" />
                </div>
              </span>
            </div>
          </div>
          <!-- 地区 -->
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 100px">地区</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <input v-model="region" type="text" autocomplete="off" placeholder="请输入地区" class="el-input__inner" />
                </div>
              </span>
            </div>
          </div>
          <!-- 学校编码 -->
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 100px">学校编码</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <input v-model="schoolCode" type="text" autocomplete="off" placeholder="请输入编码"
                    class="el-input__inner" />
                </div>
              </span>
            </div>
          </div>
          <!-- 学校类型
        <div class="el-form-item">
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <el-radio v-model="schoolType" label="1">普通学校</el-radio>
              <el-radio v-model="schoolType" label="2">协同学校</el-radio>
            </span>
          </div>
        </div> -->
          <!-- 登录权限
        <div class="el-form-item">
          <div class="el-form-item__content" style="margin-left: 100px;">
            <span>
              <el-radio v-model="loginPermission" label="1">允许登录</el-radio>
              <el-radio v-model="loginPermission" label="2">不可登录</el-radio>
            </span>
          </div>
        </div> -->
          <!-- 上级组织 -->
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 100px">上级组织</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <el-form :model="school" ref="form">
                    <el-select v-model="school.parentOrgId" placeholder="请选择组织" class="custom-select" filterable>
                      <el-option v-for="(org, index) in organizations" :key="index" :label="org.name" :value="org.id">
                        {{ org.name }}
                      </el-option>
                    </el-select>
                  </el-form>
                </div>
              </span>
            </div>
          </div>

          <!-- 区域 -->
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 100px">区域</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <!-- <el-form
                    :model="school"
                    ref="form"
                  > -->
                  <el-select v-model="regionC" placeholder="请选择区域" class="custom-select" filterable>
                    <el-option v-for="(org, index) in regionCList" :key="index" :label="org.name" :value="org.name">
                      {{ org.name }}
                    </el-option>
                  </el-select>
                  <!-- </el-form> -->
                </div>
              </span>
            </div>
          </div>
        </form>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="el-dialog__footer">
        <el-button @click="close_add_school">取 消</el-button>
        <el-button type="primary" @click="ajax_add_school">确认</el-button>
      </div>
    </el-dialog>
    <!-- 新增组织弹窗 -->
    <el-dialog title="新增组织" class="table" :visible.sync="add_org_dialog" :before-close="close_add_school" width="700px">
      <div class="el_dialog_org_content">
        <form class="el-form">
          <!-- 组织名称 -->
          <div class="el-form-item" style="margin-top: 15px">
            <label class="el-form-item__label" style="width: 100px">组织名称</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <input v-model="orgName" type="text" autocomplete="off" placeholder="组织名称" class="el-input__inner" />
                </div>
              </span>
            </div>
          </div>
          <!-- 地区 -->
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 100px">组织编码</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <input v-model="randomCode" type="text" autocomplete="off" placeholder="请输入随机码"
                    class="el-input__inner" />
                </div>
              </span>
            </div>
          </div>
          <!-- 区域 -->
          <div class="el-form-item">
            <label class="el-form-item__label" style="width: 100px">区域</label>
            <div class="el-form-item__content" style="margin-left: 5px">
              <span>
                <div class="add_input el-input el-input--suffix">
                  <!-- <el-form
                    :model="school"
                    ref="form"
                  > -->
                  <el-select v-model="regionC" placeholder="请选择区域" class="custom-select" filterable>
                    <el-option v-for="(org, index) in regionCList" :key="index" :label="org.name" :value="org.name">
                      {{ org.name }}
                    </el-option>
                  </el-select>
                  <!-- </el-form> -->
                </div>
              </span>
            </div>
          </div>
          <!-- 登录权限
          <div class="el-form-item">
            <div class="el-form-item__content" style="margin-left: 100px;">
              <span>
                <el-radio v-model="radio" label="1">允许登录</el-radio>
                <el-radio v-model="radio" label="2">不可登录</el-radio>
              </span>
            </div>
          </div> -->
        </form>
      </div>
      <!-- 按钮区域 -->
      <div slot="footer" class="dialog-footer">
        <el-button @click="close_add_school">取 消</el-button>
        <el-button type="primary" @click="ajax_add_org">确认</el-button>
      </div>
    </el-dialog>
    <!-- 内容区域 -->
    <div class="content">
      <!-- 按钮区域 -->
      <div class="button_top">
        <!-- "启用中"按钮 -->
        <a @click="showType(1)" :style="{ color: type == 1 ? 'black' : 'rgb(179, 179, 179)' }">启用中({{ tableData_start
        }})</a>
        <!-- "已停用"按钮 -->
        <a @click="showType(0)" :style="{ color: type == 0 ? 'black' : 'rgb(179, 179, 179)' }">已停用({{ tableData_stop
        }})</a>
      </div>
      <!-- 启用中区域 -->
      <div>
        <el-table :data="tableData" border style="width: 100%" stripe :header-cell-style="headerCellStyle"
          v-loading="tableLoading" @selection-change="handleSelectionChange" :row-key="(row) => row.userid">
          <!-- <el-table-column type="selection" width="50px" :reserve-selection="true"></el-table-column> -->
          <el-table-column show-overflow-tooltip prop="company_name" label="组织名称" min-width="32" header-align="center"
            align="center" />
          <el-table-column show-overflow-tooltip prop="company_number" label="学校名称" min-width="32" header-align="center"
            align="center" />
          <el-table-column show-overflow-tooltip prop="company_number" label="组织编号" min-width="32" header-align="center"
            align="center">
            <template slot-scope="{ row }">
              <div>{{ row.orgCode ? row.orgCode : row.schoolCode ? row.schoolCode : '暂无' }}</div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-tooltip prop="name" label="姓名" min-width="32" header-align="center"
            align="center" />
          <el-table-column show-overflow-tooltip prop="account" label="账户" min-width="32" header-align="center"
            align="center" />
          <el-table-column show-overflow-tooltip prop="Ctime" label="账户开通时间" min-width="40" header-align="center"
            align="center" />
          <el-table-column show-overflow-tooltip label="身份" min-width="32" header-align="center" align="center">
            <template slot-scope="{ row }">
              <div>{{ roleType(row) }}</div>
            </template>
          </el-table-column>
          <el-table-column show-overflow-toolti label="操作" min-width="35" header-align="center" align="center">
            <template slot-scope="{ row }">
              <el-button link type="text" size="small" @click="ajax__open_stop(row)"
                v-if="row.state == 1">停用</el-button>
              <el-button link type="text" size="small" @click="run(row)" v-if="row.state == 1">移动</el-button>
              <el-button link type="text" size="small" @click="ajax__open_stop(row)"
                v-if="row.state == 0">启用</el-button>

              <!-- 管理员操作按钮，只有当 row.type === 1 时才显示 -->
              <el-button v-if="row.type === 1 && row.state == 1" link type="text" size="small"
                @click="ajax_admin(row.userid, row.role, row.type)">
                {{ row.role === 1 ? "取消管理员" : "设置管理员" }}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页区域 -->
        <div class="Pagetion" v-if="total">
          <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total"
            layout="total, prev, pager, next, jumper" @current-change="handlePageChange">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { API_CONFIG } from "@/common/apiConfig";
import { addOp } from "@/api/user";
import { mapGetters } from "vuex";
import { debounce } from "lodash";
import { addUser } from "@/api/user.js";

export default {
  name: "HelloWorld",
  components: {},
  data() {
    return {
      // 新增账户默认后缀
      SuffixData: '',
      // 储存筛选完后的学校
      schoolList: [],
      // 控制下拉菜单的显示与隐藏
      dropdownVisible: false,
      checked: true,
      showCompany: false, // 默认隐藏
      // 响应式数据
      //移动弹窗
      isOrgFormVisible: false,
      //新增账户
      isTableUseVisible: false,
      //新增组织
      add_org_dialog: false,
      //新增组织的变量定义
      orgName: "", // 组织名称
      u_create: "", // 创建人
      randomCode: "", //随机码（可以为空）
      uLogin: "1", // 登录状态 (1 或 2)
      radio: "1",
      //新增学校参数的定义
      sch_name: "", //学校名称
      region: "", //地区
      schoolType: "1", //学校单选框类型
      schoolCode: "", //学校编码
      loginPermission: "1", //是否允许登录
      //学校弹窗
      add_school_dialog: false,
      isCompanyDropdownVisible: false,
      companyListVisibility: [false, false, false],
      open_content: true,
      add_button: true,
      stop_content: false,
      open: true,
      stop: false,
      // 用来存储选中的学校名称
      selectedSchool: "",
      // 启用区域分页
      currentPage: 1, // 当前第几页
      pageSize: 10, // 每页显示条目数
      // 停止区域分页
      down_currentPage: 1, // 当前第几页
      down_pageSize: 10, // 每页显示的条目数
      // 两个分页初始化状态
      up_page: true,
      down_page: false,
      company_name: 0,
      // 启用数组
      tableData: [],
      // 停用数组
      tableData_start: "",
      tableData_stop: "",
      // 添加账户初始化
      form: {
        name: "",
        account: "",
        organization: "",
        school: "",
      },
      //移动组织初始化
      cn_org: true,
      hk_org: false,
      com_org: false,
      // 用于存放从后台获取的组织数据
      organizations: [],
      // 用于存放从后台获取的学校数据
      cn_school: [],
      searchQuery: "", // 用来存储输入框的值
      dialogVisible: true,
      school: {
        OrgId: null, // 初始化 OrgId 为 null 或适当的默认值
      },
      regionCList: [
        { id: 1, name: 'hk' },
        { id: 2, name: 'cn' }
      ], //区域列表
      regionC: 'cn', //区域
      selReg: '', //区域搜索
      // 用来存储传递的参数
      ajaxParams: null,
      check_user_id: "", // 存放当前选择的用户的ID
      type: 1,
      total: 0,
      tableLoading: false,
      checkOrg: "",
      seletSchool: [],
      checkOid: "",
      s_name: "",
      s_username: "",
      checkRole: "",
      roleArray: [
        { value: "1", label: "老师" },
        { value: "2", label: "学生" },
        { value: "3", label: "管理员" },
      ],
      opUser: {},
      person: {
        name: "",
        account: "",
        type: "",
        selectedOrg: "", // 存放所选的组织
        selectedSchool: "", // 存放所选的学校
      },
      checkArray: [],
    };
  },
  computed: {
    ...mapGetters(["userid"]),
    roleType() {
      return function (row) {
        if (row.type == 2) {
          return "学生";
        } else if (row.type == 1) {
          return row.role == 1 ? "管理员" : "老师";
        }
      };
    },
    getSchool() {
      return this.checkOrg
        ? this.cn_school.filter((e) => e.org === this.checkOrg)
        : this.cn_school;
    },
    getSchool2() {
      return this.person.selectedOrg
        ? this.cn_school.filter((e) => e.org === this.person.selectedOrg)
        : this.cn_school;
    },
    getSchool3() {
      return this.school.OrgId || this.searchQuery
        ? this.cn_school.filter((e) => e.org === this.school.OrgId || e.name.includes(this.searchQuery))
        : this.cn_school;
    },
  },
  watch: {},
  methods: {
    handleSelectionChange(selectedRows) {
      this.checkArray = selectedRows.map((row) => row.userid);
    },
    // 移动按钮，将isOrgFormVisible区域显示
    run(row) {
      this.opUser = row;
      this.check_user_id = row.userid; // 将选中的userid存储到check_user_id中
      this.isOrgFormVisible = true; // 显示区域
      // console.log("选中的用户ID：", this.check_user_id); // 打印出当前的选中用户ID
    },
    // 移动关闭按钮
    close_table() {

      // 清空补充信息查询数据
      this.searchQuery = '';
      this.school.OrgId = null;
      this.selReg = '';
      this.ajax_school()

      this.SuffixData = ''
      this.isOrgFormVisible = false;
      this.isTableUseVisible = false;
      this.selectedSchool = ''
    },
    // 新增账户
    nextStep() {
      this.isTableUseVisible = true;
      this.person = {
        name: "",
        account: "",
        type: 2,
        selectedOrg: "", // 存放所选的组织
        selectedSchool: "", // 存放所选的学校
      };
    },
    //新增账户关闭
    form_clost() {
      this.isTableUseVisible = false;
    },
    //新增组织关闭
    // close_add_org() {
    //   this.add_org_dialog = false;
    // },
    //新增学校关闭
    close_add_school() {
      this.regionC = 'cn'
      this.add_org_dialog = false;
      this.add_school_dialog = false;
    },
    showType(type) {
      this.type = type;
      this.currentPage = 1;
      this.getData();
    },
    // 页码扩展按钮
    handlePageChange(page) {
      this.currentPage = page;
      this.getData();
    },
    // 表头的背景色
    headerCellStyle() {
      return { backgroundColor: "#f1f1f1" };
    },
    // 已启用
    getData() {
      // 确认后发起请求
      this.tableLoading = true;
      let params = [
        {
          functionName: API_CONFIG.ajaxstart.functionName, // 使用配置中的存储过程名称
          r_type: this.type,
          cn: this.s_name,
          un: this.s_username,
          oid: this.checkOid,
          org: this.checkOrg,
          userType: this.checkRole,
          page: this.currentPage, // 使用当前页码
          num: this.pageSize, // 每页条目数
        },
      ];
      this.tableData = [];
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          // 假设 res.data[0] 是返回的用户数据数组
          const users = res.data[0].map((user) => ({
            company_name: user.org_name || "暂无", // 组织名称
            company_number: user.school_name || "暂无", // 学校名称
            name: user.user_name || "暂无", // 姓名
            account: user.account_name || "暂无", // 账户
            userid: user.user_id,
            role: user.admin_role || 0, // 角色，假设 1 为管理员，0 为普通用户
            school: user.s_id,
            org: user.org,
            type: user.usertype,
            state: user.user_state,
            orgCode: user.org_code,
            schoolCode: user.school_code,
            Ctime: user.Ctime,
          }));

          // this.tableData = Array(this.pageSize * (this.currentPage - 1)).fill(null).concat(users);
          this.tableData = users;
          this.total = res.data[0][0].total_count;
          this.tableData_stop = res.data[2][0].num;
          this.tableData_start = res.data[1][0].num;
          this.tableLoading = false;
          console.log("you", res.data);

        })
        .catch((err) => {
          // 处理失败的响应
          this.tableLoading = false;
          // this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err); // 打印更详细的错误信息
        });
    },
    // 停用或者启用
    ajax__open_stop(row) {
      const actionMessage = row.state == 1 ? "停用该用户" : "启用该用户";
      const successMessage = row.state == 1 ? "停用成功!" : "启用成功!";
      const cancelMessage = row.state == 1 ? "已取消停用" : "已取消启用";
      let params = [
        {
          functionName: API_CONFIG.userstate.functionName, // 调用存储过程的名称
          u_id: row.userid, // 将传入的userid设置为 u_id
        },
      ];
      // 弹窗提示确认
      this.$confirm(`此操作将会${actionMessage}, 是否继续?`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 在用户点击确定后，发起 AJAX 请求
          this.$ajax
            .post(API_CONFIG.baseUrl, params)
            .then(async () => {
              // 提示操作成功
              this.$message({
                type: "success",
                message: successMessage,
              });

              this.getData();
              await addOp({
                uid: this.userid,
                cid: "",
                type: "user_op",
                content: `${row.state == 1 ? "停用" : "启用"}了${row.userid}`,
              });
            })
            .catch((err) => {
              // 处理失败的响应
              this.$message.error("处理失败");
              console.error("请求失败，错误信息：", err); // 打印详细错误信息
            });
        })
        .catch(() => {
          // 取消操作后提示
          this.$message({
            type: "info",
            message: cancelMessage,
          });
        });
    },
    //设置管理员
    ajax_admin(userid, role) {
      // 判断用户的角色，弹出相应的提示
      let messageContent =
        role === 1
          ? "此操作将会取消此用户的管理员状态，是否继续？"
          : "此操作将会设置该用户为管理员，是否继续?";

      // 弹窗确认操作
      this.$confirm(messageContent, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 发送请求时的参数
          let params = [
            {
              functionName: API_CONFIG.ajax_admin.functionName, // 存储过程的名称
              u_id: userid,
            },
          ];

          this.$ajax
            .post(API_CONFIG.baseUrl, params)
            .then(async () => {
              // 只有在成功执行时调用这两个函数
              this.getData();
              // 如果更新成功，显示成功提示并调用 ajax_user_stop 和 getData
              this.$message({
                type: "success",
                message: "已成功执行!",
              });
              await addOp({
                uid: this.userid,
                cid: "",
                type: "user_op",
                content: `将${userid}${role == 1 ? "取消了管理员" : "设置了管理员"
                  }`,
              });
            })
            .catch((error) => {
              // 请求失败的处理
              console.error("请求失败:", error);
              this.$message({
                type: "error",
                message: "操作失败，请稍后再试",
              });
            });
        })
        .catch(() => {
          // 取消操作时的提示
          this.$message({
            type: "info",
            message: "已取消操作",
          });
        });
    },
    addUser() {
      // 检查必填项
      if (
        !this.person.name ||
        !this.person.account ||
        !this.person.selectedSchool
      ) {
        this.$message({
          type: "error",
          message: "请填写所有必填项：姓名、账号、组织和学校。",
        });
        return; // 终止函数执行
      }
      let emailData = this.getEmailWithAt(this.person.account)

      let zSuffix = ''

      if (emailData) {
        zSuffix = this.person.account
      } else {
        zSuffix = this.person.account + this.SuffixData
      }


      console.log('zSuffix', zSuffix);
      // this.person.account

      if (!/\S+@\S+\.\S+/.test(zSuffix)) {
        this.$message.error("账号要填写邮箱格式");
        return;
      }
      let params = {
        alias: this.person.name,
        username: zSuffix,
        org: this.person.selectedOrg,
        oid: this.person.selectedSchool,
        ph: "",
        cid: "",
        type: 1,
        opid: "",
        dest: "",
        eduid: "",
      };
      addUser(params)
        .then(async (response) => {
          if (response) {
            await addOp({
              uid: this.userid,
              cid: "",
              type: "user_op",
              content: `添加了${this.person.name} 账号为${zSuffix}`,
            });
            this.$message({
              type: "success",
              message: "操作成功",
            });
            this.SuffixData = '';
            this.isTableUseVisible = false;
            this.getData(); // 例如刷新表格数据
          }
        })
        .catch((error) => {
          console.error("请求失败，错误信息：", error);
        });
    },
    // 学校查询
    ajax_school() {
      // const params = [API_CONFIG.ajax_school]; // 使用配置中的接口参数


      // 构建请求参数
      let params = [
        {
          functionName: API_CONFIG.ajax_school.functionName, // 调用存储过程的名称
          u_name: this.searchQuery, // 学校名称，绑定到 orgName
          u_org: this.school.OrgId || '', // 选择的组织的 ID，绑定到 school.parentOrgId，如果没有选择则为空
          u_regC: this.selReg
        },
      ];


      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          // console.log("返回的数据为：", res.data);  // 检查返回的数据
          if (res.data && Array.isArray(res.data[0])) {
            // 将 name 和 org 都存入 cn_school 数组中
            this.cn_school = res.data[0].map((item) => ({
              name: item.name,
              id: item.id,
              org: item.org,
              area: item.area,
              orgName: item.org_name
            }));
            // this.schoolList= res.data[0].map((item) => ({
            //   name: item.name,
            //   id: item.id,
            //   org: item.org,
            //   area:item.area
            // }));
            console.log(this.cn_school);
          }
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err);
        });
    },
    //组织查询
    ajax_org() {
      const params = [API_CONFIG.ajax_org]; // 使用配置中的接口参数
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          // console.log("返回的数据为：", res.data);  // 检查返回的数据
          if (res.data && Array.isArray(res.data[0])) {
            // 使用 map() 提取所有组织名称
            this.organizations = res.data[0].map((item) => ({
              name: item.name,
              id: item.id,
            }));
          }
          // console.log("返回的结果为：",this.organizations);
        })
        .catch((err) => {
          this.$message.error("查询失败");
          console.error("请求失败，错误信息：", err);
        });
    },
    //关键词查询
    ajax_school_name() {
      this.selectedSchool = ""
    },
    //组织下拉菜单查询
    ajax_org_check() {
      this.selectedSchool = "";
      this.ajax_school()
    },
    //新增学校
    ajax_add_school() {
      // 校验学校名称是否为空
      if (!this.sch_name || this.sch_name.trim() === "") {
        this.$message.error("学校名称不能为空！");
        return;
      }

      // 构建请求参数
      let params = [
        {
          functionName: API_CONFIG.ajax_add_school.functionName, // 调用存储过程的名称
          u_name: this.sch_name, // 学校名称，绑定到 orgName
          u_org: this.school.parentOrgId || "", // 选择的组织的 ID，绑定到 school.parentOrgId，如果没有选择则为空
          u_dest: this.region || "", // 地区，绑定到 region，如果为空则传空字符串
          u_type: this.schoolType || "", // 学校类型，绑定到 schoolType，如果没有选择则为空
          u_code: this.schoolCode || "", // 学校编码，绑定到 schoolCode，如果为空则传空字符串
          u_regionC: this.regionC || "",
          u_isLogin: this.loginPermission === "1" ? 1 : 2, // 是否允许登录，默认传 2（不允许登录）如果没有选择
          uid: this.userid,
        },
      ];

      // 发起请求
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then(() => {
          this.$message({
            type: "success",
            message: "已成功执行!",
          });
          // 刷新学校列表
          this.ajax_school();
          // 关闭弹窗
          this.add_school_dialog = false;
          // 清空输入框、下拉菜单选择和单选框
          this.sch_name = ""; // 清空学校名称
          this.school.parentOrgId = ""; // 清空组织选择
          this.region = ""; // 清空地区选择
          this.schoolType = "1"; // 清空学校类型选择
          this.schoolCode = ""; // 清空学校编码
          this.regionC = 'cn'
          this.loginPermission = "1"; // 清空登录权限的选择
        })
        .catch((err) => {
          this.$message.error("插入失败");
          console.error("请求失败，错误信息：", err);
        });
    },
    //新增组织
    ajax_add_org() {
      // 获取弹窗中的输入内容
      let orgName = this.orgName; // 组织名称
      let randomCode = this.randomCode || ""; // 随机码（可为空）
      let uLogin = this.radio; // 获取复选框选中的值（1 或 2）

      // 验证组织名称不能为空
      if (!orgName) {
        this.$message.error("组织名称不能为空");
        return;
      }

      // 构造请求参数
      let params = [
        {
          functionName: API_CONFIG.ajax_add_org.functionName, // 调用存储过程的名称
          u_name: orgName, // 组织名称
          u_create: this.userid, // u_create 固定为0
          u_code: randomCode, // 随机码（可以为空）
          u_regionC: this.regionC,
          u_login: uLogin, // 登录状态
        },
      ];

      // 发起请求
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then(() => {
          this.$message({
            type: "success",
            message: "已成功执行!",
          });
          // 刷新组织列表
          this.ajax_org();
          //关闭弹窗
          this.add_org_dialog = false;
          // 清空输入框、下拉菜单选择和单选框
          this.orgName = ""; // 清空学校名称
          this.regionC = 'cn'
          this.randomCode = ""; // 清空地区选择
          this.uLogin = "1"; // 清空学校类型选择
        })
        .catch((err) => {
          this.$message.error("插入失败");
          console.error("请求失败，错误信息：", err);
        });
    },
    //确认移动
    ajax_confirm() {
      // 获取选择的组织ID，确保 orgId 在调用之前已经定义
      let orgId = this.school.OrgId || ""; // 如果没有选择组织，则为空字符串

      // 获取选中的学校对象
      const selectedSchoolObject = this.cn_school.find(
        (school) => school.id === this.selectedSchool
      );

      // 判断学校ID是否为空
      if (!selectedSchoolObject || !selectedSchoolObject.id) {
        this.$message({
          type: "warning",
          message: "请选择你要移动的学校!",
        });
        return; // 学校ID为空时，阻止后续操作
      }

      if (selectedSchoolObject.org) {
        orgId = selectedSchoolObject.org;
      }

      // 构造请求参数
      let params = [
        {
          functionName: API_CONFIG.ajax_confirm.functionName, // 调用存储过程的名称
          u_id: this.check_user_id, // 使用this.check_user_id来获取用户id
          o_id: orgId || "", // 选择的组织的 ID，绑定到 school.parentOrgId，如果没有选择则为空
          s_id: selectedSchoolObject.id, // 选中的学校的id
        },
      ];

      // 发起请求
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then(async () => {
          this.$message({
            type: "success",
            message: "移动成功!",
          });
          this.isOrgFormVisible = false; // 隐藏区域
          // 在此之后再进行输出
          // console.log("选择的用户id为：", this.check_user_id);
          // console.log("选择的组织id为：", orgId);
          // console.log("选择的学校id为：", selectedSchoolObject.id);
          this.getData(); // 刷新
          //清空数据
          this.school.OrgId = ""; // 清空所选组织
          // 在此之后清空选中的学校
          this.selectedSchool = null; // 取消选择，重置单选框
          //刷新学校选择
          this.ajax_school();
          await addOp({
            uid: this.userid,
            cid: "",
            type: "user_op",
            content: `将${this.opUser.userid} 原组织id ${this.opUser.org ? this.opUser.org : "无"
              } 原学校id ${this.opUser.school}移动到 组织id ${orgId ? orgId : "无"
              } 学校id ${selectedSchoolObject.id}`,
          });
        })
        .catch((err) => {
          this.$message.error("移动失败");
          console.error("请求失败，错误信息：", err);
        });
    },
    changeOrg() {
      this.checkOid = "";
      this.currentPage = 1;
      this.getData();
    },
    changeOid: debounce(function () {
      this.currentPage = 1; // 重置当前页
      this.getData(); // 调用获取数据的方法
    }, 300),
    orgChange() {
      this.SuffixData = ''
      this.person.selectedSchool = "";
      this.getSuffix()
      this.$forceUpdate()
    },
    getSuffix() {
      let params = [
        {
          functionName: API_CONFIG.ajax_Suffix.functionName, // 调用存储过程的名称
          org: this.person.selectedOrg, //组织id
          oid: this.person.selectedSchool, //学校id
        },
      ];

      // 发起请求
      this.$ajax
        .post(API_CONFIG.baseUrl, params)
        .then((res) => {
          console.log('getSuffix', res)
          let data = res.data[0]
          let orgData = res.data[1]

          if (data.length > 0) {
            let ap = data[0].username
            this.SuffixData = this.getEmailWithAt(ap)[0]
          } else if (orgData.length > 0) {
            let ap = orgData[0].username
            this.SuffixData = this.getEmailWithAt(ap)[0]
          }

        })
        .catch((err) => {
          console.error("请求失败，错误信息：", err);
        });
    },
    getEmailWithAt(email) {
      const regex = /@[^@]+$/;  // 匹配最后一个 @ 及其后的内容
      const match = email.match(regex);
      return match ? match : '';
    },
    schoolChange() {
      for (var i = 0; i < this.cn_school.length; i++) {
        if (
          this.cn_school[i].id == this.person.selectedSchool &&
          this.cn_school[i].org
        ) {
          this.person.selectedOrg = this.cn_school[i].org;
        }
      }
      this.SuffixData = ''
      if (this.person.selectedSchool != '') {
        this.getSuffix()
      }

      this.$forceUpdate()
    },
  },
  mounted() {
    // this.ajax_user_stop();  // 如果是在启用区域，停用
    this.getData(); // 如果是在停用区域，启用
    this.ajax_org(); // 组件创建时，立即调用 ajax_org 获取数据
    this.ajax_school(); // 组件创建时，立即调用 ajax_org 获取数据
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.list_container {
  width: 100%;
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
}

/* 内容区域 */
.content {
  width: 100%;
  overflow: auto;
  height: calc(100% - 75px);
}

/* 按钮区域 */
.button_top {
  width: 100%;
  display: flex;
  align-items: center;
  margin: 10px 0;
}

.button_top a {
  cursor: pointer;
  color: black;
  font-weight: bold;
}

.button_top a+a {
  margin-left: 20px;
}

/* 表单移动弹窗 */
.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}

/* 表单头高度 */
.el-table .el-table__header th {
  height: 60px;
  /* 设置表头行高 */
  color: rgb(51, 51, 51);
}

.el-table th {
  background-color: rgb(247, 247, 247) !important;
}

/* 表格内容的高度以及字体颜色 */
.el-table__row {
  height: 60px;
  color: black;
}

/* 表单中操作栏的文字间距 */
.el-button+.el-button,
.el-checkbox {
  margin-left: 25px;
}

/* 添加账户的按钮 */
.add-button {
  display: flex;
  align-items: center;
  background-color: transparent;
  border: none;
  cursor: pointer;
  font-size: 18px;
  color: black;
  font-weight: bold;
  margin-left: -900px;
  margin-top: 35px;
  float: left;
}

/* +号图标 */
.add-icon {
  border: 2px solid black;
  /* 设置黑色边框 */
  color: black;
  /* 设置加号颜色为黑色 */
  border-radius: 50%;
  /* 设置为圆形 */
  width: 15px;
  /* 设置圆圈的宽度 */
  height: 15px;
  /* 设置圆圈的高度 */
  display: flex;
  /* 使用 Flexbox 使加号居中 */
  align-items: center;
  /* 垂直居中 */
  justify-content: center;
  /* 水平居中 */
  margin-right: 8px;
  /* 图标与文本之间的间距 */
}

.el_title {
  font-size: 18px !important;
  color: #fff !important;
  line-height: 40px;
}

/* 移动弹窗的选择区域 */
.table_down {
  width: 100%;
  height: 450px;
  /* 添加滚动条 */
  overflow-y: auto;
  /* 当内容超出时，显示垂直滚动条 */
  max-height: 450px;
  /* 设置最大高度以限制显示区域 */
}

/* 头部区域 */
.table_top {
  width: 630px;
  height: 40px;
  float: left;
  margin-left: 250px;
  margin-top: 20px;
  /* border: 1px solid red; */
}

/* 移动弹窗头部区域文字 */
.organzition_top {
  font-size: 15px;
  text-align: center;
  float: left;
  padding-right: 95px;
  color: #0076fe;
  cursor: pointer;
}

/* X号推出弹窗按钮 */
.table_close {
  color: #999;
  position: absolute;
  font-size: 25px;
  float: left;
  margin-left: 420px;
  cursor: pointer;
  margin-top: 10px;
}

/* 输入框容器*/
.input-container {
  width: 100%;
  display: flex;
  align-items: center;
  /* border: 1px solid red; */
}

/* 搜索框 */
.table_find {
  width: 100%;
  height: 40px;
  padding-right: 50px;
  padding-left: 10px;
  border: 1px solid rgb(189, 189, 189);
  font-size: 15px;
  outline: none;
  cursor: pointer;
  border-radius: 10px;
  box-sizing: border-box;
}

/* 按钮选择区域 */
.check_box_content {
  width: 90%;
  height: 45px;
  float: left;
  margin-top: 64px;
  border: 1px solid red;
}

/* 按钮样式 */
.check_box_content .el-button {
  float: left;
  margin-top: 5px;
}

/* 搜索放大镜符号 */
.el-icon-search {
  font-size: 25px;
  position: absolute;
  display: block;
  color: black;
  font-weight: bold;
  cursor: pointer;
  top: 50%;
  transform: translateY(-50%);
  right: 20px;
}

/* 自定义 el-select 的外部样式 */
.custom-select {
  width: 220px;
  /* 设置宽度 */
  font-size: 14px;
  /* 设置字体大小 */
}

/* 修改 el-input__inner 样式 */
.custom-select .el-input__inner {
  height: 30px;
  /* 修改输入框的高度 */
  font-size: 16px;
  /* 修改字体大小 */
  padding-left: 15px;
  /* 修改左边的内边距 */
  border-radius: 6px;
  /* 设置圆角 */
  border: 1px solid #dcdfe6;
  /* 设置边框 */
}

/* 如果需要修改选项的样式，可以使用 .el-select-dropdown__item */
.custom-select .el-select-dropdown__item {
  font-size: 14px;
  /* 修改下拉框选项的字体大小 */
  padding: 12px;
  /* 修改选项的内边距 */
}

.custom-select .el-select-dropdown__item.selected {
  background-color: #409eff;
  /* 设置选中项的背景色 */
  color: #fff;
  /* 设置选中项的字体颜色 */
}

/* 弹窗选择区域 */
.checkbox-container {
  height: auto;
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

/* .checkbox_comment样式 */
.checkbox_comment {
  position: relative;
  /* 为复选框和下划线提供定位 */
  width: 50%;
  height: 50px;
  margin-top: 10px;
  display: flex;
  /* 使用flexbox对齐 */
  align-items: center;
  /* 垂直居中 */
  justify-content: space-between;
  /* 确保文本和复选框分别位于两端 */
  float: left;
}

/* 下划线 */
.checkbox_comment::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 13%;
  width: 300px;
  height: 1px;
  background-color: #e7e7e7;
}

/* .checkbox-left部分 */
.checkbox-left {
  flex-grow: 1;
  /* 使该部分占据剩余空间 */
  display: flex;
  align-items: center;
}

.checkbox-left a {
  color: #000000;
  font-size: 14px;
  margin-left: 70px;
  /* Adjust the spacing between text and checkbox */
  float: left;
  white-space: nowrap;
  /* Prevent line breaks */
  overflow: hidden;
  /* Hide overflow */
  text-overflow: ellipsis;
  /* Add ellipsis for overflow text */
  max-width: 181px;
  /* Set a maximum width to trigger ellipsis */
}



/* 去除原生复选框样式 */
.checkbox_input {
  -webkit-appearance: none;
  /* 去除Safari等浏览器默认样式 */
  -moz-appearance: none;
  /* 去除Firefox的默认样式 */
  appearance: none;
  /* 去除默认样式 */
  width: 20px;
  /* 设置复选框的宽度 */
  height: 20px;
  /* 设置复选框的高度 */
  border: 1.5px solid #000000;
  /* 默认边框颜色 */
  position: relative;
  /* 设置定位，方便后面绝对定位勾号 */
  cursor: pointer;
  /* 鼠标悬停时显示为可点击状态 */
  float: right;
  margin-top: 20px;
  margin-right: 10px;
}

.checkbox_input:checked {
  background-color: #007bff;
  /* 选中时背景颜色为蓝色 */
  border-color: #007bff;
  /* 边框颜色为蓝色 */
}

/* 选中时的白色勾号 */
.checkbox_input:checked::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 5px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 去除原生复选框样式 */
.checkbox_input_org {
  -webkit-appearance: none;
  /* 去除Safari等浏览器默认样式 */
  -moz-appearance: none;
  /* 去除Firefox的默认样式 */
  appearance: none;
  /* 去除默认样式 */
  width: 20px;
  /* 设置复选框的宽度 */
  height: 20px;
  /* 设置复选框的高度 */
  border: 1.5px solid #000000;
  /* 默认边框颜色 */
  cursor: pointer;
  /* 鼠标悬停时显示为可点击状态 */
  position: absolute;
  /* 使用绝对定位，确保其位于右侧 */
  right: 15px;
  /* 右侧间距 */
}

/* 组织表的选择框样式 */
/* 选中时的样式 */
.checkbox_input_org:checked {
  background-color: #007bff;
  /* 选中时背景颜色为蓝色 */
  border-color: #007bff;
  /* 边框颜色为蓝色 */
}

/* 选中时的白色勾号 */
.checkbox_input_org:checked::before {
  content: "";
  position: absolute;
  top: 0px;
  left: 5px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* 组织名称 */
.checkbox-company {
  margin-top: 60px;
  /* 可选：设置顶部间距 */
  float: left;
  /* border: 1px solid red; */
  height: auto;
  width: 350px;
}

/* 分页区域 */
.Pagetion {
  width: auto;
  margin-top: 10px;
  /* border: 1px solid red; */
}

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

.el-pager li {
  padding: 0px 35px;
  background: #fff;
  font-size: 13px;
  min-width: 35.5px;
  height: 28px;
  line-height: 30px;
  box-sizing: border-box;
  text-align: center;
}

/* 操作字体 */
.el-button--text {
  border-color: transparent;
  color: #0076fe;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}

/* 添加账户头顶 */

/* 输入框 */
.form_input {
  width: 400px;
}

.el-form {
  /* margin-left: 66px;
  width: 60%; */
  /* border: 1px solid red; */
}

/* 确认跟取消区域 */
.form_tool {
  margin-top: 20px;
  float: left;
  margin-left: 90px;
}

/* 按钮样式 */
.form_tool .el-button {
  width: 100px;
}

/* 添加账户的容器 */
.el-dialog__body {
  color: #606266;
  font-size: 14px;
  height: 180px;
}

/* 新增组织的内容容器 */
.el_dialog_org_content {
  color: #606266;
  font-size: 14px;
  height: 120px;
}

/* 新增学校的内容容器 */
.el_dialog_school_content {
  color: #606266;
  font-size: 14px;
  /* height: 300px; */
}

/* 新增学校按钮 */
.add_school {
  float: left;
  margin-top: 40px;
  margin-left: 100px;
}

/* 确认移动按钮 */
.add_run {
  float: right;
  margin-top: 40px;
  margin-right: 100px;
}

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

.el-form-item {
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  /* border: 1px solid black; */
}

.el-form-item__label {
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  margin-left: 20px;
  width: 70px;
}

.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
.input_tip{
  margin: 0 49px;
}
.el-dialog {
  position: relative;
  margin: 0;
  background: #fff;
  border-radius: 2px;
  box-sizing: border-box;
  width: 50%;
  height: auto;
}

/* 停用表单的滑动条 */
::v-deep.el-table--scrollable-x .el-table__body-wrapper {
  overflow-x: hidden;
}

::v-deep.el-table__body-wrapper is-scrolling-left {
  overflow-x: hidden;
}

/* 选择组织下拉菜单的鼠标悬浮效果 */
::v-deep.el-select-dropdown__item:hover {
  background-color: #f5f7fa;
}

/* 下拉菜单的滚动条 */
::v-deep.el-select-dropdown__wrap .el-scrollbar__wrap {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

/* 下拉菜单的ul顶部 */
::v-deep.el-scrollbar__view .el-select-dropdown__list {
  list-style: none;
  padding: 5px 0;
  margin: 0;
  box-sizing: border-box;
}

/* 下拉菜单底部部分 */
::v-deep.el-scrollbar__bar .is-vertical {
  width: 0px;
  height: 0px;
}

::v-deep.el-scrollbar__bar .is-horizontal {
  width: 0px;
  height: 0px;
}

.table>>>.el-dialog__header {
  padding: 15px 20px;
  background: #454545;
}

.table>>>.el-dialog__title {
  color: #fff;
}

.input_box {
  position: relative;
  height: 40px;
  width: 200px;
}
</style>