common/ruoyiflex-elementplus-ts
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

演示模块增加导入功能

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/api/mf/product/types.ts
View File

@ -1,8 +1,8 @@
export interface ProductVO extends BaseEntity {
/**
* 父产品id
* 产品编号
*/
parentId: string | number;
productId: string | number;
/**
* 产品名称
@ -19,20 +19,20 @@ export interface ProductVO extends BaseEntity {
*/
status: string;
/**
* 子对象
*/
children: ProductVO[];
}
/**
* 子树对象
*/
children: ProductVO[];
}
export interface ProductForm {
export interface ProductForm {
/**
* 产品id
* 产品编号
*/
productId?: string | number;
/**
* 父产品id
* 上级编号
*/
parentId?: string | number;
@ -56,9 +56,9 @@ export interface ProductForm {
*/
version?: number;
}
}
export interface ProductQuery {
export interface ProductQuery {
/**
* 产品名称
*/
@ -73,4 +73,4 @@ export interface ProductQuery {
* 日期范围参数
*/
params?: any;
}
}

19
src/api/mf/student/types.ts
View File

@ -1,4 +1,9 @@
export interface StudentVO extends BaseEntity {
/**
* 编号
*/
studentId: string | number;
/**
* 学生名称
*/
@ -29,9 +34,9 @@ export interface StudentVO extends BaseEntity {
*/
studentBirthday: string;
}
}
export interface StudentForm {
export interface StudentForm {
/**
* 编号
*/
@ -72,10 +77,9 @@ export interface StudentForm {
*/
version?: number;
}
export interface StudentQuery extends PageQuery {
}
export interface StudentQuery extends PageQuery {
/**
* 学生名称
*/
@ -90,7 +94,4 @@ export interface StudentQuery extends PageQuery {
* 日期范围参数
*/
params?: any;
}
}

231
src/views/mf/product/index.vue
View File

@ -30,6 +30,12 @@
<el-col :span="1.5">
<el-button type="primary" plain icon="Plus" @click="handleAdd()" v-hasPermi="['mf:product:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="Top" @click="handleImport()" v-hasPermi="['mf:product:import']">导入</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="Download" @click="handleExport()" v-hasPermi="['mf:product:export']">导出</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="info" plain icon="Sort" @click="handleToggleExpandAll">展开/折叠</el-button>
</el-col>
@ -69,13 +75,13 @@
<!-- 添加或修改产品树对话框 -->
<el-dialog :title="dialog.title" v-model="dialog.visible" width="500px" append-to-body>
<el-form ref="productFormRef" :model="form" :rules="rules" label-width="80px">
<el-form-item label="父产品id" prop="parentId">
<el-form-item label="上级编号" prop="parentId">
<el-tree-select
v-model="form.parentId"
:data="productOptions"
:props="{ value: 'productId', label: 'productName', children: 'children' }"
value-key="productId"
placeholder="请选择父产品id"
placeholder="请选择上级编号"
check-strictly
/>
</el-form-item>
@ -105,50 +111,105 @@
</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>仅允许导入xls、xlsx格式文件。</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>
<script setup name="Product" lang="ts">
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mf/product";
import { ProductVO, ProductQuery, ProductForm } from '@/api/mf/product/types';
<script setup lang="ts">
import { listProduct, getProduct, delProduct, addProduct, updateProduct } from "@/api/mf/product";
import { ProductVO, ProductQuery, ProductForm } from '@/api/mf/product/types';
import { globalHeaders } from '@/utils/request';
type ProductOption = {
type ProductOption = {
productId: number;
productName: string;
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 productOptions = ref<ProductOption[]>([]);
const buttonLoading = ref(false);
const showSearch = ref(true);
const isExpandAll = ref(true);
const loading = ref(false);
const productList = ref<ProductVO[]>([]);
const productOptions = ref<ProductOption[]>([]);
const buttonLoading = ref(false);
const showSearch = ref(true);
const isExpandAll = ref(true);
const loading = ref(false);
const queryFormRef = ref<ElFormInstance>();
const productFormRef = ref<ElFormInstance>();
const productTableRef = ref<ElTableInstance>()
const queryFormRef = ref<ElFormInstance>();
const productFormRef = ref<ElFormInstance>();
const productTableRef = ref<ElTableInstance>()
const uploadRef = ref<ElUploadInstance>();
const dialog = reactive<DialogOption>({
/*** 导入参数 */
const upload = reactive<ImportOption>({
// 是否显示弹出层（导入）
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,
parentId: undefined,
productName: undefined,
orderNum: undefined,
status: undefined,
version: 0,
};
};
const data = reactive<PageData<ProductForm, ProductQuery>>({
const data = reactive<PageData<ProductForm, ProductQuery>>({
form: {...initFormData},
queryParams: {
productName: undefined,
@ -158,7 +219,7 @@ const data = reactive<PageData<ProductForm, ProductQuery>>({
},
rules: {
parentId: [
{ required: true, message: "父产品id不能为空", trigger: "blur" }
{ required: true, message: "上级编号不能为空", trigger: "blur" }
],
productName: [
{ required: true, message: "产品名称不能为空", trigger: "blur" }
@ -170,12 +231,12 @@ const data = reactive<PageData<ProductForm, ProductQuery>>({
{ required: true, message: "产品状态不能为空", trigger: "change" }
],
}
});
});
const { queryParams, form, rules } = toRefs(data);
const { queryParams, form, rules } = toRefs(data);
/** 查询产品树列表 */
const getList = async () => {
/** 查询产品树列表 */
const getList = async () => {
loading.value = true;
const res = await listProduct(queryParams.value);
const data = proxy?.handleTree<ProductVO>(res.data, 'productId', 'parentId');
@ -183,42 +244,42 @@ const getList = async () => {
productList.value = data;
loading.value = false;
}
};
};
/** 查询产品树下拉树结构 */
const getTreeselect = async () => {
/** 查询产品树下拉树结构 */
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 = () => {
// 取消按钮
const cancel = () => {
reset();
dialog.visible = false;
};
};
// 表单重置
const reset = () => {
// 表单重置
const reset = () => {
form.value = {...initFormData}
productFormRef.value?.resetFields();
};
};
/** 搜索按钮操作 */
const handleQuery = () => {
/** 搜索按钮操作 */
const handleQuery = () => {
getList();
};
};
/** 重置按钮操作 */
const resetQuery = () => {
/** 重置按钮操作 */
const resetQuery = () => {
queryFormRef.value?.resetFields();
handleQuery();
};
};
/** 新增按钮操作 */
const handleAdd = (row?: ProductVO) => {
/** 新增按钮操作 */
const handleAdd = (row?: ProductVO) => {
reset();
getTreeselect();
if (row != null && row.productId) {
@ -228,24 +289,66 @@ const handleAdd = (row?: ProductVO) => {
}
dialog.visible = true;
dialog.title = '添加产品树';
};
};
/** 展开/折叠操作 */
const handleToggleExpandAll = () => {
/** 导出按钮操作 */
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();
}
/** 展开/折叠操作 */
const handleToggleExpandAll = () => {
isExpandAll.value = !isExpandAll.value;
toggleExpandAll(productList.value, isExpandAll.value)
};
};
/** 展开/折叠操作 */
const toggleExpandAll = (data: ProductVO[], status: boolean) => {
/** 展开/折叠操作 */
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) => {
/** 修改按钮操作 */
const handleUpdate = async (row: ProductVO) => {
reset();
await getTreeselect();
if (row != null) {
@ -255,10 +358,10 @@ const handleUpdate = async (row: ProductVO) => {
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = '修改产品树';
};
};
/** 提交按钮 */
const submitForm = () => {
/** 提交按钮 */
const submitForm = () => {
productFormRef.value?.validate(async (valid: boolean) => {
if (valid) {
buttonLoading.value = true;
@ -272,18 +375,18 @@ const submitForm = () => {
getList();
}
});
};
};
/** 删除按钮操作 */
const handleDelete = async (row: ProductVO) => {
/** 删除按钮操作 */
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(() => {
onMounted(() => {
getList();
});
});
</script>

113
src/views/mf/student/index.vue
View File

@ -36,6 +36,9 @@
<el-col :span="1.5">
<el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete()" v-hasPermi="['mf:student:remove']">删除</el-button>
</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-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['mf:student:export']">导出</el-button>
</el-col>
@ -45,7 +48,7 @@
<el-table v-loading="loading" :data="studentList" @selection-change="handleSelectionChange">
<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="studentAge" />
<el-table-column label="爱好" align="center" prop="studentHobby">
@ -89,7 +92,7 @@
/>
</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-item label="学生名称" prop="studentName">
<el-input v-model="form.studentName" placeholder="请输入学生名称" />
@ -145,27 +148,87 @@
</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>仅允许导入xls、xlsx格式文件。</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>
<script setup name="Student" lang="ts">
<script setup lang="ts">
import { listStudent, getStudent, delStudent, addStudent, updateStudent } from '@/api/mf/student';
import { StudentVO, StudentQuery, StudentForm } from '@/api/mf/student/types';
import { globalHeaders } from '@/utils/request';
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 studentList = ref<StudentVO[]>([]);
const buttonLoading = ref(false);
const loading = ref(true);
const showSearch = ref(true);
// 选中数组
const ids = ref<Array<string | number>>([]);
// 非单个禁用
const single = ref(true);
// 非多个禁用
const multiple = ref(true);
// 总条数
const total = ref(0);
const queryFormRef = 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>({
visible: false,
@ -260,17 +323,17 @@ const handleSelectionChange = (selection: StudentVO[]) => {
const handleAdd = () => {
reset();
dialog.visible = true;
dialog.title = "添加学生信息表";
dialog.title = '添加学生信息表';
};
/** 修改按钮操作 */
const handleUpdate = async (row?: StudentVO) => {
reset();
const _studentId = row?.studentId || ids.value[0]
const _studentId = row?.studentId || ids.value[0];
const res = await getStudent(_studentId);
Object.assign(form.value, res.data);
dialog.visible = true;
dialog.title = "修改学生信息表";
dialog.title = '修改学生信息表';
};
/** 提交按钮 */
@ -279,11 +342,11 @@ const submitForm = () => {
if (valid) {
buttonLoading.value = true;
if (form.value.studentId) {
await updateStudent(form.value).finally(() => buttonLoading.value = false);
await updateStudent(form.value).finally(() => (buttonLoading.value = false));
} 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;
await getList();
}
@ -299,6 +362,7 @@ const handleDelete = async (row?: StudentVO) => {
await getList();
};
/** 导出按钮操作 */
const handleExport = () => {
proxy?.download('mf/student/export', {
@ -306,6 +370,37 @@ const handleExport = () => {
}, `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(() => {
getList();
});