演示模块增加导入功能

This commit is contained in:
数据小王子 2024-04-12 21:30:40 +08:00
parent 09a3c478ed
commit 7f8bec5bfc
4 changed files with 613 additions and 414 deletions

View File

@ -1,76 +1,76 @@
export interface ProductVO extends BaseEntity { export interface ProductVO extends BaseEntity {
/** /**
* id *
*/ */
parentId: string | number; productId: string | number;
/** /**
* *
*/ */
productName: string; productName: string;
/** /**
* *
*/ */
orderNum: number; orderNum: number;
/** /**
* 0 1 * 0 1
*/ */
status: string; status: string;
/** /**
* *
*/ */
children: ProductVO[]; children: ProductVO[];
} }
export interface ProductForm { export interface ProductForm {
/** /**
* id *
*/ */
productId?: string | number; productId?: string | number;
/** /**
* id *
*/ */
parentId?: string | number; parentId?: string | number;
/** /**
* *
*/ */
productName?: string; productName?: string;
/** /**
* *
*/ */
orderNum?: number; orderNum?: number;
/** /**
* 0 1 * 0 1
*/ */
status?: string; status?: string;
/** /**
* *
*/ */
version?: number; version?: number;
} }
export interface ProductQuery { export interface ProductQuery {
/** /**
* *
*/ */
productName?: string; productName?: string;
/** /**
* 0 1 * 0 1
*/ */
status?: string; status?: string;
/** /**
* *
*/ */
params?: any; params?: any;
} }

View File

@ -1,96 +1,97 @@
export interface StudentVO extends BaseEntity { export interface StudentVO extends BaseEntity {
/** /**
* *
*/ */
studentName: string; studentId: string | number;
/** /**
* *
*/ */
studentAge: number; studentName: string;
/** /**
* 0 1 2 *
*/ */
studentHobby: string; studentAge: number;
/** /**
* 1 2 3 * 0 1 2
*/ */
studentGender: string; studentHobby: string;
/** /**
* 0 1 * 1 2 3
*/ */
studentStatus: string; studentGender: string;
/** /**
* * 0 1
*/ */
studentBirthday: string; studentStatus: string;
} /**
*
*/
studentBirthday: string;
export interface StudentForm { }
/**
*
*/
studentId?: string | number;
/** export interface StudentForm {
* /**
*/ *
studentName?: string; */
studentId?: string | number;
/** /**
* *
*/ */
studentAge?: number; studentName?: string;
/** /**
* 0 1 2 *
*/ */
studentHobby?: string; studentAge?: number;
/** /**
* 1 2 3 * 0 1 2
*/ */
studentGender?: string; studentHobby?: string;
/** /**
* 0 1 * 1 2 3
*/ */
studentStatus?: string; studentGender?: string;
/** /**
* * 0 1
*/ */
studentBirthday?: string; studentStatus?: string;
/** /**
* *
*/ */
version?: number; studentBirthday?: string;
} /**
*
*/
version?: number;
export interface StudentQuery extends PageQuery { }
/**
*
*/
studentName?: string;
/**
* 0 1
*/
studentStatus?: string;
/**
*
*/
params?: any;
}
export interface StudentQuery extends PageQuery {
/**
*
*/
studentName?: string;
/**
* 0 1
*/
studentStatus?: string;
/**
*
*/
params?: any;
}

View File

@ -1,289 +1,392 @@
<template> <template>
<div class="p-2"> <div class="p-2">
<transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave"> <transition :enter-active-class="proxy?.animate.searchAnimate.enter" :leave-active-class="proxy?.animate.searchAnimate.leave">
<div class="search" v-show="showSearch"> <div class="search" v-show="showSearch">
<el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px"> <el-form :model="queryParams" ref="queryFormRef" :inline="true" label-width="68px">
<el-form-item label="产品名称" prop="productName"> <el-form-item label="产品名称" prop="productName">
<el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable style="width: 240px" @keyup.enter="handleQuery" /> <el-input v-model="queryParams.productName" placeholder="请输入产品名称" clearable style="width: 240px" @keyup.enter="handleQuery" />
</el-form-item> </el-form-item>
<el-form-item label="产品状态" prop="status"> <el-form-item label="产品状态" prop="status">
<el-select v-model="queryParams.status" placeholder="请选择产品状态" clearable style="width: 240px"> <el-select v-model="queryParams.status" placeholder="请选择产品状态" clearable style="width: 240px">
<el-option <el-option
v-for="dict in sys_student_status" v-for="dict in sys_student_status"
:key="dict.value" :key="dict.value"
:label="dict.label" :label="dict.label"
:value="dict.value" :value="dict.value"
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
<el-button icon="Refresh" @click="resetQuery">重置</el-button> <el-button icon="Refresh" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</div> </div>
</transition> </transition>
<el-card shadow="never"> <el-card shadow="never">
<template #header> <template #header>
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['mf:product:add']">新增</el-button> <el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['mf:product:add']">新增</el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button> <el-button type="success" plain icon="Top" @click="handleImport()" v-hasPermi="['mf:product:import']">导入</el-button>
</el-col> </el-col>
<right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar> <el-col :span="1.5">
</el-row> <el-button type="warning" plain icon="Download" @click="handleExport()" v-hasPermi="['mf:product:export']">导出</el-button>
</template> </el-col>
<el-table <el-col :span="1.5">
v-loading="loading" <el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
:data="productList" </el-col>
row-key="productId" <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
:default-expand-all="isExpandAll" </el-row>
:tree-props="{children: 'children', hasChildren: 'hasChildren'}" </template>
ref="productTableRef" <el-table
> v-loading="loading"
<el-table-column label="产品名称" align="center" prop="productName" /> :data="productList"
<el-table-column label="显示顺序" align="center" prop="orderNum" /> row-key="productId"
<el-table-column label="产品状态" align="center" prop="status"> :default-expand-all="isExpandAll"
<template #default="scope"> :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
<dict-tag :options="sys_student_status" :value="scope.row.status"/> ref="productTableRef"
</template> >
</el-table-column> <el-table-column label="产品名称" align="center" prop="productName" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column label="显示顺序" align="center" prop="orderNum" />
<template #default="scope"> <el-table-column label="产品状态" align="center" prop="status">
<el-tooltip content="修改" placement="top"> <template #default="scope">
<el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mf:product:edit']" /> <dict-tag :options="sys_student_status" :value="scope.row.status"/>
</el-tooltip> </template>
<el-tooltip content="新增" placement="top"> </el-table-column>
<el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['mf:product:add']" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
</el-tooltip> <template #default="scope">
<el-tooltip content="删除" placement="top"> <el-tooltip content="修改" placement="top">
<el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mf:product:remove']" /> <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['mf:product:edit']" />
</el-tooltip> </el-tooltip>
</template> <el-tooltip content="新增" placement="top">
</el-table-column> <el-button link type="primary" icon="Plus" @click="handleAdd(scope.row)" v-hasPermi="['mf:product:add']" />
</el-table> </el-tooltip>
</el-card> <el-tooltip content="删除" placement="top">
<!-- 添加或修改产品树对话框 --> <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['mf:product:remove']" />
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> </el-tooltip>
<el-form ref="productFormRef" :model="form" :rules="rules" label-width="80px"> </template>
<el-form-item label="父产品id" prop="parentId"> </el-table-column>
<el-tree-select </el-table>
v-model="form.parentId" </el-card>
:data="productOptions" <!-- 添加或修改产品树对话框 -->
:props="{ value: 'productId', label: 'productName', children: 'children' }" <el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
value-key="productId" <el-form ref="productFormRef" :model="form" :rules="rules" label-width="80px">
placeholder="请选择父产品id" <el-form-item label="上级编号" prop="parentId">
check-strictly <el-tree-select
/> v-model="form.parentId"
</el-form-item> :data="productOptions"
<el-form-item label="产品名称" prop="productName"> :props="{ value: 'productId', label: 'productName', children: 'children' }"
<el-input v-model="form.productName" placeholder="请输入产品名称" /> value-key="productId"
</el-form-item> placeholder="请选择上级编号"
<el-form-item label="显示顺序" prop="orderNum"> check-strictly
<el-input v-model="form.orderNum" placeholder="请输入显示顺序" /> />
</el-form-item> </el-form-item>
<el-form-item label="产品状态" prop="status"> <el-form-item label="产品名称" prop="productName">
<el-radio-group v-model="form.status"> <el-input v-model="form.productName" placeholder="请输入产品名称" />
<el-radio </el-form-item>
v-for="dict in sys_student_status" <el-form-item label="显示顺序" prop="orderNum">
:key="dict.value" <el-input v-model="form.orderNum" placeholder="请输入显示顺序" />
:label="dict.value" </el-form-item>
>{{dict.label}}</el-radio> <el-form-item label="产品状态" prop="status">
</el-radio-group> <el-radio-group v-model="form.status">
</el-form-item> <el-radio
<el-form-item label="乐观锁" prop="version" v-show="false"> v-for="dict in sys_student_status"
<el-input v-model="form.version" placeholder="请输入乐观锁" /> :key="dict.value"
</el-form-item> :label="dict.value"
</el-form> >{{dict.label}}</el-radio>
<template #footer> </el-radio-group>
<div class="dialog-footer"> </el-form-item>
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button> <el-form-item label="乐观锁" prop="version" v-show="false">
<el-button @click="cancel"> </el-button> <el-input v-model="form.version" placeholder="请输入乐观锁" />
</div> </el-form-item>
</template> </el-form>
</el-dialog> <template #footer>
</div> <div class="dialog-footer">
<el-button :loading="buttonLoading" type="primary" @click="submitForm"> </el-button>
<el-button @click="cancel"> </el-button>
</div>
</template>
</el-dialog>
<!-- 导入对话框 -->
<el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
<el-upload
ref="uploadRef"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload">
<i-ep-upload-filled />
</el-icon>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<template #tip>
<div class="text-center el-upload__tip">
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的产品树数据
</div>
<span>仅允许导入xlsxlsx格式文件</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板 </el-link>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</template>
</el-dialog>
</div>
</template> </template>
<script setup name="Product" lang="ts"> <script setup lang="ts">
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mf/product"; import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mf/product";
import { ProductVO, ProductQuery, ProductForm } from '@/api/mf/product/types'; import { ProductVO, ProductQuery, ProductForm } from '@/api/mf/product/types';
import { globalHeaders } from '@/utils/request';
type ProductOption = { type ProductOption = {
productId: number; productId: number;
productName: string; productName: string;
children?: ProductOption[]; children?: ProductOption[];
}; };
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_student_status } = toRefs<any>(proxy?.useDict('sys_student_status')); const { sys_student_status } = toRefs<any>(proxy?.useDict('sys_student_status'));
const productList = ref<ProductVO[]>([]); const productList = ref<ProductVO[]>([]);
const productOptions = ref<ProductOption[]>([]); const productOptions = ref<ProductOption[]>([]);
const buttonLoading = ref(false); const buttonLoading = ref(false);
const showSearch = ref(true); const showSearch = ref(true);
const isExpandAll = ref(true); const isExpandAll = ref(true);
const loading = ref(false); const loading = ref(false);
const queryFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>();
const productFormRef = ref<ElFormInstance>(); const productFormRef = ref<ElFormInstance>();
const productTableRef = ref<ElTableInstance>() const productTableRef = ref<ElTableInstance>()
const uploadRef = ref<ElUploadInstance>();
const dialog = reactive<DialogOption>({ /*** 导入参数 */
visible: false, const upload = reactive<ImportOption>({
title: '' //
}); open: false,
//
title: '',
//
isUploading: false,
//
updateSupport: 1,
//
headers: globalHeaders(),
//
url: import.meta.env.VITE_APP_BASE_API + '/mf/product/importData'
});
const dialog = reactive<DialogOption>({
visible: false,
title: ''
});
const initFormData: ProductForm = { const initFormData: ProductForm = {
productId: undefined, productId: undefined,
parentId: undefined, parentId: undefined,
productName: undefined, productName: undefined,
orderNum: undefined, orderNum: undefined,
status: undefined, status: undefined,
version: 0, version: 0,
}; };
const data = reactive<PageData<ProductForm, ProductQuery>>({ const data = reactive<PageData<ProductForm, ProductQuery>>({
form: {...initFormData}, form: {...initFormData},
queryParams: { queryParams: {
productName: undefined, productName: undefined,
status: undefined, status: undefined,
params: { params: {
}
},
rules: {
parentId: [
{ required: true, message: "上级编号不能为空", trigger: "blur" }
],
productName: [
{ required: true, message: "产品名称不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "显示顺序不能为空", trigger: "blur" }
],
status: [
{ required: true, message: "产品状态不能为空", trigger: "change" }
],
}
});
const { queryParams, form, rules } = toRefs(data);
/** 查询产品树列表 */
const getList = async () => {
loading.value = true;
const res = await listProduct(queryParams.value);
const data = proxy?.handleTree<ProductVO>(res.data, 'productId', 'parentId');
if (data) {
productList.value = data;
loading.value = false;
}
};
/** 查询产品树下拉树结构 */
const getTreeselect = async () => {
const res = await listProduct();
productOptions.value = [];
const data: ProductOption = { productId: 0, productName: '顶级节点', children: [] };
data.children = proxy?.handleTree<ProductOption>(res.data, 'productId', 'parentId');
productOptions.value.push(data);
};
//
const cancel = () => {
reset();
dialog.visible = false;
};
//
const reset = () => {
form.value = {...initFormData}
productFormRef.value?.resetFields();
};
/** 搜索按钮操作 */
const handleQuery = () => {
getList();
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 新增按钮操作 */
const handleAdd = (row?: ProductVO) => {
reset();
getTreeselect();
if (row != null && row.productId) {
form.value.parentId = row.productId;
} else {
form.value.parentId = 0;
}
dialog.visible = true;
dialog.title = '添加产品树';
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download(
'mf/product/export',
{
...queryParams.value
},
`product.xlsx`
);
};
/** 导入按钮操作 */
const handleImport = () => {
upload.title = '产品树导入';
upload.open = true;
};
/** 下载模板操作 */
const importTemplate = () => {
proxy?.download('mf/product/importTemplate', {}, `product_template.xlsx`);
};
/**文件上传中处理 */
const handleFileUploadProgress = () => {
upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: UploadFile) => {
upload.open = false;
upload.isUploading = false;
uploadRef.value?.handleRemove(file);
ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
dangerouslyUseHTMLString: true
});
getList();
};
/** 提交上传文件 */
function submitFileForm() {
uploadRef.value?.submit();
} }
},
rules: {
parentId: [
{ required: true, message: "父产品id不能为空", trigger: "blur" }
],
productName: [
{ required: true, message: "产品名称不能为空", trigger: "blur" }
],
orderNum: [
{ required: true, message: "显示顺序不能为空", trigger: "blur" }
],
status: [
{ required: true, message: "产品状态不能为空", trigger: "change" }
],
}
});
const { queryParams, form, rules } = toRefs(data); /** 展开/折叠操作 */
const handleToggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
toggleExpandAll(productList.value, isExpandAll.value)
};
/** 查询产品树列表 */ /** 展开/折叠操作 */
const getList = async () => { const toggleExpandAll = (data: ProductVO[], status: boolean) => {
loading.value = true; data.forEach((item) => {
const res = await listProduct(queryParams.value); productTableRef.value?.toggleRowExpansion(item, status)
const data = proxy?.handleTree<ProductVO>(res.data, 'productId', 'parentId'); if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
if (data) { })
productList.value = data; };
loading.value = false;
}
};
/** 查询产品树下拉树结构 */ /** 修改按钮操作 */
const getTreeselect = async () => { const handleUpdate = async (row: ProductVO) => {
const res = await listProduct(); reset();
productOptions.value = []; await getTreeselect();
const data: ProductOption = { productId: 0, productName: '顶级节点', children: [] }; if (row != null) {
data.children = proxy?.handleTree<ProductOption>(res.data, 'productId', 'parentId'); form.value.parentId = row.parentId;
productOptions.value.push(data); }
}; const res = await getProduct(row.productId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改产品树';
};
// /** 提交按钮 */
const cancel = () => { const submitForm = () => {
reset(); productFormRef.value?.validate(async (valid: boolean) => {
dialog.visible = false; if (valid) {
}; buttonLoading.value = true;
if (form.value.productId) {
await updateProduct(form.value).finally(() => buttonLoading.value = false);
} else {
await addProduct(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
getList();
}
});
};
// /** 删除按钮操作 */
const reset = () => { const handleDelete = async (row: ProductVO) => {
form.value = {...initFormData} await proxy?.$modal.confirm('是否确认删除产品树编号为"' + row.productId + '"的数据项?');
productFormRef.value?.resetFields(); loading.value = true;
}; await delProduct(row.productId).finally(() => loading.value = false);
await getList();
proxy?.$modal.msgSuccess('删除成功');
};
/** 搜索按钮操作 */ onMounted(() => {
const handleQuery = () => { getList();
getList(); });
};
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
/** 新增按钮操作 */
const handleAdd = (row?: ProductVO) => {
reset();
getTreeselect();
if (row != null && row.productId) {
form.value.parentId = row.productId;
} else {
form.value.parentId = 0;
}
dialog.visible = true;
dialog.title = '添加产品树';
};
/** 展开/折叠操作 */
const handleToggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
toggleExpandAll(productList.value, isExpandAll.value)
};
/** 展开/折叠操作 */
const toggleExpandAll = (data: ProductVO[], status: boolean) => {
data.forEach((item) => {
productTableRef.value?.toggleRowExpansion(item, status)
if (item.children && item.children.length > 0) toggleExpandAll(item.children, status)
})
};
/** 修改按钮操作 */
const handleUpdate = async (row: ProductVO) => {
reset();
await getTreeselect();
if (row != null) {
form.value.parentId = row.parentId;
}
const res = await getProduct(row.productId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改产品树';
};
/** 提交按钮 */
const submitForm = () => {
productFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
if (form.value.productId) {
await updateProduct(form.value).finally(() => buttonLoading.value = false);
} else {
await addProduct(form.value).finally(() => buttonLoading.value = false);
}
proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false;
getList();
}
});
};
/** 删除按钮操作 */
const handleDelete = async (row: ProductVO) => {
await proxy?.$modal.confirm('是否确认删除产品树编号为"' + row.productId + '"的数据项?');
loading.value = true;
await delProduct(row.productId).finally(() => loading.value = false);
await getList();
proxy?.$modal.msgSuccess('删除成功');
};
onMounted(() => {
getList();
});
</script> </script>

