feat(jnh): 添加批量导入功能和相关组件
- 新增getUploadUrl API接口用于获取上传URL - 创建import.vue组件实现批量导入功能 - 在index.vue中添加批量导入按钮和弹窗调用逻辑 - 调整页面样式和表单布局
This commit is contained in:
parent
ca6621bbda
commit
a88e152594
|
|
@ -35,3 +35,11 @@ export const updateStatus = (params: any) => {
|
|||
params,
|
||||
});
|
||||
};
|
||||
|
||||
export const getUploadUrl = (data: any) => {
|
||||
return request({
|
||||
url: '/jnh/accounts/import',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue