|
|
@@ -0,0 +1,1127 @@
|
|
|
+<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
|
|
|
+ @input="iptChange()"
|
|
|
+ :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
|
|
|
+ @input="iptChange()"
|
|
|
+ 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 { addGroup, listGroup, getTable, delGroup, updataGroup} from '@/api/relateTable/index.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','echoName','echoList'],
|
|
|
+ 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: '依赖其他字段'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ 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: {
|
|
|
+ ...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 = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ echoName: function(val){
|
|
|
+ if(val){
|
|
|
+ console.log(val);
|
|
|
+ this.tableName = this.echoName
|
|
|
+ this.tableFieldList = this.echoList
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ // 修改表格回显数据
|
|
|
+ async initTableData(tId) {
|
|
|
+ let res = await getTable({id : tId});
|
|
|
+ if (res.code == 200) {
|
|
|
+ let lists = res.data.dragTables
|
|
|
+ let groupInfo =JSON.parse(res.data.groupTableInfo)
|
|
|
+
|
|
|
+ lists.forEach(item => {
|
|
|
+ if(item.tableKey == groupInfo[1].tableKey){
|
|
|
+ let echoData = JSON.parse(item.echoData);
|
|
|
+ this.tableName = echoData.tableName;
|
|
|
+ this.tableFieldList = echoData.tableFieldData;
|
|
|
+
|
|
|
+ this.$emit('fieldListChange', this.tableFieldList)
|
|
|
+ this.editData = item;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log('info', groupInfo)
|
|
|
+ } else {
|
|
|
+ this.$message.error("数据回显失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 勾选框回调
|
|
|
+ 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
|
|
|
+ );
|
|
|
+ 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;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ // 按钮数据
|
|
|
+ getBtnMapList(tableKey) {
|
|
|
+ let res = this.formData.btnGroupList.map((item) => {
|
|
|
+ return {
|
|
|
+ tableKey,
|
|
|
+ btnKey: item,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ // 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 = {};
|
|
|
+ },
|
|
|
+ // 修改统计信息
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+};
|
|
|
+</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>
|
Zn