公共table列表 获取表单数据 表单编辑页面

ruoyi-ui/.env.development

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

ruoyi-ui/src/api/menu.js

@@ -6,4 +6,11 @@ export const getRouters = () => {
     url: '/getRouters',
     method: 'get'
   })
+}
+// 获取菜单路由接口
+export const getMenuList = () => {
+  return request({
+    url: '/system/menu/getMenuList',
+    method: 'get'
+  })
 }

ruoyi-ui/src/router/index.js

@@ -54,6 +54,17 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '/tableMange',
+    component: Layout,
+    hidden: true,
+    children: [
+      {
+        path: 'index',
+        component: () => import('@/views/tableMange/index'),
+      }
+    ]
+  },
   {
     path: '/login',
     component: () => import('@/views/login'),
@@ -153,7 +164,7 @@ export const dynamicRoutes = [
       //   meta: { title: '表单建模', activeMenu: '/system/fromModel/formBuild' }
       // }
     ]
-    
+
   },
   {
     path: '/system/role-auth',

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

@@ -0,0 +1,602 @@
+<template>
+  <div class="app-container">
+    <el-row :gutter="20">
+      <el-col :span="18">
+        <el-card shadow="always" :body-style="{ padding: '20px' }">
+          <template #header>
+            <div>
+              <span>字段编辑</span>
+            </div>
+          </template>
+          <!-- <Queryfrom
+            :form-vals="checkedWhere"
+            @getList="getList"
+            ref="mychild"
+          /> -->
+          <el-select
+            v-model="tableName"
+            placeholder="请选择数据表"
+            clearable
+            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"
+            :max-height="tableHeight"
+            row-key="sort"
+          >
+            <!-- <el-table-column type="selection" width="55" align="center" /> -->
+            <!-- <span v-for="(key, val) in columns" :key="val">
+              <el-table-column :label="key" align="center" :prop="val" />
+            </span> -->
+            <el-table-column
+              type="index"
+              label="序号"
+              width="50"
+              class-name="allowDrag"
+            >
+            </el-table-column>
+            <el-table-column prop="fieldName" label="数据字段">
+            </el-table-column>
+            <el-table-column prop="fieldDescription" label="字段描述">
+              <template slot-scope="scope">
+                <el-input v-model="scope.row.fieldDescription"></el-input>
+              </template>
+            </el-table-column>
+            <el-table-column prop="relationTable" label="关联表">
+              <template slot-scope="scope">
+                <el-select
+                  v-model="scope.row.relationTable"
+                  placeholder="请选择关联的表"
+                  clearable
+                  filterable
+                  @change="ralationTableChange(scope.row)"
+                >
+                  <el-option
+                    v-for="item in relationTableList"
+                    :key="item.tableName"
+                    :label="item.tableComment"
+                    :value="item.tableName"
+                  >
+                  </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="关联字段"
+                  clearable
+                  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"
+                  clearable
+                  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-column prop="isSearch" label="是否包含查询">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.isSearch"> </el-switch>
+              </template>
+            </el-table-column>
+            <el-table-column prop="isExport" label="是否导出">
+              <template slot-scope="scope">
+                <el-switch v-model="scope.row.isExport"> </el-switch>
+              </template>
+            </el-table-column>
+            <!-- <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)"
+              >修改
+            </el-button>
+            <el-button
+              size="mini"
+              type="text"
+              icon="el-icon-delete"
+              @click="handleDelete(scope.row)"
+              >删除
+            </el-button>
+          </template>
+        </el-table-column> -->
+          </el-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="queryParams.pageNum"
+            :limit.sync="queryParams.pageSize"
+            @pagination="pageList"
+          />
+        </el-card>
+      </el-col>
+      <el-col :span="6">
+        <el-card shadow="always" :body-style="{ padding: '5px' }">
+          <template #header>
+            <div>
+              <span>菜单编辑</span>
+            </div>
+          </template>
+          <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="菜单路由" prop="routePath">
+              <!-- <el-select v-model="formData.routePath" placeholder="请选择路由">
+                <el-option label="区域一" value="shanghai"></el-option>
+                <el-option label="区域二" value="beijing"></el-option>
+              </el-select> -->
+              <treeselect
+                :append-to-body="true"
+                v-model="formData.routePath"
+                :options="menus"
+                :normalizer="normalizer"
+                :show-count="true"
+                placeholder=""
+              />
+            </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="排序依赖字段">
+              <el-select
+                v-model="formData.orderByColumn"
+                placeholder="请选择排序依赖"
+              >
+                <el-option
+                  v-for="val in orderByFieldList"
+                  :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="ASC">升序</el-radio>
+              <el-radio v-model="formData.isAsc" label="DESC">降序</el-radio>
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="previewHandle">预览</el-button>
+              <el-button type="primary" @click="createHandle"
+                >确认创建</el-button
+              >
+            </el-form-item>
+          </el-form>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-dialog title="效果预览" v-model="isShowPreview" width="50%">
+      <span></span>
+      <template #footer>
+        <span>
+          <el-button @click="isShowPreview = false">关闭</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import {
+  delTableData,
+  dragTableInfo,
+  listTable,
+  unionListTableData,
+  getInfoBySqlKey,
+  addTableData,
+} from "@/api/tablelist/commonTable";
+import { getFormName, getListName } from "@/api/dragform/form.js";
+import { getMenuList } 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";
+export default {
+  name: "tableMange",
+  dicts: ["sys_time_format"],
+  props: [],
+  components: { Queryfrom, Treeselect },
+  data() {
+    return {
+      // 当前模板信息
+      templateInfo: {},
+      // 排序方式 默认降序
+      sortState: true,
+      // 共通查询参数接受子组件的参数
+      queryParams: {
+        pageNum: 1, // 第几页
+        pageSize: 10, // 每页大小
+        orderByColumn: "", // 根据某列排序
+        isAsc: this.sortState ? "DESC" : "ASC", // desc（降序）或 asc（升序）
+        // 基本查询参数
+        basicMap: {
+          tableName: "",
+        },
+        // 当前表字段筛选参数
+        queryMap: {
+          // 当前查询基本参数
+          // ... key : value         当前页面的筛选条件
+        },
+      },
+      // 列信息
+      columns: {},
+      // 查询条件
+      queryFromWhere: {},
+      // 当前table唯一标识
+      sqlkey: "",
+      // 表格的高度
+      tableHeight: document.documentElement.scrollHeight - 245 + "px",
+      tableList: [], //所有表格列表
+      tableFieldList: [], // 当前表格字段数据
+      tableName: "", // 当前表名称
+
+      relationTableList: [], //关联表格列表
+      relationFieldList: [], //关联字段列表
+      relationTypeList: [], //关联方式列表
+      total: 0, //表格数据总数
+      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: "是否导出",
+        },
+      ], //表头列表
+
+      // 右侧筛选条件勾选数据
+      // checkedList: [], //勾选的查询框
+      // checkedWhere:[],//需要渲染的查询表单
+
+      // 右侧表单编辑
+      formData: {
+        menuName: "",
+        routePath: 1,
+        isShowList: true,
+        timeFormate: "",
+        orderByColumn: "",
+        isAsc: "ASC",
+      },
+      rules: {
+        menuName: [
+          { required: true, message: "请输入菜单名称", trigger: "blur" },
+        ],
+        routePath: [
+          { required: true, message: "请选择路由", trigger: "change" },
+        ],
+        timeFormate: [
+          { required: true, message: "请选择时间格式", trigger: "change" },
+        ],
+      },
+      menus: [], //路由列表数据
+
+      // 预览弹窗相关
+      isShowPreview: false, //弹窗显示与隐藏
+    };
+  },
+  computed: {
+    ...mapState({
+      databaseName: (state) => state.user.dataSource.databaseName,
+      databaseType: (state) => state.user.dataSource.databaseType,
+    }),
+    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);
+    },
+  },
+  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 = [];
+      }
+      console.log(
+        this.tableList.filter((item) => item.tableName != val),
+        "12341"
+      );
+      console.log(this.relationTableList, "this.relationTableList");
+    },
+  },
+  methods: {
+    /** 查询列表 */
+    getList(queryParams) {
+      if (!this.tableName) return;
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: this.tableName,
+      };
+
+      // 获取当前表单结构信息
+      getListName(data).then((res) => {
+        this.tableFieldList = res.map((item) => {
+          return {
+            fieldName: item.fieldName,
+            fieldDescription: item.fieldDescription,
+            relationTable: "",
+            relationFieldName: "",
+            relaFieldNameList: [],
+            disableRelaFieldName: false,
+            relationType: "",
+            disableRelaType: false,
+            isShow: true,
+            isSearch: false,
+            isExport: true,
+          };
+        });
+      });
+    },
+    // 关联表变化回调
+    async ralationTableChange(row) {
+      if (!row.relationTable) {
+        row.relationFieldName = "";
+        row.relationType = "";
+        row.disableRelaFieldName = false;
+        row.disableRelaType = false;
+        return;
+      }
+      // 获取关联表的字段
+      let data = {
+        databaseName: this.databaseName,
+        databaseType: this.databaseType,
+        tableName: row.relationTable,
+      };
+      let res = await getListName(data);
+      row.relaFieldNameList = res.map((item) => {
+        return {
+          fieldName: item.fieldName,
+          fieldDescription: item.fieldDescription,
+        };
+      });
+      row.disableRelaFieldName = true;
+    },
+    // 关联字段回调
+    async relationFieldChange(row) {
+      if (!row.relationFieldName) {
+        row.relationType = "";
+        row.disableRelaType = false;
+        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);
+      this.tableList = res.data;
+    },
+    //处理表格行拖拽
+    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;
+          }
+        },
+      });
+    },
+    /** 转换菜单数据结构 */
+    normalizer(node) {
+      if (node.children && !node.children.length) {
+        delete node.children;
+      }
+      return {
+        id: node.menuId,
+        label: node.menuName,
+        children: node.children,
+      };
+    },
+    // 获取路由表单数据
+    async getMenuList() {
+      let res = await getMenuList();
+      console.log(res);
+      this.menus = this.handleTree(res.data, "menuId");
+    },
+    // 预览结果回调
+    async previewHandle() {
+      // 发送请求获取预览数据
+    },
+    // 创建回调
+    async createHandle() {
+      this.$refs.formData.validate((valid) => {
+        if (valid) {
+          let data = {
+            dtName: this.formData.menuName,
+            tableKey: this.formData.routePath, //  暂定
+            dtTableName: this.tableName,
+            dtColumnName: {}, //列字段标题名称(存储显示字段信息
+            timeFormat: this.formData.timeFormate,
+            searchFieldList: [], //搜索字段数组
+            tableSql: "select * from test", //  暂定
+            tableExportField: {}, //导出字段名及列名
+          };
+          this.tableFieldList.forEach((item) => {
+            if (item.isShow) {
+              data.dtColumnName[item.fieldName] = item.fieldDescription;
+            }
+            if (item.isSearch) {
+              data.searchFieldList.push(item.fieldName);
+            }
+            if (item.isExport) {
+              data.tableExportField[item.fieldName] = item.fieldDescription;
+            }
+          });
+          console.log(data);
+        } else {
+          this.$message.warning("请完善表单");
+          return false;
+        }
+      });
+    },
+  },
+  created() {},
+  mounted() {
+    this.getAllTable();
+    this.initDragTable();
+    this.getMenuList();
+  },
+};
+</script>
+
+<style scoped lang="scss">
+::v-deep .right_card {
+  min-height: 500px !important;
+}
+</style>

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

