Merge branch 'master' of http://49.233.37.222:3000/wjm/mec-cloud_IntelligentManufacturing_CRM

ruoyi-ui/src/api/relateTable/index.js

@@ -22,7 +22,8 @@ export function addGroup(data) {
   return request({
     url: '/system/group',
     method: 'post',
-    data: data
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
   })
 }
 

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

@@ -77,7 +77,7 @@
         >
         <template slot-scope="scope">
           <el-popover trigger="hover" placement="top">
-            <p v-for="(item,index) in scope.row.contentList"> {{ item.tableName}}</p>
+            <p v-for="(item,index) in scope.row.contentList"> {{ item.tableName }}</p>
             
             <div slot="reference" class="name-wrapper">
             <el-tag size="medium">{{ scope.row.tableKey }}</el-tag>
@@ -139,13 +139,28 @@
           class="mb10"
           >新增</el-button
         >
-
-        <div class="nameipt">
-          <span>表格组名：</span><el-input v-model="groupname" placeholder="请输入表格组名"></el-input>
-          <span class="desc">描述：</span><el-input v-model="groupdescribe" placeholder="请输入相关描述"></el-input>
-        </div>
-
-        <el-table
+        <el-form :model="groupForm" :rules="grouprules" ref="groupForm" label-width="100px" class="demo-ruleForm">
+          <el-form-item label="表格组名" prop="groupname">
+            <el-input v-model="groupForm.groupname" placeholder="请输入表格组名"></el-input>
+          </el-form-item>
+          <el-form-item label="表格描述" prop="groupdescribe">
+            <el-input v-model="groupForm.groupdescribe" placeholder="请输入表格描述"></el-input>
+          </el-form-item>
+          <el-form-item label="菜单路由" prop="routePath">
+          <div class="treeselect">
+            <treeselect
+              :append-to-body="true"
+              v-model="groupForm.routePath"
+              :options="menus"
+              :normalizer="normalizer"
+              :show-count="true"
+              placeholder="请选择父级路由"
+            />
+          </div>
+           
+          </el-form-item>
+        <el-form-item>
+          <el-table
           :data="tableDataList"
           border
           stripe
@@ -196,32 +211,34 @@
               </el-dropdown>
             </template>
           </el-table-column>
-        </el-table>
-      </div>
-      <template #footer>
-        <span>
+          </el-table>
+        </el-form-item>
+        
+        <el-form-item class="btn">
           <el-button @click="isShowTable = false">取消</el-button>
-          <el-button type="primary" @click="addTableGroup">确认</el-button>
-        </span>
-      </template>
+          <el-button type="primary" @click="addTableGroup('groupForm')">确认</el-button>
+        </el-form-item>
+        </el-form>
+      </div>
     </el-dialog>
 
     <!-- 编辑某一条表格数据弹窗 -->
-    <el-dialog :title="relateTitle ? '添加关联表格' :'修改关联表格' " :visible.sync="isShowForm" width="800px">
+    <el-dialog :title="relateTitle ? '添加关联表格' :'修改关联表格' " :visible.sync="isShowForm" >
       <div class="formWrap">
         <el-form
+          :rules="tableItemRules"
           ref="tableItemForm"
-          style="max-width: 750px; width: 700px"
+          style="max-width: 750px; width: 1000px"
           :model="tableItemForm"
           label-width="100px"
         >
-          <el-form-item label="表格标题:">
+          <el-form-item label="表格标题:" prop="title">
             <el-input
               v-model="tableItemForm.title"
               style="max-width: 221px"
             ></el-input>
           </el-form-item>
-          <el-form-item label="表格名称:">
+          <el-form-item label="表格名称:" prop="tableName">
             <el-select
               v-model="tableItemForm.tableName"
               @change="getList()"
@@ -240,7 +257,7 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="关联字段:">
+          <el-form-item label="关联字段:" prop="selectFields">
             <el-select
               v-model="tableItemForm.selectFields"
               placeholder="请选择关联字段"
@@ -258,13 +275,14 @@
             </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="展示字段:">
+          <el-form-item label="展示字段:" prop="FieldList">
             <el-table
             :data="tableFieldList"
             border
             ref="dragTable"
             row-key="id"
             max-height="500px"
+            class="tablefiled"
             >
             
             <el-table-column
@@ -274,8 +292,7 @@
               class-name="allowDrag"
             >
             </el-table-column>
