弹窗管理

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

@@ -0,0 +1,11 @@
+import request from '@/utils/request'
+
+// 新增拖拽格组
+export function addDialogGroup(data) {
+  return request({
+    url: '/system/group/addConfigurationGroup',
+    method: 'post',
+    data: data,
+    baseURL: process.env.VUE_APP_BASE_API3
+  })
+}

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

@@ -0,0 +1,259 @@
+<template>
+  <div class="style-wrap">
+    <el-form
+      ref="formData"
+      :model="formData"
+      label-width="100px"
+      :rules="rules"
+    >
+      <el-form-item label="菜单名称" prop="menuName">
+        <el-input v-model="formData.menuName"></el-input>
+      </el-form-item>
+      <el-form-item label="是否显示列表" v-if="false">
+        <el-switch v-model="formData.isShowList"></el-switch>
+      </el-form-item>
+      <el-form-item label="时间格式" prop="timeFormate">
+        <el-select
+          v-model="formData.timeFormate"
+          placeholder="请选择时间格式"
+        >
+          <el-option
+            v-for="val in dict.type.sys_time_format"
+            :key="val.value"
+            :label="val.label"
+            :value="val.value"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="表格主键" prop="primaryKey">
+        <el-select
+          v-model="formData.primaryKey"
+          placeholder="请选择表格主键"
+        >
+          <el-option
+            v-for="val in primaryKeyList"
+            :key="val.fieldName"
+            :label="val.fieldDescription"
+            :value="val.fieldName"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="操作列按钮" prop="btnGroupList">
+        <el-select
+          v-model="formData.btnGroupList"
+          placeholder="请选择按钮组"
+          clearable
+          multiple
+        >
+          <el-option
+            v-for="val in btnGroupOptions"
+            :key="val.btnKey"
+            :label="val.btnGroupName"
+            :value="val.btnKey"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="排序依赖字段">
+        <el-select
+          v-model="formData.orderByColumn"
+          placeholder="请选择排序依赖"
+        >
+          <el-option
+            v-for="val in orderByFieldList"
+            :key="val.fieldName"
+            :label="val.fieldDescription"
+            :value="val.tableName + '.' + val.fieldName"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="排序方式" v-show="formData.orderByColumn">
+        <el-radio v-model="formData.isAsc" :label="false"
+          >升序</el-radio
+        >
+        <el-radio v-model="formData.isAsc" :label="true"
+          >降序</el-radio
+        >
+      </el-form-item>
+      <el-form-item label="依赖方式">
+        <el-select v-model="formData.relyOption" placeholder="请选择依赖方式">
+          <el-option
+            v-for="item in relyOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+        <el-select v-model="formData.relyFile" placeholder="请选择当前表字段">
+          <el-option
+            v-for="item in orderByFieldList"
+            :key="item.fieldName"
+            :label="item.fieldDescription"
+            :value="item.tableName + '.' + item.fieldName">
+          </el-option>
+        </el-select>
+        <el-input v-show="formData.relyOption === '0'" v-model="formData.relayValue" placeholder="请输入依赖值"></el-input>
+
+        <el-select
+          v-show="formData.relyOption === '1'"
+          v-model="formData.relytableName"
+          placeholder="请选择依赖表"
+          filterable
+          @change="getrelyList"
+          class="mb10"
+        >
+          <el-option
+            v-for="item in dragTableList"
+            :key="item.dtName"
+            :label="item.dtName"
+            :value="item.dtName"
+          >
+            <span style="float: left">{{ item.dtName }}</span>
+            <span style="float: right; color: #8492a6; font-size: 13px">{{
+              item.dtTableName
+            }}</span>
+          </el-option>
+        </el-select>
+
+        <el-select
+            v-show="formData.relytableName && formData.relyOption === '1'"
+            v-model="formData.relaykey"
+            placeholder="请选择依赖字段"
+          >
+          <el-option
+            v-for="item in dragTableFilds"
+            :key="item.keu"
+            :label="item.val"
+            :value="item.key"
+          ></el-option>
+        </el-select>
+      </el-form-item>
+               
+    </el-form>
+  </div>
+</template>
+
+<script>
+import { listType } from "@/api/system/tenant/type";
+import { getDicts } from "@/api/system/dict/data";
+
+export default {
+  name: "StyleFormPanel",
+  dicts: ["sys_time_format", "table_statistic_type"],
+  props: {
+    subFieldList: {
+      default: [],
+      type: Array,
+    },
+    dragTableList: {
+      default: [],
+      type: Array,
+    },
+    btnGroupOptions: {
+      default: [],
+      type: Array,
+    }
+  },
+  components: {},
+  data() {
+    return {
+      dragTableFilds:{},
+      rules: {},
+      formData: {
+        relytableName:''
+      },
+      relyFileds: {},
+      conditionDefaultValueMap: '',
+      relyOptions:[
+        {
+         value: '0',
+         label: '自定义依赖值'
+        },
+        {
+          value: '1',
+          label: '依赖其他字段'
+        }
+      ],
+    }
+  },
+  computed: {
+    orderByFieldList() {
+      return this.tableFieldList;
+    },
+    primaryKeyList() {
+      console.log(this.subFieldList)
+      return this.subFieldList.filter((item) => !item.isChildren);
+    },
+    orderByFieldList() {
+      return this.subFieldList;
+    },
+    relayKeyList(){
+      return this.subFieldList.filter((item) => !item.isChildren);
+    }
+  },
+  watch: {
+    tableFieldList: {
+      handler(nval) {
+        if (!nval || !nval.length) return;
+        this.allFieldList = nval;
+        this.isShowFieldList = nval.filter((item) => item.isShow);
+        let tempList = nval.map((item) => {
+          return {
+            tableName: item.tableName,
+            tableComment: item.tableComment,
+          };
+        });
+        this.tableList = [];
+        tempList.forEach((item) => {
+          let isHas = this.tableList.find(
+            (it) => it.tableName == item.tableName
+          );
+          if (!isHas) {
+            this.tableList.push(item);
+          }
+        });
+      },
+      immediate: true,
+      deep: true,
+    },
+
+    formData:{
+      handler(nval){
+        this.$emit('subFormData', this.formData)
+      },
+      immediate: true,
+      deep: true,
+    }
+  },
+  methods: {
+    getrelyList() {
+      this.dragTableList.forEach(item => {
+        if(this.formData.relytableName == item.dtName){
+          this.dragTableFilds = JSON.parse(item.dtColumnName)
+        }
+      })
+      this.dragTableFilds.forEach(item => {
+        for(let val in item){
+          item.key = val
+          item.val = item[val]
+        }
+      })
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.style-wrap {
+  .condition-table-wrap {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    .table-title {
+      margin-bottom: 10px;
+      font-size: 16px;
+      font-weight: 600;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,1851 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col 
+      :span="18" 
+      :class="{ edit: menudata }">
+        <el-card v-if="tabIndex == '0' || tabIndex == '2'" shadow="always" :body-style="{ padding: '20px' }">
+          <template #header>
+            <div>
+              <span>基础信息</span>
+            </div>
+          </template>
+          <el-select
+            v-model="tableName"
+            placeholder="请选择数据表"
+            filterable
+            @change="getList"
+            class="mb10"
+          >
+            <el-option
+              v-for="item in tableList"
+              :key="item.tableName"
+              :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>
+          <el-table
+            :data="tableFieldList"
+            border
+            ref="dragTable"
+            row-key="id"
+            max-height="500px"
+          >
+            >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50"
+              class-name="allowDrag"
+            >
+            </el-table-column>
+            <el-table-column prop="fieldName" label="数据字段">
+            </el-table-column>
+            <el-table-column prop="fieldDescription" label="字段描述">
+              <template slot-scope="scope">
+                <input
+                  :class="{
+                    isNullDesc:
+                      scope.row.fieldDescription == '' &&
+                      scope.row.isShow &&
+                      isInputInvalid
+                        ? true
+                        : false,
+                    ipt: true,
+                  }"
+                  v-model="scope.row.fieldDescription"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column 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 in scope.row.relationTableList"
+                    :key="item.tableName"
+                    :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 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 in scope.row.relaFieldNameList"
+                    :key="item.fieldName"
+                    :label="item.fieldDescription"
+                    :value="item.fieldName"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column 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 in relaTypeList"
+                    :key="item.value"
+                    :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>
+        </el-card>
+
+        <SubList ref="subList" v-if="tabIndex == '1'" :menudata="menudata" :tableList="tableList" @tableNameChange="subNameHandler" @fieldListChange="filedListHandler"/>
+      </el-col>
+
+      <el-col :span="6" :class="{ menudata: menudata }">
+        <el-tabs v-model="activeName" @tab-click="tabhandleClick">
+          <el-tab-pane label="基础信息" name="menuedit">
+            <el-card shadow="always" :body-style="{ padding: '10px' }">
+              <el-form
+                ref="formData"
+                :model="formData"
+                label-width="100px"
+                :rules="rules"
+              >
+                <el-form-item label="组名称" prop="groupName">
+                  <el-input v-model="formData.groupName"></el-input>
+                </el-form-item>
+                <el-form-item label="组描述" prop="groupDescription">
+                  <el-input v-model="formData.groupDescription"></el-input>
+                </el-form-item>
+                <el-form-item label="是否显示列表" v-if="false">
+                  <el-switch v-model="formData.isShowList"></el-switch>
+                </el-form-item>
+                <el-form-item label="时间格式" prop="timeFormate">
+                  <el-select
+                    v-model="formData.timeFormate"
+                    placeholder="请选择时间格式"
+                  >
+                    <el-option
+                      v-for="val in dict.type.sys_time_format"
+                      :key="val.value"
+                      :label="val.label"
+                      :value="val.value"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="表格主键" prop="primaryKey">
+                  <el-select
+                    v-model="formData.primaryKey"
+                    placeholder="请选择表格主键"
+                  >
+                    <el-option
+                      v-for="val in primaryKeyList"
+                      :key="val.fieldName"
+                      :label="val.fieldDescription"
+                      :value="val.fieldName"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="操作列按钮" prop="btnGroupList">
+                  <el-select
+                    v-model="formData.btnGroupList"
+                    placeholder="请选择按钮组"
+                    clearable
+                    multiple
+                  >
+                    <el-option
+                      v-for="val in btnGroupOptions"
+                      :key="val.btnKey"
+                      :label="val.btnGroupName"
+                      :value="val.btnKey"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="排序依赖字段">
+                  <el-select
+                    v-model="formData.orderByColumn"
+                    placeholder="请选择排序依赖"
+                  >
+                    <el-option
+                      v-for="val in primaryKeyList"
+                      :key="val.fieldName"
+                      :label="val.fieldDescription"
+                      :value="val.fieldName"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="排序方式" v-show="formData.orderByColumn">
+                  <el-radio v-model="formData.isAsc" :label="false"
+                    >升序</el-radio
+                  >
+                  <el-radio v-model="formData.isAsc" :label="true"
+                    >降序</el-radio
+                  >
+                </el-form-item>
+                <el-form-item label="当前表查询字段">
+                  <el-select v-model="formData.relyFile" placeholder="请选择当前表字段">
+                    <el-option
+                      v-for="item in orderByFieldList"
+                      :key="item.fieldName"
+                      :label="item.fieldDescription"
+                      :value="item.tableName + '.' + item.fieldName">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+
+                <el-form-item label="依赖方式">
+                  <el-select v-model="formData.relyOption" placeholder="请选择依赖方式">
+                    <el-option
+                      v-for="item in relyOptions"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value">
+                    </el-option>
+                  </el-select>
+                  
+                  <el-input v-show="formData.relyOption === '0'" v-model="relayValue" placeholder="请输入依赖值"></el-input>
+
+                  <el-select
+                    v-show="formData.relyOption === '1'"
+                    v-model="formData.relytableName"
+                    placeholder="请选择依赖表"
+                    filterable
+                    @change="getrelyList"
+                    class="mb10"
+                  >
+                    <el-option
+                      v-for="item in dragTableList"
+                      :key="item.dtName"
+                      :label="item.dtName"
+                      :value="item.dtName"
+                    >
+                      <span style="float: left">{{ item.dtName }}</span>
+                      <span style="float: right; color: #8492a6; font-size: 13px">{{
+                        item.dtTableName
+                      }}</span>
+                    </el-option>
+                  </el-select>
+
+                  <el-select
+                      v-show="formData.relytableName && formData.relyOption === '1'"
+                      v-model="formData.relaykey"
+                      placeholder="请选择依赖字段"
+                    >
+                    <el-option
+                      v-for="item in dragTableFilds"
+                      :key="item.keu"
+                      :label="item.val"
+                      :value="item.key"
+                    ></el-option>
+                  </el-select>
+                </el-form-item>
+               
+                <el-form-item>
+                  <el-button size="mini" @click="previewHandle">预览</el-button>
+                  <el-button size="mini" type="primary" @click="createHandle">{{
+                    tId ? "确认修改" : "确认创建"
+                  }}</el-button>
+                </el-form-item>
+
+              </el-form>
+            </el-card>
+          </el-tab-pane>
+          <el-tab-pane label="关联子表" name="styleEdit">
+            <el-card shadow="always" :body-style="{ padding: '10px' }">
+              <StyleFormPanel
+                ref="styleTableRef"
+                :btnGroupOptions="btnGroupOptions"
+                :subFieldList="subFiledList"
+                @subFormData="subFormDataHandler" 
+                :dragTableList="dragTableList"
+              />
+            </el-card>
+          </el-tab-pane>
+          <el-tab-pane label="数据统计" name="datacount">
+            <el-card shadow="always" :body-style="{ padding: '10px' }">
+              <el-button
+                type="primary"
+                class="inline-large-button addcount"
+                icon="el-icon-plus"
+                size="mini"
+                @click="addDataDialog"
+              >
+                添加数据字段
+              </el-button>
+              <el-form
+                ref="countData"
+                :model="formData"
+                label-width="100px"
+                :rules="rules"
+                >
+                  <el-form-item label="按钮组" prop="btnGroupList">
+                    <el-select
+                      v-model="countData.btnGroupList"
+                      placeholder="请选择按钮组"
+                      clearable
+                      multiple
+                    >
+                      <el-option
+                        v-for="val in btnGroupOptions"
+                        :key="val.btnKey"
+                        :label="val.btnGroupName"
+                        :value="val.btnKey"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+                  <el-form-item label="展示标题" prop="title">
+                    <el-input v-model="countData.title" placeholder="请输入展示标题"></el-input>
+                  </el-form-item>
+                  <el-form-item label="展示字段" prop="fileds">
+                    <el-select
+                      v-model="countData.fileds"
+                      placeholder="请选择展示字段"
+                    >
+                      <el-option
+                        v-for="val in countFiledsList"
+                        :key="val.value"
+                        :label="val.label"
+                        :value="val.value"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+
+                  <el-form-item label="展示状态" prop="showStatus" v-show="countData.fileds == 0">
+                    <el-input v-model="countData.title" placeholder="请输入展示状态"></el-input>
+                  </el-form-item>
+
+                  <el-form-item label="关联字段" prop="showDicts" v-show="countData.fileds == 1">
+                    <el-select
+                      v-model="countData.dict"
+                      placeholder="请选择关联哪个字典"
+                    >
+                      <el-option
+                        v-for="val in countDicts"
+                        :key="val.value"
+                        :label="val.label"
+                        :value="val.value"
+                      ></el-option>
+                    </el-select>
+                  </el-form-item>
+              </el-form>
+
+              <el-table
+              :data="dragTableStatisticList"
+              border
+              class="mb10"
+              style="width: 100%"
+            >
+              <!-- <el-table-column prop="number" label="序号" width="50"> -->
+              style="width: 100%">
+              <el-table-column
+                type="index"
+                label="序号"
+                width="50"
+                class-name="allowDrag"
+              >
+              </el-table-column>
+       
+              <el-table-column
+                prop="statisticTitle"
+                label="统计标题"
+                width="83"
+              >
+              </el-table-column>
+              <el-table-column
+                prop="statisticField"
+                label="统计数据"
+                width="80"
+              >
+              </el-table-column>
+              <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="handleUpdateStat(scope.row)"
+                          >修改
+                        </el-button>
+                      </el-dropdown-item>
+                      <el-dropdown-item>
+                        <el-button
+                          size="mini"
+                          type="text"
+                          icon="el-icon-delete"
+                          @click="handleDeleteStat(scope.row)"
+                          >删除
+                        </el-button>
+                      </el-dropdown-item>
+                    </el-dropdown-menu>
+                  </el-dropdown>
+                </template>
+              </el-table-column>
+            </el-table>
+            </el-card>
+          </el-tab-pane>
+          
+        </el-tabs>
+      </el-col>
+    </el-row>
+
+    <el-dialog title="效果预览" :visible.sync="isShowPreview" width="50%">
+      <div class="cardBox">
+        <el-card
+          shadow="hover"
+          :body-style="{ padding: '20px' }"
+          class="card"
+          v-for="(item, index) in deepragTableStatisticList"
+          :key="index"
+        >
+          <el-tooltip
+            class="item"
+            effect="dark"
+            :content="item.statisticTitle"
+            placement="top-start"
+          >
+            <div class="title">
+              {{
+                item.statisticTitle
+                  ? item.statisticTitle
+                  : item.statisticDescription
+              }}
+            </div>
+          </el-tooltip>
+
+          <div class="type">
+            <div class="count">统计结果</div>
+          </div>
+        </el-card>
+      </div>
+
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="18">
+          <el-input placeholder="请输入" clearable />
+        </el-col>
+
+        <el-col :span="6" class="previewbtn">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            size="small"
+            @click="() => {}"
+            >搜索</el-button
+          >
+          <el-button icon="el-icon-refresh" size="small" @click="() => {}"
+            >重置</el-button
+          >
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="10" class="mb8">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="() => {}"
+            >新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="success"
+            plain
+            icon="el-icon-edit"
+            size="mini"
+            :disabled="false"
+            @click="() => {}"
+            >修改
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="danger"
+            plain
+            icon="el-icon-delete"
+            size="mini"
+            :disabled="false"
+            @click="() => {}"
+            >删除
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button plain icon="el-icon-upload2" size="mini" @click="() => {}"
+            >导入
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            type="warning"
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="() => {}"
+            >导出
+          </el-button>
+        </el-col>
+      </el-row>
+      <el-table :data="tableDataList" @selection-change="() => {}">
+        <el-table-column
+          type="selection"
+          width="55"
+          align="center"
+        ></el-table-column>
+        <el-table-column
+          v-for="item in columns"
+          :key="item.key + item.value"
+          :label="item.value"
+          align="center"
+          :prop="toUpperCase(item.key)"
+        />
+        <el-table-column
+          label="操作"
+          align="center"
+          class-name="small-padding fixed-width"
+        >
+          <template>
+
+            <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="() => {}"
+                    >修改</el-button
+                  ></el-dropdown-item
+                >
+                <el-dropdown-item
+                  ><el-button
+                    size="mini"
+                    type="text"
+                    icon="el-icon-delete"
+                    @click="() => {}"
+                    >删除</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"
+      />
+      <template #footer>
+        <span>
+          <el-button @click="isShowPreview = false">关闭</el-button>
+          <el-button type="primary" @click="createHandle">{{
+            tId ? "确认修改" : "确认关联"
+          }}</el-button>
+        </span>
+      </template>
+    </el-dialog>
+
+    <!-- 添加数据统计对话框 -->
+    <el-dialog :title="staictitle" :visible.sync="isShowAddData" width="30%">
+      <el-form label-width="100px" :model="dataCountFormData">
+        <el-form-item label="统计标题" prop="statisticTitle">
+          <el-input v-model="dataCountFormData.statisticTitle"></el-input>
+        </el-form-item>
+
+        <el-form-item label="统计数据">
+          <el-select
+            v-model="dataCountFormData.statisticField"
+            placeholder="请选择统计字段"
+          >
+            <el-option
+              v-for="item in dataArr"
+              :key="item.id"
+              :label="item.fieldName"
+              :value="item.tableName + '.' + item.fieldName"
+            >
+              <span style="float: left; margin-right: 5px"
+                >{{ isShowTableName }}
+              </span>
+              <span style="float: right; color: #8492a6; font-size: 13px">{{
+                item.fieldName
+              }}</span>
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="统计类型">
+          <el-select
+            v-model="dataCountFormData.statisticType"
+            placeholder="请选择统计类型"
+          >
+            <el-option
+              v-for="item in dataType"
+              :key="item.dictCode"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="closeAddDialog">取 消</el-button>
+        <el-button
+          v-if="staictitle == '修改统计数据字段'"
+          type="primary"
+          @click="upadtaData"
+          >确 定</el-button
+        >
+
+        <el-button v-else type="primary" @click="addData">确 定</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  delTableData,
+  dragTableInfo,
+  unionListTableData,
+  getInfoBySqlKey,
+  addTableData,
+  addStatistic,
+  updateStatistic,
+} from "@/api/tablelist/commonTable";
+import { listTable, removeTableList } from "@/api/dragform/tableList";
+import { getDicts } from "@/api/system/dict/data";
+import {
+  getFormName,
+  getListName,
+  dragTablePreview,
+} from "@/api/dragform/form.js";
+import { addGroup, listGroup, getTable, delGroup, updataGroup } from '@/api/relateTable/index.js'
+import {addDialogGroup} from "@/api/dialogMange/index.js"
+import { getTableInfo, editTable } from "@/api/system/table.js";
+import { addDragTable } from "@/api/tablelist/commonTable.js";
+import { getParticMenu, updateMenu } from "@/api/system/menu.js";
+import { getMenuList, addMenu } from "@/api/menu.js";
+import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
+import { mapState } from "vuex";
+import Sortable from "sortablejs";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { v4 as uuidv4 } from "uuid";
+import { listBtn } from "@/api/system/btn";
+import StyleFormPanel from "./components/StyleFormPanel.vue";
+import SubList from "./styleMange/tablelist.vue";
+
+
+export default {
+  name: "tableMange",
+  dicts: ["sys_time_format", "table_statistic_type"],
+  props: [],
+  components: { Queryfrom, Treeselect, StyleFormPanel, SubList},
+  data() {
+    return {
+      dragTableList:[],
+      dragTableFilds:{},
+      // 子表tablename
+      subTableName:'',
+      subFiledList:[],
+      // 依赖表名称
+      // relytableName: '',
+      staictitle: "添加统计数据字段",
+      isInputInvalid: false,
+      // 修改表格时的menuId
+      menuId: "",
+      // 修改表格的id
+      tId: "",
+      // 当前模板信息
+      templateInfo: {},
+      // 排序方式 默认降序
+      sortState: true,
+      // 列信息
+      columns: {},
+      // 查询条件
+      queryFromWhere: {},
+      // 当前table唯一标识
+      sqlKey: "",
+      // 动态数据sqlkey
+      staticSqlKey: "",
+      // 表格的高度
+      tableKey: "",
+      // tableHeight: document.documentElement.scrollHeight - 245 + "px",
+      tableList: [], //所有表格列表
+      tableFieldList: [], // 当前表格字段数据
+      relayFieldList: [],
+      tableName: "", // 当前表名称
+
+      relationTableList: [], //关联表格列表
+      relationFieldList: [], //关联字段列表
+      relationTypeList: [], //关联方式列表
+      total: 0, //表格数据总数
+      relyOptions:[
+        {
+         value: '0',
+         label: '自定义依赖值'
+        },
+        {
+          value: '1',
+          label: '依赖其他表字段'
+        }
+      ],
+      // 依赖值
+      relayValue: '',
+      // 依赖字段
+      relyFileds: {},
+      relaTypeList: [
+        {
+          label: "等值连接",
+          value: "INNER JOIN",
+        },
+        {
+          label: "左连接",
+          value: "LEFT JOIN",
+        },
+        {
+          label: "右连接",
+          value: "RIGHT JOIN",
+        },
+      ],
+      headerList: [
+        {
+          prop: "fieldName",
+          label: "数据字段",
+        },
+        {
+          prop: "fieldDescription",
+          label: "字段描述",
+        },
+        {
+          prop: "relationTable",
+          label: "关联表",
+        },
+        {
+          prop: "relationFieldName",
+          label: "关联字段",
+        },
+        {
+          prop: "relationType",
+          label: "关联方式",
+        },
+        {
+          prop: "isShow",
+          label: "是否显示",
+        },
+        {
+          prop: "isSearch",
+          label: "是否包含查询",
+        },
+        {
+          prop: "isExport",
+          label: "是否导出",
+        },
+        {
+          prop: "isCount",
+          label: "是否统计",
+        },
+      ], //表头列表
+
+      // 基础信息编辑
+      formData: {
+        groupName: "",
+        groupDescription: "",
+        routePath: undefined,
+        isShowList: true,
+        timeFormate: "",
+        orderByColumn: "",
+        isAsc: false,
+        primaryKey: "",
+        btnGroupList: [],
+      },
+      // 统计信息
+      countData: {},
+      rules: {
+        groupName: [
+          { required: true, message: "请输入组名称", trigger: "blur" },
+        ],
+        groupDescription: [
+          { required: true, message: "请输入组描述", trigger: "blur" },
+        ],
+        timeFormate: [
+          { required: true, message: "请选择时间格式", trigger: "change" },
+        ],
+        primaryKey: [
+          { required: true, message: "请选择表格主键", trigger: "blur" },
+        ],
+        fieldDescription: [
+          { required: true, message: "请输入字段描述", trigger: "blur" },
+        ],
+      },
+      // tab切换
+      tabIndex: "0",
+      menus: [], //路由列表数据
+
+      // 预览弹窗相关
+      isShowPreview: false, //弹窗显示与隐藏
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderByColumn: "",
+        isAsc: false,
+        basicMap: {
+          sql: "",
+        },
+      },
+      loading: false, //表格加载
+      tableDataList: [], //数据
+      editData: {},
+      menuOrderNum: 0,
+      // tab动态切换
+      activeName: "menuedit",
+      // 数据统计对象
+      dataCountFormData: {},
+      // 添加数据统计表格
+      dragTableStatisticList: [],
+      deepragTableStatisticList: [],
+      tableSqlList: [],
+      searchFieldList: [],
+      // 是否切换到数据统计
+      menudata: false,
+      // 显示添加字段对话框dataArr
+      isShowAddData: false,
+      dataType: [],
+      uuid: "",
+
+      // 样式编辑tab数据
+      // dragTableStyleList: [],
+
+      //操作列按钮组数据
+      btnGroupOptions: [],
+
+      // 统计展示字段
+      countFiledsList: [
+        {
+          label: '直接展示',
+          value: '0'
+        },
+        {
+          label: '字段关联展示',
+          value: '1'
+        }
+      ],
+      // 关联字段字典
+      countDicts:[],
+      // 子表表单数据
+      subformData:{},
+    };
+  },
+  computed: {
+    // 数据字段
+    dataArr() {
+      return this.tableFieldList.filter((item) => item.isShow);
+    },
+    // 数据统计字段表名中文
+    isShowTableName() {
+      let tableComment;
+      this.tableList.forEach(item => {
+        if(item.tableName === this.tableName){
+          tableComment = item.tableComment
+        }
+      })
+      return tableComment
+    },
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+      username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
+    }),
+    searchArr() {
+      if (!this.templateInfo?.where?.length) return [];
+      return this.templateInfo.where.map((item) => item.conditionName);
+    },
+    checkedWhere() {
+      if (!this.templateInfo?.where?.length) return [];
+      return this.templateInfo?.where.filter((item) => {
+        return this.checkedList.includes(item.conditionName);
+      });
+    },
+    orderByFieldList() {
+      // return this.tableFieldList.filter((item) => item.isShow);
+      return this.tableFieldList;
+    },
+    primaryKeyList() {
+      return this.tableFieldList.filter((item) => !item.isChildren);
+    },
+    relayKeyList(){
+      return this.relayFieldList.filter((item) => !item.isChildren);
+    }
+  },
+  watch: {
+    tableName: function (val) {
+      if (val) {
+        this.relationTableList = this.tableList
+          .filter((item) => item.tableName != val)
+          .map((item) => {
+            return {
+              tableName: item.tableName,
+              tableComment: item.tableComment,
+            };
+          });
+      } else {
+        this.relationTableList = [];
+      }
+    }
+  },
+  methods: {
+    subNameHandler(val){
+      this.subTableName = val
+    },
+    filedListHandler(list){
+      this.subFiledList = list
+    },
+    subFormDataHandler(data){
+      this.subformData = data
+    },
+    /** 查询列表 */
+    getList(queryParams) {
+      if (!this.tableName) return;
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: this.tableName,
+      };
+      let tableComment = this.getTableCommont(this.tableName, this.tableList);
+      // 获取当前表单结构信息
+      getListName(data).then((res) => {
+        // console.log(res);
+        this.tableFieldList = res.map((item, index) => {
+          return {
+            id: this.tableName + "_" + 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: this.relationTableList,
+            tableName: this.tableName,
+            tableComment,
+            relationFieldList: [],
+          };
+        });
+        // console.log(this.tableFieldList);
+      });
+    },
+    getrelyList() {
+      console.log(this.formData.relytableName);
+      this.dragTableList.forEach(item => {
+        if(this.formData.relytableName == item.dtName){
+          this.dragTableFilds = JSON.parse(item.dtColumnName)
+        }
+      })
+      this.dragTableFilds.forEach(item => {
+        for(let val in item){
+          item.key = val
+          item.val = item[val]
+        }
+      })
+    },
+    getdragTable(){
+       let queryParams = {
+        isEnablePaging:false,
+        dtType: 0
+      }
+      listTable(queryParams).then(res => {
+        console.log(res);
+        this.dragTableList = res.rows
+      })
+    },
+    // 关联表变化回调
+    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 tableComment = this.getTableCommont(
+        row.relationTable,
+        this.tableList
+      );
+      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,
+          tableComment,
+          relationFieldList: [],
+          isChildren: true,
+        };
+      });
+      // this.tableFieldList = [...this.tableFieldList, ...row.relationFieldList];
+      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;
+    },
+    // 勾选框回调
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      // this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    // 分页查询
+    pageList(row) {
+      this.$refs.mychild.pageList(
+        row == undefined
+          ? {
+              limit: this.queryParams.pageSize,
+              page: this.queryParams.pageNum,
+            }
+          : row
+      );
+    },
+    // 多选框改变回调
+    checkedChangeHandle(val) {},
+    // 获取所有表格
+    async getAllTable() {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+      };
+      let res = await getFormName(data);
+
+      const baseTable = await this.getDicts("base_table");
+
+      this.tableList = res.data.filter((item) => {
+        return !baseTable.data.some(
+          (value) =>
+            value.dictValue.toLowerCase() == item.tableName.toLowerCase()
+        );
+      });
+    },
+    //处理表格行拖拽
+    initDragTable() {
+      const el = this.$refs.dragTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      const sortable = Sortable.create(el, {
+        handle: ".allowDrag",
+        onEnd: (evt) => {
+          const targetRow = this.tableFieldList.splice(evt.oldIndex, 1)[0];
+          this.tableFieldList.splice(evt.newIndex, 0, targetRow);
+          for (let index in this.tableFieldList) {
+            this.tableFieldList[index].sort = parseInt(index) + 1;
+          }
+        },
+      });
+    },
+    // 校验字段合法性(递归版)
+    validateField(tableFieldList, validateParams) {
+      if (!tableFieldList.length) {
+        return;
+      }
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (!temp.fieldDescription?.trim() && temp.isShow) {
+          //描述字段不能为空
+          validateParams.isFieldDescrib = true;
+        }
+        if (
+          temp.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: "显示的字段数不能为空",
+        };
+      }
+      if (
+        tableFieldList.filter((item) => item.isExport && !item.isChildren)
+          .length == 0
+      ) {
+        return {
+          val: false,
+          msg: "导出字段中至少应有一个主表字段",
+        };
+      }
+      // 导出的字段的描述不能重复
+      let describeArr = tableFieldList
+        .filter((item) => item.isExport)
+        .map((item) => item.fieldDescription);
+      let isRepeat = false;
+      describeArr.map((item) => {
+        if (describeArr.indexOf(item) != describeArr.lastIndexOf(item)) {
+          isRepeat = true;
+        }
+      });
+      if (isRepeat) {
+        return {
+          val: false,
+          msg: "导出的字段描述不能重复",
+        };
+      }
+
+      return {
+        val: true,
+        msg: "",
+      };
+    },
+    // 递归拼接查询语句
+    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.tableName +
+        asOrSpace +
+        this.tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
+    // 拼接查询sql语句
+    getSQLStr2() {
+      let prefix = "{DBNAME}.";
+      let sqlType = this.databaseType; //数据库类型
+      // let sqlType = "oracle";
+      let sql = "";
+      // mysql
+      sql += "SELECT ";
+      let fieldNameArr = [],
+        relaTypeArr = [];
+      this.getSQLString(
+        this.subFiledList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType
+      );
+      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+      sql +=
+        fieldNameArr.join(",") +
+        " FROM " +
+        isNeedUsername +
+        prefix +
+        this.subTableName +
+        asOrSpace +
+        this.subTableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
+    // 处理列表信息
+    columnsHandler(columns) {
+      let resArr = [];
+      columns.forEach((item) => {
+        for (const key in item) {
+          let tempObj = {};
+          tempObj.key = key;
+          tempObj.value = item[key];
+          resArr.push(tempObj);
+        }
+      });
+      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(
+      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;
+        }
+      }
+    },
+    // 更新路由
+    reloadRouter() {
+      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      });
+    },
+
+    // 预览结果回调
+    async previewHandle() {
+      this.$refs.formData.validate(async (valid) => {
+        // 至少包含一个查询项
+        if (valid) {
+          if (!this.tableName) {
+            this.$message.error("请选择数据表");
+            return;
+          }
+          // 检验表单合法性
+          let validRes = this.validateTableData(this.tableFieldList);
+          if (!validRes.val) {
+            this.$message.error(validRes.msg);
+            return;
+          }
+          // 拼接预览的sql查询语句
+          this.queryParams.basicMap.sql = this.getSQLStr();
+          // 获取表头信息
+          let tempColumns = [],
+            searchFieldList = [];
+          this.getCol(this.tableFieldList, tempColumns, searchFieldList);
+          if (!searchFieldList.length) {
+            this.$message.warning("请至少选择一个包含查询字段");
+            return false;
+          }
+          const dataType = await this.getDicts("table_statistic_type");
+          this.deepragTableStatisticList = JSON.parse(
+            JSON.stringify(this.dragTableStatisticList)
+          );
+          this.deepragTableStatisticList.forEach((item) => {
+            dataType.data.forEach((val) => {
+              if (val.dictValue == item.statisticType) {
+                item.statisticType = val.dictLabel;
+              }
+            });
+          });
+          this.columns = this.columnsHandler(tempColumns);
+          this.queryParams.isAsc = this.formData.isAsc;
+          // 发送请求获取预览数据
+          let res = await dragTablePreview(this.queryParams);
+          this.tableDataList = [];
+          res.rows.forEach((item) => {
+            this.tableDataList.push(item.resultMap);
+          });
+          this.total = res.total;
+          this.isShowPreview = true;
+        } else {
+          this.$message.warning("请完善表单");
+          return false;
+        }
+      });
+    },
+    // 创建回调
+    async createHandle() {
+      this.isInputInvalid = true;
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          // 检验表单合法性
+          let validRes = this.validateTableData(this.tableFieldList);
+          if (!validRes.val) {
+            this.$message.error(validRes.msg);
+            return;
+          }
+          let columns1 = []
+          this.getCol(
+            this.tableFieldList,
+            columns1,
+          );
+          let relyName = ''
+          let subrelayName = ''
+          // 处理依赖表
+          this.dragTableList.forEach(item => {
+            if(item.dtName == this.formData.relytableName){
+              relyName = item.dtTableName
+            }
+          })
+
+          this.dragTableList.forEach(item => {
+            if(item.dtName == this.subformData.relytableName){
+              subrelayName = item.dtTableName
+            }
+          })
+          let echoData = {
+            tableName: this.tableName,
+            tableFieldData: this.tableFieldList,
+            formData: this.formData,
+          };
+          let table1tableKey = uuidv4()
+
+          let conditionDefault = {}
+
+          // 判断表格依赖方式
+          if(this.formData.relyOption === '0'){
+            conditionDefault[this.formData.relyFile] = this.relayValue
+          }else{
+            conditionDefault[this.formData.relyFile] = '#{' + relyName + '.' + this.formData.relaykey
+          }
+
+          let searchFieldList1 = []
+          searchFieldList1.push(this.formData.relyFile)
+          console.log(this.formData)
+          let tableList1 = {
+            tId: this.tId,
+            tableKey: table1tableKey, //  暂定
+            dtTableName: this.tableName,
+            primaryKey: this.formData.primaryKey,
+            orderByColumn: this.formData.orderByColumn,
+            sortOrder: this.formData.isAsc,
+            sqlKey: uuidv4(),
+            dtColumnName: columns1, //列字
+            timeFormat: this.formData.timeFormate,
+            searchFieldList: searchFieldList1,//搜索字段数组
+            tableSql: this.getSQLStr(), //  暂定
+            echoData: JSON.stringify(echoData),
+            conditionDefaultValueMap: conditionDefault
+          }
+
+          let echoData2 = {
+            tableName: this.subTableName,
+            tableFieldData: this.subFiledList,
+            formData: this.subformData,
+          };
+          // console.log(222,this.subformData);
+
+          let subCondition = {}
+           // 判断表格依赖方式
+           if(this.subformData.relyOption === '0'){
+            subCondition[this.subformData.relyFile] =this.subformData.relayValue
+            }else{
+              subCondition[this.subformData.relyFile] = '#{' + subrelayName + '.' + this.subformData.relaykey
+            }
+          let columns2 = [],searchFieldList2=[]
+          this.getCol(
+            this.subFiledList,
+            columns2,
+          );
+          let table2tableKey = uuidv4()
+          searchFieldList2.push(this.subformData.relyFile)
+
+          let tableList2 ={
+            tId: this.tId,
+            tableKey: table2tableKey, //  暂定
+            dtTableName: this.subTableName,
+            primaryKey: this.subformData.primaryKey,
+            orderByColumn: this.subformData.orderByColumn,
+            sortOrder: this.subformData.isAsc,
+            sqlKey: uuidv4(),
+            dtColumnName: columns2, //列字
+            timeFormat: this.subformData.timeFormate,
+            searchFieldList: searchFieldList2, //搜索字段数组
+            tableSql: this.getSQLStr2(), //  暂定
+            echoData: JSON.stringify(echoData2),
+            conditionDefaultValueMap: subCondition,
+          }
+
+          let uuid=uuidv4()
+          let groupKeyObj = { groupKey: uuid};
+          let data = {
+            groupType : 1,
+            groupKey: groupKeyObj.groupKey,
+            groupName: this.formData.groupName,
+            groupDescription: this.formData.groupDescription,
+            groupTableInfo: [],
+            dragTables:[]
+          }
+          data.groupTableInfo.push({
+            tableKey: table1tableKey,
+            sort:0
+          },{
+            tableKey: table2tableKey,
+            sort:1
+          })
+          data.groupTableInfo = JSON.stringify(data.groupTableInfo)
+          data.dragTables.push(tableList1,tableList2)
+
+          let res = await addDialogGroup(data)
+
+          if(res.code == 200){
+            this.$message.success("绑定成功");
+          }else{
+            this.$message.success("绑定失败");
+          }
+
+        } else {
+          this.$message.warning("请完善表单");
+          return false;
+        }
+      });
+    },
+    getBtnMapList(tableKey) {
+      let res = this.formData.btnGroupList.map((item) => {
+        return {
+          tableKey,
+          btnKey: item,
+        };
+      });
+      return res;
+    },
+
+    // 修改表格回显数据
+    async initTableData(tId) {
+      let res = await getTableInfo(tId);
+      if (res.code == 200) {
+        this.dragTableStatisticList = res.data.dragTableStatisticList;
+        // this.dragTableStyleList = res.data.dragTableStyleList;
+        let echoData = JSON.parse(res.data.echoData);
+        this.tableName = echoData.tableName;
+        this.tableFieldList = echoData.tableFieldData;
+        let {
+          isShowList,
+          timeFormate,
+          orderByColumn,
+          isAsc,
+          primaryKey,
+          menuName,
+          btnGroupList,
+        } = echoData.formData;
+        Object.assign(this.formData, {
+          menuName,
+          isShowList,
+          timeFormate,
+          orderByColumn,
+          isAsc,
+          primaryKey,
+          btnGroupList,
+        });
+        this.formData.routePath = this.getParentMenuId(
+          res.data.menuId,
+          this.menus,
+          {}
+        );
+
+        if (!this.formData.routePath) {
+          this.$message.warning("该表格菜单路由已经删除,请重新配置");
+        }
+        // this.formData.routePath
+        this.editData = res.data;
+        let val = await getParticMenu(res.data.tableKey);
+        if (val.code == 200) {
+          this.menuId = val.data.menuId;
+        }
+      } else {
+        this.$message.error("数据回显失败");
+      }
+    },
+    // tab切换
+    tabhandleClick(tab,event) {
+
+      this.tabIndex = tab.index
+      if(this.tabIndex == '1'){
+
+      }
+      this.menudata = this.activeName != "menuedit" ? true : false;
+    },
+    // 添加数据字段对话框
+    async addDataDialog() {
+      this.staictitle = "添加统计数据字段";
+      this.isShowAddData = true;
+      this.dataType = await this.getDicts("table_statistic_type");
+      this.dataType = this.dataType.data;
+      // console.log(this.dataType)
+    },
+    async updataDialog() {
+      // console.log(this.dataType)
+    },
+    // 修改数据字段
+    upadtaData() {
+      this.dragTableStatisticList.forEach((item, index) => {
+        // console.log(this.dataCountFormData);
+        if (item.id !== undefined && item.id == this.dataCountFormData.id) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
+        } else if (item.xid == this.dataCountFormData.xid) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
+        }
+      });
+      this.isShowAddData = false;
+      // console.log(this.dragTableStatisticList)
+      this.dataCountFormData = {};
+    },
+    // 添加数据字段
+    addData() {
+      // console.log(this.dataCountFormData);
+      this.dataCountFormData.xid = Date.now();
+      this.dataCountFormData.tableKey = this.tableKey;
+      this.dragTableStatisticList.push(this.dataCountFormData);
+      this.isShowAddData = false;
+      this.dataCountFormData = {};
+    },
+    // 关闭添加数据字段
+    closeAddDialog() {
+      this.isShowAddData = false;
+      this.dataCountFormData = {};
+    },
+    // 确定统计
+    countHandle() {
+      addStatistic({
+        dragTableStatisticList: this.dragTableStatisticList,
+        tableSqlList: this.tableSqlList,
+        searchFieldList: this.searchFieldList,
+        dtTableName: this.tableName,
+      }).then((res) => {
+        // console.log(res)
+      });
+    },
+    // 修改统计信息
+    async handleUpdateStat(row) {
+      // console.log(row);
+      this.dataCountFormData = row;
+      this.dataCountFormData.xid = Date.now();
+      this.staictitle = "修改统计数据字段";
+      this.dataType = await this.getDicts("table_statistic_type");
+      this.dataType = this.dataType.data;
+      this.isShowAddData = true;
+      // console.log(this.dataCountFormData)
+      // console.log(this.dragTableStatisticList);
+    },
+    // 删除统计信息
+    handleDeleteStat(row) {
+      this.dragTableStatisticList.forEach((item, index) => {
+        if (item.id == row.id) {
+          this.dragTableStatisticList.splice(index, 1);
+        }
+      });
+    },
+
+    // 获取当前表描述
+    getTableCommont(tableName, tableList) {
+      return tableList.find((item) => item.tableName == tableName).tableComment;
+    },
+
+    // 获取按钮组数据
+    async getBtnList() {
+      let res = await listBtn({ isEnablePaging: false, btnParentId: 0 });
+      this.btnGroupOptions = res.rows;
+    },
+  },
+  created() {},
+  async mounted() {
+    this.getAllTable();
+    this.getdragTable()
+    this.initDragTable();
+    this.getBtnList();
+    // await this.getMenuList();
+    if (this.$route.query.tId) {
+      this.tId = this.$route.query.tId;
+      this.initTableData(this.tId);
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ipt {
+  height: 36px;
+  line-height: 36px;
+  font-size: 14px;
+  width: 100%;
+  outline: none;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  display: inline-block;
+  border-radius: 4px;
+}
+.isNullDesc {
+  border-color: #ff4949 !important;
+}
+
+.ipt:focus {
+  border-color: #1890ff;
+}
+::v-deep .right_card {
+  min-height: 500px !important;
+}
+::v-deep .vue-treeselect--has-value .vue-treeselect__input {
+  vertical-align: middle !important;
+}
+.menudata {
+  width: 30% !important;
+}
+.edit {
+  width: 70% !important;
+}
+.mb10 {
+  margin-top: 10px;
+}
+.cardBox {
+  display: flex;
+  align-content: space-between;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+.card {
+  /* width:15%; */
+  height: 150px;
+  flex-basis: 15%;
+  margin-bottom: 10px;
+  margin-right: 15px;
+  min-width: 180px;
+  .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: 40px;
+    .statisticType {
+      font-size: 18px;
+    }
+  }
+  .count {
+    font-size: 25px;
+  }
+}
+.mb8 {
+  ::v-deep .el-col-18 {
+    width: 30% !important;
+    min-width: 220px !important;
+  }
+  ::v-deep .previewbtn {
+    min-width: 190px !important;
+  }
+}
+.addcount{
+  margin-bottom: 5px;
+}
+</style>

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

@@ -0,0 +1,465 @@
+<template>
+  <div class="app-container">
+    <el-form
+      :model="queryParams"
+      ref="queryForm"
+      size="small"
+      :inline="true"
+      v-show="showSearch"
+      label-width="68px"
+    >
+      <el-form-item label="样式key" prop="styleKey">
+        <el-input
+          v-model="queryParams.styleKey"
+          placeholder="请输入样式key"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="样式名称" prop="styleName">
+        <el-input
+          v-model="queryParams.styleName"
+          placeholder="请输入样式名称"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="样式描述" prop="styleDescription">
+        <el-input
+          v-model="queryParams.styleDescription"
+          placeholder="请输入样式描述"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="创建者ID" prop="createById">
+        <el-input
+          v-model="queryParams.createById"
+          placeholder="请输入创建者ID"
+          clearable
+          @keyup.enter.native="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="更新者ID" prop="updateById">
+        <el-input
+          v-model="queryParams.updateById"
+          placeholder="请输入更新者ID"
+          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-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"
+          v-hasPermi="['system:style:add']"
+          >新增</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="el-icon-edit"
+          size="mini"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['system:style:edit']"
+          >修改</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="el-icon-delete"
+          size="mini"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['system:style:remove']"
+          >删除</el-button
+        >
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="el-icon-download"
+          size="mini"
+          @click="handleExport"
+          v-hasPermi="['system:style:export']"
+          >导出</el-button
+        >
+      </el-col>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="getList"
+      ></right-toolbar>
+    </el-row>
+
+    <el-table
+      v-loading="loading"
+      stripe
+      :data="styleList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="编号" align="center" prop="id" />
+      <!-- <el-table-column label="样式key" align="center" prop="styleKey" /> -->
+      <el-table-column label="样式名称" align="center" prop="styleName" />
+      <el-table-column label="样式类型" align="center" prop="styleType">
+        <template slot-scope="scope">
+          {{ theGetDictLabel(scope.row.styleType, dict.type.table_style_type) }}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="样式代码" align="center" prop="styleCode" /> -->
+      <el-table-column
+        label="样式描述"
+        align="center"
+        prop="styleDescription"
+      />
+      <!-- <el-table-column label="样式状态" align="center" prop="styleStatus" /> -->
+      <!-- <el-table-column label="创建者ID" align="center" prop="createById" />
+      <el-table-column label="更新者ID" align="center" prop="updateById" /> -->
+      <el-table-column
+        label="操作"
+        align="center"
+        class-name="small-padding fixed-width"
+      >
+        <template slot-scope="scope">
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-edit"
+            @click="handleUpdate(scope.row)"
+            v-hasPermi="['system:style:edit']"
+            >修改</el-button
+          >
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-delete"
+            @click="handleDelete(scope.row)"
+            v-hasPermi="['system:style:remove']"
+            >删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination
+      v-show="total > 0"
+      :total="total"
+      :page.sync="queryParams.pageNum"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改动态格样式模板对话框 -->
+    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <!-- <el-form-item label="样式key" prop="styleKey">
+          <el-input v-model="form.styleKey" placeholder="请输入样式key" />
+        </el-form-item> -->
+        <el-form-item label="样式名称" prop="styleName">
+          <el-input v-model="form.styleName" placeholder="请输入样式名称" />
+        </el-form-item>
+        <el-form-item label="样式类型" prop="styleType">
+          <el-select
+            v-model="form.styleType"
+            placeholder="请选择样式类型"
+            filterable
+          >
+            <el-option
+              v-for="item in dict.type.table_style_type"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            >
+            </el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="样式代码" prop="styleCode">
+          <el-input
+            v-model="form.styleCode"
+            type="textarea"
+            placeholder="请输入内容"
+          />
+          <!-- <el-button icon="el-icon-edit" @click="drawerOpenHandler"></el-button> -->
+        </el-form-item>
+        <el-form-item label="样式描述" prop="styleDescription">
+          <el-input
+            v-model="form.styleDescription"
+            placeholder="请输入样式描述"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="删除标志" prop="delFlag">
+          <el-input v-model="form.delFlag" placeholder="请输入删除标志" />
+        </el-form-item>
+        <el-form-item label="创建者ID" prop="createById">
+          <el-input v-model="form.createById" placeholder="请输入创建者ID" />
+        </el-form-item>
+        <el-form-item label="更新者ID" prop="updateById">
+          <el-input v-model="form.updateById" placeholder="请输入更新者ID" />
+        </el-form-item> -->
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="submitForm">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
+    </el-dialog>
+    <el-drawer
+      :visible.sync="drawer"
+      direction="rtl"
+      :before-close="drawerHandleClose"
+      :with-header="false"
+    >
+      <div ref="container" class="monaco-container"></div>
+    </el-drawer>
+  </div>
+</template>
+
+<script>
+import {
+  listStyle,
+  getStyle,
+  delStyle,
+  addStyle,
+  updateStyle,
+} from "@/api/system/style";
+import { getDictLabel } from "@/utils/other";
+import * as monaco from "monaco-editor";
+
+export default {
+  name: "StyleMange",
+  dicts: ["table_style_type"],
+  data() {
+    return {
+      // 遮罩层
+      loading: true,
+      // 选中数组
+      ids: [],
+      // 非单个禁用
+      single: true,
+      // 非多个禁用
+      multiple: true,
+      // 显示搜索条件
+      showSearch: true,
+      // 总条数
+      total: 0,
+      // 动态格样式模板表格数据
+      styleList: [],
+      // 弹出层标题
+      title: "",
+      // 是否显示弹出层
+      open: false,
+      // 查询参数
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        styleKey: null,
+        styleName: null,
+        styleType: null,
+        styleCode: null,
+        styleDescription: null,
+        styleStatus: null,
+        createById: null,
+        updateById: null,
+      },
+      // 表单参数
+      form: {},
+      // 表单校验
+      rules: {
+        styleName: [
+          { required: true, message: "请输入样式名", trigger: "blur" },
+        ],
+        styleType: [
+          { required: true, message: "请选择样式类型", trigger: "change" },
+        ],
+        styleCode: [
+          { required: true, message: "请输入样式代码", trigger: "blur" },
+        ],
+        styleDescription: [
+          { required: true, message: "请输入样式样式描述", trigger: "blur" },
+        ],
+      },
+      // 代码编辑器
+      monacoEditor: null,
+      drawer: false,
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    /** 查询动态格样式模板列表 */
+    getList() {
+      this.loading = true;
+      listStyle(this.queryParams).then((response) => {
+        this.styleList = response.rows;
+        this.total = response.total;
+        this.loading = false;
+      });
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    // 表单重置
+    reset() {
+      this.form = {
+        id: null,
+        styleKey: null,
+        styleName: null,
+        styleType: null,
+        styleCode: null,
+        styleDescription: null,
+        styleStatus: null,
+        delFlag: null,
+        createBy: null,
+        createById: null,
+        createTime: null,
+        updateBy: null,
+        updateById: null,
+        updateTime: null,
+      };
+      this.resetForm("form");
+    },
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    /** 重置按钮操作 */
+    resetQuery() {
+      this.resetForm("queryForm");
+      this.handleQuery();
+    },
+    // 多选框选中数据
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    /** 新增按钮操作 */
+    handleAdd() {
+      this.reset();
+      this.open = true;
+      this.title = "添加动态格样式模板";
+    },
+    /** 修改按钮操作 */
+    handleUpdate(row) {
+      this.reset();
+      const id = row.id || this.ids;
+      getStyle(id).then((response) => {
+        this.form = response.data;
+        this.open = true;
+        this.title = "修改动态格样式模板";
+      });
+    },
+    /** 提交按钮 */
+    submitForm() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          if (this.form.id != null) {
+            updateStyle(this.form).then((response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.open = false;
+              this.getList();
+            });
+          } else {
+            addStyle(this.form).then((response) => {
+              this.$modal.msgSuccess("新增成功");
+              this.open = false;
+              this.getList();
+            });
+          }
+        }
+      });
+    },
+    /** 删除按钮操作 */
+    handleDelete(row) {
+      const ids = row.id || this.ids;
+      this.$modal
+        .confirm('是否确认删除动态格样式模板编号为"' + ids + '"的数据项？')
+        .then(function () {
+          return delStyle(ids);
+        })
+        .then(() => {
+          this.getList();
+          this.$modal.msgSuccess("删除成功");
+        })
+        .catch(() => {});
+    },
+    /** 导出按钮操作 */
+    handleExport() {
+      this.download(
+        "system/style/export",
+        {
+          ...this.queryParams,
+        },
+        `style_${new Date().getTime()}.xlsx`
+      );
+    },
+    theGetDictLabel(value, dictList) {
+      return getDictLabel(value, dictList);
+    },
+    // 抽屉打开回调
+    drawerOpenHandler() {
+      this.monacoEditor?.dispose();
+      this.drawer = true;
+      this.$nextTick(() => {
+        this.monacoEditor = monaco.editor.create(this.$refs.container, {
+          value: this.form.styleCode,
+          language: "css",
+          theme: "vs-dark", // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
+          contextmenu: false, // 禁用右键菜单
+          editorOptions: this.editorOptions, // 同codes
+        });
+      });
+    },
+    // 抽屉关闭前回调
+    drawerHandleClose(done) {
+      this.$confirm("即将关闭编辑器,是否保存代码?")
+        .then(
+          (val) => {
+            this.form.styleCode = this.monacoEditor?.getValue();
+            // this.drawer = false;
+            done();
+          },
+          (res) => {
+            // this.drawer = false;
+            done();
+          }
+        )
+        .catch(() => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.monaco-container {
+  width: 100%;
+  height: 100%;
+}
+</style>

ruoyi-ui/src/views/dialogMange/styleMange/tablelist.vue

@@ -0,0 +1,1399 @@
+<template>
+  <div>
+    <el-card shadow="always" :body-style="{ padding: '20px' }">
+          <template #header>
+            <div>
+              <span>关联子表</span>
+            </div>
+          </template>
+          <el-select
+            v-model="tableName"
+            placeholder="请选择数据表"
+            filterable
+            @change="getList"
+            class="mb10"
+          >
+          <el-option
+            v-for="item in tableList"
+            :key="item.tableName"
+            :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>
+          <el-table
+            :data="tableFieldList"
+            border
+            ref="dragTable"
+            row-key="id"
+            max-height="500px"
+          >
+            >
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50"
+              class-name="allowDrag"
+            >
+            </el-table-column>
+            <el-table-column prop="fieldName" label="数据字段">
+            </el-table-column>
+            <el-table-column prop="fieldDescription" label="字段描述">
+              <template slot-scope="scope">
+                <input
+                  :class="{
+                    isNullDesc:
+                      scope.row.fieldDescription == '' &&
+                      scope.row.isShow &&
+                      isInputInvalid
+                        ? true
+                        : false,
+                    ipt: true,
+                  }"
+                  v-model="scope.row.fieldDescription"
+                />
+              </template>
+            </el-table-column>
+            <el-table-column 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 in scope.row.relationTableList"
+                    :key="item.tableName"
+                    :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 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 in scope.row.relaFieldNameList"
+                    :key="item.fieldName"
+                    :label="item.fieldDescription"
+                    :value="item.fieldName"
+                  >
+                  </el-option>
+                </el-select>
+              </template>
+            </el-table-column>
+            <el-table-column 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 in relaTypeList"
+                    :key="item.value"
+                    :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>
+    </el-card>
+  </div>
+</template>
+
+<script>
+import {
+  delTableData,
+  dragTableInfo,
+  listTable,
+  unionListTableData,
+  getInfoBySqlKey,
+  addTableData,
+  addStatistic,
+  updateStatistic,
+} from "@/api/tablelist/commonTable";
+import { getDicts } from "@/api/system/dict/data";
+import {
+  getFormName,
+  getListName,
+  dragTablePreview,
+} from "@/api/dragform/form.js";
+import { getTableInfo, editTable } from "@/api/system/table.js";
+import { addDragTable } from "@/api/tablelist/commonTable.js";
+import { getParticMenu, updateMenu } from "@/api/system/menu.js";
+import { getMenuList, addMenu } from "@/api/menu.js";
+import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
+import { mapState } from "vuex";
+import Sortable from "sortablejs";
+import Treeselect from "@riophae/vue-treeselect";
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import { v4 as uuidv4 } from "uuid";
+import { listBtn } from "@/api/system/btn";
+export default {
+  name: "SubList",
+  dicts: ["sys_time_format", "table_statistic_type"],
+  props: ['menudata','tableList'],
+  components: { Queryfrom, Treeselect },
+  data() {
+    return {
+      staictitle: "添加统计数据字段",
+      isInputInvalid: false,
+      // 修改表格时的menuId
+      menuId: "",
+      // 修改表格的id
+      tId: "",
+      // 当前模板信息
+      templateInfo: {},
+      // 排序方式 默认降序
+      sortState: true,
+      // 列信息
+      columns: {},
+      // 查询条件
+      queryFromWhere: {},
+      // 当前table唯一标识
+      sqlKey: "",
+      // 动态数据sqlkey
+      staticSqlKey: "",
+      // 表格的高度
+      tableKey: "",
+      // tableHeight: document.documentElement.scrollHeight - 245 + "px",
+      // tableList: [], //所有表格列表
+      tableFieldList: [], // 当前表格字段数据
+      tableName: "", // 当前表名称
+
+      relationTableList: [], //关联表格列表
+      relationFieldList: [], //关联字段列表
+      relationTypeList: [], //关联方式列表
+      total: 0, //表格数据总数
+      relyOptions:[
+        {
+         value: '0',
+         label: '自定义依赖值'
+        },
+        {
+          value: '1',
+          label: '依赖其他字段'
+        }
+      ],
+      conditionDefaultValueMap: '',
+      relyFileds: {},
+      relaTypeList: [
+        {
+          label: "等值连接",
+          value: "INNER JOIN",
+        },
+        {
+          label: "左连接",
+          value: "LEFT JOIN",
+        },
+        {
+          label: "右连接",
+          value: "RIGHT JOIN",
+        },
+      ],
+      headerList: [
+        {
+          prop: "fieldName",
+          label: "数据字段",
+        },
+        {
+          prop: "fieldDescription",
+          label: "字段描述",
+        },
+        {
+          prop: "relationTable",
+          label: "关联表",
+        },
+        {
+          prop: "relationFieldName",
+          label: "关联字段",
+        },
+        {
+          prop: "relationType",
+          label: "关联方式",
+        },
+        {
+          prop: "isShow",
+          label: "是否显示",
+        },
+        {
+          prop: "isSearch",
+          label: "是否包含查询",
+        },
+        {
+          prop: "isExport",
+          label: "是否导出",
+        },
+        {
+          prop: "isCount",
+          label: "是否统计",
+        },
+      ], //表头列表
+
+      // 基础信息编辑
+      formData: {
+        menuName: "",
+        routePath: undefined,
+        isShowList: true,
+        timeFormate: "",
+        orderByColumn: "",
+        isAsc: false,
+        primaryKey: "",
+        btnGroupList: [],
+      },
+      // 统计信息
+      countData: {},
+      rules: {
+        menuName: [
+          { required: true, message: "请输入菜单名称", trigger: "blur" },
+        ],
+        routePath: [
+          { required: true, message: "请选择路由", trigger: "change" },
+        ],
+        timeFormate: [
+          { required: true, message: "请选择时间格式", trigger: "change" },
+        ],
+        primaryKey: [
+          { required: true, message: "请选择表格主键", trigger: "blur" },
+        ],
+        fieldDescription: [
+          { required: true, message: "请输入字段描述", trigger: "blur" },
+        ],
+      },
+      menus: [], //路由列表数据
+
+      // 预览弹窗相关
+      isShowPreview: false, //弹窗显示与隐藏
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+        orderByColumn: "",
+        isAsc: false,
+        basicMap: {
+          sql: "",
+        },
+      },
+      loading: false, //表格加载
+      tableDataList: [], //数据
+      editData: {},
+      menuOrderNum: 0,
+      // tab动态切换
+      activeName: "menuedit",
+      // 数据统计对象
+      dataCountFormData: {},
+      // 添加数据统计表格
+      dragTableStatisticList: [],
+      deepragTableStatisticList: [],
+      tableSqlList: [],
+      searchFieldList: [],
+      // // 是否切换到数据统计
+      // menudata: false,
+      // 显示添加字段对话框dataArr
+      isShowAddData: false,
+      dataType: [],
+      uuid: "",
+
+      // 样式编辑tab数据
+      // dragTableStyleList: [],
+
+      //操作列按钮组数据
+      btnGroupOptions: [],
+    };
+  },
+  async mounted() {
+    // this.getAllTable();
+    this.initDragTable();
+    this.getBtnList();
+    if (this.$route.query.tId) {
+      this.tId = this.$route.query.tId;
+      this.initTableData(this.tId);
+    }
+  },
+  computed: {
+    // 数据字段
+    dataArr() {
+      return this.tableFieldList.filter((item) => item.isShow);
+    },
+    // 数据统计字段表名中文
+    isShowTableName() {
+      let tableComment;
+      this.tableList.forEach(item => {
+        if(item.tableName === this.tableName){
+          tableComment = item.tableComment
+        }
+      })
+      return tableComment
+    },
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+      username: (state) => state.user.dataSource.username,
+      tenantId: (state) => state.user.tenant.tenantId,
+    }),
+    searchArr() {
+      if (!this.templateInfo?.where?.length) return [];
+      return this.templateInfo.where.map((item) => item.conditionName);
+    },
+    checkedWhere() {
+      if (!this.templateInfo?.where?.length) return [];
+      return this.templateInfo?.where.filter((item) => {
+        return this.checkedList.includes(item.conditionName);
+      });
+    },
+    orderByFieldList() {
+      return this.tableFieldList;
+    },
+    primaryKeyList() {
+      return this.tableFieldList.filter((item) => !item.isChildren);
+    },
+
+  },
+  watch: {
+    tableName: function (val) {
+      if (val) {
+        this.relationTableList = this.tableList
+          .filter((item) => item.tableName != val)
+          .map((item) => {
+            return {
+              tableName: item.tableName,
+              tableComment: item.tableComment,
+            };
+          });
+
+          this.$emit('tableNameChange', 
+          this.tableName)
+      } else {
+        this.relationTableList = [];
+      }
+    },
+    "formData.routePath"(nval, oval) {
+      let targetMenu = this.getTargetMenu(this.menus);
+      this.menuOrderNum = targetMenu.children ? targetMenu.children.length : 0;
+    },
+  },
+  methods: {
+    /** 查询列表 */
+    getList(queryParams) {
+      if (!this.tableName) return;
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: this.tableName,
+      };
+      let tableComment = this.getTableCommont(this.tableName, this.tableList);
+      // 获取当前表单结构信息
+      getListName(data).then((res) => {
+        // console.log(res);
+        this.tableFieldList = res.map((item, index) => {
+          return {
+            id: this.tableName + "_" + 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: this.relationTableList,
+            tableName: this.tableName,
+            tableComment,
+            relationFieldList: [],
+          };
+        });
+
+        this.$emit('fieldListChange', 
+          this.tableFieldList)
+
+        // console.log(this.tableFieldList);
+      });
+    },
+    // 关联表变化回调
+    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 tableComment = this.getTableCommont(
+        row.relationTable,
+        this.tableList
+      );
+      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,
+          tableComment,
+          relationFieldList: [],
+          isChildren: true,
+        };
+      });
+      // this.tableFieldList = [...this.tableFieldList, ...row.relationFieldList];
+      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;
+    },
+
+    // 勾选框回调
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      // this.single = selection.length != 1;
+      this.multiple = !selection.length;
+    },
+    // 分页查询
+    pageList(row) {
+      this.$refs.mychild.pageList(
+        row == undefined
+          ? {
+              limit: this.queryParams.pageSize,
+              page: this.queryParams.pageNum,
+            }
+          : row
+      );
+    },
+    // 多选框改变回调
+    checkedChangeHandle(val) {},
+    // 获取所有表格
+    async getAllTable() {
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+      };
+      let res = await getFormName(data);
+
+      const baseTable = await this.getDicts("base_table");
+
+      this.tableList = res.data.filter((item) => {
+        return !baseTable.data.some(
+          (value) =>
+            value.dictValue.toLowerCase() == item.tableName.toLowerCase()
+        );
+      });
+    },
+    //处理表格行拖拽
+    initDragTable() {
+      const el = this.$refs.dragTable.$el.querySelectorAll(
+        ".el-table__body-wrapper > table > tbody"
+      )[0];
+      const sortable = Sortable.create(el, {
+        handle: ".allowDrag",
+        onEnd: (evt) => {
+          const targetRow = this.tableFieldList.splice(evt.oldIndex, 1)[0];
+          this.tableFieldList.splice(evt.newIndex, 0, targetRow);
+          for (let index in this.tableFieldList) {
+            this.tableFieldList[index].sort = parseInt(index) + 1;
+          }
+        },
+      });
+    },
+    // 校验字段合法性(递归版)
+    validateField(tableFieldList, validateParams) {
+      if (!tableFieldList.length) {
+        return;
+      }
+      for (let i = 0; i < tableFieldList.length; i++) {
+        let temp = tableFieldList[i];
+        if (!temp.fieldDescription?.trim() && temp.isShow) {
+          //描述字段不能为空
+          validateParams.isFieldDescrib = true;
+        }
+        if (
+          temp.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: "显示的字段数不能为空",
+        };
+      }
+      if (
+        tableFieldList.filter((item) => item.isExport && !item.isChildren)
+          .length == 0
+      ) {
+        return {
+          val: false,
+          msg: "导出字段中至少应有一个主表字段",
+        };
+      }
+      // 导出的字段的描述不能重复
+      let describeArr = tableFieldList
+        .filter((item) => item.isExport)
+        .map((item) => item.fieldDescription);
+      let isRepeat = false;
+      describeArr.map((item) => {
+        if (describeArr.indexOf(item) != describeArr.lastIndexOf(item)) {
+          isRepeat = true;
+        }
+      });
+      if (isRepeat) {
+        return {
+          val: false,
+          msg: "导出的字段描述不能重复",
+        };
+      }
+
+      return {
+        val: true,
+        msg: "",
+      };
+    },
+    // 递归拼接查询语句
+    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) {
+          // fieldArr.push(temp.relationTable + "." + temp.relationFieldName);
+          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
+          );
+        }
+        // if (temp.relationFieldList.length) {
+        //   this.getSQLString(temp.relationFieldList, fieldArr, tableArr);
+        // }
+      }
+      // 如果主键不包含显示,则添加至sql语句中
+      let isNotInclude = this.primaryKeyList.find(
+        (val) => !val.isShow && val.fieldName == this.formData.primaryKey
+      );
+      if (isNotInclude) {
+        fieldArr.push(
+          prefix + isNotInclude.tableName + "." + isNotInclude.fieldName
+        );
+      }
+    },
+
+    // 拼接查询sql语句
+    getSQLStr() {
+      let prefix = "{DBNAME}.";
+      let sqlType = this.databaseType; //数据库类型
+      let asOrSpace = sqlType == "oracle" ? " " : " AS ";
+      // let sqlType = "oracle";
+      let sql = "";
+      // mysql
+      sql += "SELECT ";
+      let fieldNameArr = [],
+        relaTypeArr = [];
+      this.getSQLString(
+        this.tableFieldList,
+        fieldNameArr,
+        relaTypeArr,
+        sqlType
+      );
+      // if (discriISEmpty) {
+      //   return false;
+      // }
+      let styleFieldList = this.$refs.styleTableRef.getStyleTableField();
+      styleFieldList = styleFieldList.map((item) => {
+        return `${prefix}${item}${asOrSpace}${item.replace(".", "_")}`;
+      });
+      let set = new Set([...fieldNameArr, ...styleFieldList]);
+      fieldNameArr = [...set];
+      let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
+      sql +=
+        fieldNameArr.join(",") +
+        " FROM " +
+        isNeedUsername +
+        prefix +
+        this.tableName +
+        asOrSpace +
+        this.tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
+    getStaticSQL(key) {
+      // 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 +=
+        key +
+        " FROM " +
+        isNeedUsername +
+        // prefix +
+        this.tableName +
+        asOrSpace +
+        this.tableName;
+      if (relaTypeArr.length) {
+        sql += " " + relaTypeArr.join(" ");
+      }
+      return sql;
+    },
+    // 处理列表信息
+    columnsHandler(columns) {
+      let resArr = [];
+      columns.forEach((item) => {
+        for (const key in item) {
+          let tempObj = {};
+          tempObj.key = key;
+          tempObj.value = item[key];
+          resArr.push(tempObj);
+        }
+      });
+      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(
+      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;
+          tempFieldName = temp.tableName + "_" + temp.fieldName;
+          exportFieldName = temp.fieldName;
+        }
+        if (temp.isShow) {
+          let tempObj = {};
+          // if (temp.isChildren) {
+          //   tempObj[temp.tableName + "_" + temp.fieldName] =
+          //     temp.fieldDescription;
+          // } else {
+          //   tempObj[temp.fieldName] = temp.fieldDescription;
+          // }
+          tempObj[tempFieldName] = temp.fieldDescription;
+          columns.push(tempObj);
+        }
+        if (temp.isSearch) {
+          searchFieldList.push(temp.tableName + "." + temp.fieldName);
+        }
+
+        if (temp.isExport) {
+          tableExportField[exportFieldName] = temp.fieldDescription;
+        }
+        // 递归
+        // if (temp.relationFieldList) {
+        //   this.getCol(
+        //     temp.relationFieldList,
+        //     columns,
+        //     searchFieldList,
+        //     tableExportField
+        //   );
+        // }
+      }
+    },
+    // 更新路由
+    reloadRouter() {
+      this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
+        this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
+      });
+    },
+
+    // 预览结果回调
+    async previewHandle() {
+      this.$refs.formData.validate(async (valid) => {
+        // 至少包含一个查询项
+        if (valid) {
+          if (!this.tableName) {
+            this.$message.error("请选择数据表");
+            return;
+          }
+          // 检验表单合法性
+          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 = [],
+            searchFieldList = [];
+          this.getCol(this.tableFieldList, tempColumns, searchFieldList);
+          if (!searchFieldList.length) {
+            this.$message.warning("请至少选择一个包含查询字段");
+            return false;
+          }
+          const dataType = await this.getDicts("table_statistic_type");
+          this.deepragTableStatisticList = JSON.parse(
+            JSON.stringify(this.dragTableStatisticList)
+          );
+          this.deepragTableStatisticList.forEach((item) => {
+            dataType.data.forEach((val) => {
+              if (val.dictValue == item.statisticType) {
+                item.statisticType = val.dictLabel;
+              }
+            });
+          });
+          this.columns = this.columnsHandler(tempColumns);
+          this.queryParams.isAsc = this.formData.isAsc;
+          // 发送请求获取预览数据
+          let res = await dragTablePreview(this.queryParams);
+          this.tableDataList = [];
+          res.rows.forEach((item) => {
+            this.tableDataList.push(item.resultMap);
+          });
+          this.total = res.total;
+          this.isShowPreview = true;
+        } else {
+          this.$message.warning("请完善表单");
+          return false;
+        }
+      });
+
+      // this.$refs.tableForm.validate((val) => {
+      //   if (val) {
+
+      //   } else {
+      //     this.$message.warning("请完善表单");
+      //     return false;
+      //   }
+      // });
+    },
+    // 创建回调
+    async createHandle() {
+      // console.log(123);
+      // this.sqlKey = uuidv4();
+      this.isInputInvalid = true;
+      this.$refs.formData.validate(async (valid) => {
+        if (valid) {
+          // 检验表单合法性
+          let validRes = this.validateTableData(this.tableFieldList);
+          if (!validRes.val) {
+            this.$message.error(validRes.msg);
+            return;
+          }
+          let columns = [],
+            searchFieldList = [],
+            tableExportField = {};
+          this.getCol(
+            this.tableFieldList,
+            columns,
+            searchFieldList,
+            tableExportField
+          );
+
+          let echoData = {
+            tableName: this.tableName,
+            tableFieldData: this.tableFieldList,
+            formData: this.formData,
+          };
+          if (!searchFieldList.length) {
+            this.$message.warning("请至少选择一个包含查询字段");
+            return false;
+          }
+          // 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;
+          // }
+          // console.log("123", columns);
+          this.uuid = uuidv4();
+          this.tableKey = uuidv4();
+          // 表单
+          let result;
+          if (this.tId) {
+            let payLoad = {
+              menuId: this.menuId,
+              menuName: this.formData.menuName,
+              parentId: this.formData.routePath,
+              component: "tablelist/commonTable/listInfo",
+              icon: "",
+              isCache: "0",
+              isFrame: "1",
+              menuType: "C",
+              orderNum: this.menuOrderNum,
+              status: "0",
+              visible: "0",
+              tenantId: this.tenantId,
+            };
+            result = await updateMenu(payLoad);
+          } else {
+            let tableKeyObj = {
+              tableKey: this.uuid,
+            };
+            // console.log(this.formData)
+            let payLoad = {
+              component: "tablelist/commonTable/listInfo",
+              icon: "",
+              isCache: "0",
+              isFrame: "1",
+              menuName: this.formData.menuName,
+              // menuId: this.formData.routePath,
+              menuType: "C",
+              orderNum: this.menuOrderNum,
+              parentId: this.formData.routePath,
+              path: this.uuid,
+              query: JSON.stringify(tableKeyObj),
+              status: "0",
+              visible: "0",
+              tenantId: this.tenantId,
+            };
+            result = await addMenu(payLoad);
+          }
+
+          if (result.code == 200) {
+            // 更新路由
+            this.reloadRouter();
+
+            // let isAsc = this.formData.isAsc == "ASC" ? 0 : 1;
+            let data = {
+              tId: this.tId,
+              dtName: this.formData.menuName,
+              menuId: this.formData.routePath,
+              tableKey: this.uuid, //  暂定
+              dtTableName: this.tableName,
+              primaryKey: this.formData.primaryKey,
+              orderByColumn: this.formData.orderByColumn,
+              sortOrder: this.formData.isAsc,
+              sqlKey: this.tableKey,
+              dtColumnName: columns, //列字段标题名称(存储显示字段信息
+              // dtColumnName: JSON.stringify(columns).replace(/"/g, "'"), //列字段标题名称(存储显示字段信息
+              timeFormat: this.formData.timeFormate,
+              searchFieldList: searchFieldList, //搜索字段数组
+              tableSql: this.getSQLStr(), //  暂定
+              tableExportField: tableExportField, //导出字段名及列名
+              echoData: JSON.stringify(echoData),
+
+              // 样式相关数据
+              // dragTableStyleList: this.$refs.styleTableRef.getSaveData(),
+            };
+
+            this.dragTableStatisticList.forEach((item) => {
+              if (this.tId == "") {
+                item.tableKey = this.tableKey;
+                this.staticSqlKey = uuidv4();
+                item.sqlKey = this.staticSqlKey;
+              }
+              if (item.sqlKey) {
+                this.staticSqlKey = item.sqlKey;
+              } else {
+                this.staticSqlKey = uuidv4();
+                item.sqlKey = this.staticSqlKey;
+              }
+
+              let key =
+                item.statisticType +
+                "(" +
+                item.statisticField +
+                ")" +
+                " as result";
+
+              this.tableSqlList.push({
+                tableSql: this.getStaticSQL(key),
+                sqlKey: this.staticSqlKey,
+              });
+              this.searchFieldList = searchFieldList;
+            });
+            let res;
+            let res1;
+            if (this.tId) {
+              data.menuId = this.menuId;
+              data.sqlKey = this.editData.sqlKey;
+              data.tableKey = this.editData.tableKey;
+              data.dragTableBtnRelevanceList = this.getBtnMapList(
+                data.tableKey
+              );
+              res = await editTable(data);
+              this.dragTableStatisticList.forEach((item) => {
+                item.tableKey = this.editData.tableKey;
+              });
+              res1 = await updateStatistic({
+                tableKey: this.editData.tableKey,
+                dragTableStatisticList: this.dragTableStatisticList,
+                tableSqlList: this.tableSqlList,
+                searchFieldList: this.searchFieldList,
+                dtTableName: this.tableName,
+              });
+            } else {
+              data.menuId = result.data;
+              data.dragTableBtnRelevanceList = this.getBtnMapList(
+                data.tableKey
+              );
+              res = await addDragTable(data);
+
+              this.dragTableStatisticList.forEach((item) => {
+                item.tableKey = this.uuid;
+              });
+              if (res.code == 200 && this.dragTableStatisticList.length !== 0) {
+                // 新增统计数据
+                res1 = addStatistic({
+                  tableKey: this.uuid,
+                  dragTableStatisticList: this.dragTableStatisticList,
+                  tableSqlList: this.tableSqlList,
+                  searchFieldList: this.searchFieldList,
+                  dtTableName: this.tableName,
+                });
+              }
+            }
+
+            // 关闭当前页面
+            if (this.tId) {
+              if (res.code == 200) {
+                this.$message.success("修改成功");
+              } else {
+                this.$message.warning("修改失败");
+              }
+              this.$tab.closePage();
+              this.$router.push({
+                path: "/system/fromModel/index/tablelist",
+              });
+            } else {
+              if (res.code == 200) {
+                this.$message.success("创建成功");
+              } else {
+                this.$message.warning("创建失败");
+              }
+              this.isShowPreview = false;
+            }
+          }
+        } else {
+          this.$message.warning("请完善表单");
+          return false;
+        }
+      });
+    },
+    getBtnMapList(tableKey) {
+      let res = this.formData.btnGroupList.map((item) => {
+        return {
+          tableKey,
+          btnKey: item,
+        };
+      });
+      return res;
+    },
+    // 修改表格回显数据
+    async initTableData(tId) {
+      let res = await getTableInfo(tId);
+      if (res.code == 200) {
+        this.dragTableStatisticList = res.data.dragTableStatisticList;
+        // this.dragTableStyleList = res.data.dragTableStyleList;
+        let echoData = JSON.parse(res.data.echoData);
+        this.tableName = echoData.tableName;
+        this.tableFieldList = echoData.tableFieldData;
+        let {
+          isShowList,
+          timeFormate,
+          orderByColumn,
+          isAsc,
+          primaryKey,
+          menuName,
+          btnGroupList,
+        } = echoData.formData;
+        Object.assign(this.formData, {
+          menuName,
+          isShowList,
+          timeFormate,
+          orderByColumn,
+          isAsc,
+          primaryKey,
+          btnGroupList,
+        });
+        this.formData.routePath = this.getParentMenuId(
+          res.data.menuId,
+          this.menus,
+          {}
+        );
+
+        if (!this.formData.routePath) {
+          this.$message.warning("该表格菜单路由已经删除,请重新配置");
+        }
+        // this.formData.routePath
+        this.editData = res.data;
+        let val = await getParticMenu(res.data.tableKey);
+        if (val.code == 200) {
+          this.menuId = val.data.menuId;
+        }
+      } else {
+        this.$message.error("数据回显失败");
+      }
+    },
+    // tab切换
+    tabhandleClick() {
+      this.menudata = this.activeName != "menuedit" ? true : false;
+    },
+    // 添加数据字段对话框
+    async addDataDialog() {
+      this.staictitle = "添加统计数据字段";
+      this.isShowAddData = true;
+      this.dataType = await this.getDicts("table_statistic_type");
+      this.dataType = this.dataType.data;
+      // console.log(this.dataType)
+    },
+    async updataDialog() {
+      // console.log(this.dataType)
+    },
+    // 修改数据字段
+    upadtaData() {
+      this.dragTableStatisticList.forEach((item, index) => {
+        // console.log(this.dataCountFormData);
+        if (item.id !== undefined && item.id == this.dataCountFormData.id) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
+        } else if (item.xid == this.dataCountFormData.xid) {
+          this.dragTableStatisticList[index] = this.dataCountFormData;
+        }
+      });
+      this.isShowAddData = false;
+      // console.log(this.dragTableStatisticList)
+      this.dataCountFormData = {};
+    },
+    // 添加数据字段
+    addData() {
+      // console.log(this.dataCountFormData);
+      this.dataCountFormData.xid = Date.now();
+      this.dataCountFormData.tableKey = this.tableKey;
+      this.dragTableStatisticList.push(this.dataCountFormData);
+      this.isShowAddData = false;
+      this.dataCountFormData = {};
+    },
+    // 关闭添加数据字段
+    closeAddDialog() {
+      this.isShowAddData = false;
+      this.dataCountFormData = {};
+    },
+    // 确定统计
+    countHandle() {
+      addStatistic({
+        dragTableStatisticList: this.dragTableStatisticList,
+        tableSqlList: this.tableSqlList,
+        searchFieldList: this.searchFieldList,
+        dtTableName: this.tableName,
+      }).then((res) => {
+        // console.log(res)
+      });
+    },
+    // 修改统计信息
+    async handleUpdateStat(row) {
+      // console.log(row);
+      this.dataCountFormData = row;
+      this.dataCountFormData.xid = Date.now();
+      this.staictitle = "修改统计数据字段";
+      this.dataType = await this.getDicts("table_statistic_type");
+      this.dataType = this.dataType.data;
+      this.isShowAddData = true;
+      // console.log(this.dataCountFormData)
+      // console.log(this.dragTableStatisticList);
+    },
+    // 删除统计信息
+    handleDeleteStat(row) {
+      this.dragTableStatisticList.forEach((item, index) => {
+        if (item.id == row.id) {
+          this.dragTableStatisticList.splice(index, 1);
+        }
+      });
+    },
+
+    // 获取当前表描述
+    getTableCommont(tableName, tableList) {
+      return tableList.find((item) => item.tableName == tableName).tableComment;
+    },
+
+    // 获取按钮组数据
+    async getBtnList() {
+      let res = await listBtn({ isEnablePaging: false, btnParentId: 0 });
+      this.btnGroupOptions = res.rows;
+    },
+  },
+  created() {},
+  async mounted() {
+    this.getAllTable();
+    this.initDragTable();
+    this.getBtnList();
+    if (this.$route.query.tId) {
+      this.tId = this.$route.query.tId;
+      this.initTableData(this.tId);
+    }
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.ipt {
+  height: 36px;
+  line-height: 36px;
+  font-size: 14px;
+  width: 100%;
+  outline: none;
+  text-align: center;
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  color: #606266;
+  display: inline-block;
+  border-radius: 4px;
+}
+.isNullDesc {
+  border-color: #ff4949 !important;
+}
+
+.ipt:focus {
+  border-color: #1890ff;
+}
+::v-deep .right_card {
+  min-height: 500px !important;
+}
+::v-deep .vue-treeselect--has-value .vue-treeselect__input {
+  vertical-align: middle !important;
+}
+.menudata {
+  width: 30% !important;
+}
+.edit {
+  width: 70% !important;
+}
+.mb10 {
+  margin-top: 10px;
+}
+.cardBox {
+  display: flex;
+  align-content: space-between;
+  flex-wrap: wrap;
+  align-content: flex-start;
+}
+.card {
+  /* width:15%; */
+  height: 150px;
+  flex-basis: 15%;
+  margin-bottom: 10px;
+  margin-right: 15px;
+  min-width: 180px;
+  .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: 40px;
+    .statisticType {
+      font-size: 18px;
+    }
+  }
+  .count {
+    font-size: 25px;
+  }
+}
+.mb8 {
+  ::v-deep .el-col-18 {
+    width: 30% !important;
+    min-width: 220px !important;
+  }
+  ::v-deep .previewbtn {
+    min-width: 190px !important;
+  }
+}
+</style>

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

