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"
          >
          </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>
                </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"
                >
                </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>
      <!-- 按钮区域 -->
      <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: "",
      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; // 终止函数执行
      }
      this.person.account = this.person.account + this.SuffixData
      if (!/\S+@\S+\.\S+/.test(this.person.account)) {
        this.$message.error("账号要填写邮箱格式");
        return;
      }
      let params = {
        alias: this.person.name,
        username: this.person.account,
        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} 账号为${this.person.account}`,
            });
            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
            }));
            // 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: 250px;
  height: 2px;
  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: 240px; /* 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;
}
.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>