v3-lab-web/src/views/systemManagement/systemUser/index.vue

<!--系统用户管理-->
<template>
  <div class="app-container user">
    <el-row :gutter="20" style="flex:1;display: flex;overflow: hidden">
      <!--部门数据-->
      <el-col :span="4" :xs="24" stlye="width:260px;" class=" scrollbar-box">
        <div class="head-container">
          <el-tree
            highlight-current
            :data="deptOptions"
            :props="defaultProps"
            icon-class=""
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            default-expand-all
            @node-click="handleNodeClick"
          />
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24" style="flex:1;display: flex;flex-direction: column;">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
          <el-form-item label="" prop="searchValue" label-width="68px">
            <el-input
              v-model="queryParams.searchValue"
              placeholder="用户名称/联系方式"
              clearable
              style="width: 240px"
            />
          </el-form-item>
          <el-form-item label="" prop="state">
            <el-select
              v-model="queryParams.state"
              placeholder="请选择状态"
              clearable
              style="width: 240px"
            >
              <el-option
                v-for="dict in stateOptions"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-date-picker
              :clearable="false"
              v-model="dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              start-placeholder="创建时间"
              end-placeholder="创建时间"
            ></el-date-picker>
          </el-form-item>
          <p class="page-inquire-common-style-button" @click="handleQuery">查询</p>
          <p class="page-reset-common-style-button" @click="resetQuery">重置</p>
          <p class="page-submit-common-style-button"
             style="float: right;"
             @click="handleAdd"
             v-hasPermiRouter="['system:user:add']"
          >新增</p>
        </el-form>
        <el-table class="table-box min-list-box" v-loading="loading" border :data="userList">
          <el-table-column label="账号" align="left" key="account" prop="account" show-overflow-tooltip/>
          <el-table-column label="用户昵称" align="left" key="userName" prop="userName" show-overflow-tooltip/>
          <el-table-column label="归属部门" align="left" key="deptName" prop="deptName" show-overflow-tooltip/>
          <el-table-column label="联系方式" align="left" key="mobile" prop="mobile" width="200" show-overflow-tooltip />
          <el-table-column label="状态" align="left" key="state" width="120" show-overflow-tooltip>
            <template slot-scope="scope">
              <el-switch
                @click.native="handleStatusChange(scope.row)"
                class="switch captcha-img"
                :active-value="true"
                :inactive-value="false"
                active-color="#0183FA"
                inactive-color="#999"
                v-model="scope.row.state"
                active-text="启用"
                inactive-text="停用"
                disabled
              ></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="left" prop="createTime" width="160" show-overflow-tooltip>
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime,"{y}-{m}-{d} {h}:{i}") }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="left"
            width="220"
            class-name="small-padding fixed-width"
            v-if="tableButtonType">
            <template slot-scope="scope">
              <div class="table-button-box">
                <p class="table-button-null"></p>
                <p class="table-button-p"
                   @click="handleUpdate(scope.row)"
                   v-hasPermiRouter="['system:user:edit']"
                >修改</p>
                <p class="table-button-p"
                   @click="handleDelete(scope.row)"
                   v-hasPermiRouter="['system:user:del']"
                >删除</p>
                <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)"
                             v-hasPermiRouter="['system:user:reset']">
                  <span class="table-button-p">更多>></span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="handleResetPwd">修改密码</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
                <p class="table-button-null"></p>
              </div>
            </template>
          </el-table-column>
        </el-table>

        <pagination :page-sizes="[20, 30, 40, 50]"
          v-show="total>0"
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 添加或修改参数配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="630px" append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="用户名" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户名" maxlength="30" style="width:200px;" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系方式" prop="mobile">
              <el-input v-model="form.mobile" placeholder="请输入联系方式" maxlength="11" style="width:200px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="类型" prop="userType">
              <!--<el-select v-model="form.roleIds" placeholder="请选择" style="width:200px;">-->
              <el-select v-model="form.userType" collapse-tags
                         @change="positionSelectClick"
                         :disabled="userStanding !== '-1'"
                         placeholder="请选择" style="width:200px;">
                <el-option
                  v-for="item in userTypeList"
                  :key="item.key"
                  :label="item.value"
                  :value="item.key"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="归属部门" prop="deptId">
              <el-cascader
                style="width:200px;"
                v-model="form.deptId"
                :options="deptOptionsList"
                :show-all-levels="false"
                :props="{ checkStrictly: true, children:'child', value: 'deptId', label: 'deptName',emitPath:false  }"></el-cascader>
            </el-form-item>
            <!--<el-form-item label="归属部门" prop="deptId">-->
              <!--<treeselect v-model="form.deptId" :options="deptOptions"-->
                          <!--:normalizer="normalizer" :show-count="true"-->
                          <!--placeholder="请选择上级部门" style="width:200px;"/>-->
            <!--</el-form-item>-->
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item v-if="!form.userId" label="账号" prop="account">
              <el-input v-model="form.account" placeholder="请输入账号" maxlength="30" style="width:200px;"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item v-if="!form.userId" label="密码" prop="password">
              <el-input v-model="form.password" placeholder="请输入密码" type="password" maxlength="20" show-password style="width:200px;"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="角色" prop="roleIds">
              <!--<el-select v-model="form.roleIds" placeholder="请选择" style="width:200px;">-->
              <el-select v-model="form.roleIds" collapse-tags
                         :disabled="userStanding !== '-1'"
                         placeholder="请选择" style="width:200px;">
                <el-option
                  v-for="item in roleOptions"
                  :key="item.roleId"
                  :label="item.roleName"
                  :value="item.roleId"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="form.state" style="width:200px;">
                <el-radio
                  v-for="dict in stateOptions"
                  :key="dict.dictValue"
                  :label="dict.dictValue"
                >{{dict.dictLabel}}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="cancel">取消</p>
        <p class="dialog-footer-button-primary" @click="submitForm">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
    <!--修改密码-->
    <el-dialog title="修改密码" :visible.sync="reviseOpen" v-if="reviseOpen" width="600px" append-to-body class="teacher-revise-dialog-box">
      <el-form :model="passwordForm" ref="passwordForm" :inline="true" :rules="rules" class="addCheckPage-min">
        <el-form-item label="新密码" prop="password" label-width="110px" >
          <el-input type="password" v-model="passwordForm.password" :validate-event="false"
                    clearable maxlength="20" style="width:420px;" placeholder="请输入新密码"/>
        </el-form-item>
        <el-form-item label="确认新密码" prop="newPassword" label-width="110px" style="margin-top: 15px;">
          <el-input type="password" v-model="passwordForm.newPassword" :validate-event="false"
                    clearable maxlength="20" style="width:420px;" placeholder="请确认新密码"/>
        </el-form-item>
      </el-form>
      <!--<p class="teacher-text-p">确定要重置该账号的密码吗？</p>-->
      <!--<p class="teacher-text-p">确定操作后，该账号密码将重置为系统初始密码。</p>-->
      <div slot="footer" class="dialog-footer dialog-footer-box">
        <p class="dialog-footer-button-null"></p>
        <p class="dialog-footer-button-info" @click="reviseOpenOff">取消</p>
        <p class="dialog-footer-button-primary" @click="putUserResetPwd">提交</p>
        <p class="dialog-footer-button-null"></p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus } from "@/apiDemo/system/user";
