feat(jnh): 添加批量导入功能和相关组件

- 新增getUploadUrl API接口用于获取上传URL
- 创建import.vue组件实现批量导入功能
- 在index.vue中添加批量导入按钮和弹窗调用逻辑
- 调整页面样式和表单布局

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,
+	});
+};

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>

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>