-            <el-table-column prop="fieldName" label="数据字段">
-            </el-table-column>
+            <el-table-column prop="fieldName" label="数据字段"></el-table-column>
             <el-table-column prop="fieldDescription" label="字段描述">
               <template slot-scope="scope">
                 <input
@@ -292,42 +309,171 @@
                 />
               </template>
             </el-table-column>
+            <el-table-column width="95px" prop="relationTable" label="关联表">
+              <template slot-scope="scope">
+                <el-select
+                  v-model="scope.row.relationTable"
+                  :disabled="
+                    !scope.row.relationTableList ||
+                    !scope.row.relationTableList.length
+                  "
+                  placeholder="请选择关联的表"
+                  clearable
+                  filterable
+                  @change="ralationTableChange(scope.row)"
+                >
+                  <el-option
+                    v-for="(item, index) in scope.row.relationTableList"
+                    :key="index"
+                    :label="item.tableComment"
+                    :value="item.tableName"
+                  >
+                    <span style="float: left">{{ item.tableComment }}</span>
+                    <span
+                      style="float: right; color: #8492a6; font-size: 13px"
+                      >{{ item.tableName }}</span
+                    >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column width="95px" prop="relationFieldName" label="关联条件字段">
+              <template slot-scope="scope">
+                <el-select
+                  v-model="scope.row.relationFieldName"
+                  @change="relationFieldChange(scope.row)"
+                  :disabled="!scope.row.disableRelaFieldName"
+                  placeholder="关联字段"
+                  filterable
+                >
+                  <el-option
+                    v-for="(item, index) in scope.row.relaFieldNameList"
+                    :key="index"
+                    :label="item.fieldDescription"
+                    :value="item.fieldName"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column width="95px" prop="relationType" label="关联方式">
+              <template slot-scope="scope">
+                <el-select
+                  v-model="scope.row.relationType"
+                  placeholder="请选择关联方式"
+                  :disabled="!scope.row.disableRelaType"
+                  @change="relationTypeChangeHandler(scope.row)"
+                  filterable
+                >
+                  <el-option
+                    v-for="(item, index) in relaTypeList"
+                    :key="index"
+                    :label="item.label"
+                    :value="item.value"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
             <el-table-column prop="isShow" label="是否显示">
               <template slot-scope="scope">
                 <el-switch v-model="scope.row.isShow"> </el-switch>
               </template>
             </el-table-column>
+            <el-table-column prop="isSearch" label="是否包含查询">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.isSearch"> </el-switch>
+              </template>
+            </el-table-column>
           </el-table>
           </el-form-item>
+          <el-form-item class="btn">
+            <el-button @click="isShowForm = false">取消</el-button>
+            <el-button type="primary" @click="confirmAddHandler('tableItemForm')">确认</el-button>
+          </el-form-item>
         </el-form>
       </div>
-      <template #footer>
-        <span>
-          <el-button @click="isShowForm = false">取消</el-button>
-          <el-button type="primary" @click="confirmAddHandler">确认</el-button>
-        </span>
-      </template>
     </el-dialog>
   </div>
 </template>
 <script>
 import { listTable, removeTableList } from "@/api/dragform/tableList";
-import {
-  getFormName,
-  getListName,
-  dragTablePreview,
-} from "@/api/dragform/form.js";
+import { getFormName, getListName, dragTablePreview, } from "@/api/dragform/form.js";
 import { delMenu } from "@/api/system/menu";
-import { addGroup } from '@/api/relateTable/index.js'
+import { getMenuList, addMenu } from "@/api/menu.js";
+import { addGroup, listGroup } from '@/api/relateTable/index.js'
 import { addDragTable } from "@/api/tablelist/commonTable.js";
 import { mapGetters, mapState } from "vuex";
 import DictData from "@/components/DictData";