@@ -1,11 +1,30 @@
 <template>
   <div class="app-container">
-    <el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
-      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
-                 :action="upload.url + '?updateSupport=' + upload.updateSupport+'&tableName='+tableName"
-                 :disabled="upload.isUploading"
-                 :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false"
-                 :onChange="handleChange" drag>
+    <el-dialog
+      :title="upload.title"
+      :visible.sync="upload.open"
+      width="400px"
+      append-to-body
+    >
+      <el-upload
+        ref="upload"
+        :limit="1"
+        accept=".xlsx, .xls"
+        :headers="upload.headers"
+        :action="
+          upload.url +
+          '?updateSupport=' +
+          upload.updateSupport +
+          '&tableName=' +
+          tableName
+        "
+        :disabled="upload.isUploading"
+        :on-progress="handleFileUploadProgress"
+        :on-success="handleFileSuccess"
+        :auto-upload="false"
+        :onChange="handleChange"
+        drag
+      >
         <i class="el-icon-upload"></i>
         <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
         <div class="el-upload__tip text-center" slot="tip">
@@ -14,8 +33,12 @@
           <!--            是否更新已经存在的用户数据-->
           <!--          </div>-->
           <span>仅允许导入xls、xlsx格式文件。</span>
-          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
-                   @click="importTemplate">下载模板
+          <el-link
+            type="primary"
+            :underline="false"
+            style="font-size: 12px; vertical-align: baseline"
+            @click="importTemplate"
+            >下载模板
           </el-link>
         </div>
       </el-upload>
