zhanghua
2025-07-16 7c20fd15b7fbc2bd5756b39d5ab655cc849ffcc3
src/views/systemSetting/baseSetting/department/createUser/index.vue
@@ -19,14 +19,14 @@
          </el-form-item>
          <!-- 上级部门 -->
          <el-form-item class="optionItems" label="上级部门:" prop="parentId">
            <el-select v-model="depart.parentId" placeholder="请输入上级部门">
              <el-option :value="mylabel">
            <el-select ref="projectApplicant" v-model="depart.parentId" placeholder="请输入上级部门">
              <el-option  :value="mylabel">
                <el-tree
                  ref="tree"
                  :check-strictly="true"
                  :data="departList"
                  :props="defaultProps"
                  show-checkbox
                  @node-click="handleCheck"
                  @check-change="handleCheck"
                  default-expand-all
                  node-key="id"
@@ -51,7 +51,7 @@
          <el-form-item class="optionItem add" label="添加人员:">
            <ul class="addPerson">
              <li
                v-for="(item, index) in cehckedList"
                v-for="(item, index) in checkedList"
                :key="index"
                @click="setLeader(index)"
              >
@@ -60,13 +60,13 @@
                    <i
                      :class="[
                        'el-icon-user-solid',
                        item.checked ? 'leader' : '',
                        item.leader ? 'leader' : '',
                      ]"
                    ></i>
                  </div>
                  <label
                    style="font-size: 12px"
                    :class="[item.checked ? 'leader' : '']"
                    :class="[item.leader ? 'leader' : '']"
                    >{{ item.username }}</label
                  >
                </div>
@@ -74,12 +74,18 @@
              <li class="li-btn">
                <i class="el-icon-plus" @click="openUser = true"></i>
              </li>
              <li class="li-btn">
                <el-tooltip class="item" effect="light" content="清除选中人员" placement="top" :enterable="false">
                  <i class="el-icon-minus" @click="clrarUser"></i>
                </el-tooltip>
              </li>
            </ul>
            <div class="card" v-if="openUser">
              <el-card class="box-card">
                <div slot="header" class="myclear">
                  <span>工作人员</span>
                  <div @click="addUser">确认</div>
                  <div class="box-card-sub" @click="addUser">确认</div>
                </div>
                <div class="scrollWrap">
                  <el-checkbox-group v-model="checkedUser">
@@ -96,8 +102,10 @@
              </el-card>
            </div>
          </el-form-item>
          <el-form-item>
              <label style="color:#ff0000ab">红色代表部门领导,点击头像可设置部门领导</label>
          <el-form-item style="margin-top: -40px">
            <label style="color: #ff0000ab"
              >红色代表部门领导,点击头像可设置部门领导</label
            >
          </el-form-item>
          <!-- 部门描述 -->
          <el-form-item class="optionItem" label="部门描述:" prop="departDes">
