HC_YFZX
/
vue-vben-admin
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: HC_YFZX:bb38116df877c493c32f2cc3247af105140ab51d
Branches Tags
HC_YFZX:data_maintenance
HC_YFZX:dev
HC_YFZX:ly
HC_YFZX:main
HC_YFZX:ts
HC_YFZX:zzq
...
compare: HC_YFZX:84fe53cd75b55bf95a81198291ae9188147587fb
Branches Tags
HC_YFZX:data_maintenance
HC_YFZX:dev
HC_YFZX:ly
HC_YFZX:main
HC_YFZX:ts
HC_YFZX:zzq

2 Commits
bb38116df8 ... 84fe53cd75

Author SHA1 Message Date
zzq 84fe53cd75 Merge branch 'dev' of http://123.132.248.154:10000/HC_YFZX/vue-vben-admin into dev 2024-03-27 17:00:36 +08:00
zzq 66022141f3 表单设计样式跟随主体，获取在线数据库列表，导入数据库表 2024-03-27 16:59:36 +08:00
5 changed files with 168 additions and 91 deletions
Show Stats Expand all files Collapse all files

6
src/api/formdesign/index.ts
View File

@ -4,6 +4,7 @@ import { DemoOptionsItem, selectParams, AccountListGetResultModel, AccountParams
enum Api {
FORMSTYPES_LIST = '/api/SysDataItemDetail/Load', //字典
GETDATABASETABLE_LIST = '/api/SysDatabaseLink/LoadDataBaseLinkTree', //获取数据库
FORMS_LIST = '/api/FormScheme/LoadFormPage', //查询表单列表
DATABASE_LIST = '/api/CodeTable/LoadCodeTablePage', //数据对象选择表
GETIMPORTDATA_FORM = '/api/FormModule/GetTableList', // 查询导入数据表列表
@ -47,7 +48,10 @@ export const getImportBaseTableList = (params: NoOptionsParam) =>
defHttp.get<AccountListGetResultModel>({ url: Api.GETIMPORTDATA_FORM, params });
export const importDataBaseTable = (params: NoOptionsParam) =>
defHttp.post<AccountListGetResultModel>({ url: Api.IMPORTDATABASE_TABLE+params.dbCode, params });
defHttp.post<AccountListGetResultModel>({ url: Api.IMPORTDATABASE_TABLE+params.dbCode, params });
export const getDataBaseCodeList = (params: NoOptionsParam) =>
defHttp.get<AccountListGetResultModel>({ url: Api.GETDATABASETABLE_LIST, params });

96
src/views/demo/onlineform/formdesign/FormModal.vue
View File

@ -9,12 +9,12 @@
:draggable="false"
title="慧创 表单设计"
>
<div class="form-box">
<div class="form-box-header">
<div class="form-box-header-logo">
<div :class="`${prefixCls}`">
<div :class="`${prefixCls}-header`">
<div :class="`${prefixCls}-header-logo`">
慧创 表单设计
</div>
<div class="steps-box">
<div :class="`${prefixCls}-header-stepsBox`">
<a-steps
:current="stepsCurrent"
:items="[
@ -27,19 +27,17 @@
]"
></a-steps>
</div>
<div class="button-box">
<div :class="`${prefixCls}-header-btnBox`">
<a-button :disabled="stepsCurrent!==1" @click="formPrevClick">上一步</a-button>
<a-button :disabled="stepsCurrent==1" @click="formNextClick">下一步</a-button>
<a-button :disabled="stepsCurrent!==1" @click="submitClick" type="primary">保存</a-button>
<a-button type="primary" danger @click="closeModalClick">关闭</a-button>
</div>
</div>
<div class="design-content">
<div :class="`${prefixCls}-content`">
<FormDesign v-show="stepsCurrent==1" :isSubmitClick="isSubmitClick" @designformback="designformback"></FormDesign>
<FormPage v-show="stepsCurrent==0" :formScheme="formScheme" :isNextSteps="isNextSteps" :isAddVisible="isAddVisible" @formDataBack="handleformData" @formDataNoBack="formDataNoBack" />
</div>
<!-- <FormPage /> -->
<!-- <FormDesign></FormDesign> -->
</div>
</BasicModal>
@ -218,51 +216,57 @@
}
}
const prefixCls = 'form-box';
</script>
<style scoped>
<style lang="less" scoped>
.form-box{
width: 100%;
/* height: calc(100% - 55px); */
height: 100%;
position:fixed;
top:0;
left: 0;
background: #fff;
background-color: @component-background;
z-index: 1111;
&-header{
height: 55px;
&-logo{
line-height: 55px;
font-size: 18px;
margin-left: 20px;
font-weight: bold;
}
&-stepsBox{
width: 320px;
height: 56px;
position: fixed;
left: 50%;
margin-left: -160px;
top: 0;
display: flex;
align-items: center;
}
&-btnBox{
width: 310px;
height: 56px;
position: fixed;
right: 10px;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
}
&-content{
height: calc(100% - 55px);
padding: 10px;
background-color: @component-background;
}
}
.form-box-header{
height: 55px;
}
.form-box-header-logo{
line-height: 55px;
font-size: 18px;
margin-left: 20px;
font-weight: bold;
}
.design-content{
height: calc(100% - 55px);
padding: 10px;
background: #f0f2f5;
}
.steps-box{
width: 320px;
height: 56px;
position: fixed;
left: 50%;
margin-left: -160px;
top: 0;
display: flex;
align-items: center;
}
.button-box{
width: 310px;
height: 56px;
position: fixed;
right: 10px;
top: 0;
display: flex;
align-items: center;
justify-content: space-around;
}
</style>

1
src/views/demo/onlineform/formdesign/form/DataObject.vue
View File

@ -45,6 +45,7 @@
const [registerModal, { closeModal:closeBaseModal }] = useModalInner((data: any) => {
receiceDbCode.value = data.dbCode
clearBaseSelectedRowKeys()
reload()
})
const [registerImportModal, {openModal:openImportTableModal , closeModal:closeImportModal }] = useModal()

80
src/views/demo/onlineform/formdesign/form/index.data.ts
View File

@ -1,5 +1,5 @@
import { BasicColumn, FormSchema } from '@/components/Table';
import { getFormsTypeList } from '@/api/formdesign/index'
import { getFormsTypeList , getDataBaseCodeList } from '@/api/formdesign/index'
import { h } from 'vue';
import { Tag } from 'ant-design-vue';
@ -94,25 +94,25 @@ export const columns: BasicColumn[] = [
{
title: '表名',
dataIndex: 'name',
width: 150,
width: 140,
},
{
title: '外键',
width: 150,
width: 130,
key: 'fieldAction',
dataIndex: 'fieldAction',
// slots: { customRender: 'fieldAction' },
},
{
title: '关联表',
width: 150,
width: 130,
key: 'relationTabAction',
dataIndex: 'relationTabAction',
// slots: { customRender: 'relationTabAction' },
},
{
title: '关联主键',
width: 150,
width: 130,
key: 'relationFieldAction',
dataIndex: 'relationFieldAction',
// slots: { customRender: 'relationFieldAction' },
@ -224,16 +224,78 @@ export const formSchema: FormSchema[] = [
},
{
field: 'DbCode',
component: 'ApiSelect',
component: 'ApiTreeSelect',
label: '数据库',
required: true,
colProps: {
span: 24,
},
// componentProps: () => {
// return {
// api: getDataBaseCodeList,
// // 接口返回数据
// resultField: 'result',
// labelField: 'text',
// valueField: 'value',
// };
// }
componentProps: {
options: [
{ label: '系统数据库', value: 'lrsystemdb' },
],
// api: () => {
// return new Promise((resolve) => {
// resolve([
// {
// title: 'Parent Node',
// value: '0-0',
// },
// ]);
// });
// },
api: () => getDataBaseCodeList().then((data: AreaRespVO[]) => {
console.log('aaaaadata',data)
return new Promise((resolve) => {
resolve(data);
});
}),
labelField: 'text',
valueField: 'value',
async: true,
onChange: (e, v) => {
console.log('ApiTreeSelect====>:', e, v);
},
onLoadData: ({ treeData, resolve, treeNode }) => {
console.log('treeNode====>:', treeNode);
console.log('treeData====>:', treeData);
setTimeout(() => {
// const children: Recordable[] = [
// { title: `Child Node ${treeNode.eventKey}-0`, value: `${treeNode.eventKey}-0` },
// { title: `Child Node ${treeNode.eventKey}-1`, value: `${treeNode.eventKey}-1` },
// ];
const children: Recordable[] = []
console.log('children',children)
treeData.value.forEach(item =>{
if(item.id == treeNode.id){
if(item.childNodes){
item.childNodes.forEach(val =>{
children.push({
text: val.text,
value: val.value
})
})
}
}
})
console.log('children22',children)
children.forEach((item) => {
item.isLeaf = false;
item.children = [];
});
treeNode.dataRef.children = children;
treeData.value = [...treeData.value];
resolve();
return;
}, 300);
},
},
},
{

76
src/views/demo/onlineform/formdesign/form/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="l-rblock" >
<div class="l-page-pane">
<div :class="prefixCls" >
<div :class="`${prefixCls}__content`">
<BasicForm
ref="myDataBaseFormRef"
@register="registerForm"
@ -60,12 +60,12 @@
</template>
</template>
</BasicTable>
<div class="addDataBaseTableBox" @click="handleAddDataBase">
<div :class="`${prefixCls}__content-addbtn`" @click="handleAddDataBase">
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
</div>
</template>
<template #addDatabaseContantSlot="{ model, field }">
<div class="connectTableTitle">添加数据库关联表，只用来做数据权限设置（请先选择数据库）</div>
<div :class="`${prefixCls}__content-title`">添加数据库关联表，只用来做数据权限设置（请先选择数据库）</div>
<BasicTable @register="registerContanctTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'fname'">
@ -136,7 +136,7 @@
</template>
</template>
</BasicTable>
<div class="addDataBaseTableBox" @click="handleAddConnectBase">
<div :class="`${prefixCls}__content-addbtn`" @click="handleAddConnectBase">
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
</div>
</template>
@ -171,14 +171,14 @@
</template>
</template>
</BasicTable>
<div class="addDataBaseTableBox" @click="handleAddSqlData">
<div :class="`${prefixCls}__content-addbtn`" @click="handleAddSqlData">
<a-button size="small" type="link"><template #icon><PlusOutlined /></template>添加</a-button>
</div>
</template>
</BasicForm>
<div class="formLine"></div>
<div :class="`${prefixCls}__content-formLine`"></div>
</div>
</div>
@ -685,38 +685,44 @@
setTableDataViews(newArr)
reloadViews()
}
const prefixCls = 'l-rblock';
</script>
<style lang="less">
<style lang="less" scoped>
.l-rblock{
width: 100%;
height: 100%;
background:#f0f2f5;
}
.l-page-pane{
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
max-width: 794px;
overflow: hidden auto;
background: #fff;
border-radius: 4px;
margin: auto;
padding: 24px;
}
.addDataBaseTableBox{
border: 1px dashed #f0f0f0;
text-align: center;
cursor: pointer;
margin-top: -20px;
&:hover {
border-color: #409EFF;
background-color: @border-color-base;
&__content{
box-sizing: border-box;
position: relative;
width: 100%;
height: 100%;
max-width: 794px;
overflow: hidden auto;
background-color: @component-background;
border-radius: 4px;
margin: auto;
padding: 24px;
&-addbtn{
border: 1px dashed #f0f0f0;
border-color: @border-color-base;
text-align: center;
cursor: pointer;
margin-top: -20px;
&:hover {
border-color: #409EFF;
}
}
&-title{
padding-top: 20px;
}
&-formLine{
height: 50px;
}
}
}
.connectTableTitle{
padding-top: 20px;
}
.formLine{
height: 50px;
}
</style>