联调辽宁台账维护页面修改冀北 bug

2024-08-15 20:31:02 +08:00
parent fd5458105e
commit 9e1bbe8dc3
23 changed files with 794 additions and 39 deletions
--- a/src/views/pqs/supervise/terminalNetworkDetection/components/terminainal/index.vue
+++ b/src/views/pqs/supervise/terminalNetworkDetection/components/terminainal/index.vue
@@ -21,13 +21,16 @@
        </template>
        <template #operation>
            <el-button icon="el-icon-Plus" type="primary" @click="addFormModel">新增</el-button>
-            <!-- <el-button icon="el-icon-Download" @click="exportEvent" type="primary">导出</el-button> -->
+            <el-button icon="el-icon-Download" type="primary" @click="exportExcelTemplate">模板下载</el-button>
+            <el-button icon="el-icon-Upload" type="primary" @click="importUserData">批量导入</el-button>
        </template>
    </TableHeader>
    <Table ref="tableRef" />

    <!-- 新增弹框 -->
    <addForm ref="addForms" @onSubmit="tableStore.index()"></addForm>
+    <!-- 上传模版 -->
+    <uploadATemplate ref="uploadATemplateRef" />
 </template>
 <script setup lang="ts">
 import { ref, onMounted, provide, watch } from 'vue'
@@ -36,10 +39,11 @@ import Table from '@/components/table/index.vue'
 import TableHeader from '@/components/table/header/index.vue'
 import { useRouter } from 'vue-router'
 import { useDictData } from '@/stores/dictData'
-import { getLoadTypeUserList } from '@/api/process-boot/interference'
+import { downloadDevTemplate } from '@/api/supervision-boot/userReport/form'
 import { ElMessage } from 'element-plus'
 import { ElMessageBox } from 'element-plus/es'
 import { cancelTerminalFormData } from '@/api/supervision-boot/terminal/index'
+import uploadATemplate from './uploadATemplate.vue'
 import addForm from './addForm.vue'
 import { useAdminInfo } from '@/stores/adminInfo'
 //获取登陆用户姓名和部门
@@ -51,6 +55,7 @@ const tableRef = ref()
 const areaOptionList = dictData.getBasicData('jibei_area')
 const statusSelect = dictData.statusSelect()
 const ruleFormRef = ref()
+const uploadATemplateRef = ref()
 const show: any = ref(false)
 const fileList = ref([])
 const flag = ref(false)
@@ -260,23 +265,26 @@ const cancelLeave = async (row: any) => {
    // 加载数据
    tableStore.index()
 }
