|
|
@@ -3,20 +3,10 @@
|
|
|
<div class="form-designer-container-9136076486841527" v-if="loadState">
|
|
|
<k-header v-if="showHead" :title="title" />
|
|
|
<!-- 操作区域 start -->
|
|
|
- <operatingArea
|
|
|
- v-if="toolbarsTop"
|
|
|
- :showToolbarsText="showToolbarsText"
|
|
|
- :toolbars="toolbars"
|
|
|
- @handleSave="handleSave"
|
|
|
- @handlePreview="handlePreview"
|
|
|
- @handleOpenImportJsonModal="handleOpenImportJsonModal"
|
|
|
- @handleOpenCodeModal="handleOpenCodeModal"
|
|
|
- @handleOpenJsonModal="handleOpenJsonModal"
|
|
|
- @handleReset="handleReset"
|
|
|
- @handleClose="handleClose"
|
|
|
- @handleUndo="handleUndo"
|
|
|
- @handleRedo="handleRedo"
|
|
|
- >
|
|
|
+ <operatingArea v-if="toolbarsTop" :showToolbarsText="showToolbarsText" :toolbars="toolbars"
|
|
|
+ @handleSave="handleSave" @handlePreview="handlePreview" @handleOpenImportJsonModal="handleOpenImportJsonModal"
|
|
|
+ @handleOpenCodeModal="handleOpenCodeModal" @handleOpenJsonModal="handleOpenJsonModal" @handleReset="handleReset"
|
|
|
+ @handleClose="handleClose" @handleUndo="handleUndo" @handleRedo="handleRedo">
|
|
|
<template slot="left-action">
|
|
|
<slot name="left-action"></slot>
|
|
|
</template>
|
|
|
@@ -26,32 +16,18 @@
|
|
|
</template>
|
|
|
</operatingArea>
|
|
|
<!-- 操作区域 end -->
|
|
|
- <div
|
|
|
- class="content"
|
|
|
- :class="{
|
|
|
- 'show-head': showHead,
|
|
|
- 'toolbars-top': toolbarsTop,
|
|
|
- 'show-head-and-toolbars-top': toolbarsTop && showHead
|
|
|
- }"
|
|
|
- >
|
|
|
+ <div class="content" :class="{
|
|
|
+ 'show-head': showHead,
|
|
|
+ 'toolbars-top': toolbarsTop,
|
|
|
+ 'show-head-and-toolbars-top': toolbarsTop && showHead
|
|
|
+ }">
|
|
|
<!-- 左侧控件区域 start -->
|
|
|
<aside class="left">
|
|
|
- <a-collapse
|
|
|
- @change="collapseChange"
|
|
|
- :defaultActiveKey="collapseDefaultActiveKey"
|
|
|
- >
|
|
|
+ <a-collapse @change="collapseChange" :defaultActiveKey="collapseDefaultActiveKey">
|
|
|
<!-- 基础控件 start -->
|
|
|
- <a-collapse-panel
|
|
|
- v-for="(item, index) in schemaGroup"
|
|
|
- :header="item.title"
|
|
|
- :key="index"
|
|
|
- >
|
|
|
- <collapseItem
|
|
|
- :list="item.list"
|
|
|
- @generateKey="generateKey"
|
|
|
- @handleListPush="handleListPush"
|
|
|
- @start="handleStart"
|
|
|
- />
|
|
|
+ <a-collapse-panel v-for="(item, index) in schemaGroup" :header="item.title" :key="index">
|
|
|
+ <collapseItem :list="item.list" @generateKey="generateKey" @handleListPush="handleListPush"
|
|
|
+ @start="handleStart" />
|
|
|
</a-collapse-panel>
|
|
|
<!-- 基础控件 end -->
|
|
|
</a-collapse>
|
|
|
@@ -61,20 +37,11 @@
|
|
|
<!-- 中间面板区域 start -->
|
|
|
<section>
|
|
|
<!-- 操作区域 start -->
|
|
|
- <operatingArea
|
|
|
- v-if="!toolbarsTop"
|
|
|
- :showToolbarsText="showToolbarsText"
|
|
|
- :toolbars="toolbars"
|
|
|
- @handleSave="handleSave"
|
|
|
- @handlePreview="handlePreview"
|
|
|
- @handleOpenImportJsonModal="handleOpenImportJsonModal"
|
|
|
- @handleOpenCodeModal="handleOpenCodeModal"
|
|
|
- @handleOpenJsonModal="handleOpenJsonModal"
|
|
|
- @handleReset="handleReset"
|
|
|
- @handleClose="handleClose"
|
|
|
- @handleUndo="handleUndo"
|
|
|
- @handleRedo="handleRedo"
|
|
|
- >
|
|
|
+ <operatingArea v-if="!toolbarsTop" :showToolbarsText="showToolbarsText" :toolbars="toolbars"
|
|
|
+ @handleSave="handleSave" @handlePreview="handlePreview"
|
|
|
+ @handleOpenImportJsonModal="handleOpenImportJsonModal" @handleOpenCodeModal="handleOpenCodeModal"
|
|
|
+ @handleOpenJsonModal="handleOpenJsonModal" @handleReset="handleReset" @handleClose="handleClose"
|
|
|
+ @handleUndo="handleUndo" @handleRedo="handleRedo">
|
|
|
<template slot="left-action">
|
|
|
<slot name="left-action"></slot>
|
|
|
</template>
|
|
|
@@ -83,18 +50,11 @@
|
|
|
<slot name="right-action"></slot>
|
|
|
</template>
|
|
|
</operatingArea>
|
|
|
- <!-- 操作区域 end -->
|
|
|
+ <!-- 操作区域 end -->
|
|
|
<!-- 中间控件渲染区域 start -->
|
|
|
- <k-form-component-panel
|
|
|
- :class="{ 'no-toolbars-top': !toolbarsTop }"
|
|
|
- :data="data"
|
|
|
- :selectItem="selectItem"
|
|
|
- :noModel="noModel"
|
|
|
- :hideModel="hideModel"
|
|
|
- :startType="startType"
|
|
|
- ref="KFCP"
|
|
|
- @handleSetSelectItem="handleSetSelectItem"
|
|
|
- />
|
|
|
+ <k-form-component-panel :class="{ 'no-toolbars-top': !toolbarsTop }" :data="data" :selectItem="selectItem"
|
|
|
+ :noModel="noModel" :hideModel="hideModel" :startType="startType" ref="KFCP"
|
|
|
+ @handleSetSelectItem="handleSetSelectItem" />
|
|
|
<!-- 中间控件渲染区域 end -->
|
|
|
|
|
|
<!-- 操作区域 start -->
|
|
|
@@ -107,24 +67,13 @@
|
|
|
|
|
|
<!-- 右侧控件属性区域 start -->
|
|
|
<aside class="right">
|
|
|
- <a-tabs
|
|
|
- :activeKey="activeKey"
|
|
|
- @change="changeTab"
|
|
|
- :tabBarStyle="{ margin: 0 }"
|
|
|
- >
|
|
|
+ <a-tabs :activeKey="activeKey" @change="changeTab" :tabBarStyle="{ margin: 0 }">
|
|
|
<a-tab-pane :key="1" tab="表单属性设置">
|
|
|
- <formProperties
|
|
|
- :config="data.config"
|
|
|
- :previewOptions="previewOptions"
|
|
|
- />
|
|
|
+ <formProperties :config="data.config" :previewOptions="previewOptions" />
|
|
|
</a-tab-pane>
|
|
|
<a-tab-pane :key="2" tab="控件属性设置">
|
|
|
- <formItemProperties
|
|
|
- class="form-item-properties"
|
|
|
- :selectItem="selectItem"
|
|
|
- :hideModel="hideModel"
|
|
|
- @changeOptionsListData="changeOptionsListData"
|
|
|
- />
|
|
|
+ <formItemProperties class="form-item-properties" :selectItem="selectItem" :hideModel="hideModel"
|
|
|
+ @changeOptionsListData="changeOptionsListData" />
|
|
|
</a-tab-pane>
|
|
|
</a-tabs>
|
|
|
</aside>
|
|
|
@@ -286,7 +235,7 @@ export default {
|
|
|
this.selectItem.options.optionsListData.push('');
|
|
|
console.log(this.selectItem.options.optionsListData);
|
|
|
} else (
|
|
|
- this.selectItem.options.optionsListData.split(index,1)
|
|
|
+ this.selectItem.options.optionsListData.split(index, 1)
|
|
|
)
|
|
|
},
|
|
|
generateKey(list, index) {
|
|
|
@@ -349,7 +298,7 @@ export default {
|
|
|
},
|
|
|
handlePreview() {
|
|
|
// 打开预览模态框
|
|
|
- console.log('[打开预览模态框]',this.data,this.previewOptions.width)
|
|
|
+ console.log('[打开预览模态框]', this.data, this.previewOptions.width)
|
|
|
this.$refs.previewModal.jsonData = this.data;
|
|
|
this.$refs.previewModal.previewWidth = this.previewOptions.width;
|
|
|
this.$refs.previewModal.visible = true;
|
|
|
@@ -512,14 +461,45 @@ export default {
|
|
|
handleSave() {
|
|
|
// 保存函数
|
|
|
// console.log(this.data)
|
|
|
- if(this.data.list.length == 0){
|
|
|
+ if (this.data.list.length == 0) {
|
|
|
message.error("请拖拽组件");
|
|
|
return
|
|
|
}
|
|
|
- if (!this.data.config.formName || !this.data.config.nickFormName){
|
|
|
+ if (!this.data.config.formName || !this.data.config.nickFormName) {
|
|
|
message.error("请填写表单名称和表单别名");
|
|
|
return
|
|
|
}
|
|
|
+ // 遍历列表，检查每一项
|
|
|
+ for (let i = 0; i < this.data.list.length; i++) {
|
|
|
+ const item = this.data.list[i];
|
|
|
+ if (item.type == 'calculation_table') {
|
|
|
+ console.log('[item]', item);
|
|
|
+
|
|
|
+ // 检查表名和关联字段
|
|
|
+ if (!item.tableName) {
|
|
|
+ message.error("请选择表名");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!item.joinTableName) {
|
|
|
+ message.error("请选择关联表字段");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!item.options.mainTableCondition) {
|
|
|
+ message.error("请选择表名");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!item.options.joinTableCondition) {
|
|
|
+ message.error("请选择条件表字段");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新 options 中的表名和关联字段
|
|
|
+ item.options.tableName = item.tableName;
|
|
|
+ item.options.joinTableName = item.joinTableName;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // console.log('[保存的data]',JSON.stringify(this.data))
|
|
|
this.$emit("save", JSON.stringify(this.data));
|
|
|
},
|
|
|
getValue() {
|
|
|
@@ -531,17 +511,17 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- let blackList=['评分','警告提示','HTML','富文本','按钮','级联选择器']
|
|
|
+ let blackList = ['评分', '警告提示', 'HTML', '富文本', '按钮', '级联选择器']
|
|
|
this.loadState = true;
|
|
|
nodeSchema.addComputed(this.schemaGroup);
|
|
|
this.schemaGroup = tempData;
|
|
|
- console.log('this.schemaGroup123',this.schemaGroup);
|
|
|
+ console.log('this.schemaGroup123', this.schemaGroup);
|
|
|
this.schemaGroup[0].list = this.schemaGroup[0].list.filter(item => {
|
|
|
- return !blackList.some(v=>v==item.label)
|
|
|
+ return !blackList.some(v => v == item.label)
|
|
|
})
|
|
|
this.schemaGroup[0].list.forEach(item => {
|
|
|
if (item.label == '树形选择器') {
|
|
|
- item.label='级联选择器'
|
|
|
+ item.label = '级联选择器'
|
|
|
}
|
|
|
})
|
|
|
}
|