import { getToken } from "@/utils/auth";
// import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";

//V3新
import { systemUserUserTypeList,systemUserAdd,systemUserDetail,
  systemUserUpdate,systemUserEditState,systemUserDelete,systemUserEditPasswd,systemRoleDropList } from "@/api/commonality/permission";
import { systemDeptOrganizeStructure } from "@/api/commonality/permission";
import md5 from 'js-md5';

export default {
  name: "User",
  components: { Treeselect },
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.passwordForm.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    const equalToPasswordTwo = (rule, value, callback) => {
      if (this.passwordForm.password !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    // 不能连续字符（如123、abc）连续3位或3位以上
    const LxStr = (rule, value, callback) => {
      const regex = /([a-zA-Z])\1{2}/;
      const regex2 = /(\d)\1{2}/;
      const result = value.match(regex);
      const result2 = value.match(regex2);
      let arr = value.split('')
      let flag = true
      for (let i = 1; i < arr.length - 1; i++) {
        let firstIndex = arr[i - 1].charCodeAt()
        let secondIndex = arr[i].charCodeAt()
        let thirdIndex = arr[i + 1].charCodeAt()
        thirdIndex - secondIndex == 1
        secondIndex - firstIndex == 1
        if ((thirdIndex - secondIndex == 1) && (secondIndex - firstIndex == 1)) {
          flag = false
        }
      }
      if (result||result2||!flag) {
        return callback(new Error('不能输入如:123,abc,111,aaa等形式的连续型字符'));
      }else{
        callback()
      }
    }
    return {
      tableButtonType:this.hasPermiDom(['system:user:edit','system:user:detail','system:user:del','system:user:reset']),
      // 身份
      userStanding:localStorage.getItem('userStanding'),
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 用户表格数据
      userList: null,
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: null,
      deptOptionsList: null,
      deptOptionsData:null,
      normalizer(node){
        //去掉children=[]的children属性
        if(node.children && !node.children.length){
          delete node.children;
        }
        return {
          id: node.deptId,
          parentId:node.parentId,
          label:node.deptName,
          deptNum:node.deptNum,
          deptType:node.deptType,
          children:node.child,
        }
      },
      // 是否显示弹出层
      open: false,
      // 部门名称
      deptName: undefined,
      // 默认密码
      initPassword: undefined,
      // 日期范围
      dateRange: [],
      // 状态数据字典
      stateOptions: [{dictValue:true,dictLabel:'启用'},{dictValue:false,dictLabel:'禁用'}],
      // 性别状态字典
      sexOptions: [],
      // 岗位选项
      postOptions: [],
      // 角色选项
      roleOptions: [],
      // 类型选项
      userTypeList:[
        {value:'系统用户',key:0},
        {value:'院级大屏',key:3},
        {value:'校级大屏',key:4},
      ],
      defaultProps: {
        children: "child",
        label: "deptName"
      },
      // 查询参数
      queryParams: {
        page:1,
        pageSize:20,
        userTypes:[0,3,4],
        deptId:null,
        searchValue: null,
        state: null,
      },
      // 表单参数
      form: {
        userName:"",
        mobile:"",
        deptId:null,
        roleIds:[],
        account:"",
        password:"",
        state:true,
        userType:0
      },
      // 表单校验
      rules: {
        account: [
          { required: true, message: "请输入用户昵称", trigger: "blur" },
          { required: true, message: "请输入用户昵称", validator: this.spaceJudgment, trigger: "blur" }
        ],
        deptId: [
          { required: true, message: "请选择归属部门", trigger: "blur" },
        ],
        roleIds: [
          { required: true, message: "请选择角色", trigger: "blur" },
        ],
        userType: [
          { required: true, message: "请选择类型", trigger: "blur" },
        ],
        state: [
          { required: true, message: "请选择状态", trigger: "blur" },
        ],
        userName: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          { required: true, message: "用户名不能为空", validator: this.spaceJudgment, trigger: "blur" }
        ],
        password: [
          { required: true, message: "用户密码不能为空",trigger :"blur"},
          { required: true, message: "用户密码不能为空", validator: this.spaceJudgment,trigger :"blur"},
          // { required: true, validator: equalToPassword,trigger :"blur"},
          { required: true, message: "不能输入如:123,abc,111,aaa等形式的连续型字符", validator: LxStr,trigger :"blur"},
          {
            pattern: /^(?=(?:.*[A-Z]){1})(?=(?:.*[a-z]){1})(?=(?:.*[0-9]){1})(?=(?:.*[!@#*?&]){1})(?!(.)\1)(.{10,16})$/,
            message: '密码长度最少10位 最多16位，必须同时包含一个大写字母、一个小写字母、一个数字和一个特殊字符!@#*?&',trigger :"blur"
          }
        ],
        newPassword: [
          { required: true, message: "确认新密码不能为空",trigger :"blur"},
          { required: true, message: "用户密码不能为空", validator: this.spaceJudgment,trigger :"blur"},
          { required: true, validator: equalToPasswordTwo,trigger :"blur"},
          { required: true, message: "不能输入如:123,abc,111,aaa等形式的连续型字符", validator: LxStr,trigger :"blur"},
          {
            pattern: /^(?=(?:.*[A-Z]){1})(?=(?:.*[a-z]){1})(?=(?:.*[0-9]){1})(?=(?:.*[!@#*?&]){1})(?!(.)\1)(.{10,16})$/,
            message: '密码长度最少10位 最多16位，必须同时包含一个大写字母、一个小写字母、一个数字和一个特殊字符!@#*?&',trigger :"blur"
          }
        ],
        email: [
          {
            type: "email",
            message: "'请输入正确的邮箱地址",
            trigger: ["blur", "change"]
          }
        ],
        mobile: [
          { required: true, message: "请输入正确的联系方式", trigger: "blur" },
          { required: true, message: "请输入正确的联系方式", validator: this.spaceJudgment, trigger: "blur" },
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的联系方式",
            trigger: "blur"
          }
        ]
      },
      // 重置密码弹层开关
      reviseOpen: false,
      passwordForm:{
        password:"",
        newPassword:"",
      },
    };
  },
  watch: {
    // 根据名称筛选部门树
    // deptName(val) {
    //   this.$refs.tree.filter(val);
    // }
  },
  created() {
    this.systemDeptOrganizeStructure();
    this.getList();
    this.systemRoleDropList();
  },
  methods: {
    /*===========V3开始===========*/
    systemDeptOrganizeStructure(){
      systemDeptOrganizeStructure({deptName:this.inputDeptName}).then(response => {
        for(let i=0;i<response.data.length;i++){
          if(response.data[i].child){
            for(let o=0;o<response.data[i].child.length;o++){
              if(response.data[i].child[o].child){
                delete response.data[i].child[o].child
              }
            }
          }
        }
        this.$set(this,'deptOptions',response.data);
        this.$set(this,'deptOptionsData',JSON.parse(JSON.stringify(response.data)));
      });
    },
    /** 查询用户列表 */
    getList() {
      this.loading = true;
      let obj = JSON.parse(JSON.stringify(this.queryParams))
      if(this.dateRange[0]){
        obj.startTime = this.dateRange[0]+'T00:00:00'
        obj.endTime = this.dateRange[1]+'T23:59:59'
      }else{
        obj.startTime = "";
        obj.endTime = "";
      }
      systemUserUserTypeList(obj).then(response => {
          this.userList = response.data.records;
          this.total = response.data.total;
          this.loading = false;
        }
      );
    },
    //角色下拉列表
    systemRoleDropList(){
      systemRoleDropList({roleName :'',pageSize:100}).then(response => {
          this.roleOptions = response.data;
        }
      );
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 节点单击事件
    handleNodeClick(data) {
      this.queryParams.deptId = data.deptId;
      this.getList();
    },
    // 用户状态修改
    handleStatusChange(row) {
      let text = row.state ? "停用" : "启用";
      this.$confirm('确认要' + text + '"' + row.userName + '"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return systemUserEditState({userId:row.userId, state:!row.state});
      }).then(() => {
        this.getList();
        this.msgSuccess("操作成功");
      }).catch(function() {
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.$set(this,'deptOptionsList',JSON.parse(JSON.stringify(this.deptOptionsData)));
      this.title = "添加用户";
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const userIds = row.userId || this.ids;
      this.$confirm('确认删除"'+row.userName+'"?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(function() {
        return systemUserDelete({userId:userIds});
      }).then(() => {
        this.getList();
        this.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      systemUserDetail({userId:row.userId}).then(response => {
        let obj = {
          userId:response.data.userId,
          userName:response.data.userName,
          mobile:response.data.mobile,
          deptId:response.data.deptId,
          state:response.data.state,
          // roleIds:obj.roleIds[0]?response.data.roleIds.split(','):[],
          roleIds:response.data.roleIds[0],
          userType:response.data.userType
        };
        this.positionSelectClick(response.data.userType);
        this.$set(this,'deptOptionsList',JSON.parse(JSON.stringify(this.deptOptionsData)));
        this.$set(this,'form',JSON.parse(JSON.stringify(obj)));
        this.open = true;
        this.title = "修改用户";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.userId) {
            let obj = JSON.parse(JSON.stringify(this.form))
            obj.roleIds = obj.roleIds + '';
            systemUserUpdate(obj).then(response => {
              this.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            let obj = JSON.parse(JSON.stringify(this.form))
            obj.password = md5(obj.password)
            obj.roleIds = obj.roleIds + '';
            systemUserAdd(obj).then(response => {
              this.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    //关闭重置密码页面
    reviseOpenOff(){
      this.reviseOpen = false;
      this.resetPwdId = "";
    },
    //修改密码
    putUserResetPwd(){
      this.$refs["passwordForm"].validate(valid => {
        if (valid) {
          let obj = {
            userId : this.resetPwdId,
            password:md5(this.passwordForm.password)
          };
          systemUserEditPasswd(obj).then(response => {
            this.reviseOpen = false;
            this.msgSuccess("修改成功");
          });
        }
      });
    },
    /*===========V3结束===========*/
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.$set(this,'form',{
        userName:"",
        mobile:"",
        deptId:null,
        roleIds:[],
        account:"",
        password:"",
        state:true,
        userType:0
      });
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.$set(this,'queryParams',{
        page:1,
        pageSize:20,
        userTypes:[0,3,4],
        deptId:this.queryParams.deptId,
        searchValue: null,
        state: null,
      });
      this.handleQuery();
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleResetPwd":
          this.reset();
          this.title = "修改密码";
          this.resetPwdId = row.userId;
          this.$set(this,'passwordForm',{
            password:"",
            newPassword:"",
          });
          this.reviseOpen = true;
          break;
        default:
          break;
      }
    },
    positionSelectClick(data){
      //选中
      let self = this;
      if(data == 0){
        this.$set(this.form,'deptId',null);
        this.$set(this,'deptOptionsList',JSON.parse(JSON.stringify(this.deptOptionsData)));
      }else if(data == 3){
        let list = [];
        for(let i=0;i<self.deptOptionsData.length;i++){
          if(self.deptOptionsData[i].child){
            for(let o=0;o<self.deptOptionsData[i].child.length;o++){
              list.push({
                deptId:self.deptOptionsData[i].child[o].deptId,
                deptName:self.deptOptionsData[i].child[o].deptName
              })
            }
          }
        }
        this.$set(this.form,'deptId',null);
        this.$set(this,'deptOptionsList',JSON.parse(JSON.stringify(list)));
      }else if(data == 4){
        this.$set(this.form,'deptId',null);
        let list = [];
        list.push({
          deptId:this.deptOptionsData[0].deptId,
          deptName:this.deptOptionsData[0].deptName
        })
        this.$set(this,'deptOptionsList',JSON.parse(JSON.stringify(list)));
      }
      this.$forceUpdate();
    },
  }
};
</script>

<style scoped lang="scss">
  .user {
    display: flex!important;
    flex-direction: column;
    box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
    padding:20px;
    overflow: hidden;
  }
  ::v-deep .head-container{
    /*==========树结构开始==========*/
    .el-tree-node__expand-icon.expanded {
      -webkit-transform: rotate(0deg)!important;
      transform: rotate(0deg)!important;
    }
    //未展开
    .el-icon-caret-right:before {
      content:"\e6d9";
      color:#999;
      font-size: 12px;
      border: 1px solid #999;;
      border-radius: 2px;
    }
    //展开
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before{
      content:"\e6d8";
      color:#999;
      font-size: 12px;
      border: 1px solid #999;;
      border-radius: 2px;
    }
    .el-tree-node__expand-icon.is-leaf:before{
      color: transparent!important;
      border: none;
      cursor: default;
    }
    .el-tree .el-tree-node__label{
      font-size:14px;
      color:#333333;
      font-weight:700;
    }
    .el-tree .el-tree-node__children .el-tree-node__label{
      font-size: 14px!important;
    }
    .el-tree .el-tree-node__children .el-tree-node__children .el-tree-node__label{
      color:#333333;
      font-size: 14px!important;
    }
    .el-tree-node__content{
      height:37px;
    }
    /*==========树结构结束==========*/
  }
  ::v-deep .min-list-box{
    .switch .el-switch__label {
      position: absolute;
      display: none;
      color: #fff !important;
    }
    .switch .el-switch__label--right {
      z-index: 1;
    }
    .switch .el-switch__label--right span{
      margin-left: 10px;
    }
    .switch .el-switch__label--left {
      z-index: 1;
    }
    .switch .el-switch__label--left span{
      margin-left: 24px;
    }
    .switch .el-switch__label.is-active {
      display: block;
    }
    .switch.el-switch .el-switch__core,
    .el-switch .el-switch__label {
      width: 64px !important;
      margin: 0;
    }
  }
</style>