配置

配置 类型 默认值 备注
ent-id String '' 企业id
show-staff Boolean false 是否显示员工
leaf-only Boolean false 是否仅叶节点有效，仅multiple="false"有效
use-popover Boolean false 使用浮窗方式
popover-width number 500 浮窗宽度
on-load (tree:组件, data:数据)=>{} 数据加载完成事件

插槽

slot 备注
tree-node 自定义节点内容
reference 触发浮窗显示的元素

single

<p-organization :ent-id="entId"></p-organization>

updating

<p-organization :ent-id="entId" :updating="true" v-model="valueUpdating" :show-filter="true" :expand-all="true"></p-organization>

leafOnly

<p-organization :ent-id="entId" :updating="true" v-model="valueUpdating" :show-filter="true" :expand-all="true" :leaf-only="true"></p-organization>

show-staff

<p-organization :ent-id="entId" :updating="true" v-model="valueUpdating" :show-filter="true" :expand-all="true" :show-staff="true" :leaf-only="true" style="max-height:500px;"></p-organization>

multiple

<p-organization :ent-id="entId" :updating="true" v-model="valueMultiple" :multiple="true" :show-filter="true" :expand-all="true" :show-staff="true" style="max-height:500px;"></p-organization>

场景一: 增加节点中的交互

<p-organization
  :updating="true"
  v-model="valueModel"
  model-mode="leaf"
  model-type="id"
  :show-filter="true"
  :expand-level="1"
  :ent-id="entId">
  <div slot="tree-node" slot-scope="{ node, data, filterText }" class="p-organization__node">
    <label v-if="node.label" v-html="node.label.replace(filterText, `<b>${filterText}</b>`)"> </label>
    <div>
      <el-popover trigger="hover" placement="left" popper-class="p-organization__node__popper" class="p-organization__node__menu">
        <ul>
          <li v-on:click.stop="onEditNode(node, data)">编辑</li>
          <li v-on:click.stop="onAddNode(node, data)">添加子节点</li>
          <li v-on:click.stop="onDeleteNode(node, data)">删除</li>
        </ul>
        <i slot="reference" style="cursor: pointer;" class="el-icon-more" />
      </el-popover>
    </div>
  </div>
</p-organization>
data() {
  return {
    valueModel: [],
  }
},
methods: {
  onEditNode(node, data) {
    Notification.info({
      message: '请自行实现',
    })
  },
  onAddNode(node, data) {
    Notification.info({
      message: '请自行实现',
    })
  },
  onDeleteNode(node, data) {
    Notification.info({
      message: '请自行实现',
    })
  },
},
.p-organization__node {
  font-size: 14px;
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  & > label {
    flex-grow: 1;
    width: 0;
  }
  & > div {
    flex-shrink: 0;
  }
  .p-organization__node__menu {
    .el-icon-more {
      transform: rotate(90deg);
    }
  }
}
.p-organization__node__popper {
  ul {
    li {
      text-align: left;
      cursor: pointer;
      width: 100%;
      line-height: 32px;
      padding: 0 16px;
      &:hover {
        color: #38acfc;
      }
    }
  }
}

场景二: 自定义显示、选择员工

<p-organization
  :updating="true"
  v-model="valueModelSingle"
  model-mode="leaf"
  :show-filter="true"
  :use-popover="true"
  :leaf-only="true"
  :expand-level="1"
  v-on:on-change="onChange"
  :ent-id="entId"
  :show-staff="true">
  <div slot="tree-node" slot-scope="{ node, data, filterText }" class="p-organization__node-avatar">
    <tpl v-if="data.children && data.children.length > 0">
      <label v-if="node.label" v-html="node.label.replace(filterText, `<b>${filterText}</b>`)"></label>
    </tpl>
    <tpl v-else>
      <el-image :src="'https://placeimg.com/100/100/any'" fit="cover"> </el-image>
      <div class="p-organization__node-avatar__info">
        <label> <span v-if="node.label" v-html="node.label.replace(filterText, `<b>${filterText}</b>`)"></span> <span>（1xxxxxxxxxx）</span></label>
        <div> {{node.labels.join('/')}} </div>
      </div>
    </tpl>
  </div>
  <el-input slot="reference" :value="valueModelSingle.label" placeholder="请选择">
    <tpl slot="prepend">单选:</tpl>
  </el-input>
</p-organization>
<p-organization
  :updating="true"
  v-model="valueModelMultiple"
  :show-filter="true"
  :use-popover="true"
  :multiple="true"
  model-mode="leaf"
  :expand-level="1"
  v-on:on-change="onChange"
  :ent-id="entId"
  :show-staff="true">
  <div slot="tree-node" slot-scope="{ node, data, filterText }" class="p-organization__node-avatar">
    <tpl v-if="data.children && data.children.length > 0">
      <label v-if="node.label" v-html="node.label.replace(filterText, `<b>${filterText}</b>`)"></label>
    </tpl>
    <tpl v-else>
      <el-image :src="'https://placeimg.com/100/100/any'" fit="cover"> </el-image>
      <div class="p-organization__node-avatar__info">
        <label> {{ node.label }} <span>（1xxxxxxxxxx）</span></label>
        <div> {{node.labels.join('/')}} </div>
      </div>
    </tpl>
  </div>
  <el-input slot="reference" :value="valueModelMultiple.map((o) => o.label).join('/')" placeholder="请选择">
    <tpl slot="prepend">多选:</tpl>
  </el-input>
</p-organization>
.p-organization__node-avatar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0 0 0 10px;
  .el-image {
    flex-grow: 0;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    margin-right: 10px;
    border-radius: 50%;
  }
  .p-organization__node-avatar__info {
    flex-grow: 1;
    width: 0;
    padding: 12px 0;
    & > label {
      color: rgba(0, 0, 0, 0.85);
      padding: 4px 0;
      & > span:last-child {
        color: rgba(0, 0, 0, 0.65);
      }
    }
    & > div {
      font-size: 12px;
      color: rgba(0, 0, 0, 0.45);
      padding: 4px 0;
    }
  }
}

场景三: 穿梭

<div class="transfer">
  <p-organization
    :updating="true"
    v-model="valueTransfer"
    :show-filter="true"
    :multiple="true"
    model-mode="tree"
    :ent-id="entId"
    :show-staff="true"
    :expand-all="true"
    ref="tree">
  </p-organization>
  <p-tree-select :data="valueTransfer" model-mode="leaf" v-model="valueTransferModel" :expand-all="true" model-type="id" empty-text="请选择">
    <div slot="tree-node" slot-scope="{ node, data, filterText }" class="transfer__node">
      <label v-if="node.label" v-html="node.label.replace(filterText, `<b>${filterText}</b>`)"></label>
      <i class="el-icon-error" v-on:click.stop="onRemoveNode(node.data.id)"></i>
    </div>
  </p-tree-select>
</div>
onRemoveNode(id) {
  this.$refs.tree.uncheck(id)
},
.transfer {
  display: flex;
  align-items: flex-start;
  & > div {
    flex-grow: 1;
    width: 0;
    &:first-child {
      padding-right: 15px;
    }
    &:last-child {
      padding-left: 15px;
      border-left: 1px solid #eee;
    }
  }
  .transfer__node {
    color: #707070;
    display: flex;
    label {
      flex-grow: 1;
      width: 0;
    }
    i {
      color: #cbd1d7;
      flex-shrink: 0;
      &:hover {
        color: #707070;
      }
    }
  }
}
文档更新时间: 2021-05-13 10:05   作者：管理员