优化表格编辑交互和样式

ruoyi-ui/src/views/dataEngine/datamodeling/index.vue

@@ -1,32 +1,69 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
       <el-form-item label="表名称" prop="tableName">
-        <el-input v-model="queryParams.tableName" placeholder="请输入表名称" clearable
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.tableName"
+          placeholder="请输入表名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <el-form-item label="表描述" prop="tableComment">
-        <el-input v-model="queryParams.tableComment" placeholder="请输入表描述" clearable
-                  @keyup.enter.native="handleQuery"/>
+        <el-input
+          v-model="queryParams.tableComment"
+          placeholder="请输入表描述"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
       </el-form-item>
       <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-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>
 
     <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-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >新增</el-button
+        >
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="aaaList">
-      <el-table-column label="表名称" align="center" prop="tableName"/>
-      <el-table-column label="表描述" align="center" prop="tableComment"/>
-      <el-table-column label="创建时间" align="center" prop="createTime"/>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="表名称" align="center" prop="tableName" />
+      <el-table-column label="表描述" align="center" prop="tableComment" />
+      <el-table-column label="创建时间" align="center" prop="createTime" />
+      <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">
@@ -34,13 +71,21 @@
             </el-button>
             <el-dropdown-menu slot="dropdown">
               <el-dropdown-item>
-                <el-button size="mini" type="text" icon="el-icon-delete"
-                           @click="handleDelete(scope.row)">删除
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                  >删除
                 </el-button>
               </el-dropdown-item>
               <el-dropdown-item>
-                <el-button size="mini" type="text" icon="el-icon-edit"
-                           @click="handleUpdate(scope.row)">修改
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                  >修改
                 </el-button>
               </el-dropdown-item>
             </el-dropdown-menu>
@@ -52,13 +97,18 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
-                @pagination="getList"/>
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
   </div>
 </template>
 
 <script>
