数据表关联表新增编辑关联完善
parent
8681ad3c6c
commit
68cd8c4bf4
|
|
@ -33,14 +33,14 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.f-cb:after,
|
||||
.f-cbli li:after {
|
||||
.f-cb::after,
|
||||
.f-cbli li::after {
|
||||
content: ".";
|
||||
display: block;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
height: 0;
|
||||
clear: both;
|
||||
overflow: hidden;
|
||||
content: ".";
|
||||
}
|
||||
|
||||
.f-cb,
|
||||
|
|
@ -78,11 +78,11 @@
|
|||
}
|
||||
|
||||
.f-ff0 {
|
||||
font-family: arial, \5b8b\4f53;
|
||||
font-family: arial, "\5b8b\4f53";
|
||||
}
|
||||
|
||||
.f-ff1 {
|
||||
font-family: "Microsoft YaHei", \5fae\8f6f\96c5\9ed1, arial, \5b8b\4f53;
|
||||
font-family: "Microsoft YaHei", "\5fae\8f6f\96c5\9ed1", arial, "\5b8b\4f53";
|
||||
}
|
||||
|
||||
.f-fs12 {
|
||||
|
|
@ -139,15 +139,15 @@
|
|||
.f-pre {
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.f-wwb {
|
||||
white-space: normal;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.f-ti {
|
||||
|
|
@ -175,9 +175,9 @@
|
|||
|
||||
.f-toe {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.f-csp {
|
||||
|
|
@ -197,10 +197,10 @@
|
|||
}
|
||||
|
||||
.f-usn {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
|
@ -225,8 +225,8 @@
|
|||
}
|
||||
|
||||
.f-push-10-t {
|
||||
color: var(--mars-text-color);
|
||||
margin-top: 10px !important;
|
||||
color: var(--mars-text-color);
|
||||
}
|
||||
|
||||
.f-push-10-r {
|
||||
|
|
@ -435,6 +435,6 @@
|
|||
|
||||
.mars-pannel-item-label {
|
||||
display: block;
|
||||
text-align: right;
|
||||
min-width: 60px;
|
||||
text-align: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -133,11 +133,11 @@
|
|||
watch(
|
||||
() => handleNextStepsData,// 点击下一步按钮传递的参数
|
||||
newVal => {
|
||||
console.log('newValcommm',newVal)
|
||||
|
||||
FieldTableOptions = []
|
||||
if(newVal && newVal.value && newVal.value.scheme && newVal.value.scheme.scheme){
|
||||
receivedData = JSON.parse(newVal.value.scheme.scheme)
|
||||
console.log('receivedData',receivedData)
|
||||
|
||||
receivedData.db.forEach(item =>{
|
||||
FieldTableOptions.push({
|
||||
value: item.name,
|
||||
|
|
|
|||
|
|
@ -165,12 +165,12 @@
|
|||
watch(
|
||||
() => handleNextStepsData,// 点击下一步按钮传递的参数
|
||||
newVal => {
|
||||
console.log('receivedData333',newVal)
|
||||
|
||||
if(newVal.value && newVal.value.scheme && newVal.value.scheme.scheme){
|
||||
receivedData = JSON.parse(newVal.value.scheme.scheme)
|
||||
//渲染表单
|
||||
const editorJsonData = receivedData.formInfo as IFormConfig;
|
||||
console.log('editorJsonData',editorJsonData)
|
||||
|
||||
editorJsonData.schemas &&
|
||||
formItemsForEach(editorJsonData.schemas, (formItem) => {
|
||||
generateKey(formItem);
|
||||
|
|
@ -182,7 +182,7 @@
|
|||
});
|
||||
|
||||
}
|
||||
console.log('receivedData',receivedData)
|
||||
|
||||
|
||||
},
|
||||
{ deep: true, immediate: true },
|
||||
|
|
@ -222,7 +222,6 @@
|
|||
* @param schema 当前选中的表单项
|
||||
*/
|
||||
const handleSetSelectItem = (schema: IVFormComponent) => {
|
||||
console.log('click',schema)
|
||||
formConfig.value.currentItem = schema as any;
|
||||
handleChangePropsTabs(
|
||||
schema.key ? (formConfig.value.activeKey! === 1 ? 2 : formConfig.value.activeKey!) : 1,
|
||||
|
|
|
|||
|
|
@ -55,6 +55,63 @@ export const customComponents: IVFormComponent[] = [
|
|||
colProps: { span: 24 },
|
||||
componentProps: {},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
label: '公司选择',
|
||||
icon: 'gg:select',
|
||||
field: '',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
label: '部门选择',
|
||||
icon: 'gg:select',
|
||||
field: '',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
component: 'Select',
|
||||
label: '人员选择',
|
||||
icon: 'gg:select',
|
||||
field: '',
|
||||
colProps: { span: 24 },
|
||||
componentProps: {
|
||||
options: [
|
||||
{
|
||||
label: '选项1',
|
||||
value: '1',
|
||||
},
|
||||
{
|
||||
label: '选项2',
|
||||
value: '2',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 左侧控件列表与初始化的控件属性
|
||||
|
|
|
|||
|
|
@ -92,11 +92,6 @@
|
|||
console.log('res',)
|
||||
})
|
||||
}else{
|
||||
let schemejson = {
|
||||
db: [],
|
||||
DbCode: '',
|
||||
formInfo: {}
|
||||
}
|
||||
isAddVisible.value = true
|
||||
formScheme.value = {
|
||||
"info": {},
|
||||
|
|
@ -134,6 +129,7 @@
|
|||
isNextSteps.value = false
|
||||
}
|
||||
function handleformData(data){
|
||||
console.log('emitttt',data)
|
||||
stepsCurrent.value = 1
|
||||
let arr: any[] = []
|
||||
console.log('adddata',data)
|
||||
|
|
@ -156,10 +152,12 @@
|
|||
if(saveFormDatas.value.scheme.scheme){
|
||||
schems = JSON.parse(saveFormDatas.value.scheme.scheme)
|
||||
schems.db = arr
|
||||
schems.rdb = data.connect || [],
|
||||
schems.dbCode = data.form.DbCode
|
||||
}else{
|
||||
schems = {
|
||||
db: arr,
|
||||
rdb: data.connect || [],
|
||||
dbCode: data.form.DbCode,
|
||||
formInfo:{}
|
||||
}
|
||||
|
|
@ -171,13 +169,16 @@
|
|||
console.log('add')
|
||||
}else{ //编辑
|
||||
console.log('edit')
|
||||
|
||||
let schems = JSON.parse(saveFormDatas.value.scheme.scheme)
|
||||
schems.db = arr
|
||||
schems.rdb = data.connect || [],
|
||||
saveFormDatas.value.info.category = data.form.category
|
||||
saveFormDatas.value.info.description = data.form.description
|
||||
saveFormDatas.value.info.enabledMark = data.form.enabledMark
|
||||
saveFormDatas.value.info.name = data.form.name
|
||||
saveFormDatas.value.info.DbCode = data.form.DbCode
|
||||
saveFormDatas.value.info.formType = data.form.formType
|
||||
saveFormDatas.value.scheme.scheme = JSON.stringify(schems)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -30,9 +30,10 @@
|
|||
// })
|
||||
// console.log('props',props)
|
||||
|
||||
// watch(()=>props.workOrder,(newValue,oldValue)=>{
|
||||
watch(()=>props.workOrder,(newValue,oldValue)=>{
|
||||
// handleEmitsBase()
|
||||
// },{immediate:true,deep:true})
|
||||
console.log('newValuenewValue',newValue)
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
const [registerContanctTable, { reload, setTableData, getColumns }] = useTable({
|
||||
title: '',
|
||||
|
|
|
|||
|
|
@ -30,9 +30,11 @@
|
|||
|
||||
const emit = defineEmits(['backrows']);
|
||||
|
||||
const [registerModal, { closeModal, setModalProps }] = useModalInner();
|
||||
const [registerModal, { closeModal, setModalProps }] = useModalInner((data: any) => {
|
||||
clearSelectedRowKeys()
|
||||
})
|
||||
|
||||
const [registerDataTable, { reload, getSelectRows }] = useTable({
|
||||
const [registerDataTable, { clearSelectedRowKeys, getSelectRows }] = useTable({
|
||||
title: '',
|
||||
rowKey: 'id',
|
||||
api: getDataBaseTableList,
|
||||
|
|
|
|||
|
|
@ -16,8 +16,31 @@ export const columns: BasicColumn[] = [
|
|||
title: '表名',
|
||||
dataIndex: 'f_ClassName',
|
||||
width: 120,
|
||||
}
|
||||
|
||||
},
|
||||
{
|
||||
title: '比较字段',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
{
|
||||
title: '外键',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
{
|
||||
title: '关联表',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
{
|
||||
title: '关联主键',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,76 @@ import { getFormsTypeList } from '@/api/formdesign/index'
|
|||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
export const connectColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'fname',
|
||||
width: 100,
|
||||
|
||||
},
|
||||
{
|
||||
title: '表名',
|
||||
dataIndex: 'name',
|
||||
width: 120,
|
||||
},
|
||||
{
|
||||
title: '比较字段',
|
||||
width: 150,
|
||||
key: 'cfield',
|
||||
dataIndex: 'cfield',
|
||||
},
|
||||
{
|
||||
title: '外键',
|
||||
width: 150,
|
||||
key: 'field',
|
||||
dataIndex: 'field',
|
||||
},
|
||||
{
|
||||
title: '关联表',
|
||||
width: 150,
|
||||
key: 'relationName',
|
||||
dataIndex: 'relationName',
|
||||
},
|
||||
{
|
||||
title: '关联主键',
|
||||
width: 150,
|
||||
key: 'relationField',
|
||||
dataIndex: 'relationField',
|
||||
},
|
||||
|
||||
];
|
||||
|
||||
export const viewsColumns: BasicColumn[] = [
|
||||
{
|
||||
title: '类别',
|
||||
dataIndex: 'type',
|
||||
width: 50,
|
||||
customRender: ({ record }) => {
|
||||
const status = record.type;
|
||||
let enable
|
||||
if(status == "main"){
|
||||
enable = true
|
||||
}else{
|
||||
enable = false
|
||||
}
|
||||
const color = enable ? '#67c23a' : '#e6a23c';
|
||||
const text = enable ? '主表' : '子表';
|
||||
return h(Tag, { color: color }, () => text);
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
width: 150,
|
||||
},
|
||||
{
|
||||
title: '关联字段',
|
||||
width: 150,
|
||||
key: 'relationFieldConnect',
|
||||
dataIndex: 'relationFieldConnect',
|
||||
},
|
||||
]
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '类别',
|
||||
|
|
@ -233,3 +303,19 @@ export const formSchema: FormSchema[] = [
|
|||
]
|
||||
|
||||
|
||||
export const formSqlSchema: FormSchema[] = [
|
||||
{
|
||||
field: 'name',
|
||||
component: 'Input',
|
||||
label: '名称',
|
||||
colProps: {
|
||||
span: 24,
|
||||
},
|
||||
defaultValue: '',
|
||||
required: true,
|
||||
componentProps: {
|
||||
placeholder: '请输入',
|
||||
},
|
||||
},
|
||||
]
|
||||
|
||||
|
|
@ -65,43 +65,54 @@
|
|||
</div>
|
||||
</template>
|
||||
<template #addDatabaseContantSlot="{ model, field }">
|
||||
<div>添加数据库关联表，只用来做数据权限设置（请先选择数据库）</div>
|
||||
<DataBaseTable :workOrder="connectTabBase" ></DataBaseTable>
|
||||
<div class="addDataBaseTableBox" @click="handleAddConnectBase">
|
||||
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
|
||||
<div class="connectTableTitle">添加数据库关联表，只用来做数据权限设置（请先选择数据库）</div>
|
||||
<!-- <DataBaseTable :workOrder="connectTabBase" ></DataBaseTable> -->
|
||||
<BasicTable @register="registerContanctTable">
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'fname'">
|
||||
<div>
|
||||
<a-input v-model:value="record.fname" placeholder="" size="small" />
|
||||
</div>
|
||||
</template>
|
||||
<template #addViewsDatabaseTableSlot="{ model, field }">
|
||||
<div>添加数据库表（请先选择数据库）</div>
|
||||
<!-- <BasicTable @register="registerDataBaseTable">
|
||||
<template v-slot:bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'fieldAction'">
|
||||
<div v-if="record.type == 'chlid'">
|
||||
<template v-if="column.key === 'cfield'">
|
||||
<div>
|
||||
<a-select
|
||||
ref="select"
|
||||
placeholder="请选择"
|
||||
ref="select2"
|
||||
size="small"
|
||||
v-model:value="record.field"
|
||||
:options="record.outColumnKey"
|
||||
placeholder="请选择"
|
||||
v-model:value="record.cfield"
|
||||
:options="record.FieldTablesArr"
|
||||
:field-names="{ label: 'dbColumnName', value: 'dbColumnName' }"
|
||||
></a-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'relationTabAction'" >
|
||||
<div v-if="record.type == 'chlid'">
|
||||
<template v-if="column.key === 'field'">
|
||||
<div>
|
||||
<a-select
|
||||
ref="select1"
|
||||
ref="select2"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
v-model:value="record.field"
|
||||
:options="record.FieldTablesArr"
|
||||
:field-names="{ label: 'dbColumnName', value: 'dbColumnName' }"
|
||||
></a-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'relationName'">
|
||||
<div>
|
||||
<a-select
|
||||
ref="select2"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
v-model:value="record.relationName"
|
||||
:options="record.relationalTable"
|
||||
:field-names="{ label: 'name', value: 'name' }"
|
||||
@change="handleRelationalTableChange(record)"
|
||||
:field-names="{ label: 'label', value: 'value' }"
|
||||
@change="handleConnectNameChange(record)"
|
||||
></a-select>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'relationFieldAction'">
|
||||
<div v-if="record.type == 'chlid' && record.relationalTieldTable">
|
||||
<template v-if="column.key === 'relationField'">
|
||||
<div v-if="record.relationalTieldTable">
|
||||
<a-select
|
||||
ref="select2"
|
||||
size="small"
|
||||
|
|
@ -119,26 +130,62 @@
|
|||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否删除该数据',
|
||||
confirm: handleDelete.bind(null, record),
|
||||
confirm: handleConnectDelete.bind(null, record),
|
||||
},
|
||||
}
|
||||
]" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<div class="addDataBaseTableBox" @click="handleAddDataBase">
|
||||
<div class="addDataBaseTableBox" @click="handleAddConnectBase">
|
||||
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
<template #addViewsDatabaseTableSlot="{ model, field }">
|
||||
<div>添加数据库表（请先选择数据库）</div>
|
||||
<BasicTable @register="registerViewsTable">
|
||||
<template v-slot:bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'relationFieldConnect'">
|
||||
<div v-if="record.type == 'chlid'">
|
||||
<a-select
|
||||
ref="select"
|
||||
placeholder="请选择"
|
||||
size="small"
|
||||
v-model:value="record.field"
|
||||
:options="record.outColumnKey"
|
||||
:field-names="{ label: 'dbColumnName', value: 'dbColumnName' }"
|
||||
></a-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction :actions="[
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
popConfirm: {
|
||||
title: '是否删除该数据',
|
||||
confirm: handleViewsDelete.bind(null, record),
|
||||
},
|
||||
}
|
||||
]" />
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<div class="addDataBaseTableBox" @click="handleAddSqlData">
|
||||
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
</BasicForm>
|
||||
<div class="formLine"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DataObject @register="registerModal" @backrows="handleBackRows" />
|
||||
|
||||
|
||||
<sqlModal @register="registerSqlModal"></sqlModal>
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -148,11 +195,12 @@
|
|||
import { getFormsTypeList,getOutKeyList } from '@/api/formdesign/index'
|
||||
|
||||
import { BasicForm, useForm } from '/@/components/Form';
|
||||
import { formSchema , columns } from './index.data';
|
||||
import { formSchema , columns,connectColumns,viewsColumns } from './index.data';
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { BasicModal , useModal , useModalInner } from '/@/components/Modal';
|
||||
import DataObject from './DataObject.vue'
|
||||
import DataBaseTable from './DataBaseTable.vue'
|
||||
import sqlModal from './sqlModal.vue'
|
||||
|
||||
const emit = defineEmits(['formDataBack','formDataNoBack']);
|
||||
|
||||
|
|
@ -187,33 +235,50 @@
|
|||
setFieldsValue(obj)
|
||||
setTimeout(()=>{
|
||||
handleTableData(schemObj.db)
|
||||
if(schemObj.rdb){
|
||||
handleConnectTableData(schemObj.rdb)
|
||||
}
|
||||
},100)
|
||||
}
|
||||
}
|
||||
},{immediate:true,deep:true})
|
||||
watch(()=>props.isNextSteps,(newValue,oldValue)=>{
|
||||
console.log('newValue',newValue)
|
||||
if(newValue){
|
||||
let tableArr = getDataSourceMain()
|
||||
let formArr = getFieldsValue()
|
||||
let obj = {
|
||||
form: formArr,
|
||||
table: tableArr
|
||||
}
|
||||
|
||||
const checkForm = validate();
|
||||
console.log('checkForm',checkForm)
|
||||
console.log('formArr',formArr)
|
||||
if(!formArr.name || !formArr.category || !formArr.DbCode){
|
||||
emit('formDataNoBack');
|
||||
console.log('fail')
|
||||
return false
|
||||
}
|
||||
let tabArr = []
|
||||
|
||||
if(tableArr){
|
||||
if(formArr.formType==1){
|
||||
emit('formDataNoBack');
|
||||
}else{
|
||||
let tableArr = getDataSourceMain()
|
||||
let connectTab = getDataSourceConnect()
|
||||
let obj = {
|
||||
form: formArr,
|
||||
table: tableArr,
|
||||
connect: connectTab
|
||||
}
|
||||
let tabArr = []
|
||||
let connectArr = []
|
||||
if(connectTab && connectTab.length > 0){
|
||||
connectTab.forEach(item =>{
|
||||
if( item.type != 'main'){
|
||||
connectArr.push(item.fname,item.cfield,item.field,item.relationName,item.relationField)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
if(tableArr && tableArr.length > 0){
|
||||
if(tableArr.length == 1){
|
||||
if(connectArr.includes(undefined)){
|
||||
// emit('formDataNoBack');
|
||||
// message.error("请完善数据库关联表信息",2)
|
||||
}else{
|
||||
emit('formDataBack', obj);
|
||||
}
|
||||
}else{
|
||||
tableArr.forEach(item =>{
|
||||
if( item.type != 'main'){
|
||||
|
|
@ -230,28 +295,35 @@
|
|||
if(tabArr.includes(undefined)){
|
||||
emit('formDataNoBack');
|
||||
message.error("请完善数据库表信息",2)
|
||||
}else{
|
||||
if(connectArr.includes(undefined)){
|
||||
emit('formDataNoBack');
|
||||
message.error("请完善数据库关联表信息",2)
|
||||
}else{
|
||||
emit('formDataBack', obj);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
},{immediate:true,deep:true})
|
||||
watch(()=>props.isAddVisible,(newValue,oldValue)=>{
|
||||
if(newValue){
|
||||
setTableDataMain()
|
||||
setTableDataConnect()
|
||||
resetFields()
|
||||
}
|
||||
},{immediate:true,deep:true})
|
||||
|
||||
|
||||
|
||||
const [registerModal, { openModal }] = useModal();
|
||||
const [registerModal, { openModal:openBaseDataTableModal }] = useModal();
|
||||
const [registerSqlModal, { openModal:openSqleModal }] = useModal();
|
||||
|
||||
let connectTabBase = ref<connectTabBase>([])
|
||||
|
||||
// const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();
|
||||
let tabList: any[] = []
|
||||
let connectList: any[] = []
|
||||
let tabMainList: any[] = []
|
||||
let tabConnectList: any[] = []
|
||||
|
||||
let tableColumns: any[] = {}
|
||||
let isAddConnectTab: any[] = false
|
||||
|
|
@ -266,7 +338,48 @@
|
|||
baseColProps: { lg: 24, md: 24 },
|
||||
});
|
||||
|
||||
const [registerDataBaseTable, { reload, setTableData:setTableDataMain, getDataSource:getDataSourceMain }] = useTable({
|
||||
|
||||
const [registerViewsTable, { setTableData:setTableDataViews, getDataSource:getDataSourceViews }] = useTable({
|
||||
title: '',
|
||||
rowKey: 'id',
|
||||
columns: viewsColumns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
},
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
bordered: false,
|
||||
canResize: false,
|
||||
pagination: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const [registerContanctTable, { reload:reloadConnect, setTableData:setTableDataConnect, getDataSource:getDataSourceConnect }] = useTable({
|
||||
title: '',
|
||||
rowKey: 'id',
|
||||
columns:connectColumns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
},
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
bordered: false,
|
||||
pagination: false,
|
||||
canResize: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
fixed: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const [registerDataBaseTable, { reload:reloadMain, setTableData:setTableDataMain, getDataSource:getDataSourceMain }] = useTable({
|
||||
title: '',
|
||||
rowKey: 'id',
|
||||
columns,
|
||||
|
|
@ -277,6 +390,7 @@
|
|||
showTableSetting: false,
|
||||
bordered: false,
|
||||
pagination: false,
|
||||
canResize: false,
|
||||
actionColumn: {
|
||||
width: 80,
|
||||
title: '操作',
|
||||
|
|
@ -291,7 +405,7 @@
|
|||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
|
||||
if(anyformobj.value.DbCode){
|
||||
openModal(true, {});
|
||||
openBaseDataTableModal(true, {});
|
||||
}else{
|
||||
message.warning("请选择数据库")
|
||||
}
|
||||
|
|
@ -303,12 +417,23 @@
|
|||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
|
||||
if(anyformobj.value.DbCode){
|
||||
openModal(true, {});
|
||||
openBaseDataTableModal(true, {});
|
||||
}else{
|
||||
message.warning("请选择数据库")
|
||||
}
|
||||
|
||||
}
|
||||
function handleAddSqlData() {
|
||||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
|
||||
if(anyformobj.value.DbCode){
|
||||
openSqleModal(true, {});
|
||||
}else{
|
||||
message.warning("请选择数据库")
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
function handleDelete(record: Recordable) {
|
||||
let arr = getDataSourceMain()
|
||||
|
|
@ -327,16 +452,46 @@
|
|||
})
|
||||
|
||||
setTableDataMain(newArr)
|
||||
reload()
|
||||
reloadMain()
|
||||
}
|
||||
function handleConnectDelete(record: Recordable) {
|
||||
let arr = getDataSourceConnect()
|
||||
let newArr = []
|
||||
arr.forEach(item =>{
|
||||
if(item.index !== record.index){
|
||||
newArr.push(item)
|
||||
}
|
||||
})
|
||||
|
||||
setTableDataConnect(newArr)
|
||||
reloadConnect()
|
||||
}
|
||||
|
||||
|
||||
|
||||
function handleBackRows(ModuleId = '') {
|
||||
let formTableArr = getDataSourceMain()
|
||||
let tabList = formTableArr || []
|
||||
let repeatArr = []
|
||||
if(isAddConnectTab){
|
||||
ModuleId.forEach(item =>{
|
||||
if(formTableArr && formTableArr.length>0){
|
||||
formTableArr.forEach(val =>{
|
||||
if(item.tableName == val.name){
|
||||
repeatArr.push(val.name)
|
||||
}else{
|
||||
tabList.push({
|
||||
name: item.tableName,
|
||||
})
|
||||
}
|
||||
})
|
||||
}else{
|
||||
tabList.push({
|
||||
name: item.tableName,
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
tabList.forEach((item,index) =>{
|
||||
if(index == 0){
|
||||
item.type = "main"
|
||||
|
|
@ -344,17 +499,86 @@
|
|||
item.type = 'chlid'
|
||||
}
|
||||
})
|
||||
const uniqueMap = {};
|
||||
if(repeatArr.length>0){
|
||||
message.warning("重复添加表"+repeatArr,2)
|
||||
}
|
||||
let newarr = tabList.filter((item) => {
|
||||
const isNotPresent = !uniqueMap[item.name];
|
||||
uniqueMap[item.name] = true;
|
||||
return isNotPresent;
|
||||
});
|
||||
|
||||
handleTableData(tabList)
|
||||
handleTableData(newarr)
|
||||
|
||||
}else{
|
||||
ModuleId.forEach(item =>{
|
||||
connectList.push(item)
|
||||
})
|
||||
connectTabBase.value = connectList
|
||||
let connectTableArr = getDataSourceConnect()
|
||||
let connectList = connectTableArr || []
|
||||
|
||||
let bisArr
|
||||
console.log('connectTableArr',connectTableArr)
|
||||
|
||||
if(tabMainList.value && tabMainList.value.length>0){
|
||||
bisArr = ModuleId.filter(item2 => {
|
||||
return tabMainList.value.some(item1 => item1.name === item2.tableName);
|
||||
});
|
||||
let filteredArr1 = ModuleId.filter(item2 => {
|
||||
return !tabMainList.value.some(item1 => item1.name === item2.tableName);
|
||||
});
|
||||
filteredArr1.forEach(item =>{
|
||||
connectList.push({
|
||||
name: item.tableName,
|
||||
})
|
||||
})
|
||||
}else{
|
||||
ModuleId.forEach(item =>{
|
||||
connectList.push({
|
||||
name: item.tableName,
|
||||
})
|
||||
})
|
||||
}
|
||||
if(bisArr){
|
||||
bisArr.forEach(item =>{
|
||||
repeatArr.push(item.tableName)
|
||||
})
|
||||
}
|
||||
if(repeatArr.length>0){
|
||||
message.warning("不能是表单已经绑定的表"+repeatArr,2)
|
||||
}
|
||||
|
||||
handleConnectTableData(connectList)
|
||||
}
|
||||
|
||||
}
|
||||
function handleConnectTableData(record: Recordable){
|
||||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
let tabDatas = record
|
||||
let optionsArr = []
|
||||
if(tabMainList.value && tabMainList.value.length>0){
|
||||
tabMainList.value.forEach(item =>{
|
||||
optionsArr.push({
|
||||
label: item.name,
|
||||
value: item.name
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
if(tabDatas){
|
||||
tabDatas.forEach((item,index) =>{
|
||||
item.index = index
|
||||
item.relationalTable = optionsArr
|
||||
getOutKeyList({tableNames: item.name,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
|
||||
item.FieldTablesArr = data[0].db_codecolumnsList
|
||||
})
|
||||
if(item.relationName){
|
||||
getOutKeyList({tableNames: item.relationName,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
|
||||
item.relationalTieldTable = data[0].db_codecolumnsList
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
setTableDataConnect(tabDatas)
|
||||
reloadConnect()
|
||||
}
|
||||
|
||||
function handleTableData(record: Recordable){
|
||||
|
|
@ -375,10 +599,10 @@
|
|||
}
|
||||
})
|
||||
}
|
||||
|
||||
tabMainList.value = tabDatas
|
||||
|
||||
setTableDataMain(tabDatas)
|
||||
reload()
|
||||
reloadMain()
|
||||
}
|
||||
function handleRelationalTableChange(record: Recordable){
|
||||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
|
|
@ -393,7 +617,23 @@
|
|||
}
|
||||
})
|
||||
setTableDataMain(arr)
|
||||
reload()
|
||||
reloadMain()
|
||||
}
|
||||
function handleConnectNameChange(record: Recordable){
|
||||
const anyformobj = ref<any>(myDataBaseFormRef.value.getFieldsValue());
|
||||
let arr = getDataSourceConnect()
|
||||
console.log('record',record)
|
||||
console.log('arr',arr)
|
||||
arr.forEach(item =>{
|
||||
if(item.index == record.index){
|
||||
getOutKeyList({tableNames: record.relationName,dbCode:anyformobj.value.DbCode}).then((data: AreaRespVO[]) => {
|
||||
item.relationalTieldTable = data[0].db_codecolumnsList
|
||||
item.relationField = undefined
|
||||
})
|
||||
}
|
||||
})
|
||||
setTableDataConnect(arr)
|
||||
reloadConnect()
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -426,4 +666,10 @@
|
|||
border-color: #409EFF;
|
||||
}
|
||||
}
|
||||
.connectTableTitle{
|
||||
padding-top: 20px;
|
||||
}
|
||||
.formLine{
|
||||
height: 50px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,58 @@
|
|||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="registerModal"
|
||||
:canFullscreen="false"
|
||||
:defaultFullscreen="false"
|
||||
:maskClosable="false"
|
||||
:width="800"
|
||||
title="添加SQL"
|
||||
@ok="modalSuReClick"
|
||||
>
|
||||
<BasicForm
|
||||
ref="myDataBaseFormRef"
|
||||
@register="registerForm"
|
||||
>
|
||||
|
||||
|
||||
|
||||
</BasicForm>
|
||||
</BasicModal>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||
import { BasicForm, useForm } from '/@/components/Form';
|
||||
import { formSqlSchema } from './index.data';
|
||||
|
||||
const emit = defineEmits(['backrows']);
|
||||
|
||||
const [registerModal, { closeModal, setModalProps }] = useModalInner((data: any) => {
|
||||
|
||||
})
|
||||
|
||||
const [registerForm, { getFieldsValue, setFieldsValue, resetFields, validate }] = useForm({
|
||||
labelWidth: 100,
|
||||
schemas: formSqlSchema,
|
||||
showActionButtonGroup: false,
|
||||
baseColProps: { lg: 24, md: 24 },
|
||||
});
|
||||
|
||||
|
||||
function modalSuReClick(){
|
||||
|
||||
// emit('backrows', rows);
|
||||
closeModal()
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
<style lang="less">
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue