|
|
@@ -0,0 +1,1685 @@
|
|
|
+<template>
|
|
|
+ <div class="app-container">
|
|
|
+ <el-form
|
|
|
+ :model="queryParams"
|
|
|
+ ref="queryForm"
|
|
|
+ size="small"
|
|
|
+ :inline="true"
|
|
|
+ v-show="showSearch"
|
|
|
+ label-width="68px"
|
|
|
+ >
|
|
|
+ <el-form-item label="表格组名" prop="dtName">
|
|
|
+ <el-input
|
|
|
+ v-model="queryParams.dtName"
|
|
|
+ placeholder="请输入表格组名"
|
|
|
+ clearable
|
|
|
+ @keyup.enter.native="handleQuery"
|
|
|
+ />
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="el-icon-search"
|
|
|
+ size="mini"
|
|
|
+ @click="handleQuery"
|
|
|
+ >搜索</el-button
|
|
|
+ >
|
|
|
+ <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
|
|
+ >重置</el-button
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+
|
|
|
+ <el-row :gutter="10" class="mb8">
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ icon="el-icon-plus"
|
|
|
+ size="mini"
|
|
|
+ @click="handleAdd"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="danger"
|
|
|
+ plain
|
|
|
+ icon="el-icon-delete"
|
|
|
+ size="mini"
|
|
|
+ :disabled="multiple"
|
|
|
+ @click="DeleteTableGroup"
|
|
|
+ >删除</el-button
|
|
|
+ >
|
|
|
+ </el-col>
|
|
|
+ <!-- <el-col :span="1.5">
|
|
|
+ <el-button type="danger" plain size="mini" @click="handlePreview"
|
|
|
+ >动态页面</el-button
|
|
|
+ >
|
|
|
+ </el-col> -->
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableGroupList"
|
|
|
+ ref="tableRef"
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column type="selection" width="55" align="center" />
|
|
|
+ <el-table-column label="表格主键" align="center" prop="id" />
|
|
|
+ <el-table-column label="表格组名" align="center" prop="groupName" />
|
|
|
+ <el-table-column label="描述" align="center" prop="groupDescription" />
|
|
|
+ <el-table-column label="表格数" align="center" prop="groupCount" />
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="成员表格"
|
|
|
+ width="180"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-popover trigger="hover" placement="top">
|
|
|
+ <p v-for="(item,index) in scope.row.groupTableInfo"> {{ index == 0 ? '' :item.tablename }}</p>
|
|
|
+
|
|
|
+ <div slot="reference" class="name-wrapper">
|
|
|
+ <el-tag size="medium">{{ scope.row.groupTableInfo[0].tablename }}</el-tag>
|
|
|
+ </div>
|
|
|
+ </el-popover>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 处理<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="UpdateTableGroup(scope.row)"
|
|
|
+ >修改
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="DeleteTableGroup(scope.row)"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ :total="total"
|
|
|
+ :page.sync="queryParams.pageNum"
|
|
|
+ :limit.sync="queryParams.pageSize"
|
|
|
+ @pagination="getTableList"
|
|
|
+ />
|
|
|
+
|
|
|
+ <!-- 新增联动表格组弹窗 -->
|
|
|
+ <el-dialog :title="groupTitle ? '新增动态表格组' : '修改动态表格组'" :visible.sync="isShowTable">
|
|
|
+ <div class="dialog_wrap">
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="addOneTable"
|
|
|
+ class="mb10"
|
|
|
+ >新增</el-button
|
|
|
+ >
|
|
|
+ <el-form :model="groupForm" :rules="grouprules" ref="groupForm" label-width="100px" class="demo-ruleForm">
|
|
|
+ <el-form-item label="表格组名" prop="groupName">
|
|
|
+ <el-input v-model="groupForm.groupName" placeholder="请输入表格组名"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表格描述" prop="groupDescription">
|
|
|
+ <el-input v-model="groupForm.groupDescription" placeholder="请输入表格描述"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="菜单路由" prop="routePath">
|
|
|
+ <div class="treeselect">
|
|
|
+ <treeselect
|
|
|
+ :append-to-body="true"
|
|
|
+ v-model="groupForm.routePath"
|
|
|
+ :options="menus"
|
|
|
+ :normalizer="normalizer"
|
|
|
+ :show-count="true"
|
|
|
+ placeholder="请选择父级路由"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <el-table
|
|
|
+ :data="tableDataList"
|
|
|
+ border
|
|
|
+ stripe
|
|
|
+ @selection-change="handleSelectionChange"
|
|
|
+ >
|
|
|
+ <el-table-column label="序号" type="index" />
|
|
|
+ <el-table-column label="表格标题" prop="dtName" />
|
|
|
+ <el-table-column
|
|
|
+ label="表格名称"
|
|
|
+ prop="dtTableName"
|
|
|
+ ></el-table-column>
|
|
|
+ <el-table-column label="表格主键" prop="primaryKey">
|
|
|
+ <!-- <template slot-scope="scope" v-for="item in conditionDefaultValueMap ">
|
|
|
+ {{ item }}
|
|
|
+ </template> -->
|
|
|
+ </el-table-column>
|
|
|
+
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ class-name="small-padding fixed-width"
|
|
|
+ >
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <el-dropdown>
|
|
|
+ <el-button type="warning" plain size="small">
|
|
|
+ 处理<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
+ </el-button>
|
|
|
+ <el-dropdown-menu slot="dropdown">
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-edit"
|
|
|
+ @click="relateOne(scope.row)"
|
|
|
+ >修改
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item>
|
|
|
+ <el-button
|
|
|
+ size="mini"
|
|
|
+ type="text"
|
|
|
+ icon="el-icon-delete"
|
|
|
+ @click="handleDelete(scope.row)"
|
|
|
+ >删除
|
|
|
+ </el-button>
|
|
|
+ </el-dropdown-item>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </el-dropdown>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+
|
|
|
+ <el-form-item class="btn">
|
|
|
+ <el-button @click="cancelGroup">取消</el-button>
|
|
|
+ <el-button type="primary" @click="addTableGroup('groupForm')">确认</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 编辑某一条表格数据弹窗 -->
|
|
|
+ <el-dialog :title="relateTitle ? '添加关联表格' :'修改关联表格' " :visible.sync="isShowForm" >
|
|
|
+ <div class="formWrap">
|
|
|
+ <el-form
|
|
|
+ :rules="tableItemRules"
|
|
|
+ ref="tableItemForm"
|
|
|
+ style="max-width: 750px; width: 1000px"
|
|
|
+ :model="tableItemForm"
|
|
|
+ label-width="100px"
|
|
|
+ >
|
|
|
+ <el-form-item label="表格标题:" prop="title">
|
|
|
+ <el-input
|
|
|
+ v-model="tableItemForm.title"
|
|
|
+ style="max-width: 221px"
|
|
|
+ @change="iptChange()"
|
|
|
+ ></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="表格名称:" prop="tableName">
|
|
|
+ <el-select
|
|
|
+ v-model="tableItemForm.tableName"
|
|
|
+ @change="getList()"
|
|
|
+ placeholder="请选择表格名称"
|
|
|
+ >
|
|
|
+ <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-form-item>
|
|
|
+ <el-form-item label="表格主键:" prop="selectFields">
|
|
|
+ <el-select
|
|
|
+ v-model="tableItemForm.selectFields"
|
|
|
+ placeholder="请选择表格主键"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in tableFieldList"
|
|
|
+ :key="item.fieldName"
|
|
|
+ :label="item.fieldDescription"
|
|
|
+ :value="item.fieldName"
|
|
|
+ >
|
|
|
+ <span style="float: left">{{ item.fieldDescription }}</span>
|
|
|
+ <span style="float: right; color: #8492a6; font-size: 13px">{{
|
|
|
+ item.fieldName
|
|
|
+ }}</span>
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="时间格式" prop="timeFormate">
|
|
|
+ <el-select
|
|
|
+ v-model="tableItemForm.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="tableItemForm.orderByColumn"
|
|
|
+ placeholder="请选择排序依赖"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="val in orderByFieldList"
|
|
|
+ :key="val.fieldName"
|
|
|
+ :label="val.fieldDescription"
|
|
|
+ :value="val.tableName + '.' + val.fieldName"
|
|
|
+ ></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="排序方式" v-show="tableItemForm.orderByColumn">
|
|
|
+ <el-radio v-model="tableItemForm.isAsc" :label="false"
|
|
|
+ >升序</el-radio
|
|
|
+ >
|
|
|
+ <el-radio v-model="tableItemForm.isAsc" :label="true"
|
|
|
+ >降序</el-radio
|
|
|
+ >
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item label="展示字段:" prop="FieldList">
|
|
|
+ <el-table
|
|
|
+ :data="tableFieldList"
|
|
|
+ border
|
|
|
+ ref="dragTable"
|
|
|
+ row-key="id"
|
|
|
+ max-height="500px"
|
|
|
+ class="tablefiled"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ type="index"
|
|
|
+ label="序号"
|
|
|
+ width="50"
|
|
|
+ class-name="allowDrag"
|
|
|
+ >
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="fieldName" label="数据字段"></el-table-column>
|
|
|
+ <el-table-column prop="fieldDescription" label="字段描述">
|
|
|
+ <template slot-scope="scope">
|
|
|
+ <input
|
|
|
+ :class="{
|
|
|
+ isNullDesc:
|
|
|
+ scope.row.fieldDescription == '' &&
|
|
|
+ scope.row.isShow &&
|
|
|
+ isInputInvalid
|
|
|
+ ? true
|
|
|
+ : false,
|
|
|
+ ipt: true,
|
|
|
+ }"
|
|
|
+ v-model="scope.row.fieldDescription"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="95px" 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, index) in scope.row.relationTableList"
|
|
|
+ :key="index"
|
|
|
+ :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 width="95px" 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, index) in scope.row.relaFieldNameList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.fieldDescription"
|
|
|
+ :value="item.fieldName"
|
|
|
+ >
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column width="95px" 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, index) in relaTypeList"
|
|
|
+ :key="index"
|
|
|
+ :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" @change="isSearchChange($event, scope.row, scope.$index)"> </el-switch>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item class="btn">
|
|
|
+ <el-button @click="cancelAddHandler">取消</el-button>
|
|
|
+ <el-button type="primary" @click="confirmAddHandler('tableItemForm')">确认</el-button>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+
|
|
|
+ <!-- 是否包含查询字段依赖值对话框 -->
|
|
|
+ <div class="isSearch">
|
|
|
+ <el-dialog
|
|
|
+ title="包含查询依赖值"
|
|
|
+ :visible.sync="isSearchDialog">
|
|
|
+ <el-select v-model="relyOption" placeholder="请选择依赖方式">
|
|
|
+ <el-option
|
|
|
+ v-for="item in relyOptions"
|
|
|
+ :key="item.value"
|
|
|
+ :label="item.label"
|
|
|
+ :value="item.value">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <el-input v-show="relyOption === '0'" v-model="conditionDefaultValueMap" placeholder="请输入依赖内容"></el-input>
|
|
|
+
|
|
|
+ <el-select v-show="relyOption === '1'" v-model="conditionDefaultValueMap" placeholder="请选择依赖字段">
|
|
|
+ <el-option
|
|
|
+ v-for="item in relyFileds.tableFieldList"
|
|
|
+ :key="item.fieldName"
|
|
|
+ :label="item.fieldDescription"
|
|
|
+ :value="item.fieldName">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ <span slot="footer" class="dialog-footer">
|
|
|
+ <el-button @click="isSearchCancel">取 消</el-button>
|
|
|
+ <el-button type="primary" @click="isSearchBtn">确 定</el-button>
|
|
|
+ </span>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import { listTable, removeTableList } from "@/api/dragform/tableList";
|
|
|
+import { getFormName, getListName, dragTablePreview, } from "@/api/dragform/form.js";
|
|
|
+import { delMenu } from "@/api/system/menu";
|
|
|
+import { getMenuList, addMenu} from "@/api/menu.js";
|
|
|
+import { getParticMenu, updateMenu } from "@/api/system/menu.js";
|
|
|
+import { addGroup, listGroup, getTable, delGroup, updataGroup } from '@/api/relateTable/index.js'
|
|
|
+import { addDragTable } from "@/api/tablelist/commonTable.js";
|
|
|
+import { mapGetters, mapState } from "vuex";
|
|
|
+import DictData from "@/components/DictData";
|
|
|
+import { FastBackwardFill, async } from "@/components/updateModule/k-form-design/lib/k-form-design.common";
|
|
|
+import { v4 as uuidv4 } from "uuid";
|
|
|
+import Treeselect from "@riophae/vue-treeselect";
|
|
|
+import "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
|
|
+import json from "highlight.js/lib/languages/json";
|
|
|
+import { getTableInfo, editTable } from "@/api/system/table.js";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "relateTable",
|
|
|
+ components: { Treeselect },
|
|
|
+ dicts: ["sys_time_format", "table_statistic_type"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ isInputInvalid: false,
|
|
|
+
|
|
|
+ // 包含查询依赖字段dialog
|
|
|
+ isSearchDialog: false,
|
|
|
+ isSearchIndex: null,
|
|
|
+ // 依赖方式
|
|
|
+ relyOption: null,
|
|
|
+ relyOptions:[
|
|
|
+ {
|
|
|
+ value: '0',
|
|
|
+ label: '自定义依赖值'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ value: '1',
|
|
|
+ label: '依赖其他字段'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ // 依赖值
|
|
|
+ conditionDefaultValueMap: '',
|
|
|
+ // 上个表格名称及字段
|
|
|
+ relyFileds: {},
|
|
|
+ formdata:{
|
|
|
+ conditionDefaultValueMap: {}
|
|
|
+ },
|
|
|
+ conditionDefault:[],
|
|
|
+ addDragData:[],
|
|
|
+ groupList:[],
|
|
|
+ menus: [], //路由列表数据
|
|
|
+ // 添加关联表格校验规则
|
|
|
+ tableItemRules:{
|
|
|
+ title:[{ required: true, message: '请输入表格标题', trigger: 'blur' }],
|
|
|
+ // tableName:[{ required: true, message: '请选择表格名称', trigger: 'change' }],
|
|
|
+ // selectFields: [{ required: true, message: '请选择关联字段', trigger: 'change' }],
|
|
|
+ },
|
|
|
+ groupForm: {
|
|
|
+ groupName: '',
|
|
|
+ groupDescription:'',
|
|
|
+ routePath: undefined,
|
|
|
+ },
|
|
|
+ grouprules:{
|
|
|
+ groupName:[{ required: true, message: '请输入表格组名', trigger: 'blur' }],
|
|
|
+ groupDescription:[{ required: true, message: '请输入表格描述', trigger: 'blur' }],
|
|
|
+ routePath: [
|
|
|
+ { required: true, message: "请选择路由", trigger: "change" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ menuOrderNum: 0,
|
|
|
+ // 关联方式
|
|
|
+ relaTypeList: [
|
|
|
+ {
|
|
|
+ label: "等值连接",
|
|
|
+ value: "INNER JOIN",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "左连接",
|
|
|
+ value: "LEFT JOIN",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "右连接",
|
|
|
+ value: "RIGHT JOIN",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ searchFieldList: [],
|
|
|
+ // 依赖字段
|
|
|
+ relyFiledsList: [],
|
|
|
+ // 修改row
|
|
|
+ updataGroupRow:{},
|
|
|
+ // 遮罩层
|
|
|
+ loading: false,
|
|
|
+ // 选中数组
|
|
|
+ ids: [],
|
|
|
+ menuIds: [],
|
|
|
+ // 选中数组(包含所有数据)
|
|
|
+ selection: [],
|
|
|
+ Keys: [],
|
|
|
+ menuIds: [],
|
|
|
+ // 非单个禁用
|
|
|
+ single: true,
|
|
|
+ // 非多个禁用
|
|
|
+ multiple: true,
|
|
|
+ // 显示搜索条件
|
|
|
+ showSearch: true,
|
|
|
+ // 总条数
|
|
|
+ total: 0,
|
|
|
+ tableList: [], //所有表格列表
|
|
|
+ // 弹出层标题
|
|
|
+ title: "",
|
|
|
+ // 是否显示弹出层
|
|
|
+ open: false,
|
|
|
+ // 查询参数
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ dtName: null,
|
|
|
+ dtNickname: null,
|
|
|
+ tableKey: null,
|
|
|
+ sqlKey: null,
|
|
|
+ dtTableName: null,
|
|
|
+ dtNotes: null,
|
|
|
+ dtColumnName: null,
|
|
|
+ timeFormat: null,
|
|
|
+ spare: null,
|
|
|
+ spare1: null,
|
|
|
+ isSelection: null,
|
|
|
+ },
|
|
|
+ // 表单参数
|
|
|
+ form: {},
|
|
|
+ // 表单校验
|
|
|
+ rules: {},
|
|
|
+
|
|
|
+ // dialog弹窗数据
|
|
|
+ isShowTable: false,
|
|
|
+ isShowForm: false,
|
|
|
+ // 新增关联表数据
|
|
|
+ tableDataList: [],
|
|
|
+
|
|
|
+ tableFieldList: [], // 当前表格字段数据
|
|
|
+ tableName: "", // 当前表名称
|
|
|
+ selectFields: '', //关联字段
|
|
|
+ relateTitle: true,
|
|
|
+ relateTableName: "", //关联表名称
|
|
|
+ relateFields: "", //子集关联字段
|
|
|
+ relateFieldList: [], //子集关联字段数据
|
|
|
+ groupTitle: true,
|
|
|
+ tableItemForm: {
|
|
|
+ tId: "",
|
|
|
+ rowId: "",
|
|
|
+ title: "",
|
|
|
+ tableName: "",
|
|
|
+ selectFields: "",
|
|
|
+ isAsc: false,
|
|
|
+ timeFormate: "",
|
|
|
+ orderByColumn: "",
|
|
|
+ },
|
|
|
+ tableGroupList: [],
|
|
|
+ // 成员表格提示
|
|
|
+ tableKeyContent: '',
|
|
|
+ groupsMenuId: "",
|
|
|
+ // 修改表格时的menuId
|
|
|
+ menuId: "",
|
|
|
+ // 修改是表格的id
|
|
|
+ groupId:''
|
|
|
+ };
|
|
|
+ },
|
|
|
+ async created() {
|
|
|
+ this.getTableList()
|
|
|
+ },
|
|
|
+ async mounted() {
|
|
|
+ await this.getMenuList();
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ selectRelate(){
|
|
|
+ if(this.tableItemForm.tableName =='') return
|
|
|
+ return this.tableList.filter(item => item.tableName !== this.tableItemForm.tableName)
|
|
|
+ },
|
|
|
+ dataArr() {
|
|
|
+ return this.tableFieldList.filter((item) => item.isShow);
|
|
|
+ },
|
|
|
+ ...mapGetters(["addRoutes"]),
|
|
|
+ ...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,
|
|
|
+ }),
|
|
|
+ orderByFieldList() {
|
|
|
+ return this.tableFieldList;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ 'tableItemForm.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 = [];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 'groupForm.routePath'(nval, oval) {
|
|
|
+ let targetMenu = this.getTargetMenu(this.menus);
|
|
|
+ this.menuOrderNum = targetMenu.children ? targetMenu.children.length : 0;
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ iptChange(){
|
|
|
+ this.$forceUpdate(); //强制刷新
|
|
|
+ },
|
|
|
+ async getTableList(){
|
|
|
+ let res = await listGroup(this.queryParams);
|
|
|
+ this.total = res.total;
|
|
|
+ let info = []
|
|
|
+ res.rows.forEach(item => {
|
|
|
+ item.groupCount = JSON.parse(item.groupTableInfo).length
|
|
|
+
|
|
|
+ info = JSON.parse(item.groupTableInfo)
|
|
|
+ this.groupsMenuId = info[0].menuId
|
|
|
+ item.menuId = info[0].menuId
|
|
|
+ item.groupTableInfo = info
|
|
|
+ })
|
|
|
+ console.log(info);
|
|
|
+ this.tableGroupList = res.rows
|
|
|
+ console.log(this.tableGroupList)
|
|
|
+ },
|
|
|
+ // 是否包含查询switch
|
|
|
+ isSearchChange(status, row,index){
|
|
|
+ this.isSearchDialog = status
|
|
|
+ if(this.isSearchDialog == true){
|
|
|
+ this.conditionDefaultValueMap = ''
|
|
|
+ }
|
|
|
+ this.isSearchIndex = index
|
|
|
+ },
|
|
|
+ // 添加依赖字段取消
|
|
|
+ isSearchCancel(){
|
|
|
+ this.relyOption = null
|
|
|
+ this.conditionDefaultValueMap = ''
|
|
|
+ this.isSearchDialog = false
|
|
|
+ this.tableFieldList[this.isSearchIndex].isSearch = false
|
|
|
+ },
|
|
|
+ isSearchBtn(){
|
|
|
+ if(this.relyFileds.tableName !== undefined){
|
|
|
+ console.log(this.relyFileds.tableName);
|
|
|
+ this.conditionDefault.push('#{'+this.relyFileds.tableName+'.'+this.conditionDefaultValueMap)
|
|
|
+ }else{
|
|
|
+ this.conditionDefault.push(this.conditionDefaultValueMap)
|
|
|
+ }
|
|
|
+ console.log(this.conditionDefault)
|
|
|
+ this.isSearchDialog = false
|
|
|
+ this.conditionDefaultValueMap = ''
|
|
|
+ this.relyFileds.tableName = ''
|
|
|
+ },
|
|
|
+ // 获取路由表单数据
|
|
|
+ async getMenuList() {
|
|
|
+ let res = await listGroup();
|
|
|
+ console.log('res', res);
|
|
|
+ this.menus = this.handleTree(res.data, "menuId");
|
|
|
+ },
|
|
|
+ // 递归拼接查询语句
|
|
|
+ getSQLString(tableFieldList, fieldArr, tableArr, sqlType = "mysql") {
|
|
|
+ let prefix = "{DBNAME}.";
|
|
|
+ let asOrSpace = sqlType == "oracle" ? " " : " AS ";
|
|
|
+ for (let i = 0; i < tableFieldList.length; i++) {
|
|
|
+ let temp = tableFieldList[i];
|
|
|
+ if (temp.isShow) {
|
|
|
+ let tempArr = prefix + temp.tableName + "." + temp.fieldName;
|
|
|
+ if (temp.isChildren) {
|
|
|
+ tempArr += asOrSpace + temp.tableName + "_" + temp.fieldName;
|
|
|
+ }
|
|
|
+ fieldArr.push(tempArr);
|
|
|
+ }
|
|
|
+ if (temp.relationTable && temp.relationFieldName && temp.relationType) {
|
|
|
+ let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
|
|
|
+ tableArr.push(
|
|
|
+ temp.relationType +
|
|
|
+ " " +
|
|
|
+ isNeedUsername +
|
|
|
+ prefix +
|
|
|
+ temp.relationTable +
|
|
|
+ asOrSpace +
|
|
|
+ temp.relationTable +
|
|
|
+ " ON " +
|
|
|
+ prefix +
|
|
|
+ temp.relationTable +
|
|
|
+ "." +
|
|
|
+ temp.relationFieldName +
|
|
|
+ " = " +
|
|
|
+ prefix +
|
|
|
+ temp.tableName +
|
|
|
+ "." +
|
|
|
+ temp.fieldName
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 如果主键不包含显示,则添加至sql语句中
|
|
|
+ let isNotInclude = this.tableFieldList.find(
|
|
|
+ (val) => !val.isShow && val.fieldName == this.tableItemForm.selectFields
|
|
|
+ );
|
|
|
+ if (isNotInclude) {
|
|
|
+ fieldArr.push(
|
|
|
+ prefix + isNotInclude.tableName + "." + isNotInclude.fieldName
|
|
|
+ );
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 拼接查询sql语句
|
|
|
+ getSQLStr() {
|
|
|
+ let prefix = "{DBNAME}.";
|
|
|
+ let sqlType = this.databaseType; //数据库类型
|
|
|
+ // let sqlType = "oracle";
|
|
|
+ let sql = "";
|
|
|
+ // mysql
|
|
|
+ sql += "SELECT ";
|
|
|
+ let fieldNameArr = [],
|
|
|
+ relaTypeArr = [];
|
|
|
+ this.getSQLString(
|
|
|
+ this.tableFieldList,
|
|
|
+ fieldNameArr,
|
|
|
+ relaTypeArr,
|
|
|
+ sqlType
|
|
|
+ );
|
|
|
+ let isNeedUsername = sqlType == "oracle" ? this.username + "." : "";
|
|
|
+ let asOrSpace = sqlType == "oracle" ? " " : " AS ";
|
|
|
+ sql +=
|
|
|
+ fieldNameArr.join(",") +
|
|
|
+ " FROM " +
|
|
|
+ isNeedUsername +
|
|
|
+ prefix +
|
|
|
+ this.tableItemForm.tableName +
|
|
|
+ asOrSpace +
|
|
|
+ this.tableItemForm.tableName;
|
|
|
+ if (relaTypeArr.length) {
|
|
|
+ sql += " " + relaTypeArr.join(" ");
|
|
|
+ }
|
|
|
+ return sql;
|
|
|
+ },
|
|
|
+ /** 查询列表 */
|
|
|
+ getList(queryParams) {
|
|
|
+ if (!this.tableItemForm.tableName) return;
|
|
|
+ let data = {
|
|
|
+ databaseName: this.databaseName,
|
|
|
+ databaseType: this.databaseType,
|
|
|
+ tableName: this.tableItemForm.tableName,
|
|
|
+ };
|
|
|
+
|
|
|
+ // 获取当前表单结构信息
|
|
|
+ getListName(data).then((res) => {
|
|
|
+ this.tableFieldList = res.map((item, index) => {
|
|
|
+ return {
|
|
|
+ id: this.tableItemForm.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.tableItemForm.tableName,
|
|
|
+ relationFieldList: [],
|
|
|
+ };
|
|
|
+ });
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ // 关联表变化回调
|
|
|
+ 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 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,
|
|
|
+ relationFieldList: [],
|
|
|
+ isChildren: true,
|
|
|
+ };
|
|
|
+ });
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ // 递归获取列表信息
|
|
|
+ getCol(
|
|
|
+ tableFieldList,
|
|
|
+ columns,
|
|
|
+ searchFieldList = [],
|
|
|
+ tableExportField = {}
|
|
|
+ ) {
|
|
|
+ if (!tableFieldList.length) return;
|
|
|
+ for (let i = 0; i < tableFieldList.length; i++) {
|
|
|
+ let temp = tableFieldList[i];
|
|
|
+ let tempFieldName = "",
|
|
|
+ exportFieldName = "";
|
|
|
+ if (temp.isChildren) {
|
|
|
+ tempFieldName = temp.tableName + "_" + temp.fieldName;
|
|
|
+ exportFieldName = temp.tableName + "@" + temp.fieldName;
|
|
|
+ } else {
|
|
|
+ tempFieldName = temp.fieldName;
|
|
|
+ exportFieldName = temp.fieldName;
|
|
|
+ }
|
|
|
+ if (temp.isShow) {
|
|
|
+ let tempObj = {};
|
|
|
+ tempObj[tempFieldName] = temp.fieldDescription;
|
|
|
+ columns.push(tempObj);
|
|
|
+ }
|
|
|
+ if (temp.isSearch) {
|
|
|
+ searchFieldList.push(temp.tableName + "." + temp.fieldName);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (temp.isExport) {
|
|
|
+ tableExportField[exportFieldName] = temp.fieldDescription;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 获取所有表格
|
|
|
+ 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()
|
|
|
+ );
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 确认添加一个表格
|
|
|
+ confirmAddHandler(formName) {
|
|
|
+ this.$refs[formName].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ let columns = [],
|
|
|
+ searchFieldList = []
|
|
|
+ this.getCol(
|
|
|
+ this.tableFieldList,
|
|
|
+ columns,
|
|
|
+ searchFieldList,
|
|
|
+ );
|
|
|
+ // 判断是否有包含查询字段
|
|
|
+ if (!searchFieldList.length) {
|
|
|
+ this.$message.warning("请至少选择一个包含查询字段");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ let echoData = {
|
|
|
+ tableName: this.tableItemForm.tableName,
|
|
|
+ tableFieldData: this.tableFieldList,
|
|
|
+ formData: this.groupForm,
|
|
|
+ }
|
|
|
+ // 判断修改还是新增
|
|
|
+ if(this.relateTitle){
|
|
|
+ console.log('新增');
|
|
|
+ let tableKey = uuidv4();
|
|
|
+ let sqlKey = uuidv4();
|
|
|
+ searchFieldList.forEach((item, index) => {
|
|
|
+ this.formdata.conditionDefaultValueMap[item] = this.conditionDefault[index]
|
|
|
+ })
|
|
|
+ this.relyFileds.tableFieldList = this.tableFieldList
|
|
|
+ this.relyFileds.tableName = this.tableItemForm.tableName
|
|
|
+ this.tableItemForm.rowId = Date.now();
|
|
|
+
|
|
|
+ this.tableDataList.push({
|
|
|
+ dtName: this.tableItemForm.title,
|
|
|
+ dtTableName: this.tableItemForm.tableName,
|
|
|
+ rowId: this.tableItemForm.rowId,
|
|
|
+ selectFields: this.tableItemForm.selectFields,
|
|
|
+ orderByColumn: this.tableItemForm.orderByColumn,
|
|
|
+ timeFormate: this.tableItemForm.timeFormate,
|
|
|
+
|
|
|
+ rowId: this.tableItemForm.rowId,
|
|
|
+ tId: this.tId,
|
|
|
+ tableKey: tableKey,
|
|
|
+ sortOrder: this.tableItemForm.isAsc,
|
|
|
+ sqlKey: sqlKey,
|
|
|
+ dtColumnName: columns,
|
|
|
+ timeFormat: 'yyyy-MM-dd',
|
|
|
+ searchFieldList: searchFieldList,
|
|
|
+ conditionDefaultValueMap: this.formdata.conditionDefaultValueMap,
|
|
|
+ tableSql: this.getSQLStr(),
|
|
|
+ tableExportField: '',
|
|
|
+ echoData: JSON.stringify(echoData),
|
|
|
+ });
|
|
|
+
|
|
|
+ // 选择依赖字段
|
|
|
+ this.groupList.push({tableFieldList: this.tableFieldList, tableItemForm: this.tableItemForm, conditionDefaultValueMap: this.conditionDefaultValueMap})
|
|
|
+
|
|
|
+ if(this.groupTitle){
|
|
|
+ this.addDragData.push({
|
|
|
+ rowId: this.tableItemForm.rowId,
|
|
|
+ tId: this.tId,
|
|
|
+ dtName: this.tableItemForm.title,
|
|
|
+ tableKey: tableKey,
|
|
|
+ dtTableName: this.tableItemForm.tableName,
|
|
|
+ primaryKey: this.tableItemForm.selectFields,
|
|
|
+ orderByColumn: this.tableItemForm.orderByColumn,
|
|
|
+ sortOrder: this.tableItemForm.isAsc,
|
|
|
+ sqlKey: sqlKey,
|
|
|
+ dtColumnName: columns,
|
|
|
+ timeFormat: 'yyyy-MM-dd',
|
|
|
+ searchFieldList: searchFieldList,
|
|
|
+ conditionDefaultValueMap: this.formdata.conditionDefaultValueMap,
|
|
|
+ tableSql: this.getSQLStr(),
|
|
|
+ tableExportField: '',
|
|
|
+ echoData: JSON.stringify(echoData),
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ } else {
|
|
|
+ console.log(456);
|
|
|
+ let tableKey = uuidv4();
|
|
|
+ let sqlKey = uuidv4();
|
|
|
+
|
|
|
+ this.relyFileds.tableFieldList = this.tableFieldList
|
|
|
+
|
|
|
+ this.relyFileds.tableName = this.tableItemForm.tableName
|
|
|
+
|
|
|
+
|
|
|
+ console.log(this.conditionDefault);
|
|
|
+ searchFieldList.forEach((item, index) => {
|
|
|
+ // if(this.conditionDefault.length > 1){
|
|
|
+ this.formdata.conditionDefaultValueMap[item] = this.conditionDefault[index]
|
|
|
+ // }else{
|
|
|
+ // this.formdata.conditionDefaultValueMap = this.conditionDefault
|
|
|
+ // }
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log(this.tableItemForm);
|
|
|
+ this.tableDataList.forEach((item, index) => {
|
|
|
+ if(item.tId == this.tableItemForm.tId) {
|
|
|
+ this.tableDataList[index] = {
|
|
|
+ tId: this.tableItemForm.tId,
|
|
|
+ dtName: this.tableItemForm.title,
|
|
|
+ tableKey: tableKey,
|
|
|
+ dtTableName: this.tableItemForm.tableName,
|
|
|
+ primaryKey: this.tableItemForm.selectFields,
|
|
|
+ orderByColumn: this.tableItemForm.orderByColumn,
|
|
|
+ sortOrder: this.tableItemForm.isAsc,
|
|
|
+ sqlKey: sqlKey,
|
|
|
+ dtColumnName: columns,
|
|
|
+ timeFormat: 'yyyy-MM-dd',
|
|
|
+ searchFieldList: searchFieldList,
|
|
|
+ conditionDefaultValueMap: this.formdata?.conditionDefaultValueMap,
|
|
|
+ tableSql: this.getSQLStr(),
|
|
|
+ tableExportField: '',
|
|
|
+ echoData: JSON.stringify(echoData),
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log('11',this.tableDataList);
|
|
|
+ this.$set(this.tableDataList)
|
|
|
+ console.log('11',this.addDragData);
|
|
|
+ }
|
|
|
+ this.isShowForm = false
|
|
|
+ this.tableItemForm = {}
|
|
|
+ this.tableFieldList = []
|
|
|
+ this.relyFiledsList = []
|
|
|
+ this.conditionDefault = []
|
|
|
+ this.conditionDefaultValueMap= ''
|
|
|
+ this.formdata.conditionDefaultValueMap = {}
|
|
|
+ } else {
|
|
|
+ this.$message.error("请完善表单信息");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 修改一个表格数据
|
|
|
+ relateOne(row){
|
|
|
+ console.log(row);
|
|
|
+ if(row.tableKey){
|
|
|
+ this.menuId = row.menuId
|
|
|
+
|
|
|
+
|
|
|
+ for (const key in row.conditionDefaultValueMap) {
|
|
|
+ // this.conditionDefaultValueMap = row.conditionDefaultValueMap[key]
|
|
|
+ console.log(key);
|
|
|
+ this.conditionDefaultValueMap = row.conditionDefaultValueMap[key]
|
|
|
+
|
|
|
+ this.conditionDefault.push(row.conditionDefaultValueMap[key])
|
|
|
+ }
|
|
|
+ console.log(this.conditionDefaultValueMap);
|
|
|
+ // this.initTableData(row.tId);
|
|
|
+ let echoData = JSON.parse(row.echoData)
|
|
|
+
|
|
|
+ this.tableDataList.forEach((item, index) => {
|
|
|
+ if(item.tableKey == row.tableKey){
|
|
|
+ if(index == 0){
|
|
|
+
|
|
|
+ this.relyFileds.tableFieldList = ''
|
|
|
+ }else{
|
|
|
+
|
|
|
+ let beforeEcho = JSON.parse(this.tableDataList[index-1].echoData)
|
|
|
+
|
|
|
+ this.relyFileds.tableFieldList = beforeEcho.tableFieldData
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } )
|
|
|
+ this.tableFieldList = echoData.tableFieldData;
|
|
|
+ // this.tableItemForm = row
|
|
|
+ this.tableItemForm.tId = row.tId
|
|
|
+ this.tableItemForm.rowId = row.tableKey,
|
|
|
+ this.tableItemForm.isAsc = false,
|
|
|
+ this.tableItemForm.orderByColumn = "",
|
|
|
+ this.tableItemForm.title = row.dtName
|
|
|
+ this.tableItemForm.tableName = row.dtTableName
|
|
|
+ this.tableItemForm.selectFields = row.primaryKey
|
|
|
+ this.tableItemForm.timeFormate = row.timeFormat
|
|
|
+
|
|
|
+ }else{
|
|
|
+ this.tableItemForm.rowId = row.rowId,
|
|
|
+ this.tableItemForm.title = row.dtName
|
|
|
+ this.tableItemForm.selectFields = row.selectFields
|
|
|
+ this.tableItemForm.tableName = row.dtTableName
|
|
|
+ this.tableItemForm.orderByColumn = row.orderByColumn
|
|
|
+ this.tableItemForm.timeFormate = row.timeFormat
|
|
|
+
|
|
|
+ this.getList()
|
|
|
+ this.groupList.forEach(item => {
|
|
|
+ if(item.tableItemForm.rowId == row.rowId){
|
|
|
+ item.tableFieldList = this.tableFieldList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ this.getAllTable()
|
|
|
+ // console.log('修改', this.groupList);
|
|
|
+ // 展示字段的回显
|
|
|
+ this.relateTitle = false
|
|
|
+ this.isShowForm = true;
|
|
|
+ },
|
|
|
+ // 删除表格组
|
|
|
+ DeleteTableGroup(row){
|
|
|
+ const fIds = row.id || this.ids;
|
|
|
+ const menus = row.menuId || this.menuIds
|
|
|
+ this.$modal
|
|
|
+ .confirm('是否确认删除动态单编号为"' + fIds + '"的数据项？删除后表格中所有的数据都将删除！')
|
|
|
+ .then(function () {
|
|
|
+ return delGroup(fIds);
|
|
|
+ })
|
|
|
+ .then(async () => {
|
|
|
+ let res = await delMenu(menus);
|
|
|
+
|
|
|
+ this.getTableList();
|
|
|
+ this.reloadRouter();
|
|
|
+ this.$modal.msgSuccess("删除成功");
|
|
|
+
|
|
|
+ })
|
|
|
+ .catch(() => {});
|
|
|
+ },
|
|
|
+ // 取消新增
|
|
|
+ cancelAddHandler(){
|
|
|
+ this.isShowForm = false;
|
|
|
+ this.tableItemForm = {}
|
|
|
+ this.tableFieldList = []
|
|
|
+ },
|
|
|
+ // 关联类型变化回调
|
|
|
+ relationTypeChangeHandler(row) {
|
|
|
+ let tempRelationFieldList = row.relationFieldList.filter((item) => {
|
|
|
+ return !this.tableFieldList.find((val) => val.id === item.id);
|
|
|
+ });
|
|
|
+ this.tableFieldList = [...this.tableFieldList, ...tempRelationFieldList];
|
|
|
+ },
|
|
|
+ // 更新路由
|
|
|
+ reloadRouter() {
|
|
|
+ this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
|
|
|
+ this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取目标menu
|
|
|
+ getTargetMenu(menus) {
|
|
|
+ for (let i = 0; i < menus.length; i++) {
|
|
|
+ if (menus[i].menuId == this.groupForm.routePath) {
|
|
|
+ return menus[i];
|
|
|
+ } else if (menus.children?.length) {
|
|
|
+ return this.getTargetMenu(menus.children);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return false;
|
|
|
+ },
|
|
|
+ // 获取父级menuId
|
|
|
+ getParentMenuId(menuId, menus) {
|
|
|
+ let res;
|
|
|
+ for (let i = 0; i < menus.length; i++) {
|
|
|
+ let item = menus[i];
|
|
|
+ if (item.menuId == menuId) {
|
|
|
+ res = item.parentId;
|
|
|
+ break;
|
|
|
+ } else if (item.children?.length) {
|
|
|
+ if (
|
|
|
+ this.getParentMenuId(
|
|
|
+ menuId,
|
|
|
+ JSON.parse(JSON.stringify(item.children))
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ res = this.getParentMenuId(
|
|
|
+ menuId,
|
|
|
+ JSON.parse(JSON.stringify(item.children))
|
|
|
+ );
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return res;
|
|
|
+ },
|
|
|
+ // 修改表格回显数据
|
|
|
+ async initTableData(tId) {
|
|
|
+ let res = await getTableInfo(tId);
|
|
|
+ console.log('回显数据', res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ if (!this.formData.routePath) {
|
|
|
+ this.$message.warning("该表格菜单路由已经删除,请重新配置");
|
|
|
+ }
|
|
|
+ // this.formData.routePath
|
|
|
+ this.editData = res.data;
|
|
|
+ let val = await getParticMenu(res.data.tableKey);
|
|
|
+ if (val.code == 200) {
|
|
|
+ this.menuId = val.data.menuId;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this.$message.error("数据回显失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 新增动态表格组
|
|
|
+ addTableGroup(formName){
|
|
|
+ this.$refs[formName].validate(async (valid) => {
|
|
|
+ if (valid) {
|
|
|
+ // console.log('groupList', this.groupList);
|
|
|
+ if(this.addDragData.length < 2) return this.$message.error("请包含多个表格");
|
|
|
+ if(this.groupTitle){
|
|
|
+ let groupKeyObj = {
|
|
|
+ groupKey: uuidv4(),
|
|
|
+ };
|
|
|
+ let payLoad = {
|
|
|
+ component: "relateTable/relateTableEdit",
|
|
|
+ icon: "",
|
|
|
+ isCache: "0",
|
|
|
+ isFrame: "1",
|
|
|
+ menuName: this.groupForm.groupName,
|
|
|
+ menuType: "C",
|
|
|
+ orderNum: this.menuOrderNum,
|
|
|
+ parentId: this.groupForm.routePath,
|
|
|
+ path: groupKeyObj.groupKey,
|
|
|
+ query: JSON.stringify(groupKeyObj),
|
|
|
+ status: "0",
|
|
|
+ visible: "0",
|
|
|
+ tenantId: this.tenantId,
|
|
|
+ };
|
|
|
+ let result;
|
|
|
+ result = await addMenu(payLoad);
|
|
|
+
|
|
|
+ if(result.code == 200){
|
|
|
+ this.reloadRouter();
|
|
|
+ let data = {
|
|
|
+ groupKey: groupKeyObj.groupKey,
|
|
|
+ groupName: '',
|
|
|
+ groupDescription: '',
|
|
|
+ groupTableInfo: [],
|
|
|
+ dragTables:[]
|
|
|
+ }
|
|
|
+ this.addDragData.forEach((item, index) => {
|
|
|
+ item.menuId = result.data;
|
|
|
+ // item.sqlKey = tableKeyObj.tableKey
|
|
|
+ let echo = JSON.parse(item.echoData)
|
|
|
+ echo.formData = this.groupForm
|
|
|
+ item.echoData = JSON.stringify(echo)
|
|
|
+ data.groupTableInfo.push({
|
|
|
+ tableKey: item.tableKey,
|
|
|
+ sort: index,
|
|
|
+ tablename: item.dtTableName,
|
|
|
+ menuId: result.data
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.groupName = this.groupForm.groupName
|
|
|
+ data.groupDescription = this.groupForm.groupDescription
|
|
|
+ data.groupTableInfo = JSON.stringify(data.groupTableInfo)
|
|
|
+ data.dragTables = this.addDragData
|
|
|
+
|
|
|
+ // 添加表格组
|
|
|
+ let res = await addGroup(data)
|
|
|
+
|
|
|
+ if(res.code == 200){
|
|
|
+ this.$message.success("创建成功");
|
|
|
+
|
|
|
+ this.isShowTable = false
|
|
|
+ this.groupForm = {}
|
|
|
+ } else {
|
|
|
+ this.$message.success("创建失败");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }else{
|
|
|
+
|
|
|
+ let groupKeyObj = {
|
|
|
+ groupKey: uuidv4(),
|
|
|
+ };
|
|
|
+ let data = {
|
|
|
+ groupKey: groupKeyObj.groupKey,
|
|
|
+ groupName: '',
|
|
|
+ groupDescription: '',
|
|
|
+ groupTableInfo: [],
|
|
|
+ dragTables:[],
|
|
|
+ id: this.groupId
|
|
|
+ }
|
|
|
+ this.addDragData.forEach((item, index) => {
|
|
|
+ // item.sqlKey = tableKeyObj.tableKey
|
|
|
+ let echo = JSON.parse(item.echoData)
|
|
|
+ echo.formData = this.groupForm
|
|
|
+ item.echoData = JSON.stringify(echo)
|
|
|
+ data.groupTableInfo.push({
|
|
|
+ tableKey: item.tableKey,
|
|
|
+ sort: index,
|
|
|
+ tablename: item.dtTableName,
|
|
|
+ })
|
|
|
+ })
|
|
|
+ data.groupName = this.groupForm.groupName
|
|
|
+ data.groupDescription = this.groupForm.groupDescription
|
|
|
+ data.groupTableInfo = JSON.stringify(data.groupTableInfo)
|
|
|
+ data.dragTables = this.addDragData
|
|
|
+ let res = await updataGroup(data)
|
|
|
+ console.log(res)
|
|
|
+
|
|
|
+ if(res.code == 200){
|
|
|
+ let payLoad = {
|
|
|
+ menuId: this.menuId,
|
|
|
+ menuName: this.groupForm.groupName,
|
|
|
+ parentId: this.groupForm.routePath,
|
|
|
+ component: "tablelist/commonTable/listInfo",
|
|
|
+ icon: "",
|
|
|
+ isCache: "0",
|
|
|
+ isFrame: "1",
|
|
|
+ menuType: "C",
|
|
|
+ orderNum: this.menuOrderNum,
|
|
|
+ status: "0",
|
|
|
+ visible: "0",
|
|
|
+ tenantId: this.tenantId,
|
|
|
+ };
|
|
|
+ console.log(payLoad);
|
|
|
+ let result = await updateMenu(payLoad);
|
|
|
+ console.log('确认修改', result);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ this.isShowTable = false
|
|
|
+ this.addDragData = []
|
|
|
+ this.groupForm = []
|
|
|
+ this.tableDataList = []
|
|
|
+ this.getTableList()
|
|
|
+ } else {
|
|
|
+ this.$message.error("请完善表单信息");
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 新增按钮操作 */
|
|
|
+ async handleAdd() {
|
|
|
+ // dialog弹窗
|
|
|
+ this.isShowTable = true
|
|
|
+
|
|
|
+ // dialog标题
|
|
|
+ this.groupTitle = true
|
|
|
+
|
|
|
+ // 新增关联表格
|
|
|
+ this.isShowForm = true
|
|
|
+ this.relateTitle = true
|
|
|
+ this.tableItemForm = {}
|
|
|
+ this.groupForm = {}
|
|
|
+ this.tableDataList = []
|
|
|
+ this.tableFieldList = []
|
|
|
+ this.relyOption = ''
|
|
|
+ this.conditionDefaultValueMap = ''
|
|
|
+ },
|
|
|
+ // 取消
|
|
|
+ cancelGroup(){
|
|
|
+ this.groupTitle = true
|
|
|
+ this.isShowTable = false
|
|
|
+ },
|
|
|
+ // 获取路由表单数据
|
|
|
+ async getMenuList() {
|
|
|
+ let res = await getMenuList();
|
|
|
+ this.menus = this.handleTree(res.data, "menuId");
|
|
|
+ },
|
|
|
+ /** 转换菜单数据结构 */
|
|
|
+ normalizer(node) {
|
|
|
+ if (node.children && !node.children.length) {
|
|
|
+ delete node.children;
|
|
|
+ }
|
|
|
+ return {
|
|
|
+ id: node.menuId,
|
|
|
+ label: node.menuName,
|
|
|
+ children: node.children,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ // 修改动态表格组回显
|
|
|
+ UpdateTableGroup(row){
|
|
|
+ console.log(row);
|
|
|
+ // let id = JSON.parse(row.id)
|
|
|
+ getTable({ id: row.id }).then(res => {
|
|
|
+ this.groupId = res.data.id
|
|
|
+ // 关联表格
|
|
|
+ this.groupTableInfo = JSON.parse(res.data.groupTableInfo)
|
|
|
+ this.menuId = res.data.dragTables[0].menuId
|
|
|
+
|
|
|
+ this.groupForm = res.data
|
|
|
+ this.addDragData = res.data.dragTables
|
|
|
+ // 菜单路由回显
|
|
|
+ this.tableDataList = this.groupForm.dragTables
|
|
|
+ this.groupForm.routePath = this.getParentMenuId(
|
|
|
+ res.data.dragTables[0].menuId,
|
|
|
+ this.menus,
|
|
|
+ {}
|
|
|
+ )
|
|
|
+
|
|
|
+ if (!this.groupForm.routePath) {
|
|
|
+ this.$message.warning("该表格菜单路由已经删除,请重新配置");
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ this.groupTitle = false
|
|
|
+ this.isShowTable = true
|
|
|
+ },
|
|
|
+ // 取消按钮
|
|
|
+ cancel() {
|
|
|
+ this.open = false;
|
|
|
+ this.reset();
|
|
|
+ },
|
|
|
+ // 表单重置
|
|
|
+ reset() {
|
|
|
+ this.form = {
|
|
|
+ tId: null,
|
|
|
+ dtName: null,
|
|
|
+ dtNickname: null,
|
|
|
+ tableKey: null,
|
|
|
+ sqlKey: null,
|
|
|
+ dtTableName: null,
|
|
|
+ dtNotes: null,
|
|
|
+ dtColumnName: null,
|
|
|
+ timeFormat: null,
|
|
|
+ spare: null,
|
|
|
+ spare1: null,
|
|
|
+ delFlag: null,
|
|
|
+ createBy: null,
|
|
|
+ createTime: null,
|
|
|
+ updateBy: null,
|
|
|
+ updateTime: null,
|
|
|
+ isSelection: null,
|
|
|
+ };
|
|
|
+ this.resetForm("form");
|
|
|
+ },
|
|
|
+ /** 搜索按钮操作 */
|
|
|
+ handleQuery() {
|
|
|
+ this.queryParams.pageNum = 1;
|
|
|
+ this.getList();
|
|
|
+ },
|
|
|
+ /** 重置按钮操作 */
|
|
|
+ resetQuery() {
|
|
|
+ this.resetForm("queryForm");
|
|
|
+ this.getTableList();
|
|
|
+ },
|
|
|
+ // 多选框选中数据
|
|
|
+ handleSelectionChange(selection) {
|
|
|
+ this.ids = selection.map((item) => item.id);
|
|
|
+ this.Keys = selection.map((item) => item.sqlKey);
|
|
|
+ this.menuIds = selection.map((item) => item.menuId);
|
|
|
+ this.selection = selection;
|
|
|
+ this.single = selection.length !== 1;
|
|
|
+ this.multiple = !selection.length;
|
|
|
+ },
|
|
|
+
|
|
|
+ /** 修改按钮操作 */
|
|
|
+ async handleUpdate(row) {
|
|
|
+ // 兼容勾选单个的修改
|
|
|
+ let tId = row?.tId || this.ids[0];
|
|
|
+ // this.$router.push({
|
|
|
+ // path: "/system/fromModel/index/tableMange",
|
|
|
+ // query: {
|
|
|
+ // tId: tId,
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ /** 提交按钮 */
|
|
|
+ submitForm() {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ if (this.form.tId != null) {
|
|
|
+ updateTable(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("修改成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ addTable(this.form).then((response) => {
|
|
|
+ this.$modal.msgSuccess("新增成功");
|
|
|
+ this.open = false;
|
|
|
+ this.getList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 删除按钮操作 */
|
|
|
+ handleDelete(row) {
|
|
|
+ console.log(row);
|
|
|
+ this.tableDataList.forEach((item, index) => {
|
|
|
+ if(row.tableKey == item.tableKey) {
|
|
|
+ this.tableDataList.splice(index, 1);
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(this.tableDataList)
|
|
|
+ },
|
|
|
+ // 更新路由
|
|
|
+ reloadRouter() {
|
|
|
+ this.$store.dispatch("GenerateRoutes").then((accessRoutes) => {
|
|
|
+ this.$router.addRoutes(accessRoutes); // 动态添加可访问路由表
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /** 导出按钮操作 */
|
|
|
+ handleExport() {
|
|
|
+ this.download(
|
|
|
+ process.env.VUE_APP_BASE_API3 + "system/table/export",
|
|
|
+ {
|
|
|
+ ...this.queryParams,
|
|
|
+ },
|
|
|
+ `table_${new Date().getTime()}.xlsx`
|
|
|
+ );
|
|
|
+ },
|
|
|
+ // 新增一个联动表格
|
|
|
+ addOneTable() {
|
|
|
+ this.relateTitle = true
|
|
|
+ if(this.relateTitle){
|
|
|
+ this.tableItemForm = {}
|
|
|
+ this.tableFieldList = []
|
|
|
+ }
|
|
|
+ if(!this.groupTitle){
|
|
|
+ // console.log('修改新增');
|
|
|
+ console.log(this.tableDataList[this.tableDataList.length-1].dtTableName)
|
|
|
+
|
|
|
+ this.relyFileds.tableName = this.tableDataList[this.tableDataList.length-1].dtTableName
|
|
|
+ let echoData = JSON.parse(this.tableDataList[this.tableDataList.length-1].echoData)
|
|
|
+
|
|
|
+ this.relyFileds.tableFieldList = echoData.tableFieldData
|
|
|
+ }
|
|
|
+ this.getAllTable()
|
|
|
+ // 注意校验最后一条数据是否合法
|
|
|
+ this.isShowForm = true;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 重置表单
|
|
|
+ // tableItemFormReset() {
|
|
|
+ // Object.assign(this.tableItemForm, {
|
|
|
+ // title: "",
|
|
|
+ // tableId: "",
|
|
|
+ // tableName: "",
|
|
|
+ // showFields: [],
|
|
|
+ // theRelateField: "",
|
|
|
+ // executeOptions: [],
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ // handlePreview() {
|
|
|
+ // this.$router.push({
|
|
|
+ // path: "/system/fromModel/index/relateTableEdit",
|
|
|
+ // });
|
|
|
+ // },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+::v-deep .el-dialog:not(.is-fullscreen){
|
|
|
+ width: 900px !important;
|
|
|
+}
|
|
|
+.isSearch {
|
|
|
+ ::v-deep .el-dialog:not(.is-fullscreen){
|
|
|
+ width: 320px !important;
|
|
|
+ }
|
|
|
+ ::v-deep .el-input--medium .el-input__inner{
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.tablefiled{
|
|
|
+ ::v-deep .el-input--medium .el-input__inner{
|
|
|
+ width: 70px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+::v-deep .el-input--medium .el-input__inner{
|
|
|
+ width: 230px !important;
|
|
|
+}
|
|
|
+::v-deep .btn{
|
|
|
+ text-align: right !important;
|
|
|
+}
|
|
|
+.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 .vue-treeselect--has-value .vue-treeselect__input {
|
|
|
+ vertical-align: middle !important;
|
|
|
+}
|
|
|
+.formWrap {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+::v-deep .el-table{
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+.nameipt{
|
|
|
+ display: inline;
|
|
|
+ margin-left: 10px;
|
|
|
+ ::v-deep .el-input--medium .el-input__inner{
|
|
|
+ width: 30%;
|
|
|
+ }
|
|
|
+ ::v-deep .el-input--medium{
|
|
|
+ display: inline;
|
|
|
+ }
|
|
|
+}
|
|
|
+.desc{
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+::v-deep .vue-treeselect--has-value .vue-treeselect__input {
|
|
|
+ vertical-align: middle !important;
|
|
|
+
|
|
|
+}
|
|
|
+.treeselect{
|
|
|
+ .vue-treeselect{
|
|
|
+ width: 230px !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+
|
|
|
+<style lang="scss">
|
|
|
+
|
|
|
+.vue-treeselect{
|
|
|
+ z-index: 9999 !important;
|
|
|
+}
|
|
|
+</style>
|
lph