-import { FastBackwardFill } from "@/components/updateModule/k-form-design/lib/k-form-design.common";
+import { FastBackwardFill, async } from "@/components/updateModule/k-form-design/lib/k-form-design.common";
+import { v4 as uuidv4 } from "uuid";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import json from "highlight.js/lib/languages/json";
 
 export default {
   name: "relateTable",
+  components: { Treeselect },
+
   data() {
     return {
+      addDragData:[],
+      // 创建data需要的参数
+      // data: {
+      //   tId:'',
+      //   dtName: '表格标题',
+      //   tableKey: 'uuid随机生成',
+      //   dtTableName: '表格名称',
+      //   primaryKey: '关联字段',
+      //   // 排序依赖字段可以为空
+      //   orderByColumn: '',
+      //   sortOrder: false,
+      //   sqlKey:'uuid随机生成',
+      //   // getcol递归获取
+      //   dtColumnName: 'columns',
+      //   timeFormat: 'yyyy-MM-dd',
+      //   // 是否包含查询['表格名称.包含查询得数据字段']
+      //   searchFieldList: [],
+      //   tableSql: this.getSQLStr(),
+      //   echoData: JSON.stringify()
+      // },
+      groupList:[],
+      menus: [], //路由列表数据
+      // 添加关联表格校验规则
+      tableItemRules:{
+        title:[{ required: true, message: '请输入表格标题', trigger: 'blur' }],
+        tableName:[{ required: true, message: '请选择表格名称', trigger: 'change' }],
+        selectFields: [{ required: true, message: '请选择关联字段', trigger: 'change' }],
+      },
+      groupForm: {
+        groupname: '',
+        groupdescribe:'',
+        routePath: undefined,
+      },
+      grouprules:{
+        groupname:[{ required: true, message: '请输入表格组名', trigger: 'blur' }],
+        groupdescribe:[{ required: true, message: '请输入表格描述', trigger: 'blur' }],
+        routePath: [
+          { required: true, message: "请选择路由", trigger: "change" },
+        ],
+      },
+      menuOrderNum: 0,
+      // 关联方式
+      relaTypeList: [
+        {
+          label: "等值连接",
+          value: "INNER JOIN",
+        },
+        {
+          label: "左连接",
+          value: "LEFT JOIN",
+        },
+        {
+          label: "右连接",
+          value: "RIGHT JOIN",
+        },
+      ],
+      searchFieldList: [],
       // 修改row
       updataGroupRow:{},
       // 遮罩层
@@ -387,19 +533,21 @@ export default {
       relateFieldList: [], //子集关联字段数据
       groupTitle: true,
       tableItemForm: {
+        rowId: "",
         title: "",
         tableName: "",
         selectFields: "",
       },
-      groupname: '',
-      groupdescribe: '',
       tableGroupList: [],
       // 成员表格提示
       tableKeyContent: '',
+
     };
   },
-  created() {
+  created() {},
     // this.getList();
+  async mounted() {
+    await this.getMenuList();
   },
   computed: {
     selectRelate(){
@@ -431,8 +579,95 @@ export default {
         this.relationTableList = [];
       }
     },
+    'groupForm.routePath'(nval, oval) {
+      let targetMenu = this.getTargetMenu(this.menus);
+      this.menuOrderNum = targetMenu.children ? targetMenu.children.length : 0;
+    },
   },
   methods: {
+    // 获取路由表单数据
+    async getMenuList() {
+    let res = await listGroup();
+    console.log('res',  res);
+    this.menus = this.handleTree(res.data, "menuId");
+    },
+    // 递归拼接查询语句
+    getSQLString(tableFieldList, fieldArr, tableArr, sqlType = "mysql") {
+      let prefix = "{DBNAME}.";
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (temp.isShow) {
+          let tempArr = prefix + temp.tableName + "." + temp.fieldName;
+          if (temp.isChildren) {
+            tempArr += asOrSpace + temp.tableName + "_" + temp.fieldName;
+          }
+          fieldArr.push(tempArr);
+        }
+        if (temp.relationTable && temp.relationFieldName && temp.relationType) {
+          let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+          tableArr.push(
+            temp.relationType +
+              " " +
+              isNeedUsername +
+              prefix +
+              temp.relationTable +
+              asOrSpace +
+              temp.relationTable +
+              " ON " +
+              prefix +
+              temp.relationTable +
+              "." +
+              temp.relationFieldName +
+              " = " +
+              prefix +
+              temp.tableName +
+              "." +
+              temp.fieldName
+          );
+        }
+      }
+      // 如果主键不包含显示,则添加至sql语句中
+      let isNotInclude = this.tableFieldList.find(
+        (val) => !val.isShow && val.fieldName == this.tableItemForm.selectFields
+      );
+      if (isNotInclude) {
+        fieldArr.push(
+          prefix + isNotInclude.tableName + "." + isNotInclude.fieldName
+        );
+      }
+    },
+    // 拼接查询sql语句
+    getSQLStr() {
+      let prefix = "{DBNAME}.";
+      let sqlType = this.databaseType; //数据库类型
+      // let sqlType = "oracle";
+      let sql = "";
+      // mysql
+      sql += "SELECT ";
+      let fieldNameArr = [],
+        relaTypeArr = [];
+      this.getSQLString(
+        this.tableFieldList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType
+      );
+      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+      sql +=
+        fieldNameArr.join(",") +
+        " FROM " +
+        isNeedUsername +
+        prefix +
+        this.tableItemForm.tableName +
+        asOrSpace +
+        this.tableItemForm.tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
     /** 查询列表 */
     getList(queryParams) {
       if (!this.tableItemForm.tableName) return;
@@ -467,6 +702,112 @@ export default {
         });
       });
 
+    },
+    // 关联表变化回调
+    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) {
+        return;
+      }
+      // 获取关联表的字段
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: row.relationTable,
+      };
+      let res = await getListName(data);
+      // 关联字段下拉列表数据
+      row.relaFieldNameList = res.map((item) => {
+        return {
+          fieldName: item.fieldName,
+          fieldDescription: item.fieldDescription,
+        };
+      });
+      let relationTableList = row.relationTableList.filter(
+        (item) => row.relationTable != item.tableName
+      );
+      row.relationFieldList = row.relaFieldNameList.map((item, index) => {
+        return {
+          id: row.relationTable + "_" + item.fieldName,
+          fieldName: item.fieldName,
+          fieldDescription: item.fieldDescription,
+          relationTable: "",
+          relationFieldName: "",
+          relaFieldNameList: [],
+          disableRelaFieldName: false,
+          relationType: "",
+          relationShowField: [],
+          relationShowFiledList: [],
+          disableRelaType: false,
+          isShow: true,
+          isSearch: false,
+          isExport: true,
+          relationTableList,
+          tableName: row.relationTable,
+          relationFieldList: [],
+          isChildren: true,
+        };
+      });
+      row.disableRelaFieldName = true;
+    },
+    // 关联类型变化回调
+    relationTypeChangeHandler(row) {
+      let tempRelationFieldList = row.relationFieldList.filter((item) => {
+        return !this.tableFieldList.find((val) => val.id === item.id);
+      });
+      this.tableFieldList = [...this.tableFieldList, ...tempRelationFieldList];
+    },
+    // 关联字段回调
+    relationFieldChange(row) {
+      if (!row.relationFieldName) {
+        row.relationType = "";
+        row.disableRelaType = false;
+        row.relaFieldNameList = [];
+        return;
+      }
+      row.disableRelaType = true;
+    },
+    // 递归获取列表信息
+    getCol(
+      tableFieldList,
+      columns,
+      searchFieldList = [],
+      tableExportField = {}
+    ) {
+      if (!tableFieldList.length) return;
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        let tempFieldName = "",
+          exportFieldName = "";
+        if (temp.isChildren) {
+          tempFieldName = temp.tableName + "_" + temp.fieldName;
+          exportFieldName = temp.tableName + "@" + temp.fieldName;
+        } else {
+          tempFieldName = temp.fieldName;
+          exportFieldName = temp.fieldName;
+        }
+        if (temp.isShow) {
+          let tempObj = {};
+          tempObj[tempFieldName] = temp.fieldDescription;
+          columns.push(tempObj);
+        }
+        if (temp.isSearch) {
+          searchFieldList.push(temp.tableName + "." + temp.fieldName);
+        }
+
+        if (temp.isExport) {
+          tableExportField[exportFieldName] = temp.fieldDescription;
+        }
+      }
     },
      // 获取所有表格
     async getAllTable() {
@@ -486,59 +827,233 @@ export default {
       });
     },
     // 确认添加一个表格