@@ -24,7 +47,11 @@
         <el-button @click="upload.open = false">取 消</el-button>
       </div>
     </el-dialog>
-    <Queryfrom :form-vals="templateInfo.where" @getList="getList" ref="mychild"/>
+    <Queryfrom
+      :form-vals="templateInfo.where"
+      @getList="getList"
+      ref="mychild"
+    />
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
         <el-button
@@ -33,7 +60,7 @@
           icon="el-icon-plus"
           size="mini"
           @click="handleAdd"
-        >新增
+          >新增
         </el-button>
       </el-col>
       <el-col :span="1.5">
@@ -44,7 +71,7 @@
           size="mini"
           :disabled="single"
           @click="handleUpdate"
-        >修改
+          >修改
         </el-button>
       </el-col>
       <el-col :span="1.5">
@@ -55,7 +82,7 @@
           size="mini"
           :disabled="multiple"
           @click="handleDelete"
-        >删除
+          >删除
         </el-button>
       </el-col>
       <el-col :span="1.5">
@@ -64,7 +91,7 @@
           icon="el-icon-upload2"
           size="mini"
           @click="upload.open = true"
-        >导入
+          >导入
         </el-button>
       </el-col>
       <el-col :span="1.5">
@@ -74,37 +101,48 @@
           icon="el-icon-download"
           size="mini"
           @click="handleExport"