View File

@ -36,6 +36,9 @@
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['mf:student:remove']">删除</el-button> <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['mf:student:remove']">删除</el-button>
</el-col> </el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Top" @click="handleImport()" v-hasPermi="['mf:student:import']">导入</el-button>
</el-col>
<el-col :span="1.5"> <el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mf:student:export']">导出</el-button> <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mf:student:export']">导出</el-button>
</el-col> </el-col>
@ -45,7 +48,7 @@
<el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="55" align="center" />
<el-table-column label="编号" align="center" prop="studentId" v-if="false" /> <el-table-column label="编号" align="center" prop="studentId" v-if="true" />
<el-table-column label="学生名称" align="center" prop="studentName" /> <el-table-column label="学生名称" align="center" prop="studentName" />
<el-table-column label="年龄" align="center" prop="studentAge" /> <el-table-column label="年龄" align="center" prop="studentAge" />
<el-table-column label="爱好" align="center" prop="studentHobby"> <el-table-column label="爱好" align="center" prop="studentHobby">
@ -89,7 +92,7 @@
/> />
</el-card> </el-card>
<!-- 添加或修改学生信息表对话框 --> <!-- 添加或修改学生信息表对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body> <el-dialog :title="dialog.title" v-model="dialog.visible" width="780px" append-to-body>
<el-form ref="studentFormRef" :model="form" :rules="rules" label-width="80px"> <el-form ref="studentFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="学生名称" prop="studentName"> <el-form-item label="学生名称" prop="studentName">
<el-input v-model="form.studentName" placeholder="请输入学生名称" /> <el-input v-model="form.studentName" placeholder="请输入学生名称" />
@ -145,27 +148,87 @@
</div> </div>
</template> </template>
</el-dialog> </el-dialog>
<!-- 导入对话框 -->
<el-dialog v-model="upload.open" :title="upload.title" width="400px" append-to-body>
<el-upload
ref="uploadRef"
:limit="1"
accept=".xlsx, .xls"
:headers="upload.headers"
:action="upload.url + '?updateSupport=' + upload.updateSupport"
:disabled="upload.isUploading"
:on-progress="handleFileUploadProgress"
:on-success="handleFileSuccess"
:auto-upload="false"
drag
>
<el-icon class="el-icon--upload">
<i-ep-upload-filled />
</el-icon>
<div class="el-upload__text">将文件拖到此处<em>点击上传</em></div>
<template #tip>
<div class="text-center el-upload__tip">
<div class="el-upload__tip">
<el-checkbox v-model="upload.updateSupport" />
是否更新已经存在的学生信息表数据
</div>
<span>仅允许导入xlsxlsx格式文件</span>
<el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline" @click="importTemplate">下载模板 </el-link>
</div>
</template>
</el-upload>
<template #footer>
<div class="dialog-footer">
<el-button type="primary" @click="submitFileForm"> </el-button>
<el-button @click="upload.open = false"> </el-button>
</div>
</template>
</el-dialog>
</div> </div>
</template> </template>
<script setup name="Student" lang="ts"> <script setup lang="ts">
import { listStudent, getStudent, delStudent, addStudent, updateStudent } from '@/api/mf/student'; import { listStudent, getStudent, delStudent, addStudent, updateStudent } from '@/api/mf/student';
import { StudentVO, StudentQuery, StudentForm } from '@/api/mf/student/types'; import { StudentVO, StudentQuery, StudentForm } from '@/api/mf/student/types';
import { globalHeaders } from '@/utils/request';
const { proxy } = getCurrentInstance() as ComponentInternalInstance; const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { sys_student_status, sys_user_gender, sys_student_hobby } = toRefs<any>(proxy?.useDict('sys_student_status', 'sys_user_gender', 'sys_student_hobby')); const { sys_student_status, sys_user_gender, sys_student_hobby } = toRefs<any>(proxy?.useDict('sys_student_status', 'sys_user_gender', 'sys_student_hobby'));
//
const studentList = ref<StudentVO[]>([]); const studentList = ref<StudentVO[]>([]);
const buttonLoading = ref(false); const buttonLoading = ref(false);
const loading = ref(true); const loading = ref(true);
const showSearch = ref(true); const showSearch = ref(true);
//
const ids = ref<Array<string | number>>([]); const ids = ref<Array<string | number>>([]);
//
const single = ref(true); const single = ref(true);
//
const multiple = ref(true); const multiple = ref(true);
//
const total = ref(0); const total = ref(0);
const queryFormRef = ref<ElFormInstance>(); const queryFormRef = ref<ElFormInstance>();
const studentFormRef = ref<ElFormInstance>(); const studentFormRef = ref<ElFormInstance>();
const uploadRef = ref<ElUploadInstance>();
/*** 导入参数 */
const upload = reactive<ImportOption>({
//
open: false,
//
title: '',
//
isUploading: false,
//
updateSupport: 1,
//
headers: globalHeaders(),
//
url: import.meta.env.VITE_APP_BASE_API + '/mf/student/importData'
});
const dialog = reactive<DialogOption>({ const dialog = reactive<DialogOption>({
visible: false, visible: false,
@ -260,17 +323,17 @@ const handleSelectionChange = (selection: StudentVO[]) => {
const handleAdd = () => { const handleAdd = () => {
reset(); reset();
dialog.visible = true; dialog.visible = true;
dialog.title = "添加学生信息表"; dialog.title = '添加学生信息表';
}; };
/** 修改按钮操作 */ /** 修改按钮操作 */
const handleUpdate = async (row?: StudentVO) => { const handleUpdate = async (row?: StudentVO) => {
reset(); reset();
const _studentId = row?.studentId || ids.value[0] const _studentId = row?.studentId || ids.value[0];
const res = await getStudent(_studentId); const res = await getStudent(_studentId);
Object.assign(form.value, res.data); Object.assign(form.value, res.data);
dialog.visible = true; dialog.visible = true;
dialog.title = "修改学生信息表"; dialog.title = '修改学生信息表';
}; };
/** 提交按钮 */ /** 提交按钮 */
@ -279,11 +342,11 @@ const submitForm = () => {
if (valid) { if (valid) {
buttonLoading.value = true; buttonLoading.value = true;
if (form.value.studentId) { if (form.value.studentId) {
await updateStudent(form.value).finally(() => buttonLoading.value = false); await updateStudent(form.value).finally(() => (buttonLoading.value = false));
} else { } else {
await addStudent(form.value).finally(() => buttonLoading.value = false); await addStudent(form.value).finally(() => (buttonLoading.value = false));
} }
proxy?.$modal.msgSuccess("修改成功"); proxy?.$modal.msgSuccess('操作成功');
dialog.visible = false; dialog.visible = false;
await getList(); await getList();
} }
@ -299,6 +362,7 @@ const handleDelete = async (row?: StudentVO) => {
await getList(); await getList();
}; };
/** 导出按钮操作 */ /** 导出按钮操作 */
const handleExport = () => { const handleExport = () => {
proxy?.download('mf/student/export', { proxy?.download('mf/student/export', {
@ -306,6 +370,37 @@ const handleExport = () => {
}, `student_${new Date().getTime()}.xlsx`) }, `student_${new Date().getTime()}.xlsx`)
}; };
/** 导入按钮操作 */
const handleImport = () => {
upload.title = '学生信息表导入';
upload.open = true;
};
/** 下载模板操作 */
const importTemplate = () => {
proxy?.download('mf/student/importTemplate', {}, `student_template.xlsx`);
};
/**文件上传中处理 */
const handleFileUploadProgress = () => {
upload.isUploading = true;
};
/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: UploadFile) => {
upload.open = false;
upload.isUploading = false;
uploadRef.value?.handleRemove(file);
ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + '</div>', '导入结果', {
dangerouslyUseHTMLString: true
});
getList();
};
/** 提交上传文件 */
function submitFileForm() {
uploadRef.value?.submit();
}
onMounted(() => { onMounted(() => {
getList(); getList();
}); });