-    confirmAddHandler() {
-      console.log(this.tableItemForm);
-      if(this.tableItemForm.title == ''){
-        this.$message.error("字段不能为空");
-        return
-      }
-      if(this.relateTitle){
-        this.tableItemForm.rowId = Date.now();
-        this.tableDataList.push(this.tableItemForm);
-      } else {
-        this.tableDataList.forEach((item, index) => {
-          if(item.rowId == this.tableItemForm){
-            this.tableDataList[index] = this.tableItemForm
+    confirmAddHandler(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          let columns = [],
+            searchFieldList = []
+            this.getCol(
+              this.tableFieldList,
+              columns,
+              searchFieldList,
+            );
+          // 判断是否有包含查询字段
+          if (!searchFieldList.length) {
+          this.$message.warning("请至少选择一个包含查询字段");
+          return false;
           }
-        })
-      }
-      
-      this.isShowForm = false;
-      this.tableItemForm = {}
+          // 判断是新增还是修改 true新增
+          if(this.relateTitle){    
+            
+            let echoData = {
+              tableName: this.tableItemForm.tableName,
+              tableFieldData: this.tableFieldList,
+              formData: this.groupForm,
+            }
+            let tableKey = uuidv4();
+            let sqlKey = uuidv4();
+            this.addDragData.push({
+            tId: this.tId,
+            dtName: this.tableItemForm.title,
+            tableKey: tableKey,
+            dtTableName: this.tableItemForm.tableName,
+            primaryKey: this.tableItemForm.selectFields,
+            orderByColumn: '',
+            sortOrder: false,
+            sqlKey: sqlKey,
+            dtColumnName: columns, 
+            timeFormat: 'yyyy-MM-dd',
+            searchFieldList: searchFieldList, 
+            tableSql: this.getSQLStr(), 
+            tableExportField: '',
+            echoData: JSON.stringify(echoData),
+            })
+
+            this.tableItemForm.rowId = Date.now();
+            this.groupList.push({tableFieldList: this.tableFieldList, tableItemForm: this.tableItemForm})
+
+            this.tableDataList.push(this.tableItemForm);
+          } else {
+            let columns = [],
+            searchFieldList = []
+            this.getCol(
+              this.tableFieldList,
+              columns,
+              searchFieldList,
+            );
+            let echoData = {
+              tableName: this.tableItemForm.tableName,
+              tableFieldData: this.tableFieldList,
+              formData: this.groupForm,
+            }
+            console.log(this.tableDataList)
+            console.log('修改')
+          }
+          console.log(this.addDragData);
+
+          this.isShowForm = false
+          this.tableItemForm = {}
+          this.tableFieldList = []
+
+        } else {
+          this.$message.error("请完善表单信息");
+          return false;
+        }
+      });
     },
     // 修改一个表格数据
     relateOne(row){
-      console.log(row);
+      // console.log(row);
+      // console.log('修改', this.groupList);
+      // 展示字段的回显
+      this.groupList.forEach(item => {
+        if(item.tableItemForm.rowId == row.rowId) {
+          this.tableFieldList = item.tableFieldList
+        }
+      })
       this.relateTitle = false
       this.isShowForm = true;
       this.tableItemForm = row
     },