-import {tableInfoList, removeTable} from "@/api/dataEngine/index";
+import { tableInfoList, removeTable } from "@/api/dataEngine/index";
 
 export default {
   name: "dataModeling",
@@ -112,7 +162,7 @@ export default {
         tableName: row.tableName,
         databaseType: this.$store.state.user.dataSource.databaseType,
         databaseName: this.$store.state.user.dataSource.databaseName,
-      }
+      };
       this.$modal
         .confirm('是否确认删除"' + tableNames + '"表？')
         .then(function () {
@@ -122,8 +172,7 @@ export default {
           this.getList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {
-        });
+        .catch(() => {});
     },
     handleUpdate(row) {
       this.$router.push({

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

@@ -32,34 +32,39 @@
               }}</span>
             </el-option>
           </el-select>
+          <!-- <el-form
+            :model="tableFieldList"
+            ref="tableForm"
+            :rules="rules"
+            :inline="false"
+            size="normal"
+          > -->
           <el-table
             :data="tableFieldList"
             border
             ref="dragTable"
-            :max-height="tableHeight"
             row-key="id"
-            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+            :max-height="tableHeight"
           >
+            <!-- 
+              
+              :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" 
+            -->
             >
-            <!-- <el-table-column type="selection" width="55" align="center" /> -->
-            <!-- <span v-for="(key, val) in columns" :key="val">
-              <el-table-column :label="key" align="center" :prop="val" />
-            </span> -->
             <el-table-column
               type="index"
               label="序号"
               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>
             <el-table-column prop="fieldDescription" label="字段描述">
               <template slot-scope="scope">
+                <!-- <el-form-item size="normal" prop="fieldDescription"> -->
                 <el-input v-model="scope.row.fieldDescription"></el-input>
+                <!-- </el-form-item> -->
               </template>
             </el-table-column>
             <el-table-column prop="relationTable" label="关联表">
@@ -92,7 +97,6 @@
                   @change="relationFieldChange(scope.row)"
                   :disabled="!scope.row.disableRelaFieldName"
                   placeholder="关联字段"
-                  clearable
                   filterable
                 >
                   <el-option
@@ -111,7 +115,7 @@
                   v-model="scope.row.relationType"
                   placeholder="请选择关联方式"
                   :disabled="!scope.row.disableRelaType"
-                  clearable
+                  @change="relationTypeChangeHandler(scope.row)"
                   filterable
                 >
                   <el-option
@@ -182,13 +186,7 @@
           </template>
         </el-table-column> -->
           </el-table>
-          <!-- <pagination
-            v-show="total > 0"
-            :total="total"
-            :page.sync="queryParams.pageNum"
-            :limit.sync="queryParams.pageSize"
-            @pagination="pageList"
-          /> -->
+          <!-- </el-form> -->
         </el-card>
       </el-col>
       <el-col :span="6">
@@ -351,7 +349,7 @@
           :key="item.key"
           :label="item.value"
           align="center"
-          :prop="item.key"
+          :prop="toUpperCase(item.key)"
         />
         <el-table-column
           label="操作"
@@ -523,6 +521,9 @@ export default {
         timeFormate: [
           { required: true, message: "请选择时间格式", trigger: "change" },
         ],
+        fieldDescription: [
+          { required: true, message: "请输入字段描述", trigger: "blur" },
+        ],
       },
       menus: [], //路由列表数据
 
@@ -606,19 +607,24 @@ export default {
             isExport: true,
             relationTableList: this.relationTableList,
             tableName: this.tableName,
-            children: [],
+            relationFieldList: [],
           };
         });
       });
     },
     // 关联表变化回调
     async ralationTableChange(row) {
+      this.tableFieldList = this.tableFieldList.filter((item) => {
+        return !row.relationFieldList.some((val) => {
+          return val.id == item.id;
+        });
+      });
+      row.relationFieldName = "";
+      row.relationType = "";
+      row.disableRelaFieldName = false;
+      row.disableRelaType = false;
+      row.relationFieldList = [];
       if (!row.relationTable) {
-        row.relationFieldName = "";
-        row.relationType = "";
-        row.disableRelaFieldName = false;
-        row.disableRelaType = false;
-        row.children = [];
         return;
       }
       // 获取关联表的字段
@@ -628,6 +634,7 @@ export default {
         tableName: row.relationTable,
       };
       let res = await getListName(data);
+      // 关联字段下拉列表数据
       row.relaFieldNameList = res.map((item) => {
         return {
           fieldName: item.fieldName,
@@ -637,7 +644,7 @@ export default {
       let relationTableList = row.relationTableList.filter(
         (item) => row.relationTable != item.tableName
       );
-      row.children = row.relaFieldNameList.map((item, index) => {
+      row.relationFieldList = row.relaFieldNameList.map((item, index) => {
         return {
           id: row.relationTable + " " + item.fieldName,
           fieldName: item.fieldName,
@@ -655,12 +662,17 @@ export default {
           isExport: true,
           relationTableList,
           tableName: row.relationTable,
-          children: [],
+          relationFieldList: [],
           isChildren: true,
         };
       });
+      // this.tableFieldList = [...this.tableFieldList, ...row.relationFieldList];
       row.disableRelaFieldName = true;
     },
+    // 关联类型变化回调
+    relationTypeChangeHandler(row) {
+      this.tableFieldList = [...this.tableFieldList, ...row.relationFieldList];
+    },
     // 关联字段回调
     relationFieldChange(row) {
       if (!row.relationFieldName) {
@@ -732,7 +744,7 @@ export default {
       let res = await getMenuList();
       this.menus = this.handleTree(res.data, "menuId");
     },
-    // 校验字段合法性
+    // 校验字段合法性(递归版)
     validateField(tableFieldList, validateParams) {
       if (!tableFieldList.length) {
         return;
@@ -743,11 +755,56 @@ export default {
           //描述字段不能为空
           validateParams.isFieldDescrib = true;
         }
-        if (temp.children.length) {
-          this.validateField(temp.children, validateParams);
+        if (
+          temp.relationTable &&
+          (!temp.relationFieldName || !temp.relationType)
+        ) {
+          // 关联条件不足
+          validateParams.isRelationFieldAll = true;
+        }
+        if (temp.relationFieldList.length) {
+          this.validateField(temp.relationFieldList, validateParams);
         }
       }
     },
+    // 校验字段合法性(非递归版)
+    validateTableData(tableFieldList) {
+      if (!tableFieldList.length) {
+        return {
+          val: false,
+          meg: "字段个数不能为空",
+        };
+      }
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (!temp.fieldDescription.trim() && temp.isShow) {
+          return {
+            val: false,
+            msg: "显示的字段,字段描述不能为空",
+          };
+        }
+        if (
+          temp.relationTable &&
+          (!temp.relationFieldName || !temp.relationType)
+        ) {
+          return {
+            val: false,
+            msg: "关联条件不足,请完善关联条件",
+          };
+        }
+      }
+      if (tableFieldList.filter((item) => item.isShow).length == 0) {
+        return {
+          val: false,
+          msg: "显示的字段数不能为空",
+        };
+      }
+
+      return {
+        val: true,
+        msg: "",
+      };
+    },
     // 递归拼接查询语句
     getSQLString(tableFieldList, fieldArr, tableArr) {
       for (let i = 0; i < tableFieldList.length; i++) {
@@ -783,11 +840,12 @@ export default {
               temp.fieldName
           );
         }
-        if (temp.children.length) {
-          this.getSQLString(temp.children, fieldArr, tableArr);
-        }
+        // if (temp.relationFieldList.length) {
+        //   this.getSQLString(temp.relationFieldList, fieldArr, tableArr);
+        // }
       }
     },
+
     // 拼接查询sql语句
     getSQLStr() {
       let sqlType = this.databaseType; //数据库类型
@@ -827,6 +885,14 @@ export default {
       });
       return resArr;
     },
+    // 下划线命名转驼峰命名
+    toUpperCase(str) {
+      let nstr = str.replace(/(?:_)+([^_])/g, function ($0, $1) {
+        return $1.toUpperCase();
+      });
+      nstr = nstr.replace(nstr[0], nstr[0].toLowerCase());
+      return nstr;
+    },
 
     // 递归获取列表信息
     getCol(
@@ -840,7 +906,13 @@ export default {
         let temp = tableFieldList[i];
         if (temp.isShow) {
           let tempObj = {};
-          tempObj[temp.fieldName] = temp.fieldDescription;
+          if (temp.isChildren) {
+            tempObj[temp.tableName + "_" + temp.fieldName] =
+              temp.fieldDescription;
+          } else {
+            tempObj[temp.fieldName] = temp.fieldDescription;
+          }
+          console.log(tempObj);
           columns.push(tempObj);
         }
         if (temp.isSearch) {
@@ -849,38 +921,18 @@ export default {
         if (temp.isExport) {
           tableExportField[temp.fieldName] = temp.fieldDescription;
         }
-        if (temp.children) {
-          this.getCol(
-            temp.children,
-            columns,
-            searchFieldList,
-            tableExportField
-          );
-        }
+        // 递归
+        // if (temp.relationFieldList) {
+        //   this.getCol(
+        //     temp.relationFieldList,
+        //     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) => {
@@ -891,19 +943,35 @@ export default {
             return;
           }
           // 检验表单合法性
-          let validateParams = {
-            isFieldDescrib: false,
-          };
-          this.validateField(this.tableFieldList, validateParams);
-          console.log(validateParams);
-          if (validateParams.isFieldDescrib) {
-            this.$message.error("需要显示的字段描述不能为空");
+          let validRes = this.validateTableData(this.tableFieldList);
+          if (!validRes.val) {
+            this.$message.error(validRes.msg);
             return;
           }
+          // let validateParams = {
+          //   isFieldDescrib: false,
+          //   isRelationFieldAll: false,
+          // };
+          // this.validateField(this.tableFieldList, validateParams);
+          // console.log(validateParams);
+          // if (validateParams.isFieldDescrib) {
+          //   this.$message.error("需要显示的字段描述不能为空");
+          //   return;
+          // }
+          // if (validateParams.isRelationFieldAll) {
+          //   this.$message.error("请补全关联条件");
+          //   return;
+          // }
           // 拼接预览的sql查询语句
           this.queryParams.basicMap.sql = this.getSQLStr();
           // 获取表头信息
-          let tempColumns = this.getColumns();
+          let tempColumns = [],
+            searchFieldList = [];
+          this.getCol(this.tableFieldList, tempColumns, searchFieldList);
+          if (!searchFieldList.length) {
+            this.$message.warning("请至少选择一个包含查询字段");
+            return false;
+          }
           this.columns = this.columnsHandler(tempColumns);
           this.queryParams.isAsc = this.formData.isAsc;
           // 发送请求获取预览数据
@@ -912,8 +980,6 @@ export default {
           res.rows.forEach((item) => {
             this.tableDataList.push(item.resultMap);
           });
-          console.log(this.tableDataList);
-          console.log(this.columns);
           this.total = res.total;
           this.isShowPreview = true;
         } else {
@@ -921,22 +987,40 @@ export default {
           return false;
         }
       });
+
+      // this.$refs.tableForm.validate((val) => {
+      //   if (val) {
+
+      //   } else {
+      //     this.$message.warning("请完善表单");
+      //     return false;
+      //   }
+      // });
     },
     // 创建回调
     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("需要显示的字段描述不能为空");
+          let validRes = this.validateTableData(this.tableFieldList);
+          if (!validRes.val) {
+            this.$message.error(validRes.msg);
             return;
           }
-
+          // let validateParams = {
+          //   isFieldDescrib: false,
+          //   isRelationFieldAll: false,
+          // };
+          // this.validateField(this.tableFieldList, validateParams);
+          // console.log(validateParams);
+          // if (validateParams.isFieldDescrib) {
+          //   this.$message.error("需要显示的字段描述不能为空");
+          //   return;
+          // }
+          // if (validateParams.isRelationFieldAll) {
+          //   this.$message.error("请补全关联条件");
+          //   return;
+          // }
           let uuid = uuidv4();
           let columns = [],
             searchFieldList = [],