SaaS-lib/lib/component/table/table-action.vue

<!-- @format -->

<template>
  <div class="table-action">
    <template v-for="(item, index) in getActions" :key="item.name">
      <template v-if="item.children">
        <template v-if="getDropdownActions(item.children).length > 0">
          <a-dropdown :trigger="['hover']" :dropMenuList="item.children">
            <a class="ant-dropdown-link" @click.prevent>
              <ns-v-node :content="item.label" />
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <div v-for="itemChild in getDropdownActions(item.children)" :key="itemChild.name">
                  <a-menu-item style="padding: 0px" v-if="itemChild.type !== 'divider'">
                    <a-button
                      style="width: 100%; text-align: left"
                      type="link"
                      :disabled="itemChild.dynamicDisabled"
                      @click="itemChild.finalHandle(data, itemChild.name)">
                      <ns-v-node :content="itemChild.label" />
                    </a-button>
                  </a-menu-item>
                  <a-menu-divider v-else style="margin: 4px 0" />
                </div>
              </a-menu>
            </template>
          </a-dropdown>
        </template>
      </template>
      <template v-else>
        <a-button
          :type="item.type || 'link'"
          :disabled="item.dynamicDisabled"
          @click="item.finalHandle(data, item.name)">
          <ns-v-node :content="item.label" />
        </a-button>
      </template>
    </template>
  </div>
</template>

<script lang="ts">
  import { computed, defineComponent, inject, toRefs, unref } from 'vue';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { cloneDeep, isFunction, isUndefined } from 'lodash-es';
  import { useAction } from '/nerv-lib/use/use-action';
  import { TableEdit } from '/nerv-lib/component/table/use-table-edit';
  import { useRoute } from 'vue-router';
  import { PropTypes } from '/nerv-lib/util/type';
  import { useTableColumn } from '/nerv-lib/component/table/use-table-column';

  export default defineComponent({
    name: 'NsTableAction',
    components: {
      DownOutlined,
    },
    props: {
      searchData: {
        type: Object,
        default: () => ({}),
      },
      data: {
        type: Object,
        default: () => ({}),
      },
      columnActions: {
        type: Object,
        default: () => ({}),
      },
    },
    setup(props) {
      const { columnActions, searchData, data } = toRefs(props);
      const reload = inject('reload', () => {});
      const { filterAction, transformAction } = useAction({ reload });
      const route = useRoute();
      const getData = computed(() => {
        return {
          ...route.query,
          ...route.params,
          ...searchData.value,
          ...data.value,
        };
      });
      const { transformColumnAction } = useTableColumn({ columnActions: columnActions.value });

      const getActions = computed(() => {
        let actions = cloneDeep(unref(columnActions).actions);
        //是否开启自动隐藏字段
        if (columnActions.value.autoMergeAction === true) {
          actions = transformColumnAction(actions);
        }

        actions = actions
          .filter((action) => {
            return filterAction(action, getData.value);
          })
          .map((action) => {
            return transformAction(action, getData.value);
          });
        return actions;
      });

      const getDropdownActions = (actions) => {
        actions = actions
          .filter((action) => {
            return filterAction(action, getData.value);
          })
          .map((action) => {
            return transformAction(action, getData.value);
          });
        return actions;
      };
      const { serviceMode } = __APP_INFO__;

      return { getActions, getDropdownActions, isFunction, serviceMode };
    },
  });
</script>

<style lang="less" scoped>
  .table-action {
    user-select: none;
    margin-left: -6px;
    margin-right: -6px;
    display: flex;
  }

  :deep(.ant-btn) {
    padding: 0 6px !important;
    height: 22px;
    line-height: 20px;
  }

  :deep(.ant-dropdown-link) {
    padding: 0 6px;
  }
  :deep(.ant-btn-link:hover) {
    border-color: transparent;
  }
</style>