自定义表单版本管理

src/api/DesignForm/index.ts

@@ -22,7 +22,7 @@ export const getRequest = (apiKey: string, data?: any, options: any = {}) => {
     options
   )
   // github演示时使用下面地址
-  if (window.location.host.indexOf('github') !== -1) {
+  if (window.location.host.indexOf('github') === -1) {
     let id = ''
     if (url.indexOf('/id') !== -1 && data.id) {
       id = data.id + ''
@@ -51,7 +51,7 @@ export const getRequest = (apiKey: string, data?: any, options: any = {}) => {
     }
     obj = Object.assign(
       {
-        url: `./mock/${url}${id}.json`,
+        url: `./docs/mock/${url}${id}.json`,
         method: 'GET',
         params: data
       },

src/api/DesignForm/requestapi.ts

@@ -7,7 +7,12 @@ import {
 	customerFormConfig,
 	getContForId,
 	editFormStatus,
-	setupCustomerFormCont
+	setupCustomerFormCont,
+	customerFormLogo,
+	customerFormVersionCont,
+	editFormInfo,
+	customerFromCont,
+	enableVersionId
 } from './type';
 //自定义表单列表
 export function getCustomerFormList(queryParams: SearchForm): AxiosPromise<CustomerFormPageResult> {
@@ -57,3 +62,36 @@ export function saveSetupCont(data: setupCustomerFormCont) {
 		data: data
 	});
 }
+
+//获取自定义表单版本列表
+export function haveCustomerFormVersion(data: customerFormLogo):AxiosPromise<customerFormVersionCont[]> {
+	return request({
+		url: '/systemapi/customer_form/have_customer_form_version',
+		method: 'post',
+		data: data
+	});
+}
+//编辑自定义表单内容
+export function editCustomerFormInfo(data: editFormInfo) {
+	return request({
+		url: '/systemapi/customer_form/edit_customer_form_info',
+		method: 'post',
+		data: data
+	});
+}
+//另存为新版
+export function saveAsNewVersion(data: customerFromCont) {
+	return request({
+		url: '/systemapi/customer_form/save_as_new_version',
+		method: 'post',
+		data: data
+	});
+}
+//启用版本
+export function enableVersion(data: enableVersionId) {
+	return request({
+		url: '/systemapi/customer_form/enable_version',
+		method: 'post',
+		data: data
+	});
+}

src/api/DesignForm/type.ts

@@ -40,3 +40,41 @@ export interface setupCustomerFormCont{
 	states:number;
 	status:boolean;
 }
+//自定义表单标识符
+export interface customerFormLogo{
+	id:string
+}
+
+//自定义表单版本内容
+export interface customerFormVersionCont{
+	id:number;
+	tablekey:string;
+	version:number;
+	status:number;
+	mastesform:string;
+	mastesformjson:string;
+	creater:number;
+	time:number;
+	editTime:number;
+	table_structure:string;
+	dict:string;
+}
+//编辑自定义表单内容
+export interface editFormInfo extends customerFromCont{
+	id:string;
+	version:string;
+	
+}
+export interface customerFromCont{
+	type:number;
+	name:string;
+	source:string;
+	dict:string;
+	data:string;
+	jsondata:string;
+	classify:number;
+}
+//启用新版本
+export interface enableVersionId{
+	id:string;
+}

src/components/DesignForm/dragControl.vue

@@ -4,7 +4,7 @@
 @ 备注: 快速选择表单字段
 -->
 <script lang='ts' setup>
-
+import type { TabsPaneContext } from 'element-plus'
 
 import { FormData,FormList } from '@/api/DesignForm/types'
 import { stringToObj } from '@/utils/DesignForm/form'
@@ -13,9 +13,16 @@ import controlListData from '@/components/DesignForm/assembly'
 import { getRequest } from '@/api/DesignForm'
 import Draggable from 'vuedraggable-es'
 import UseTemplate from './template.vue'
+
+import { customerFormVersionCont } from '@/api/DesignForm/type'
+
 const props = withDefaults(
     defineProps<{
-      formId?: number | string
+      // eslint-disable-next-line vue/require-default-prop
+      formId?: number | string,
+	  // eslint-disable-next-line vue/require-default-prop
+	  versioncont?:customerFormVersionCont[],
+	  versionid:number | string,
     }>(),
     {}
 )
@@ -37,7 +44,7 @@ const formDataList = ref<any[]>([])
 const isSearch = computed(() => {
     return designType === 'search'
 })
-const emits = defineEmits(["clickCheck","click"]);
+const emits = defineEmits(["clickCheck","click","update:versionid","editversionstaus"]);
 // 筛选设计时左则勾选已有表单字段
 const selectChange = (val: any,obj: FormList) => {
     if (val) {
@@ -87,6 +94,7 @@ watch(
       }
     }
 )
+
 // 加载当前列表所属的表单，从表单中提取可用于搜索的字段
 const getFormField = (formId: number) => {
     getRequest('designById', { id: formId }).then((res: any) => {
@@ -109,6 +117,32 @@ const forEachGetData = (data: FormList[]) => {
 		}
     })
 }
+
+//当前版本
+const activeName = ref<any>(6)
+//切换版本
+const handleTabsClick = (val:any)  =>{
+	console.log("切换版本",val)
+	emits("update:versionid",val)
+	
+	
+}
+watch(()=>props.versioncont,(val: any)=>{
+	console.log("versioncont---版本-->",val)
+	if(val.length>0){
+		val.forEach((item:any,index:number) => {
+			if(item.status == 1){
+				activeName.value = item.id
+			}
+		});
+	}
+
+	console.log("选定版本------->",activeName.value)
+})
+//编辑状态
+const setupStatus = (val:any) =>{
+	emits("editversionstaus",val.id)
+}
 </script>
 <template>
 	<div class="components-list">
@@ -152,15 +186,26 @@ const forEachGetData = (data: FormList[]) => {
 					</li>
 				</template>
 			</draggable>
+			
 		</div>
 		<use-template
 			v-if="!isSearch"
 			ref="useTemplateEl"
 			@click="useTemplateSelect"
 		/>
+		<div>版本</div>
+		<el-tabs  v-model="activeName" :stretch="true" class="demo-tabs"  @tab-change="handleTabsClick" >
+			<el-tab-pane v-for="(item,index) in props.versioncont" :key="index" :label="'V'+item.version" :name="item.id" class="tab_pane_body">
+				<el-button v-if="item.status!=1" type="primary" round @click="setupStatus(item)">启用</el-button>
+				<el-button v-if="item.status==1" type="warning" round @click="setupStatus(item)">使用中</el-button>
+			</el-tab-pane>
+			
+		</el-tabs>
 		
 	</div>
 </template>
 <style  lang='scss' scoped>
-
+.tab_pane_body{
+	text-align: center;
+}
 </style>

src/components/DesignForm/formControlAttr.vue

@@ -17,6 +17,7 @@ const props = withDefaults(			//接收父级参数
       formData: any
       formConfig: any
       formOtherData: any
+	  customerformid: number | string,
     }>(),
     {
       formConfig: () => {
@@ -748,6 +749,7 @@ watch(
       }
     }
 )
+const fileSignAry = reactive<any>([])
 const controlChange = (obj: any, val: any) => {
 	console.log("字段编辑----》",obj,val,controlData.value)
     // select多选属性，
@@ -796,6 +798,8 @@ const controlChange = (obj: any, val: any) => {
 			break
 		case 'labelNameVal':
 			controlData.value.name = val
+			fileSignAry.push(val)
+			console.log("字段编辑--fileSignAry--》",fileSignAry)
 			break
     }
     if (obj.path) {
@@ -1093,6 +1097,14 @@ const eventClick = (type: string, tooltip?: string) => {
 }
 getDataSource()
 defineExpose({ getFormFieldBySource })
+//判断输入框是否可写
+const isNotWrite = (val:any) =>{
+	console.log("判断输入框是否可写--->",val)
+	if(val.key === "name" && props.customerformid != ""){
+		return true
+	}
+	return false
+}
 </script>
 <template>
 	<div  class="sidebar-tools">
@@ -1461,6 +1473,7 @@ defineExpose({ getFormFieldBySource })
 							v-else
 							v-model="item.value"
 							:placeholder="item.placeholder"
+							:disabled="isNotWrite(item)"
 							@input="formAttrChange(item)"
 						/>
 					</el-form-item>

src/components/DesignForm/public/headTools.vue

@@ -10,6 +10,7 @@ const props = withDefaults(
 	defineProps<{
       showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
       hideKey?: string[] // 设置了showKey时，hideKey无效
+	  customerformid?: number | string,
     }>(),
 	{
 		showKey: () => {
@@ -33,6 +34,7 @@ const btnList = computed(() => {
 		{ icon: 'json', label: '生成脚本预览', key: 3 },
 		// { icon: 'vue', label: '导出vue文件', key: 4 },
 		{ icon: 'save', label: '保存', key: 5 },
+		{ icon: 'branch', label: '另存为新版', key: 4 },
 		{ icon: 'close', label: '关闭', key: 6 }
     ]
 	if (props.showKey?.length) {
@@ -49,22 +51,36 @@ const btnList = computed(() => {
       	return list // 否则显示全部
     }
 })
+
+watch(()=>props.customerformid,(val: any)=>{
+	console.log("选定版本----表单--->",val)
+})
 </script>
 <template>
 	<div class="main-tools">
 		<slot></slot>
-		<el-button
-			link
+		<span v-for="item in btnList">
+			<el-button
+				link
+				v-if="(item.icon != 'branch') || (item.icon == 'branch' && (props.customerformid!=''))"
+				@click="btnClick(item.icon)"
+				:key="item.icon"
+				:type="item.key==6?'danger':item.key==5?'success':item.key==4?'warning':'primary'"
+			>
+				<i :class="['icon-' + item.icon]" ></i>{{ item.label }}
+			</el-button>
+		</span>
 		
-			@click="btnClick(item.icon)"
-			v-for="item in btnList"
-			:key="item.icon"
-			:type="item.key==6?'danger':item.key==5?'success':'primary'"
-		>
-			<i :class="['icon-' + item.icon]"></i>{{ item.label }}
-		</el-button>
 	</div>
 </template>
 <style  lang='scss' scoped>
-	
+.main-head-tools{
+	line-height: 26px;
+    border-bottom: 2px solid #e4e7ed;
+    margin-right: 10px;
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+}
 </style>

src/components/DesignForm/public/headToolsNew.vue

@@ -0,0 +1,122 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-09-08 08:39:33
+@ 备注: 画表单头部
+-->
+<script lang='ts' setup>
+import { computed } from 'vue'
+const props = withDefaults(
+	defineProps<{
+      showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
+      hideKey?: string[] // 设置了showKey时，hideKey无效
+    }>(),
+	{
+		showKey: () => {
+			return []
+		},
+		hideKey: () => {
+			return []
+		}
+    }
+);
+const emits = defineEmits<{(e: 'click', value: string): void}>();
+const btnClick = (type: string) => {
+	emits('click', type)
+}
+const btnList = computed(() => {
+	const list = [
+		{ icon: 'del', label: '清空', key: 1 },
+		{ icon: 'eye', label: '预览', key: 2 },
+		{ icon: 'json', label: '生成脚本预览', key: 3 },
+		// { icon: 'vue', label: '导出vue文件', key: 4 },
+		{ icon: 'save', label: '保存', key: 5 },
+		{ icon: 'save', label: '另存为', key: 5 },
+		{ icon: 'close', label: '关闭', key: 6 }
+    ]
+	if (props.showKey?.length) {
+		// 按照指定的key显示
+		return list.filter((item: any) => {
+			return props.showKey.includes(item.key)
+		})
+    } else if (props.hideKey?.length) {
+		// 按照指定的key隐藏
+		return list.filter((item: any) => {
+				return !props.hideKey.includes(item.key)
+		})
+    } else {
+      	return list // 否则显示全部
+    }
+})
+//当前版本
+const activeName = ref<string>("1")
+//切换版本
+const handleTabsClick = () =>{
+
+}
+</script>
+<template>
+	<div class="main-head-tools">
+		<div class="main-head-version">
+			<el-link icon="Share" :underline="false">版本</el-link>
+			<el-tabs
+				v-model="activeName"
+				type="card"
+				class="tabs_version"
+				@tab-click="handleTabsClick"
+			>
+				<el-tab-pane label="V1" name="1"></el-tab-pane>
+				<el-tab-pane label="V2" name="2"></el-tab-pane>
+				<el-tab-pane label="V3" name="3"></el-tab-pane>
+				<el-tab-pane label="V3" name="4"></el-tab-pane>
+				<el-tab-pane label="V3" name="5"></el-tab-pane>
+				<el-tab-pane label="V3" name="6"></el-tab-pane>
+				<el-tab-pane label="V3" name="7"></el-tab-pane>
+				<el-tab-pane label="V3" name="8"></el-tab-pane>
+				<el-tab-pane label="V3" name="9"></el-tab-pane>
+				<el-tab-pane label="V3" name="10"></el-tab-pane>
+				<el-tab-pane label="V3" name="11"></el-tab-pane>
+				<el-tab-pane label="V3" name="12"></el-tab-pane>
+				<el-tab-pane label="V3" name="13"></el-tab-pane>
+				<el-tab-pane label="V3" name="14"></el-tab-pane>
+				<el-tab-pane label="V3" name="15"></el-tab-pane>
+				<el-tab-pane label="V3" name="16"></el-tab-pane>
+				<el-tab-pane label="V3" name="17"></el-tab-pane>
+				<el-tab-pane label="V3" name="18"></el-tab-pane>
+			</el-tabs>
+		</div>
+		<div>
+			<el-button
+				link
+				@click="btnClick(item.icon)"
+				v-for="item in btnList"
+				:key="item.icon"
+				:type="item.key==6?'danger':item.key==5?'success':'primary'"
+			>
+				<i :class="['icon-' + item.icon]"></i>{{ item.label }}
+			</el-button>
+		</div>
+	</div>
+</template>
+<style  lang='scss' scoped>
+.main-head-tools{
+	line-height: 26px;
+    border-bottom: 2px solid #e4e7ed;
+    margin-right: 10px;
+    padding: 8px 0;
+    display: flex;
+    align-items: center;
+    justify-content:space-between;
+}
+.main-head-version{
+	display: flex;
+    align-items: center;
+    justify-content:space-between;
+	overflow: hidden;
+	
+}
+.tabs_version{
+	max-width: 340px;
+	margin-top: -5px;
+	height: 30px;
+}
+</style>

src/views/sysworkflow/codepage/createform.vue

@@ -23,6 +23,7 @@ import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils'
 //引入页面
 import DragControl from '@/components/DesignForm/dragControl.vue';
 import HeadTools from '@/components/DesignForm/public/headTools.vue';
+// import HeadTools from '@/components/DesignForm/public/headToolsNew.vue';
 import FormDesign from '@/components/DesignForm/public/form/form.vue'
 import FormControlAttr from '@/components/DesignForm/formControlAttr.vue';
 import VueFile from '@/components/DesignForm/vueFile.vue'
@@ -32,10 +33,12 @@ import { ref, reactive, provide, onMounted } from 'vue'
 import { ElMessage } from 'element-plus'
 import { useLayoutStore } from '@/store/DesignForm/layout'
 import { FormData,formStruct,DrawerStruct } from '@/api/DesignForm/types'
-
-import { saveProductionForm,getOneProductionForm } from '@/api/DesignForm/requestapi'
+import { customerFormVersionCont } from '@/api/DesignForm/type'
+import { saveProductionForm,getOneProductionForm,haveCustomerFormVersion,editCustomerFormInfo,saveAsNewVersion,enableVersion } from '@/api/DesignForm/requestapi'
 
 const isSave = ref(false)
+const versionCont = ref<customerFormVersionCont[]>([])
+const versionId = ref<string>("")
 
 const props = defineProps({
   draweropenclose:{
@@ -126,7 +129,7 @@ const getInitData = () => {
 						state.formOtherData.formName = result.name
 
 						state.formOtherData.formName = result.name
-						state.formData.form.name = result.tablename
+						state.formData.form.name = result.tablekey
 						state.formData.form.formName = result.name
 						if (result.source && state.designType !== 'search') {
 							// 加载属性侧边栏的字段标识，搜索时不需要请求
@@ -138,6 +141,18 @@ const getInitData = () => {
 				})
 				.finally(()=>{
 					isSave.value = true
+					haveCustomerFormVersion({id:state.formData.form.name})
+						.then(({data})=>{
+							console.log("加载异常-------------->",data)
+							versionCont.value = data
+							if(data.length > 0){
+								data.forEach((item:any) => {
+									if(item.status == 1){
+										versionId.value = item.id.toString()
+									}
+								});
+							}
+						})
 				})
 				.catch((res: any) => {
           // console.log(res)
@@ -203,8 +218,16 @@ const getInitData = () => {
         break
       case 'save':
         // saveData();
-				saveDataNew();
+				if(props.formid != ""){
+					editSaveData();
+				}else{
+					saveDataNew();
+				}
+				
         break
+			case 'branch':
+				saveOtherData();
+				break
       case 'vue':
         vueFileEl.value.open(state.formData)
 				emits("update:draweropenclose", false);
@@ -286,6 +309,90 @@ const getInitData = () => {
       //ElMessage.error(res.message)
     }
   }
+//另存为
+const saveOtherData = () =>{
+	isSave.value = true
+	let params: any = {
+		jsondata:JSON.stringify(state.formData),
+    data: objToStringify(state.formData),
+    source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的
+    name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
+    type: 1, // 1表单 2列表
+    dict: json2string(state.formDict)
+  }
+	state.loading = true
+	saveAsNewVersion(params)
+		.then((res: any) => {
+			console.log("数据保存", res)
+			if(res.code == 0){
+				ElMessage({
+					message: res.message || '保存成功！',
+					type: 'success'
+				})
+				emits("handlequery");
+				emits("update:draweropenclose", false);
+				// 清空右侧栏信息
+				store.setActiveKey('')
+				store.setControlAttr({})
+			}else{
+				ElMessage({
+					message: res.msg || '保存失败！',
+					type: 'error'
+				})
+			}
+      
+		})
+		.finally(() => {
+			state.loading=false;
+		})
+		.catch((res: any) => {
+      ElMessage.error(res.message || '保存异常')
+      state.loading = false
+    })
+}
+//编辑
+const editSaveData = () =>{
+	// console.log("保存异常---------->",versionId.value)
+	let params: any = {
+		jsondata:JSON.stringify(state.formData),
+    data: objToStringify(state.formData),
+    source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的
+    name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
+    type: 1, // 1表单 2列表
+    dict: json2string(state.formDict),
+		id:props.formid.toString(),
+		version:versionId.value.toString(),
+  }
+	state.loading = true
+	editCustomerFormInfo(params)
+		.then((res: any) => {
+
+			if(res.code == 0){
+				ElMessage({
+					message: res.message || '保存成功！',
+					type: 'success'
+				})
+				emits("handlequery");
+				emits("update:draweropenclose", false);
+				// 清空右侧栏信息
+				store.setActiveKey('')
+				store.setControlAttr({})
+			}else{
+				ElMessage({
+					message: res.msg || '保存失败！',
+					type: 'error'
+				})
+			}
+
+		})
+		.finally(() => {
+			state.loading=false;
+		})
+		.catch((res: any) => {
+      ElMessage.error(res.message || '保存异常')
+      state.loading = false
+    })
+}
 //讲数据保存到服务端(新版)
 const saveDataNew = () => {
 	isSave.value = true
@@ -542,18 +649,61 @@ watch(() => props.draweropenclose,() => {
 	}
 	
 });
+//监听版本变化
+watch(() => versionId.value,()=>{
+	console.log("经停版本变化----》",versionId.value,versionCont.value)
+
+	if(versionCont.value.length > 0){
+		versionCont.value.forEach(item=>{
+			let versionIdStr = item.id.toString()
+			if(versionIdStr == versionId.value){
+				console.log("经停版本变化--1--》",item)
+				if (item.mastesform) {
+					state.formData = stringToObj(item.mastesform)
+				}
+				state.formDict = string2json(item.dict)
+			}
+		})
+	}
 
+	// if (result.mastesform) {
+	// 	state.formData = stringToObj(result.mastesform)
+	// }
+	// state.formDict = string2json(result.dict)
+})
+//编辑版本状态
+const editversionstaus = (id:string) =>{
+	console.log("编辑版本状态--1--》",id)
+	enableVersion({id:id.toString()})
+		.then(() =>{
+			haveCustomerFormVersion({id:state.formData.form.name})
+						.then(({data})=>{
+							console.log("加载异常-------------->",data)
+							versionCont.value = data
+							if(data.length > 0){
+								data.forEach((item:any) => {
+									if(item.status == 1){
+										versionId.value = item.id.toString()
+									}
+								});
+							}
+						})
+		})
+}
 </script>
 <template>
 	<div class="design-container">
 		<DragControl
+			v-model:versionid="versionId"
 			:formid="state.formOtherData.source"
+			:versioncont="versionCont"
       @click-check="searchCheckField"
       @click="selectTemplate"
+			@editversionstaus="editversionstaus"
 		/>
 		<div class="main-body">
 			
-			<HeadTools @click="headToolClick" />
+			<HeadTools :customerformid="props.formid" @click="headToolClick" />
 			<div v-loading="state.loading" class="main-form">
 				<div v-if="state.formData.list.length === 0" class="empty-tips">
 					从左侧拖拽来添加组件
@@ -573,6 +723,7 @@ watch(() => props.draweropenclose,() => {
 			v-model:formOtherData="state.formOtherData"
       :form-data="state.formData.form"
       :form-config="state.formData.config"
+			:customerformid="props.formid"
       @open-dialog="openAceEditDrawer"
     />
 		<ace-drawer

src/views/sysworkflow/codepage/index.vue

@@ -156,22 +156,22 @@ function editCustomerForm(cont:customerFormCont){
     </div>
 		<el-card shadow="never">
 			<template #header>
-        <el-button type="success" @click="openDialog()"><i-ep-plus />新增表单</el-button>
-        <el-button
-          type="danger"
-          :disabled="ids.length === 0"
-          @click="handleDelete()"
-        >
+        		<el-button type="success" @click="openDialog()"><i-ep-plus />新增表单</el-button>
+				<el-button
+				type="danger"
+				:disabled="ids.length === 0"
+				@click="handleDelete()"
+				>
 					<i-ep-delete />删除表单
 				</el-button>
-      </template>
+      		</template>
 			<el-table
-        v-loading="loading"
-        highlight-current-row
-				:data="contList"
-        border
-				@selection-change="handleSelectionChange"
-      >
+				v-loading="loading"
+				highlight-current-row
+						:data="contList"
+				border
+						@selection-change="handleSelectionChange"
+			>
 				<el-table-column fixed type="selection" width="55" align="center" />
 				<el-table-column fixed label="表单名称" prop="name"  />
 				<el-table-column label="分类" align="center" width="150">
@@ -181,60 +181,68 @@ function editCustomerForm(cont:customerFormCont){
 					</template>
 				</el-table-column>
 				<el-table-column label="状态" align="center" width="100">
-          <template #default="scope">
-            <el-tag v-if="scope.row.states === 1" type="success">启用</el-tag>
-            <el-tag v-else type="info">禁用</el-tag>
-          </template>
-        </el-table-column>
+					<template #default="scope">
+						<el-tag v-if="scope.row.states === 1" type="success">启用</el-tag>
+						<el-tag v-else type="info">禁用</el-tag>
+					</template>
+        		</el-table-column>
 				<el-table-column label="创建人" prop="creatername" width="140" />
 				<el-table-column label="创建时间" prop="creatertime"  /> 
-				<el-table-column fixed="right" label="操作" align="center" width="280">
-          <template #default="scope">
-            <el-button
-              type="success"
-              link
-              size="small"
-              @click.stop="setupCustomerForm(scope.row)"
-              ><i-ep-Setting />设置</el-button
-            >
+				<el-table-column fixed="right" label="操作" align="center" width="350">
+					<template #default="scope">
+						<!-- <el-button
+						type="success"
+						link
+						size="small"
+						@click.stop="setupCustomerForm(scope.row)"
+						><i-ep-Share />版本</el-button> -->
 						<el-button
-              type="warning"
-              link
-              size="small"
-              @click.stop="setupCustomerForm(scope.row)"
-              ><i-ep-MessageBox />数据结构</el-button
-            >
-            <el-button
-							
-              type="primary"
-              link
-              size="small"
-              @click.stop="editCustomerForm(scope.row)"
-              ><i-ep-edit />编辑</el-button
-            >
-            <el-button
-							
-              type="danger"
-              link
-              size="small"
-              @click.stop="editCustomerFormState(scope.row)"
-              ><i-ep-delete />删除</el-button
-            >
-          </template>
-        </el-table-column>
+							type="success"
+							link
+							size="small"
+							@click.stop="setupCustomerForm(scope.row)"
+						>
+							<i-ep-Setting />设置
+						</el-button>
+						<el-button
+							type="warning"
+							link
+							size="small"
+							@click.stop="setupCustomerForm(scope.row)"
+						>
+							<i-ep-MessageBox />数据结构
+						</el-button>
+						<el-button			
+							type="primary"
+							link
+							size="small"
+							@click.stop="editCustomerForm(scope.row)"
+						>
+							<i-ep-edit />编辑
+						</el-button>
+						<el-button			
+							type="danger"
+							link
+							size="small"
+							@click.stop="editCustomerFormState(scope.row)"
+						>
+							<i-ep-delete />删除
+						</el-button>
+					</template>
+        		</el-table-column>
 			</el-table>
 			<pagination
-        v-if="total > 0"
-        v-model:total="total"
-        v-model:page="queryParams.page"
-        v-model:limit="queryParams.pagesize"
-        @pagination="handleQuery"
-      />
+				v-if="total > 0"
+				v-model:total="total"
+				v-model:page="queryParams.page"
+				v-model:limit="queryParams.pagesize"
+				@pagination="handleQuery"
+			/>
 		</el-card>
 	</div>
 	<el-drawer  v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="drawerWith" class="drawerClass">
-    <CreateForm v-model:draweropenclose="drawerOpenOrClose" :formid="formId" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
-  </el-drawer>
+    	<CreateForm v-model:draweropenclose="drawerOpenOrClose" :formid="formId" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
+  	</el-drawer>
 	<SetupConfig v-model:show="show" :editid="editid" @handle_query="handleQuery" />
 </template>
 <style  lang='scss' scoped>

src/views/sysworkflow/codepage/page.vue

@@ -4,6 +4,19 @@
 @ 备注: 
 -->
 <script lang='ts' setup>
+import { ref, reactive, onMounted, computed, nextTick } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'
+import {
+    json2string,
+    objToStringify,
+    string2json,
+    stringToObj
+} from '@/utils/DesignForm/form'
+import { useLayoutStore } from '@/store/DesignForm/layout'
+import { getRequest } from '@/api/DesignForm'
+
+
 import '@/assets/scss/element-var.scss'
 import '@/assets/scss/index.scss'
 import '@/assets/iconfont/iconfont.css'
@@ -16,107 +29,83 @@ import {
     constFormProps,
     appendOrRemoveStyle
 } from '@/api/DesignForm/utils'
-const formData  = {
-  list: [
-  {
-    type: "radio",
-    control:
-    {
-      modelValue: ""
-    },
-    options: [],
-    config:
-    {
-      optionsType: 0
-    },
-    name: "radio1693383929154",
-    item:
-    {
-      label: "单选框组"
-    }
-  },
-  {
-    type: "select",
-    control:
-    {
-      modelValue: "",
-      appendToBody: true
-    },
-    options: [],
-    config:
-    {
-      optionsType: 0
-    },
-    name: "select1693383931223",
-    item:
-    {
-      label: "下拉选择框"
-    }
-  },
-  {
-    type: "inputNumber",
-    control:
-    {
-      modelValue: 0
-    },
-    config:
-    {},
-    name: "inputNumber1693383932808",
-    item:
-    {
-      label: "计数器"
-    }
-  },
-  {
-    type: "button",
-    control:
-    {
-      label: "保存",
-      type: "success",
-      key: "submit"
-    },
-    config:
-    {
-      span: 6,
-      textAlign: "center"
-    }
-  },
-  {
-    type: "button",
-    control:
-    {
-      label: "取消",
-      type: "danger",
-      key: "reset"
+
+const layoutStore = useLayoutStore()
+const router = useRouter()
+const formEl = ref()
+const state = reactive({
+    formData: {
+      list: [],
+      form: {},
+      config: {}
     },
-    config:
-    {
-      span: 6,
-      textAlign: "center"
+    dict: {},
+    formId: 25,
+    id: 1,
+    loading: true
+})
+const formType = computed(() => {
+    // 带有参数id为编辑状态
+    if (true) {
+      return 2
+    } else {
+      return 1
     }
-  }],
-  form:
-  {
-    size: "default",
-    name: "customer_form_157524328231997440",
-    formName: "未命名表单_157524328231997440"
-  },
-  config:
-  {}
+})
+
+const getFormData = () => {
+	if (!state.formId) {
+    ElMessage.error('非法操作.')
+    return false
+  }
+	const params = {
+    id: state.formId
+  }
+	getRequest('designById', params)
+		.then((res: any) => {
+			const result = res.data
+			state.formData = stringToObj(result.data)
+          state.dict = string2json(result.dict)
+			formEl.value.getData({ formId: state.formId, id: 1})
+			console.log("res----------->", res.data)
+			nextTick(() => {
+        state.loading = false
+      })
+		})
+		.catch((res: any) => {
+        state.loading = false
+        ElMessage.error(res.message || '非法操作..')
+    })
 }
-const formProps = computed(() => {
-    return {
-      type: 3
-    }
-  })
-provide(constFormProps, formProps)
+
+const beforeSubmit = (params: any) => {
+    params.formId = state.formId
+    params.id = 1
+    return params
+  }
+const afterSubmit = (type: string) => {
+  if (type === 'success') {
+      router.go(-1)
+  }
+}
+onMounted(() => {
+  getFormData()
+})
 </script>
 <template>
-		<el-card shadow="never">
-			<ak-form :formData="formData"></ak-form>
-		</el-card>
-
-	
+	<el-card  v-loading="state.loading" shadow="never" style="min-height: 300px">
+		<ak-form
+      ref="formEl"
+      :formData="state.formData"
+      :type="formType"
+      :dict="state.dict"
+      requestUrl="getFormContent"
+      addUrl="saveFormContent"
+      editUrl="editFormContent"
+      :beforeSubmit="beforeSubmit"
+      :afterSubmit="afterSubmit"
+    />
+	</el-card>
 </template>
 <style  lang='scss' scoped>