共通table模版：导入、导出，删除（批量删除）、分页、基础查询条件等接口以及前端的开发

ruoyi-ui/src/api/tablelist/commonTable.js

@@ -53,10 +53,11 @@ export function updateTableData(data) {
 }
 
 // 删除动态表单
-export function delTableData(fId) {
+export function delTableData(data) {
   return request({
-    url: '/dragform/common/batchDelete' + fId,
+    url: '/dragform/common/batchDelete',
     method: 'delete',
+    data: data,
     baseURL: process.env.VUE_APP_BASE_API3
   })
 }

ruoyi-ui/src/views/tablelist/commonTable/listInfo.vue

@@ -1,49 +1,119 @@
 <template>
   <div class="app-container">
-    <Queryfrom :form-vals="templateInfo.where" @getList="getList" ref="mychild" />
+    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
+      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
+                 :action="upload.url + '?updateSupport=' + upload.updateSupport+'&tableName='+tableName"
+                 :disabled="upload.isUploading"
+                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false"
+                 :onChange="handleChange" drag>
+        <i class="el-icon-upload"></i>
+        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+        <div class="el-upload__tip text-center" slot="tip">
+          <!--          <div class="el-upload__tip" slot="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>
+      </el-upload>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitFileForm">确 定</el-button>
+        <el-button @click="upload.open = false">取 消</el-button>
+      </div>
+    </el-dialog>
+    <Queryfrom :form-vals="templateInfo.where" @getList="getList" ref="mychild"/>
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd(sqlkey)">新增
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+        >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate">修改
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+        >修改
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">删除
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+        >删除
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出
+        <el-button
+          plain
+          icon="el-icon-upload2"
+          size="mini"
+          @click="upload.open = true"
+        >导入
         </el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport">导出
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+        >导出
         </el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar :showSearch.sync="showSearch" @queryTable="pageList"></right-toolbar>
     </el-row>
+
+
     <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
-      <el-table-column label="自增主键" align="center" prop="id" />
-      <span v-for="(key, val) in columns">
-        <el-table-column :label="key" align="center" :prop="val" />
+      <el-table-column type="selection" width="55" align="center"/>
+      <span v-for="(key,val) in columns">
+        <el-table-column :label="key" align="center" :prop="val"/>
       </span>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)"
-            v-hasPermi="['system:outsalesdocuments:edit']">修改
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:outsalesdocuments:edit']"
+          >修改
           </el-button>
-          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
-            v-hasPermi="['system:outsalesdocuments:remove']">删除
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:outsalesdocuments:remove']"
+          >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-      @pagination="pageList" />
-
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="pageList"
+    />
     <!-- 添加或修改销售出库单：- 过磅记录生成数据对话框 -->
     <el-dialog :title="title" :visible.sync="open" append-to-body>
       <iframe :src="iframeUrl" width="100%" height="600px" style="border: none;" scrolling="no">
@@ -67,6 +137,8 @@
   </div>
 </template>
 <script>
+import {delTableData, dragTableInfo, listTable, unionListTableData} from "@/api/tablelist/commonTable";
+import {getToken} from "@/utils/auth";
 import { dragTableInfo, listTable, unionListTableData, getInfoBySqlKey } from "@/api/tablelist/commonTable";
 import { getToken } from "@/utils/auth";
 import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
@@ -112,7 +184,7 @@ export default {
         // 设置上传的请求头部
         headers: { Authorization: "Bearer " + getToken() },
         // 上传的地址
-        url: process.env.VUE_APP_BASE_API + "接口地址",
+        url: process.env.VUE_APP_BASE_API3 + "common/uploadData",
       },
       // 排序方式 默认降序
       sortState: true,
@@ -139,6 +211,8 @@ export default {
       queryFromWhere: {},
       // 当前table唯一标识
       sqlkey: null,
+      // 当前表名称
+      tableName: null,
       //存放html代码块
       iframeUrl: '',
     };