-        >导出
+          >导出
         </el-button>
       </el-col>
-      <right-toolbar :showSearch.sync="showSearch" @queryTable="pageList"></right-toolbar>
+      <right-toolbar
+        :showSearch.sync="showSearch"
+        @queryTable="pageList"
+      ></right-toolbar>
     </el-row>
-    <el-table v-loading="loading" :data="tableList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center"/>
-      <span v-for="(key,val) in columns">
-        <el-table-column :label="key" align="center" :prop="val"/>
+    <el-table
+      v-loading="loading"
+      :data="tableList"
+      @selection-change="handleSelectionChange"
+    >
+      <el-table-column type="selection" width="55" align="center" />
+      <span v-for="(key, val) in columns" :key="key">
+        <el-table-column :label="key" align="center" :prop="val" />
       </span>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <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)"
-          >修改
+            >修改
           </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
-          >删除
+            >删除
           </el-button>
         </template>
       </el-table-column>
     </el-table>
     <pagination
-      v-show="total>0"
+      v-show="total > 0"
       :total="total"
       :page.sync="queryParams.pageNum"
       :limit.sync="queryParams.pageSize"
@@ -112,19 +150,42 @@
     />
     <!-- 添加或修改销售出库单：- 过磅记录生成数据对话框 -->
     <el-dialog :title="title" :visible.sync="open" append-to-body>
-      <iframe :src="iframeUrl" width="100%" height="600px" style="border: none;" scrolling="no">
-      </iframe>
+      <!-- <iframe
+        :src="iframeUrl"
+        width="100%"
+        height="600px"
+        style="border: none"
+        scrolling="no"
+      >
+      </iframe> -->
+      <k-form-build
+        ref="addFromRef"
+        :defaultValue="defaultValue"
+        @submit="tempSubBtn"
+        :value="jsonData"
+      />
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="editConfirmHandler">确 定</el-button>
+        <el-button @click="cancel">取 消</el-button>
+      </div>
     </el-dialog>
   </div>
 </template>
 <script>
