workflow-engine-web/flowable-engine-web/src/components/common/RolePicker.vue

<template>
  <w-dialog :border="false" closeFree width="600px" @ok="selectOk" :title="title" v-model="visible">
    <div class="picker">
      <div class="candidate" v-loading="loading">
        <div class="role-header">
          <div>系统角色</div>
        </div>
        <div class="org-items">
          <el-empty :image-size="100" description="似乎没有数据" v-show="roleList.length === 0"/>
          <!-- 系统角色-->
          <div class="org-role-item" v-for="(roleItem , roleIndex) in roleList" :key="roleIndex"
               @click="selectChange(roleItem)">
            <el-checkbox v-model="roleItem.selected" v-if="multiple" disabled></el-checkbox>
            <i class="el-icon-user-solid" style="margin-left: 5px"></i>
            <span>{{ roleItem.label }}</span>
          </div>
        </div>
      </div>

      <div class="selected">
        <div class="count">
          <span>已选 {{ selectList.length }} 项</span>
          <span @click="clearSelected">清空</span>
        </div>
        <div class="org-items">
          <el-empty :image-size="100" description="请点击左侧列表选择数据" v-show="selectList.length === 0"/>
          <div v-for="(org, index) in selectList" :key="index" class="org-role-item">
            <i class="el-icon-user-solid"></i>
            <span>{{ org.label }}</span>
            <i class="el-icon-close" @click="noSelected(org)"></i>
          </div>
        </div>
      </div>
    </div>
  </w-dialog>
</template>

<script>
import {getRole} from "@/api/org";

export default {
  name: "RolePicker",
  data() {
    return {
      visible: false,
      loading: false,
      title: "请选择",
      multiple: true,//是否多选
      roleList: [],
      selectList: []
    };
  },
  created() {
    this.getRole();
  },
  methods: {
    //获取角色信息
    getRole() {
      getRole().then(res => {
        this.roleList=res.data
      });
    },
    //用于首页选择本次登录者,显示弹窗
    show() {
      this.visible = true;
      this.init();
    },
    init() {
      this.selectList = Object.assign([], this.selected);
    },
    //选中角色
    selectChange(userItem) {
      //多选
      if (this.multiple) {
        for (let i = 0; i < this.selectList.length; i++) {
          if (this.selectList[i].value === userItem.value) {
            this.selectList.splice(i, 1);
            break;
          }
        }
        userItem.selected = true;
        this.selectList.push(userItem);
      } else {//单选
        userItem.selected = true;
        this.selectList = [userItem];
      }
    },
    //右侧的×
    noSelected(org) {
      for (let i = 0; i < this.selectList.length; i++) {
        if (this.selectList[i].value === org.value) {
          this.selectList.splice(i, 1);
          break;
        }
      }
      org.selected = false;
    },
    //确定按钮
    selectOk() {
      // this.$emit("ok", Object.assign([], this.select.map(v => {
      //   v.avatar = undefined;
      //   return v;
      // })));
      // this.visible = false;
      // this.recover();
    },
    //清空
    clearSelected() {
      this.$confirm("您确定要清空已选中的项?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.selectList=[]
      });
    }

  }
};
</script>

<style lang="less" scoped>
@containWidth: 278px;
/deep/ .el-dialog__body {
  padding: 10px 20px;
}


.picker {
  height: 402px;
  position: relative;
  text-align: left;

  .candidate {
    left: 0;
    top: 0;
  }

  .role-header {
    padding: 10px !important;
    margin-bottom: 5px;
    border-bottom: 1px solid #e8e8e8;
  }
}

.candidate, .selected {
  position: absolute;
  display: inline-block;
  width: @containWidth;
  height: 400px;
  border: 1px solid #e8e8e8;
}

.selected {
  border-left: none;
  right: 0;
  top: 0;

  .count {
    width: calc(@containWidth - 20px);
    padding: 10px;
    display: inline-block;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 5px;

    & > span:nth-child(2) {
      float: right;
      color: #c75450;
      cursor: pointer;
    }
  }

}


.org-items {
  overflow-y: auto;
  height: 350px;

  .el-icon-close {
    position: absolute;
    right: 5px;
    cursor: pointer;
    font-size: larger;
  }

  .org-role-item {
    padding: 7px 5px;
    display: flex;
    align-items: center;
    cursor: pointer;
    margin: 0 5px;
    border-radius: 5px;
    position: relative;

    &:hover {
      background: #f1f1f1;
    }

    > span {
      margin-left: 5px;
    }

  }
}


::-webkit-scrollbar {
  float: right;
  width: 4px;
  height: 4px;
  background-color: white;
}

::-webkit-scrollbar-thumb {
  border-radius: 16px;
  background-color: #efefef;
}
</style>