表格编辑-表格嵌套关联

ruoyi-ui/.env.development

@@ -11,7 +11,7 @@ VUE_APP_BASE_API = '/dev-api'
 VUE_CLI_BABEL_TRANSPILE_MODULES = true
 
 #数据引擎模块IP
-VUE_APP_BASE_API2 = 'http://192.168.110.52:8099/'
+VUE_APP_BASE_API2 = 'http://192.168.110.70:8099/'
 
 #表单引擎模块IP
-VUE_APP_BASE_API3 = 'http://192.168.110.52:8088/'
+VUE_APP_BASE_API3 = 'http://192.168.110.70:8088/'

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

@@ -51,6 +51,9 @@
               width="50"
               class-name="allowDrag"
             >
+              <!-- <template slot-scope="scope">
+                <el-input v-model="scope.row.fieldDescription"></el-input>
+              </template> -->
             </el-table-column>
             <el-table-column prop="fieldName" label="数据字段">
             </el-table-column>
@@ -121,7 +124,7 @@
                 </el-select>
               </template>
             </el-table-column>
-            <el-table-column prop="relationShowField" label="关联显示字段">
+            <!-- <el-table-column prop="relationShowField" label="关联显示字段">
               <template slot-scope="scope">
                 <el-select
                   v-model="scope.row.relationShowField"
@@ -140,7 +143,7 @@
                   </el-option>
                 </el-select>
               </template>
-            </el-table-column>
+            </el-table-column> -->
             <el-table-column prop="isShow" label="是否显示">
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.isShow"> </el-switch>
@@ -595,6 +598,7 @@ export default {
             isSearch: false,
             isExport: true,
             relationTableList: this.relationTableList,
+            tableName: this.tableName,
             children: [],
           };
         });
@@ -623,14 +627,29 @@ export default {
           fieldDescription: item.fieldDescription,
         };
       });
+      let relationTableList = row.relationTableList.filter(
+        (item) => row.relationTable != item.tableName
+      );
       row.children = row.relaFieldNameList.map((item, index) => {
         return {
           id: row.relationTable + " " + item.fieldName,
           fieldName: item.fieldName,
           fieldDescription: item.fieldDescription,
-          isSearch: false,
+          relationTable: "",
+          relationFieldName: "",
+          relaFieldNameList: [],
+          disableRelaFieldName: false,
+          relationType: "",
+          relationShowField: [],
+          relationShowFiledList: [],
+          disableRelaType: false,
           isShow: true,
+          isSearch: false,
           isExport: true,
+          relationTableList,
+          tableName: row.relationTable,
+          children: [],
+          isChildren: true,
         };
       });
       row.disableRelaFieldName = true;
