management_UI/src/components/getDepart/index.vue

<!--  -->
<template>
    <div>
        <el-dialog
          :title="title"
          :visible.sync="show"
          @close='close'
          width="800px"
          center>
          <div class="popup">
              <div class="popup-item boderAndRadius">
                <div class="popup-item-title">
                  <span
                    v-for="(i,index) in titleList"
                    style="cursor: pointer;"
                    :key="i.departmentId"
                    :class="{isActiveTitle:index+1<titleList.length}"
                    @click="handleChangeTtitle(i)"
                    >
                      {{i.departmentName}}
                      <span v-if="index+1<titleList.length">></span>
                    </span>
                </div>
                <div class="popup-item-content">
                  <div class="popup-item-content-item">
                    <div class="content">
                      <el-checkbox :value ='isAll' @change="handleChangChoose($event)">全选</el-checkbox>
                    </div>
                  </div>
                  <div v-for="(i) in showData" :key="i.departmentId" class="popup-item-content-item borderItem">
                     <div class="content"><el-checkbox :value ='handleCheck(i)' @change='handleChangChoose($event,i)' >{{i.departmentName}}</el-checkbox></div>
                     <div class="popup-item-content-item-next" :class="{isHasActive:handleCheck(i)|| !i.list}" @click='handleNext(i)'>下级</div>
                  </div>
                </div>
              </div>
              <div class="popup-item  boderAndRadius">
                <div class="popup-item-right">
                  <el-tag
                    v-for="tag in tags"
                    :key="tag.departmentName"
                    @close="handleClose(tag)"
                    closable>
                    {{tag.departmentName}}
                  </el-tag>

                  <div class="commonFont noChoose" v-if="tags.length===0">
                    暂无选择
                  </div>
                </div>
              </div>
          </div>
          <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleCancel">取 消</el-button>
            <el-button size="mini" @click="tags=[]">清空全部</el-button>
            <el-button size="mini" type="primary" @click="centerDialogVisible">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
import bbb from './a'
console.log('bbb: ', bbb)
export default {
  props: {
    showDataList: {
      type: Object,
      default: () => {
        return {
          list: [],
          title: {}
        }
      }
    },
    title: {
      type: String,
      default: '选择参与部门'
    }
  },
  data () {
    return {
      show: true,
      checked: false,
      data: bbb,
      showData: [],
      checkList: [],
      titleList: [{
        departmentId: 0,
        departmentName: '全部'
      }],
      tags: []
    }
  },
  computed: {
    isAll () {
      return this.showData.every(i => this.tags.some(j => i.departmentId === j.departmentId))
    }
  },
  beforeMount () {},
  mounted () {
    this.tags = this.showDataList.list || []
    this.showData = this.data.length > -1 ? this.data : []
  },
  methods: {
    // 点击title切换层级
    handleChangeTtitle (item) {
      if (item.departmentId === 0) {
        this.showData = this.data.length > -1 ? this.data : []
        this.titleList = [{
          departmentId: 0,
          departmentName: '全部'
        }]
        return
      }
      let arr = []
      for (let i in this.titleList) {
        arr.push(this.titleList[i])
        if (item.departmentId === this.titleList[i].departmentId) break
      }
      this.titleList = arr
      this.showData = item.list
    },
    // 是否勾选
    handleCheck (item) {
      return this.tags.some(i => i.departmentId === item.departmentId)
    },
    handleChangChoose (event, item) {
      if (!item) {
        if (event) {
          this.showData.map(i => {
            if (!this.tags.some(j => i.departmentId === j.departmentId)) this.tags.push(i)
          })
        } else {
          this.tags = this.tags.filter(i => !this.showData.some(j => j.departmentId === i.departmentId))
        }
        return
      }
      const isHas = this.tags.some(i => i.departmentId === item.departmentId)
      if (isHas && !event) {
        this.tags = this.tags.filter(i => i.departmentId !== item.departmentId)
      }
      if (!isHas && event) {
        this.tags.push(item)
      }
    },
    handleClick (data) {
    },
    // 点击下级
    handleNext (item) {
      if (this.handleCheck(item) || !item.list) return
      this.showData = item.list
      this.titleList.push(item)
      this.handleGetNextChildren()
    },
    // 删除右侧标签
    handleClose (item) {
      this.tags = this.tags.filter(i => i.departmentId !== item.departmentId)
      // this.$forceUpdate()
    },
    // 关闭弹窗
    close () {
      this.show = true
      this.$emit('update:isShow', false)
    },
    // 关闭弹窗
    centerDialogVisible () {
      const params = this.$departGetForm(this.tags)
      this.$emit('update:value', params.value)
      this.$emit('update:showDataList', params)
      this.$emit('update:isShow', false)
    },
    handleGetNextChildren (list = this.data) {
      console.log('list: ', list)
    },
    handleCancel () {
      this.$emit('update:isShow', false)
    },
    xcq1 () {
      console.log(this.a)
      // this.$refs.tree.setChecked(100)
    }
  },
  watch: {}

}

</script>
<style lang="less" scoped>
.noChoose{
  width: 100%;
  height: 200px;
  .center();
}
.popup{
  min-height: 100px;
  display: flex;
  justify-content: space-between;
  &-item{
    width: 48%;
    box-sizing: border-box;
    overflow: auto;
    padding: 10px 0;
    &-right{
          padding: 10px !important;
          .el-tag{
            margin: 5px 6px;
          }
    }
    .isActiveTitle{
      color: @fontBlue;
    }
    &-title{
      color:#9b9b9b;
      padding-bottom: 4px;
      border-bottom: 1px solid @borderColor;
      padding: 10px;
    }
    &-content{
      height: 400px;
      overflow: auto;
      .borderItem{
        border-top: 1px solid @borderColor;
      }
      &-item:nth-last-child(1){
        border-bottom: 1px solid @borderColor;
      }
      &-item{
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        .isHasActive{
          color: rgba(196, 196, 196, 0.933) !important;
          border-left: 1px solid  rgba(196, 196, 196, 0.933) !important;
        }
        .content{
          flex: 1;
          padding:0 10px;
          height: 100%;
        }
        .content:hover{
           background: rgb(238, 238, 238);
        }
        &-next{
          padding:0 10px;
          border-left: 1px solid @fontBlue;
          color: @fontBlue;
          height: 20px;
          cursor: pointer;
        }
        .el-checkbox{
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          }

      }
    }
  }
}
</style>
<style lang='less'>
.el-dialog{
  border-radius: 6px;
}
.el-dialog__header{
  border-bottom: 1px solid @borderColor;
}
.el-dialog__footer{
  border-top: 1px solid @borderColor;
}
.el-dialog__title{
  font-size: 16px;
}
.dialog-footer{
  display: flex;
  justify-content: flex-end;
}
</style>