ui库和web端产品库合并版本(还需修复细节)

ui/packages/common/AiParty/partyTrans.vue

@@ -0,0 +1,174 @@
+<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>