fix: use button in components instead antd

suyuan32 · Jun 20, 2023 · cc7e120 · cc7e120
1 parent f5529c5
commit cc7e120
Show file tree

Hide file tree

Showing 15 changed files with 171 additions and 57 deletions.
diff --git a/src/api/file/file.ts b/src/api/file/file.ts
@@ -1,14 +1,14 @@
 import { UploadApiResp } from '/@/api/sys/model/uploadModel';
 import { defHttp } from '/@/utils/http/axios';
 import { ErrorMessageMode, UploadFileParams } from '/#/axios';
-import { BaseDataResp, BaseIDReq, BaseListReq, BaseResp } from '../model/baseModel';
+import { BaseDataResp, BaseIDsReq, BaseListReq, BaseResp } from '../model/baseModel';
 import { FileListResp, updateFileInfoReq } from './model/fileModel';
 import { AxiosProgressEvent } from 'axios';
 
 enum Api {
   uploadFile = '/fms-api/upload',
   GetFileList = '/fms-api/file/list',
-  UpdateFileInfo = '/fms-api/file',
+  UpdateFileInfo = '/fms-api/file/update',
   SetFileStatus = '/fms-api/file/status',
   DownloadFile = '/fms-api/file/download',
 }
@@ -55,7 +55,7 @@ export const UpdateFileInfo = (params: updateFileInfoReq, mode: ErrorMessageMode
  *  author: Ryan Su
  *  @description: delete api
  */
-export const deleteFile = (params: BaseIDReq, mode: ErrorMessageMode = 'modal') => {
+export const deleteFile = (params: BaseIDsReq, mode: ErrorMessageMode = 'modal') => {
   return defHttp.delete<BaseResp>(
     { url: Api.UpdateFileInfo, params: params },
     {

diff --git a/src/locales/lang/en/fileManager.ts b/src/locales/lang/en/fileManager.ts
@@ -20,4 +20,7 @@ export default {
   copyURLSuccess: 'Copy the path successfully',
   copyURL: 'Copy URL',
   uploadFirst: 'Please upload the file firstly',
+
+  addFile: 'Add File',
+  editFile: 'Edit File',
 };
diff --git a/src/locales/lang/zh-CN/fileManager.ts b/src/locales/lang/zh-CN/fileManager.ts
@@ -20,4 +20,7 @@ export default {
   copyURLSuccess: '复制文件地址成功',
   copyURL: '复制地址',
   uploadFirst: '请先上传文件',
+
+  addFile: '添加文件',
+  editFile: '编辑文件',
 };
diff --git a/src/views/file/FileDrawer.vue b/src/views/file/FileDrawer.vue
@@ -48,7 +48,7 @@
       });
 
       const getTitle = computed(() =>
-        !unref(isUpdate) ? t('sys.apis.addApi') : t('sys.apis.editApi'),
+        !unref(isUpdate) ? t('fileManager.addFile') : t('fileManager.editFile'),
       );
 
       async function handleSubmit() {

diff --git a/src/views/file/index.vue b/src/views/file/index.vue
@@ -1,6 +1,17 @@
 <template>
   <div>
     <BasicTable @register="registerTable">
+      <template #tableTitle>
+        <Button
+          type="primary"
+          danger
+          preIcon="ant-design:delete-outlined"
+          v-if="showDeleteButton"
+          @click="handleBatchDelete()"
+        >
+          {{ t('common.delete') }}
+        </Button>
+      </template>
       <template #toolbar>
         <BasicUpload
           :maxSize="1000"
@@ -85,7 +96,7 @@
   </div>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
+  import { createVNode, defineComponent, ref } from 'vue';
   import { Image, Modal } from 'ant-design-vue';
 
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
@@ -99,14 +110,26 @@
 
   import { columns, searchFormSchema } from './file.data';
   import { deleteFile, downloadFile, getFileList, uploadApi } from '../../api/file/file';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
+  import { Button } from '/@/components/Button';
 
   export default defineComponent({
     name: 'FileManagement',
-    components: { BasicTable, FileDrawer, TableAction, BasicUpload, Image, Modal },
+    components: {
+      BasicTable,
+      FileDrawer,
+      Button,
+      TableAction,
+      BasicUpload,
+      Image,
+      Modal,
+    },
     setup() {
       const { t } = useI18n();
       const { toClipboard } = useClipboard();
       const { createErrorModal, createMessage } = useMessage();
+      const showDeleteButton = ref<boolean>(false);
+      const selectedIds = ref<number[] | string[]>();
 
       const [registerDrawer, { openDrawer }] = useDrawer();
       const [registerTable, { reload }] = useTable({
@@ -127,6 +150,14 @@
           dataIndex: 'action',
           fixed: undefined,
         },
+        rowKey: 'id',
+        rowSelection: {
+          type: 'checkbox',
+          onChange: (selectedRowKeys, _selectedRows) => {
+            selectedIds.value = selectedRowKeys as number[];
+            showDeleteButton.value = selectedRowKeys.length > 0;
+          },
+        },
       });
       // image and video control
       const visible = ref<boolean>(false);
@@ -204,10 +235,27 @@
       }
 
       async function handleDelete(record: Recordable) {
-        await deleteFile({ id: record.id });
+        await deleteFile({ ids: [record.id] });
         reload();
       }
 
+      async function handleBatchDelete() {
+        Modal.confirm({
+          title: t('common.deleteConfirm'),
+          icon: createVNode(ExclamationCircleOutlined),
+          async onOk() {
+            const ids = selectedIds.value as number[];
+            const result = await deleteFile({ ids: ids });
+            if (result.code === 0) {
+              await reload();
+            }
+          },
+          onCancel() {
+            console.log('Cancel');
+          },
+        });
+      }
+
       async function handleCopyToClipboard(record: Recordable) {
         try {
           await toClipboard(record.publicPath);
@@ -252,6 +300,8 @@
         handleCloseVideo,
         handleCloseImage,
         handleCopyToClipboard,
+        handleBatchDelete,
+        showDeleteButton,
       };
     },
   });

diff --git a/src/views/mms/member/index.vue b/src/views/mms/member/index.vue
@@ -7,8 +7,13 @@
       <Col :span="19">
         <BasicTable @register="registerTable" :searchInfo="searchInfo">
           <template #tableTitle>
-            <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
-              <template #icon><DeleteOutlined /></template>
+            <Button
+              type="primary"
+              danger
+              preIcon="ant-design:delete-outlined"
+              v-if="showDeleteButton"
+              @click="handleBatchDelete()"
+            >
               {{ t('common.delete') }}
             </Button>
           </template>
@@ -46,9 +51,10 @@
 </template>
 <script lang="ts">
   import { createVNode, defineComponent, reactive, ref } from 'vue';
-  import { Button, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue/lib/icons';
+  import { Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Button } from '/@/components/Button';
   import RankTree from './RankTree.vue';
 
   import { useDrawer } from '/@/components/Drawer';
@@ -72,7 +78,6 @@
       Row,
       Col,
       RankTree,
-      DeleteOutlined,
     },
     setup() {
       const { t } = useI18n();

diff --git a/src/views/mms/memberRank/index.vue b/src/views/mms/memberRank/index.vue
@@ -2,8 +2,13 @@
   <div>
     <BasicTable @register="registerTable">
       <template #tableTitle>
-        <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
-          <template #icon><DeleteOutlined /></template>
+        <Button
+          type="primary"
+          danger
+          preIcon="ant-design:delete-outlined"
+          v-if="showDeleteButton"
+          @click="handleBatchDelete()"
+        >
           {{ t('common.delete') }}
         </Button>
       </template>
@@ -39,9 +44,10 @@
 </template>
 <script lang="ts">
   import { createVNode, defineComponent, ref } from 'vue';
-  import { Button, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue/lib/icons';
+  import { Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Button } from '/@/components/Button';
 
   import { useDrawer } from '/@/components/Drawer';
   import MemberRankDrawer from './MemberRankDrawer.vue';
@@ -52,7 +58,7 @@
 
   export default defineComponent({
     name: 'MemberRankManagement',
-    components: { BasicTable, MemberRankDrawer, TableAction, Button, DeleteOutlined },
+    components: { BasicTable, MemberRankDrawer, TableAction, Button },
     setup() {
       const { t } = useI18n();
       const selectedIds = ref<number[] | string[]>();

diff --git a/src/views/sys/api/index.vue b/src/views/sys/api/index.vue
@@ -2,8 +2,13 @@
   <div>
     <BasicTable @register="registerTable">
       <template #tableTitle>
-        <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
-          <template #icon><DeleteOutlined /></template>
+        <Button
+          type="primary"
+          danger
+          preIcon="ant-design:delete-outlined"
+          v-if="showDeleteButton"
+          @click="handleBatchDelete()"
+        >
           {{ t('common.delete') }}
         </Button>
       </template>
@@ -39,9 +44,10 @@
 </template>
 <script lang="ts">
   import { createVNode, defineComponent, ref } from 'vue';
-  import { Button, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue/lib/icons';
+  import { Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Button } from '/@/components/Button';
 
   import { useDrawer } from '/@/components/Drawer';
   import ApiDrawer from './ApiDrawer.vue';
@@ -52,7 +58,7 @@
 
   export default defineComponent({
     name: 'ApiManagement',
-    components: { BasicTable, ApiDrawer, TableAction, Button, DeleteOutlined },
+    components: { BasicTable, ApiDrawer, TableAction, Button },
     setup() {
       const { t } = useI18n();
       const selectedIds = ref<number[] | string[]>();

diff --git a/src/views/sys/department/index.vue b/src/views/sys/department/index.vue
@@ -2,8 +2,13 @@
   <div>
     <BasicTable @register="registerTable">
       <template #tableTitle>
-        <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
-          <template #icon><DeleteOutlined /></template>
+        <Button
+          type="primary"
+          danger
+          preIcon="ant-design:delete-outlined"
+          v-if="showDeleteButton"
+          @click="handleBatchDelete()"
+        >
           {{ t('common.delete') }}
         </Button>
       </template>
@@ -39,9 +44,10 @@
 </template>
 <script lang="ts">
   import { createVNode, defineComponent, ref } from 'vue';
-  import { Button, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue/lib/icons';
+  import { Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Button } from '/@/components/Button';
 
   import { useDrawer } from '/@/components/Drawer';
   import DepartmentDrawer from './DepartmentDrawer.vue';
@@ -52,7 +58,7 @@
 
   export default defineComponent({
     name: 'DepartmentManagement',
-    components: { BasicTable, DepartmentDrawer, TableAction, Button, DeleteOutlined },
+    components: { BasicTable, DepartmentDrawer, TableAction, Button },
     setup() {
       const { t } = useI18n();
       const selectedIds = ref<number[] | string[]>();

diff --git a/src/views/sys/dictionary/index.vue b/src/views/sys/dictionary/index.vue
@@ -2,8 +2,13 @@
   <div>
     <BasicTable @register="registerTable">
       <template #tableTitle>
-        <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
-          <template #icon><DeleteOutlined /></template>
+        <Button
+          type="primary"
+          danger
+          preIcon="ant-design:delete-outlined"
+          v-if="showDeleteButton"
+          @click="handleBatchDelete()"
+        >
           {{ t('common.delete') }}
         </Button>
       </template>
@@ -43,9 +48,10 @@
 </template>
 <script lang="ts">
   import { createVNode, defineComponent, ref } from 'vue';
-  import { Button, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue/lib/icons';
+  import { Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Button } from '/@/components/Button';
 
   import { useDrawer } from '/@/components/Drawer';
   import DictionaryDrawer from './DictionaryDrawer.vue';
@@ -57,7 +63,7 @@
 
   export default defineComponent({
     name: 'DictionaryManagement',
-    components: { BasicTable, DictionaryDrawer, TableAction, Button, DeleteOutlined },
+    components: { BasicTable, DictionaryDrawer, TableAction, Button },
     setup() {
       const { t } = useI18n();
       const selectedIds = ref<number[] | string[]>();

diff --git a/src/views/sys/dictionaryDetail/index.vue b/src/views/sys/dictionaryDetail/index.vue
@@ -2,8 +2,13 @@
   <div>
     <BasicTable @register="registerTable" :searchInfo="searchInfo">
       <template #tableTitle>
-        <Button type="primary" danger v-if="showDeleteButton" @click="handleBatchDelete()">
-          <template #icon><DeleteOutlined /></template>
+        <Button
+          type="primary"
+          danger
+          preIcon="ant-design:delete-outlined"
+          v-if="showDeleteButton"
+          @click="handleBatchDelete()"
+        >
           {{ t('common.delete') }}
         </Button>
       </template>
@@ -39,9 +44,10 @@
 </template>
 <script lang="ts">
   import { createVNode, defineComponent, reactive, ref, unref } from 'vue';
-  import { Button, Modal } from 'ant-design-vue';
-  import { ExclamationCircleOutlined, DeleteOutlined } from '@ant-design/icons-vue/lib/icons';
+  import { Modal } from 'ant-design-vue';
+  import { ExclamationCircleOutlined } from '@ant-design/icons-vue/lib/icons';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
+  import { Button } from '/@/components/Button';
 
   import { useDrawer } from '/@/components/Drawer';
   import DictionaryDetailDrawer from './DictionaryDetailDrawer.vue';
@@ -53,7 +59,7 @@
 
   export default defineComponent({
     name: 'DictionaryDetailManagement',
-    components: { BasicTable, DictionaryDetailDrawer, TableAction, Button, DeleteOutlined },
+    components: { BasicTable, DictionaryDetailDrawer, TableAction, Button },
     setup() {
       const { t } = useI18n();
       const selectedIds = ref<number[] | string[]>();