新增解析动态表格模版，封装查询form子组件，分页调用逻辑等

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

@@ -0,0 +1,138 @@
+import request from '@/utils/request'
+
+
+// 查询动态表单列表
+export function listTableData(query) {
+  return request({
+    url: '/dragform/common/selectList',
+    method: 'get',
+    params: query,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 查询动态表单列表
+export function unionListTableData(query) {
+  return request({
+    url: '/dragform/common/getTableList',
+    method: 'get',
+    params: query,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 查询动态表单列表
+export function dragTableInfo(query) {
+  return request({
+    url: '/dragform/common/dragTableInfo',
+    method: 'get',
+    params: query,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+
+// 新增动态表单
+export function addTableData(data) {
+  return request({
+    url: '/dragform/common/batchInsert',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 修改动态表单
+export function updateTableData(data) {
+  return request({
+    url: '/dragform/common/edit',
+    method: 'put',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 删除动态表单
+export function delTableData(fId) {
+  return request({
+    url: '/dragform/common/batchDelete' + fId,
+    method: 'delete',
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+
+// ###  共通查询
+// GET http://localhost:8088/dragform/common/selectList
+//
+//   ### 共通新增
+// POST http://localhost:8088/dragform/common/batchInsert
+//
+//   ### 共通修改
+// PUT http://localhost:8088/dragform/common/edit
+//
+//   ### 共通删除
+// DELETE http://localhost:8088/dragform/common/batchDelete
+//
+//   ### 共通联合查询
+// GET http://localhost:8088/dragform/common/getTableList
+
+
+//
+//   ### 共通导出
+// GET http://localhost:8088/dragform/common/export
+//
+//   ### 共通导出模版
+// GET http://localhost:8088/dragform/common/exportTemplate
+//
+//   ### 共通导入数据
+// POST http://localhost:8088/common/uploadData
+
+
+// 查询动态格列表
+export function listTableTem(query) {
+  return request({
+    url: '/system/table/list',
+    method: 'get',
+    params: query,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 查询动态格详细
+export function getTableTem(tId) {
+  return request({
+    url: '/system/table/' + tId,
+    method: 'get',
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 新增动态格
+export function addTableTem(data) {
+  return request({
+    url: '/system/table',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 修改动态格
+export function updateTableTem(data) {
+  return request({
+    url: '/system/table',
+    method: 'put',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 删除动态格
+export function delTableTem(tId) {
+  return request({
+    url: '/system/table/' + tId,
+    method: 'delete',
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}

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

@@ -0,0 +1,367 @@
+<template>
+  <div class="app-container">
+    <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"
+        >新增
+        </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>
+      </el-col>
+      <el-col :span="1.5">
+        <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>
+      </el-col>
+      <el-col :span="1.5">
+        <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>
+    </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"/>
+      </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>
+          <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"
+    />
+    <!-- 添加或修改销售出库单：- 过磅记录生成数据对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="客户编号关联客户表" prop="customerno">
+          <el-input v-model="form.customerno" placeholder="请输入客户编号关联客户表"/>
+        </el-form-item>
+
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {dragTableInfo, listTable, unionListTableData} from "@/api/tablelist/commonTable";
+import {getToken} from "@/utils/auth";
+import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
+
+export default {
+  name: "listInfo",
+  components: {Queryfrom},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 用户表格数据
+      tableList: [],
+      // 弹出层标题
+      title: "",
+      // 日期范围
+      dateRange: [],
+      // 表单参数
+      form: {},
+      rules: {},
+      // cru 弹窗
+      open: false,
+      // excel共通导入数据
+      upload: {
+        // 是否显示弹出层
+        open: false,
+        // 弹出层标题（
+        title: "",
+        // 是否禁用上传
+        isUploading: false,
+        // 是否更新已经存在的数据
+        updateSupport: 0,
+        // 设置上传的请求头部
+        headers: {Authorization: "Bearer " + getToken()},
+        // 上传的地址
+        url: process.env.VUE_APP_BASE_API + "接口地址",
+      },
+      // 排序方式 默认降序
+      sortState: true,
+      // 共通查询参数接受子组件的参数
+      queryParams: {
+        pageNum: 1,                  // 第几页
+        pageSize: 10,                // 每页大小
+        orderByColumn: "",  // 根据某列排序
+        isAsc: this.sortState ? "DESC" : "ASC", // desc（降序）或 asc（升序）
+        // 基本查询参数
+        basicMap: {
+          tableName: "drag_form"
+        },
+        // 当前表字段筛选参数
+        queryMap: {                   // 当前查询基本参数
+          // ... key : value         当前页面的筛选条件
+        }
+      },
+      // 列信息
+      columns: {},
+      // 当前模版信息
+      templateInfo: {},
+      // 查询条件
+      queryFromWhere: {},
+      // 当前table唯一标识
+      sqlkey: null,
+    };
+  },
+
+  created() {
+    // 得到当前展示的table的唯一标识
+    this.sqlkey = this.$route.query.sqlkey;
+  },
+  methods: {
+    /** 查询列表 */
+    getList(queryParams) {
+      this.loading = true;
+      // 序列化当前查询参数列表
+      this.queryParams.queryMap = queryParams.queryMap
+      // 获取当前表单结构信息
+      dragTableInfo({queryMap: {sqlkey: this.sqlkey}}).then(res => {
+        // 得到当前模版信息 --- sql columns queryWhere
+        this.templateInfo = res.data.resultMap
+        // 得到查询条件
+        this.queryFromWhere = res.data.resultMap.where;
+        //  得到当前列表信息
+        this.columns = JSON.parse(this.templateInfo.template.dtColumnName)
+      }).finally(fes => {
+        if (this.templateInfo == {}) return;
+        // 调用查询需要携带当前table的唯一标识
+        this.queryParams.queryMap.sqlkey = this.sqlkey;
+        // 根据sql语句查询当前表数据
+        unionListTableData(this.queryParams).then(res => {
+          this.tableList = [];
+          res.rows.forEach(item => {
+            this.tableList.push(item.resultMap)
+          })
+          this.total = res.total;
+          this.loading = false;
+        });
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 分页查询
+    pageList(row) {
+      console.log(this.queryParams)
+      // 调用子组件-》携带子组件参数请求后台
+      this.$refs.mychild.pageList(row);
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.userId);
+      this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+
+    // 更多操作触发
+    handleCommand(command, row) {
+      switch (command) {
+        case "handleResetPwd":
+          this.handleResetPwd(row);
+          break;
+        case "handleAuthRole":
+          this.handleAuthRole(row);
+          break;
+        default:
+          break;
+      }
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      getUser().then((response) => {
+        this.postOptions = response.posts;
+        this.roleOptions = response.roles;
+        this.open = true;
+        this.title = "添加信息";
+        this.form.password = this.initPassword;
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const userId = row.userId || this.ids;
+      getUser(userId).then((response) => {
+        this.form = response.data;
+        this.postOptions = response.posts;
+        this.roleOptions = response.roles;
+        this.$set(this.form, "postIds", response.postIds);
+        this.$set(this.form, "roleIds", response.roleIds);
+        this.open = true;
+        this.title = "修改当前信息";
+        this.form.password = "";
+      });
+    },
+
+
+    /** 提交按钮 */
+    submitForm: function () {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.userId != undefined) {
+            updateUser(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addUser(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作
+     *
+     * 删除提示信息语句（标识）
+     * */
+    handleDelete(row) {
+      const userIds = row.userId || this.ids;
+      this.$modal
+        .confirm('是否确认删除"' + userIds + '"的数据项？')
+        .then(function () {
+          return delUser(userIds);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {
+        });
+    },
+
+
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "导出接口地址",
+        {
+          ...this.queryParams,
+        },
+        `文件名称_${new Date().getTime()}.xlsx`
+      );
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "当前导入";
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download(
+        "下载模版地址",
+        {},
+        `下载模版名称${new Date().getTime()}.xlsx`
+      );
+    },
+    // 文件上传中处理
+    handleFileUploadProgress(event, file, fileList) {
+      this.upload.isUploading = true;
+    },
+    // 文件上传成功处理
+    handleFileSuccess(response, file, fileList) {
+      this.upload.open = false;
+      this.upload.isUploading = false;
+      this.$refs.upload.clearFiles();
+      this.$alert(
+        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
+        response.msg +
+        "</div>",
+        "导入结果",
+        {dangerouslyUseHTMLString: true}
+      );
+      this.getList();
+    },
+    // 提交上传文件
+    submitFileForm() {
+      this.$refs.upload.submit();
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>

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

@@ -0,0 +1,178 @@
+<template>
+  <div>
+    <el-form :model="queryParams.queryMap" ref="queryForm" size="small" :inline="true" label-width="68px">
+      <!--      条件循环-->
+      <span v-for="(item,index) in formVals">
+       <!--      input框循环-->
+      <span v-if="item.conditionType=='input'" style="width: 500px;height: 500px">
+      <el-form-item :label="item.conditionName" :prop="item.conditionField">
+        <el-input
+          v-model="queryParams.queryMap[item.conditionField]"
+          :placeholder="item.conditionNotes == null?'请输入':item.conditionNotes"
+          @keyup.enter.native="handleQuery"
+          clearable
+        />
+      </el-form-item>
+      </span>
+        <!--      select下拉框循环-->
+      <span v-if="item.conditionType == 'select'" style="width: 500px;height: 500px">
+      <el-form-item :label="item.conditionName" :prop="item.conditionField">
+        <el-select v-model="value" :placeholder="item.conditionNotes == null?'请选择':item.conditionNotes" clearable
+                   filterable>
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </span>
+        <!--      radio单选框循环-->
+      <span v-if="item.conditionType == 'radio'" style="width: 500px;height: 500px">
+          <el-form-item :prop="item.conditionField">
+           <el-button :type="item.componentType" :icon="item.componentIcon" :size="item.componentSize"
+                      @click="buttonClick(item)"> {{ item.conditionName }}</el-button>
+          </el-form-item>
+      </span>
+        <!--      time时间范围  -->
+      <span v-if="item.conditionType == 'between'" style="width: 500px;height: 500px">
+      <el-form-item :label="item.conditionName" :prop="item.conditionField">
+        <!--  item.componentType 使用某种组件
+        year/month/date/dates/months/years week/datetime/datetimerange/ daterange/monthrange-->
+          <el-date-picker
+            v-model="queryParams.queryMap[item.conditionField]"
+            :type="item.componentType"
+            range-separator="至"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            value-format="yyyy-MM-DD HH:mm:ss"
+            :default-time="['12:00:00']"
+          >
+          </el-date-picker>
+      </el-form-item>
+      </span>
+    </span>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+
+
+
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'queryfrom',
+  props: {
+    formVals: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      // 时间范围临时存储
+      dateRange: [],
+      // 共通查询参数
+      queryParams: {
+        // pageNum: 1,                  // 第几页
+        // pageSize: 10,                // 每页大小
+        orderByColumn: "",  // 根据某列排序
+        isAsc: this.sortState ? "DESC" : "ASC", // desc（降序）或 asc（升序）
+        // 基本查询参数
+        basicMap: {
+          tableName: "drag_form"
+        },
+        // 当前表字段筛选参数
+        queryMap: {                   // 当前查询基本参数
+          // ... key : value         当前页面的筛选条件
+        }
+      },
+      inputType: {},
+      // 输入框
+      inputs: [],
+      // 时间范围
+      betweens: [],
+      // 下拉框
+      selects: [],
+      // 单选/按钮
+      radios: []
+    }
+  },
+  watch: {
+    formVals: {
+      handler: function () {
+        return;
+        console.log(this.formVals)
+        this.formVals.forEach(item => {
+          console.log(item.conditionType)
+          if (item.conditionType == 'input') {
+            this.inputs.push(item)
+          } else if (item.conditionType == 'between') {
+            // 判断使用某种时间范围组件  YYYY 表示年范围之间的组件 MM 表示月等。。。
+            // console.log(item.componentType);
+            this.betweens.push(item)
+          } else if (item.conditionType == 'select') {
+            this.selects.push(item)
+          } else if (item.conditionType == 'radio') {
+            this.radios.push(item)
+          }
+        })
+      }
+    }
+  },
+  created() {
+    this.$emit("getList", this.queryParams);
+  },
+  methods: {
+    // radio 点击事件调用getList
+    buttonClick(tem) {
+      // 调用父组件中的getlist    待处理
+      // 当前按钮绑定的默认值以及列
+      this.queryParams.queryMap[tem.conditionField] = tem.conditionDefaultValue
+      console.log(this.queryParams)
+      // 处理完成后调用getlist
+      this.handleQuery();
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      // 调用组件中的getList
+      this.queryParams.pageNum = 1;
+      console.log(this.queryParams);
+      // 调用父组件中的查询函数
+      this.$emit("getList", this.queryParams);
+    },
+
+    /**分页查询操作*/
+    pageList(row) {
+      // 调用查询方法
+      this.handleQuery();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      // 时间范围滞空
+      this.dateRange = [];
+      // 查询表单清空
+      this.resetForm("queryForm");
+      // 清空查询条件
+      this.queryParams.queryMap = {}
+      // 调用查询
+      this.handleQuery();
+    },
+
+  },
+};
+</script>
+
+<style scoped lang="scss">
+
+</style>
+
+
+