|
|
@@ -0,0 +1,917 @@
|
|
|
+<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="请选择数据表"
|
|
|
+ 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="id"
|
|
|
+ :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
|
|
+ >
|
|
|
+ >
|
|
|
+ <!-- <el-table-column type="selection" width="55" align="center" /> -->
|
|
|
+ <!-- <span v-for="(key, val) in columns" :key="val">
|
|
|
+ <el-table-column :label="key" align="center" :prop="val" />
|
|
|
+ </span> -->
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ class-name="allowDrag"
|
|
|
+ >
|
|
|
+ </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"
|
|
|
+ :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"
|
|
|
+ >
|
|
|
+ </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="relationShowField" label="关联显示字段">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-select
|
|
|
+ v-model="scope.row.relationShowField"
|
|
|
+ :disabled="!scope.row.disableRelaFieldName"
|
|
|
+ placeholder="请选择"
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ multiple
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in scope.row.relaFieldNameList"
|
|
|
+ :key="item.fieldName"
|
|
|
+ :label="item.fieldDescription"
|
|
|
+ :value="item.fieldName + ' ' + item.fieldDescription"
|
|
|
+ >
|
|
|
+ </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="效果预览" :visible.sync="isShowPreview" width="50%">
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col span="18">
|
|
|
+ <el-input placeholder="请输入" clearable />
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col span="6">
|
|
|
+ <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>
|
|
|
+ <!-- <right-toolbar
|
|
|
+ showSearch.sync="true"
|
|
|
+ @queryTable="() => {}"
|
|
|
+ ></right-toolbar> -->
|
|
|
+ </el-row>
|
|
|
+ <el-table :data="tableDataList" @selection-change="() => {}">
|
|
|
+ <el-table-column
|
|
|
+ type="selection"
|
|
|
+ width="55"
|
|
|
+ align="center"
|
|
|
+ ></el-table-column>
|
|
|
+ <!-- <span v-for="(key, val) in columns" :key="key">
|
|
|
+ <el-table-column :label="key" align="center" :prop="val" />
|
|
|
+ </span> -->
|
|
|
+ <el-table-column
|
|
|
+ v-for="item in columns"
|
|
|
+ :key="item.key"
|
|
|
+ :label="item.value"
|
|
|
+ align="center"
|
|
|
+ :prop="item.key"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
+ <!-- <template slot-scope="scope"> -->
|
|
|
+ <template>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="() => {}"
|
|
|
+ >修改
|
|
|
+ </el-button>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="() => {}"
|
|
|
+ >删除
|
|
|
+ </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"
|
|
|
+ />
|
|
|
+ <template #footer>
|
|
|
+ <span>
|
|
|
+ <el-button @click="isShowPreview = false">关闭</el-button>
|
|
|
+ <el-button type="primary" @click="createHandle">确认创建</el-button>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {
|
|
|
+ delTableData,
|
|
|
+ dragTableInfo,
|
|
|
+ listTable,
|
|
|
+ unionListTableData,
|
|
|
+ getInfoBySqlKey,
|
|
|
+ addTableData,
|
|
|
+} from "@/api/tablelist/commonTable";
|
|
|
+import {
|
|
|
+ getFormName,
|
|
|
+ getListName,
|
|
|
+ dragTablePreview,
|
|
|
+} from "@/api/dragform/form.js";
|
|
|
+import { addDragTable } from "@/api/tablelist/commonTable.js";
|
|
|
+import { addMenu } from "@/api/system/menu.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";
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+export default {
|
|
|
+ name: "tableMange",
|
|
|
+ dicts: ["sys_time_format"],
|
|
|
+ props: [],
|
|
|
+ components: { Queryfrom, Treeselect },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // 当前模板信息
|
|
|
+ templateInfo: {},
|
|
|
+ // 排序方式 默认降序
|
|
|
+ sortState: true,
|
|
|
+ // 列信息
|
|
|
+ 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, //弹窗显示与隐藏
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ orderByColumn: "",
|
|
|
+ isAsc: "DESC",
|
|
|
+ basicMap: {
|
|
|
+ sql: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ loading: false, //表格加载
|
|
|
+ tableDataList: [], //数据
|
|
|
+ };
|
|
|
+ },
|
|
|
+ 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 = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ 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, index) => {
|
|
|
+ return {
|
|
|
+ id: 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,
|
|
|
+ children: [],
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 关联表变化回调
|
|
|
+ async ralationTableChange(row) {
|
|
|
+ if (!row.relationTable) {
|
|
|
+ row.relationFieldName = "";
|
|
|
+ row.relationType = "";
|
|
|
+ row.disableRelaFieldName = false;
|
|
|
+ row.disableRelaType = false;
|
|
|
+ row.children = [];
|
|
|
+ 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.children = row.relaFieldNameList.map((item, index) => {
|
|
|
+ return {
|
|
|
+ id: row.relationTable + " " + item.fieldName,
|
|
|
+ fieldName: item.fieldName,
|
|
|
+ fieldDescription: item.fieldDescription,
|
|
|
+ isSearch: false,
|
|
|
+ isShow: true,
|
|
|
+ isExport: true,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ row.disableRelaFieldName = true;
|
|
|
+ },
|
|
|
+ // 关联字段回调
|
|
|
+ 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);
|
|
|
+ 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");
|
|
|
+ },
|
|
|
+ // 拼接查询sql语句
|
|
|
+ getSQLStr() {
|
|
|
+ let sqlType = this.databaseType;
|
|
|
+ let sql = "";
|
|
|
+ // mysql
|
|
|
+ sql += "SELECT ";
|
|
|
+ let fieldNameArr = [],
|
|
|
+ relaTypeArr = [];
|
|
|
+ let mainTableName = this.tableName;
|
|
|
+ this.tableFieldList
|
|
|
+ .filter((item) => item.isShow)
|
|
|
+ .map((item, index, arr) => {
|
|
|
+ //主表查询
|
|
|
+ fieldNameArr.push(mainTableName + "." + item.fieldName);
|
|
|
+
|
|
|
+ if (
|
|
|
+ item.relationTable &&
|
|
|
+ item.relationShowField.length &&
|
|
|
+ item.relationType &&
|
|
|
+ item.relationFieldName
|
|
|
+ ) {
|
|
|
+ //关联表字段查询
|
|
|
+ item.relationShowField.map((val) => {
|
|
|
+ fieldNameArr.push(item.relationTable + "." + val.split(" ")[0]);
|
|
|
+ });
|
|
|
+ //关联方式
|
|
|
+ relaTypeArr.push(
|
|
|
+ item.relationType +
|
|
|
+ " " +
|
|
|
+ item.relationTable +
|
|
|
+ " AS " +
|
|
|
+ item.relationTable +
|
|
|
+ " ON " +
|
|
|
+ item.relationTable +
|
|
|
+ "." +
|
|
|
+ item.relationFieldName +
|
|
|
+ " = " +
|
|
|
+ this.tableName +
|
|
|
+ "." +
|
|
|
+ item.fieldName
|
|
|
+ );
|
|
|
+ }
|
|
|
+ });
|
|
|
+ sql +=
|
|
|
+ fieldNameArr.join(",") +
|
|
|
+ " FROM " +
|
|
|
+ mainTableName +
|
|
|
+ " AS " +
|
|
|
+ mainTableName;
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ // 获取列表信息
|
|
|
+ getColumns() {
|
|
|
+ let columns = [];
|
|
|
+ this.tableFieldList.forEach((item) => {
|
|
|
+ if (item.isShow) {
|
|
|
+ let tempObj = {};
|
|
|
+ tempObj[item.fieldName] = item.fieldDescription;
|
|
|
+ columns.push(tempObj);
|
|
|
+ if (item.children.length) {
|
|
|
+ item.children
|
|
|
+ .filter((val) => val.isShow)
|
|
|
+ .map((child) => {
|
|
|
+ let tempObj = {};
|
|
|
+ tempObj[child.fieldName] = child.fieldDescription;
|
|
|
+ columns.push(tempObj);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ return columns;
|
|
|
+ },
|
|
|
+ // 预览结果回调
|
|
|
+ async previewHandle() {
|
|
|
+ this.$refs.formData.validate(async (valid) => {
|
|
|
+ // 至少包含一个查询项
|
|
|
+
|
|
|
+ if (valid) {
|
|
|
+ if (!this.tableName) {
|
|
|
+ this.$message.error("请选择数据表");
|
|
|
+ }
|
|
|
+ // 拼接预览的sql查询语句
|
|
|
+ this.queryParams.basicMap.sql = this.getSQLStr();
|
|
|
+ // 获取表头信息
|
|
|
+ let tempColumns = this.getColumns();
|
|
|
+ this.columns = this.columnsHandler(tempColumns);
|
|
|
+ console.log(this.columns);
|
|
|
+ this.queryParams.isAsc = this.formData.isAsc;
|
|
|
+ // 发送请求获取预览数据
|
|
|
+ let res = await dragTablePreview(this.queryParams);
|
|
|
+ this.tableDataList = [];
|
|
|
+ res.rows.forEach((item) => {
|
|
|
+ this.tableDataList.push(item.resultMap);
|
|
|
+ });
|
|
|
+ console.log(this.tableDataList);
|
|
|
+ console.log(this.columns);
|
|
|
+ this.total = res.total;
|
|
|
+ this.isShowPreview = true;
|
|
|
+ } else {
|
|
|
+ this.$message.warning("请完善表单");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 创建回调
|
|
|
+ async createHandle() {
|
|
|
+ this.$refs.formData.validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let uuid = uuidv4();
|
|
|
+ let data = {
|
|
|
+ dtName: this.formData.menuName,
|
|
|
+ tableKey: this.formData.routePath, // 暂定
|
|
|
+ dtTableName: this.tableName,
|
|
|
+ sqlKey: uuid,
|
|
|
+ dtColumnName: [], //列字段标题名称(存储显示字段信息
|
|
|
+ timeFormat: this.formData.timeFormate,
|
|
|
+ searchFieldList: [], //搜索字段数组
|
|
|
+ tableSql: this.getSQLStr(), // 暂定
|
|
|
+ tableExportField: {}, //导出字段名及列名
|
|
|
+ };
|
|
|
+ this.tableFieldList.forEach((item) => {
|
|
|
+ if (item.isShow) {
|
|
|
+ let tempObj = {};
|
|
|
+ tempObj[item.fieldName] = item.fieldDescription;
|
|
|
+ data.dtColumnName.push(tempObj);
|
|
|
+ if (item.children.length) {
|
|
|
+ item.children.map((child) => {
|
|
|
+ let tempObj = {};
|
|
|
+ tempObj[child.fieldName] = child.fieldDescription;
|
|
|
+ data.dtColumnName.push(tempObj);
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (item.isSearch) {
|
|
|
+ data.searchFieldList.push(item.fieldName);
|
|
|
+ }
|
|
|
+ if (item.isExport) {
|
|
|
+ data.tableExportField[item.fieldName] = item.fieldDescription;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (!data.searchFieldList.length) {
|
|
|
+ this.$message.warning("请至少选择一个包含查询字段");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let res = await addDragTable(data);
|
|
|
+ if (res.code == 200) {
|
|
|
+ let sqlKeyObj = {
|
|
|
+ sqlkey: uuid,
|
|
|
+ };
|
|
|
+ let payLoad = {
|
|
|
+ component: "tablelist/commonTable/listInfo",
|
|
|
+ icon: "",
|
|
|
+ isCache: "0",
|
|
|
+ isFrame: "1",
|
|
|
+ menuName: this.formData.menuName,
|
|
|
+ menuType: "C",
|
|
|
+ orderNum: "0",
|
|
|
+ parentId: this.formData.routePath,
|
|
|
+ path: "testtblae",
|
|
|
+ query: JSON.stringify(sqlKeyObj),
|
|
|
+ status: "0",
|
|
|
+ visible: "0",
|
|
|
+ };
|
|
|
+ let result = await addMenu(payLoad);
|
|
|
+ if (result.code == 200) {
|
|
|
+ this.$message.success("创建成功");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.$message.warning("创建失败");
|
|
|
+ } 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>
|
lph