-const exportEvent = () => {
-    let form = JSON.parse(JSON.stringify(tableStore.table.params))
-    form.pageNum = 1
-    form.pageSize = tableStore.table.total
-    getLoadTypeUserList(form).then(res => {
-        tableRef.value.getRef().exportData({
-            filename: '未建档非线性用户', // 文件名字
-            sheetName: 'Sheet1',
-            type: 'xlsx', //导出文件类型 xlsx 和 csv
-            useStyle: true,
-            data: res.data.records, // 数据源 // 过滤那个字段导出
-            columnFilterMethod: function (column: any) {
-                return !(column.$columnIndex === 0)
-            }
+
+//导出模板
+const exportExcelTemplate = () => {
+    downloadDevTemplate().then((res: any) => {
+        let blob = new Blob([res], {
+            type: 'application/vnd.ms-excel'
        })
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = '终端入网检测模板'
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
    })
 }
+//批量导入用户数据
+const importUserData = () => {
+    uploadATemplateRef.value.open('导入终端入网检测')
+}
 onMounted(() => {
    tableStore.index()
 })
--- a/src/views/pqs/supervise/terminalNetworkDetection/components/terminainal/uploadATemplate.vue
+++ b/src/views/pqs/supervise/terminalNetworkDetection/components/terminainal/uploadATemplate.vue
@@ -0,0 +1,147 @@
+<template>
+    <el-dialog
+        draggable
+        class="cn-operate-dialog"
+        v-model="eventDataUploadVisible"
+        :title="title"
+        style="width: 415px"
+        top="25vh"
+    >
+        <el-scrollbar>
+            <el-form :inline="false" :model="form" label-width="120px" ref="formRef">
+                <el-form-item label="用户数据文件">
+                    <el-upload
+                        v-model:file-list="fileList"
+                        ref="uploadEventData"
+                        action=""
+                        :limit="1"
+                        :on-exceed="handleExceed"
+                        :auto-upload="false"
+                        :on-change="choose"
+                    >
+                        <template #trigger>
+                            <el-button type="primary">选择数据文件</el-button>
+                        </template>
+                    </el-upload>
+                </el-form-item>
+            </el-form>
+        </el-scrollbar>
+        <template #footer>
+            <span class="dialog-footer">
+                <el-button @click="eventDataUploadVisible = false">取消</el-button>
+                <el-button type="primary" @click="submit">确认</el-button>
+            </span>
+        </template>
+    </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, inject } from 'vue'
+import TableStore from '@/utils/tableStore'
+import { ElMessage } from 'element-plus'
+import type { UploadInstance, UploadProps, UploadRawFile, UploadUserFile } from 'element-plus'
+import { genFileId } from 'element-plus'
+import { deVReportImportSensitive } from '@/api/supervision-boot/userReport/form'
+
+const fileList = ref<UploadUserFile[]>([])
+
+const formRef = ref()
+const tableStore = inject('tableStore') as TableStore
+const eventDataUploadVisible = ref(false)
+const title = ref('')
+const uploadEventData = ref<UploadInstance>()
+
+// 注意不要和表单ref的命名冲突
+const form = reactive({
+    file: null
+})
+
+//弹出界面，默认选择用户的第一个生产线的第一条进线进行数据导入
+const open = async (text: string) => {
+    title.value = text
+    resetForm()
+    form.file = null
+    fileList.value = []
+    eventDataUploadVisible.value = true
+}
+
+//重置表单内容
+const resetForm = () => {
+    if (formRef.value) {
+        formRef.value.resetFields()
+    }
+}
+
+/**
+ * 选择待上传文件
+ */
+const choose = (e: any) => {
+    form.file = e.raw
+}
+const handleExceed: UploadProps['onExceed'] = files => {
+    uploadEventData.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    uploadEventData.value!.handleStart(file)
+    fileList.value = [{ name: file.name, url: '' }]
+}
+
+/**
+ * 提交用户表单数据
+ */
+const submit = async () => {
+    if (form.file) {
+        formRef.value.validate(async (valid: any) => {
+            if (valid) {
+                let data = new FormData()
+                data.append('file', form.file)
+                await deVReportImportSensitive(data)
+                    .then(res => handleImportResponse(title.value, res))
+                    .finally(() => {
+                        tableStore.index()
+                        eventDataUploadVisible.value = false
+                    })
+            }
+        })
+    } else {
+        ElMessage.error('请选择数据文件')
+    }
+}
+
+async function handleImportResponse(title: any, res: any) {
+    if (res.type === 'application/json') {
+        const fileReader = new FileReader()
+        fileReader.onloadend = () => {
+            try {
+                const jsonData = JSON.parse(fileReader.result)
+                if (jsonData.code === 'A0000') {
+                    ElMessage.success('导入成功')
+                } else {
+                    ElMessage.error('导入失败，请查看下载附件！')
+                }
+            } catch (err) {
+                console.log(err)
+            }
+        }
+        fileReader.readAsText(res)
+    } else {
+        ElMessage.error('导入失败，请查看下载附件！')
+        let blob = new Blob([res], { type: 'application/vnd.ms-excel' })
+        const url = window.URL.createObjectURL(blob)
+        const link = document.createElement('a')
+        link.href = url
+        link.download = '终端入网检测失败列表'
+        document.body.appendChild(link)
+        link.click()
+        link.remove()
+    }
+}
+
+defineExpose({ open })
+</script>
+
+<style scoped>
+.el-form-item__content div {
+    width: 100% !important;
+}
+</style>