自定义弹窗渲染初步修改完成

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

@@ -159,6 +159,25 @@ export function updateStatistic(data) {
     baseURL: process.env.VUE_APP_BASE_API3
   })
 }
+// 新增动态表格统计
+export function addGroupTableStatistic(data) {
+  return request({
+    url: '/system/statistic/addGroupTableStatistic',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
+
+// 修改动态格统计
+export function updateGroupTableStatistic(data) {
+  return request({
+    url: '/system/statistic/updateGroupTableStatistic',
+    method: 'put',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}
 
 // 获取动态统计详细信息
 export function getStatistic(id) {

ruoyi-ui/src/views/bussiness/processMange.vue

@@ -353,9 +353,7 @@ export default {
           this.formType = "composeForm";
           this.groupKey = benTaskNodeFormKey;
           let queryPayload = {
-            "${task_plan_key": bepTaskPlanKey,
-            "${task_key": bepTaskKey,
-            "${task_node_key": bepTaskNodeKey,
+            row,
             groupKey: benTaskNodeFormKey,
           };
           this.$nextTick(() => {

ruoyi-ui/src/views/dialogMange/components/relayTable.vue

@@ -254,7 +254,20 @@ export default {
   watch: {
     formData: {
       handler(nval) {
-        this.$emit("subFormData", this.formData);
+        this.$emit("subFormData", {
+          ...this.formData,
+          primaryKeyList: this.primaryKeyList,
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+    primaryKeyList: {
+      handler(nval) {
+        this.$emit("subFormData", {
+          ...this.formData,
+          primaryKeyList: this.primaryKeyList,
+        });
       },
       immediate: true,
       deep: true,

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

@@ -785,6 +785,8 @@ import {
   dragTableInfo,
   addStatistic,
   updateStatistic,
+  addGroupTableStatistic,
+  updateGroupTableStatistic,
 } from "@/api/tablelist/commonTable";
 import { listTable } from "@/api/dragform/tableList";
 import {
@@ -1581,7 +1583,13 @@ export default {
       };
     },
     // 递归拼接查询语句
-    getSQLString(tableFieldList, fieldArr, tableArr, sqlType = "mysql") {
+    getSQLString(
+      tableFieldList,
+      fieldArr,
+      tableArr,
+      sqlType = "mysql",
+      formData
+    ) {
       let prefix = "{DBNAME}.";
       let asOrSpace = sqlType == "oracle" ? " " : " AS ";
       for (let i = 0; i < tableFieldList.length; i++) {
@@ -1617,8 +1625,8 @@ export default {
         }
       }
       // 如果主键不包含显示,则添加至sql语句中
-      let isNotInclude = this.primaryKeyList.find(
-        (val) => !val.isShow && val.fieldName == this.formData.primaryKey
+      let isNotInclude = formData.primaryKeyList.find(
+        (val) => !val.isShow && val.fieldName == formData.primaryKey
       );
       if (isNotInclude) {
         fieldArr.push(
@@ -1686,7 +1694,11 @@ export default {
         this.tableFieldList,
         fieldNameArr,
         relaTypeArr,
-        sqlType
+        sqlType,
+        {
+          ...this.formData,
+          primaryKeyList: this.primaryKeyList,
+        }
       );
       let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
       let asOrSpace = sqlType == "oracle" ? " " : " AS ";
@@ -1713,7 +1725,15 @@ export default {
       sql += "SELECT ";
       let fieldNameArr = [],
         relaTypeArr = [];
-      this.getSQLString(this.subFiledList, fieldNameArr, relaTypeArr, sqlType);
+      console.log(this.subFiledList);
+      this.getSQLString(
+        this.subFiledList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType,
+        this.subformData
+      );
+      console.log(fieldNameArr);
       let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
       let asOrSpace = sqlType == "oracle" ? " " : " AS ";
       sql +=
@@ -1729,6 +1749,42 @@ export default {
       }
       return sql;
     },
+    // 拼接数据统计查询sql
+    getSQLStr3(fieldList, tableName) {
+      let prefix = "{DBNAME}.";
+      let sqlType = this.databaseType; //数据库类型
+      // let sqlType = "oracle";
+      let sql = "";
+      // mysql
+      sql += "SELECT ";
+      let fieldNameArr = [],
+        relaTypeArr = [];
+      this.countData.primaryKeyList = fieldList.filter(
+        (item) => !item.isChildren
+      );
+      this.getSQLString(
+        fieldList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType,
+        this.countData
+      );
+      console.log(fieldNameArr);
+      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+      sql +=
+        fieldNameArr.join(",") +
+        " FROM " +
+        isNeedUsername +
+        prefix +
+        tableName +
+        asOrSpace +
+        tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
     // 数据统计sql
     countGetSQLStr(countByFieldList, tableName) {
       let prefix = "{DBNAME}.";
@@ -1771,7 +1827,10 @@ export default {
       sql += "SELECT ";
       let fieldNameArr = [],
         relaTypeArr = [];
-      this.getSQLString(this.subFiledList, fieldNameArr, relaTypeArr, sqlType);
+      this.getSQLString(this.subFiledList, fieldNameArr, relaTypeArr, sqlType, {
+        ...this.countData,
+        primaryKeyList: this.primaryKeyList,
+      });
       let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
       let asOrSpace = sqlType == "oracle" ? " " : " AS ";
 
@@ -1798,7 +1857,10 @@ export default {
       sql += "SELECT ";
       let fieldNameArr = [],
         relaTypeArr = [];
-      this.getSQLString(this.subFiledList, fieldNameArr, relaTypeArr, sqlType);
+      this.getSQLString(this.subFiledList, fieldNameArr, relaTypeArr, sqlType, {
+        ...this.formData,
+        primaryKeyList: this.primaryKeyList,
+      });
       let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
       let asOrSpace = sqlType == "oracle" ? " " : " AS ";
 
@@ -2035,6 +2097,7 @@ export default {
 
           // 关联子表回显
           let subTableData = this.$refs.subList.getTableInfo();
+          this.subFiledList = subTableData.fieldInfo;
           let echoData2 = {
             tableName: subTableData.tableName,
             tableFieldData: subTableData.fieldInfo,
@@ -2072,7 +2135,7 @@ export default {
           let tableList2 = {
             tId: this.tId,
             tableKey: table2tableKey, //  暂定
-            dtTableName: this.subTableName,
+            dtTableName: subTableData.tableName,
             primaryKey: this.subformData.primaryKey,
             orderByColumn: this.subformData.orderByColumn,
             sortOrder: this.subformData.isAsc,
@@ -2114,7 +2177,8 @@ export default {
           let countTableKey = uuidv4();
 
           let conutCondition = tempconut.relaObj;
-
+          let countColumnName = [];
+          this.getCol(countData.fieldInfo, countColumnName);
           // 数据统计表格参数
           let countTableList = {
             tId: this.tId,
@@ -2124,13 +2188,14 @@ export default {
             orderByColumn: "",
             sortOrder: "",
             sqlKey: uuidv4(),
-            dtColumnName: "", //列字
+            dtColumnName: countColumnName, //列字
             timeFormat: "",
             searchFieldList: countFieldLists, //搜索字段数组
-            tableSql: this.countGetSQLStr(
-              countData.fieldInfo,
-              countData.tableName
-            ),
+            // tableSql: this.countGetSQLStr(
+            //   countData.fieldInfo,
+            //   countData.tableName
+            // ),
+            tableSql: this.getSQLStr3(countData.fieldInfo, countData.tableName),
             echoData: JSON.stringify(countEchoData),
             conditionDefaultValueMap: conutCondition,
           };
@@ -2311,22 +2376,22 @@ export default {
             });
             // 修改统计数据
 
-            await updateStatistic({
+            await updateGroupTableStatistic({
               tableKey: this.subEchoData.tableKey,
               dragTableStatisticList: this.dragTableStatisticList,
               tableSqlList: this.tableSqlList,
               searchFieldList: searchFieldList2,
               conditionDefaultValueMap: subCondition,
-              dtTableName: this.subTableName,
+              dtTableName: subTableData.tableName,
             });
 
             // 修改统计状态
-            await updateStatistic({
+            await updateGroupTableStatistic({
               tableKey: this.countEchoData.tableKey,
               dragTableStatisticList: stateList,
               tableSqlList: stateSqlList,
               searchFieldList: countFieldLists,
-              dtTableName: stateName,
+              dtTableName: countData.tableName,
               conditionDefaultValueMap: conutCondition,
             });
           } else {
@@ -2370,22 +2435,22 @@ export default {
 
             res = await addDialogGroup(data);
             //  统计数据
-            await addStatistic({
+            await addGroupTableStatistic({
               tableKey: tableList2.tableKey,
               dragTableStatisticList: this.dragTableStatisticList,
               tableSqlList: this.tableSqlList,
               searchFieldList: searchFieldList2,
-              dtTableName: this.subTableName,
+              dtTableName: subTableData.tableName,
               conditionDefaultValueMap: subCondition,
             });
             console.log(stateList);
             // 统计状态
-            await addStatistic({
+            await addGroupTableStatistic({
               tableKey: countTableList.tableKey,
               dragTableStatisticList: stateList,
               tableSqlList: stateSqlList,
               searchFieldList: countFieldLists,
-              dtTableName: stateName,
+              dtTableName: countData.tableName,
               conditionDefaultValueMap: conutCondition,
             });
           }

ruoyi-ui/src/views/dialogTemplate/components/index.vue

@@ -2,21 +2,20 @@
   <div class="bigBox">
     <div class="info">
       <p class="tt">基础信息</p>
-      <div v-for="item in infoData[0]" :key="item.title">
-        <span class="titlestyle">{{ item.value }}</span>
-        <span
-          class="infostyle"
-          v-for="(val, index) in infoData[1]"
-          :key="index"
-          >{{ val[item.key] }}</span
-        >
+      <div
+        class="base-info-item"
+        v-for="{ label, prop, value } in infoData"
+        :key="prop"
+      >
+        <span class="titlestyle">{{ label }}</span>
+        <span class="infostyle">{{ value }}</span>
       </div>
     </div>
     <div class="tableBox">
       <div class="top">
-        <div class="left" v-if="tableCount[0]">
-          <p>{{ tableCount[0].statisticTitle }}</p>
-          <i>{{ tableCount[0].result }}</i>
+        <div class="left" v-if="topTableCountInfo.length">
+          <p>{{ topTableCountInfo[0].title }}</p>
+          <i>{{ topTableCountInfo[0].value }}</i>
         </div>
         <div class="right">
           <p>是否外协</p>
@@ -42,37 +41,47 @@
       <el-form ref="tableform" :model="tableDataForm">
         <el-table
           border
-          :data="tableData[1].data"
+          :data="tableData"
           style="width: 100%; margin-bottom: 20px"
         >
           <el-table-column
-            v-for="item in tableData[0].column"
-            :prop="item.key"
-            :label="item.value"
-            :key="item.value"
+            v-for="item in columns"
+            :prop="item.prop"
+            :label="item.label"
+            :key="item.prop"
             width="180"
+            align="center"
           >
             <template slot-scope="scope">
               <el-input
-                :v-if="scope.row[item.key]"
-                v-model="scope.row[item.key]"
+                v-if="!scope.row.id"
+                v-model="scope.row[item.prop]"
               ></el-input>
+              <span v-else>
+                {{ scope.row[item.prop] }}
+              </span>
             </template>
           </el-table-column>
           <el-table-column
-            v-if="isShowExcuteCol"
             label="操作"
             align="center"
             class-name="small-padding fixed-width"
           >
             <template slot-scope="scope">
-              <Menu
+              <!-- <Menu
                 :row="scope.row"
                 v-for="btnObj in excuteBtnArr"
                 :key="btnObj.id"
                 :listAll="btnObj"
                 @excuteHandler="excuteHandler"
-              ></Menu>
+              ></Menu> -->
+              <el-button
+                type="danger"
+                size="small"
+                @click="deleteHandler(scope.$index, scope.row)"
+              >
+                删除
+              </el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -80,7 +89,7 @@
         <div>
           <b>统计信息 </b>
           <span v-for="(item, index) in subCount" :key="index"
-            >{{ item.statisticTitle }}: {{ item.result }}</span
+            >{{ item.title }}: {{ item.value }}</span
           >
         </div>
 
@@ -108,6 +117,9 @@ import {
   btnCommonApi,
   dragTableInfo,
   unionListTableData,
+  getStatisticList,
+  addTableData,
+  delTableData,
 } from "@/api/tablelist/commonTable";
 import { camelCase } from "@/utils";
 import Menu from "@/views/tablelist/commonTable/BtnMenu.vue";
@@ -120,12 +132,22 @@ export default {
   components: { Menu },
   data() {
     return {
+      conditions: {}, //查询条件
+      // 当前行信息
+      row: {},
+      groupKey: "",
       // 基础信息行数据
       infoData: [],
       listInfo: {},
       // 是否外协
       checked: false,
+      topTableCountInfo: [], //上部状态统计信息
+      // 表格数据
       tableData: [],
+      columns: [],
+      tableBtnInfo: {},
+      subTableName: "",
+      subCount: [], //表格统计数据
       // 动态增加表格数据
       editData: [],
       tableDataForm: {},
@@ -148,7 +170,6 @@ export default {
           // tableCondition: ''
         },
       },
-      columns: [],
       // 排序方式 默认降序
       sortOrder: true,
       tableName: "",
@@ -165,7 +186,7 @@ export default {
       controlBtnArr: [],
     };
   },
-  props: ["groupKey", "rowobj", "tableCount", "subCount", "subTableName"],
+  props: ["rowobj", "tableCount"],
   computed: {
     isShowExcuteCol() {
       return !this.excuteBtnArr?.every((arr) => arr.children.length == 0);
@@ -177,33 +198,151 @@ export default {
       let obj = {
         // id:'',
       };
+      this.columns.forEach((item) => {
+        obj[item.prop] = "";
+      });
+      console.log(obj);
       this.addListData.push(obj);
-      this.tableData[1].data.push(obj);
+      this.tableData.push(obj);
     },
     // 保存
     saveBtnHandler() {
-      console.log(this.addListData);
+      let addCondition = {
+        task_key: this.row.bpmExecuteProcessTaskKey,
+        task_node_key: this.row.benTaskNodeKey,
+      };
+      // console.log(this.conditions);
+      // for (const key in this.conditions) {
+      //   addCondition[key.replace("#{", "").split(".")[1]] =
+      //     this.conditions[key];
+      // }
+      let addListData = this.tableData.filter((item) => !item.id);
+      addListData.forEach((item) => {
+        Object.assign(item, addCondition);
+      });
+
       let data = {
-        addListMap: this.addListData,
+        addListMap: addListData,
         basicMap: {
-          btnType: 10,
+          // btnType: "INSERT",
           tableName: this.subTableName,
-          visible: true,
+          // visible: true,
         },
         commMap: {},
         conditionMap: {},
       };
-      btnCommonApi(data).then((res) => {
+      // btnCommonApi(data).then((res) => {
+      //   console.log("保存", res);
+      // });
+      addTableData(data).then((res) => {
         console.log("保存", res);
+        if (res.code == 200) {
+          this.reloadInfo();
+          this.$message.success("保存成功!");
+        } else {
+          this.$message.error("网络异常,请稍后保存");
+        }
+      });
+    },
+    // 设置基础信息-表格信息
+    setBaseInfo(baseObj, dataObj) {
+      let tempObj = JSON.parse(baseObj.dtColumnNameEcho);
+      let Keys = tempObj.map((item) => {
+        return {
+          prop: Object.keys(item)[0],
+          label: item[Object.keys(item)[0]],
+        };
+      });
+      this.infoData = Keys.map((item) => {
+        return {
+          ...item,
+          value: dataObj.resultMap[item.prop],
+        };
+      });
+    },
+    // 设置表格数据
+    async setTableData(tableInfo, tableData) {
+      let { dtColumnNameEcho, dragTableBtnList, tableKey, dtTableName } =
+        tableInfo;
+      this.tableData =
+        tableData.map((item) => {
+          return item.resultMap;
+        }) || [];
+      console.log(this.tableData);
+      this.subTableName = dtTableName;
+      console.log(this.subTableName);
+      this.tableBtnInfo = dragTableBtnList;
+      this.columns = JSON.parse(dtColumnNameEcho)?.map((item) => {
+        let prop = Object.keys(item)[0];
+        return {
+          prop,
+          label: item[prop],
+        };
+      });
+      let res = await this.getStatisticsData(tableKey);
+      this.subCount = res.map((item) => {
+        return {
+          title: item.statisticTitle,
+          value: item.result,
+        };
       });
     },
+    // 设置顶部状态数据
+    setTopData(baseObj, dataObj) {
+      let { dtColumnNameEcho, dragTableBtnList, tableKey } = baseObj;
+      console.log(dragTableBtnList);
+      let temp = JSON.parse(dtColumnNameEcho) || [];
+      this.topTableCountInfo = temp.map((item) => {
+        let prop = camelCase(Object.keys(item)[0]);
+        return {
+          prop,
+          title: item[Object.keys(item)[0]],
+          value: dataObj.resultMap[prop] || "未知状态",
+        };
+      });
+    },
+    // 获取统计数据
+    async getStatisticsData(tableKey) {
+      try {
+        let res = await getStatisticList({
+          queryMap: { tableKey, ...this.conditions },
+        });
+        if (res.code == 200) {
+          console.log(res);
+          return res.data;
+        } else {
+          throw new Error();
+        }
+      } catch (error) {
+        console.log(error);
+        this.$message.error("网络异常,获取数据失败");
+      }
+    },
+    reloadInfo() {
+      let { row, groupKey } = this;
+      this.getLists({ row, groupKey });
+    },
     // 获取弹窗信息
     async getLists(payload) {
       // let res = await dragGroupTableInfo({ queryMap: { groupKey: groupKey } });
-      let resTableInfo = await getProcessPopupTableInfo({ queryMap: payload });
-      let resTableData = await getProcessPopupTableList({ queryMap: payload });
+      this.addListData = [];
+      this.row = payload.row;
+      this.groupKey = payload.groupKey;
+      let resTableInfo = await getProcessPopupTableInfo({
+        queryMap: { groupKey: payload.groupKey },
+      });
+
+      if (resTableInfo.code == 200) {
+        let res = await this.getTableData(resTableInfo.data, payload.row);
+        let { template } = resTableInfo.data.resultMap;
+        this.setBaseInfo(template[0], res[0][0]); //设置基础信息
+        this.setTableData(template[1], res[1]);
+        this.setTopData(template[2], res[2][0]);
+      }
+
       // 获取表格tablekey 和 sort
-      console.log(resTableData);
+      console.log(resTableInfo);
+      return;
       this.tableLists = JSON.parse(res.msg);
 
       this.tableLists.forEach(async (item) => {
@@ -242,6 +381,34 @@ export default {
         }
       });
     },
+    // 获取所有表格数据
+    async getTableData(tableInfo, row) {
+      let queryMap = {
+          groupKey: this.groupKey,
+        },
+        conditionKeys = [];
+      conditionKeys = tableInfo.resultMap?.condition.map((item) =>
+        camelCase(item.replace("#{", "").replace(".", "_"))
+      );
+      this.conditions = {};
+      conditionKeys.forEach((item, index) => {
+        queryMap[tableInfo.resultMap?.condition[index]] = row[item];
+        this.conditions[tableInfo.resultMap?.condition[index]] = row[item];
+      });
+
+      try {
+        let resTableData = await getProcessPopupTableList({
+          queryMap,
+        });
+        if (resTableData.code == 200) {
+          console.log("resTableData", resTableData);
+          return resTableData.data.resultMap.result;
+        }
+      } catch (error) {
+        console.log(error);
+        this.$message.error("网络异常");
+      }
+    },
     // 获取基础信息 表头数据
     async getTableHandle(res, sort) {
       this.columns = [];
@@ -336,6 +503,15 @@ export default {
         return this.tableList;
       }
     },
+    // 删除回调
+    async deleteHandler(index, row) {
+      if (row.id) {
+        // 发送请求 删除数据
+        let res = await delTableData();
+      } else {
+        this.tableData.splice(index, 1);
+      }
+    },
     // 处理列表信息
     columnsHandler(columns) {
       let resArr = [];
@@ -426,7 +602,7 @@ export default {
       border-radius: 20px;
     }
     .infostyle {
-      background-color: #ebedf2;
+      // background-color: #ebedf2;
       color: #e84e95;
     }
   }
@@ -489,4 +665,8 @@ export default {
     }
   }
 }
+.base-info-item {
+  display: flex;
+  justify-content: space-between;
+}
 </style>

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

@@ -713,7 +713,7 @@ export default {
       try {
         let payLoad = {
           basicMap: {
-            btnType: UPDATE,
+            btnType: "UPDATE",
             btnKey: this.currentBtnData.btnKey,
             visible: "false",
             sqlKey: this.templateInfo.template.sqlKey,
@@ -1096,10 +1096,12 @@ export default {
           if (Object.keys(this.defaultValue).length) {
             //修改
             // 后台接收需要是表中字段真实的名称，无所谓驼峰。
+            // data.conditionMap[this.templateInfo.template?.primaryKey] =
+            //   this.defaultValue[
+            //     camelCase(this.templateInfo.template?.primaryKey)
+            //   ];
             data.conditionMap[this.templateInfo.template?.primaryKey] =
-              this.defaultValue[
-                camelCase(this.templateInfo.template?.primaryKey)
-              ];
+              this.defaultValue[this.templateInfo.template?.primaryKey];
             Object.keys(values).map((k) => {
               data.commMap[k] = values[k];
             });
@@ -1318,6 +1320,7 @@ export default {
 
     // 操作列回调
     excuteHandler(btnData, row) {
+      console.log(btnData, row);
       let { btnType, btnParams } = btnData;
       this.currentBtnData = btnData;
       this.currentRow = JSON.parse(JSON.stringify(row));