@@ -157,11 +231,12 @@ export default {
       // 获取当前表单结构信息
       dragTableInfo({ queryMap: { sqlkey: this.sqlkey } }).then(res => {
         // 得到当前模版信息 --- sql columns queryWhere
-        this.templateInfo = res.data.resultMap
+        this.templateInfo = res.data.resultMap;
+        this.tableName = this.templateInfo.template.dtTableName;
         // 得到查询条件
         this.queryFromWhere = res.data.resultMap.where;
         //  得到当前列表信息
-        this.columns = JSON.parse(this.templateInfo.template.dtColumnName)
+        this.columns = JSON.parse(this.templateInfo.template.dtColumnName);
       }).finally(fes => {
         if (this.templateInfo == {}) return;
         // 调用查询需要携带当前table的唯一标识
@@ -184,13 +259,16 @@ export default {
     },
     // 分页查询
     pageList(row) {
-      console.log(this.queryParams)
+      console.log(row)
       // 调用子组件-》携带子组件参数请求后台
-      this.$refs.mychild.pageList(row);
+      this.$refs.mychild.pageList(row == undefined ? {
+        limit: this.queryParams.pageSize,
+        page: this.queryParams.pageNum
+      } : row);
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
-      this.ids = selection.map((item) => item.userId);
+      this.ids = selection.map((item) => item.id);
       this.single = selection.length != 1;
       this.multiple = !selection.length;
     },
@@ -216,6 +294,7 @@ export default {
         this.iframeUrl = 'data:text/html;charset=utf-8,' + encodeURI(htmlCode);
         this.open = true;
         this.title = "添加信息";
+        this.form.password = this.initPassword;
       });
 
     },
@@ -261,27 +340,46 @@ export default {
      * 删除提示信息语句（标识）
      * */
     handleDelete(row) {
-      const userIds = row.userId || this.ids;
+      let delIds = row.id || this.ids;
+      console.log(delIds)
+      let data = {
+        basicMap: {
+          tableName: this.tableName
+        },
+        conditionMap: {
+          id: delIds.length == 1 ? [delIds] : delIds
+        }
+      }
       this.$modal
-        .confirm('是否确认删除"' + userIds + '"的数据项？')
+        .confirm('是否确认删除"' + delIds + '"的数据项？')
         .then(function () {
-          return delUser(userIds);
+          return delTableData(data);
         })
         .then(() => {
-          this.getList();
+          // 调用子组件查询方法 目的是携带上子组件中的查询参数
+          this.$refs.mychild.pageList();
           this.$modal.msgSuccess("删除成功");
         })
         .catch(() => {
         });
     },
-
-
     /** 导出按钮操作 */
     handleExport() {
+      if (this.ids.length > 0) {
+        this.queryParams['execlMap'] = []
+        this.ids.forEach(item => {
+            this.queryParams.execlMap.push(this.tableList.find(ttem => {
+              return ttem.id === item
+            }))
+          }
+        )
+      }
+      this.queryParams.execlMap = JSON.stringify(this.queryParams.execlMap);
+      console.log(this.queryParams)
       this.download(
-        "导出接口地址",
+        process.env.VUE_APP_BASE_API3 + "dragform/common/export",
         {
-          ...this.queryParams,
+          ...this.queryParams
         },
         `文件名称_${new Date().getTime()}.xlsx`
       );
@@ -294,7 +392,7 @@ export default {
     /** 下载模板操作 */
     importTemplate() {
       this.download(
-        "下载模版地址",
+        process.env.VUE_APP_BASE_API3 + `dragform/common/exportTemplate?tableName=${this.tableName}&sqlkey=${this.sqlkey}`,
         {},
         `下载模版名称${new Date().getTime()}.xlsx`
       );
@@ -313,9 +411,17 @@ export default {
         response.msg +
         "</div>",
         "导入结果",
-        { dangerouslyUseHTMLString: true }
+        {dangerouslyUseHTMLString: true}
       );
-      this.getList();
+      this.$refs.mychild.pageList({limit: this.queryParams.pageSize, page: this.queryParams.pageNum});
+    },
+    //重点在这里
+    handleChange(file, fileList) {
+      file.name = this.tableName + '.' + file.name.split(".")[1]
+      fileList.forEach(item => {
+        item.name = this.tableName + '.' + file.name.split(".")[1]
+      })
+      let newFile = new File([file], this.tableName + '.' + file.name.split(".")[1]); //创建出来也是不可编辑的file对象
     },
     // 提交上传文件
     submitFileForm() {