@@ -2,9 +2,9 @@
   <div class="bigBox">
    <div class="info">
     <p class="tt">基础信息</p>
-    <div v-for="item in infoData" :key="item.title">
-      <span class="titlestyle">{{ item.title }}</span>
-      <span class="infostyle">{{ item.info }}</span>
+    <div v-for="(item, index) in infoData[0]" :key="item.title">
+      <span class="titlestyle">{{ item.value }}</span>
+      <span class="infostyle" v-for="(val, index) in infoData[1]">{{ val[item.key] }}</span>
     </div>
    </div>
    <div class="tableBox">
@@ -28,22 +28,14 @@
     
     <el-table
       border
-      :data="tableData"
+      :data="tableData[1].data"
       style="width: 100%">
       <el-table-column
-        prop="date"
-        label="日期"
+       v-for="item in tableData[0].column"
+        :prop="item.key"
+        :label="item.value"
         width="180">
       </el-table-column>
-      <el-table-column
-        prop="name"
-        label="姓名"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="地址">
-      </el-table-column>
     </el-table>
 
     <el-form ref="tableform" :model="tableDataForm">
@@ -53,19 +45,15 @@
       border
       :data="editData"
       style="width: 100%">
-      <el-table-column prop="date" label="日期" width="180">
-        <template slot-scope="scope">
-          <el-input v-model="scope.row.date"></el-input>
-        </template>
-      </el-table-column>
       <el-table-column
-        prop="name"
-        label="姓名"
-        width="180">
+         v-for="item in tableData[0].column"
+        :prop="item.key"
+        :label="item.value">
         <template slot-scope="scope">
-          <el-input v-model="scope.row.name"></el-input>
+          <el-input :v-model="scope.row[item.key]"></el-input>
         </template>
       </el-table-column>
+
         <el-table-column
           label="操作"
           align="center"
@@ -119,55 +107,58 @@
 </template>
 
 <script>
+import { dragGroupTableInfo } from "@/api/relateTable/index"
+import {
+  delTableData,
+  dragTableInfo,
+  listTable,
+  unionListTableData,
+  getInfoBySqlKey,
+  addTableData,
+  batchEdit,
+  getStatisticList
+} from "@/api/tablelist/commonTable";
+import {camelCase} from "@/utils";
 
 export default {
   data () {
    return {
     // 基础信息行数据
-    infoData: [
-      {
-        title: '任务',
-        info: '154ccxz5'
-      },
-      {
-        title: '固号',
-        info: '1545'
-      },
-      {
-        title: '名称',
-        info: '1545'
-      },
-      {
-        title: '数量',
-        info: '1545'
-      },
-      {
-        title: '工艺',
-        info: '指控'
-      },
-    ],
+    infoData: [],
+    listInfo: {},
     // 是否外协
     checked: false,
-    tableData: [{
-      date: '2016-05-02',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1518 弄'
-    }, {
-      date: '2016-05-04',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1517 弄'
-    }, {
-      date: '2016-05-01',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1519 弄'
-    }, {
-      date: '2016-05-03',
-      name: '王小虎',
-      address: '上海市普陀区金沙江路 1516 弄'
-    }],
+    tableData: [],
     // 动态增加表格数据
     editData: [],
-    tableDataForm: {}
+    tableDataForm: {},
+    tableLists: [],
+    queryParams: {
+        pageNum: 1, // 第几页
+        pageSize: 10, // 每页大小
+        orderByColumn: "", // 根据某列排序
+        isAsc: "", // desc（降序）或 asc（升序）
+        // 基本查询参数
+        basicMap: {
+          tableName: "drag_form",
+        },
+        // 当前表字段筛选参数
+        queryMap: {
+          // 当前查询基本参数
+          // ... key : value         当前页面的筛选条件
+          // 超级查询的唯一值
+          queryCriteriaValue: "",
+          // tableCondition: ''
+        },
+    },
+    columns: [],
+    // 排序方式 默认降序
+    sortOrder: true,
+    tableName: "",
+    // 当前模版信息
+    templateInfo: {},
+    queryFromWhere:'',
+    condition: []
    }
  },
   methods: {
@@ -190,8 +181,143 @@ export default {
         this.tableData.push(item)
       })
       this.editData = []
-    }
-  }
+    },
+    async getLists(){
+      let res = await dragGroupTableInfo({queryMap: {groupKey: this.groupKey}})
+      this.tableLists = JSON.parse(res.msg)
+      console.log(this.tableLists);
+
+      this.tableLists.forEach(async item => {
+        if(item.sort == 0){
+
+          const res = await dragTableInfo({queryMap: {tableKey : item.tableKey }})
+          this.getTableHandle(res,item.sort).then(result => {
+            this.infoData.push(result)
+          })
+        }else if(item.sort == 1){
+
+          const res = await dragTableInfo({queryMap: {tableKey : item.tableKey }})
+          this.getTableHandle(res,item.sort).then(result => {
+            this.tableData.push({
+              column: result
+            })
+          })
+          console.log(this.tableData);
+        }else if(item.sort == 2){
+
+          const res = await dragTableInfo({queryMap: {tableKey : item.tableKey }})
+
+        }
+      })
+    },
+    async getTableHandle(res,sort){
+        this.columns = []
+        // 得到当前模版信息 --- sql columns queryWhere
+        this.templateInfo = res.data.resultMap;
+      
+        console.log(res.data.resultMap.querySql);
+        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)
+        );
+        if (this.templateInfo !== {}) {
+            this.tableCondition = this.templateInfo.querySql.tableCondition
+            this.tableCondition = this.tableCondition.split('AND')
+            console.log(this.tableCondition);
+            this.condition = [];
+              
+            // 调用查询需要携带当前table的唯一标识
+            this.queryParams.queryMap.sqlkey = this.templateInfo.template.sqlKey;
+
+            this.queryParams.orderByColumn = camelCase(
+              this.queryParams.orderByColumn || ""
+            );
+            // 根据sql语句查询当前表数据
+
+            let k;
+            this.tableCondition.forEach((item, i) => {
+              let val = item.split('=')
+              if(i!==0){
+                
+                k =val[0].split('.')
+                let str = k[0].trim() + '.' + k[1]
+                this.condition.push({
+                  key: k[0].trim(),
+                  value: k[1]
+                })
+              }
+            })
+  
+            this.getDataHandler(this.tableCondition[1]).then(res => {
+              console.log(res);
+              if(sort == 0){
+                this.infoData.push(res)
+              }else if(sort ==1){
+                this.tableData.push({
+                  data: res
+                })
+              }
+            })
+            return this.columns
+        }  
+    },
+    // 获取表数据
+    async getDataHandler(contion){
+      let con = contion.split('=')
+      let key = con[1].trim()
+      let value = '张国荣'
+      this.queryParams.queryMap[key] = "'" + value + "'";
+  
+      let tableLists = await unionListTableData(this.queryParams)
+      console.log(tableLists.rows);
+      if(tableLists.code == 200){
+          this.tableList = [];
+          tableLists.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;
+          })
+          console.log(this.tableList);
+          return this.tableList
+
+      }
+      // this.total = tableLists.total;
+      // this.loading = false; 
+    },
+    // 处理列表信息
+    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;
+    },
+  },
+  mounted() {
+    this.groupKey = 'd3514c56-c641-4da6-b523-5a1b0e1769ba';
+    this.getLists()
+  },
 }
 </script>
 
@@ -212,12 +338,16 @@ export default {
       }
       .titlestyle{
         background-color: #34bfa3;
-        width: 50px;
+        /* width: 50px; */
+        display: inline-block;
+        height: 25px;
+        line-height: 1;
+        padding: 5px;
         margin-bottom: 20px;
         margin-right: 5px;
         text-align: center;
         color: white;
-        border-radius: 20px;
+        /* border-radius: 20px; */
       }
       .infostyle{
         background-color: #ebedf2;

ruoyi-ui/src/views/dialogTemplate/indexTable.vue

@@ -64,6 +64,7 @@
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="表格主键" align="center" prop="id" />
       <el-table-column label="表格名称" align="center" prop="groupName" />
+      <el-table-column label="绑定表名称" align="center" prop="groupName" />
       <el-table-column label="描述" align="center" prop="groupDescription" />
 
       <el-table-column
@@ -114,7 +115,7 @@
           :model="tableItemForm"
           label-width="100px"
         >
-          <el-form-item label="表格标题:" prop="title">
+          <el-form-item label="弹窗名称:" prop="title">
             <el-input
             @input="change1($evevt)"
               v-model="tableItemForm.title"
@@ -122,7 +123,7 @@
               @change="iptChange()"
             ></el-input>
           </el-form-item>
-          <el-form-item label="表格名称:" prop="tableName">
+          <el-form-item label="绑定表名称:" prop="tableName">
             <el-select
               v-model="tableItemForm.tableName"
               @change="getList()"
@@ -141,7 +142,7 @@
               </el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="表格主键:" prop="selectFields">
+          <!-- <el-form-item label="表格主键:" prop="selectFields">
             <el-select
               v-model="tableItemForm.selectFields"
               placeholder="请选择表格主键"
@@ -158,8 +159,8 @@
               }}</span>
             </el-option>
             </el-select>
