SaaS-lib/lib/component/shuttleFrame/shuttleFrameOuter.vue

<template>
  <div>
    <div>
      <h2>{{ title }} </h2>
      <div class="shuttleFrame">
        <div class="shuttleFrame-left">
          <div v-if="tabs?.length <= 1">
            <shuttleFrameMemberAndDept
              v-if="tabs[0].searchType == 'account' && tabs[0].useScenario == 'component'"
              functionType="component"
              :searchType="tabs[0].searchType"
              :filterMultiple="tabs[0].filterMultiple || false"
              :api="tabs[0].api"
              @selected="selected" />
            <shuttleFrameDeptOrMember
              v-else-if="tabs[0].searchType == 'dept' && tabs[0].useScenario == 'component'"
              functionType="component"
              :placeholder="tabs[0].placeholder"
              :searchType="tabs[0].searchType"
              :filterMultiple="tabs[0].filterMultiple || false"
              :api="tabs[0].api"
              @selected="selected" />
          </div>
          <a-tabs v-else v-model:activeKey="activeKey">
            <a-tab-pane v-for="(item, index) in tabs" :key="index">
              <shuttleFrameMemberAndDept
                v-if="item.useScenario == 'jurisdiction' && item.searchType == 'account'"
                :placeholder="item.placeholder"
                :filterMultiple="item.filterMultiple || false"
                :searchType="item.searchType"
                :api="item.api"
                @selected="selected" />
              <shuttleFrameDeptOrMember
                v-if="item.useScenario == 'jurisdiction' && item.searchType == 'dept'"
                :placeholder="item.placeholder"
                :filterMultiple="item.filterMultiple || false"
                :searchType="item.searchType"
                :api="item.api"
                @selected="selected" />
            </a-tab-pane>
            <!-- <a-tab-pane key="0" tab="部门">
            <shuttleFrameDept
              placeholder="搜索部门"
              :filterMultiple="true"
              componentRef="organization"
              type="dept"
              ref="organization"
              @selected="selected" />
          </a-tab-pane> -->
            <!-- <a-tab-pane key="1" tab="人员" force-render>
            <shuttleFrameMember
              functionType="jurisdiction"
              ref="memberJurisdiction"
              componentRef="memberJurisdiction"
              @selected="selected" />
          </a-tab-pane> -->
            <!-- <a-tab-pane key="2" tab="组件人员" force-render>
            <shuttleFrameMember
              functionType="component"
              ref="memberComponent"
              componentRef="memberComponent"
              @selected="selected" />
          </a-tab-pane> -->
            <!-- <a-tab-pane key="3" tab="人员单选" force-render>
            <shuttleFrameDept
              placeholder="搜索人员"
              :filterMultiple="false"
              type="account"
              ref="account"
              componentRef="account"
              @selected="selected" />
          </a-tab-pane> -->
          </a-tabs>
        </div>
        <div class="shuttleFrame-right">
          <p class="shuttleFrame-right-title"
            >已选择({{ selectedValueAll.length }})
            <span class="shuttleFrame-right-title-delAll" @click="delAll">清空</span>
          </p>
          <div class="shuttleFrame-right-select">
            <span
              v-for="(item, index) in selectedValueAll"
              :key="index"
              class="shuttleFrame-right-select-span">
              <a-tag :closable="true" @close="closeTag(item)" :key="index">
                <ns-icon
                  class="iconfont"
                  style="vertical-align: text-top; width: 12px; height: 12px"
                  :name="item.type == 'account' ? 'selectedAccount' : 'dept'" />
                {{ item.name }}</a-tag
              >
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
  import { defineComponent, inject, ref, unref, watch } from 'vue';
  import shuttleFrameDeptOrMember from './shuttleFrameDeptOrMember.vue';
  import shuttleFrameMemberAndDept from './shuttleFrameMemberAndDept.vue';
  import { remove } from 'lodash-es';
  import mitt, { Emitter } from 'mitt';

  type selectedObj = {
    id: number;
    name?: string;
    type?: string;
    componentRef?: string;
  };
  type tabsObj = {
    placeholder?: string;
    searchType?: string;
    filterMultiple?: boolean;
    useScenario?: string;
    api?: object;
  };
  export default defineComponent({
    name: 'NsShuttleFrameOuter',
    components: {
      shuttleFrameDeptOrMember,
      shuttleFrameMemberAndDept,
    },
    props: {
      title: String,
      tabs: {
        type: Array<tabsObj>,
        default: [],
      },
      // default: Object,
    },
    setup(props) {
      console.log('NsShuttleFrameOuter', props.tabs);
      const activeKey = ref('1');
      // const selectedValue = ref<any>([]);
      const selectedValueAll = ref<any>([]);
      const memberJurisdiction = ref();
      const memberComponent = ref();
      const organization = ref();
      const account = ref();

      function selected(val: Array, type: String) {
        if (type == 'add') {
          selectedValueAll.value =
            selectedValueAll.value.length > 0 ? selectedValueAll.value.concat(val) : val;
        } else if (type == 'del') {
          val.map((item: selectedObj) => {
            remove(unref(selectedValueAll.value), (elem: selectedObj) => {
              return (
                elem.id === item.id &&
                elem.type == item.type &&
                elem.componentRef == item.componentRef
              );
            });
          });
        }
      }

      //发送给app.vue
      const lmEmitter = inject('lmEmitter') as Emitter<emitEvents>;

      watch(
        () => selectedValueAll.value,
        (val) => {
          lmEmitter.emit('setEmitData', val);
        },
      );

      //单个清除
      function closeTag(item) {
        lmEmitter.emit('deleteSelected', item);
      }

      //清空
      function delAll() {
        lmEmitter.emit('deleteAllSelected');
      }

      return {
        activeKey,
        selected,
        // selectedValue,
        memberComponent,
        memberJurisdiction,
        organization,
        closeTag,
        delAll,
        selectedValueAll,
        account,
      };
    },
  });
</script>
<style lang="less" scoped>
  .shuttleFrame {
    display: flex;
    justify-content: space-between;
    width: 100%;

    &-left {
      width: 50%;
      border-right: 1px solid #f0f0f0;
      padding-right: 14px;
    }
    &-right {
      width: 50%;
      padding-left: 12px;
      padding-top: 6px;

      &-title {
        color: #747677;
      }
      &-title-delAll {
        float: right;
        color: @primary-color;
        cursor: pointer;
      }
      &-select {
        &-span {
        }
      }
    }
  }
  :deep(.ant-tag) {
    color: #747677;
    background-color: #f1f2f3;
    margin-bottom: 8px;
  }
  :deep(.ant-tabs-top > .ant-tabs-nav::before) {
    border-bottom: none;
  }
</style>