👕 按钮样式

4 years ago · 74f7f77e75
7 changed files with 165 additions and 150 deletions
--- a/vben271/src/views/admin/roles/AbpRole.vue
+++ b/vben271/src/views/admin/roles/AbpRole.vue
@ -10,6 +10,7 @@
      <template #toolbar>
        <a-button
          type="primary"
+          preIcon="ant-design:plus-circle-outlined"
          @click="openCreateAbpRoleModal"
          v-auth="'AbpIdentity.Roles.Create'"
        >
@ -18,32 +19,28 @@
      </template>

      <template #action="{ record }">
-        <a-button
-          type="link"
-          size="small"
-          @click="handlePermission(record)"
-          v-auth="'AbpIdentity.Roles.ManagePermissions'"
-        >
-          {{ t('routes.admin.roleManagement_permission') }}
-        </a-button>
-
-        <a-button
-          type="link"
-          size="small"
-          @click="handleEdit(record)"
-          v-auth="'AbpIdentity.Roles.Update'"
-        >
-          {{ t('common.editText') }}
-        </a-button>
-
-        <a-button
-          type="link"
-          size="small"
-          @click="handleDelete(record)"
-          v-auth="'AbpIdentity.Roles.Delete'"
-        >
-          {{ t('common.delText') }}
-        </a-button>
+        <TableAction
+          :actions="[
+            {
+              auth: 'AbpIdentity.Roles.ManagePermissions',
+              label: t('routes.admin.roleManagement_permission'),
+              icon: 'ant-design:property-safety-outlined',
+              onClick: handlePermission.bind(null, record),
+            },
+          ]"
+          :dropDownActions="[
+            {
+              auth: 'AbpIdentity.Roles.Update',
+              label: t('common.editText'),
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              auth: 'AbpIdentity.Roles.Delete',
+              label: t('common.delText'),
+              onClick: handleDelete.bind(null, record),
+            },
+          ]"
+        />
      </template>
    </BasicTable>

--- a/vben271/src/views/admin/users/AbpUser.vue
+++ b/vben271/src/views/admin/users/AbpUser.vue
@ -3,6 +3,7 @@
    <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button
+          preIcon="ant-design:plus-circle-outlined"
          type="primary"
          @click="openCreateAbpUserModal"
          v-auth="'AbpIdentity.Users.Create'"
@ -16,31 +17,28 @@
        </Tag>
      </template>
      <template #action="{ record }">
-        <a-button
-          type="link"
-          size="small"
-          @click="handleEdit(record)"
-          v-auth="'AbpIdentity.Users.Update'"
-        >
-          {{ t('common.editText') }}
-        </a-button>
-
-        <a-button
-          type="link"
-          size="small"
-          @click="handleDelete(record)"
-          v-auth="'AbpIdentity.Users.Delete'"
-        >
-          {{ t('common.delText') }}
-        </a-button>
-        <a-button
-          type="link"
-          size="small"
-          @click="handleLock(record)"
-          v-auth="'System.Users.Enable'"
-        >
-          {{ !record.isActive ? t('common.enabled') : t('common.disEnabled') }}
-        </a-button>
+        <TableAction
+          :actions="[
+            {
+              icon: 'ant-design:edit-outlined',
+              auth: 'AbpIdentity.Users.Update',
+              label: t('common.editText'),
+              onClick: handleEdit.bind(null, record),
+            },
+          ]"
+          :dropDownActions="[
+            {
+              auth: 'AbpIdentity.Users.Delete',
+              label: t('common.delText'),
+              onClick: handleDelete.bind(null, record),
+            },
+            {
+              auth: 'System.Users.Enable',
+              label: !record.isActive ? t('common.enabled') : t('common.disEnabled'),
+              onClick: handleLock.bind(null, record),
+            },
+          ]"
+        />
      </template>
    </BasicTable>
    <CreateAbpUser
