jiaoyuju/ruoyi-ui/src/views/system/election/index.vue

<template>
  <div class="iegeu">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="岗位编码" prop="postCode">
        <el-input v-model="queryParams.postCode" placeholder="请输入岗位编码" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="岗位名称" prop="postName">
        <el-input v-model="queryParams.postName" placeholder="请输入岗位名称" clearable size="small" @keyup.enter.native="handleQuery" />
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <!-- <el-select v-model="queryParams.status" placeholder="岗位状态" clearable size="small">
          <el-option
            v-for="dict in statusOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select> -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="tab_bott">
      <div class="tabBot_oje">
        <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
          <!-- :setCheckedKeys='setCheckedKeys' :getCheckedKeys = "getCheckedKeys" -->
          <el-tab-pane label="按部门" name="first">
            <div class="head-container">
              <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search" style="margin-bottom: 20px" />
            </div>
            <div class="head-container">
              <el-tree
                :data="deptOptions"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                ref="tree"
                default-expand-all
                @node-click="handleNodeClick"
              />
            </div>
          </el-tab-pane>
          <el-tab-pane label="按角色" name="second" style="height: 400px;">
            <treeselect v-model="form.parentId" :options="deptOptionstwo" :normalizer="normalizer" :flat="true" :maxHeight="150" @select="djieskle" placeholder="点击选择角色" />
          </el-tab-pane>
          <el-tab-pane label="按组" name="third" style="height: 400px;">
            <treeselect
              v-model="form.parentIdty"
              :options="deptOptionsthre"
              :normalizer="normalizerty"
              :flat="true"
              @select="djieskletwo"
              :maxHeight="350"
              placeholder="点击选择组"
            />
          </el-tab-pane>
        </el-tabs>
      </div>
      <div class="tabBot_two">
        <el-card class="box-card box-cardtt" shadow="always">
          <div slot="header" class="clearfix" >
            <span>人员</span>
            <!-- <div> -->
              <el-button style=" float: right;  padding: 3px 10px;" type="danger" plain @click="eledelte">删除</el-button>
              <el-button style=" float: right; padding: 3px 10px;margin-right: 20px;" type="primary" plain @click="quande">全选</el-button>
            <!-- </div> -->

          </div>
          <ul class="infinite-list infinite-listty" v-infinite-scroll="load" style="overflow:auto">
            <li
              v-for="(item, index) in liseh"
              :class="[ quandet==true? 'infinite-list-itemty infinite-list-itemss' : item.id == idneese.id ? 'infinite-list-itemty infinite-list-itemss' : 'infinite-list-itemty']"
              :key="index"
              @click="reyantt(item)"
            >
              {{ item.userName }}
              <!-- <el-checkbox
          style="margin-right: 30px"
          :indeterminate="item.isIndeterminate"
          v-model="item.isCheck"
          @change="checkTitle(item.isCheck, index)"
          >全选</el-checkbox
        >

        <el-checkbox-group
          v-model="item.checkedData"
          @change="checkItem(item.checkedData, index)"
        >
          <el-checkbox
            v-for="(items, index) in item.children"
            :label="items.id"
            :key="items.id"
            >{{ items.userName }}</el-checkbox
          >
        </el-checkbox-group> -->
            </li>
          </ul>
        </el-card>
        <el-card class="box-card box-cardtt" shadow="always">
          <div slot="header" class="clearfix">
            <span>已选择</span>
            <el-button style="float: right; padding: 3px 0" type="text" @click = 'determine'>确定</el-button>
          </div>
          <ul class="infinite-list infinite-listty" v-infinite-scroll="load" style="overflow:auto">
            <li v-for="item in lisehtwo" @click="lidele(item)" :key="item.id" class="infinite-list-item">
              {{ item.userName }}
              <img src="../../../assets/images/dele.png" alt="" class="index_navTimeimg" />
            </li>
          </ul>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import Flowshoe from '@/components/flowshoe';