-          </el-form-item>
-          <el-form-item label="时间格式" prop="timeFormate">
+          </el-form-item> -->
+          <!-- <el-form-item label="时间格式" prop="timeFormate">
             <el-select
               v-model="tableItemForm.timeFormate"
               placeholder="请选择时间格式"
@@ -184,8 +185,16 @@
                 :value="val.tableName + '.' + val.fieldName"
               ></el-option>
             </el-select>
+          </el-form-item> -->
+          <el-form-item label="绑定按钮">
+            <el-select
+              v-model="tableItemForm.bottons"
+              placeholder=""
+            >
+            
+            </el-select>
           </el-form-item>
-          <el-form-item label="排序方式" v-show="tableItemForm.orderByColumn">
+          <!-- <el-form-item label="排序方式" v-show="tableItemForm.orderByColumn">
             <el-radio v-model="tableItemForm.isAsc" :label="false"
               >升序</el-radio
             >
@@ -315,7 +324,7 @@
               </template>
             </el-table-column>
           </el-table>
-          </el-form-item>
+          </el-form-item> -->
           <el-form-item class="btn">
             <el-button @click="dialogVisible = false">取 消</el-button>
             <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
@@ -447,7 +456,10 @@ export default {
     resetQuery(){},
     // 新增按钮
     async handleAdd(){
-      this.dialogVisible = true
+      // this.dialogVisible = true
+      this.$router.push({
+        path: "/system/fromModel/index/dialogMange",
+      });
       this.getAllTable()
       await this.getMenuList()
     },

ruoyi-ui/src/views/dragform/tableList.vue

@@ -259,6 +259,7 @@ export default {
       open: false,
       // 查询参数
       queryParams: {
+        dtType: 0,
         pageNum: 1,
         pageSize: 10,
         dtName: null,
@@ -364,7 +365,6 @@ export default {
     //   this.title = "添加动态格";
     // },
     handleAdd() {
-      console.log(this.addRoutes);
       this.$router.push({
         path: "/system/fromModel/index/tableMange",
       });

ruoyi-ui/src/views/relateTable/components/RelateTableCard.vue

@@ -229,8 +229,6 @@ export default {
             if(this.newsort == 0){
               this.getDataHandler()
               // this.queryParams.queryMap.sqlkey = this.templateInfo.template.sqlKey;
-            } else {
-
             }
             let k;
             // console.log('conditions', this.tableCondition);
@@ -245,8 +243,6 @@ export default {
                   key: k[0].trim(),
                   value: k[1]
                 })
-
-                
               }
             })
         }  
@@ -272,16 +268,9 @@ export default {
             }
             return kv;
           })
