dvcp_v2_webapp/ui/packages/common/AiParty/partyTrans.vue

<template>
  <section class="partyTrans">
    <el-row class="search-panel" type="flex" justify="space-between">
      <div class="add-item" style="padding-bottom:3px;overflow-x: hidden">
        <p class="add_top">
          <span>党组织</span>
          <el-input placeholder="党组织名称" size="small" style="width:166px;" clearable suffix-icon="el-icon-search"
                    v-model="filterText" @change="$refs.partyOrgTree.filter(filterText)"
                    @keyup.native="$refs.partyOrgTree.filter(filterText)"/>
        </p>
        <el-tree ref="partyOrgTree" :data="treeData" :show-checkbox="multipleSelection" node-key="id"
                 :filter-node-method="filterNode" @node-click="nodeClick"
                 @check-change="multipleSelection&&(selectParty=$refs.partyOrgTree.getCheckedNodes())"
                 :highlight-current="true" :props="defaultProps"/>
      </div>
    </el-row>
    <div class="selected-people add-item">
      <p class="add_top">
        <span>已选择</span>
        <el-button icon="iconfont iconDelete" size="mini" @click="clearSelect()">清空</el-button>
      </p>
      <div class="add_tag" v-if="selectParty.length" style="width:100%;">
        <el-tag v-for="(item,i) in selectParty" :key="i" closable type="info" @close="cancelSelect(i)"
                :disable-transitions="true">{{item.name}}
        </el-tag>
      </div>
      <div class="select-no-data" v-else>
        <span>暂无数据</span>
      </div>
    </div>
  </section>
</template>

<script>
  export default {
    name: "partyTrans",
    props: {
      multipleSelection: {type: Boolean, default: false},
      orgs: Array,
    },
    computed: {
      treeData() {
        return this.orgs || []
      }
    },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        filterText: "",//tree模糊搜索
        selectParty: [],//选中的党组织
      }
    },
    methods: {
      //节点过滤/搜索
      filterNode(value, data) {
        if (!value) return true;
        return data.name.indexOf(value) !== -1;
      },
      //取消选择
      cancelSelect(index) {
        this.selectParty.splice(index, 1)
        this.$refs.partyOrgTree.setCheckedNodes(this.selectParty);
      },
      clearSelect() {
        this.$refs.partyOrgTree.setCheckedKeys([]);
        this.selectParty = [];
      },
      nodeClick(data) {
        if (!this.multipleSelection) {
          let {id, name, orgType, partyType} = data
          this.selectParty = [{id, name, orgType, partyType}]
        }
      }
    },
    watch: {
      selectParty: {
        handler(v) {
          this.$emit('change', v)
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  .partyTrans {
    display: flex;
    justify-content: center;
    align-items: center;

    .select-no-data {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: calc(100% - 40px);
    }

    .search-panel {
      width: auto;
      flex: 1;
      padding-right: 10px;

      & > div {
        width: 100%;
      }
    }

    .add-item {
      width: 280px;
      height: 400px;
      background: rgba(252, 252, 252, 1);
      border-radius: 2px;
      border: 1px solid rgba(208, 212, 220, 1);
      position: relative;
      overflow: auto;
      box-sizing: border-box;

      .add_top {
        width: 100%;
        height: 40px;
        background: rgba(245, 245, 245, 1);
        border-bottom: 1px solid rgba(208, 212, 220, 1);
        padding: 0 8px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .tree_list {
        width: 100%;
        overflow: auto;
        height: calc(100% - 40px);

        .el-tree {
          height: 100%;
        }
      }

      .add_buttom {
        position: absolute;
        left: 0;
        bottom: 0;
        font-size: 12px;
        width: 310px;
        height: 32px;
        line-height: 32px;
        z-index: 10000;
        background: rgba(245, 246, 247, 1);
        color: rgba(51, 51, 51, 1);
        box-shadow: 0 1px 0 0 rgba(216, 220, 227, 1);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
      }

      .add_tag {
        width: 310px;
        height: calc(100% - 40px);
        overflow-y: auto;

        .el-tag {
          margin: 8px;
        }
      }
    }
  }
</style>