+    // 更新路由
+    reloadRouter() {
+      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      });
+    },
+    // 获取目标menu
+    getTargetMenu(menus) {
+      for (let i = 0; i < menus.length; i++) {
+        if (menus[i].menuId == this.groupForm.routePath) {
+          return menus[i];
+        } else if (menus.children?.length) {
+          return this.getTargetMenu(menus.children);
+        }
+      }
+      return false;
+    },
+    // 获取父级menuId
+    getParentMenuId(menuId, menus) {
+      let res;
+      for (let i = 0; i < menus.length; i++) {
+        let item = menus[i];
+        if (item.menuId == menuId) {
+          res = item.parentId;
+          break;
+        } else if (item.children?.length) {
+          if (
+            this.getParentMenuId(
+              menuId,
+              JSON.parse(JSON.stringify(item.children))
+            )
+          ) {
+            res = this.getParentMenuId(
+              menuId,
+              JSON.parse(JSON.stringify(item.children))
+            );
+          }
+        }
+      }
+      return res;
+    },
     // 新增动态表格组
-    addTableGroup(){
-        let tableKey = this.tableDataList[0].tableName
-        this.tableGroupList.push({
-          rowId: Date.now(),
-          tableDataList: this.tableDataList,
-          contentList: this.tableDataList.splice(1),
-          groupname: this.groupname,
-          groupdescribe: this.groupdescribe,
-          groupcount: this.tableDataList.length,
-          tableKey: this.tableDataList[0].tableName
-        })
-      
-      this.isShowTable = false
-      this.tableDataList = []
-      this.groupname = ''
-      this.groupdescribe = ''
+    addTableGroup(formName){
+      this.$refs[formName].validate(async (valid) => {
+          if (valid) {
+            // console.log('groupList', this.groupList);
+            let groupKeyObj = {
+              groupKey: uuidv4(),
+            };
+            let payLoad = {
+              component: "relateTable/relateTableEdit",
+              icon: "",
+              isCache: "0",
+              isFrame: "1",
+              menuName: this.groupForm.groupname,
+              menuType: "C",
+              orderNum: this.menuOrderNum,
+              parentId: this.groupForm.routePath,
+              path: groupKeyObj.groupKey,
+              query: JSON.stringify(groupKey),
+              status: "0",
+              visible: "0",
+            };
+            let result;
+            result = await addMenu(payLoad);
+
+            if(result.code == 200){
+              this.reloadRouter();
+              let data = {
+                groupName: '',
+                groupDescription: '',
+                groupTableInfo: [],
+                dragTables:[]
+              }
+              this.addDragData.forEach((item, index) => {
+              item.menuId = result.data;
+              item.sqlKey = tableKeyObj.tableKey
+              let echo = JSON.parse(item.echoData)
+              echo.formData = this.groupForm
+              item.echoData = JSON.stringify(echo)
+              data.groupTableInfo.push({
+                tableKey: item.tableKey,
+                sort: index
+              })
+              })
+            data.groupName = this.groupForm.groupname
+            data.groupDescription = this.groupForm.groupdescribe
+            data.groupTableInfo = JSON.stringify(data.groupTableInfo)
+            data.dragTables = this.addDragData
+
+            let res = await addGroup(data)
+            if(res.code == 200){
+              this.$message.success("创建成功");
+
+              this.isShowTable = false
+              this.groupForm = {}
+            } else {
+              this.$message.success("创建失败");
+              }
+            }
+          
+          } else {
+            this.$message.error("请完善表单信息");
+            return false;
+          }
+      });
     },
     /** 新增按钮操作 */
-    handleAdd() {
+    async handleAdd() {
       // this.$router.push({
       //   path: "/system/fromModel/index/relateMange",
       // });
+      await this.getMenuList();
+
+      if (this.$route.query.tId) {
+        this.tId = this.$route.query.tId;
+        // 修改表格回显数据
+        // this.initTableData(this.tId);
+      }
       this.groupTitle = true
       this.isShowTable=true
     },
+    // 获取路由表单数据
+    async getMenuList() {
+      let res = await getMenuList();
+      this.menus = this.handleTree(res.data, "menuId");
+      console.log(this.menus);
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.menuId,
+        label: node.menuName,
+        children: node.children,
+      };
+    },
     // 修改动态表格组
     UpdateTableGroup(row){
       console.log(row);
@@ -708,6 +1223,20 @@ export default {
 };
 </script>
 <style scoped lang="scss">
+::v-deep .el-dialog:not(.is-fullscreen){
+  width: 900px !important;
+}
+.tablefiled{
+  ::v-deep .el-input--medium .el-input__inner{
+    width: 70px !important;
+  }
+}
+::v-deep .el-input--medium .el-input__inner{
+  width: 230px !important;
+}
+::v-deep .btn{
+  text-align: right !important;
+}
 .ipt {
   height: 36px;
   line-height: 36px;
@@ -728,6 +1257,9 @@ export default {
 .ipt:focus {
   border-color: #1890ff;
 }
+::v-deep .vue-treeselect--has-value .vue-treeselect__input {
+  vertical-align: middle !important;
+}
 .formWrap {
   display: flex;
   justify-content: center;
@@ -749,4 +1281,20 @@ export default {
 .desc{
   margin-left: 10px;
 }
+::v-deep .vue-treeselect--has-value .vue-treeselect__input {
+  vertical-align: middle !important;
+
+}
+.treeselect{
+   .vue-treeselect{
+    width: 230px !important;
+  }
+}
 </style>
+
+<style lang="scss">
+ 
+.vue-treeselect{
+  z-index: 9999 !important;
+}
+</style>

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

@@ -1524,6 +1524,7 @@ export default {
           //   this.$message.error("请补全关联条件");
           //   return;
           // }
+          console.log('123', columns);
           this.uuid = uuidv4();
           this.tableKey = uuidv4();
           // 表单
@@ -1544,8 +1545,8 @@ export default {
             };
             result = await updateMenu(payLoad);
           } else {
-            let sqlKeyObj = {
-              sqlkey: this.uuid,
+            let tableKeyObj = {
+              tableKey: this.uuid,
             };
             let payLoad = {
               component: "tablelist/commonTable/listInfo",
@@ -1557,7 +1558,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",
             };
@@ -1573,12 +1574,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,

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>

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

@@ -307,9 +307,67 @@ export default {
 
   created() {
     // 得到当前展示的table的唯一标识
-    this.sqlkey = this.$route.query.sqlkey;
+    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;
+          console.log('res', this.templateInfo)
+          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.templateInfo.template.sqlKey;
+          this.queryParams.orderByColumn = camelCase(
+            this.queryParams.orderByColumn || ""
+          );
+          // 根据sql语句查询当前表数据
+          console.log(this.queryParams)
+          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();
     },
@@ -366,63 +424,6 @@ export default {
       });
       return resArr;
     },
-    /** 查询列表 */
-    getList(queryParams) {
-      this.loading = true;
-      // 序列化当前查询参数列表
-      queryParams && (this.queryParams.queryMap = queryParams.queryMap);
-      // 获取当前表单结构信息
-      dragTableInfo({queryMap: {sqlkey: this.sqlkey}})
-        .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
-          })
-        });
-    },
     // 取消按钮
     cancel() {
       this.open = false;

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

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="cardBox" v-show="showCount" >
+    <!-- <div class="cardBox" v-show="showCount" >
       <el-card
         shadow="hover"
         :body-style="{ padding: '20px' }"
@@ -17,21 +17,12 @@
           <div class="title">{{ item.statisticTitle ? item.statisticTitle : item.statisticDescription }}</div>
         </el-tooltip>
 
-        <!-- <el-tooltip
-          class="item"
-          effect="dark"
-          :content="item.description"
-          placement="top-start"
-        >
-          <div class="description">{{ item.description }}</div>
-        </el-tooltip> -->
-
         <div class="type">
-          <!-- <div>{{ item.type }}</div> -->
           <div class="count">{{ item.result }}</div>
         </div>
       </el-card>
-    </div>
+    </div> -->
+    <cardcountpanel :showCount="showCount" :statisticList="statisticList" />
     <el-form
       :model="queryParams.queryMap"
       ref="queryForm"
@@ -181,6 +172,7 @@
 </template>
 
 <script>
+import cardcountpanel from "../components/cardCountPanel.vue"
 export default {
   name: "queryfrom",
   props: {
@@ -195,6 +187,7 @@ export default {
       type: Array,
     }
   },
+  components:{cardcountpanel},
   data() {
     return {
       // 时间范围临时存储

ruoyi-ui/src/views/tablelist/components/cardCountPanel.vue

@@ -0,0 +1,93 @@
+<template>
+  <div>
+    <div class="cardBox" v-show="showCount" >
+      <el-card
+        shadow="hover"
+        :body-style="{ padding: '20px' }"
+        class="card"
+        v-for="(item, index) in statisticList"
+        :key="index"
+      >
+        <el-tooltip
+          class="item"
+          effect="dark"
+          :content="item.statisticTitle ? item.statisticTitle : item.statisticDescription"
+          placement="top-start"
+        >
+          <div class="title">{{ item.statisticTitle ? item.statisticTitle : item.statisticDescription }}</div>
+        </el-tooltip>
+
+        <div class="type">
+          <div class="count">{{ item.result }}</div>
+        </div>
+      </el-card>
+    </div>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: "cardcountpanel",
+  props: {
+    showCount : {
+      type: Boolean,
+    },
+    statisticList:{
+      type: Array,
+    }
+  },
+  data () {
+   return {
+    
+   }
+ },
+  methods: {
+   
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.cardBox {
+  display: flex;
+  align-content: space-between;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+.card {
+  /* width:15%; */
+  flex-basis: 15%;
+  margin-bottom: 10px;
+  margin-right: 15px;
+  min-width: 130px;
+  .title {
+    /* width:20%; */
+    font-size: 18px;
+    margin-bottom: 5px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .description {
+    width: 70%;
+    font-size: 13px;
+    color: #9699a2;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    word-break: break-all;
+    float: left;
+  }
+  .type {
+    float: right;
+    margin-top: 10px;
+  }
+  .count {
+    font-size: 30px;
+  }
+}
+  
+</style>

ruoyi-ui/vue.config.js

@@ -38,7 +38,11 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
+<<<<<<< HEAD
+        target: `http://192.168.110.83:8080`,
+=======
         target: `http://192.168.110.76:8080`,
+>>>>>>> 61c3b2a1bbef89cc20056ddf30d1203ffe17e3f1
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''