演示模块增加导入功能

src/api/mf/product/types.ts

@@ -1,8 +1,8 @@
 export interface ProductVO extends BaseEntity {
     /**
-   * 父产品id
+    * 产品编号
     */
-  parentId: string | number;
+        productId: string | number;
 
     /**
     * 产品名称
@@ -20,19 +20,19 @@ export interface ProductVO extends BaseEntity {
         status: string;
 
 /**
-   * 子对象
+* 子树对象
 */
 children: ProductVO[];
     }
 
     export interface ProductForm {
         /**
-   * 产品id
+        * 产品编号
         */
         productId?: string | number;
 
         /**
-   * 父产品id
+        * 上级编号
         */
         parentId?: string | number;
 

src/api/mf/student/types.ts

@@ -1,4 +1,9 @@
 export interface StudentVO extends BaseEntity {
+    /**
+    * 编号
+    */
+        studentId: string | number;
+
     /**
     * 学生名称
     */
@@ -75,7 +80,6 @@ export interface StudentForm {
     }
 
     export interface StudentQuery extends PageQuery {
-
         /**
         * 学生名称
         */
@@ -91,6 +95,3 @@ export interface StudentQuery extends PageQuery {
     */
     params?: any;
     }
-
-
-

src/views/mf/product/index.vue

@@ -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,12 +111,50 @@
                 </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">
+<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 = {
             productId: number;
@@ -132,6 +176,23 @@ const loading = ref(false);
     const queryFormRef = ref<ElFormInstance>();
     const productFormRef = ref<ElFormInstance>();
     const productTableRef = ref<ElTableInstance>()
+    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/product/importData'
+    });
 
     const dialog = reactive<DialogOption>({
         visible: false,
@@ -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" }
@@ -230,6 +291,48 @@ const handleAdd = (row?: ProductVO) => {
         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();
+    }
+
     /** 展开/折叠操作 */
     const handleToggleExpandAll = () => {
         isExpandAll.value = !isExpandAll.value;

src/views/mf/student/index.vue

@@ -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();
 });