-        if(this.tableList.length !== 0){
-          this.$emit(
-            "updateData",
-            this.tableList[0],
-            this.index,
-          );
         }
-      }
-      this.total = tableLists.total;
-      this.loading = false; 
+        this.total = tableLists.total;
+        this.loading = false; 
     },
     // 处理列表信息
     columnsHandler(columns) {

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

@@ -1287,7 +1287,7 @@ export default {
 
                 // 添加表格组
                 let res = await addGroup(data)
-
+                console.log(res);
                 if(res.code == 200){
                   this.$message.success("创建成功");
 
@@ -1295,6 +1295,8 @@ export default {
                   this.groupForm = {}
                 } else {
                   this.$message.success("创建失败");
+                  this.isShowTable = false
+                  this.groupForm = {}
                   }
                 }
             }else{

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

@@ -1336,7 +1336,7 @@ export default {
       return sql;
     },
     getStaticSQL(key) {
-      // let prefix = "{DBNAME}.";
+      let prefix = "{DBNAME}.";
       let sqlType = this.databaseType; //数据库类型
       // let sqlType = "oracle";
       let sql = "";
@@ -1357,7 +1357,7 @@ export default {
         key +
         " FROM " +
         isNeedUsername +
-        // prefix +
+        prefix +
         this.tableName +
         asOrSpace +
         this.tableName;
@@ -1626,7 +1626,6 @@ export default {
               sortOrder: this.formData.isAsc,
               sqlKey: this.tableKey,
               dtColumnName: columns, //列字段标题名称(存储显示字段信息
-              // dtColumnName: JSON.stringify(columns).replace(/"/g, "'"), //列字段标题名称(存储显示字段信息
               timeFormat: this.formData.timeFormate,
               searchFieldList: searchFieldList, //搜索字段数组
               tableSql: this.getSQLStr(), //  暂定
@@ -1689,7 +1688,7 @@ export default {
                 data.tableKey
               );
               res = await addDragTable(data);
-
+              // console.log('123456789', res)
               this.dragTableStatisticList.forEach((item) => {
                 item.tableKey = this.uuid;
               });