xh_control/src/views/schoolSection/userManage/userManage.vue

<template>
  <div class="main_root">
    <div class="schoolInfo">
      <div
        class="schoolname"
        :class="[
          curClass.id === schoolInfo.id && curClass.type === schoolInfo.type
            ? 'active'
            : ''
        ]"
        @click="selectClass(schoolInfo)"
      >
        {{ schoolInfo.name }}
      </div>
      <div class="class_list">
        <div v-for="item in schoolInfo.children" :key="item.id">
          <div
            :class="[
              'class_item',
              curClass.id === item.id && curClass.type === item.type
                ? 'active'
                : ''
            ]"
            :title="item.name"
            @click="selectClass(item)"
          >
            {{ item.name }}
          </div>
          <span
            @click="toOpenMenu(item, $event)"
            class="ivu-icon iconfont icon-sandian"
          ></span>
        </div>
      </div>
    </div>
    <div class="user_list">
      <div class="search_header">
        <div class="search_left">
          <Select
            :transfer="true"
            v-model="searchForm.care"
            style="width: 140px"
            @on-change="searchList()"
          >
            <Option v-for="item in care_list" :value="item.id" :key="item.id">{{
              item.title
            }}</Option>
          </Select>
          <Select
            :transfer="true"
            v-model="searchForm.enabled"
            style="width: 140px; margin: 0 10px"
            @on-change="searchList()"
          >
            <Option
              v-for="item in enabled_list"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
          <Select
            :transfer="true"
            v-model="searchForm.control"
            style="width: 140px; margin-right: 10px"
            @on-change="searchList()"
          >
            <Option
              v-for="item in control_list"
              :value="item.id"
              :key="item.id"
              >{{ item.title }}</Option
            >
          </Select>
          <Input
            v-model="searchForm.username"
            placeholder="请输入姓名"
            search
            @on-search="searchList()"
            style="width: 150px"
          />
        </div>
        <div>
          <Button type="primary" class="primary_btn" @click="userImport()"
            >用户导入</Button
          >
          <Button
            style="margin: 0 10px"
            type="primary"
            class="primary_btn"
            @click="userExport()"
            >用户导出</Button
          >
          <Button type="primary" class="primary_btn" @click="toAdd()"
            >新建</Button
          >
        </div>
      </div>
      <div class="table_wrap">
        <Table :columns="columns" :data="searchForm.list">
          <template slot-scope="{ row }" slot="loginname">
            <span
              v-if="row.care === 1"
              style="color: #fcc138"
              class="ivu-icon iconfont icon-guanzhu-yiguanzhu"
            ></span>
            {{ row.loginname }}
          </template>
          <template slot-scope="{ row }" slot="enabled">
            <i-switch
              size="large"
              v-model="row.enabled"
              :true-value="1"
              :false-value="2"
              @on-change="enabledChange(row)"
            >
              <span slot="open">启用</span>
              <span slot="close">禁用</span>
            </i-switch>
          </template>
          <template slot-scope="{ row }" slot="actionSlot">
            <div class="action_list">
              <div class="action_del" @click="toDel(row)">删除</div>
              <div class="action_success" @click="toCare(row)">
                <span v-if="row.care === 2">重点关注</span>
                <span v-else>取消关注</span>
              </div>
            </div>
          </template>
        </Table>
      </div>
      <div class="page_wrap">
        <Page
          :transfer="true"
          :total="searchForm.total"
          :current="searchForm.page"
          :page-size="searchForm.size"
          :page-size-opts="[10, 20, 40, 60]"
          @on-change="pageChange"
          @on-page-size-change="pageSizeChange"
          show-total
          show-sizer
        ></Page>
      </div>
    </div>
    <!-- 更多菜单弹窗 -->
    <div
      class="more_menu"
      ref="moreMenuRef"
      @mousedown.stop
      @contextmenu.stop.prevent
      @mousewheel.stop
    >
      <div @click="toSelectMenuItem(1)" class="menu_group">编辑</div>
      <div @click="toSelectMenuItem(2)" class="menu_group">删除</div>
    </div>
    <!-- 编辑班级 -->
    <Modal
      v-model="classInfo.show"
      :mask-closable="false"
      class="modal_tip"
      title="编辑"
    >
      <Form
        v-if="classInfo.show"
        ref="classInfo"
        :model="classInfo"
        :rules="rules"
        :label-width="110"
      >
        <FormItem label="班级名称" prop="classname">
          <Input
            v-model.trim="classInfo.classname"
            placeholder="请输入班级名称"
          ></Input>
        </FormItem>
      </Form>
      <div slot="footer" style="text-align: right">
        <Button @click="exitInfo.show = false">取消</Button>
        <Button @click="saveclassInfo()" type="primary" class="primary_btn"
          >保存</Button
        >
      </div>
    </Modal>
    <!-- 已存在列表 -->
    <Modal
      v-model="exitInfo.show"
      :mask-closable="false"
      class="exit_modal modal1"
      title="提示"
    >
      <div class="exit">
        <div>
          <div v-if="exitInfo.studentsExisted.length > 0">
            以下学生信息已存在
            <Table border :columns="columns2" :data="exitInfo.studentsExisted">
              <template slot-scope="{ row }" slot="usersex">
                <span>
                  {{
                    row.usersex == 1 ? "男" : row.usersex == 2 ? "女" : "未知"
                  }}
                </span>
              </template>
            </Table>
          </div>
          <div v-if="exitInfo.usersExisted.length > 0">
            已存在非本校账号列表
            <Table border :columns="columns2" :data="exitInfo.usersExisted">
              <template slot-scope="{ row }" slot="usersex">
                <span>
                  {{
                    row.usersex == 1 ? "男" : row.usersex == 2 ? "女" : "未知"
                  }}
                </span>
              </template>
            </Table>
          </div>
        </div>
      </div>
    </Modal>
    <!-- 导入 -->
    <Modal
      :mask-closable="false"
      v-model="importInfo.show"
      class="modal_tip"
      title="导入"
    >
      <Upload
        v-if="importInfo.show"
        type="drag"
        action
        accept=".xls,.xlsx"
        :before-upload="handleUpload"
      >
        <div style="padding: 30px 0; background: #f8f8f9">
          <Button type="primary" class="primary_btn" style="font-size: 16px">
            <Icon type="ios-cloud-upload-outline" size="18"></Icon>上传excel
          </Button>
          <div style="margin-top: 10px; color: #999">支持上传xlsx/xls文件</div>
        </div>
      </Upload>
      <div v-if="importInfo.file" class="files_list">
        {{ importInfo.file.name }}
      </div>
      <div class="import_tip">
        导入数据需按照模板填写信息，
        <span class="theme_color" @click="download()">下载表格模板</span>
      </div>
      <div slot="footer">
        <Button @click="importInfo.show = false">取消</Button>
        <Button
          @click="ok_import"
          class="primary_btn"
          :loading="wait_flag"
          type="primary"
          >保存</Button
        >
      </div>
    </Modal>
    <!-- 新建 -->
    <Modal
      class="modal1"
      :mask-closable="false"
      v-model="addInfo.show"
      title="新建"
    >
      <Form
        v-if="addInfo.show"
        ref="addForm"
        :model="addInfo"
        :rules="rules"
        :label-width="110"
        inline
      >
        <FormItem label="姓名" prop="username" style="width: calc(50% - 10px)">
          <Input v-model="addInfo.username" placeholder="请输入姓名"></Input>
        </FormItem>
        <FormItem label="性别" style="width: calc(50% - 10px)">
          <RadioGroup v-model="addInfo.usersex">
            <Radio :label="1">男</Radio>
            <Radio :label="2">女</Radio>
            <Radio :label="0">未知</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="密码" prop="loginpwd" style="width: calc(50% - 10px)">
          <Input v-model="addInfo.loginpwd" placeholder="请输入密码"></Input>
        </FormItem>
        <FormItem
          label="确认密码"
          prop="loginpwd1"
          style="width: calc(50% - 10px)"
        >
          <Input
            v-model="addInfo.loginpwd1"
            placeholder="请输入确认密码"
          ></Input>
        </FormItem>
        <FormItem label="登录名" prop="loginname" style="width: 100%">
          <Input v-model="addInfo.loginname" placeholder="请输入登录名"></Input>
        </FormItem>
        <FormItem label="班级" class="require" style="width: 100%">
          <Select
            v-model="addInfo.classid"
            placeholder="请选择班级"
            style="width: 300px"
            @on-change="classChange()"
          >
            <template v-if="schoolInfo.children.length > 0">
              <Option
                v-for="item in schoolInfo.children"
                :value="item.id"
                :key="item.id"
                >{{ item.name }}</Option
              >
            </template>
          </Select>
        </FormItem>
        <FormItem label="状态" style="width: 100%">
          <RadioGroup v-model="addInfo.enabled">
            <Radio :label="1">启用</Radio>
            <Radio :label="2">禁用</Radio>
          </RadioGroup>
        </FormItem>
        <FormItem label="学号" style="width: 100%">
          <Input v-model="addInfo.studentno" placeholder="请输入学号"></Input>
        </FormItem>
        <FormItem label="手机号码" style="width: 100%">
          <Input
            v-model="addInfo.userphone"
            placeholder="请输入手机号码"
          ></Input>
        </FormItem>
        <FormItem label="身份证号码" style="width: 100%">
          <Input
            v-model="addInfo.cardid"
            placeholder="请输入身份证号码"
          ></Input>
        </FormItem>
      </Form>
      <div
        slot="footer"
        style="
          display: flex;
          justify-content: space-between;
          align-items: center;
        "
      >
        <div style="color: #b50000">
          注：密码必须是6-16位的大小写英文字母、数字组合。
        </div>
        <div>
          <Button @click="addInfo.show = false">取消</Button>
          <Button @click="saveAddInfo()" type="primary" class="primary_btn"
            >保存</Button
          >
        </div>
      </div>
    </Modal>
    <Spin fix v-if="showLoading" style="background-color: transparent">
      <Icon type="ios-loading" size="18" class="demo-spin-icon-load"></Icon>
      <div>加载中</div>
    </Spin>
  </div>
