|
|
|
@ -4,6 +4,7 @@ |
|
|
|
@ 备注: 自定义表单 |
|
|
|
--> |
|
|
|
<script lang='ts' setup> |
|
|
|
import { useDesignFormStore } from '@/store/DesignForm/designForm' |
|
|
|
import { useRoute, useRouter } from 'vue-router' |
|
|
|
import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form' |
|
|
|
import { customerFormVersionCont } from '@/api/DesignForm/type' |
|
|
|
@ -15,6 +16,7 @@ import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCus |
|
|
|
import DragControlApp from '@/components/DesignForm/dragControlApp.vue'; |
|
|
|
import HeadToolsApp from '@/components/DesignForm/public/headToolsApp.vue'; |
|
|
|
import FormDesign from '@/components/DesignForm/public/form/form.vue' |
|
|
|
import PreviewPage from '@/views/sysworkflow/lowcodepage/appPage/appPageForm/previewPage.vue' |
|
|
|
|
|
|
|
const props = defineProps({ |
|
|
|
appCont:{ |
|
|
|
@ -84,6 +86,15 @@ const route: any = useRoute().query || {} |
|
|
|
const versionCont = ref<customerFormVersionCont[]>([]) //版本内容列表 |
|
|
|
const tableKey = ref("") |
|
|
|
const versionId = ref<string>("") //版本号 |
|
|
|
const store = useDesignFormStore() |
|
|
|
const drawer = reactive<DrawerStruct>({ |
|
|
|
visible: false, |
|
|
|
type: '', |
|
|
|
title: '', |
|
|
|
codeType: '', |
|
|
|
direction: undefined, //弹出方向rtl / ltr |
|
|
|
callback: '' |
|
|
|
}) |
|
|
|
// 搜索设计时左侧快速添加字段 |
|
|
|
const searchCheckField = (data: FormData) => { |
|
|
|
state.value.formData.list.push(data) |
|
|
|
@ -98,14 +109,123 @@ const editversionstaus = (id:string) =>{ |
|
|
|
} |
|
|
|
//打开脚本预览 |
|
|
|
const openAceEditDrawer = (params: any) => { |
|
|
|
const { type, direction, codeType, title, callback, content } = params |
|
|
|
drawer.direction = direction // 窗口位置ltr/rtl |
|
|
|
drawer.type = type // 作为窗口唯一标识，在窗口关闭时可根据type作不同处理 |
|
|
|
drawer.codeType = codeType || '' // 显示代码类型 |
|
|
|
drawer.title = title ? `提示：${title}` : '' |
|
|
|
drawer.visible = true |
|
|
|
drawer.callback = callback |
|
|
|
let editData =codeType === 'json'? json2string(content, true): objToStringify(content, true) |
|
|
|
switch (type) { |
|
|
|
case 'css': |
|
|
|
editData = state.value.formData.config?.style || '' |
|
|
|
break |
|
|
|
case 'dict': |
|
|
|
// 格式化一下 |
|
|
|
editData = json2string(state.value.formDict, true) |
|
|
|
break |
|
|
|
case 'beforeRequest': |
|
|
|
case 'beforeSubmit': |
|
|
|
case 'afterResponse': |
|
|
|
case 'afterSubmit': |
|
|
|
case 'change': |
|
|
|
// eslint-disable-next-line no-case-declarations |
|
|
|
const beforeData = state.value.formData.events || {} |
|
|
|
if (beforeData[type]) { |
|
|
|
editData = objToStringify(beforeData[type], true) |
|
|
|
} else { |
|
|
|
if (['afterResponse', 'afterSubmit'].includes(type)) { |
|
|
|
editData = afterResponse |
|
|
|
} else if (type === 'change') { |
|
|
|
editData = onChange |
|
|
|
} else { |
|
|
|
editData = beforeRequest |
|
|
|
} |
|
|
|
} |
|
|
|
break |
|
|
|
// case 'afterResponse': |
|
|
|
// case 'afterSubmit': |
|
|
|
// const newData = state.formData.events || {} |
|
|
|
// if (newData[type]) { |
|
|
|
// editData = objToStringify(newData[type], true) |
|
|
|
// } else { |
|
|
|
// editData = afterResponse |
|
|
|
// } |
|
|
|
// break |
|
|
|
|
|
|
|
case 'optionsParams': |
|
|
|
if (!content) { |
|
|
|
editData = beforeRequest |
|
|
|
} |
|
|
|
break |
|
|
|
case 'optionsResult': |
|
|
|
if (!content) { |
|
|
|
editData = afterResponse |
|
|
|
} |
|
|
|
break |
|
|
|
} |
|
|
|
drawer.content = editData |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-15 13:28:57 |
|
|
|
@ 功能: 关闭脚本预览窗，并初始化脚本预览参数 |
|
|
|
*/ |
|
|
|
const dialogCancel = () => { |
|
|
|
drawer.visible = false |
|
|
|
drawer.type = '' |
|
|
|
drawer.title = '' |
|
|
|
drawer.codeType = '' |
|
|
|
drawer.callback = '' |
|
|
|
drawer.content = '' |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-13 14:40:40 |
|
|
|
@ 功能: 表单编辑功能按钮回调事件 |
|
|
|
*/ |
|
|
|
const buttonCallbackEvent = (type: string) => {} |
|
|
|
const buttonCallbackEvent = (type: string) => { |
|
|
|
console.log("表单编辑功能按钮回调事件", type) |
|
|
|
switch (type) { |
|
|
|
case 'del': //清空 |
|
|
|
state.value.formData.list = [] |
|
|
|
store.setActiveKey('') |
|
|
|
store.setControlAttr({}) |
|
|
|
break |
|
|
|
case 'eye': //预览 |
|
|
|
store.setActiveKey('') |
|
|
|
store.setControlAttr({}) |
|
|
|
let stringPreview = objToStringify(state.value.formData) // 防止预览窗口数据修改影响 |
|
|
|
const formName = state.value.formData.form.name |
|
|
|
const reg = new RegExp(`get${formName}ControlByName`, 'g') |
|
|
|
stringPreview = stringPreview.replace( |
|
|
|
reg, |
|
|
|
`getPreview${formName}ControlByName` |
|
|
|
) |
|
|
|
state.value.formDataPreview = stringToObj(stringPreview) |
|
|
|
state.value.formDataPreview.form.name = `Preview${formName}` // 修改下表单名 |
|
|
|
// console.log("预览数据",state.value.formDataPreview); |
|
|
|
state.value.previewVisible = true |
|
|
|
break |
|
|
|
case 'json': //生成脚本预览 |
|
|
|
openAceEditDrawer({ |
|
|
|
direction: 'rtl', |
|
|
|
content: state.value.formData, |
|
|
|
title: '可编辑修改或将已生成的脚本粘贴进来' |
|
|
|
}) |
|
|
|
break |
|
|
|
case 'save': //保存 |
|
|
|
if(props.appPageKey && props.appPageKey != ""){ //存在，进行编辑操作 |
|
|
|
|
|
|
|
}else{ //不存在，进行新增操作 |
|
|
|
saveAppFormData(); |
|
|
|
} |
|
|
|
break |
|
|
|
case 'branch': //另存为新版 |
|
|
|
break |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ -195,6 +315,53 @@ const versionUpdateForm = (val:string) => { |
|
|
|
|
|
|
|
getInitData() |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-15 13:14:40 |
|
|
|
@ 功能: 关闭预览 |
|
|
|
*/ |
|
|
|
const closePreviewPage = (val:boolean) => { |
|
|
|
// console.log("关闭预览",val) |
|
|
|
state.value.previewVisible = val |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-15 13:58:21 |
|
|
|
@ 功能: 写入自建应用App表单 |
|
|
|
*/ |
|
|
|
const saveAppFormData = () => { |
|
|
|
let sendData: any = { |
|
|
|
jsondata:JSON.stringify(state.value.formData), |
|
|
|
data: objToStringify(state.value.formData), |
|
|
|
source: state.value.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|
|
|
name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|
|
|
type: 3, // 1表单 2列表 3:app表单 |
|
|
|
dict: json2string(state.value.formDict), |
|
|
|
appKey:appFormKeyVal.value, |
|
|
|
groupKey:props.groupKey |
|
|
|
} |
|
|
|
console.log("写入自建应用App表单",sendData) |
|
|
|
} |
|
|
|
/** |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-05-15 14:07:39 |
|
|
|
@ 功能: 编辑App自定义表单 |
|
|
|
*/ |
|
|
|
const editAppFormTable = () => { |
|
|
|
let sendData: any = { |
|
|
|
jsondata:JSON.stringify(state.value.formData), |
|
|
|
data: objToStringify(state.value.formData), |
|
|
|
source: state.value.formOtherData.source, // 数据源允许在表单属性设置里修改的 |
|
|
|
name: state.value.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示 |
|
|
|
type: 1, // 1表单 2列表 |
|
|
|
dict: json2string(state.value.formDict), |
|
|
|
appKey:appFormKeyVal, |
|
|
|
groupKey:props.groupKey, |
|
|
|
id:props.appPageKey.toString(), |
|
|
|
version:versionId.value.toString(), |
|
|
|
} |
|
|
|
console.log("编辑App自定义表单",sendData) |
|
|
|
} |
|
|
|
</script> |
|
|
|
<template> |
|
|
|
<el-aside class="asideBox leftBox"> |
|
|
|
@ -205,9 +372,16 @@ const versionUpdateForm = (val:string) => { |
|
|
|
</el-aside> |
|
|
|
<el-main class="mainBox rightBox"> |
|
|
|
<HeadToolsApp v-loading="state.loading" :customerformid="propsappPageKey" @click="buttonCallbackEvent" /> |
|
|
|
<div v-loading="state.loading" class="main-form"> |
|
|
|
<div v-loading="state.loading" class="main_form"> |
|
|
|
<div v-if="state.formData.list.length === 0" class="empty-tips"> |
|
|
|
从左侧拖拽来添加组件 |
|
|
|
从左侧拖拽来添加组件<br> |
|
|
|
appCont：{{ props.appCont }} <br> |
|
|
|
formKey：{{ props.formKey }} <br> |
|
|
|
appPageKey：{{ props.appPageKey }} <br> |
|
|
|
groupKey：{{ props.groupKey }} <br> |
|
|
|
formVersion：{{ props.formVersion }} <br> |
|
|
|
formconfigcont：{{ props.formconfigcont }} <br> |
|
|
|
state：{{ props.state }} <br> |
|
|
|
</div> |
|
|
|
<FormDesign |
|
|
|
:type="5" |
|
|
|
@ -228,6 +402,16 @@ const versionUpdateForm = (val:string) => { |
|
|
|
@open-dialog="openAceEditDrawer" |
|
|
|
/> |
|
|
|
</el-aside> |
|
|
|
<ace-drawer |
|
|
|
v-model="drawer.visible" |
|
|
|
:title="drawer.title" |
|
|
|
:direction="drawer.direction" |
|
|
|
:content="drawer.content" |
|
|
|
:code-type="drawer.codeType" |
|
|
|
@before-close="dialogCancel" |
|
|
|
@confirm="dialogConfirm" |
|
|
|
/> |
|
|
|
<PreviewPage v-model:state="state" @clickClose="closePreviewPage" /> |
|
|
|
</template> |
|
|
|
<style lang='scss' scoped> |
|
|
|
.asideBox{ |
|
|
|
@ -250,4 +434,22 @@ const versionUpdateForm = (val:string) => { |
|
|
|
.scr_form_box{ |
|
|
|
height: calc(100vh - 80px); |
|
|
|
} |
|
|
|
.main_form { |
|
|
|
background: #fff; |
|
|
|
border: 1px dashed #999; |
|
|
|
margin: 10px; |
|
|
|
height: calc(100vh - 105px); |
|
|
|
overflow-y: auto; |
|
|
|
overflow-x: hidden; |
|
|
|
position: relative; |
|
|
|
} |
|
|
|
.main_form .empty-tips { |
|
|
|
text-align: center; |
|
|
|
width: 100%; |
|
|
|
font-size: 20px; |
|
|
|
color: #ccc; |
|
|
|
position: absolute; |
|
|
|
left: 0; |
|
|
|
top: 100px; |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