@ -113,7 +111,7 @@
        canResize: true,
        showIndexColumn: true,
        actionColumn: {
-          width: 250,
+          width: 120,
          title: t('common.action'),
          dataIndex: 'action',
          slots: {
--- a/vben271/src/views/identityServers/apiResources/ApiResources.vue
+++ b/vben271/src/views/identityServers/apiResources/ApiResources.vue
@ -3,6 +3,7 @@
    <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button
+          preIcon="ant-design:plus-circle-outlined"
          type="primary"
          @click="openCreateApiResourceModal"
          v-auth="'IdentityServerManagement.ApiResource.Create'"
@ -21,23 +22,22 @@
        </Tag>
      </template>
      <template #action="{ record }">
-        <a-button
-          type="link"
-          size="small"
-          @click="handleEdit(record)"
-          v-auth="'IdentityServerManagement.ApiResource.Update'"
-        >
-          {{ t('common.editText') }}
-        </a-button>
-
-        <a-button
-          type="link"
-          size="small"
-          @click="handleDelete(record)"
-          v-auth="'IdentityServerManagement.ApiResource.Delete'"
-        >
-          {{ t('common.delText') }}
-        </a-button>
+        <TableAction
+          :actions="[
+            {
+              auth: 'IdentityServerManagement.ApiResource.Update',
+              label: t('common.editText'),
+              icon: 'ant-design:edit-outlined',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              icon: 'ic:outline-delete-outline',
+              auth: 'IdentityServerManagement.ApiResource.Delete',
+              label: t('common.delText'),
+              onClick: handleDelete.bind(null, record),
+            },
+          ]"
+        />
      </template>
    </BasicTable>
    <CreateApiResource
@ -92,7 +92,7 @@
        canResize: true,
        showIndexColumn: true,
        actionColumn: {
-          width: 150,
+          width: 120,
          title: t('common.action'),
          dataIndex: 'action',
          slots: {
--- a/vben271/src/views/identityServers/apiScopes/ApiScopes.vue
+++ b/vben271/src/views/identityServers/apiScopes/ApiScopes.vue
@ -3,6 +3,7 @@
    <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button
+          preIcon="ant-design:plus-circle-outlined"
          type="primary"
          @click="openCreateApiScopeModal"
          v-auth="'IdentityServerManagement.ApiScope.Create'"
@ -31,23 +32,22 @@
        </Tag>
      </template>
      <template #action="{ record }">
-        <a-button
-          type="link"
-          size="small"
-          @click="handleEdit(record)"
-          v-auth="'IdentityServerManagement.ApiScope.Update'"
-        >
-          {{ t('common.editText') }}
-        </a-button>
-
-        <a-button
-          type="link"
-          size="small"
-          @click="handleDelete(record)"
-          v-auth="'IdentityServerManagement.ApiScope.Delete'"
-        >
-          {{ t('common.delText') }}
-        </a-button>
+        <TableAction
+          :actions="[
+            {
+              auth: 'IdentityServerManagement.ApiScope.Update',
+              label: t('common.editText'),
+              icon: 'ant-design:edit-outlined',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              icon: 'ic:outline-delete-outline',
+              auth: 'IdentityServerManagement.ApiScope.Delete',
+              label: t('common.delText'),
+              onClick: handleDelete.bind(null, record),
+            },
+          ]"
+        />
      </template>
    </BasicTable>
    <CreateApiScope
@ -102,7 +102,7 @@
        canResize: true,
        showIndexColumn: true,
        actionColumn: {
-          width: 150,
+          width: 120,
          title: t('common.action'),
          dataIndex: 'action',
          slots: {
--- a/vben271/src/views/identityServers/clients/Clients.vue
+++ b/vben271/src/views/identityServers/clients/Clients.vue
@ -3,6 +3,7 @@
    <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button
+          preIcon="ant-design:plus-circle-outlined"
          type="primary"
          @click="openCreateClientModal"
          v-auth="'IdentityServerManagement.Client.Create'"
@ -18,46 +19,38 @@
      </template>

      <template #action="{ record }">
-        <a-button
-          type="link"
-          size="small"
-          @click="handleEdit(record)"
-          v-auth="'IdentityServerManagement.Client.Update'"
-        >
-          {{ t('common.editText') }}
-        </a-button>
-        <a-button
-          type="link"
-          size="small"
-          @click="handleEnabled(record)"
-          v-auth="'IdentityServerManagement.Client.Enable'"
-        >
-          {{ record.enabled ? t('common.disEnabled') : t('common.enabled') }}
-        </a-button>
-        <a-button
-          type="link"
-          size="small"
-          @click="handleUri(record)"
-          v-auth="'IdentityServerManagement.Client.Update'"
-        >
-          Uri
-        </a-button>
-        <a-button
-          type="link"
-          size="small"
-          @click="handleDelete(record)"
-          v-auth="'IdentityServerManagement.Client.Delete'"
-        >
-          {{ t('common.delText') }}
-        </a-button>
-        <a-button
-          type="link"
-          size="small"
-          @click="handleIdenityResource(record)"
-          v-auth="'IdentityServerManagement.Client.Delete'"
-        >
-          Scopes
-        </a-button>
+        <TableAction
+          :actions="[
+            {
+              auth: 'IdentityServerManagement.Client.Update',
+              label: t('common.editText'),
+              icon: 'ant-design:edit-outlined',
+              onClick: handleEdit.bind(null, record),
+            },
+          ]"
+          :dropDownActions="[
+            {
+              auth: 'IdentityServerManagement.Client.Enable',
+              label: record.enabled ? t('common.disEnabled') : t('common.enabled'),
+              onClick: handleEnabled.bind(null, record),
+            },
+            {
+              auth: 'IdentityServerManagement.Client.Update',
+              label: 'Uri',
+              onClick: handleUri.bind(null, record),
+            },
+            {
+              auth: 'IdentityServerManagement.Client.Update',
+              label: 'Scopes',
+              onClick: handleIdenityResource.bind(null, record),
+            },
+            {
+              auth: 'IdentityServerManagement.Client.Delete',
+              label: t('common.delText'),
+              onClick: handleDelete.bind(null, record),
+            },
+          ]"
+        />
      </template>
    </BasicTable>
    <CreateClient
@ -127,7 +120,7 @@
        canResize: true,
        showIndexColumn: true,
        actionColumn: {
-          width: 300,
+          width: 120,
          title: t('common.action'),
          dataIndex: 'action',
          slots: {
--- a/vben271/src/views/identityServers/identityResources/IdentityResources.vue
+++ b/vben271/src/views/identityServers/identityResources/IdentityResources.vue
@ -3,6 +3,7 @@
    <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button
+          preIcon="ant-design:plus-circle-outlined"
          type="primary"
          @click="openCreateIdentityResourcesModal"
          v-auth="'IdentityServerManagement.IdentityResources.Create'"
@ -31,23 +32,22 @@
        </Tag>
      </template>
      <template #action="{ record }">
-        <a-button
-          type="link"
-          size="small"
-          @click="handleEdit(record)"
-          v-auth="'IdentityServerManagement.IdentityResources.Update'"
-        >
-          {{ t('common.editText') }}
-        </a-button>
-
-        <a-button
-          type="link"
-          size="small"
-          @click="handleDelete(record)"
-          v-auth="'IdentityServerManagement.IdentityResources.Delete'"
-        >
-          {{ t('common.delText') }}
-        </a-button>
+        <TableAction
+          :actions="[
+            {
+              auth: 'IdentityServerManagement.IdentityResources.Update',
+              label: t('common.editText'),
+              icon: 'ant-design:edit-outlined',
+              onClick: handleEdit.bind(null, record),
+            },
+            {
+              icon: 'ic:outline-delete-outline',
+              auth: 'IdentityServerManagement.IdentityResources.Delete',
+              label: t('common.delText'),
+              onClick: handleDelete.bind(null, record),
+            },
+          ]"
+        />
      </template>
    </BasicTable>
    <CreateIdentityResource
--- a/vben271/src/views/tenants/Tenant.vue
+++ b/vben271/src/views/tenants/Tenant.vue
@ -3,6 +3,7 @@
    <BasicTable @register="registerTable" size="small">
      <template #toolbar>
        <a-button
+          preIcon="ant-design:plus-circle-outlined"
          type="primary"
          @click="openCreateTenantModal"
          v-auth="'AbpTenantManagement.Tenants.Create'"
@ -11,7 +12,32 @@
        </a-button>
      </template>

-      <template #action="{ record }">
+      <template #action="{ action }">
+        <TableAction
+          :actions="[
+            {
+              icon: 'ant-design:edit-outlined',
+              auth: 'AbpTenantManagement.Tenants.Update',
+              label: t('common.editText'),
+              onClick: handleEdit.bind(null, record),
+            },
+          ]"
+          :dropDownActions="[
+            {
+              auth: 'AbpTenantManagement.Tenants.ManageConnectionStrings',
+              label: t('routes.tenant.connectionString'),
+              onClick: handleConnectionString.bind(null, record),
+            },
+            {
+              auth: 'AbpTenantManagement.Tenants.Delete',
+              label: t('common.delText'),
+              onClick: handleDelete.bind(null, record),
+            },
+          ]"
+        />
+      </template>
+
+      <!-- <template #action="{ record }">
        <a-button
          type="link"
          size="small"
@ -37,7 +63,7 @@
        >
          {{ t('routes.tenant.connectionString') }}
        </a-button>
-      </template>
+      </template> -->
    </BasicTable>
    <EditTenant
      @register="registerEditTenantModal"
@ -61,7 +87,7 @@
  import { defineComponent } from 'vue';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { BasicModal, useModal } from '/@/components/Modal';
-  import { BasicTable, useTable } from '/@/components/Table';
+  import { BasicTable, useTable, TableAction } from '/@/components/Table';

  import { getTenantListAsync, tableColumns, searchFormSchema, deleteTenantAsync } from './Tenant';
  import CreateTenant from './CreateTenant.vue';
@ -74,6 +100,7 @@
    components: {
      BasicTable,
      BasicModal,
+      TableAction,
      CreateTenant,
      EditTenant,
      EditConnectionString,
@ -103,7 +130,7 @@
          slots: {
            customRender: 'action',
          },
-          width: 200,
+          width: 120,
          fixed: 'right',
        },
      });