import { getTableQuery, getQueryList, tableSubimt, tableSubimtanit, addbjectSave, delMenutab, tabsubm, getUserProfiletab, bohuie } from '@/api/system/table.js';

import { group, getRole, getPersonnel, getMembers,delRoleses } from '@/api/system/election';
import { listDept } from '@/api/system/dept';
import { listRole } from '@/api/system/role';
import { treeselect } from '@/api/system/dept';
import Treeselect from '@riophae/vue-treeselect';
import '@riophae/vue-treeselect/dist/vue-treeselect.css';

export default {
  name: 'table',
  inject: ['reload'],
  components: { Flowshoe, Treeselect },
  data() {
    return {
      instanceId: 0,
      modalShow: false,
      // 部门树选项
      deptOptions: undefined,
      // 角色
      deptOptionstwo: [],
      deptOptionsthre: [],
      // 部门名称
      deptName: undefined,
      // 无限滚动
      count: 0,
      activeName: 'first',
      liseh: [
        // {
        //   isCheck: false,
        //   isIndeterminate: true,
        //   checkedData: [],
        //   children: [
        //   ],
        // }
      ],
      lisehtwo: [],
      queryParams: {},
      showSearch: true,
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      // 表单参数
      form: {},
      deptList: [],
      rtuer: false,
      showtabc: 0,
      showche: false,
      idneese: {},
      quandet:false,
      dhiuw:[],
      // 组id
      elezu:0,
      jeihqdcee:[]
    };
  },
  mounted() {
    this.getTreeselect();
    // this.staff(100)
    // this.getUser();
    // this.tablsie()
  },
  watch: {
    // 根据名称筛选部门树
    deptName(val) {
      this.$refs.tree.filter(val);
    }
  },
  methods: {
    getList() {},
    load() {
      this.count += 2;
    },
    // 树形结构
    // 节点单击事件
    handleNodeClick(data) {
      console.log(data);
      this.queryParams.deptId = data.id;
      this.staff(data.id);
      this.quandet = false
      // this.getList();
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    // 查询角色
    getTreeselectjue() {
      this.loading = true;
      listRole(this.queryParams).then(response => {
        this.deptOptionstwo = this.handleTree(response.rows, 'id');
        this.loading = false;
      });
    },
    // 查询组
    getTreeselecu() {
      this.loading = true;
      group(this.queryParams).then(response => {
        this.deptOptionsthre = this.handleTree(response.data, 'id');
        this.loading = false;
      });
    },
    /** 转换角色数据结构 */
    normalizer(node) {
      // if (node.children && !node.children.length) {
      //   delete node.children;
      // }
      return {
        id: node.id,
        label: node.roleName
      };
    },
    /** 转换组数据结构 */
    normalizerty(node) {
      return {
        id: node.id,
        label: node.groupName
      };
    },

    // getCheckedKeys(leafOnly) {
    //   console.log(leafOnly)
    //   console.log(this.$refs.tree.getCheckedKeys());
    // },
    setCheckedKeys(keys, leafOnly) {
      console.log(keys, leafOnly);
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    },
    handleClick(index) {
      console.log(index.index);
      this.showtabc = index.index;
      this.showche = false;
      if (index.index == 0) {
        this.getTreeselect();
      } else if (index.index == 1) {
        this.getTreeselectjue();
      } else if (index.index == 2) {
        this.getTreeselecu();
      }
    },
    // 搜索
    handleQuery() {},
    // 重置
    resetQuery() {},
    // 点击组/角色
    djieskle(node, instanceId) {
      this.personnel(node.id);
      console.log(node, instanceId);
    },
    djieskletwo(node, instanceId) {
      this.members(node.id);
      this.elezu = node.id
      console.log(node, instanceId);
    },
    check(data, value) {
      console.log(this.$refs.tree.getCheckedKeys());
      // 获取选中的子节点
      // let checkedKeys = this.$refs.tree.getCheckedKeys();
      // 获取选中的父节点
      let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
      console.log(this.$refs.tree.getHalfCheckedKeys());

      console.log(data, value);
    },
    // 点击全选
    quande(){
      var dueg = []
      dueg = (this.dhiuw)
     this.quandet = true
     var that =  this
     // dueg.push(index)
     // this.lisehtwo = dueg
     // this.lisehtwo.push(index);
     // this.lisehtwo = [...new Set(this.lisehtwo)];
     // that.positions.map(train => {
     //   that.new_Positions.push(train.trainId);
     // });
     // that.resultArr = []; //去重后的数组
     var flag;
     for (var i in dueg) {
       flag = true;
       for (var j in that.lisehtwo) {
         if (that.lisehtwo[j].id == dueg[i].id) {
           flag = false;
           break;
         }
       }
       if (flag) {
         that.lisehtwo.push(dueg[i]);
       }
     }
     that.jeihqdcee = that.lisehtwo
    },
    // 点击全部删除
    eledelte(){
     this.lisehtwo = []
     this.jeihqdcee = this.lisehtwo
    },
    // 点击删除
    lidele(index) {
      for (let i = this.lisehtwo.length - 1; i >= 0; i--) {
        if (this.lisehtwo[i].id == index.id) {
          this.lisehtwo.splice(i, 1)
        }
      }
      this.jeihqdcee = this.lisehtwo
    },
    // 点击添加
    reyantt(index) {
      var dueg = [];
      this.idneese = index;
      var that =  this
      dueg.push(index)
      // this.lisehtwo = dueg
      // this.lisehtwo.push(index);
      // this.lisehtwo = [...new Set(this.lisehtwo)];
      // that.positions.map(train => {
      //   that.new_Positions.push(train.trainId);
      // });
      // that.resultArr = []; //去重后的数组
      var flag;
      for (var i in dueg) {
        flag = true;
        for (var j in that.lisehtwo) {
          if (that.lisehtwo[j].id == dueg[i].id) {
            flag = false;
            break;
          }
        }
        if (flag) {
          that.lisehtwo.push(dueg[i]);
        }
      }
      this.jeihqdcee = this.lisehtwo

      // for(var i = 0 ; i <this.lisehtwo.length; i++ ){
      //   if(this.lisehtwo[i].id == index.id){
      //     this.lisehtwo.splice(i,1)
      //   }
      // }
      // })
    },
    // 点击确定
    determine(){
      var eledete = []
     this.lisehtwo.filter(route=>{
       eledete.push(route.id)
     })
     eledete  = eledete.join(',')
     console.log(eledete)
     // this.elezu
     this.loading = true;
     delRoleses(this.elezu,eledete).then(response => {
       // this.lisehtwo = response.data;
       // this.dhiuw = response.data
       if(response.code == 200){
         this.msgSuccess('操作成功');
         this.$router.go(-1)

       }
       this.loading = false;
     });
    },
    checkItem(val, index) {
      console.log(val);
      this.showche = !this.showche;
      console.log(this.showche);
      var that = this;
      let jueg = [];
      let checkedCount = val.length;
      this.liseh[index].isCheck = checkedCount === this.liseh[index].children.length;

      this.liseh[index].isIndeterminate = checkedCount > 0 && checkedCount < this.liseh[index].children.length;
      this.liseh[index].children.filter(router => {
        // console.log(123)
        for (var i = 0; i < val.length; i++) {
          if (this.showche == true) {
            //选中
            console.log('选中');
            if (router.id == val[i]) {
              jueg.push(router);
              this.lisehtwo.push(router);
              // console.log(router)
              console.log(this.lisehtwo);
              for (var j = 0; j < that.lisehtwo.length; j++) {
                if (that.lisehtwo[i].id !== val[i]) {
                  this.lisehtwo.push(router);
                }
              }
              // that.lisehtwo.filter(routers=>{
              //   console.log(this.lisehtwo)
              //   console.log(routers,val[i])
              //   if(routers.id !== val[i]){
              //      this.lisehtwo.push(router)
              //   }
              // })
            }
          } else {
            // 取消选中
          }
        }
      });
      // this.lisehtwo.push(jueg)
      console.log(this.lisehtwo);
      // console.log(this.liseh[index].isIndeterminate)
    },
    checkTitle(val, index) {
      console.log(val, index);
      let arr = [];
      let jueg = [];
      const re = this.liseh[index].children;
      //全选
      if (val) {
        for (let i = 0; i < re.length; i++) {
          arr[i] = re[i]['id'];
          jueg[i] = re[i];
          this.lisehtwo.push(re[i]);
        }
        // this.lisehtwo.push(jueg)
      } else {
        this.lisehtwo = [];
      }
      console.log(this.lisehtwo);
      this.liseh[index].checkedData = arr;
      this.liseh[index].isIndeterminate = false;
    },
    // 筛选节点
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 按照部门查询人员
    staff(index) {
      this.loading = true;
      var that = this;
      getRole(index).then(response => {
        // this.deptOptionsthre = this.handleTree(response.data, "id");
        // this.rtuer = true
        this.liseh = response.data;
        this.dhiuw = response.data
        this.loading = false;
      });
    },
    // 按照角色查询人员
    personnel(index) {
      this.loading = true;
      getPersonnel(index).then(response => {
        // this.deptOptionsthre = this.handleTree(response.data, "id");        this.liseh = response.data;
        this.liseh = response.data;
        this.dhiuw = response.data
        this.loading = false;
      });
    },
    // 按照组查询人员
    members(index) {
      let hueg = []
      let jheugq = []
      hueg = this.lisehtwo
      this.loading = true;
      console.log(this.lisehtwo)
      this.lisehtwo.splice(0,this.dhiuw.length-2)
      console.log(this.lisehtwo)
      console.log(this.dhiuw.length-2)
      this.liseh = []
      // for (let i = this.dhiuw.length - 1; i >= 0; i--) {
      //   if (this.dhiuw[i].id == urls) {
      //     this.config.splice(i, 1);
      //   }
      // }
      // this.jeihqdcee = this.lisehtwo
      getMembers(index).then(response => {
        // this.deptOptionsthre = this.handleTree(response.data, "id");       this.liseh = response.data;
        // response.data
        // this.lisehtwo.push(response.data)
        // this.lisehtwo = []
        this.dhiuw = []
        this.dhiuw = response.data
        console.log(this.dhiuw,87)
        if(this.dhiuw.length == 0){
          console.log(34,this.dhiuw)
           this.lisehtwo = this.jeihqdcee
        }else{
          // this.dhiuw.filter(route=>{
            // this.lisehtwo.push(route)
            this.lisehtwo = this.lisehtwo.concat(this.dhiuw)
          // })
        }

        this.loading = false;
      });
    }
  }
};
</script>

<style scoped lang="scss">
.iegeu {
  padding: 30px;
}
.infinite-list {
  height: 150px;
  margin-bottom: 20px;
  .infinite-list-item {
    width: 20% !important;
    display: flex;
    // justify-content: space-between;
    align-items: center;
    text-align: center;
    list-style: none;
    height: 30px;
    // line-height: 30px;
  }
  .infinite-list-itemss {
    color: #1890ff;
  }
}
.infinite-listty {
  display: flex;
  flex-wrap: wrap;
  .infinite-list-itemty {
    width: 20%;
    display: flex;
    // justify-content: space-between;
    height: 40px;
    line-height: 40px;
    // text-align: center;
    list-style: none;
    // border-radius: 40px;
    // border: 1px solid #eee;
    // border-bottom: 1px solid #eee;
  }
}

.tab_bott {
  display: flex;
}
.tabBot_oje {
  width: 40%;
}
.tabBot_two {
  width: 50%;
  margin-left: 30px;
}
.box-cardtt {
  margin-top: 30px;
}
.index_navTimeimg {
  width: 10px;
  height: 10px;
  margin-left: 5px;
}
</style>