@@ -704,58 +723,84 @@ export default {
     // 获取路由表单数据
     async getMenuList() {
       let res = await getMenuList();
-      console.log(res);
       this.menus = this.handleTree(res.data, "menuId");
     },
+    // 校验字段合法性
+    validateField(tableFieldList, validateParams) {
+      if (!tableFieldList.length) {
+        return;
+      }
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (!temp.fieldDescription.trim() && temp.isShow) {
+          //描述字段不能为空
+          validateParams.isFieldDescrib = true;
+        }
+        if (temp.children.length) {
+          this.validateField(temp.children, validateParams);
+        }
+      }
+    },
+    // 递归拼接查询语句
+    getSQLString(tableFieldList, fieldArr, tableArr) {
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (temp.isShow) {
+          // console.log("字段描述:", temp.fieldDescription);
+          // if (!temp.fieldDescription) {
+          //   console.log("有空的字段描述");
+          //   //字段描述不能为空
+          //   return true;
+          // }
+          let tempArr = temp.tableName + "." + temp.fieldName;
+          if (temp.isChildren) {
+            tempArr += " as " + temp.tableName + "_" + temp.fieldName;
+          }
+          fieldArr.push(tempArr);
+        }
+        if (temp.relationTable && temp.relationFieldName && temp.relationType) {
+          // fieldArr.push(temp.relationTable + "." + temp.relationFieldName);
+          tableArr.push(
+            temp.relationType +
+              " " +
+              temp.relationTable +
+              " AS " +
+              temp.relationTable +
+              " ON " +
+              temp.relationTable +
+              "." +
+              temp.relationFieldName +
+              " = " +
+              temp.tableName +
+              "." +
+              temp.fieldName
+          );
+        }
+        if (temp.children.length) {
+          this.getSQLString(temp.children, fieldArr, tableArr);
+        }
+      }
+    },
     // 拼接查询sql语句
     getSQLStr() {
-      let sqlType = this.databaseType;
+      let sqlType = this.databaseType; //数据库类型
       let sql = "";
       // mysql
       sql += "SELECT ";
       let fieldNameArr = [],
         relaTypeArr = [];
-      let mainTableName = this.tableName;
-      this.tableFieldList
-        .filter((item) => item.isShow)
-        .map((item, index, arr) => {
-          //主表查询
-          fieldNameArr.push(mainTableName + "." + item.fieldName);
+      this.getSQLString(this.tableFieldList, fieldNameArr, relaTypeArr);
+      // console.log("discriISEmpty:", discriISEmpty);
+      // if (discriISEmpty) {
+      //   return false;
+      // }
 
-          if (
-            item.relationTable &&
-            item.relationShowField.length &&
-            item.relationType &&
-            item.relationFieldName
-          ) {
-            //关联表字段查询
-            item.relationShowField.map((val) => {
-              fieldNameArr.push(item.relationTable + "." + val.split(" ")[0]);
-            });
-            //关联方式
-            relaTypeArr.push(
-              item.relationType +
-                " " +
-                item.relationTable +
-                " AS " +
-                item.relationTable +
-                " ON " +
-                item.relationTable +
-                "." +
-                item.relationFieldName +
-                " = " +
-                this.tableName +
-                "." +
-                item.fieldName
-            );
-          }
-        });
       sql +=
         fieldNameArr.join(",") +
         " FROM " +
-        mainTableName +
+        this.tableName +
         " AS " +
-        mainTableName;
+        this.tableName;
       if (relaTypeArr.length) {
         sql += " " + relaTypeArr.join(" ");
       }
@@ -775,42 +820,83 @@ export default {
       });
       return resArr;
     },
