图形化建表
parent
6e029007f5
commit
f6075e7cc1
|
|
@ -1,5 +1,5 @@
|
|||
import { defHttp } from '@/utils/http/axios';
|
||||
import {AccountListGetResultModel,AccountListItem,AccountParams } from './model/index';
|
||||
import { AccountListGetResultModel, AccountListItem, AccountParams } from './model/index';
|
||||
|
||||
enum Api {
|
||||
GETDATABASETABLEPAGE_LIST = '/api/SysDatabaseLink/LoadDataBaseInfo', //获取数据库
|
||||
|
|
@ -8,34 +8,33 @@ enum Api {
|
|||
DELETEDATABASETABLE = '/api/SysDatabaseLink/DeleteBaseLink?id=', //删除数据库
|
||||
GETDATABASEDETAIL = '/api/SysDatabaseLink/GetDataBaseForm', //编辑时获取详情数据
|
||||
TEStCONNECTTION = '/api/SysDatabaseLink/TestConnection', //测试连接串是否正确
|
||||
createPicTable = '/api/createTable/createTable', //图形化建表
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* @description: Get sample options value
|
||||
*/
|
||||
|
||||
|
||||
export const getDataBasePageList = (params: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASETABLEPAGE_LIST, params });
|
||||
|
||||
export const getDataBaseDetail = (params: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASEDETAIL, params });
|
||||
|
||||
export const testDataBaseConnection = (params: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.TEStCONNECTTION, params });
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASETABLEPAGE_LIST, params });
|
||||
|
||||
export const getDataBaseDetail = (params: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASEDETAIL, params });
|
||||
|
||||
export const testDataBaseConnection = (params: AccountParams) =>
|
||||
defHttp.get<AccountListGetResultModel>({ url: Api.TEStCONNECTTION, params });
|
||||
|
||||
|
||||
export const addDataBaseInfo = (params: AccountListItem) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.ADDDATABASETABLE, params });
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.ADDDATABASETABLE, params });
|
||||
|
||||
export const editDataBaseInfo = (params: AccountListItem) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.EDITDATABASETABLE+params.databaseLinkId,params });
|
||||
defHttp.post<AccountListGetResultModel>({
|
||||
url: Api.EDITDATABASETABLE + params.databaseLinkId,
|
||||
params,
|
||||
});
|
||||
|
||||
export const delDataBaseInfo = (params: AccountListItem) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.DELETEDATABASETABLE+params.id, params });
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.DELETEDATABASETABLE + params.id, params });
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
export const createPicTable = (params: AccountListItem) =>
|
||||
defHttp.post<AccountListGetResultModel>({ url: Api.createPicTable, params });
|
||||
|
|
|
|||
|
|
@ -0,0 +1,16 @@
|
|||
import { BasicColumn } from '@/components/Table';
|
||||
import { h } from 'vue';
|
||||
import { Tag } from 'ant-design-vue';
|
||||
|
||||
export const columns: BasicColumn[] = [
|
||||
{
|
||||
title: '字段名',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
key: 'type',
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,134 @@
|
|||
<template>
|
||||
<div class="box-container">
|
||||
<div class="flex mb-3">
|
||||
<div class="tab-label"><span class="red">*</span>表名：</div>
|
||||
<a-input v-model:value="tableName" placeholder="请输入表名" />
|
||||
</div>
|
||||
<BasicTable class="w-3/4 xl:w-5/5" @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="primary" @click="handleAdd"> 新增 </a-button>
|
||||
<a-button type="success" @click="handleSubmit"> 保存 </a-button>
|
||||
</template>
|
||||
<template #bodyCell="{ column, record }">
|
||||
<template v-if="column.key === 'name'">
|
||||
<a-input v-model:value="record.name" placeholder="请输入字段名" />
|
||||
</template>
|
||||
<template v-if="column.key === 'type'">
|
||||
<a-select
|
||||
style="width: 100%"
|
||||
ref="select"
|
||||
placeholder="请选择"
|
||||
v-model:value="record.type"
|
||||
:options="codesTypeArr"
|
||||
/>
|
||||
</template>
|
||||
<template v-if="column.key === 'length'">
|
||||
<a-input v-model:value="record.length" placeholder="请输入长度" />
|
||||
</template>
|
||||
<template v-if="column.key === 'action'">
|
||||
<TableAction
|
||||
:actions="[
|
||||
{
|
||||
label: '删除',
|
||||
color: 'error',
|
||||
onClick: () => {
|
||||
handleDelete(record);
|
||||
},
|
||||
},
|
||||
]"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
import { BasicTable, useTable, TableAction } from '@/components/Table';
|
||||
import { columns } from './index.data';
|
||||
import { createPicTable } from '@/api/database/index';
|
||||
|
||||
const tableName: any = ref('');
|
||||
const codesTypeArr: any = ref([
|
||||
{ label: 'varchar', value: 'varchar' },
|
||||
{ label: 'int', value: 'int' },
|
||||
{ label: 'date', value: 'date' },
|
||||
]);
|
||||
const [registerTable, { reload, setTableData, getDataSource }] = useTable({
|
||||
rowKey: '',
|
||||
columns,
|
||||
formConfig: {
|
||||
labelWidth: 120,
|
||||
},
|
||||
useSearchForm: false,
|
||||
showTableSetting: false,
|
||||
showIndexColumn: true,
|
||||
bordered: true,
|
||||
actionColumn: {
|
||||
width: 200,
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
},
|
||||
handleSearchInfoFn(info) {
|
||||
return info;
|
||||
},
|
||||
});
|
||||
function handleAdd() {
|
||||
let viesObj: any = getDataSource() || [];
|
||||
viesObj.push({ name: '', type: '', length: 255, id: new Date().getTime() });
|
||||
setTableData(viesObj);
|
||||
reload();
|
||||
}
|
||||
function handleDelete(record: Recordable) {
|
||||
let arr = getDataSource();
|
||||
let newArr: any = [];
|
||||
arr.forEach((item) => {
|
||||
if (item.id !== record.id) {
|
||||
newArr.push(item);
|
||||
}
|
||||
});
|
||||
|
||||
setTableData(newArr);
|
||||
reload();
|
||||
}
|
||||
function handleSubmit() {
|
||||
let arr = getDataSource();
|
||||
console.log('record', arr);
|
||||
let newArr: any = [];
|
||||
arr.forEach((item) => {
|
||||
newArr.push({
|
||||
name: item.name,
|
||||
type: item.type,
|
||||
});
|
||||
});
|
||||
const param: any = {
|
||||
tableName: tableName.value,
|
||||
tableInfos: newArr,
|
||||
};
|
||||
console.log('param', param);
|
||||
createPicTable(param).then((res: Recordable) => {
|
||||
console.log('res', res);
|
||||
});
|
||||
}
|
||||
onMounted(() => {
|
||||
const arr: any = [{ name: '', type: '', length: 255, id: new Date().getTime() }];
|
||||
setTableData(arr);
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
.box-container {
|
||||
width: 80%;
|
||||
margin: 20px auto 0;
|
||||
}
|
||||
.tab-label {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: end;
|
||||
}
|
||||
.red {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue