表单设计-自动建表最终版
parent
561814557d
commit
3e6068de87
|
|
@ -35,10 +35,18 @@
|
|||
</a-tag>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="11">
|
||||
<a-input v-model:value="db.tableName" @change="db.name = db.tableName" />
|
||||
<a-input
|
||||
v-model:value="db.tableName"
|
||||
:disabled="!isNewTable(db)"
|
||||
@change="changeTableName(db)"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col class="gutter-row" :span="11">
|
||||
<a-input v-model:value="db.description" placeholder="请输入备注" />
|
||||
<a-input
|
||||
v-model:value="db.description"
|
||||
placeholder="请输入备注"
|
||||
:disabled="!isNewTable(db)"
|
||||
/>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<BasicTable
|
||||
|
|
@ -53,7 +61,7 @@
|
|||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'dbColumnName'">
|
||||
<div>
|
||||
<a-input v-model:value="record.dbColumnName" :disabled="!props.isAddVisible" />
|
||||
<a-input v-model:value="record.dbColumnName" :disabled="!isNewFormItem(record)" />
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="column.key === 'length'">
|
||||
|
|
@ -61,7 +69,9 @@
|
|||
<a-input
|
||||
v-model:value="record.length"
|
||||
defaultValue="200"
|
||||
:disabled="record.length == 0 && record.dataType == 'bool'"
|
||||
:disabled="
|
||||
!isNewFormItem(record) || (record.length == 0 && record.dataType == 'bool')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -71,9 +81,10 @@
|
|||
ref="select"
|
||||
size="small"
|
||||
placeholder="请选择"
|
||||
style="width: 100%; text-align: left"
|
||||
v-model:value="record.dataType"
|
||||
:options="dataTypeOptions"
|
||||
style="width: 100%; text-align: left"
|
||||
:disabled="!isNewFormItem(record)"
|
||||
@change="isBoolChangeLength(record)"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -115,6 +126,7 @@
|
|||
let db_list: any = ref([]);
|
||||
// 主键
|
||||
let primaryKey = '';
|
||||
let oldDb: any = [];
|
||||
// 表结构初始值
|
||||
let dbColumnInfo = {
|
||||
tableName: '',
|
||||
|
|
@ -127,7 +139,6 @@
|
|||
isPrimarykey: 0,
|
||||
decimalDigits: 0,
|
||||
};
|
||||
|
||||
// 数据格式-下拉框
|
||||
let dataTypeOptions = [
|
||||
{ label: '字符串', value: 'varchar' },
|
||||
|
|
@ -151,44 +162,47 @@
|
|||
let result_json = JSON.parse(result.scheme.scheme);
|
||||
let data_json = JSON.parse(data.saveFormDatas.scheme.scheme);
|
||||
data_json.db = result_json.db;
|
||||
oldDb = result_json.db;
|
||||
data.saveFormDatas.scheme.scheme = JSON.stringify(data_json);
|
||||
}
|
||||
// 表名和备注
|
||||
let scheme = JSON.parse(data.saveFormDatas.scheme.scheme);
|
||||
console.log(160, scheme);
|
||||
|
||||
// 制作表格
|
||||
// 分析表单
|
||||
db_list.value = [];
|
||||
scheme = getSchemeByscheme(
|
||||
scheme,
|
||||
data.saveFormDatas.info.DbCode,
|
||||
'father',
|
||||
'main',
|
||||
scheme.db,
|
||||
scheme.db[0].tableName,
|
||||
'',
|
||||
'main',
|
||||
cloneDeep(tableInfo),
|
||||
);
|
||||
// 切换旧的db到新制作的db上
|
||||
if (!props.isAddVisible) {
|
||||
changeOldDb();
|
||||
}
|
||||
|
||||
saveFormDatas = data.saveFormDatas;
|
||||
saveFormDatas.scheme.scheme = JSON.stringify(scheme);
|
||||
});
|
||||
|
||||
// 分析表单
|
||||
function getSchemeByscheme(
|
||||
scheme: any,
|
||||
dbCode,
|
||||
type, // 主表还是子表
|
||||
schemedb,
|
||||
mainTableName,
|
||||
chlidTableName,
|
||||
mainTableName, // 主表名
|
||||
chlidTableName, // 子表名
|
||||
gridType, // 布局类型
|
||||
db_temp,
|
||||
) {
|
||||
let schemas: any = '';
|
||||
// let db_temp = cloneDeep(tableInfo);
|
||||
// console.log(gridType, db_temp);
|
||||
|
||||
// 主表-db
|
||||
if (type == 'father') {
|
||||
if (type == 'main') {
|
||||
// 新增时使用
|
||||
if (props.isAddVisible) {
|
||||
db_temp.name = scheme.db[0].name || scheme.db[0].tableName;
|
||||
|
|
@ -203,9 +217,9 @@
|
|||
if (gridType == 'main') {
|
||||
db_temp = schemedb[0];
|
||||
db_temp.dbColumnInfoList = [];
|
||||
} else {
|
||||
// 编辑主体表的布局组件时使用
|
||||
console.log(207, db_temp);
|
||||
// } else {
|
||||
// // 编辑主体表的布局组件时使用
|
||||
// console.log(207, db_temp);
|
||||
}
|
||||
mainTableName = db_temp.tableName;
|
||||
}
|
||||
|
|
@ -242,7 +256,7 @@
|
|||
}
|
||||
|
||||
// 主表-table
|
||||
if (type == 'father') {
|
||||
if (type == 'main') {
|
||||
let mainEach: any = [];
|
||||
if (gridType == 'main') {
|
||||
mainEach = scheme.formInfo.tabList;
|
||||
|
|
@ -418,7 +432,6 @@
|
|||
children: temp,
|
||||
});
|
||||
}
|
||||
console.log(412, mainEach);
|
||||
// 子表
|
||||
mainEach.forEach((sch, i) => {
|
||||
schemas = sch.children;
|
||||
|
|
@ -667,22 +680,32 @@
|
|||
return scheme;
|
||||
}
|
||||
|
||||
// 是否是新增的
|
||||
function getBoolean(item, db_temp) {
|
||||
if (db_temp) {
|
||||
let res = db_temp.dbColumnInfoList.find(
|
||||
(t) => t.dbColumnName === item.componentProps.fieldName,
|
||||
);
|
||||
if (res) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
// 切换旧的db到新制作的db上
|
||||
function changeOldDb() {
|
||||
let oldTableNameArray = oldDb.map((old) => old.tableName);
|
||||
|
||||
db_list.value.forEach((db, db_index) => {
|
||||
// 是旧表
|
||||
if (oldTableNameArray.includes(db.tableName)) {
|
||||
let oldTable = oldDb.find((old) => {
|
||||
return old.tableName == db.tableName;
|
||||
});
|
||||
// 遍历
|
||||
db.dbColumnInfoList?.forEach((dbColumn, dbColumn_index) => {
|
||||
oldTable.dbColumnInfoList?.forEach((oldDbColumn) => {
|
||||
if (dbColumn.dbColumnName == oldDbColumn.dbColumnName) {
|
||||
// 把保存过的长度和数据格式（默认varchar） 赋值给新分析的表格
|
||||
db_list.value[db_index].dbColumnInfoList[dbColumn_index] = oldDbColumn;
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 提交
|
||||
async function submit() {
|
||||
// 设置子表的relationField
|
||||
getRelationField();
|
||||
if (props.isAddVisible) {
|
||||
db_list.value.forEach(async (db) => {
|
||||
|
|
@ -690,29 +713,33 @@
|
|||
await AddTable(db);
|
||||
});
|
||||
} else {
|
||||
let schems = JSON.parse(saveFormDatas.scheme.scheme);
|
||||
let schemsArray = new Array(schems.map((sch) => sch.tableName));
|
||||
schems.forEach(async (sch) => {
|
||||
let schArray = new Array(sch.dbColumnInfoList.map((s) => s.tableName));
|
||||
db_list.value.forEach(async (db) => {
|
||||
// 新添加的子表
|
||||
if (!schemsArray.includes(db.tableName)) {
|
||||
await AddTable(db);
|
||||
} else {
|
||||
// 新添加的行
|
||||
db.dbColumnInfoList.forEach(async (d) => {
|
||||
if (!schArray.includes(d.tableName)) {
|
||||
await AddColumn(d);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
// 旧表单的表格名的数组
|
||||
let oldTableNameArray = oldDb.map((old) => old.tableName);
|
||||
db_list.value.forEach(async (db) => {
|
||||
// 是新建立的子表
|
||||
if (!oldTableNameArray.includes(db.tableName)) {
|
||||
await AddTable(db);
|
||||
} else {
|
||||
//遍历旧的表格列表
|
||||
oldDb.forEach((old) => {
|
||||
// 找到同名字的表格
|
||||
if (old.tableName == db.tableName) {
|
||||
// 旧表单的表格的列名的数组
|
||||
let oldDbColumnArray = old.dbColumnInfoList.map((o) => o.dbColumnName);
|
||||
db.dbColumnInfoList.forEach(async (dbColumn) => {
|
||||
if (!oldDbColumnArray.includes(dbColumn.dbColumnName)) {
|
||||
await AddColumn(dbColumn);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
getFromAndTable();
|
||||
}
|
||||
|
||||
// relationField
|
||||
// 设置子表的relationField
|
||||
function getRelationField() {
|
||||
// 确定primaryKey
|
||||
if (db_list.value[0].dbColumnInfoList.length > 0) {
|
||||
|
|
@ -736,15 +763,6 @@
|
|||
saveFormDatas.scheme.scheme = JSON.stringify(schems);
|
||||
}
|
||||
|
||||
// 数据格式（默认varchar）变化后修改字段长度
|
||||
function isBoolChangeLength(record: Recordable) {
|
||||
if (record.dataType == 'bool') {
|
||||
record.length = 0;
|
||||
} else {
|
||||
record.length = 200;
|
||||
}
|
||||
}
|
||||
|
||||
// 把弹窗的信息写入saveFormDatas
|
||||
function getFromAndTable() {
|
||||
let schems = JSON.parse(saveFormDatas.scheme.scheme);
|
||||
|
|
@ -755,9 +773,52 @@
|
|||
item.relationField = primaryKey;
|
||||
}
|
||||
});
|
||||
// console.log(schems.db);
|
||||
saveFormDatas.scheme.scheme = JSON.stringify(schems);
|
||||
emit('automatic-modal-submitsuccess', saveFormDatas);
|
||||
closeModal();
|
||||
}
|
||||
|
||||
// 表名变化后修改表单里的表名
|
||||
function changeTableName(db) {
|
||||
let scheme_replace = JSON.stringify(saveFormDatas.scheme.scheme);
|
||||
scheme_replace = scheme_replace.replace(db.name, db.tableName);
|
||||
saveFormDatas.scheme.scheme = JSON.parse(scheme_replace);
|
||||
db.name = db.tableName;
|
||||
db.dbColumnInfoList?.forEach((d) => {
|
||||
d.tableName = db.tableName;
|
||||
});
|
||||
}
|
||||
|
||||
// 数据格式（默认varchar）变化后修改字段长度
|
||||
function isBoolChangeLength(record: Recordable) {
|
||||
if (record.dataType == 'bool') {
|
||||
record.length = 0;
|
||||
} else {
|
||||
record.length = 200;
|
||||
}
|
||||
}
|
||||
|
||||
// 判定是否是新建的表格
|
||||
function isNewTable(item: any) {
|
||||
let flag = true;
|
||||
oldDb.forEach((old) => {
|
||||
if (old.tableName == item.tableName) {
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
return flag;
|
||||
}
|
||||
|
||||
// 判定是否是新建的组件
|
||||
function isNewFormItem(item: any) {
|
||||
let flag = true;
|
||||
oldDb?.forEach((old) => {
|
||||
old?.dbColumnInfoList?.forEach((li) => {
|
||||
if (li.dbColumnName == item.dbColumnName) {
|
||||
flag = false;
|
||||
}
|
||||
});
|
||||
});
|
||||
return flag;
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue