Merge pull request 'feat 测点管理模块' (#18) from dev-xjf into master

Reviewed-on: http://120.26.116.243:3000/root/alert-front/pulls/18

src/api/alert/exa/index.ts

@@ -73,3 +73,7 @@ export function getGroup() {
 export function deletePoint(ItemName: string) {
   return defHttp.delete({ url: `/alert/exa/delete?ItemName=${ItemName}` })
 }
+// 获取导入模板
+export function importTemplate() {
+  return defHttp.get({ url: '/alert/exa/get-import-template', responseType: 'blob' })
+}

src/api/base/upload.ts

@@ -18,3 +18,16 @@ export function uploadApi(params: UploadFileParams, onUploadProgress: (progressE
     params,
   )
 }
+
+/**
+ * @description: Upload interface
+ */
+export function uploadApi_EXA(params: UploadFileParams, onUploadProgress: (progressEvent: AxiosProgressEvent) => void) {
+  return defHttp.uploadFile<UploadApiResult>(
+    {
+      url: 'http://localhost:48080/admin-api/alert/exa/import',
+      onUploadProgress,
+    },
+    params,
+  )
+}

src/components/Upload/src/UploadModal.vue

@@ -132,6 +132,7 @@ async function uploadApiByItem(item: FileItem) {
     )
     item.status = UploadResultStatus.SUCCESS
     item.responseData = data
+    console.log(item)
     return {
       success: true,
       error: null,

src/enums/appEnum.ts

@@ -70,4 +70,5 @@ export enum IconEnum {
   PASSWORD = 'ant-design:key-outlined',
   SETTING = 'ant-design:setting-outlined',
   SEND = 'ant-design:send-outlined',
+  ADDS = 'ant-design:plus-circle-outlined',
 }

src/views/exa/config/CreateBatchModal.vue

@@ -1,60 +1,156 @@
 <script lang="ts" setup>
 import { onBeforeMount, onMounted, ref, unref } from 'vue'
-import { UploadDragger, message } from 'ant-design-vue'
+import { Divider, UploadDragger, message } from 'ant-design-vue'
 import type { UploadChangeParam } from 'ant-design-vue'
 import { InboxOutlined } from '@ant-design/icons-vue'
-
+import { buildUUID } from '@/utils/uuid'
 import { useI18n } from '@/hooks/web/useI18n'
 import { useMessage } from '@/hooks/web/useMessage'
 import { BasicModal, useModalInner } from '@/components/Modal'
-import { createEXAPoint, getGroup } from '@/api/alert/exa'
+import { importTemplate } from '@/api/alert/exa'
+import { downloadByData } from '@/utils/file/download'
+import { uploadApi_EXA } from '@/api/base/upload'
+import { getAccessToken } from '@/utils/auth'
+import type { FileItem } from '@/components/Upload/src/typing'
+import { UploadResultStatus } from '@/components/Upload/src/typing'
 
 const emit = defineEmits(['success', 'register'])
 const { t } = useI18n()
 const { createMessage } = useMessage()
 
 const [registerCreateBatchModal, { setModalProps, closeModal }] = useModalInner(async () => {
+  setModalProps({
+    destroyOnClose: true,
+  })
+})
+const fileList = ref<File[]>([])
 
+const uploadParams = ref({
+  Authorization: `Bearer ${getAccessToken()}`,
+  // 'tenant-id': getTenantId(),
 })
-const fileList = ref([])
+function beforeUpload(file) {
-function handleChange(info: UploadChangeParam) {
+  const isLt30M = file.size / 1024 / 1024 < 30
-  const status = info.file.status
+  if (!isLt30M) {
-  if (status !== 'uploading')
+    createMessage.warning(t('component.upload.maxSizeMultiple', [30]))
-    console.log(info.file, info.fileList)
+    fileList.value = []
-
+
-  if (status === 'done')
+    return false
-    message.success(`${info.file.name} file uploaded successfully.`)
+  }
-  else if (status === 'error')
+
-    message.error(`${info.file.name} file upload failed.`)
+  // 判断上传文件格式
+
+  const extension = file.name.split('.')[1] === 'xls'
+
+  const extension2 = file.name.split('.')[1] === 'xlsx'
+
+  if (!extension && !extension2) {
+    createMessage.warning('导入文件只能是 xls、xlsx格式!')
+    fileList.value = []
+    console.log(fileList)
+
+    return false
+  }
+
+  return false
 }
+async function handleChange({ file, fileList }) {
+  console.log(file, 'file')
+  if (file.status === 'removed') {
+    fileList.value = []
+  }
+  else {
+    // const isLt30M = file.size / 1024 / 1024 < 30
+    // if (!isLt30M)
+    //   createMessage.warning(t('component.upload.maxSizeMultiple', [30]))
+    // else
+    fileList.value = [file]
+  }
+}
+
 function handleDrop(e: DragEvent) {
   console.log(e)
 }
+
+async function importPointTemplate() {
+  const data = await importTemplate()
+  downloadByData(data, 'EXA测点导入模板.xlsx')
+}
+
+async function handleSubmit() {
+  if (fileList.value.length <= 0) {
+    createMessage.warning('请选择上传的资源包')
+
+    return false
+  }
+
+  // 打开loding
+  setModalProps({ loading: true, confirmLoading: true })
+
+  // this.loading = true
+  const file: File = unref(fileList).value[0]
+  const item: FileItem = {
+    file,
+    size: file.size,
+    name: file.name,
+    percent: 0,
+    type: file.name.split('.').pop(),
+    uuid: buildUUID(),
+  }
+  try {
+    item.status = UploadResultStatus.UPLOADING
+    const { data } = await uploadApi_EXA?.(
+      {
+        data: {
+          ...(uploadParams.value || {}),
+        },
+        file: item.file,
+        name: 'file',
+        filename: file.name,
+      },
+      (progressEvent: ProgressEvent) => {
+        const complete = ((progressEvent.loaded / progressEvent.total) * 100) | 0
+        item.percent = complete
+      },
+    )
+    item.status = UploadResultStatus.SUCCESS
+    item.responseData = data
+    emit('success')
+    closeModal()
+    // 关闭loding
+    setModalProps({ loading: false, confirmLoading: false })
+    createMessage.success(`成功创建${data.data.createNames.length}个测点`)
+  }
+  catch (e) {
+    console.log(e)
+    item.status = UploadResultStatus.ERROR
+    closeModal()
+    // 关闭loding
+    setModalProps({ loading: false, confirmLoading: false })
+    createMessage.error(`创建失败,错误原因:${data.data.msg}`)
+  }
+}
 </script>
 
 <template>
   <BasicModal
-    v-bind="$attrs" :min-height="200" :title="t('action.createBatch')" @register="registerCreateBatchModal"
+    v-bind="$attrs" :min-height="100" width="300" :title="t('action.createBatch')"
-    @ok="handleSubmit"
+    @register="registerCreateBatchModal" @ok="handleSubmit"
   >
     <UploadDragger
-      v-model:fileList="fileList"
+      v-model:fileList="fileList" :max-count="1" accept=".xlsx,.xls" :multiple="false" :before-upload="beforeUpload"
-      name="file"
+      @change="handleChange" @drop="handleDrop"
-      :multiple="true"
-      action="/user/import/"
-      @change="handleChange"
-      @drop="handleDrop"
     >
       <p class="ant-upload-drag-icon">
         <inbox-outlined />
       </p>
       <p class="ant-upload-text">
-        Click or drag file to this area to upload
+        点击或拖拽到此区域实现上传
       </p>
       <p class="ant-upload-hint">
-        Support for a single or bulk upload. Strictly prohibit from uploading company data or other
+        只支持上传单个excel文件,请尽量根据模板上传
-        band files
       </p>
     </UploadDragger>
+    <Divider><span style="color: #0B55A4;cursor: pointer" @click="importPointTemplate">下载模板</span></Divider>
   </BasicModal>
 </template>

src/views/exa/config/index.vue

@@ -114,7 +114,7 @@ async function handleDelete(record: Recordable) {
         <a-button v-auth="['system:role:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreate">
           {{ t('action.create') }}
         </a-button>
-        <a-button v-auth="['system:role:create']" type="primary" :pre-icon="IconEnum.ADD" @click="handleCreateBatch">
+        <a-button v-auth="['system:role:create']" type="primary" :pre-icon="IconEnum.ADDS" @click="handleCreateBatch">
           {{ t('action.createBatch') }}
         </a-button>
         <!-- <a-button v-auth="['system:role:create']" :pre-icon="IconEnum.EXPORT" @click="handleExport">
@@ -141,7 +141,7 @@ async function handleDelete(record: Recordable) {
       </template>
     </BasicTable>
     <EXAModal @register="registerModal" @success="reload" />
-    <CreateBatchModal @register="registerCreateBatchModal" />
+    <CreateBatchModal @register="registerCreateBatchModal" @success="reload" />
     <HistoryModal @register="registerHistoryModal" />
   </div>
 </template>