-    // 获取列表信息
-    getColumns() {
-      let columns = [];
-      this.tableFieldList.forEach((item) => {
-        if (item.isShow) {
+    // 递归获取列表信息
+    getCol(
+      tableFieldList,
+      columns,
+      searchFieldList = [],
+      tableExportField = {}
+    ) {
+      if (!tableFieldList.length) return;
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (temp.isShow) {
           let tempObj = {};
-          tempObj[item.fieldName] = item.fieldDescription;
+          tempObj[temp.fieldName] = temp.fieldDescription;
           columns.push(tempObj);
-          if (item.children.length) {
-            item.children
-              .filter((val) => val.isShow)
-              .map((child) => {
-                let tempObj = {};
-                tempObj[child.fieldName] = child.fieldDescription;
-                columns.push(tempObj);
-              });
-          }
         }
-      });
+        if (temp.isSearch) {
+          searchFieldList.push(temp.fieldName);
+        }
+        if (temp.isExport) {
+          tableExportField[temp.fieldName] = temp.fieldDescription;
+        }
+        if (temp.children) {
+          this.getCol(
+            temp.children,
+            columns,
+            searchFieldList,
+            tableExportField
+          );
+        }
+      }
+    },
+    // 获取列表信息
+    getColumns() {
+      let columns = [];
+      this.getCol(this.tableFieldList, columns);
+      // this.tableFieldList.forEach((item) => {
+      //   if (item.isShow) {
+      //     let tempObj = {};
+      //     tempObj[item.fieldName] = item.fieldDescription;
+      //     columns.push(tempObj);
+      //     if (item.children.length) {
+      //       item.children
+      //         .filter((val) => val.isShow)
+      //         .map((child) => {
+      //           let tempObj = {};
+      //           tempObj[child.fieldName] = child.fieldDescription;
+      //           columns.push(tempObj);
+      //         });
+      //     }
+      //   }
+      // });
       return columns;
     },
     // 预览结果回调
     async previewHandle() {
       this.$refs.formData.validate(async (valid) => {
         // 至少包含一个查询项
-
         if (valid) {
           if (!this.tableName) {
             this.$message.error("请选择数据表");
+            return;
+          }
+          // 检验表单合法性
+          let validateParams = {
+            isFieldDescrib: false,
+          };
+          this.validateField(this.tableFieldList, validateParams);
+          console.log(validateParams);
+          if (validateParams.isFieldDescrib) {
+            this.$message.error("需要显示的字段描述不能为空");
+            return;
           }
           // 拼接预览的sql查询语句
           this.queryParams.basicMap.sql = this.getSQLStr();
           // 获取表头信息
           let tempColumns = this.getColumns();
           this.columns = this.columnsHandler(tempColumns);
-          console.log(this.columns);
           this.queryParams.isAsc = this.formData.isAsc;
           // 发送请求获取预览数据
           let res = await dragTablePreview(this.queryParams);
@@ -832,38 +918,58 @@ export default {
     async createHandle() {
       this.$refs.formData.validate(async (valid) => {
         if (valid) {
+          // 检验表单合法性
+          let validateParams = {
+            isFieldDescrib: false,
+          };
+          this.validateField(this.tableFieldList, validateParams);
+          console.log(validateParams);
+          if (validateParams.isFieldDescrib) {
+            this.$message.error("需要显示的字段描述不能为空");
+            return;
+          }
+
           let uuid = uuidv4();
+          let columns = [],
+            searchFieldList = [],
+            tableExportField = {};
+          this.getCol(
+            this.tableFieldList,
+            columns,
+            searchFieldList,
+            tableExportField
+          );
           let data = {
             dtName: this.formData.menuName,
             tableKey: this.formData.routePath, //  暂定
             dtTableName: this.tableName,
             sqlKey: uuid,
-            dtColumnName: [], //列字段标题名称(存储显示字段信息
+            dtColumnName: columns, //列字段标题名称(存储显示字段信息
             timeFormat: this.formData.timeFormate,
-            searchFieldList: [], //搜索字段数组
+            searchFieldList: searchFieldList, //搜索字段数组
             tableSql: this.getSQLStr(), //  暂定
-            tableExportField: {}, //导出字段名及列名
+            tableExportField: tableExportField, //导出字段名及列名
           };
-          this.tableFieldList.forEach((item) => {
-            if (item.isShow) {
-              let tempObj = {};
-              tempObj[item.fieldName] = item.fieldDescription;
-              data.dtColumnName.push(tempObj);
-              if (item.children.length) {
-                item.children.map((child) => {
-                  let tempObj = {};
-                  tempObj[child.fieldName] = child.fieldDescription;
-                  data.dtColumnName.push(tempObj);
-                });
-              }
-            }
-            if (item.isSearch) {
-              data.searchFieldList.push(item.fieldName);
-            }
-            if (item.isExport) {
-              data.tableExportField[item.fieldName] = item.fieldDescription;
-            }
-          });
+          // this.tableFieldList.forEach((item) => {
+          //   if (item.isShow) {
+          //     let tempObj = {};
+          //     tempObj[item.fieldName] = item.fieldDescription;
+          //     data.dtColumnName.push(tempObj);
+          //     if (item.children.length) {
+          //       item.children.map((child) => {
+          //         let tempObj = {};
+          //         tempObj[child.fieldName] = child.fieldDescription;
+          //         data.dtColumnName.push(tempObj);
+          //       });
+          //     }
+          //   }
+          //   if (item.isSearch) {
+          //     data.searchFieldList.push(item.fieldName);
+          //   }
+          //   if (item.isExport) {
+          //     data.tableExportField[item.fieldName] = item.fieldDescription;
+          //   }
+          // });
           if (!data.searchFieldList.length) {
             this.$message.warning("请至少选择一个包含查询字段");
             return false;

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

@@ -277,13 +277,21 @@ export default {
     this.sqlkey = this.$route.query.sqlkey;
   },
   methods: {
+    // 下划线命名转驼峰命名
+    toUpperCase(str) {
+      let nstr = str.replace(/(?:_)+([^_])/g, function ($0, $1) {
+        return $1.toUpperCase();
+      });
+      nstr = nstr.replace(nstr[0], nstr[0].toLowerCase());
+      return nstr;
+    },
     // 处理列表信息
     columnsHandler(columns) {
       let resArr = [];
       columns.forEach((item) => {
         for (const key in item) {
           let tempObj = {};
-          tempObj.key = key;
+          tempObj.key = this.toUpperCase(key);
           tempObj.value = item[key];
           resArr.push(tempObj);
         }
@@ -314,6 +322,7 @@ export default {
           //     ...item,
           //   };
           // });
+          console.log(this.columns);
         })
         .finally((fes) => {
           if (this.templateInfo == {}) return;

ruoyi-ui/vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://192.168.110.52:8080`,
+        target: `http://192.168.110.70:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''