Merge pull request #66 from suyuan32/dev

fix: use button in components instead antd
suyuan32 · Jun 20, 2023 · 9268f63 · 9268f63
2 parents 96cf4ec + cc7e120
commit 9268f63
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[]>();