@@ -168,7 +176,7 @@
      userList: [],
      departList: [],
      checkedUser: [],
      cehckedList: [],
      checkedList: [],
      openUser: false,
      departTypeList: [],
      selectOrg: {
@@ -194,10 +202,10 @@
    handleUser() {
      this.$refs.user.validate((valid) => {
        if (valid) {
          const { depart, cehckedList, selectOrg } = this;
          const { depart, checkedList, selectOrg } = this;
          const arr = [];
          cehckedList.forEach((item) => {
            arr.push({ isLeader: item.isLeader, userId: item.id });
          checkedList.forEach((item) => {
            arr.push({ leader: item.leader, userId: item.id });
          });
          console.log(arr);
          this.$axios({
@@ -236,39 +244,41 @@
        method: "get",
        url: "sccg/depart/tree",
      }).then((res) => {
        console.log(res);
        res.data.unshift({ id: 0, departName: "顶级菜单" });
        // console.log(res);
        // res.data.unshift({ id: 0, departName: "顶级菜单" });
        this.departList = res.data;
      });
    },
    // 获取所有用户信息
    getUserList() {
      // 获取所有用户信息、用户查询(暂时支持电话号码)
      this.$axios.get(`sccg/admin/list`).then((res) => {
      this.$axios.get(`/sccg/depart/query_surplus_user`).then((res) => {
        if (res.code === 200) {
          this.userList = res.data.records;
          this.userList = res.data;
        }
      });
    },
    addUser() {
      console.log(this.checkedUser);
      console.log(this.userList);
      this.cehckedList = [];
      this.checkedList = [];
      this.userList.forEach((item) => {
        this.checkedUser.forEach((child) => {
          if (item.id == child) {
            this.cehckedList.push({
            this.checkedList.push({
              id: item.id,
              username: item.username,
              isLeader: 0,
              checked: false,
              leader: false,
            });
          }
        });
      });
      this.cehckedList[0].isLeader = 1;
      this.cehckedList[0].checked = true;
      if (this.checkedList.length > 0) this.checkedList[0].leader = true;
      this.openUser = false;
    },
    // 清除选中用户
    clrarUser(){
      this.checkedUser=[]
    },
    handleClose() {
      this.$emit("changMyDialog", { flag: false });
@@ -278,43 +288,47 @@
      this.departTypeList = await getTypeList(1, "08");
    },
    handleCheck(data, checked) {
      this.depart.parentId = data.departName;
      // 获取当前选择的id在数组中的索引
      const indexs = this.selectOrg.orgsid.indexOf(data.id);
      // 如果不存在数组中,并且数组中已经有一个id并且checked为true的时候,代表不能再次选择。
      if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
        this.$message({
          message: "只能选择一个部门!",
          type: "warning",
          showClose: true,
        });
        // 设置已选择的节点为false 很重要
        this.$refs.tree.setChecked(data, false);
      } else if (this.selectOrg.orgsid.length === 0 && checked) {
        // 发现数组为空 并且是已选择
        // 防止数组有值,首先清空,再push
        this.selectOrg.orgsid = [];
        this.selectOrg.orgsid.push(data.id);
      } else if (
        indexs >= 0 &&
        this.selectOrg.orgsid.length === 1 &&
        !checked
      ) {
        // 再次直接进行赋值为空操作
        this.selectOrg.orgsid = [];
        this.depart.parentId = "";
      if(checked.childNodes.length == 0){
        this.depart.parentId = data.departName;
        let _this = this;
        _this.$refs.projectApplicant.blur();
        this.selectOrg.orgsid = []
        this.selectOrg.orgsid.push(data.id)
      }else {
        return
      }
      // this.depart.parentId = data.departName;
      // // 获取当前选择的id在数组中的索引
      // const indexs = this.selectOrg.orgsid.indexOf(data.id);
      // // 如果不存在数组中,并且数组中已经有一个id并且checked为true的时候,代表不能再次选择。
      // if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
      //   this.$message({
      //     message: "只能选择一个部门!",
      //     type: "warning",
      //     showClose: true,
      //   });
      //   // 设置已选择的节点为false 很重要
      //   this.$refs.tree.setChecked(data, false);
      // } else if (this.selectOrg.orgsid.length === 0 && checked) {
      //   // 发现数组为空 并且是已选择
      //   // 防止数组有值,首先清空,再push
      //   this.selectOrg.orgsid = [];
      //   this.selectOrg.orgsid.push(data.id);
      // } else if (
      //   indexs >= 0 &&
      //   this.selectOrg.orgsid.length === 1 &&
      //   !checked
      // ) {
      //   // 再次直接进行赋值为空操作
      //   this.selectOrg.orgsid = [];
      //   this.depart.parentId = "";
      // }
    },
    // 设置领导
    setLeader(idx) {
      this.cehckedList.forEach((item, index) => {
        if (index === idx) {
          item.checked = true;
          item.isLeader = 1;
        } else {
          item.checked = false;
          item.isLeader = 0;
        }
      this.checkedList.forEach((item, index) => {
        item.leader = index === idx;
      });
    },
  },
@@ -324,12 +338,12 @@
<style lang="scss" scoped>
.createUser {
  border-radius: 1px;
  background-color: #09152f;
  // background-color: #09152f;
  main {
    text-align: left;
    padding: 0 55px;
    background-color: #09152f;
    // background-color: #09152f;
    padding-bottom: 50px;
    .mainContent {
@@ -337,19 +351,19 @@
      justify-content: center;
      padding-top: 50px;
      &::v-deep .el-form-item__label {
        color: #4b9bb7;
      }
      // &::v-deep .el-form-item__label {
      //   color: #4b9bb7;
      // }
      &::v-deep .el-input__inner {
        background-color: #09152f;
        border: 1px solid #17324c;
      }
      // &::v-deep .el-input__inner {
      //   background-color: #09152f;
      //   border: 1px solid #17324c;
      // }
      &::v-deep .el-textarea__inner {
        background-color: #09152f;
        border: 1px solid #17324c;
      }
      // &::v-deep .el-textarea__inner {
      //   background-color: #09152f;
      //   border: 1px solid #17324c;
      // }
      .addPerson {
        display: flex;
@@ -376,6 +390,12 @@
        width: 36px;
        height: 36px;
        border-radius: 50%;
       .el-icon-plus{
         cursor: pointer;
       }
        .el-icon-minus{
          cursor: pointer;
        }
      }
      .el-form-item__content {
        width: 400px;
@@ -408,17 +428,18 @@
        right: 0;
        .box-card {
          max-height: 200px;
          min-height: 240px;
          max-height: 260px;
          overflow: hidden;
          background-color: #09152f;
          // background-color: #09152f;
          position: relative;
          max-width: 220px;
          .scrollWrap {
            overflow: scroll;
            height: 160px;
            height: 180px;
            position: relative;
            color: #4b9bb7;
            // color: #4b9bb7;
            .el-checkbox-group {
              display: flex;
@@ -433,9 +454,14 @@
          .myclear {
            width: 100%;
            line-height: 20px;
            color: #4b9bb7;
            // color: #4b9bb7;
            display: flex;
            justify-content: space-between;
            .box-card-sub{
              color: #2f54eb;
              margin-left: 5px;
              cursor: pointer;
            }
          }
          .hidebar {
@@ -443,8 +469,8 @@
            top: 77px;
            right: 20px;
            width: 20px;
            height: 160px;
            background-color: #09152f;
            height: 180px;
            // background-color: #09152f;
          }
          .item {
@@ -475,4 +501,4 @@
    padding-right: 20px;
  }
}
</style>
</style>