Merge remote-tracking branch 'origin/master'

src/api/system/user/user.ts

@@ -11,6 +11,9 @@ import {
   RoleListGetResultModel,
 } from '../../demo/model/systemModel';
 import { defHttp } from '@/utils/http/axios';
+import {UploadFileParams} from "#/axios";
+import {AxiosProgressEvent} from "axios";
+import {UploadApiResult} from "@/api/sys/model/uploadModel";
 
 enum Api {
   addUser = '/system/user/add',
@@ -21,6 +24,8 @@ enum Api {
   deleteUserApi = '/system/user/deleteLogical/',
   resetUserPwdApi = '/system/user/resetPassword',
   exportApi = '/system/user/export',
+  importTemplateApi = '/system/user/importTemplate',
+  userImportApi = '/system/user/importExcel',
 }
 
 /** 用户列表查询*/
@@ -30,6 +35,21 @@ export const getAccountList = (params: AccountParams) =>
 /** 用户列表导出*/
 export const exportUserList = (params: AccountParams) =>
   defHttp.get<AccountListGetResultModel>({ url: Api.exportApi, params , responseType: 'blob'});
+
+/** 用户导入模板下载*/
+export const downImportTemplate = () =>
+  defHttp.get<any>({ url: Api.importTemplateApi, responseType: 'blob'});
+
+/** 用户导入*/
+export const userImport = (params: UploadFileParams,
+                           onUploadProgress: (progressEvent: AxiosProgressEvent) => void,) =>
+  defHttp.uploadFile<UploadApiResult>(
+    {
+      url: Api.userImportApi,
+      onUploadProgress,
+    },
+    params,
+  );
 /** 用户删除*/
 export const deleteUser = (params?: any) =>
   defHttp.delete<any>({ url: Api.deleteUserApi +params.id });

src/components/Upload/src/BasicUpload.vue

@@ -9,20 +9,20 @@
       >
         {{ t('component.upload.upload') }}
       </a-button>
-      <Tooltip placement="bottom" v-if="showPreview">
-        <template #title>
-          {{ t('component.upload.uploaded') }}
-          <template v-if="fileList.length">
-            {{ fileList.length }}
-          </template>
-        </template>
-        <a-button @click="openPreviewModal">
-          <Icon icon="bi:eye" />
-          <template v-if="fileList.length && showPreviewNumber">
-            {{ fileList.length }}
-          </template>
-        </a-button>
-      </Tooltip>
+<!--      <Tooltip placement="bottom" v-if="showPreview">-->
+<!--        <template #title>-->
+<!--          {{ t('component.upload.uploaded') }}-->
+<!--          <template v-if="fileList.length">-->
+<!--            {{ fileList.length }}-->
+<!--          </template>-->
+<!--        </template>-->
+<!--        <a-button @click="openPreviewModal">-->
+<!--          <Icon icon="bi:eye" />-->
+<!--          <template v-if="fileList.length && showPreviewNumber">-->
+<!--            {{ fileList.length }}-->
+<!--          </template>-->
+<!--        </a-button>-->
+<!--      </Tooltip>-->
     </Space>
     <UploadModal
       v-bind="bindValue"

src/utils/http/axios/index.ts

@@ -256,7 +256,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
         // authentication schemes，e.g: Bearer
         timeout: 10 * 1000,
         // 基础接口地址
-        // baseURL: globSetting.apiUrl,
+        baseURL: globSetting.apiUrl,
 
         // headers: { 'Content-Type': ContentTypeEnum.JSON },
         headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
@@ -279,7 +279,7 @@ function createAxios(opt?: Partial<CreateAxiosOptions>) {
           // 消息提示类型
           errorMessageMode: 'message',
           // 接口地址
-          apiUrl: globSetting.apiUrl,
+          // apiUrl: globSetting.apiUrl,
           // 接口拼接地址
           urlPrefix: urlPrefix,
           //  是否加入时间戳

src/views/system/user/AccountModal.vue

@@ -41,12 +41,16 @@ const { createMessage } = useMessage();
       UserDetailApi(rowId.value).then(res => {
         const form = res.data
         // 数据处理反显用户角色
-        const roleData = res.data.roleIds.split(',')
-        form.roleList = []
-        roleData.forEach(item => {
-          const id = Number(item)
-          form.roleList.push(id)
-        })
+        if(res.data.roleIds) {
+          const roleData = res.data.roleIds.split(',')
+          form.roleList = []
+          roleData.forEach(item => {
+            const id = Number(item)
+            form.roleList.push(id)
+          })
+        }else {
+          form.roleList = []
+        }
         // 塞值
         setFieldsValue({
           ...form,

src/views/system/user/importModal.vue

+<template>
+  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit"  minHeight="150">
+    <div style="display:flex;align-items: center">
+      <div type="info" style="font-size:12px;cursor: pointer" @click="importTemplate">下载模板</div>
+    </div>
+    <div slot="tip" class="el-upload__tip" style="color:red">提示：仅允许导入“xls”或“xlsx”格式文件！</div>
+    <BasicUpload
+      :maxSize="20"
+      :maxNumber="1"
+      @change="handleChange"
+      :api="userImport"
+      class="my-5"
+      :accept="['.xlsx, .xls']"
+    />
+  </BasicModal>
+</template>
+<script lang="ts" setup>
+import {ref, computed, unref, reactive} from 'vue';
+import { BasicModal, useModalInner } from '@/components/Modal';
+import { BasicUpload } from '@/components/Upload';
+import { downloadByData } from '@/utils/file/download';
+import { Tag, Row, Col, Upload, Button,Checkbox } from 'ant-design-vue';
+import {downImportTemplate,userImport} from '@/api/system/user/user'
+
+import { useMessage } from '@/hooks/web/useMessage';
+defineOptions({ name: 'AccountModal' });
+
+const emit = defineEmits(['success', 'register']);
+const { createMessage } = useMessage();
+const isUpdate = ref(true);
+
+
+//初始化弹框
+const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
+  setModalProps({ confirmLoading: false });
+});
+
+const getTitle = computed(() => ('用户导入'));
+
+/** 下载模板*/
+function importTemplate() {
+  downImportTemplate().then((data) => {
+    downloadByData(data, '用户导入模板.xlsx');
+  });
+}
+
+function handleChange(list: string[]) {
+  console.log('aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',list)
+  createMessage.success(`文件上传成功`);
+}
+
+async function handleSubmit() {
+  try {
+    // const values = await validate();
+    setModalProps({ confirmLoading: true });
+    // TODO custom api
+    closeModal();
+    emit('success');
+
+  } finally {
+    setModalProps({ confirmLoading: false });
+  }
+}
+</script>

src/views/system/user/index.vue

@@ -5,6 +5,7 @@
       <template #toolbar>
         <a-button type="primary" @click="handleCreate">新增</a-button>
         <a-button type="primary" @click="handleExport">导出</a-button>
+        <a-button type="primary" @click="handleImport">导入</a-button>
       </template>
       <template #bodyCell="{ column, record }">
         <template v-if="column.key === 'action'">
@@ -37,6 +38,7 @@
     </BasicTable>
     <AccountModal @register="registerModal" @success="handleSuccess" />
     <resetPassword @register="registerResetPassword" @success="handleResetPasswordSuccess" />
+    <importModal @register="registerImport" @success="handleImportSuccess" />
   </PageWrapper>
 </template>
 <script lang="ts" setup>
@@ -48,6 +50,7 @@
   import { useMessage } from '@/hooks/web/useMessage';
   import { useModal } from '@/components/Modal';
   import AccountModal from './AccountModal.vue';
+  import importModal from './importModal.vue';
   import resetPassword from './resetPassword.vue';
   import { columns, searchFormSchema } from './account.data';
   import { useGo } from '@/hooks/web/usePage';
@@ -57,6 +60,7 @@
   const go = useGo();
   const [registerModal, { openModal }] = useModal();
   const [registerResetPassword, { openModal: openResetPasswordModal }] = useModal();
+  const [registerImport, { openModal: openImportModal }] = useModal();
   const searchInfo = reactive<Recordable>({});
   const [registerTable, { reload, updateTableDataRecord, getSearchInfo,getForm }] = useTable({
     title: '用户管理列表',
@@ -101,6 +105,11 @@
       record
     })
   }
+  /** 导入按钮*/
+  function handleImport() {
+    openImportModal(true,{
+    })
+  }
   /** 重置密码弹窗确定按钮*/
   /** 删除按钮*/
   function handleDelete(record: Recordable) {
@@ -114,7 +123,11 @@
     const data = await exportUserList(params);
     downloadByData(data, '用户列表' + '.xlsx');
   }
-
+  /** 导入成功*/
+  function handleImportSuccess() {
+    reload();
+  }
+  /** 新增/编辑成功*/
   function handleSuccess({ isUpdate, values }) {
     if (isUpdate) {
       // 演示不刷新表格直接更新内部数据。