-import {delTableData, dragTableInfo, listTable, unionListTableData, getInfoBySqlKey} from "@/api/tablelist/commonTable";
-import {getToken} from "@/utils/auth";
+import {
+  delTableData,
+  dragTableInfo,
+  listTable,
+  unionListTableData,
+  getInfoBySqlKey,
+  addTableData,
+} from "@/api/tablelist/commonTable";
+import { getToken } from "@/utils/auth";
 import Queryfrom from "@/views/tablelist/commonTable/queryfrom.vue";
 
 export default {
   name: "listInfo",
-  components: {Queryfrom},
+  components: { Queryfrom },
   data() {
     return {
       // 遮罩层
@@ -161,7 +222,7 @@ export default {
         // 是否更新已经存在的数据
         updateSupport: 0,
         // 设置上传的请求头部
-        headers: {Authorization: "Bearer " + getToken()},
+        headers: { Authorization: "Bearer " + getToken() },
         // 上传的地址
         url: process.env.VUE_APP_BASE_API3 + "common/uploadData",
       },
@@ -169,20 +230,21 @@ export default {
       sortState: true,
       // 共通查询参数接受子组件的参数
       queryParams: {
-        pageNum: 1,                  // 第几页
-        pageSize: 10,                // 每页大小
-        orderByColumn: "",  // 根据某列排序
+        pageNum: 1, // 第几页
+        pageSize: 10, // 每页大小
+        orderByColumn: "", // 根据某列排序
         isAsc: this.sortState ? "DESC" : "ASC", // desc（降序）或 asc（升序）
         // 基本查询参数
         basicMap: {
-          tableName: "drag_form"
+          tableName: "drag_form",
         },
         // 当前表字段筛选参数
-        queryMap: {                   // 当前查询基本参数
+        queryMap: {
+          // 当前查询基本参数
           // ... key : value         当前页面的筛选条件
           // 超级查询的唯一值
-          queryCriteriaValue: ""
-        }
+          queryCriteriaValue: "",
+        },
       },
       // 列信息
       columns: {},
@@ -195,7 +257,11 @@ export default {
       // 当前表名称
       tableName: null,
       //存放html代码块
-      iframeUrl: '',
+      iframeUrl: "",
+      //存放表单渲染数据
+      jsonData: {},
+      // 回显表格数据,
+      defaultValue: {},
     };
   },
 
@@ -208,45 +274,51 @@ export default {
     getList(queryParams) {
       this.loading = true;
       // 序列化当前查询参数列表
-      this.queryParams.queryMap = queryParams.queryMap
+      this.queryParams.queryMap = queryParams.queryMap;
       // 获取当前表单结构信息
-      dragTableInfo({queryMap: {sqlkey: this.sqlkey}}).then(res => {
-        // 得到当前模版信息 --- sql columns queryWhere
-        this.templateInfo = res.data.resultMap;
-        console.log(this.templateInfo);
-        this.tableName = this.templateInfo.template.dtTableName;
-        // 得到查询条件
-        this.queryFromWhere = res.data.resultMap.where;
-        //  得到当前列表信息
-        this.columns = JSON.parse(this.templateInfo.template.dtColumnName);
-      }).finally(fes => {
-        if (this.templateInfo == {}) return;
-        // 调用查询需要携带当前table的唯一标识
-        this.queryParams.queryMap.sqlkey = this.sqlkey;
-        // 根据sql语句查询当前表数据
-        unionListTableData(this.queryParams).then(res => {
-          this.tableList = [];
-          res.rows.forEach(item => {
-            this.tableList.push(item.resultMap)
+      dragTableInfo({ queryMap: { sqlkey: this.sqlkey } })
+        .then((res) => {
+          // 得到当前模版信息 --- sql columns queryWhere
+          this.templateInfo = res.data.resultMap;
+          console.log(this.templateInfo);
+          this.tableName = this.templateInfo.template.dtTableName;
+          // 得到查询条件
+          this.queryFromWhere = res.data.resultMap.where;
+          //  得到当前列表信息
+          this.columns = JSON.parse(this.templateInfo.template.dtColumnName);
+        })
+        .finally((fes) => {
+          if (this.templateInfo == {}) return;
+          // 调用查询需要携带当前table的唯一标识
+          this.queryParams.queryMap.sqlkey = this.sqlkey;
+          // 根据sql语句查询当前表数据
+          unionListTableData(this.queryParams).then((res) => {
+            this.tableList = [];
+            res.rows.forEach((item) => {
+              this.tableList.push(item.resultMap);
+            });
+            this.total = res.total;
+            this.loading = false;
           });
-          this.total = res.total;
-          this.loading = false;
         });
-      });
     },
     // 取消按钮
     cancel() {
       this.open = false;
-      this.reset();
+      // this.reset();
     },
     // 分页查询
     pageList(row) {
-      console.log(row)
+      console.log(row);
       // 调用子组件-》携带子组件参数请求后台
-      this.$refs.mychild.pageList(row == undefined ? {
-        limit: this.queryParams.pageSize,
-        page: this.queryParams.pageNum
-      } : row);
+      this.$refs.mychild.pageList(
+        row == undefined
+          ? {
+              limit: this.queryParams.pageSize,
+              page: this.queryParams.pageNum,
+            }
+          : row
+      );
     },
     // 多选框选中数据
     handleSelectionChange(selection) {
@@ -271,24 +343,32 @@ export default {
     /** 新增按钮操作 */
     handleAdd(row) {
       // this.reset();
-      getInfoBySqlKey(this.sqlkey).then(({data}) => {
+      this.defaultValue = {};
+      getInfoBySqlKey(this.sqlkey).then(({ data }) => {
         const htmlCode = data.dfHtmlTemplate;
-        this.iframeUrl = 'data:text/html;charset=utf-8,' + encodeURI(htmlCode);
+        this.iframeUrl = "data:text/html;charset=utf-8," + encodeURI(htmlCode);
+        this.jsonData = JSON.parse(data.dfVueTemplate);
         this.open = true;
         this.title = "添加信息";
         this.form.password = this.initPassword;
+        this.$nextTick(() => {
+          this.$refs.addFromRef.reset();
+        });
       });
-
     },
     /** 修改按钮操作 */
     handleUpdate(row) {
-
-      getInfoBySqlKey(this.sqlkey).then(({data}) => {
+      getInfoBySqlKey(this.sqlkey).then(({ data }) => {
         const htmlCode = data.dfHtmlTemplate;
-        this.iframeUrl = 'data:text/html;charset=utf-8,' + encodeURI(htmlCode);
+        this.iframeUrl = "data:text/html;charset=utf-8," + encodeURI(htmlCode);
+        Object.assign(this.defaultValue, row);
+        this.jsonData = JSON.parse(data.dfVueTemplate);
         this.open = true;
         this.title = "添加信息";
         this.form.password = this.initPassword;
+        this.$nextTick(() => {
+          this.$refs.addFromRef.setData(row);
+        });
       });
       return;
       this.reset();
@@ -305,7 +385,6 @@ export default {
       });
     },
 
-
     /** 提交按钮 */
     submitForm: function () {
       this.$refs["form"].validate((valid) => {
@@ -334,7 +413,7 @@ export default {
       let delIds = this.ids;
 
       if (row.id != undefined && row.id != null) {
-        delIds = []
+        delIds = [];
         delIds.push(row.id);
         // if (delIds.findIndex(item => item === row.id) == -1) {
         //   delIds.push(row.id);
@@ -342,12 +421,12 @@ export default {
       }
       let data = {
         basicMap: {
-          tableName: this.tableName
+          tableName: this.tableName,
         },
         conditionMap: {
-          id: delIds
-        }
-      }
+          id: delIds,
+        },
+      };
       this.$modal
         .confirm('是否确认删除"' + delIds + '"的数据项？')
         .then(function () {
@@ -358,26 +437,26 @@ export default {
           this.$refs.mychild.pageList();
           this.$modal.msgSuccess("删除成功");
         })
-        .catch(() => {
-        });
+        .catch(() => {});
     },
     /** 导出按钮操作 */
     handleExport() {
       if (this.ids.length > 0) {
-        this.queryParams['execlMap'] = []
-        this.ids.forEach(item => {
-            this.queryParams.execlMap.push(this.tableList.find(ttem => {
-              return ttem.id === item
-            }))
-          }
-        )
+        this.queryParams["execlMap"] = [];
+        this.ids.forEach((item) => {
+          this.queryParams.execlMap.push(
+            this.tableList.find((ttem) => {
+              return ttem.id === item;
+            })
+          );
+        });
       }
       this.queryParams.execlMap = JSON.stringify(this.queryParams.execlMap);
-      console.log(this.queryParams)
+      console.log(this.queryParams);
       this.download(
         process.env.VUE_APP_BASE_API3 + "dragform/common/export",
         {
-          ...this.queryParams
+          ...this.queryParams,
         },
         `文件名称_${new Date().getTime()}.xlsx`
       );
@@ -390,7 +469,8 @@ export default {
     /** 下载模板操作 */
     importTemplate() {
       this.download(
-        process.env.VUE_APP_BASE_API3 + `dragform/common/exportTemplate?tableName=${this.tableName}&sqlkey=${this.sqlkey}`,
+        process.env.VUE_APP_BASE_API3 +
+          `dragform/common/exportTemplate?tableName=${this.tableName}&sqlkey=${this.sqlkey}`,
         {},
         `下载模版名称${new Date().getTime()}.xlsx`
       );
@@ -406,25 +486,67 @@ export default {
       this.$refs.upload.clearFiles();
       this.$alert(
         "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
-        response.msg +
-        "</div>",
+          response.msg +
+          "</div>",
         "导入结果",
-        {dangerouslyUseHTMLString: true}
+        { dangerouslyUseHTMLString: true }
       );
-      this.$refs.mychild.pageList({limit: this.queryParams.pageSize, page: this.queryParams.pageNum});
+      this.$refs.mychild.pageList({
+        limit: this.queryParams.pageSize,
+        page: this.queryParams.pageNum,
+      });
     },
     //重点在这里
     handleChange(file, fileList) {
-      file.name = this.tableName + '.' + file.name.split(".")[1]
-      fileList.forEach(item => {
-        item.name = this.tableName + '.' + file.name.split(".")[1]
-      })
-      let newFile = new File([file], this.tableName + '.' + file.name.split(".")[1]); //创建出来也是不可编辑的file对象
+      file.name = this.tableName + "." + file.name.split(".")[1];
+      fileList.forEach((item) => {
+        item.name = this.tableName + "." + file.name.split(".")[1];
+      });
+      let newFile = new File(
+        [file],
+        this.tableName + "." + file.name.split(".")[1]
+      ); //创建出来也是不可编辑的file对象
     },
     // 提交上传文件
     submitFileForm() {
       this.$refs.upload.submit();
     },
+    //提交编辑结果按钮回调
+    editConfirmHandler() {
+      this.$refs.addFromRef
+        .getData()
+        .then(async (values) => {
+          let data = {
+            basicMap: {
+              tableName: "test",
+            },
+            addListMap: [values],
+          };
+          if (Object.keys(this.defaultValue).length) {
+            this.$modal.msgSuccess("修改成功");
+          } else {
+            let res = await addTableData(data);
+            this.$modal.msgSuccess("添加成功");
+            console.log(res);
+          }
+          this.defaultValue = {};
+          this.open = false;
+        })
+        .catch((res) => {
+          console.log(res);
+          console.log("验证未通过，获取失败");
+        });
+    },
+    // 使用提交数据类型的按钮获取数据
+    tempSubBtn(getData) {
+      getData()
+        .then((values) => {
+          console.log("验证通过", values);
+        })
+        .catch(() => {
+          console.log("验证未通过，获取失败");
+        });
+    },
   },
 };
 </script>