Explorar el Código

fix: 表格联动

Zn hace 1 año
padre
commit
12cadb692b

+ 6 - 4
ruoyi-ui/src/views/relateTable/index.vue

@@ -971,9 +971,11 @@ export default {
       this.$refs[formName].validate(async (valid) => {
           if (valid) {
             // console.log('groupList', this.groupList);
-            let sqlKey = uuidv4();
+            let tableKeyObj = {
+              tableKey: this.uuidv4(),
+            };
             let payLoad = {
-              component: "tablelist/commonTable/listInfo",
+              component: "tablelist/commonTable/grouplistInfo",
               icon: "",
               isCache: "0",
               isFrame: "1",
@@ -982,7 +984,7 @@ export default {
               orderNum: this.menuOrderNum,
               parentId: this.groupForm.routePath,
               path: sqlKey,
-              query: JSON.stringify(sqlKey),
+              query: JSON.stringify(tableKeyObj),
               status: "0",
               visible: "0",
             };
@@ -999,7 +1001,7 @@ export default {
               }
               this.addDragData.forEach((item, index) => {
               item.menuId = result.data;
-              item.sqlKey = sqlKey
+              item.sqlKey = tableKeyObj.tableKey
               let echo = JSON.parse(item.echoData)
               echo.formData = this.groupForm
               item.echoData = JSON.stringify(echo)

+ 5 - 5
ruoyi-ui/src/views/tableMange/index.vue

@@ -1535,8 +1535,8 @@ export default {
             };
             result = await updateMenu(payLoad);
           } else {
-            let sqlKeyObj = {
-              sqlkey: this.uuid,
+            let tableKeyObj = {
+              tableKey: this.uuid,
             };
             let payLoad = {
               component: "tablelist/commonTable/listInfo",
@@ -1548,7 +1548,7 @@ export default {
               orderNum: this.menuOrderNum,
               parentId: this.formData.routePath,
               path: this.uuid,
-              query: JSON.stringify(sqlKeyObj),
+              query: JSON.stringify(tableKeyObj),
               status: "0",
               visible: "0",
             };
@@ -1564,12 +1564,12 @@ export default {
               tId: this.tId,
               dtName: this.formData.menuName,
               // menuId: this.formData.routePath,
-              tableKey: this.tableKey, //  暂定
+              tableKey: this.uuid, //  暂定
               dtTableName: this.tableName,
               primaryKey: this.formData.primaryKey,
               orderByColumn: this.formData.orderByColumn,
               sortOrder: this.formData.isAsc,
-              sqlKey: this.uuid,
+              sqlKey: this.tableKey,
               dtColumnName: columns, //列字段标题名称(存储显示字段信息
               // dtColumnName: JSON.stringify(columns).replace(/"/g, "'"), //列字段标题名称(存储显示字段信息
               timeFormat: this.formData.timeFormate,

+ 707 - 0
ruoyi-ui/src/views/tablelist/commonTable/grouplistInfo.vue

@@ -0,0 +1,707 @@
+<template>
+  <div class="app-container">
+    <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 +
+          '&sqlKey=' +
+          sqlkey
+        "
+        v-loading="upload.isUploading"
+        :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"
+      :statisticList="statisticList"
+      :showCount="showCount"
+      @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" v-if="false">
+        <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
+          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>
+      </el-col>
+      <right-toolbar
+        :showCount.sync="showCount"
+        :showSearch.sync="showSearch"
+        :counts="true"
+        @queryTable="pageList"
+      ></right-toolbar>
+    </el-row>
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      @selection-change="handleSelectionChange"
+      row-key="id"
+    >
+      <el-table-column
+        type="selection"
+        width="55"
+        reserve-selection
+        align="center"
+      />
+      <!-- <span v-for="(key, val) in columns" :key="key">
+        <el-table-column :label="key" align="center" :prop="val" />
+      </span> -->
+      <el-table-column
+        v-for="item in columns"
+        :key="item.key"
+        :label="item.value"
+        align="center"
+        :prop="item.key"
+      />
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-dropdown>
+            <el-button type="warning" plain size="small">
+              处理<i class="el-icon-arrow-down el-icon--right"></i>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                >修改
+                </el-button>
+              </el-dropdown-item>
+              <el-dropdown-item>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                >删除
+                </el-button>
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
+        </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" append-to-body>
+      <!-- <iframe
+        :src="iframeUrl"
+        width="100%"
+        height="600px"
+        style="border: none"
+        scrolling="no"
+      >
+      </iframe> -->
+      <k-form-build
+        class="formBuild"
+        ref="addFromRef"
+        :defaultValue="defaultValue"
+        @submit="tempSubBtn"
+        :value="jsonData"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="editConfirmHandler">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  delTableData,
+  dragTableInfo,
+  listTable,
+  unionListTableData,
+  getInfoBySqlKey,
+  addTableData,
+  batchEdit,
+  getStatisticList
+} from "@/api/tablelist/commonTable";
+import {getToken} from "@/utils/auth";
+import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
+import {camelCase} from "@/utils";
+import {inputDisableComplete} from "@/utils/other";
+
+export default {
+  name: "listInfo",
+  components: {Queryfrom},
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示统计
+      showCount: 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_API3 + "common/uploadData",
+      },
+      // 排序方式 默认降序
+      sortOrder: true,
+      // 共通查询参数接受子组件的参数
+      queryParams: {
+        pageNum: 1, // 第几页
+        pageSize: 10, // 每页大小
+        orderByColumn: "", // 根据某列排序
+        isAsc: "", // desc(降序)或 asc(升序)
+        // 基本查询参数
+        basicMap: {
+          tableName: "drag_form",
+        },
+        // 当前表字段筛选参数
+        queryMap: {
+          // 当前查询基本参数
+          // ... key : value         当前页面的筛选条件
+          // 超级查询的唯一值
+          queryCriteriaValue: "",
+        },
+      },
+      // 列信息
+      columns: {},
+      // 当前模版信息
+      templateInfo: {},
+      // 查询条件
+      queryFromWhere: {},
+      // 当前table唯一标识
+      sqlkey: null,
+      // 当前表名称
+      tableName: null,
+      //存放html代码块
+      iframeUrl: "",
+      //存放表单渲染数据
+      jsonData: {},
+      // 回显表格数据,
+      defaultValue: {},
+      // 统计card
+      statisticList: [],
+    };
+  },
+
+  created() {
+    // 得到当前展示的table的唯一标识
+    this.tableKey = this.$route.query.tableKey;
+  },
+  methods: {
+    /** 查询列表 */
+    getList(queryParams) {
+      this.loading = true;
+      // 序列化当前查询参数列表
+      queryParams && (this.queryParams.queryMap = queryParams.queryMap);
+      // 获取当前表单结构信息
+      dragTableInfo({queryMap: {tableKey: this.tableKey}})
+        .then((res) => {
+          // 得到当前模版信息 --- sql columns queryWhere
+          this.templateInfo = res.data.resultMap;
+
+          this.queryParams.orderByColumn =
+            res.data.resultMap.querySql.orderByColumn;
+          this.sortOrder = JSON.parse(res.data.resultMap.querySql.sortOrder);
+          // 根据拖拽时设置当前列表排列顺序
+          this.queryParams.isAsc = this.sortOrder ? "DESC" : "ASC"
+          this.tableName = this.templateInfo.template.dtTableName;
+          // 得到查询条件
+          this.queryFromWhere = res.data.resultMap.where;
+          //  得到当前列表信息
+          this.columns = this.columnsHandler(
+            JSON.parse(this.templateInfo.template.dtColumnName)
+          );
+        })
+        .finally((fes) => {
+          if (this.templateInfo == {}) return;
+          // 调用查询需要携带当前table的唯一标识
+          this.queryParams.queryMap.sqlkey = this.sqlkey;
+          this.queryParams.orderByColumn = camelCase(
+            this.queryParams.orderByColumn || ""
+          );
+          // 根据sql语句查询当前表数据
+          unionListTableData(this.queryParams).then((res) => {
+            // console.log('unionListTableData');
+            this.tableList = [];
+            res.rows.forEach((item) => {
+              this.tableList.push(item.resultMap);
+            });
+            // 驼峰转换
+            this.tableList = this.tableList.map((item) => {
+              let kv = {};
+              for (let itemKey in item) {
+                kv[camelCase(itemKey)] = item[itemKey];
+              }
+              return kv;
+            });
+            this.total = res.total;
+            this.loading = false;
+          });
+
+          // 查询统计信息
+          getStatisticList({queryMap: {tableKey: this.templateInfo.template.tableKey}}).then(res => {
+            console.log('getStatisticList', res);
+            this.statisticList = res.data
+          })
+        });
+    },
+    isUpperCase(char) {
+      return char === char.toUpperCase();
+    },
+    // 下划线命名转驼峰命名
+    toUnderScoreCase(str) {
+      if (str === null) {
+        return null;
+      }
+      let sb = "";
+      // 前置字符是否大写
+      let preCharIsUpperCase = true;
+      // 当前字符是否大写
+      let curreCharIsUpperCase = true;
+      // 下一字符是否大写
+      let nexteCharIsUpperCase = true;
+      for (let i = 0; i < str.length; i++) {
+        let c = str.charAt(i);
+        if (i > 0) {
+          preCharIsUpperCase = isUpperCase(str.charAt(i - 1));
+        } else {
+          preCharIsUpperCase = false;
+        }
+
+        curreCharIsUpperCase = isUpperCase(c);
+
+        if (i < str.length - 1) {
+          nexteCharIsUpperCase = isUpperCase(str.charAt(i + 1));
+        }
+
+        if (
+          preCharIsUpperCase &&
+          curreCharIsUpperCase &&
+          !nexteCharIsUpperCase
+        ) {
+          sb += SEPARATOR;
+        } else if (i !== 0 && !preCharIsUpperCase && curreCharIsUpperCase) {
+          sb += SEPARATOR;
+        }
+        sb += c.toLowerCase();
+      }
+
+      return sb;
+    },
+    // 处理列表信息
+    columnsHandler(columns) {
+      let resArr = [];
+      columns.forEach((item) => {
+        for (const key in item) {
+          let tempObj = {};
+          tempObj.key = camelCase(key);
+          tempObj.value = item[key];
+          resArr.push(tempObj);
+        }
+      });
+      return resArr;
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      // this.reset();
+    },
+    // 分页查询
+    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[camelCase(this.templateInfo.template?.primaryKey)]
+      );
+      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(row) {
+      // this.reset();
+      this.defaultValue = {};
+      getInfoBySqlKey(this.sqlkey).then(({data}) => {
+        if (!data || !data.dfVueTemplate) {
+          this.$message.error("当前表格未绑定表单!");
+          return;
+        }
+        this.jsonData = JSON.parse(data.dfVueTemplate);
+        this.open = true;
+        this.title = "添加信息";
+        this.form.password = this.initPassword;
+        this.$nextTick(() => {
+          this.$refs.addFromRef.reset();
+          inputDisableComplete();
+        });
+      });
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      getInfoBySqlKey(this.sqlkey).then(({data}) => {
+        if (!data || !data.dfVueTemplate) {
+          this.$message.error("当前表格未绑定表单!");
+          return;
+        }
+        Object.assign(this.defaultValue, row);
+        this.jsonData = JSON.parse(data.dfVueTemplate);
+        this.open = true;
+        this.title = "修改信息";
+        this.form.password = this.initPassword;
+        this.$nextTick(() => {
+          this.$refs.addFromRef.setData(row);
+        });
+      });
+      return;
+      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) {
+      let delIds = this.ids;
+      let primary = camelCase(this.templateInfo.template?.primaryKey);
+      if (row[primary] != undefined && row[primary] != null) {
+        delIds = [];
+        delIds.push(row[primary]);
+      }
+      let data = {
+        basicMap: {
+          tableName: this.tableName,
+        },
+        conditionMap: {
+          // id: delIds,
+        },
+      };
+      data.conditionMap[this.templateInfo.template?.primaryKey] = delIds;
+      this.$modal
+        .confirm('是否确认删除"' + delIds + '"的数据项?')
+        .then(function () {
+          return delTableData(data);
+        })
+        .then(() => {
+          // 调用子组件查询方法 目的是携带上子组件中的查询参数
+          this.$refs.mychild.pageList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {
+        });
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      let primary = camelCase(this.templateInfo.template?.primaryKey);
+      if (this.ids.length > 0) {
+        this.queryParams["execlMap"] = [];
+        this.ids.forEach((item) => {
+          this.queryParams.execlMap.push(
+            this.tableList.find((ttem) => {
+              return ttem[primary] === item;
+            })
+          );
+        });
+      }
+      this.queryParams.execlMap = JSON.stringify(this.queryParams.execlMap);
+      this.download(
+        process.env.VUE_APP_BASE_API3 + "common/export",
+        {
+          ...this.queryParams,
+        },
+        `文件名称_${new Date().getTime()}.xlsx`
+      );
+    },
+    /** 导入按钮操作 */
+    handleImport() {
+      this.upload.title = "当前导入";
+      this.upload.open = true;
+    },
+    /** 下载模板操作 */
+    importTemplate() {
+      this.download(
+        process.env.VUE_APP_BASE_API3 +
+        `common/exportTemplate?tableName=${this.tableName}&sqlkey=${this.sqlkey}`,
+        {},
+        `下载模版名称${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.$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() {
+      this.$refs.upload.submit();
+    },
+    //提交编辑结果按钮回调
+    editConfirmHandler() {
+      this.$refs.addFromRef
+        .getData()
+        .then(async (values) => {
+          let data = {
+            basicMap: {
+              tableName: this.tableName,
+            },
+            addListMap: [values],
+          };
+          if (Object.keys(this.defaultValue).length) {
+            let updateData = {
+              // 基本参数
+              basicMap: {
+                // 表名
+                tableName: this.tableName,
+              },
+              conditionMap: {},
+              commMap: {},
+            };
+
+            // 后台接收需要是表中字段真实的名称,无所谓驼峰。
+            updateData.conditionMap[this.templateInfo.template?.primaryKey] =
+              this.defaultValue[
+                camelCase(this.templateInfo.template?.primaryKey)
+                ];
+            Object.keys(values).map((k) => {
+              updateData.commMap[k] = values[k];
+            });
+            let res = await batchEdit(updateData);
+            if (res.code == 200) {
+              this.$modal.msgSuccess("修改成功");
+            } else {
+              this.$modal.msgError("修改失败");
+            }
+            this.getList();
+          } else {
+            let res = await addTableData(data);
+            if (res.code == 200) {
+              this.$modal.msgSuccess("添加成功");
+            } else {
+              this.$modal.msgError("添加失败");
+            }
+            this.getList();
+          }
+          this.defaultValue = {};
+          this.open = false;
+        })
+        .catch((res) => {
+          this.$modal.msgError("表单校验失败,请规范填写数据");
+        });
+    },
+    // 使用提交数据类型的按钮获取数据
+    tempSubBtn(getData) {
+      getData()
+        .then((values) => {
+          console.log("验证通过", values);
+        })
+        .catch(() => {
+          console.log("验证未通过,获取失败");
+        });
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss"></style>

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

@@ -307,7 +307,7 @@ export default {
 
   created() {
     // 得到当前展示的table的唯一标识
-    this.sqlkey = this.$route.query.sqlkey;
+    this.tableKey = this.$route.query.tableKey;
   },
   methods: {
     /** 查询列表 */
@@ -316,7 +316,7 @@ export default {
       // 序列化当前查询参数列表
       queryParams && (this.queryParams.queryMap = queryParams.queryMap);
       // 获取当前表单结构信息
-      dragTableInfo({queryMap: {sqlkey: this.sqlkey}})
+      dragTableInfo({queryMap: {tableKey: this.tableKey}})
         .then((res) => {
           // 得到当前模版信息 --- sql columns queryWhere
           this.templateInfo = res.data.resultMap;