From a88e152594bf4971f2f906c1b18ca82b68171f3f Mon Sep 17 00:00:00 2001
From: "34701892@qq.com" <34701892@qq.com>
Date: Sat, 13 Dec 2025 12:20:18 +0800
Subject: [PATCH] =?UTF-8?q?feat(jnh):=20=E6=B7=BB=E5=8A=A0=E6=89=B9?=
 =?UTF-8?q?=E9=87=8F=E5=AF=BC=E5=85=A5=E5=8A=9F=E8=83=BD=E5=92=8C=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增getUploadUrl API接口用于获取上传URL
- 创建import.vue组件实现批量导入功能
- 在index.vue中添加批量导入按钮和弹窗调用逻辑
- 调整页面样式和表单布局
---
 src/api/jnh/index.ts           |  8 ++++
 src/views/pages/jnh/import.vue | 86 ++++++++++++++++++++++++++++++++++
 src/views/pages/jnh/index.vue  | 25 +++++++---
 3 files changed, 112 insertions(+), 7 deletions(-)
 create mode 100644 src/views/pages/jnh/import.vue

diff --git a/src/api/jnh/index.ts b/src/api/jnh/index.ts
index cd4312f..b4995b2 100644
--- a/src/api/jnh/index.ts
+++ b/src/api/jnh/index.ts
@@ -35,3 +35,11 @@ export const updateStatus = (params: any) => {
 		params,
 	});
 };
+
+export const getUploadUrl = (data: any) => {
+	return request({
+		url: '/jnh/accounts/import',
+		method: 'post',
+		data,
+	});
+};
diff --git a/src/views/pages/jnh/import.vue b/src/views/pages/jnh/import.vue
new file mode 100644
index 0000000..17b2f21
--- /dev/null
+++ b/src/views/pages/jnh/import.vue
@@ -0,0 +1,86 @@
+<template>
+	<div class="index">
+		<el-dialog v-model="dialogTableVisible" title="批量导入" width="600" @closed="closeDialog">
+			<el-button>下载标准模版</el-button>
+
+			<text v-if="errorMsg" style="color: red">{{ errorMsg }}</text>
+			<!-- :http-request="uploadAction" -->
+			<!-- :action="baseUrl + '/jnh/accounts/import'" -->
+			<el-upload class="upload" drag :action="baseUrl + '/jnh/accounts/import'" accept=".xlsx,.xls" :on-success="handleSuccess">
+				<div class="upload_text">点击或拖拽文件至此处导入</div>
+				<div class="upload_tips">支持格式.xlsx/.xls，文件大小≤10MB</div>
+			</el-upload>
+
+			<template #footer>
+				<div class="dialog-footer">
+					<el-button @click="close">取消</el-button>
+					<el-button type="primary" @click="submit()"> 确认 </el-button>
+				</div>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script setup lang="ts" name="loginIndex">
+import { onMounted, reactive, ref } from 'vue';
+import { NextLoading } from '/@/utils/loading';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { getUploadUrl } from '/@/api/jnh';
+
+const baseUrl = ref(import.meta.env.VITE_API_UR);
+const emit = defineEmits(['close']);
+const rules = reactive({
+	name: [{ required: true, message: '必须填写姓名', trigger: 'blur' }],
+	mobile: [{ required: true, message: '必须填写手机号码', trigger: 'blur' }],
+});
+
+const form = ref({});
+const dialogTableVisible = ref(false);
+
+function open(data) {
+	dialogTableVisible.value = true;
+	if (data) {
+		form.value = data;
+	}
+}
+function close() {
+	dialogTableVisible.value = false;
+	emit('close');
+}
+
+const errorMsg = ref('');
+function handleSuccess(res) {
+	console.log('🚀 ~ handleSuccess ~ res:', res);
+	if (res.code === 200) {
+		ElMessage.success('导入成功');
+		errorMsg.value = res.data;
+	}
+}
+
+// 页面加载时
+onMounted(() => {
+	NextLoading.done();
+});
+
+defineExpose({
+	open,
+	close,
+});
+</script>
+
+<style scoped lang="scss">
+.upload {
+	margin-top: 20px;
+}
+
+.upload_text {
+	font-size: 14px;
+	color: #303133;
+}
+
+.upload_tips {
+	font-size: 12px;
+	color: #606266;
+	margin-top: 10px;
+}
+</style>
diff --git a/src/views/pages/jnh/index.vue b/src/views/pages/jnh/index.vue
index ae96073..c1f4342 100644
--- a/src/views/pages/jnh/index.vue
+++ b/src/views/pages/jnh/index.vue
@@ -2,12 +2,13 @@
 	<div class="index">
 		<div class="form">
 			<div class="form_button">
-				<el-button type="primary" icon="Plus" @click="addOpen">创建</el-button>
+				<el-button size="mini" @click="addOpen">创建账号</el-button>
+				<el-button type="primary" size="mini" @click="addImport">批量导入</el-button>
 			</div>
 
 			<el-form class="form_content">
 				<el-form-item label="手机号" prop="mobile">
-					<el-input v-model="form.mobile" placeholder="输入手机号进行搜索" class="input">
+					<el-input v-model="form.mobile" placeholder="请输入手机号" class="input">
 						<template #append>
 							<el-button icon="Search" @click="getData" />
 						</template>
@@ -15,15 +16,15 @@
 				</el-form-item>
 
 				<el-form-item label="部门" prop="department">
-					<el-input v-model="form.department" placeholder="输入部门进行搜索" class="input">
+					<el-input v-model="form.department" placeholder="请输入部门" class="input">
 						<template #append>
-							<el-button icon="Search" @click="seagetDatarch" />
+							<el-button icon="Search" @click="getData" />
 						</template>
 					</el-input>
 				</el-form-item>
 
 				<el-form-item label="账号状态" prop="status">
-					<el-select v-model="form.status" placeholder="请选择账号状态" class="input" @change="getData">
+					<el-select v-model="form.status" placeholder="请选择" class="input" style="width: 150px" @change="getData">
 						<el-option label="禁用" :value="0" />
 						<el-option label="启用" :value="1" />
 					</el-select>
@@ -48,6 +49,7 @@
 		</tableComponents>
 
 		<addDialog ref="addDialogRef" @close="getData"></addDialog>
+		<importDialog ref="importDialogRef" @close="getData"></importDialog>
 	</div>
 </template>
 
@@ -58,6 +60,7 @@ import { getAccounts, deleteAccount, updateStatus } from '/@/api/jnh';
 import tableComponents from '/@/components/tableComponents/index.vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import addDialog from '/@/views/pages/jnh/add.vue';
+import importDialog from '/@/views/pages/jnh/import.vue';
 
 const form = reactive({
 	keyword: '',
@@ -87,11 +90,15 @@ const tableData = reactive({
 	size: 20,
 });
 
-const addDialogRef = ref(addDialog);
+const addDialogRef = ref();
 // 新增弹窗打开
 function addOpen(data) {
 	addDialogRef.value.open(data);
 }
+const importDialogRef = ref();
+function addImport(data) {
+	importDialogRef.value.open(data);
+}
 
 async function getData() {
 	let { code, data } = await getAccounts({
@@ -147,7 +154,7 @@ onMounted(() => {
 	margin-bottom: 30px;
 
 	.input {
-		min-width: 150px;
+		width: 200px;
 	}
 
 	.form_content {
@@ -166,5 +173,9 @@ onMounted(() => {
 		font-weight: bold;
 		color: #3e3e3e;
 	}
+
+	.form_button {
+		display: flex;
+	}
 }
 </style>