</template>

<script>
import {
  class_delete,
  class_edit,
  class_list,
  user_care,
  user_delete,
  user_disabled,
  user_enable,
  user_export,
  user_import,
  user_list,
  user_un_care
} from "@/api/school";
import { user_add, user_edit } from "@/api/school";
import { exportToExcel } from "@/utils/exportToExcel";
import { generateRandomString, pwdCheck, reg } from "@/utils";
export default {
  data() {
    const classnameCheck = async (rule, value, callback) => {
      if (value) {
        let flag = this.schoolInfo.children.some((v) => {
          return (
            v.name === this.classInfo.classname &&
            v.id != this.classInfo.classid
          );
        });
        if (flag) {
          return callback(new Error("班级名称已存在!"));
        } else {
          callback();
        }
      } else {
        return callback(new Error("班级名称不能为空!"));
      }
    };
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      if (!reg.test(value)) {
        return callback(new Error("密码格式不正确!"));
      }
      if (this.addInfo.loginpwd != value) {
        return callback(new Error("两次输入密码不一致！"));
      }
      callback();
    };
    return {
      userInfo: {},
      importInfo: {
        show: false,
        file: null
      },
      exitInfo: {
        show: false,
        studentsExisted: [],
        usersExisted: []
      },
      columns2: [
        {
          title: "姓名",
          key: "username",
          minWidth: 140,
          align: "center"
        },
        {
          title: "登录名",
          key: "loginname",
          minWidth: 140,
          align: "center"
        },
        {
          title: "性别",
          key: "usersex",
          align: "center",
          slot: "usersex"
        }
      ],
      form_data: null,
      wait_flag: false,
      showLoading: false,
      care_list: [
        { id: 0, title: "请选择关注状态" },
        { id: 1, title: "重点关注" },
        { id: 2, title: "不关注" }
      ],
      enabled_list: [
        { id: 0, title: "请选择启动状态" },
        { id: 1, title: "启用" },
        { id: 2, title: "禁用" }
      ],
      control_list: [
        { id: 0, title: "请选择管控状态" },
        { id: 1, title: "管控中" },
        { id: 2, title: "解除管控" }
      ],
      curClass: {
        id: 0,
        type: 1,
        name: ""
      },
      addInfo: {
        show: false,
        userid: null,
        username: "",
        loginname: "",
        loginpwd: "",
        loginpwd1: "",
        classid: "",
        classname: "",
        schoolid: null,
        regionid: null,
        enabled: 1,
        studentno: "",
        userphone: "",
        cardid: ""
      },
      rules: {
        classname: [
          {
            required: true,
            validator: classnameCheck,
            trigger: "blur"
          }
        ],
        username: [
          {
            required: true,
            message: "请输入姓名",
            trigger: "blur"
          }
        ],
        loginname: [
          {
            required: true,
            message: "请输入请输入登录名",
            trigger: "blur"
          }
        ],
        loginpwd: [
          {
            required: true,
            validator: pwdCheck,
            trigger: "blur"
          }
        ],
        loginpwd1: [
          {
            required: true,
            validator: pwdAgainCheck,
            trigger: "blur"
          }
        ]
      },
      searchForm: {
        page: 1,
        size: 10,
        schoolid: 1,
        classid: 0,
        care: 0,
        enabled: 0,
        control: 0,
        username: "",
        list: [],
        tital: 0
      },
      columns: [
        {
          title: "序号",
          align: "center",
          width: 70,
          render: (h, params) => {
            return h(
              "span",
              params.index +
                (this.searchForm.page - 1) * this.searchForm.size +
                1
            );
          }
        },
        {
          title: "登录名",
          slot: "loginname",
          align: "center"
        },
        {
          title: "姓名",
          key: "username",
          align: "center",
          width: 140
        },
        {
          title: "班级",
          key: "classname",
          align: "center",
          width: 140
        },
        {
          title: "状态",
          slot: "enabled",
          width: 100,
          align: "center"
        },
        {
          title: "最后登录时间",
          key: "lasttime",
          align: "center",
          width: 180
        },
        {
          title: "操作",
          slot: "actionSlot",
          width: 240,
          align: "center"
        }
      ],
      classInfo: {},
      selectedModel: {},
      schoolInfo: {
        children: [],
        name: ""
      }
    };
  },
  computed: {
    powerParams() {
      return this.$store.getters.powerParams;
    }
  },
  created() {
    this.userInfo = JSON.parse(
      localStorage.getItem("xh_control_userInfo")
    ).content;
    this.init();
    this.searchList();
  },
  methods: {
    saveclassInfo() {
      this.$refs.classInfo.validate((valid) => {
        if (valid) {
          this.showLoading = true;
          class_edit({
            classid: this.classInfo.classid,
            classname: this.classInfo.classname,
            rversion: this.classInfo.rversion
          }).then((res) => {
            this.showLoading = false;
            if (res.code === 0) {
              if (this.classInfo.classid === this.curClass.id) {
                this.curClass.name = this.classInfo.classname;
              }
              this.classInfo.show = false;
              this.init();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    toSelectMenuItem(type) {
      this.removeMoreMenu();
      //type 1编辑 2删除
      if (type === 1) {
        this.classInfo = {
          show: true,
          classid: this.selectedModel.id,
          rversion: this.selectedModel.rversion,
          classname: this.selectedModel.name
        };
      } else {
        this.$Modal.confirm({
          title: "提示",
          content: "您确定删除【" + this.selectedModel.name + "】吗？",
          onOk: () => {
            class_delete({
              classid: this.selectedModel.id,
              rversion: this.selectedModel.rversion
            }).then((res) => {
              if (res.code === 0) {
                this.init();
                this.$Message.success(res.msg);
              } else {
                this.$Message.error(res.msg);
              }
            });
          },
          onCancel: () => {}
        });
      }
    },
    // 打开弹窗菜单
    toOpenMenu(Item, event) {
      this.selectClass(Item);
      if (!this.$refs.moreMenuRef) {
        return;
      }
      this.selectedModel = Item;
      let _clientX = event.clientX;
      let _clientY = event.clientY;
      this.$refs.moreMenuRef.style.display = `block`;
      this.$nextTick(() => {
        let _bodyHeight = document.body.clientHeight;
        let _domHeight = this.$refs.moreMenuRef.getBoundingClientRect().height;
        this.$refs.moreMenuRef.style.left = `${_clientX - 105}px`;
        if (_clientY + _domHeight > _bodyHeight) {
          this.$refs.moreMenuRef.style.top = `${_bodyHeight - _domHeight}px`;
        } else {
          this.$refs.moreMenuRef.style.top = `${_clientY}px`;
        }
      });
    },
    // 隐藏弹窗菜单
    removeMoreMenu() {
      if (!this.$refs.moreMenuRef) {
        return;
      }
      this.$refs.moreMenuRef.style.display = `none`;
      this.$refs.moreMenuRef.style.left = `-9999px`;
      this.$refs.moreMenuRef.style.top = `-9999px`;
    },
    classChange() {
      if (this.schoolInfo.children.length === 0) {
        return;
      }
      let classInfo = this.schoolInfo.children.filter(
        (v) => v.id === this.addInfo.classid
      )[0];
      this.addInfo.classname = classInfo.name;
    },
    download() {
      //下载模版
      let url = "../../../../doc/student.xls";
      const a = document.createElement("a"); // 创建a标签
      a.setAttribute("download", "学生信息模版"); // download属性
      a.setAttribute("href", url); // href链接
      a.click(); // 自执行点击事件
    },
    //确定导入
    ok_import() {
      if (!this.importInfo.file) {
        this.$Message.error("请选择上传文件");
        return;
      }
      this.wait_flag = true; //showLoading
      let that = this;
      user_import(this.form_data)
        .then((res) => {
          this.wait_flag = false;
          if (res.code == 0) {
            this.importInfo = {
              show: false,
              file: null
            };
            if (res.obj.code == 0) {
              this.$Message.success("导入成功");
              this.init();
              this.searchList();
            } else {
              this.exitInfo = {
                show: true,
                studentsExisted: res.obj.studentsExisted,
                usersExisted: res.obj.usersExisted
              };
            }
          } else {
            this.$Message.error(res.msg);
          }
          this.form_data = null;
        })
        .catch(() => {
          that.wait_flag = false;
        });
    },
    //导入
    userImport() {
      this.importInfo = {
        show: true,
        file: null
      };
    },
    // 上传文件
    handleUpload(file) {
      let str = file.name.split(".");
      let suffix = str[str.length - 1];
      suffix = suffix.toLowerCase();
      if (suffix === "xls" || suffix === "xlsx") {
        this.importInfo.file = file;
        this.import_img = true;
        this.form_data = new FormData();
        this.form_data.append("file", file);
        this.form_data.append("schoolid", this.powerParams.objectid);
        this.form_data.append("regionid", this.powerParams.objectid);
      } else {
        this.importInfo.file = null;
        this.$Message.error("请上传excel文件");
      }
      return false;
    },
    //导出
    userExport() {
      this.showLoading = true;
      user_export({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          exportToExcel(
            [
              {
                list: res.obj.map((item) => {
                  return {
                    登录名: item.loginname,
                    姓名: item.username,
                    班级: item.classname,
                    状态: item.enabled === 1 ? "启用" : "禁用",
                    最后登录时间: item.lasttime || ""
                  };
                }),
                name: this.curClass.name
              }
            ],
            this.curClass.name
          );
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    toAdd() {
      this.addInfo = {
        show: true,
        userid: null,
        usersex: 1,
        username: "",
        loginname: "",
        loginpwd: generateRandomString(),
        loginpwd1: "",
        classid: "",
        classname: "",
        schoolid: null,
        regionid: null,
        enabled: 1,
        studentno: "",
        userphone: "",
        cardid: ""
      };
    },
    saveAddInfo() {
      this.$refs.addForm.validate((valid) => {
        if (valid) {
          if (this.addInfo.userphone) {
            var filter = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
            if (!filter.test(this.addInfo.userphone)) {
              this.$Message.error("手机号码格式不正确!");
              return;
            }
          }
          if (!this.addInfo.classid) {
            this.$Message.error("请选择班级!");
            return;
          }
          let form = {
            username: this.addInfo.username,
            loginname: this.addInfo.loginname,
            usersex: this.addInfo.usersex,
            loginpwd: this.addInfo.loginpwd,
            classid: this.addInfo.classid,
            classname: this.addInfo.classname,
            rtype: this.powerParams.rtype,
            objectid: this.powerParams.objectid,
            regionid: this.powerParams.objectid,
            schoolid: this.addInfo.schoolid || 1,
            enabled: this.addInfo.enabled,
            studentno: this.addInfo.studentno,
            userphone: this.addInfo.userphone,
            cardid: this.addInfo.cardid
          };
          let api = this.addInfo.userid ? user_edit : user_add;
          this.showLoading = true;
          api(form).then((res) => {
            this.showLoading = false;
            if (res.code === 0) {
              this.addInfo.show = false;
              this.$Message.success(res.msg);
              this.searchList();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    toCare(row) {
      let api = row.care === 1 ? user_un_care : user_care;
      api({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        userid: row.userid,
        rversion: row.rversion
      }).then((res) => {
        if (res.code === 0) {
          this.searchList();
          this.$Message.success(res.msg);
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    toDel(row) {
      this.$Modal.confirm({
        title: "提示",
        content: "您确定删除【" + row.username + "】吗？",
        onOk: () => {
          user_delete({
            rtype: this.powerParams.rtype,
            objectid: this.powerParams.objectid,
            userid: row.userid,
            rversion: row.rversion
          }).then((res) => {
            if (res.code === 0) {
              this.searchList();
              this.$Message.success(res.msg);
            } else {
              this.$Message.error(res.msg);
            }
          });
        },
        onCancel: () => {}
      });
    },
    enabledChange(row) {
      let api = row.enabled === 1 ? user_enable : user_disabled;
      api({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        userid: row.userid,
        rversion: row.rversion
      }).then((data) => {
        this.searchList();
        if (data.code === 0) {
          this.$Message.success(data.msg);
        } else {
          this.$Message.error(data.msg);
        }
      });
    },
    selectClass(item) {
      this.curClass = item;
      this.searchList();
    },
    init() {
      this.showLoading = true;
      class_list({
        schoolid: this.powerParams.objectid
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          this.schoolInfo = res.obj;
          if (!this.curClass.id) {
            this.curClass = res.obj;
          }
        } else {
          this.$Message.error(res.msg);
        }
      });
    },
    // 搜索
    searchList() {
      this.searchForm.page = 1;
      this.getList();
    },
    // 页码改变
    pageChange(page) {
      this.searchForm.page = page;
      this.getList();
    },
    // 每页显示数量改变
    pageSizeChange(size) {
      this.searchForm.size = size;
      this.searchForm.page = 1;
      this.getList();
    },
    // 获取列表
    getList() {
      this.showLoading = true;
      user_list({
        rtype: this.powerParams.rtype,
        objectid: this.powerParams.objectid,
        schoolid: this.powerParams.objectid,
        page: this.searchForm.page,
        size: this.searchForm.size,
        classid: this.curClass.type === 2 ? this.curClass.id : null,
        care: this.searchForm.care,
        enabled: this.searchForm.enabled,
        control: this.searchForm.control,
        username: this.searchForm.username
      }).then((res) => {
        this.showLoading = false;
        if (res.code === 0) {
          this.searchForm.list = res.obj.data;
          this.searchForm.total = res.obj.total;
        } else {
          this.$Message.error(res.msg);
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.main_root {
  width: calc(100% - 32px);
  height: calc(100% - 60px);
  background-color: transparent;
  border: none;
  display: flex;
  .schoolInfo {
    width: 200px;
    flex: none;
    border-radius: 15px;
    margin-right: 16px;
    height: 100%;
    overflow-y: auto;
    padding: 10px;
    background-color: white;
    .schoolname {
      font-size: 16px;
      line-height: 40px;
      font-weight: bold;
      text-align: center;
      cursor: pointer;
    }
    .class_list {
      div {
        line-height: 30px;
        height: 30px;
        text-align: center;
        cursor: pointer;
        position: relative;
        .icon-sandian {
          display: none;
        }
        &:hover {
          .icon-sandian {
            display: block;
            position: absolute;
            top: 4px;
            right: 6px;
            font-size: 24px;
          }
        }
      }
    }
    .active {
      border-radius: 6px;
      background: #dbeeff;
    }
  }
  .user_list {
    width: calc(100% - 216px);
    height: 100%;
    overflow-y: auto;
    border-radius: 15px;
    background-color: white;
  }
}
.search_header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 16px 16px;
  .search_left {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .search_drop {
      margin-right: 10px;
      width: 150px;
    }
  }
}
.table_wrap {
  .appName {
    display: flex;
    margin: 16px 0;
    .app_logo {
      flex: none;
      width: 56px;
      height: 56px;
      border-radius: 20px;
      border: 1px solid #e5e5e5;
      background: #ffffff;
      padding: 10px;
      img {
        width: 38px;
        height: 38px;
        object-fit: cover;
      }
    }
    .app_comm {
      flex: none;
      width: 120px;
      margin-left: 10px;
      text-align: left;
      div {
        color: #339dff;
      }
    }
  }
}
.modal_tip {
  .files_list {
    height: 30px;
    line-height: 30px;
  }
  .import_tip {
    height: 30px;
    line-height: 30px;
    text-align: center;
    .theme_color {
      color: #339dff;
      cursor: pointer;
    }
  }
}
// 存在信息
.exit_modal {
  /deep/ .ivu-modal {
    .ivu-modal-content {
      .exit {
        div {
          // margin-bottom: 10px;
          font-size: 18px;
          line-height: 40px;
        }
      }
      .ivu-table {
        -moz-user-select: none;
        -khtml-user-select: none;
        user-select: none;
      }
      div .ivu-table-header thead tr > th {
        height: 40px;
      }
      .ivu-modal-footer {
        display: none;
      }
    }
  }
}
.more_menu {
  width: 100px;
  text-align: center;
  background: #ffffff;
  box-shadow: 0 8px 30px 0 #bcc9e380;
  border-radius: 10px;
  border: none;
  .menu_group {
    height: 35px;
    line-height: 35px;
    cursor: pointer;
    &:hover {
      background-color: #dbeeffcc;
    }
  }
}
</style>