表格按钮组组件

src/components/Table/src/BasicTable.vue

@@ -571,7 +571,6 @@ export default defineComponent({
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding-left: 10px;
   }
   .ant-pagination {
     text-align: right;

src/components/TableButton/index.vue

@@ -0,0 +1,115 @@
+<!--
+ * @Desc: 列表页面表格操作按钮组
+ * @Author: lijj
+ * @Date: 2024-11-22 09:13:29
+-->
+<template>
+  <div :class="prefixCls">
+    <!-- 新增 -->
+    <a-tooltip placement="top" :mouseEnterDelay="0.5">
+      <template #title>
+        <span>{{ t('common.addText') }}</span>
+      </template>
+      <span v-if="btnKeys.includes('add') && !checkPermissions(show.add)" :class="`${prefixCls}-svg-btn`" @click="add">
+        <svg t="1732239931995" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14776" width="200" height="200"><path d="M832 1024H192c-108.8 0-192-89.6-192-192V192c0-108.8 89.6-192 192-192h640c108.8 0 192 89.6 192 192v640c0 102.4-89.6 192-192 192z" fill="#469FA6" p-id="14777"></path><path d="M780.8 588.8H236.8c-25.6 0-51.2-19.2-51.2-51.2v-64c0-25.6 19.2-51.2 51.2-51.2h556.8c25.6 0 51.2 19.2 51.2 51.2v70.4c-6.4 19.2-38.4 44.8-64 44.8z" fill="#FFFFFF" p-id="14778"></path><path d="M422.4 780.8V236.8c0-25.6 19.2-51.2 51.2-51.2h70.4c25.6 0 51.2 19.2 51.2 51.2v556.8c0 25.6-19.2 51.2-51.2 51.2H473.6c-32-6.4-51.2-38.4-51.2-64z" fill="#FFFFFF" p-id="14779"></path></svg>
+      </span>
+    </a-tooltip>
+    <!-- 复制 -->
+    <a-tooltip placement="top" :mouseEnterDelay="0.5">
+      <template #title>
+        <span>{{ t('common.copyText') }}</span>
+      </template>
+      <span v-if="btnKeys.includes('copy') && !checkPermissions(show.copy)" :class="`${prefixCls}-svg-btn`" @click="copy">
+        <svg t="1732241194906" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16430" width="200" height="200"><path d="M140.8 108.8h505.6c89.6 0 140.8 44.8 140.8 140.8v633.6c0 89.6-44.8 140.8-140.8 140.8H140.8C44.8 1017.6 0 972.8 0 876.8V243.2c0-89.6 44.8-134.4 140.8-134.4z" fill="#45ABFF" p-id="16431"></path><path d="M403.2 0h480c96 0 140.8 44.8 140.8 140.8v633.6c0 89.6-44.8 140.8-140.8 140.8H403.2c-89.6 0-140.8-44.8-140.8-140.8V140.8C268.8 44.8 313.6 0 403.2 0z" fill="#45ABFF" p-id="16432"></path><path d="M646.4 108.8H268.8c-6.4 12.8-6.4 25.6-6.4 38.4V768c0 83.2 64 147.2 140.8 147.2h384c0-12.8 6.4-25.6 6.4-38.4V249.6c-6.4-76.8-70.4-140.8-147.2-140.8z" fill="#216DE8" p-id="16433"></path><path d="M556.8 582.4H192c-25.6 0-44.8-19.2-44.8-44.8 0-25.6 19.2-44.8 44.8-44.8h364.8c25.6 0 44.8 19.2 44.8 44.8s-19.2 44.8-44.8 44.8zM556.8 800H192c-25.6 0-44.8-19.2-44.8-44.8 0-25.6 19.2-44.8 44.8-44.8h364.8c25.6 0 44.8 19.2 44.8 44.8s-19.2 44.8-44.8 44.8zM556.8 371.2H192c-25.6 0-44.8-19.2-44.8-44.8s19.2-44.8 44.8-44.8h364.8c25.6 0 44.8 19.2 44.8 44.8 0 25.6-19.2 44.8-44.8 44.8z" fill="#FFFFFF" p-id="16434"></path></svg>
+      </span>
+    </a-tooltip>
+    <!-- 删除 -->
+    <a-tooltip placement="top" :mouseEnterDelay="0.5">
+      <template #title>
+        <span>{{ t('common.delText') }}</span>
+      </template>
+      <a-popconfirm
+        title="确定删除当前选中数据？"
+        ok-text="是"
+        cancel-text="否"
+        @confirm="del"
+      >
+        <span v-if="btnKeys.includes('del') && !checkPermissions(show.del)" :class="`${prefixCls}-svg-btn`">
+          <svg t="1732240833320" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="15643" width="200" height="200"><path d="M832 1024H192c-108.8 0-192-89.6-192-192V192c0-108.8 89.6-192 192-192h640c108.8 0 192 89.6 192 192v640c0 102.4-89.6 192-192 192z" fill="#C73035" p-id="15644"></path><path d="M646.4 761.6L256 371.2c-19.2-19.2-19.2-51.2 0-70.4l44.8-44.8c19.2-19.2 51.2-25.6 70.4 0l396.8 396.8c19.2 19.2 25.6 51.2 0 70.4l-51.2 44.8c-19.2 12.8-51.2 12.8-70.4-6.4z" fill="#FFFFFF" p-id="15645"></path><path d="M256 646.4L646.4 256c19.2-19.2 51.2-25.6 70.4 0l51.2 44.8c19.2 19.2 25.6 51.2 0 70.4L371.2 768c-19.2 19.2-51.2 25.6-70.4 0l-51.2-51.2c-12.8-25.6-12.8-57.6 6.4-70.4z" fill="#FFFFFF" p-id="15646"></path></svg>
+        </span>
+      </a-popconfirm>
+    </a-tooltip>
+    <!-- 其他 -->
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup name="TableButton">
+  import { useDesign } from '/@/hooks/web/useDesign'
+  import { useI18n } from '/@/hooks/web/useI18n'
+  import { checkPermissions } from '/@/hooks/Permissions/index'
+  const { prefixCls } = useDesign('ds-table-button')
+  const { t } = useI18n()
+  const props = defineProps({
+    // 默认显示的按钮(新增、删除)
+    show: {
+      type: Object,
+      default: { add: null, del: null }
+    }
+  })
+  const btnKeys = Object.keys(props.show)
+  const emits = defineEmits(['add', 'del', 'copy'])
+  // 新建
+  const add = () => {
+    emits('add')
+  }
+  // 删除
+  const del = () => {
+    emits('del')
+  }
+  // 复制
+    const copy = () => {
+    emits('copy')
+  }
+</script>
+
+<style lang="less">
+  @prefix-cls: ~'@{namespace}-ds-table-button';
+  .@{prefix-cls} {
+    height: 32px;
+    padding-top: 3px;
+    &-svg-btn {
+      background: #F0F2F5;
+      display: inline-block;
+      width: 26px;
+      height: 26px;
+      border-radius: 4px;
+      margin-right: 8px;
+      cursor: pointer;
+    }
+    .iconfont {
+      background: #F0F2F5;
+      border-radius: 4px;
+      margin-right: 8px;
+      padding: 7px;
+      cursor: pointer;
+      position: relative;
+      top: -8.2px;
+      color: #121826;
+    }
+    .iconfont::before {
+      color: @primary-color;
+      margin-right: 3px;
+      font-size: 14px;
+    }
+    &-svg-btn:hover, .iconfont:hover {
+      box-shadow: 0px 2px 4px #cad1db;
+    }
+    svg {
+      width: 16px;
+      height: 16px;
+      margin: 5px;
+    }
+  }
+</style>
+  

src/components/registerGlobComp.ts

@@ -5,6 +5,7 @@ import VXETable from 'vxe-table'
 import ConfigForm from './ConfigForm/index.vue'
 import ActionBar from './ActionBar/index.vue'
 import ImportExcel from './importExcel/index.vue'
+import TableButton from './TableButton/index.vue'
 import 'vxe-table/lib/style.css'
 import {
   // Need
@@ -57,7 +58,7 @@ import {
   Timeline
 } from 'ant-design-vue'
 
-const compList = [AntButton.Group, Icon, ConfigForm, ActionBar, ImportExcel]
+const compList = [AntButton.Group, Icon, ConfigForm, ActionBar, ImportExcel, TableButton]
 
 export function registerGlobComp(app: App) {
   compList.forEach((comp) => {

src/layouts/default/setting/SettingDrawer.tsx

@@ -380,7 +380,7 @@ export default defineComponent({
       >
         {unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.sysTheme')}</Divider>}
         {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
-        <Divider>{() => t('layout.setting.sysTheme')}</Divider>
+        {/* <Divider>{() => t('layout.setting.sysTheme')}</Divider>
         {renderMainTheme()}
         <Divider>{() => t('layout.setting.headerTheme')}</Divider>
         {renderHeaderTheme()}
@@ -391,7 +391,7 @@ export default defineComponent({
         <Divider>{() => t('layout.setting.interfaceDisplay')}</Divider>
         {renderContent()}
         <Divider>{() => t('layout.setting.animation')}</Divider>
-        {renderTransition()}
+        {renderTransition()} */}
         <Divider />
         <SettingFooter />
       </BasicDrawer>

src/locales/lang/en/common.ts

@@ -15,6 +15,7 @@ export default {
   editText: 'Edit',
   searchText: 'Search',
   queryText: 'Search',
+  copyText: 'Copy',
 
   inputText: 'Please enter',
   chooseText: 'Please choose',

src/locales/lang/zh-CN/common.ts

@@ -1,3 +1,8 @@
+/*
+ * @Desc: 
+ * @Author: lijj
+ * @Date: 2024-08-27 08:44:10
+ */
 export default {
   okText: '确认',
   closeText: '关闭',
@@ -10,6 +15,7 @@ export default {
   editText: '编辑',
   searchText: '搜索',
   queryText: '查询',
+  copyText: '复制',
 
   inputText: '请输入',
   chooseText: '请选择',

src/views/baseinfo/goodstype/index.vue

@@ -2,6 +2,13 @@
   <div class="p20">
     <BasicTable class="ds-table" @register="registerTable" @row-dbClick="handleAudit">
       <template #tableTitle>
+        <TableButton
+          :show="{ add: 'op:goodstype:add', del: 'op:goodstype:del' }"
+          @add="handleCreate"
+          @del="handleDel"
+        >
+          <span v-if="!checkPermissions('op:goodstype:import')" class="iconfont icon-piliangdaochu-danse" @click="importFlow">批量导入</span>
+        </TableButton>
         <span>
           <a-button
             type="link"
@@ -22,15 +29,6 @@
               删除
             </a-button>
           </a-popconfirm>
-          <Divider type="vertical" />
-          <a-button
-            type="link"
-            @click="importFlow"
-            :disabled="checkPermissions('op:goodstype:import')"
-          >
-            <span class="iconfont icon-xiazai"></span>
-            导入商品类型
-          </a-button>
         </span>
       </template>
       <template #toolbar></template>