From 6e6edd9ad714423dc50722b291969c4efbfb812c Mon Sep 17 00:00:00 2001
From: herenshan112 <herenshan112@163.com>
Date: Wed, 30 Aug 2023 11:50:55 +0800
Subject: [PATCH] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E8=A1=A8=E5=8D=95?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                                    |    4 +-
 src/api/DesignForm/requestapi.ts              |   31 +
 src/api/DesignForm/type.ts                    |   23 +
 src/api/DesignForm/types.ts                   |    3 +-
 src/components/DesignForm/formControlAttr.vue | 2117 ++++++++---------
 .../DesignForm/formControlAttres.vue          | 1576 ++++++++++++
 .../DesignForm/public/form/form.vue           |   16 +-
 .../DesignForm/public/form/formGroup.vue      |    2 +-
 .../DesignForm/public/headTools.vue           |    8 +-
 src/utils/DesignForm/form.ts                  |    1 +
 src/views/sysworkflow/codepage/createform.vue |  562 +++++
 src/views/sysworkflow/codepage/index.vue      |  576 ++---
 12 files changed, 3442 insertions(+), 1477 deletions(-)
 create mode 100644 src/api/DesignForm/requestapi.ts
 create mode 100644 src/api/DesignForm/type.ts
 create mode 100644 src/components/DesignForm/formControlAttres.vue
 create mode 100644 src/views/sysworkflow/codepage/createform.vue

diff --git a/index.html b/index.html
index 5f71e6f2a..10995604d 100644
--- a/index.html
+++ b/index.html
@@ -15,8 +15,8 @@
   <script type="module" src="/src/main.ts"></script>
   <script type="module" src="/docs/static/plugins/ace/ace.js"></script>
   <script type="module" src="/docs/static/plugins/ace/ext-language_tools.js"></script>
-  <script src="/docs/static/plugins/tinymce/tinymce.min.js?v=6.1.2"></script>
-  <script src="/docs/static/plugins/echarts.min.js"></script>
+  <script type="module" src="/docs/static/plugins/tinymce/tinymce.min.js?v=6.1.2"></script>
+  <script type="module" src="/docs/static/plugins/echarts.min.js"></script>
 </body>
 
 </html>
diff --git a/src/api/DesignForm/requestapi.ts b/src/api/DesignForm/requestapi.ts
new file mode 100644
index 000000000..865626e7e
--- /dev/null
+++ b/src/api/DesignForm/requestapi.ts
@@ -0,0 +1,31 @@
+import request from '@/utils/request';
+import { AxiosPromise } from 'axios';
+import {
+	customerFormCont,
+	CustomerFormPageResult,
+	SearchForm,
+	customerFormConfig
+} from './type';
+//自定义表单列表
+export function getCustomerFormList(queryParams: SearchForm): AxiosPromise<CustomerFormPageResult> {
+	return request({
+		url: '/systemapi/customer_form/customer_form_list',
+		method: 'post',
+		params: queryParams
+	});
+}
+//生成表单基本信息
+export function getProductionMarkForm(): AxiosPromise<customerFormConfig> {
+	return request({
+		url: '/systemapi/customer_form/production_mark_form',
+		method: 'post',
+	});
+}
+
+export function saveProductionForm(data: any) {
+	return request({
+		url: '/systemapi/customer_form/save_customer_form',
+		method: 'post',
+		data: data
+	});
+}
diff --git a/src/api/DesignForm/type.ts b/src/api/DesignForm/type.ts
new file mode 100644
index 000000000..3ae8f1152
--- /dev/null
+++ b/src/api/DesignForm/type.ts
@@ -0,0 +1,23 @@
+//搜索表单
+export interface SearchForm extends PageQuery{
+	keywords?: string;
+	classify?:number;
+}
+//自定义表单列表内容
+export interface customerFormCont{
+	id:string;
+	name:string;
+	tablename:string;
+	states:number;
+	classify:number;
+	creatername:string;
+	creatertime:string;
+}
+
+export type CustomerFormPageResult = PageResult<customerFormCont[]>;
+
+//初始化表单基本信息
+export interface customerFormConfig{
+	formname:string;
+	formlogo:string;
+}
diff --git a/src/api/DesignForm/types.ts b/src/api/DesignForm/types.ts
index c48a1de23..ecdbc2c9e 100644
--- a/src/api/DesignForm/types.ts
+++ b/src/api/DesignForm/types.ts
@@ -92,7 +92,8 @@ export interface formData{
 	list: any[];
     form: {
         size: any;
-		name:any
+		name:any,
+		formName:any
     };
     config: any;
 	events?:any
diff --git a/src/components/DesignForm/formControlAttr.vue b/src/components/DesignForm/formControlAttr.vue
index 5a6667042..448ed0603 100644
--- a/src/components/DesignForm/formControlAttr.vue
+++ b/src/components/DesignForm/formControlAttr.vue
@@ -1,7 +1,7 @@
 <!--
 @ 作者: 秦东
-@ 时间: 2023-07-17 11:51:07
-@ 备注: 右侧属性
+@ 时间: 2023-08-28 08:31:58
+@ 备注: 
 -->
 <script lang='ts' setup>
 import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
@@ -9,13 +9,10 @@ import { getRequest } from '@/api/DesignForm'
 import { useDesignFormStore } from '@/store/DesignForm/designForm'
 import validate from './validate'
 import { ElMessage } from 'element-plus'
-import { 
-	formatNumber
-} from '@/api/DesignForm/utils'
-
+import { formatNumber } from '@/api/DesignForm/utils'
 import { PublicAtrr } from '@/api/DesignForm/types'
 
-const props = withDefaults(
+const props = withDefaults(			//接收父级参数
     defineProps<{
       formData: any
       formConfig: any
@@ -31,717 +28,717 @@ const props = withDefaults(
       }
     }
 )
+//注册自定义事件
 const emits = defineEmits<{
     (e: 'openDialog', data: any): void
     (e: 'update:formOtherData', data: any): void
     //(e: 'update:formData', data: any): void
     //(e: 'update:formConfig', data: any): void
 }>()
-// eslint-disable-next-line vue/no-dupe-keys
 const { formConfig, formData } = toRefs(props)
 const store = useDesignFormStore() as any
-//const route = useRoute()
 const controlData = computed(() => {
     return store.controlAttr
 })
 const dataSourceOption = ref([])
+const designType = inject('formDesignType')
+const state = reactive({
+    dataSourceList: [],
+    customRulesList: [
+		...validate,
+		{
+			type: 'rules',
+			label: '自定义正则'
+		},
+		{
+			type: 'methods',
+			label: '自定义方法'
+		}
+    ], // 自定义校验规则
+    isSearch: designType === 'search',
+    tooltip: {
+		css: '当前表单应用页的样式，类似于.vue文件中的style scoped中的样式',
+		dict: '数据字典，用于匹配多选组、下拉选择等，提供动态获取Options接口字典数据，一般不设置，从接口dict获取。json格式："sex":{"0":"男","1":"女"}',
+		rules:
+			"可参考UI组件表单校验，<a href='https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C' target='_blank' style='color:red'>详情点击</a>",
+		props: '可添加当前组件所有prop属性及事件方法'
+    },
+    tabsName: 'second'
+})
+
 const formAttr = computed(() => {
-const isSearch = state.isSearch
+    const isSearch = state.isSearch
     return [
-      {
-        label: '表单名称',
-        placeholder: '用于保存的表单名称',
-        value: props.formOtherData.formName,
-        key: 'formName',
-        hide: isSearch
-      },
-      {
-        label: '数据源',
-        placeholder: '请选择数据源',
-        value: formatNumber(props.formOtherData.source),
-        type: 'select',
-        options: dataSourceOption.value,
-        key: 'source',
-        hide: isSearch || !dataSourceOption.value?.length,
-        clearable: true
-      },
-      {
-        label: '表单标识',
-        value: formData.value.name,
-        placeholder: '表单唯一标识，可为空',
-        key: 'name',
-        hide: isSearch
-      },
-      {
-        label: '表单标签宽度',
-        value: formData.value.labelWidth,
-        placeholder: '表单label宽，如180px',
-        key: 'labelWidth'
-      },
-      {
-        label: '表单样式名称',
-        value: formData.value.class,
-        placeholder: '额外添加的表单class类名',
-        key: 'class',
-        type: 'select',
-        options: [
-          { label: '无样式', value: '',name:'',id:'' },
-          { label: '每行两列', value: 'form-row-2',name:'',id:'' },
-          { label: '每行三列', value: 'form-row-3',name:'',id:'' },
-          { label: '每行四列', value: 'form-row-4',name:'',id:'' }
-        ],
-        hide: isSearch,
-        clearable: true
-      },
-      {
-        label: '字段名后添加冒号',
-        value: formData.value.showColon,
-        key: 'showColon',
-        type: 'switch'
-      },
-      {
-        label: '组件尺寸',
-        value: formData.value.size,
-        type: 'select',
-        key: 'size',
-        options: [
-          { label: 'large', value: 'large',name:'',id:'' },
-          { label: 'default', value: 'default',name:'',id:'' },
-          { label: 'small', value: 'small',name:'',id:'' }
-        ]
-      }
-      /*{
-        label: '筛选条件展开/收起',
-        value: formConfig.value.expand,
-        type: 'switch',
-        path: 'config',
-        key: 'expand',
-        hide: !isSearch
-      }*/
+		{
+			label: '表单名称',
+			placeholder: '用于保存的表单名称',
+			value: props.formOtherData.formName,
+			key: 'formName',
+			hide: isSearch
+		},
+		{
+			label: '数据源',
+			placeholder: '请选择数据源',
+			value: formatNumber(props.formOtherData.source),
+			type: 'select',
+			options: dataSourceOption.value,
+			key: 'source',
+			hide: isSearch || !dataSourceOption.value?.length,
+			clearable: true
+		},
+		{
+			label: '表单标识',
+			value: formData.value.name,
+			placeholder: '表单唯一标识，可为空',
+			key: 'name',
+			hide: isSearch
+		},
+		{
+			label: '表单标签宽度',
+			value: formData.value.labelWidth,
+			placeholder: '表单label宽，如180px',
+			key: 'labelWidth'
+		},
+		{
+			label: '表单样式名称',
+			value: formData.value.class,
+			placeholder: '额外添加的表单class类名',
+			key: 'class',
+			type: 'select',
+			options: [
+				{ label: '无样式', value: '',name:'',id:'' },
+				{ label: '每行两列', value: 'form-row-2',name:'',id:'' },
+				{ label: '每行三列', value: 'form-row-3',name:'',id:'' },
+				{ label: '每行四列', value: 'form-row-4',name:'',id:'' }
+			],
+			hide: isSearch,
+			clearable: true
+		},
+		{
+			label: '字段名后添加冒号',
+			value: formData.value.showColon,
+			key: 'showColon',
+			type: 'switch'
+		},
+		{
+			label: '组件尺寸',
+			value: formData.value.size,
+			type: 'select',
+			key: 'size',
+			options: [
+				{ label: 'large', value: 'large',name:'',id:'' },
+				{ label: 'default', value: 'default',name:'',id:'' },
+				{ label: 'small', value: 'small',name:'',id:'' }
+			]
+		}
+		/*{
+			label: '筛选条件展开/收起',
+			value: formConfig.value.expand,
+			type: 'switch',
+			path: 'config',
+			key: 'expand',
+			hide: !isSearch
+		}*/
     ]
 })
 const attrList = computed(() => {
     if (Object.keys(controlData.value).length) {
-      const {
-        control = {},
-        type,
-        name,
-        config = {},
-        item = {},
-        attr = {}
-      }: { control: any;type:any;name:any;item:any;attr:any; config: any } = controlData.value
-      let columnIndex = false // 是否显示序号列
-      if (type === 'table') {
-        // 表格时处理
-        const list = controlData.value && controlData.value.list
-        if (list && list.length > 0) {
-          columnIndex = list[0].type === 'index'
-        }
-      }
-			const  temp= reactive<PublicAtrr[]>([
-        {
-          label: '自定义Class',
-          value: config.className,
-          placeholder: '样式类名',
-          path: 'config.className'
-        },
-        {
-          label: '字段标识',
-          value: name,
-          type:
-            Object.keys(state.dataSourceList).length > 0 ? 'select' : 'text',
-          placeholder: '字段唯一标识，对应数据库',
-          dict: state.dataSourceList,
-          path: 'name',
-          vHide: [
-            'grid',
-            'tabs',
-            'card',
-            'title',
-            'gridChild',
-            'tableColumn',
-            'divider',
-            'txt',
-            'div',
-            'button'
-          ],
-          eventName: 'filedNameKey'
-        },
-        {
-          label: '占位内容',
-          value: control.placeholder,
-          placeholder: 'placeholder',
-          path: 'control.placeholder',
-          vShow: [
-            'password',
-            'input',
-            'textarea',
-            'select',
-            'date',
-            'number',
-            'datePicker',
-            'tinymce',
-            'timePicker',
-            'treeSelect'
-          ]
-        },
-        {
-          label: '按钮类型',
-          value: control.type,
-          path: 'control.type',
-          type: 'select',
-          dict: {
-            primary: 'primary',
-            success: 'success',
-            info: 'info',
-            warning: 'warning',
-            danger: 'danger'
-          },
-          vShow: ['button'],
-          clearable: true
-        },
-        {
-          label: '按钮名称',
-          value: control.label,
-          path: 'control.label',
-          vShow: ['button']
-        },
-        {
-          label: '按钮事件',
-          value: control.key,
-          path: 'control.key',
-          type: 'select',
-          dict: {
-            submit: '提交表单',
-            reset: '重置表单',
-            cancel: '取消返回',
-            none: '无动作(自定义)'
-          },
-          vShow: ['button']
-        },
-        {
-          label: '对齐方式',
-          value: config.textAlign,
-          path: 'config.textAlign',
-          type: 'select',
-          dict: {
-            left: 'left',
-            right: 'right',
-            center: 'center'
-          },
-          vShow: ['button', 'div']
-        },
-        {
-          label: 'label值',
-          value: item.label,
-          path: 'item.label',
-          vHide: [
-            'table',
-            'grid',
-            'tabs',
-            'title',
-            'gridChild',
-            'div',
-            'inputSlot',
-            'flex',
-            'button',
-            'txt'
-          ]
-        },
-        {
-          label: '隐藏label',
-          value: item.showLabel,
-          path: 'item.showLabel',
-          type: 'switch',
-          vHide: [
-            'table',
-            'grid',
-            'tabs',
-            'title',
-            'gridChild',
-            'divider',
-            'card',
-            'div',
-            'inputSlot',
-            'flex',
-            'button',
-            'txt'
-          ]
-        },
-        {
-          label: '帮助信息',
-          value: config.help,
-          path: 'config.help',
-          vHide: [
-            'table',
-            'grid',
-            'tabs',
-            'gridChild',
-            'divider',
-            'div',
-            'inputSlot',
-            'flex',
-            'button',
-            'txt'
-          ]
-        },
-        {
-          label: '表单栅格',
-          value: config.span,
-          placeholder: '表单区域栅格宽，0为自动宽',
-          path: 'config.span',
-          vHide: ['gridChild'],
-          isNum: true
-        },
-        /*{
-          label: '行类样式',
-          value: config.inline,
-          type: 'switch',
-          path: 'config.inline',
-          vShow: ['div']
-        },*/
-        {
-          label: '文本值',
-          value: control.modelValue,
-          placeholder: '支持html',
-          path: 'control.modelValue',
-          vShow: ['txt'],
-          inputStyle: 'textarea'
-        },
-        {
-          label: '设为密码',
-          value: type,
-          type: 'select',
-          dict: { input: '文本', password: '密码' },
-          path: 'type',
-          vShow: ['input', 'password'],
-          vIf: state.isSearch // 搜索模式下隐藏 为true
-        },
-        {
-          label: '文本域高度',
-          value: control.rows,
-          placeholder: '输入框行数',
-          path: 'control.rows',
-          vShow: ['textarea'],
-          isNum: true
-        },
-        {
-          label: '前缀',
-          value: config.prepend,
-          placeholder: '文本前缀',
-          path: 'config.prepend',
-          vShow: ['input', 'password']
-        },
-        {
-          label: '后缀',
-          value: config.append,
-          placeholder: '文本后缀',
-          path: 'config.append',
-          vShow: ['input', 'password']
-        },
-        {
-          label: '状态打开时的值',
-          value: control.activeValue,
-          placeholder: '状态打开时的值',
-          path: 'control.activeValue',
-          vShow: ['switch'],
-          isNum: true
-        },
-        {
-          label: '状态关闭时的值',
-          value: control.inactiveValue,
-          placeholder: '状态关闭时的值',
-          path: 'control.inactiveValue',
-          vShow: ['switch'],
-          isNum: true
-        },
-        // {
-        //   label: '转换格式化值',
-        //   value: config.transform,
-        //   path: 'config.transform',
-        //   type: 'switch',
-        //   vShow: [
-        //     'checkbox',
-        //     'select',
-        //     'switch',
-        //     'cascader',
-        //     'slider',
-        //     'table',
-        //     'flex',
-        //     'treeSelect'
-        //   ]
-        // },
-        {
-          label: '增加按钮文案',
-          value: config.addBtnText,
-          path: 'config.addBtnText',
-          type: 'text',
-          vShow: ['flex', 'table']
-        },
-        {
-          label: '删除按钮文案',
-          value: config.delBtnText,
-          path: 'config.delBtnText',
-          type: 'text',
-          vShow: ['flex', 'table']
-        },
-        {
-          label: '是否多选',
-          value: control.multiple,
-          path: 'control.multiple',
-          type: 'switch',
-          vShow: ['select', 'treeSelect'],
-          eventName: 'selectMultiple'
-        },
-        {
-          label: '可清空',
-          value: control.clearable,
-          path: 'control.clearable',
-          type: 'switch',
-          vShow: ['select']
-        },
-        {
-          label: '是否禁用',
-          value: control.disabled,
-          path: 'control.disabled',
-          type: 'switch',
-          vShow: [
-            'input',
-            'password',
-            'textarea',
-            'radio',
-            'checkbox',
-            'select',
-            'date',
-            'switch',
-            'number',
-            'cascader',
-            'upload',
-            'rate',
-            'tinymce',
-            'treeSelect'
-          ],
-          vIf: state.isSearch
-        },
-        {
-          label: '是否禁用编辑',
-          value: config.editDisabled,
-          path: 'config.editDisabled',
-          type: 'switch',
-          vShow: [
-            'input',
-            'password',
-            'textarea',
-            'radio',
-            'checkbox',
-            'select',
-            'date',
-            'switch',
-            'number',
-            'cascader',
-            'upload',
-            'treeSelect',
-            'table',
-            'flex'
-          ],
-          vIf: state.isSearch
-        },
-        {
-          label: '添加页隐藏',
-          value: config.disabledAdd,
-          path: 'config.disabledAdd',
-          type: 'switch',
-          vIf: state.isSearch,
-          vHide: ['inputSlot']
-        },
-        {
-          label: '编辑页隐藏',
-          value: config.disabledEdit,
-          path: 'config.disabledEdit',
-          type: 'switch',
-          vIf: state.isSearch,
-          vHide: ['inputSlot']
-        },
-        {
-          label: '详情页隐藏',
-          value: config.disabledDetail,
-          path: 'config.disabledDetail',
-          type: 'switch',
-          vIf: state.isSearch,
-          vHide: ['inputSlot']
-        },
-        {
-          label: '设为Input输入框的前/后缀',
-          value: type === 'inputSlot',
-          path: '',
-          type: 'switch',
-          vShow: ['select', 'inputSlot'],
-          eventName: 'setInputSlot'
-        },
-        {
-          label: '标题',
-          value: control.modelValue,
-          path: 'control.modelValue',
-          vShow: ['title']
-        },
-        {
-          label: '占据的列数span',
-          value: attr.span,
-          path: 'attr.span',
-          vShow: ['gridChild'],
-          eventName: 'formatNumber',
-          isNum: true
-        },
-        {
-          label: '左侧的间隔格数offset',
-          value: attr.offset,
-          path: 'attr.offset',
-          vShow: ['gridChild'],
-          eventName: 'formatNumber',
-          isNum: true
-        },
-        {
-          label: '向右移动格数push',
-          value: attr.push,
-          path: 'attr.push',
-          vShow: ['gridChild'],
-          eventName: 'formatNumber',
-          isNum: true
-        },
-        {
-          label: '向左移动格数pull',
-          value: attr.pull,
-          path: 'attr.pull',
-          vShow: ['gridChild'],
-          eventName: 'formatNumber',
-          isNum: true
-        },
-        {
-          label: '序号列',
-          value: columnIndex,
-          type: 'switch',
-          vShow: ['table'],
-          eventName: 'tableColumn1'
-        },
-        /*{
-        label: '操作列',
-        value: columnOperate,
-        type: 'switch',
-        vShow: ['table'],
-        eventName: 'tableColumn2'
-      },*/
-        {
-          label: '组件名',
-          value: config.componentName,
-          placeholder: '全局注册的组件名称',
-          path: 'config.componentName',
-          vShow: ['component']
-        },
-        {
-          label: '上传地址',
-          value: control.action,
-          placeholder: '图片/文件上传地址,可不填有默认值',
-          path: 'control.action',
-          vShow: ['upload']
-        },
-        {
-          label: '文件字段名',
-          value: control.name,
-          placeholder: '上传的文件字段名,默认file',
-          path: 'control.name',
-          vShow: ['upload']
-        },
-        {
-          label: '列表类型',
-          value: control.listType,
-          type: 'select',
-          dict: {
-            text: 'text',
-            picture: 'picture',
-            'picture-card': 'picture-card'
-          },
-          path: 'control.listType',
-          vShow: ['upload']
-        },
-        {
-          label: '提示文字',
-          value: config.tip,
-          placeholder: '提示说明文字',
-          path: 'config.tip',
-          vShow: ['upload']
-        },
-        {
-          label: '按钮文本',
-          value: config.btnText,
-          placeholder: '上传按钮文本',
-          path: 'config.btnText',
-          vShow: ['upload']
-        },
-        {
-          label: 'direction',
-          type: 'select',
-          dict: { horizontal: 'horizontal', vertical: 'vertical' },
-          placeholder: '分割线方向，默认horizontal',
-          value: control.direction,
-          path: 'control.direction',
-          vShow: ['divider']
-        },
-        {
-          label: 'border-style',
-          placeholder: '分隔符样式，默认solid',
-          value: control.borderStyle,
-          path: 'control.borderStyle',
-          vShow: ['divider']
-        },
-        {
-          label: 'content-position',
-          type: 'select',
-          dict: { left: 'left', right: 'right', center: 'center' },
-          value: control.contentPosition,
-          path: 'control.contentPosition',
-          vShow: ['divider']
-        },
-        {
-          label: '最小值',
-          value: control.min,
-          path: 'control.min',
-          vShow: ['slider'],
-          eventName: 'formatNumber',
-          isNum: true
-        },
-        {
-          label: '最大值',
-          value: control.max,
-          path: 'control.max',
-          vShow: ['rate', 'slider'],
-          eventName: 'formatNumber',
-          isNum: true
-        },
-        {
-          label: '步长',
-          value: control.step,
-          path: 'control.step',
-          vShow: ['slider'],
-          eventName: 'formatNumber',
-          isNum: true
-        },
-        {
-          label: 'type',
-          value: control.type,
-          path: 'control.type',
-          vShow: ['datePicker'],
-          type: 'select',
-          placeholder: '显示类型',
-          dict: {
-            year: 'year',
-            month: 'month',
-            date: 'date',
-            datetime: 'datetime',
-            week: 'week',
-            datetimerange: 'datetimerange',
-            daterange: 'daterange',
-            monthrange: 'monthrange'
-          }
-        },
-        {
-          label: 'format',
-          value: control.format,
-          path: 'control.format',
-          vShow: ['datePicker', 'timePicker'],
-          placeholder: '显示在输入框中的格式'
-        },
-        {
-          label: 'color-format',
-          value: control.colorFormat,
-          path: 'control.colorFormat',
-          type: 'select',
-          placeholder: '写入 v-model 的颜色的格式',
-          dict: { hsl: 'hsl', hsv: 'hsv', hex: 'hex', rgb: 'rgb' },
-          vShow: ['colorPicker']
-        },
-        {
-          label: '文本高度',
-          value: control.height,
-          path: 'control.height',
-          placeholder: '文本高度(预览查看效果)',
-          vShow: ['tinymce']
-        },
-        {
-          label: '文本宽度',
-          value: control.width,
-          path: 'control.width',
-          placeholder: '文本宽度(预览查看效果)',
-          vShow: ['tinymce']
-        },
-        {
-          label: '图片上传地址',
-          value: control.imgUrl,
-          path: 'control.imgUrl',
-          placeholder: '图片上传地址',
-          vShow: ['tinymce']
-        },
-        {
-          label: '附件上传地址',
-          value: control.blobUrl,
-          path: 'control.blobUrl',
-          placeholder: '附件上传地址',
-          vShow: ['tinymce']
-        },
-        {
-          label: '显示模式',
-          value: config.style,
-          path: 'config.style',
-          placeholder: '显示风格(预览查看效果)',
-          type: 'select',
-          dict: { default: 'default', simple: 'simple', label:'', name:'' },
-          vShow: ['tinymce'],
-        }
-      ]
-			)
-      // 过滤显示对应的值
-      return temp.filter((item: any) => {
-        let hasFilter = true
-        if (item.vShow) {
-          hasFilter = item.vShow.includes(type)
-        }
-        if (item.vHide) {
-          hasFilter = !item.vHide.includes(type)
-        }
-        if (item.vIf) {
-          // 不显示vif＝true的
-          hasFilter = false
-        }
-        return hasFilter
-      })
+		const {
+			control = {},
+			type,
+			name,
+			config = {},
+			item = {},
+			attr = {}
+		}: { control: any;type:any;name:any;item:any;attr:any; config: any } = controlData.value
+		let columnIndex = false // 是否显示序号列
+		if (type === 'table') {
+			// 表格时处理
+			const list = controlData.value && controlData.value.list
+			if (list && list.length > 0) {
+				columnIndex = list[0].type === 'index'
+			}
+		}
+		const temp =reactive<PublicAtrr[]>([
+			{
+				label: '自定义Class',
+				value: config.className,
+				placeholder: '样式类名',
+				path: 'config.className'
+			},
+			{
+				label: '字段标识',
+				value: name,
+				type:
+					Object.keys(state.dataSourceList).length > 0 ? 'select' : 'text',
+				placeholder: '字段唯一标识，对应数据库',
+				dict: state.dataSourceList,
+				path: 'name',
+				vHide: [
+					'grid',
+					'tabs',
+					'card',
+					'title',
+					'gridChild',
+					'tableColumn',
+					'divider',
+					'txt',
+					'div',
+					'button'
+				],
+				eventName: 'filedNameKey'
+			},
+			{
+				label: '占位内容',
+				value: control.placeholder,
+				placeholder: 'placeholder',
+				path: 'control.placeholder',
+				vShow: [
+					'password',
+					'input',
+					'textarea',
+					'select',
+					'date',
+					'number',
+					'datePicker',
+					'tinymce',
+					'timePicker',
+					'treeSelect'
+				]
+			},
+			{
+				label: '按钮类型',
+				value: control.type,
+				path: 'control.type',
+				type: 'select',
+				dict: {
+					primary: 'primary',
+					success: 'success',
+					info: 'info',
+					warning: 'warning',
+					danger: 'danger'
+				},
+				vShow: ['button'],
+				clearable: true
+			},
+			{
+				label: '按钮名称',
+				value: control.label,
+				path: 'control.label',
+				vShow: ['button']
+			},
+			{
+				label: '按钮事件',
+				value: control.key,
+				path: 'control.key',
+				type: 'select',
+				dict: {
+					submit: '提交表单',
+					reset: '重置表单',
+					cancel: '取消返回',
+					none: '无动作(自定义)'
+				},
+				vShow: ['button']
+			},
+			{
+				label: '对齐方式',
+				value: config.textAlign,
+				path: 'config.textAlign',
+				type: 'select',
+				dict: {
+					left: 'left',
+					right: 'right',
+					center: 'center'
+				},
+				vShow: ['button', 'div']
+			},
+			{
+				label: 'label值',
+				value: item.label,
+				path: 'item.label',
+				vHide: [
+					'table',
+					'grid',
+					'tabs',
+					'title',
+					'gridChild',
+					'div',
+					'inputSlot',
+					'flex',
+					'button',
+					'txt'
+				]
+			},
+			{
+				label: '隐藏label',
+				value: item.showLabel,
+				path: 'item.showLabel',
+				type: 'switch',
+				vHide: [
+					'table',
+					'grid',
+					'tabs',
+					'title',
+					'gridChild',
+					'divider',
+					'card',
+					'div',
+					'inputSlot',
+					'flex',
+					'button',
+					'txt'
+				]
+			},
+			{
+				label: '帮助信息',
+				value: config.help,
+				path: 'config.help',
+				vHide: [
+					'table',
+					'grid',
+					'tabs',
+					'gridChild',
+					'divider',
+					'div',
+					'inputSlot',
+					'flex',
+					'button',
+					'txt'
+				]
+			},
+			{
+				label: '表单栅格',
+				value: config.span,
+				placeholder: '表单区域栅格宽，0为自动宽',
+				path: 'config.span',
+				vHide: ['gridChild'],
+				isNum: true
+			},
+			/*{
+			label: '行类样式',
+			value: config.inline,
+			type: 'switch',
+			path: 'config.inline',
+			vShow: ['div']
+			},*/
+			{
+				label: '文本值',
+				value: control.modelValue,
+				placeholder: '支持html',
+				path: 'control.modelValue',
+				vShow: ['txt'],
+				inputStyle: 'textarea'
+			},
+			{
+				label: '设为密码',
+				value: type,
+				type: 'select',
+				dict: { input: '文本', password: '密码' },
+				path: 'type',
+				vShow: ['input', 'password'],
+				vIf: state.isSearch // 搜索模式下隐藏 为true
+			},
+			{
+				label: '文本域高度',
+				value: control.rows,
+				placeholder: '输入框行数',
+				path: 'control.rows',
+				vShow: ['textarea'],
+				isNum: true
+			},
+			{
+				label: '前缀',
+				value: config.prepend,
+				placeholder: '文本前缀',
+				path: 'config.prepend',
+				vShow: ['input', 'password']
+			},
+			{
+				label: '后缀',
+				value: config.append,
+				placeholder: '文本后缀',
+				path: 'config.append',
+				vShow: ['input', 'password']
+			},
+			{
+				label: '状态打开时的值',
+				value: control.activeValue,
+				placeholder: '状态打开时的值',
+				path: 'control.activeValue',
+				vShow: ['switch'],
+				isNum: true
+			},
+			{
+				label: '状态关闭时的值',
+				value: control.inactiveValue,
+				placeholder: '状态关闭时的值',
+				path: 'control.inactiveValue',
+				vShow: ['switch'],
+				isNum: true
+			},
+			// {
+			//   label: '转换格式化值',
+			//   value: config.transform,
+			//   path: 'config.transform',
+			//   type: 'switch',
+			//   vShow: [
+			//     'checkbox',
+			//     'select',
+			//     'switch',
+			//     'cascader',
+			//     'slider',
+			//     'table',
+			//     'flex',
+			//     'treeSelect'
+			//   ]
+			// },
+			{
+				label: '增加按钮文案',
+				value: config.addBtnText,
+				path: 'config.addBtnText',
+				type: 'text',
+				vShow: ['flex', 'table']
+			},
+			{
+				label: '删除按钮文案',
+				value: config.delBtnText,
+				path: 'config.delBtnText',
+				type: 'text',
+				vShow: ['flex', 'table']
+			},
+			{
+				label: '是否多选',
+				value: control.multiple,
+				path: 'control.multiple',
+				type: 'switch',
+				vShow: ['select', 'treeSelect'],
+				eventName: 'selectMultiple'
+			},
+			{
+				label: '可清空',
+				value: control.clearable,
+				path: 'control.clearable',
+				type: 'switch',
+				vShow: ['select']
+			},
+			{
+				label: '是否禁用',
+				value: control.disabled,
+				path: 'control.disabled',
+				type: 'switch',
+				vShow: [
+					'input',
+					'password',
+					'textarea',
+					'radio',
+					'checkbox',
+					'select',
+					'date',
+					'switch',
+					'number',
+					'cascader',
+					'upload',
+					'rate',
+					'tinymce',
+					'treeSelect'
+				],
+				vIf: state.isSearch
+			},
+			{
+				label: '是否禁用编辑',
+				value: config.editDisabled,
+				path: 'config.editDisabled',
+				type: 'switch',
+				vShow: [
+					'input',
+					'password',
+					'textarea',
+					'radio',
+					'checkbox',
+					'select',
+					'date',
+					'switch',
+					'number',
+					'cascader',
+					'upload',
+					'treeSelect',
+					'table',
+					'flex'
+				],
+				vIf: state.isSearch
+			},
+			{
+				label: '添加页隐藏',
+				value: config.disabledAdd,
+				path: 'config.disabledAdd',
+				type: 'switch',
+				vIf: state.isSearch,
+				vHide: ['inputSlot']
+			},
+			{
+				label: '编辑页隐藏',
+				value: config.disabledEdit,
+				path: 'config.disabledEdit',
+				type: 'switch',
+				vIf: state.isSearch,
+				vHide: ['inputSlot']
+			},
+			{
+				label: '详情页隐藏',
+				value: config.disabledDetail,
+				path: 'config.disabledDetail',
+				type: 'switch',
+				vIf: state.isSearch,
+				vHide: ['inputSlot']
+			},
+			{
+				label: '设为Input输入框的前/后缀',
+				value: type === 'inputSlot',
+				path: '',
+				type: 'switch',
+				vShow: ['select', 'inputSlot'],
+				eventName: 'setInputSlot'
+			},
+			{
+				label: '标题',
+				value: control.modelValue,
+				path: 'control.modelValue',
+				vShow: ['title']
+			},
+			{
+				label: '占据的列数span',
+				value: attr.span,
+				path: 'attr.span',
+				vShow: ['gridChild'],
+				eventName: 'formatNumber',
+				isNum: true
+			},
+			{
+				label: '左侧的间隔格数offset',
+				value: attr.offset,
+				path: 'attr.offset',
+				vShow: ['gridChild'],
+				eventName: 'formatNumber',
+				isNum: true
+			},
+			{
+				label: '向右移动格数push',
+				value: attr.push,
+				path: 'attr.push',
+				vShow: ['gridChild'],
+				eventName: 'formatNumber',
+				isNum: true
+			},
+			{
+				label: '向左移动格数pull',
+				value: attr.pull,
+				path: 'attr.pull',
+				vShow: ['gridChild'],
+				eventName: 'formatNumber',
+				isNum: true
+			},
+			{
+				label: '序号列',
+				value: columnIndex,
+				type: 'switch',
+				vShow: ['table'],
+				eventName: 'tableColumn1'
+			},
+			/*{
+				label: '操作列',
+				value: columnOperate,
+				type: 'switch',
+				vShow: ['table'],
+				eventName: 'tableColumn2'
+			},*/
+			{
+				label: '组件名',
+				value: config.componentName,
+				placeholder: '全局注册的组件名称',
+				path: 'config.componentName',
+				vShow: ['component']
+			},
+			{
+				label: '上传地址',
+				value: control.action,
+				placeholder: '图片/文件上传地址,可不填有默认值',
+				path: 'control.action',
+				vShow: ['upload']
+			},
+			{
+				label: '文件字段名',
+				value: control.name,
+				placeholder: '上传的文件字段名,默认file',
+				path: 'control.name',
+				vShow: ['upload']
+			},
+			{
+				label: '列表类型',
+				value: control.listType,
+				type: 'select',
+				dict: {
+					text: 'text',
+					picture: 'picture',
+					'picture-card': 'picture-card'
+				},
+				path: 'control.listType',
+				vShow: ['upload']
+			},
+			{
+				label: '提示文字',
+				value: config.tip,
+				placeholder: '提示说明文字',
+				path: 'config.tip',
+				vShow: ['upload']
+			},
+			{
+				label: '按钮文本',
+				value: config.btnText,
+				placeholder: '上传按钮文本',
+				path: 'config.btnText',
+				vShow: ['upload']
+			},
+			{
+				label: 'direction',
+				type: 'select',
+				dict: { horizontal: 'horizontal', vertical: 'vertical' },
+				placeholder: '分割线方向，默认horizontal',
+				value: control.direction,
+				path: 'control.direction',
+				vShow: ['divider']
+			},
+			{
+				label: 'border-style',
+				placeholder: '分隔符样式，默认solid',
+				value: control.borderStyle,
+				path: 'control.borderStyle',
+				vShow: ['divider']
+			},
+			{
+				label: 'content-position',
+				type: 'select',
+				dict: { left: 'left', right: 'right', center: 'center' },
+				value: control.contentPosition,
+				path: 'control.contentPosition',
+				vShow: ['divider']
+			},
+			{
+				label: '最小值',
+				value: control.min,
+				path: 'control.min',
+				vShow: ['slider'],
+				eventName: 'formatNumber',
+				isNum: true
+			},
+			{
+				label: '最大值',
+				value: control.max,
+				path: 'control.max',
+				vShow: ['rate', 'slider'],
+				eventName: 'formatNumber',
+				isNum: true
+			},
+			{
+				label: '步长',
+				value: control.step,
+				path: 'control.step',
+				vShow: ['slider'],
+				eventName: 'formatNumber',
+				isNum: true
+			},
+			{
+				label: 'type',
+				value: control.type,
+				path: 'control.type',
+				vShow: ['datePicker'],
+				type: 'select',
+				placeholder: '显示类型',
+				dict: {
+					year: 'year',
+					month: 'month',
+					date: 'date',
+					datetime: 'datetime',
+					week: 'week',
+					datetimerange: 'datetimerange',
+					daterange: 'daterange',
+					monthrange: 'monthrange'
+				}
+			},
+			{
+				label: 'format',
+				value: control.format,
+				path: 'control.format',
+				vShow: ['datePicker', 'timePicker'],
+				placeholder: '显示在输入框中的格式'
+			},
+			{
+				label: 'color-format',
+				value: control.colorFormat,
+				path: 'control.colorFormat',
+				type: 'select',
+				placeholder: '写入 v-model 的颜色的格式',
+				dict: { hsl: 'hsl', hsv: 'hsv', hex: 'hex', rgb: 'rgb' },
+				vShow: ['colorPicker']
+			},
+			{
+				label: '文本高度',
+				value: control.height,
+				path: 'control.height',
+				placeholder: '文本高度(预览查看效果)',
+				vShow: ['tinymce']
+			},
+			{
+				label: '文本宽度',
+				value: control.width,
+				path: 'control.width',
+				placeholder: '文本宽度(预览查看效果)',
+				vShow: ['tinymce']
+			},
+			{
+				label: '图片上传地址',
+				value: control.imgUrl,
+				path: 'control.imgUrl',
+				placeholder: '图片上传地址',
+				vShow: ['tinymce']
+			},
+			{
+				label: '附件上传地址',
+				value: control.blobUrl,
+				path: 'control.blobUrl',
+				placeholder: '附件上传地址',
+				vShow: ['tinymce']
+			},
+			{
+				label: '显示模式',
+				value: config.style,
+				path: 'config.style',
+				placeholder: '显示风格(预览查看效果)',
+				type: 'select',
+				dict: { default: 'default', simple: 'simple' },
+				vShow: ['tinymce']
+			}
+		])
+		// 过滤显示对应的值
+		return temp.filter((item: any) => {
+			let hasFilter = true
+			if (item.vShow) {
+				hasFilter = item.vShow.includes(type)
+			}
+			if (item.vHide) {
+				hasFilter = !item.vHide.includes(type)
+			}
+			if (item.vIf) {
+			// 不显示vif＝true的
+				hasFilter = false
+			}
+			return hasFilter
+		})
     } else {
-      return []
+      	return []
     }
-  })
-  const designType = inject('formDesignType')
-  const state = reactive({
-    dataSourceList: [],
-    customRulesList: [
-      ...validate,
-      {
-        type: 'rules',
-        label: '自定义正则'
-      },
-      {
-        type: 'methods',
-        label: '自定义方法'
-      }
-    ], // 自定义校验规则
-    isSearch: designType === 'search',
-    tooltip: {
-      css: '当前表单应用页的样式，类似于.vue文件中的style scoped中的样式',
-      dict: '数据字典，用于匹配多选组、下拉选择等，提供动态获取Options接口字典数据，一般不设置，从接口dict获取。json格式："sex":{"0":"男","1":"女"}',
-      rules:
-        "可参考UI组件表单校验，<a href='https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C' target='_blank' style='color:red'>详情点击</a>",
-      props: '可添加当前组件所有prop属性及事件方法'
-    },
-    tabsName: 'second'
-  })
-  watch(
+})
+
+watch(
     () => store.activeKey,
     (val: string) => {
       if (val) {
@@ -749,167 +746,167 @@ const attrList = computed(() => {
         state.tabsName = 'first'
       }
     }
-  )
-  const controlChange = (obj: any, val: any) => {
+)
+const controlChange = (obj: any, val: any) => {
     // select多选属性，
     switch (obj.eventName) {
-      case 'selectMultiple':
-        if (val) {
-          // 多选，将值改为数组
-          controlData.value.control.modelValue = []
-        } else {
-          // 单选
-          controlData.value.control.modelValue = ''
-        }
-        break
-      case 'tableColumn1':
-        tableColumnAdd(val)
-        break
-      case 'formatNumber':
-        // val = parseInt(val) // 将值转数值
-        break
-      case 'filedNameKey':
-        // 选择字段标识时，同时修改显示标题
-        // 根据value找key
-        if (obj.type === 'select') {
-          state.dataSourceList.forEach((item: any) => {
-            if (item.name === val) {
-              if (controlData.value.item) {
-                controlData.value.item.label = item.label
-              }
-              controlData.value.name = item.label
-            }
-          })
-        }
-        break
-      case 'setInputSlot':
-        if (val) {
-          // 将类型改为inputSlot
-          controlData.value.type = 'inputSlot'
-          ElMessage.success(
-            `请在对应的Input输入框属性前后缀设置key:${controlData.value.name}`
-          )
-        } else {
-          controlData.value.type = 'select'
-        }
-        // 这里会报错Cannot set properties of null (setting 'checked')
-        // 因value:type===inputSlot，这里使用了v-model，影响不大暂不处理
-        break
+		case 'selectMultiple':
+			if (val) {
+				// 多选，将值改为数组
+				controlData.value.control.modelValue = []
+			} else {
+				// 单选
+				controlData.value.control.modelValue = ''
+			}
+			break
+		case 'tableColumn1':
+			tableColumnAdd(val)
+			break
+		case 'formatNumber':
+			// val = parseInt(val) // 将值转数值
+			break
+		case 'filedNameKey':
+			// 选择字段标识时，同时修改显示标题
+			// 根据value找key
+			if (obj.type === 'select') {
+				state.dataSourceList.forEach((item: any) => {
+					if (item.name === val) {
+						if (controlData.value.item) {
+							controlData.value.item.label = item.label
+						}
+						controlData.value.name = item.label
+					}
+				})
+			}
+			break
+		case 'setInputSlot':
+			if (val) {
+				// 将类型改为inputSlot
+				controlData.value.type = 'inputSlot'
+				ElMessage.success(
+					`请在对应的Input输入框属性前后缀设置key:${controlData.value.name}`
+				)
+			} else {
+				controlData.value.type = 'select'
+			}
+			// 这里会报错Cannot set properties of null (setting 'checked')
+			// 因value:type===inputSlot，这里使用了v-model，影响不大暂不处理
+			break
     }
     if (obj.path) {
-      const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
-      obj.path && getPropByPath(controlData.value, obj.path, newVal)
+		const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
+		obj.path && getPropByPath(controlData.value, obj.path, newVal)
     }
-  }
-  // 修改指定路径下的值
-  const getPropByPath = (obj: any, path: string, val: any) => {
+}
+// 修改指定路径下的值
+const getPropByPath = (obj: any, path: string, val: any) => {
     let tempObj = obj
     const keyArr = path.split('.')
     let i = 0
     for (i; i < keyArr.length - 1; i++) {
-      const key = keyArr[i]
-      if (key in tempObj) {
-        tempObj = tempObj[key]
-      } else {
-        throw new Error(`${key} is undefined`)
-        // break
-      }
+		const key = keyArr[i]
+		if (key in tempObj) {
+			tempObj = tempObj[key]
+		} else {
+			throw new Error(`${key} is undefined`)
+			// break
+		}
     }
     const key = keyArr[i]
     const value = tempObj[keyArr[i]]
     // 检查最后一级是否存在
     /*if (!(key in tempObj)) {
-    throw new Error(`${key} is undefined`)
-  }*/
+		throw new Error(`${key} is undefined`)
+	}*/
     if (val !== undefined) {
-      tempObj[key] = val
+      	tempObj[key] = val
     }
     return {
-      obj: tempObj,
-      key: key,
-      value: value
+		obj: tempObj,
+		key: key,
+		value: value
     }
-  }
-  // 属性设置相关结束
-  // 多选固定选项删除
-  const delSelectOption = (index: number, type?: string) => {
+}
+// 属性设置相关结束
+// 多选固定选项删除
+const delSelectOption = (index: number, type?: string) => {
     if (type === 'tabs') {
-      controlData.value.columns.splice(index, 1)
+      	controlData.value.columns.splice(index, 1)
     } else {
-      controlData.value.options.splice(index, 1)
+      	controlData.value.options.splice(index, 1)
     }
-  }
-  // 多选固定选项增加
-  const addSelectOption = (type: any) => {
+}
+// 多选固定选项增加
+const addSelectOption = (type: any) => {
     if (controlData.value.type === 'cascader') {
-      // 级联时打开弹窗口
-      openAttrDialog('cascader')
+		// 级联时打开弹窗口
+		openAttrDialog('cascader')
     } else if (controlData.value.type === 'treeSelect') {
-      openAttrDialog('treeSelect', '编辑组件下拉选项数据')
+      	openAttrDialog('treeSelect', '编辑组件下拉选项数据')
     } else {
-      if (type === 'tabs') {
-        controlData.value.columns.push({
-          label: '标签名称',
-          list: []
-        })
-      } else {
-        controlData.value.options.push({
-          label: '',
-          value: ''
-        })
-      }
+		if (type === 'tabs') {
+			controlData.value.columns.push({
+			label: '标签名称',
+			list: []
+			})
+		} else {
+			controlData.value.options.push({
+			label: '',
+			value: ''
+			})
+		}
     }
-  }
-  // 更多属性弹窗
-  const openAttrDialog = (type?: string, tooltip?: string) => {
+}
+// 更多属性弹窗
+const openAttrDialog = (type?: string, tooltip?: string) => {
     let editData = controlData.value.control
     if (controlData.value.type === 'button') {
-      // 按钮组件编辑属性
-      editData = controlData.value.config
-      type = 'button'
+		// 按钮组件编辑属性
+		editData = controlData.value.config
+		type = 'button'
     }
     switch (type) {
-      case 'treeSelect':
-        editData = controlData.value.control.data
-        break
-      case 'cascader':
-        editData = controlData.value.options
-        break
-      case 'optionsParams': // 选项请求附加参数
-        editData = controlData.value.config.beforeRequest
-        // params.codeType = 'json'
-        break
-      case 'optionsResult':
-        editData = controlData.value.config.afterResponse
-        break
+		case 'treeSelect':
+			editData = controlData.value.control.data
+			break
+		case 'cascader':
+			editData = controlData.value.options
+			break
+		case 'optionsParams': // 选项请求附加参数
+			editData = controlData.value.config.beforeRequest
+			// params.codeType = 'json'
+			break
+		case 'optionsResult':
+			editData = controlData.value.config.afterResponse
+			break
     }
-const emitsParams = {
-    content: editData,
-    title: tooltip,
-    type: type,
-    direction: 'ltr',
-    callback: (result: any) => {
-        switch (type) {
-          case 'treeSelect':
-            controlData.value.control.data = result
-            break
-          case 'cascader':
-            controlData.value.options = result
-            break
-          case 'optionsParams':
-            controlData.value.config.beforeRequest = result
-            break
-          case 'optionsResult':
-            controlData.value.config.afterResponse = result
-            break
-          case 'button':
-            controlData.value.config = result
-            break
-          default:
-            controlData.value.control = {}
-            Object.assign(controlData.value.control, result)
-        }
-      }
+    const emitsParams = {
+		content: editData,
+		title: tooltip,
+		type: type,
+		direction: 'ltr',
+		callback: (result: any) => {
+			switch (type) {
+			case 'treeSelect':
+				controlData.value.control.data = result
+				break
+			case 'cascader':
+				controlData.value.options = result
+				break
+			case 'optionsParams':
+				controlData.value.config.beforeRequest = result
+				break
+			case 'optionsResult':
+				controlData.value.config.afterResponse = result
+				break
+			case 'button':
+				controlData.value.config = result
+				break
+			default:
+				controlData.value.control = {}
+				Object.assign(controlData.value.control, result)
+			}
+		}
     }
     emits('openDialog', emitsParams)
 }
@@ -928,7 +925,7 @@ const requiredChange = (val: any) => {
       	controlData.value.item.rules.splice(0, 1)
     }
 }
-  // 添加校验规则
+// 添加校验规则
 const addRules = (tooltip: string) => {
     if (!controlData.value.item?.rules) {
       	controlData.value.item.rules = []
@@ -990,7 +987,8 @@ const addRulesFast = () => {
 }
 // 删除一条校验规则
 const delAddRules = (index: number) => {
-    controlData.value.customRules &&controlData.value.customRules.splice(index, 1)
+    controlData.value.customRules &&
+    controlData.value.customRules.splice(index, 1)
 }
 // 编辑表单样式
 const editFormStyle = (tooltip: string) => {
@@ -1009,8 +1007,8 @@ const editFormDict = (tooltip: string) => {
 		title: tooltip
     })
 }
-// 根据选定数据源获取表单字段
-const getFormFieldBySource = (id?: string) => {
+ // 根据选定数据源获取表单字段
+ const getFormFieldBySource = (id?: string) => {
     if (state.isSearch) {
 		// 搜索设计这里不需要数据源
 		return
@@ -1035,15 +1033,15 @@ const getFormFieldBySource = (id?: string) => {
 const getDataSource = () => {
     // 获取数据源，表单设计才加载，搜索设置不需要
     if (!state.isSearch) {
-			getRequest('sourceList').then((res: any) => {
-				dataSourceOption.value = res.data.list
-				//dataSourceOption.value.unshift({ name: '无', id: '' })
-				// console.log("res.data---->",res.data)
-			})
+		// getRequest('sourceList').then((res: any) => {
+		// 	dataSourceOption.value = res.data.list
+		// 	//dataSourceOption.value.unshift({ name: '无', id: '' })
+		// })
     }
 }
 // 表单属性修改
 const formAttrChange = (obj: any, val?: any) => {
+	console.log("表单属性修改--->",obj,val,{ [obj.key]: obj.value })
     if (obj.key === 'source') {
 		getFormFieldBySource(obj.value) // 改变了数据源了，重新请求数据
 		// 清空设计区已选择的组件，再一次选择时字段标识才会变
@@ -1055,7 +1053,8 @@ const formAttrChange = (obj: any, val?: any) => {
 			'update:formOtherData',
 			Object.assign(props.formOtherData, { [obj.key]: obj.value })
 		)
-		return
+		formData.value[obj.key] = obj.value
+      	return
     }
     if (obj.path === 'config') {
       	formConfig.value[obj.key] = obj.value || val
@@ -1066,10 +1065,10 @@ const formAttrChange = (obj: any, val?: any) => {
 // 返回选项配置提示
 const getOptionPlaceholder = (type: number) => {
     switch (type) {
-      case 1:
-        return '数据源接口URL,可带参数'
-      case 2:
-        return '字典key，默认为字段标识'
+		case 1:
+			return '数据源接口URL,可带参数'
+		case 2:
+			return '字典key，默认为字段标识'
     }
     return ''
 }
@@ -1091,18 +1090,17 @@ getDataSource()
 defineExpose({ getFormFieldBySource })
 </script>
 <template>
-	<div class="sidebar-tools">
+	<div  class="sidebar-tools">
 		<el-tabs v-model="state.tabsName">
 			<el-tab-pane label="字段配置" name="first">
 				<el-form size="small" class="form">
-					<div class="h3"><h3>通用属性</h3></div>
+					<div class=""><h3>通用属性</h3></div>
 					<template v-for="(item, index) in attrList" :key="index">
 						<el-form-item :label="item.label">
 							<el-select
 								v-if="item.type === 'select'"
-								v-model="item.value"
 								:placeholder="item.placeholder"
-								
+								v-model="item.value"
 								:filterable="item.path === 'name'"
 								:allow-create="item.path === 'name'"
 								:clearable="item.clearable"
@@ -1124,9 +1122,8 @@ defineExpose({ getFormFieldBySource })
 							/>
 							<el-input
 								v-else
-								v-model="item.value"
 								:type="item.inputStyle"
-								
+								v-model="item.value"
 								:placeholder="item.placeholder"
 								@input="controlChange(item, $event)"
 							/>
@@ -1171,9 +1168,8 @@ defineExpose({ getFormFieldBySource })
 								label="联动结果"
 							>
 								<el-radio-group
-								
-								v-model="controlData.config.linkResult"
-								class="option-radio"
+									v-model="controlData.config.linkResult"
+									class="option-radio"
 								>
 									<el-radio label="hidden">隐藏(默认)</el-radio>
 									<el-radio label="disabled">禁用</el-radio>
@@ -1184,16 +1180,16 @@ defineExpose({ getFormFieldBySource })
 					<template v-if="showHide(['tabs'], true)">
 						<div class="h3"><h3>标签配置项</h3></div>
 						<el-form-item
-						v-for="(item, index) in controlData.columns"
-						:key="index"
+							v-for="(item, index) in controlData.columns"
+							:key="index"
 						>
 							<el-col :span="12">
 								<el-input v-model="item.label" placeholder="标签配置项" />
 							</el-col>
 							<el-col :span="2" :offset="1">
 								<i
-								class="icon-del"
-								@click="delSelectOption(index as number, 'tabs')"
+									class="icon-del"
+									@click="delSelectOption(index as number, 'tabs')"
 								></i>
 							</el-col>
 						</el-form-item>
@@ -1236,84 +1232,80 @@ defineExpose({ getFormFieldBySource })
 						<template v-if="controlData.config.optionsType === 0">
 							<div v-if="controlData.type !== 'cascader'">
 								<el-form-item
-								v-for="(item, index) in controlData.options"
-								:key="index"
+									v-for="(item, index) in controlData.options"
+									:key="index"
 								>
-								<el-col :span="10">
-									<el-input v-model="item.label" placeholder="选项标签" />
-								</el-col>
-								<el-col :span="10" :offset="1">
-									<el-input v-model="item.value" placeholder="选项值" />
-								</el-col>
-								<el-col :span="2" :offset="1">
-									<i
-									class="icon-del"
-									@click="delSelectOption(index as number)"
-									></i>
-								</el-col>
+									<el-col :span="10">
+										<el-input v-model="item.label" placeholder="选项标签" />
+									</el-col>
+									<el-col :span="10" :offset="1">
+										<el-input v-model="item.value" placeholder="选项值" />
+									</el-col>
+									<el-col :span="2" :offset="1">
+										<i
+											class="icon-del"
+											@click="delSelectOption(index as number)"
+										></i>
+									</el-col>
 								</el-form-item>
 							</div>
 							<el-form-item>
-								<el-button @click="addSelectOption"
-								>{{ controlData.type === 'cascader' ? '编辑' : '新增' }}
-								</el-button>
+								<el-button @click="addSelectOption">{{ controlData.type === 'cascader' ? '编辑' : '新增' }}</el-button>
 							</el-form-item>
 						</template>
 						<template v-else>
 							<el-form-item>
 								<el-input
-								v-model="controlData.config.optionsFun"
-								:placeholder="
-									getOptionPlaceholder(controlData.config.optionsType)
-								"
+									v-model="controlData.config.optionsFun"
+									:placeholder="
+										getOptionPlaceholder(controlData.config.optionsType)
+									"
 								>
 									<template
 										v-if="controlData.config.optionsType === 1"
 										#prepend
 									>
 										<el-select
-										v-model="controlData.config.method"
-										style="width: 80px"
+											v-model="controlData.config.method"
+											style="width: 80px"
 										>
-										<el-option label="get" value="get" />
-										<el-option label="post" value="post" />
+											<el-option label="get" value="get" />
+											<el-option label="post" value="post" />
 										</el-select>
 									</template>
 								</el-input>
 							</el-form-item>
-						<template v-if="controlData.config.optionsType === 1">
-							<el-form-item label="指定label属性值">
-								<el-input
-									v-model="controlData.config.label"
-									placeholder="返回数据中没有label时可设置"
-								/>
-							</el-form-item>
-							<el-form-item label="指定value属性值">
-								<el-input
-									v-model="controlData.config.value"
-									placeholder="返回数据中没有value时可设置"
-								/>
-							</el-form-item>
-						</template>
+							<template v-if="controlData.config.optionsType === 1">
+								<el-form-item label="指定label属性值">
+									<el-input
+										v-model="controlData.config.label"
+										placeholder="返回数据中没有label时可设置"
+									/>
+								</el-form-item>
+								<el-form-item label="指定value属性值">
+									<el-input
+										v-model="controlData.config.value"
+										placeholder="返回数据中没有value时可设置"
+									/>
+								</el-form-item>
+							</template>
 							<el-form-item v-if="controlData.config.optionsType === 1">
 								<el-button
-								@click="
-									optionsEvent(
-									'optionsParams',
-									'请求前处理事件，参数(data,route,form) data请求参数,route页面路由,form表单值'
-									)
-								"
-								>beforeRequest
-								</el-button>
+									@click="
+										optionsEvent(
+										'optionsParams',
+										'请求前处理事件，参数(data,route,form) data请求参数,route页面路由,form表单值'
+										)
+									"
+								>beforeRequest</el-button>
 								<el-button
-								@click="
-									optionsEvent(
-									'optionsResult',
-									'请求返回结束处理；，也可为字符串，如opt=formatTest'
-									)
-								"
-								>afterResponse
-								</el-button>
+									@click="
+										optionsEvent(
+										'optionsResult',
+										'请求返回结束处理；，也可为字符串，如opt=formatTest'
+										)
+									"
+								>afterResponse</el-button>
 							</el-form-item>
 						</template>
 						<el-form-item label="尝试转换value值为">
@@ -1348,58 +1340,58 @@ defineExpose({ getFormFieldBySource })
 					>
 						<div class="h3"><h3>校验设置</h3></div>
 						<div v-if="showHide(['input', 'password', 'component'], true)">
-						<el-form-item
-							v-for="(item, index) in controlData.customRules"
-							:key="item.type"
-						>
-							<el-input v-model="item.message" placeholder="校验提示信息">
-							<template #prepend>
-								<el-select
-								v-model="item.type"
-								style="width: 80px"
-								@change="rulesSelectChange(item, $event)"
-								>
-								<el-option
-									v-for="list in state.customRulesList"
-									:key="list.type"
-									:label="list.label"
-									:value="list.type"
-								/>
-								</el-select>
-							</template>
-							<template #append>
-								<i
-								class="icon-del"
-								@click="delAddRules(index as number)"
-								></i>
-							</template>
-							</el-input>
-							<el-input
-							v-if="item.type === 'rules'"
-							v-model="item.rules"
-							placeholder="正则表达式"
-							/>
-							<el-input
-							v-if="item.type === 'methods'"
-							v-model="item.methods"
-							placeholder="方法名称，此方法仅适用于导出vue文件"
-							/>
-						</el-form-item>
-						<el-form-item>
-							<el-button @click="addRulesFast">快速添加</el-button>
-							<el-button @click="addRules(state.tooltip.rules)"
-							>编写校验规则
-							<el-tooltip
-								:content="state.tooltip.rules"
-								placement="top"
-								raw-content
+							<el-form-item
+								v-for="(item, index) in controlData.customRules"
+								:key="item.type"
 							>
-								<el-icon>
-								<QuestionFilled />
-								</el-icon>
-							</el-tooltip>
-							</el-button>
-						</el-form-item>
+								<el-input v-model="item.message" placeholder="校验提示信息">
+									<template #prepend>
+										<el-select
+										v-model="item.type"
+										style="width: 80px"
+										@change="rulesSelectChange(item, $event)"
+										>
+										<el-option
+											v-for="list in state.customRulesList"
+											:key="list.type"
+											:label="list.label"
+											:value="list.type"
+										/>
+										</el-select>
+									</template>
+									<template #append>
+										<i
+										class="icon-del"
+										@click="delAddRules(index as number)"
+										></i>
+									</template>
+								</el-input>
+								<el-input
+									v-if="item.type === 'rules'"
+									v-model="item.rules"
+									placeholder="正则表达式"
+								/>
+								<el-input
+									v-if="item.type === 'methods'"
+									v-model="item.methods"
+									placeholder="方法名称，此方法仅适用于导出vue文件"
+								/>
+							</el-form-item>
+							<el-form-item>
+								<el-button @click="addRulesFast">快速添加</el-button>
+								<el-button @click="addRules(state.tooltip.rules)"
+								>编写校验规则
+									<el-tooltip
+										:content="state.tooltip.rules"
+										placement="top"
+										raw-content
+									>
+										<el-icon>
+											<QuestionFilled />
+										</el-icon>
+									</el-tooltip>
+								</el-button>
+							</el-form-item>
 						</div>
 						<el-form-item v-else>
 						<el-checkbox
@@ -1428,142 +1420,145 @@ defineExpose({ getFormFieldBySource })
 						</el-tooltip>
 						</el-button>
 					</div>
-					</el-form>
+				</el-form>
 			</el-tab-pane>
 			<el-tab-pane label="表单配置" name="second">
 				<el-form size="small" class="form">
 					<el-form-item
 						v-for="(item, index) in formAttr.filter(item => !item.hide)"
-						:key="index"
 						:label="item.label"
+						:key="index"
 					>
 						<el-select
-						v-if="item.type === 'select'"
-						v-model="item.value"
-						:filterable="item.key === 'class'"
-						:allow-create="item.key === 'class'"
-						:placeholder="item.placeholder"
-						:clearable="item.clearable"
-						@change="formAttrChange(item)"
+							v-if="item.type === 'select'"
+							v-model="item.value"
+							:filterable="item.key === 'class'"
+							:allow-create="item.key === 'class'"
+							:placeholder="item.placeholder"
+							:clearable="item.clearable"
+							@change="formAttrChange(item)"
 						>
-						<el-option
-							v-for="opts in item.options"
-							:key="opts.label || opts.name"
-							:label="opts.label || opts.name"
-							:value="formatNumber(opts.value ?? opts.id)"
-						/>
+							<el-option
+								
+								v-for="opt in item.options"
+								:key="opt.label || opt.name"
+								:label="opt.label || opt.name"
+								:value="formatNumber(opt.value ?? opt.id)"
+							/>
 						</el-select>
 						<el-switch
-						v-else-if="item.type === 'switch'"
-						v-model="item.value"
-						@input="formAttrChange(item)"
+							v-else-if="item.type === 'switch'"
+							v-model="item.value"
+							@input="formAttrChange(item)"
 						/>
 						<el-input
-						v-else
-						v-model="item.value"
-						:placeholder="item.placeholder"
-						@input="formAttrChange(item)"
+							v-else
+							v-model="item.value"
+							:placeholder="item.placeholder"
+							@input="formAttrChange(item)"
 						/>
 					</el-form-item>
 					<el-form-item v-if="!state.isSearch">
 						<template #label
-						>添加时获取请求
-						<el-tooltip
-							content="新增表单数据时，从接口获取新增初始数据"
-							placement="top"
 						>
-							<el-icon>
-							<QuestionFilled />
-							</el-icon>
-						</el-tooltip>
+							添加时获取请求
+							<el-tooltip
+								content="新增表单数据时，从接口获取新增初始数据"
+								placement="top"
+							>
+								<el-icon>
+									<QuestionFilled />
+								</el-icon>
+							</el-tooltip>
 						</template>
 						<el-switch
-						v-model="formConfig.addLoad"
-						@change="
-							formAttrChange({ key: 'addLoad', path: 'config' }, $event)
-						"
+							v-model="formConfig.addLoad"
+							@change="
+								formAttrChange({ key: 'addLoad', path: 'config' }, $event)
+							"
 						/>
 					</el-form-item>
 					<el-form-item>
 						<el-button @click="editFormStyle(state.tooltip.css)"
-						>编辑表单样式
-						<el-tooltip :content="state.tooltip.css" placement="top">
-							<el-icon>
-							<QuestionFilled />
-							</el-icon>
-						</el-tooltip>
+						>
+							编辑表单样式
+							<el-tooltip :content="state.tooltip.css" placement="top">
+								<el-icon>
+									<QuestionFilled />
+								</el-icon>
+							</el-tooltip>
 						</el-button>
 						<el-button @click="editFormDict(state.tooltip.dict)"
-						>设置数据字典
-						<el-tooltip :content="state.tooltip.dict" placement="top">
-							<el-icon>
-							<QuestionFilled />
-							</el-icon>
-						</el-tooltip>
+						>
+							设置数据字典
+							<el-tooltip :content="state.tooltip.dict" placement="top">
+								<el-icon>
+									<QuestionFilled />
+								</el-icon>
+							</el-tooltip>
 						</el-button>
 					</el-form-item>
 					<template v-if="!state.isSearch">
 						<div class="h3"><h3>接口数据事件</h3></div>
 						<el-form-item label="新增数据保存url">
-						<el-input
-							v-model="formConfig.addUrl"
-							placeholder="表单提交的url，非特殊不需要设置"
-							
-						/>
+							<el-input
+								v-model="formConfig.addUrl"
+								placeholder="表单提交的url，非特殊不需要设置"
+							/>
 						</el-form-item>
 						<el-form-item label="修改数据保存url">
-						<el-input
-							v-model="formConfig.editUrl"
-							placeholder="修改提交的url，非特殊不需要设置"
-						/>
+							<el-input
+								v-model="formConfig.editUrl"
+								placeholder="修改提交的url，非特殊不需要设置"
+							/>
 						</el-form-item>
 						<el-form-item label="获取表单数据url">
-						<el-input
-							v-model="formConfig.requestUrl"
-							placeholder="获取表单数据url，非特殊不需要设置"
-						/>
+							<el-input
+								v-model="formConfig.requestUrl"
+								placeholder="获取表单数据url，非特殊不需要设置"
+							/>
 						</el-form-item>
 						<el-form-item class="event-btn">
-						<el-button
-							@click="
-							eventClick(
-								'beforeRequest',
-								'获取表单初始数据前事件，可修改请求参数'
-							)
-							"
-							>beforeRequest
-						</el-button>
-						<el-button
-							@click="
-							eventClick(
-								'afterResponse',
-								'获取表单初始数据后事件，可对请求返回数据进行处理；也可为字符串，如opt=formatTest'
-							)
-							"
-							>afterResponse
-						</el-button>
-						<el-button
-							@click="
-							eventClick(
-								'beforeSubmit',
-								'表单数据提交前事件，可对提交数据进行处理；也可为字符串，如opt=formatTest'
-							)
-							"
-							>beforeSubmit                
-						</el-button>
-						<el-button
-							@click="eventClick('afterSubmit', '表单数据提交成功事件')"
-							>afterSubmit
-						</el-button>
-						<el-button
-							@click="
-							eventClick(
-								'change',
-								'表单组件值改变事件。当表单某值改变时，可修改其他组件的值；也可为字符串，如opt=formChange,字符串即为/utils/formChangeValue(name,model,key)中的key值'
-							)
-							"
-							>表单组件改变事件change
-						</el-button>
+							<el-button
+								@click="
+								eventClick(
+									'beforeRequest',
+									'获取表单初始数据前事件，可修改请求参数'
+								)
+								"
+								>beforeRequest
+							</el-button>
+							<el-button
+								@click="
+								eventClick(
+									'afterResponse',
+									'获取表单初始数据后事件，可对请求返回数据进行处理；也可为字符串，如opt=formatTest'
+								)
+								"
+								>afterResponse
+							</el-button>
+							<el-button
+								@click="
+								eventClick(
+									'beforeSubmit',
+									'表单数据提交前事件，可对提交数据进行处理；也可为字符串，如opt=formatTest'
+								)
+								"
+								>beforeSubmit
+							</el-button>
+							<el-button
+								@click="eventClick('afterSubmit', '表单数据提交成功事件')"
+								>afterSubmit
+							</el-button>
+							<el-button
+								@click="
+								eventClick(
+									'change',
+									'表单组件值改变事件。当表单某值改变时，可修改其他组件的值；也可为字符串，如opt=formChange,字符串即为/utils/formChangeValue(name,model,key)中的key值'
+								)
+								"
+								>表单组件改变事件change
+							</el-button>
 						</el-form-item>
 					</template>
 				</el-form>
diff --git a/src/components/DesignForm/formControlAttres.vue b/src/components/DesignForm/formControlAttres.vue
new file mode 100644
index 000000000..87305a695
--- /dev/null
+++ b/src/components/DesignForm/formControlAttres.vue
@@ -0,0 +1,1576 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-07-17 11:51:07
+@ 备注: 右侧属性
+-->
+<script lang='ts' setup>
+import { reactive, computed, toRefs, ref, watch, inject } from 'vue'
+import { getRequest } from '@/api/DesignForm'
+import { useDesignFormStore } from '@/store/DesignForm/designForm'
+import validate from './validate'
+import { ElMessage } from 'element-plus'
+import { 
+	formatNumber
+} from '@/api/DesignForm/utils'
+
+import { PublicAtrr } from '@/api/DesignForm/types'
+
+const props = withDefaults(
+    defineProps<{
+      formData: any
+      formConfig: any
+      formOtherData: any
+    }>(),
+    {
+      formConfig: () => {
+        return {}
+      },
+      formOtherData: () => {
+        // 其他不需要保存在formData里的数据
+        return {}
+      }
+    }
+)
+const emits = defineEmits<{
+    (e: 'openDialog', data: any): void
+    (e: 'update:formOtherData', data: any): void
+    //(e: 'update:formData', data: any): void
+    //(e: 'update:formConfig', data: any): void
+}>()
+// eslint-disable-next-line vue/no-dupe-keys
+const { formConfig, formData } = toRefs(props)
+const store = useDesignFormStore() as any
+//const route = useRoute()
+const controlData = computed(() => {
+    return store.controlAttr
+})
+const dataSourceOption = ref([])
+const formAttr = computed(() => {
+const isSearch = state.isSearch
+    return [
+      {
+        label: '表单名称',
+        placeholder: '用于保存的表单名称',
+        value: props.formOtherData.formName,
+        key: 'formName',
+        hide: isSearch
+      },
+      {
+        label: '数据源',
+        placeholder: '请选择数据源',
+        value: formatNumber(props.formOtherData.source),
+        type: 'select',
+        options: dataSourceOption.value,
+        key: 'source',
+        hide: isSearch || !dataSourceOption.value?.length,
+        clearable: true
+      },
+      {
+        label: '表单标识',
+        value: formData.value.name,
+        placeholder: '表单唯一标识，可为空',
+        key: 'name',
+        hide: isSearch
+      },
+      {
+        label: '表单标签宽度',
+        value: formData.value.labelWidth,
+        placeholder: '表单label宽，如180px',
+        key: 'labelWidth'
+      },
+      {
+        label: '表单样式名称',
+        value: formData.value.class,
+        placeholder: '额外添加的表单class类名',
+        key: 'class',
+        type: 'select',
+        options: [
+          { label: '无样式', value: '',name:'',id:'' },
+          { label: '每行两列', value: 'form-row-2',name:'',id:'' },
+          { label: '每行三列', value: 'form-row-3',name:'',id:'' },
+          { label: '每行四列', value: 'form-row-4',name:'',id:'' }
+        ],
+        hide: isSearch,
+        clearable: true
+      },
+      {
+        label: '字段名后添加冒号',
+        value: formData.value.showColon,
+        key: 'showColon',
+        type: 'switch'
+      },
+      {
+        label: '组件尺寸',
+        value: formData.value.size,
+        type: 'select',
+        key: 'size',
+        options: [
+          { label: 'large', value: 'large',name:'',id:'' },
+          { label: 'default', value: 'default',name:'',id:'' },
+          { label: 'small', value: 'small',name:'',id:'' }
+        ]
+      }
+      /*{
+        label: '筛选条件展开/收起',
+        value: formConfig.value.expand,
+        type: 'switch',
+        path: 'config',
+        key: 'expand',
+        hide: !isSearch
+      }*/
+    ]
+})
+const attrList = computed(() => {
+    if (Object.keys(controlData.value).length) {
+      const {
+        control = {},
+        type,
+        name,
+        config = {},
+        item = {},
+        attr = {}
+      }: { control: any;type:any;name:any;item:any;attr:any; config: any } = controlData.value
+      let columnIndex = false // 是否显示序号列
+      if (type === 'table') {
+        // 表格时处理
+        const list = controlData.value && controlData.value.list
+        if (list && list.length > 0) {
+          columnIndex = list[0].type === 'index'
+        }
+      }
+			const  temp= reactive<PublicAtrr[]>([
+        {
+          label: '自定义Class',
+          value: config.className,
+          placeholder: '样式类名',
+          path: 'config.className'
+        },
+        {
+          label: '字段标识',
+          value: name,
+          type:
+            Object.keys(state.dataSourceList).length > 0 ? 'select' : 'text',
+          placeholder: '字段唯一标识，对应数据库',
+          dict: state.dataSourceList,
+          path: 'name',
+          vHide: [
+            'grid',
+            'tabs',
+            'card',
+            'title',
+            'gridChild',
+            'tableColumn',
+            'divider',
+            'txt',
+            'div',
+            'button'
+          ],
+          eventName: 'filedNameKey'
+        },
+        {
+          label: '占位内容',
+          value: control.placeholder,
+          placeholder: 'placeholder',
+          path: 'control.placeholder',
+          vShow: [
+            'password',
+            'input',
+            'textarea',
+            'select',
+            'date',
+            'number',
+            'datePicker',
+            'tinymce',
+            'timePicker',
+            'treeSelect'
+          ]
+        },
+        {
+          label: '按钮类型',
+          value: control.type,
+          path: 'control.type',
+          type: 'select',
+          dict: {
+            primary: 'primary',
+            success: 'success',
+            info: 'info',
+            warning: 'warning',
+            danger: 'danger'
+          },
+          vShow: ['button'],
+          clearable: true
+        },
+        {
+          label: '按钮名称',
+          value: control.label,
+          path: 'control.label',
+          vShow: ['button']
+        },
+        {
+          label: '按钮事件',
+          value: control.key,
+          path: 'control.key',
+          type: 'select',
+          dict: {
+            submit: '提交表单',
+            reset: '重置表单',
+            cancel: '取消返回',
+            none: '无动作(自定义)'
+          },
+          vShow: ['button']
+        },
+        {
+          label: '对齐方式',
+          value: config.textAlign,
+          path: 'config.textAlign',
+          type: 'select',
+          dict: {
+            left: 'left',
+            right: 'right',
+            center: 'center'
+          },
+          vShow: ['button', 'div']
+        },
+        {
+          label: 'label值',
+          value: item.label,
+          path: 'item.label',
+          vHide: [
+            'table',
+            'grid',
+            'tabs',
+            'title',
+            'gridChild',
+            'div',
+            'inputSlot',
+            'flex',
+            'button',
+            'txt'
+          ]
+        },
+        {
+          label: '隐藏label',
+          value: item.showLabel,
+          path: 'item.showLabel',
+          type: 'switch',
+          vHide: [
+            'table',
+            'grid',
+            'tabs',
+            'title',
+            'gridChild',
+            'divider',
+            'card',
+            'div',
+            'inputSlot',
+            'flex',
+            'button',
+            'txt'
+          ]
+        },
+        {
+          label: '帮助信息',
+          value: config.help,
+          path: 'config.help',
+          vHide: [
+            'table',
+            'grid',
+            'tabs',
+            'gridChild',
+            'divider',
+            'div',
+            'inputSlot',
+            'flex',
+            'button',
+            'txt'
+          ]
+        },
+        {
+          label: '表单栅格',
+          value: config.span,
+          placeholder: '表单区域栅格宽，0为自动宽',
+          path: 'config.span',
+          vHide: ['gridChild'],
+          isNum: true
+        },
+        /*{
+          label: '行类样式',
+          value: config.inline,
+          type: 'switch',
+          path: 'config.inline',
+          vShow: ['div']
+        },*/
+        {
+          label: '文本值',
+          value: control.modelValue,
+          placeholder: '支持html',
+          path: 'control.modelValue',
+          vShow: ['txt'],
+          inputStyle: 'textarea'
+        },
+        {
+          label: '设为密码',
+          value: type,
+          type: 'select',
+          dict: { input: '文本', password: '密码' },
+          path: 'type',
+          vShow: ['input', 'password'],
+          vIf: state.isSearch // 搜索模式下隐藏 为true
+        },
+        {
+          label: '文本域高度',
+          value: control.rows,
+          placeholder: '输入框行数',
+          path: 'control.rows',
+          vShow: ['textarea'],
+          isNum: true
+        },
+        {
+          label: '前缀',
+          value: config.prepend,
+          placeholder: '文本前缀',
+          path: 'config.prepend',
+          vShow: ['input', 'password']
+        },
+        {
+          label: '后缀',
+          value: config.append,
+          placeholder: '文本后缀',
+          path: 'config.append',
+          vShow: ['input', 'password']
+        },
+        {
+          label: '状态打开时的值',
+          value: control.activeValue,
+          placeholder: '状态打开时的值',
+          path: 'control.activeValue',
+          vShow: ['switch'],
+          isNum: true
+        },
+        {
+          label: '状态关闭时的值',
+          value: control.inactiveValue,
+          placeholder: '状态关闭时的值',
+          path: 'control.inactiveValue',
+          vShow: ['switch'],
+          isNum: true
+        },
+        // {
+        //   label: '转换格式化值',
+        //   value: config.transform,
+        //   path: 'config.transform',
+        //   type: 'switch',
+        //   vShow: [
+        //     'checkbox',
+        //     'select',
+        //     'switch',
+        //     'cascader',
+        //     'slider',
+        //     'table',
+        //     'flex',
+        //     'treeSelect'
+        //   ]
+        // },
+        {
+          label: '增加按钮文案',
+          value: config.addBtnText,
+          path: 'config.addBtnText',
+          type: 'text',
+          vShow: ['flex', 'table']
+        },
+        {
+          label: '删除按钮文案',
+          value: config.delBtnText,
+          path: 'config.delBtnText',
+          type: 'text',
+          vShow: ['flex', 'table']
+        },
+        {
+          label: '是否多选',
+          value: control.multiple,
+          path: 'control.multiple',
+          type: 'switch',
+          vShow: ['select', 'treeSelect'],
+          eventName: 'selectMultiple'
+        },
+        {
+          label: '可清空',
+          value: control.clearable,
+          path: 'control.clearable',
+          type: 'switch',
+          vShow: ['select']
+        },
+        {
+          label: '是否禁用',
+          value: control.disabled,
+          path: 'control.disabled',
+          type: 'switch',
+          vShow: [
+            'input',
+            'password',
+            'textarea',
+            'radio',
+            'checkbox',
+            'select',
+            'date',
+            'switch',
+            'number',
+            'cascader',
+            'upload',
+            'rate',
+            'tinymce',
+            'treeSelect'
+          ],
+          vIf: state.isSearch
+        },
+        {
+          label: '是否禁用编辑',
+          value: config.editDisabled,
+          path: 'config.editDisabled',
+          type: 'switch',
+          vShow: [
+            'input',
+            'password',
+            'textarea',
+            'radio',
+            'checkbox',
+            'select',
+            'date',
+            'switch',
+            'number',
+            'cascader',
+            'upload',
+            'treeSelect',
+            'table',
+            'flex'
+          ],
+          vIf: state.isSearch
+        },
+        {
+          label: '添加页隐藏',
+          value: config.disabledAdd,
+          path: 'config.disabledAdd',
+          type: 'switch',
+          vIf: state.isSearch,
+          vHide: ['inputSlot']
+        },
+        {
+          label: '编辑页隐藏',
+          value: config.disabledEdit,
+          path: 'config.disabledEdit',
+          type: 'switch',
+          vIf: state.isSearch,
+          vHide: ['inputSlot']
+        },
+        {
+          label: '详情页隐藏',
+          value: config.disabledDetail,
+          path: 'config.disabledDetail',
+          type: 'switch',
+          vIf: state.isSearch,
+          vHide: ['inputSlot']
+        },
+        {
+          label: '设为Input输入框的前/后缀',
+          value: type === 'inputSlot',
+          path: '',
+          type: 'switch',
+          vShow: ['select', 'inputSlot'],
+          eventName: 'setInputSlot'
+        },
+        {
+          label: '标题',
+          value: control.modelValue,
+          path: 'control.modelValue',
+          vShow: ['title']
+        },
+        {
+          label: '占据的列数span',
+          value: attr.span,
+          path: 'attr.span',
+          vShow: ['gridChild'],
+          eventName: 'formatNumber',
+          isNum: true
+        },
+        {
+          label: '左侧的间隔格数offset',
+          value: attr.offset,
+          path: 'attr.offset',
+          vShow: ['gridChild'],
+          eventName: 'formatNumber',
+          isNum: true
+        },
+        {
+          label: '向右移动格数push',
+          value: attr.push,
+          path: 'attr.push',
+          vShow: ['gridChild'],
+          eventName: 'formatNumber',
+          isNum: true
+        },
+        {
+          label: '向左移动格数pull',
+          value: attr.pull,
+          path: 'attr.pull',
+          vShow: ['gridChild'],
+          eventName: 'formatNumber',
+          isNum: true
+        },
+        {
+          label: '序号列',
+          value: columnIndex,
+          type: 'switch',
+          vShow: ['table'],
+          eventName: 'tableColumn1'
+        },
+        /*{
+        label: '操作列',
+        value: columnOperate,
+        type: 'switch',
+        vShow: ['table'],
+        eventName: 'tableColumn2'
+      },*/
+        {
+          label: '组件名',
+          value: config.componentName,
+          placeholder: '全局注册的组件名称',
+          path: 'config.componentName',
+          vShow: ['component']
+        },
+        {
+          label: '上传地址',
+          value: control.action,
+          placeholder: '图片/文件上传地址,可不填有默认值',
+          path: 'control.action',
+          vShow: ['upload']
+        },
+        {
+          label: '文件字段名',
+          value: control.name,
+          placeholder: '上传的文件字段名,默认file',
+          path: 'control.name',
+          vShow: ['upload']
+        },
+        {
+          label: '列表类型',
+          value: control.listType,
+          type: 'select',
+          dict: {
+            text: 'text',
+            picture: 'picture',
+            'picture-card': 'picture-card'
+          },
+          path: 'control.listType',
+          vShow: ['upload']
+        },
+        {
+          label: '提示文字',
+          value: config.tip,
+          placeholder: '提示说明文字',
+          path: 'config.tip',
+          vShow: ['upload']
+        },
+        {
+          label: '按钮文本',
+          value: config.btnText,
+          placeholder: '上传按钮文本',
+          path: 'config.btnText',
+          vShow: ['upload']
+        },
+        {
+          label: 'direction',
+          type: 'select',
+          dict: { horizontal: 'horizontal', vertical: 'vertical' },
+          placeholder: '分割线方向，默认horizontal',
+          value: control.direction,
+          path: 'control.direction',
+          vShow: ['divider']
+        },
+        {
+          label: 'border-style',
+          placeholder: '分隔符样式，默认solid',
+          value: control.borderStyle,
+          path: 'control.borderStyle',
+          vShow: ['divider']
+        },
+        {
+          label: 'content-position',
+          type: 'select',
+          dict: { left: 'left', right: 'right', center: 'center' },
+          value: control.contentPosition,
+          path: 'control.contentPosition',
+          vShow: ['divider']
+        },
+        {
+          label: '最小值',
+          value: control.min,
+          path: 'control.min',
+          vShow: ['slider'],
+          eventName: 'formatNumber',
+          isNum: true
+        },
+        {
+          label: '最大值',
+          value: control.max,
+          path: 'control.max',
+          vShow: ['rate', 'slider'],
+          eventName: 'formatNumber',
+          isNum: true
+        },
+        {
+          label: '步长',
+          value: control.step,
+          path: 'control.step',
+          vShow: ['slider'],
+          eventName: 'formatNumber',
+          isNum: true
+        },
+        {
+          label: 'type',
+          value: control.type,
+          path: 'control.type',
+          vShow: ['datePicker'],
+          type: 'select',
+          placeholder: '显示类型',
+          dict: {
+            year: 'year',
+            month: 'month',
+            date: 'date',
+            datetime: 'datetime',
+            week: 'week',
+            datetimerange: 'datetimerange',
+            daterange: 'daterange',
+            monthrange: 'monthrange'
+          }
+        },
+        {
+          label: 'format',
+          value: control.format,
+          path: 'control.format',
+          vShow: ['datePicker', 'timePicker'],
+          placeholder: '显示在输入框中的格式'
+        },
+        {
+          label: 'color-format',
+          value: control.colorFormat,
+          path: 'control.colorFormat',
+          type: 'select',
+          placeholder: '写入 v-model 的颜色的格式',
+          dict: { hsl: 'hsl', hsv: 'hsv', hex: 'hex', rgb: 'rgb' },
+          vShow: ['colorPicker']
+        },
+        {
+          label: '文本高度',
+          value: control.height,
+          path: 'control.height',
+          placeholder: '文本高度(预览查看效果)',
+          vShow: ['tinymce']
+        },
+        {
+          label: '文本宽度',
+          value: control.width,
+          path: 'control.width',
+          placeholder: '文本宽度(预览查看效果)',
+          vShow: ['tinymce']
+        },
+        {
+          label: '图片上传地址',
+          value: control.imgUrl,
+          path: 'control.imgUrl',
+          placeholder: '图片上传地址',
+          vShow: ['tinymce']
+        },
+        {
+          label: '附件上传地址',
+          value: control.blobUrl,
+          path: 'control.blobUrl',
+          placeholder: '附件上传地址',
+          vShow: ['tinymce']
+        },
+        {
+          label: '显示模式',
+          value: config.style,
+          path: 'config.style',
+          placeholder: '显示风格(预览查看效果)',
+          type: 'select',
+          dict: { default: 'default', simple: 'simple', label:'', name:'' },
+          vShow: ['tinymce'],
+        }
+      ]
+			)
+      // 过滤显示对应的值
+      return temp.filter((item: any) => {
+        let hasFilter = true
+        if (item.vShow) {
+          hasFilter = item.vShow.includes(type)
+        }
+        if (item.vHide) {
+          hasFilter = !item.vHide.includes(type)
+        }
+        if (item.vIf) {
+          // 不显示vif＝true的
+          hasFilter = false
+        }
+        return hasFilter
+      })
+    } else {
+      return []
+    }
+  })
+  const designType = inject('formDesignType')
+  const state = reactive({
+    dataSourceList: [],
+    customRulesList: [
+      ...validate,
+      {
+        type: 'rules',
+        label: '自定义正则'
+      },
+      {
+        type: 'methods',
+        label: '自定义方法'
+      }
+    ], // 自定义校验规则
+    isSearch: designType === 'search',
+    tooltip: {
+      css: '当前表单应用页的样式，类似于.vue文件中的style scoped中的样式',
+      dict: '数据字典，用于匹配多选组、下拉选择等，提供动态获取Options接口字典数据，一般不设置，从接口dict获取。json格式："sex":{"0":"男","1":"女"}',
+      rules:
+        "可参考UI组件表单校验，<a href='https://element-plus.gitee.io/zh-CN/component/form.html#%E8%A1%A8%E5%8D%95%E6%A0%A1%E9%AA%8C' target='_blank' style='color:red'>详情点击</a>",
+      props: '可添加当前组件所有prop属性及事件方法'
+    },
+    tabsName: 'second'
+  })
+  watch(
+    () => store.activeKey,
+    (val: string) => {
+      if (val) {
+        // 有值时自动跳到第一项
+        state.tabsName = 'first'
+      }
+    }
+  )
+  const controlChange = (obj: any, val: any) => {
+    // select多选属性，
+    switch (obj.eventName) {
+      case 'selectMultiple':
+        if (val) {
+          // 多选，将值改为数组
+          controlData.value.control.modelValue = []
+        } else {
+          // 单选
+          controlData.value.control.modelValue = ''
+        }
+        break
+      case 'tableColumn1':
+        tableColumnAdd(val)
+        break
+      case 'formatNumber':
+        // val = parseInt(val) // 将值转数值
+        break
+      case 'filedNameKey':
+        // 选择字段标识时，同时修改显示标题
+        // 根据value找key
+        if (obj.type === 'select') {
+          state.dataSourceList.forEach((item: any) => {
+            if (item.name === val) {
+              if (controlData.value.item) {
+                controlData.value.item.label = item.label
+              }
+              controlData.value.name = item.label
+            }
+          })
+        }
+        break
+      case 'setInputSlot':
+        if (val) {
+          // 将类型改为inputSlot
+          controlData.value.type = 'inputSlot'
+          ElMessage.success(
+            `请在对应的Input输入框属性前后缀设置key:${controlData.value.name}`
+          )
+        } else {
+          controlData.value.type = 'select'
+        }
+        // 这里会报错Cannot set properties of null (setting 'checked')
+        // 因value:type===inputSlot，这里使用了v-model，影响不大暂不处理
+        break
+    }
+    if (obj.path) {
+      const newVal = obj.isNum ? formatNumber(val) : val // 类型为数字时转整数
+      obj.path && getPropByPath(controlData.value, obj.path, newVal)
+    }
+  }
+  // 修改指定路径下的值
+  const getPropByPath = (obj: any, path: string, val: any) => {
+    let tempObj = obj
+    const keyArr = path.split('.')
+    let i = 0
+    for (i; i < keyArr.length - 1; i++) {
+      const key = keyArr[i]
+      if (key in tempObj) {
+        tempObj = tempObj[key]
+      } else {
+        throw new Error(`${key} is undefined`)
+        // break
+      }
+    }
+    const key = keyArr[i]
+    const value = tempObj[keyArr[i]]
+    // 检查最后一级是否存在
+    /*if (!(key in tempObj)) {
+    throw new Error(`${key} is undefined`)
+  }*/
+    if (val !== undefined) {
+      tempObj[key] = val
+    }
+    return {
+      obj: tempObj,
+      key: key,
+      value: value
+    }
+  }
+  // 属性设置相关结束
+  // 多选固定选项删除
+  const delSelectOption = (index: number, type?: string) => {
+    if (type === 'tabs') {
+      controlData.value.columns.splice(index, 1)
+    } else {
+      controlData.value.options.splice(index, 1)
+    }
+  }
+  // 多选固定选项增加
+  const addSelectOption = (type: any) => {
+    if (controlData.value.type === 'cascader') {
+      // 级联时打开弹窗口
+      openAttrDialog('cascader')
+    } else if (controlData.value.type === 'treeSelect') {
+      openAttrDialog('treeSelect', '编辑组件下拉选项数据')
+    } else {
+      if (type === 'tabs') {
+        controlData.value.columns.push({
+          label: '标签名称',
+          list: []
+        })
+      } else {
+        controlData.value.options.push({
+          label: '',
+          value: ''
+        })
+      }
+    }
+  }
+  // 更多属性弹窗
+  const openAttrDialog = (type?: string, tooltip?: string) => {
+    let editData = controlData.value.control
+    if (controlData.value.type === 'button') {
+      // 按钮组件编辑属性
+      editData = controlData.value.config
+      type = 'button'
+    }
+    switch (type) {
+      case 'treeSelect':
+        editData = controlData.value.control.data
+        break
+      case 'cascader':
+        editData = controlData.value.options
+        break
+      case 'optionsParams': // 选项请求附加参数
+        editData = controlData.value.config.beforeRequest
+        // params.codeType = 'json'
+        break
+      case 'optionsResult':
+        editData = controlData.value.config.afterResponse
+        break
+    }
+const emitsParams = {
+    content: editData,
+    title: tooltip,
+    type: type,
+    direction: 'ltr',
+    callback: (result: any) => {
+        switch (type) {
+          case 'treeSelect':
+            controlData.value.control.data = result
+            break
+          case 'cascader':
+            controlData.value.options = result
+            break
+          case 'optionsParams':
+            controlData.value.config.beforeRequest = result
+            break
+          case 'optionsResult':
+            controlData.value.config.afterResponse = result
+            break
+          case 'button':
+            controlData.value.config = result
+            break
+          default:
+            controlData.value.control = {}
+            Object.assign(controlData.value.control, result)
+        }
+      }
+    }
+    emits('openDialog', emitsParams)
+}
+// 必填校验
+const requiredChange = (val: any) => {
+    if (!controlData.value.item?.rules) {
+      	controlData.value.item.rules = []
+    }
+    if (val) {
+		controlData.value.item.rules.push({
+			required: true,
+			message: '必填项',
+			trigger: 'change'
+		})
+    } else {
+      	controlData.value.item.rules.splice(0, 1)
+    }
+}
+  // 添加校验规则
+const addRules = (tooltip: string) => {
+    if (!controlData.value.item?.rules) {
+      	controlData.value.item.rules = []
+    }
+    const params = {
+		content: controlData.value.item?.rules,
+		title: tooltip,
+		direction: 'ltr',
+		callback: (result: any) => {
+			Object.assign(controlData.value.item.rules, result)
+		}
+    }
+    emits('openDialog', params)
+}
+// 根据不同类型判断是否显示当前属性
+const showHide = (type: string[], show?: boolean) => {
+    // show=true 条件成立显示，false符合条件隐藏
+    if (
+		(type && type.length === 0) ||
+		Object.keys(controlData.value).length === 0
+    ) {
+      	return false
+    }
+    const index = type.indexOf(controlData.value.type)
+    return show ? index !== -1 : index === -1
+}
+// 子表时添加序号和操作列
+const tableColumnAdd = (val: string) => {
+    const item = {
+		name: 'index',
+		type: 'index',
+		item: {
+			label: '序号'
+		},
+		control: {},
+		config: {}
+    }
+    if (val) {
+      	controlData.value.list.unshift(item)
+    } else {
+      	controlData.value.list.splice(0, 1)
+    }
+}
+// 校验规则必填勾选设置，存在校验规则时勾选
+const checkboxRequired = computed(() => {
+    const val = controlData.value && controlData.value.item?.rules
+    return val && val.length > 0
+})
+// 快速添加一条校验规则
+const addRulesFast = () => {
+    if (!controlData.value.customRules) {
+      	controlData.value.customRules = []
+    }
+    controlData.value.customRules.push({
+		type: 'required',
+		message: '必填项',
+		trigger: 'blur'
+    })
+}
+// 删除一条校验规则
+const delAddRules = (index: number) => {
+    controlData.value.customRules &&controlData.value.customRules.splice(index, 1)
+}
+// 编辑表单样式
+const editFormStyle = (tooltip: string) => {
+    emits('openDialog', {
+		codeType: 'css',
+		direction: 'ltr',
+		type: 'css',
+		title: tooltip
+    })
+}
+const editFormDict = (tooltip: string) => {
+    emits('openDialog', {
+		type: 'dict',
+		direction: 'ltr',
+		codeType: 'json',
+		title: tooltip
+    })
+}
+// 根据选定数据源获取表单字段
+const getFormFieldBySource = (id?: string) => {
+    if (state.isSearch) {
+		// 搜索设计这里不需要数据源
+		return
+    }
+    const source = id
+    if (source) {
+		getRequest('sourceById', { id: source })
+			.then(res => {
+				// console.log(res)
+				const tableData = res.data.result?.tableData
+				if (tableData && tableData.length) {
+					state.dataSourceList = tableData.filter(
+					(item: any) => item.enterable
+					)
+				}
+			})                                                                                                   
+			.catch(res => {
+				console.log(res)                                                  
+			})
+    }
+}
+const getDataSource = () => {
+    // 获取数据源，表单设计才加载，搜索设置不需要
+    if (!state.isSearch) {
+			getRequest('sourceList').then((res: any) => {
+				dataSourceOption.value = res.data.list
+				//dataSourceOption.value.unshift({ name: '无', id: '' })
+				// console.log("res.data---->",res.data)
+			})
+    }
+}
+// 表单属性修改
+const formAttrChange = (obj: any, val?: any) => {
+    if (obj.key === 'source') {
+		getFormFieldBySource(obj.value) // 改变了数据源了，重新请求数据
+		// 清空设计区已选择的组件，再一次选择时字段标识才会变
+		store.setActiveKey('')
+		store.setControlAttr({})
+    }
+    if (['formName', 'source'].includes(obj.key)) {
+		emits(
+			'update:formOtherData',
+			Object.assign(props.formOtherData, { [obj.key]: obj.value })
+		)
+		return
+    }
+    if (obj.path === 'config') {
+      	formConfig.value[obj.key] = obj.value || val
+    } else {
+      	formData.value[obj.key] = obj.value
+    }
+}
+// 返回选项配置提示
+const getOptionPlaceholder = (type: number) => {
+    switch (type) {
+      case 1:
+        return '数据源接口URL,可带参数'
+      case 2:
+        return '字典key，默认为字段标识'
+    }
+    return ''
+}
+// 快速添加校验规则改变时，填写默认的校验提示信息
+const rulesSelectChange = (item: any, val: string) => {
+    const filter = validate.filter(item => item.type === val)
+    if (filter && filter.length) {
+      	item.message = filter[0].message
+    }
+}
+// options动态选项数据源请求时
+const optionsEvent = (type: string, tooltip?: string) => {
+    openAttrDialog(type, tooltip)
+}
+const eventClick = (type: string, tooltip?: string) => {
+    emits('openDialog', { type: type, title: tooltip, direction: 'ltr' })
+}
+getDataSource()
+defineExpose({ getFormFieldBySource })
+</script>
+<template>
+	<div class="sidebar-tools">
+		<el-tabs v-model="state.tabsName">
+			<el-tab-pane label="字段配置" name="first">
+				<el-form size="small" class="form">
+					<div class="h3"><h3>通用属性</h3></div>
+					<template v-for="(item, index) in attrList" :key="index">
+						<el-form-item :label="item.label">
+							<el-select
+								v-if="item.type === 'select'"
+								v-model="item.value"
+								:placeholder="item.placeholder"
+								
+								:filterable="item.path === 'name'"
+								:allow-create="item.path === 'name'"
+								:clearable="item.clearable"
+								@change="controlChange(item, $event)"
+							>
+								<el-option
+								v-for="(opt, key) in item.dict"
+								:key="key"
+								:value="item.path === 'name' ? opt.name : key"
+								:label="
+									item.path === 'name' ? `${opt.label}(${opt.name})` : opt
+								"
+								/>
+							</el-select>
+							<el-switch
+								v-else-if="item.type === 'switch'"
+								v-model="item.value"
+								@change="controlChange(item, $event)"
+							/>
+							<el-input
+								v-else
+								v-model="item.value"
+								:type="item.inputStyle"
+								
+								:placeholder="item.placeholder"
+								@input="controlChange(item, $event)"
+							/>
+						</el-form-item>
+					</template>
+					<template v-if="controlData.config">
+						<el-form-item label="联动条件">
+							<el-switch v-model="controlData.config.linkKey" />
+						</el-form-item>
+						<template v-if="controlData.config.linkKey">
+							<el-form-item>
+								<el-input
+								v-model="controlData.config.linkValue"
+								type="textarea"
+								placeholder="表达式如: $.input>1 $表示为当前表单数据，input为字段标识"
+								/>
+							</el-form-item>
+							<el-form-item
+								v-if="
+								showHide(
+									[
+									'input',
+									'textarea',
+									'radio',
+									'checkbox',
+									'select',
+									'date',
+									'switch',
+									'number',
+									'cascader',
+									'slider',
+									'datePicker',
+									'timePicker',
+									'colorPicker',
+									'inputNumber',
+									'rate',
+									'treeSelect'
+									],
+									true
+								)
+								"
+								label="联动结果"
+							>
+								<el-radio-group
+								
+								v-model="controlData.config.linkResult"
+								class="option-radio"
+								>
+									<el-radio label="hidden">隐藏(默认)</el-radio>
+									<el-radio label="disabled">禁用</el-radio>
+								</el-radio-group>
+							</el-form-item>
+						</template>
+					</template>
+					<template v-if="showHide(['tabs'], true)">
+						<div class="h3"><h3>标签配置项</h3></div>
+						<el-form-item
+						v-for="(item, index) in controlData.columns"
+						:key="index"
+						>
+							<el-col :span="12">
+								<el-input v-model="item.label" placeholder="标签配置项" />
+							</el-col>
+							<el-col :span="2" :offset="1">
+								<i
+								class="icon-del"
+								@click="delSelectOption(index as number, 'tabs')"
+								></i>
+							</el-col>
+						</el-form-item>
+						<el-form-item>
+							<el-button @click="addSelectOption('tabs')">增加标签</el-button>
+						</el-form-item>
+					</template>
+					<div
+						v-if="
+						showHide(
+							[
+							'radio',
+							'select',
+							'checkbox',
+							'cascader',
+							'inputSlot',
+							'treeSelect'
+							],
+							true
+						)
+						"
+					>
+						<div class="h3"><h3>选项配置</h3></div>
+						<el-form-item v-if="showHide(['select'], true)" label="添加全部项">
+							<el-input
+								v-model="controlData.config.addAll"
+								placeholder="请输入全部项文案"
+							/>
+						</el-form-item>
+						<el-form-item label="选项数据源">
+							<el-select
+								v-model="controlData.config.optionsType"
+								@change="controlData.config.optionsFun = ''"
+							>
+								<el-option :value="0" label="固定选项" />
+								<el-option :value="1" label="数据源" />
+								<el-option :value="2" label="接口字典" />
+							</el-select>
+						</el-form-item>
+						<template v-if="controlData.config.optionsType === 0">
+							<div v-if="controlData.type !== 'cascader'">
+								<el-form-item
+								v-for="(item, index) in controlData.options"
+								:key="index"
+								>
+								<el-col :span="10">
+									<el-input v-model="item.label" placeholder="选项标签" />
+								</el-col>
+								<el-col :span="10" :offset="1">
+									<el-input v-model="item.value" placeholder="选项值" />
+								</el-col>
+								<el-col :span="2" :offset="1">
+									<i
+									class="icon-del"
+									@click="delSelectOption(index as number)"
+									></i>
+								</el-col>
+								</el-form-item>
+							</div>
+							<el-form-item>
+								<el-button @click="addSelectOption"
+								>{{ controlData.type === 'cascader' ? '编辑' : '新增' }}
+								</el-button>
+							</el-form-item>
+						</template>
+						<template v-else>
+							<el-form-item>
+								<el-input
+								v-model="controlData.config.optionsFun"
+								:placeholder="
+									getOptionPlaceholder(controlData.config.optionsType)
+								"
+								>
+									<template
+										v-if="controlData.config.optionsType === 1"
+										#prepend
+									>
+										<el-select
+										v-model="controlData.config.method"
+										style="width: 80px"
+										>
+										<el-option label="get" value="get" />
+										<el-option label="post" value="post" />
+										</el-select>
+									</template>
+								</el-input>
+							</el-form-item>
+						<template v-if="controlData.config.optionsType === 1">
+							<el-form-item label="指定label属性值">
+								<el-input
+									v-model="controlData.config.label"
+									placeholder="返回数据中没有label时可设置"
+								/>
+							</el-form-item>
+							<el-form-item label="指定value属性值">
+								<el-input
+									v-model="controlData.config.value"
+									placeholder="返回数据中没有value时可设置"
+								/>
+							</el-form-item>
+						</template>
+							<el-form-item v-if="controlData.config.optionsType === 1">
+								<el-button
+								@click="
+									optionsEvent(
+									'optionsParams',
+									'请求前处理事件，参数(data,route,form) data请求参数,route页面路由,form表单值'
+									)
+								"
+								>beforeRequest
+								</el-button>
+								<el-button
+								@click="
+									optionsEvent(
+									'optionsResult',
+									'请求返回结束处理；，也可为字符串，如opt=formatTest'
+									)
+								"
+								>afterResponse
+								</el-button>
+							</el-form-item>
+						</template>
+						<el-form-item label="尝试转换value值为">
+							<el-select
+								v-model="controlData.config.transformData"
+								placeholder="默认为number"
+							>
+								<el-option value="none">不转换</el-option>
+								<el-option value="number">number</el-option>
+								<el-option value="string">string</el-option>
+							</el-select>
+						</el-form-item>
+					</div>
+					<template
+						v-if="
+						!state.isSearch &&
+						showHide([
+							'txt',
+							'title',
+							'table',
+							'grid',
+							'tabs',
+							'card',
+							'switch',
+							'gridChild',
+							'tableColumn',
+							'divider',
+							'div',
+							'button'
+						])
+						"
+					>
+						<div class="h3"><h3>校验设置</h3></div>
+						<div v-if="showHide(['input', 'password', 'component'], true)">
+						<el-form-item
+							v-for="(item, index) in controlData.customRules"
+							:key="item.type"
+						>
+							<el-input v-model="item.message" placeholder="校验提示信息">
+							<template #prepend>
+								<el-select
+								v-model="item.type"
+								style="width: 80px"
+								@change="rulesSelectChange(item, $event)"
+								>
+								<el-option
+									v-for="list in state.customRulesList"
+									:key="list.type"
+									:label="list.label"
+									:value="list.type"
+								/>
+								</el-select>
+							</template>
+							<template #append>
+								<i
+								class="icon-del"
+								@click="delAddRules(index as number)"
+								></i>
+							</template>
+							</el-input>
+							<el-input
+							v-if="item.type === 'rules'"
+							v-model="item.rules"
+							placeholder="正则表达式"
+							/>
+							<el-input
+							v-if="item.type === 'methods'"
+							v-model="item.methods"
+							placeholder="方法名称，此方法仅适用于导出vue文件"
+							/>
+						</el-form-item>
+						<el-form-item>
+							<el-button @click="addRulesFast">快速添加</el-button>
+							<el-button @click="addRules(state.tooltip.rules)"
+							>编写校验规则
+							<el-tooltip
+								:content="state.tooltip.rules"
+								placement="top"
+								raw-content
+							>
+								<el-icon>
+								<QuestionFilled />
+								</el-icon>
+							</el-tooltip>
+							</el-button>
+						</el-form-item>
+						</div>
+						<el-form-item v-else>
+						<el-checkbox
+							:model-value="checkboxRequired"
+							@change="requiredChange"
+							>必填
+						</el-checkbox>
+						<el-input
+							v-if="controlData.item?.rules && controlData.item?.rules[0]"
+							v-model="controlData.item.rules[0].message"
+							placeholder="自定义必填错误提示"
+						/>
+						</el-form-item>
+					</template>
+					<div v-if="showHide(['grid', 'card', 'gridChild', 'divider', 'div'])">
+						<div class="h3"><h3>其他属性</h3></div>
+
+						<el-button
+						size="small"
+						@click="openAttrDialog('', state.tooltip.props)"
+						>编辑属性
+						<el-tooltip :content="state.tooltip.props" placement="top">
+							<el-icon>
+							<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+						</el-button>
+					</div>
+					</el-form>
+			</el-tab-pane>
+			<el-tab-pane label="表单配置" name="second">
+				<el-form size="small" class="form">
+					<el-form-item
+						v-for="(item, index) in formAttr.filter(item => !item.hide)"
+						:key="index"
+						:label="item.label"
+					>
+						<el-select
+						v-if="item.type === 'select'"
+						v-model="item.value"
+						:filterable="item.key === 'class'"
+						:allow-create="item.key === 'class'"
+						:placeholder="item.placeholder"
+						:clearable="item.clearable"
+						@change="formAttrChange(item)"
+						>
+						<el-option
+							v-for="opts in item.options"
+							:key="opts.label || opts.name"
+							:label="opts.label || opts.name"
+							:value="formatNumber(opts.value ?? opts.id)"
+						/>
+						</el-select>
+						<el-switch
+						v-else-if="item.type === 'switch'"
+						v-model="item.value"
+						@input="formAttrChange(item)"
+						/>
+						<el-input
+						v-else
+						v-model="item.value"
+						:placeholder="item.placeholder"
+						@input="formAttrChange(item)"
+						/>
+					</el-form-item>
+					<el-form-item v-if="!state.isSearch">
+						<template #label
+						>添加时获取请求
+						<el-tooltip
+							content="新增表单数据时，从接口获取新增初始数据"
+							placement="top"
+						>
+							<el-icon>
+							<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+						</template>
+						<el-switch
+						v-model="formConfig.addLoad"
+						@change="
+							formAttrChange({ key: 'addLoad', path: 'config' }, $event)
+						"
+						/>
+					</el-form-item>
+					<el-form-item>
+						<el-button @click="editFormStyle(state.tooltip.css)"
+						>编辑表单样式
+						<el-tooltip :content="state.tooltip.css" placement="top">
+							<el-icon>
+							<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+						</el-button>
+						<el-button @click="editFormDict(state.tooltip.dict)"
+						>设置数据字典
+						<el-tooltip :content="state.tooltip.dict" placement="top">
+							<el-icon>
+							<QuestionFilled />
+							</el-icon>
+						</el-tooltip>
+						</el-button>
+					</el-form-item>
+					<template v-if="!state.isSearch">
+						<div class="h3"><h3>接口数据事件</h3></div>
+						<el-form-item label="新增数据保存url">
+						<el-input
+							v-model="formConfig.addUrl"
+							placeholder="表单提交的url，非特殊不需要设置"
+							
+						/>
+						</el-form-item>
+						<el-form-item label="修改数据保存url">
+						<el-input
+							v-model="formConfig.editUrl"
+							placeholder="修改提交的url，非特殊不需要设置"
+						/>
+						</el-form-item>
+						<el-form-item label="获取表单数据url">
+						<el-input
+							v-model="formConfig.requestUrl"
+							placeholder="获取表单数据url，非特殊不需要设置"
+						/>
+						</el-form-item>
+						<el-form-item class="event-btn">
+						<el-button
+							@click="
+							eventClick(
+								'beforeRequest',
+								'获取表单初始数据前事件，可修改请求参数'
+							)
+							"
+							>beforeRequest
+						</el-button>
+						<el-button
+							@click="
+							eventClick(
+								'afterResponse',
+								'获取表单初始数据后事件，可对请求返回数据进行处理；也可为字符串，如opt=formatTest'
+							)
+							"
+							>afterResponse
+						</el-button>
+						<el-button
+							@click="
+							eventClick(
+								'beforeSubmit',
+								'表单数据提交前事件，可对提交数据进行处理；也可为字符串，如opt=formatTest'
+							)
+							"
+							>beforeSubmit                
+						</el-button>
+						<el-button
+							@click="eventClick('afterSubmit', '表单数据提交成功事件')"
+							>afterSubmit
+						</el-button>
+						<el-button
+							@click="
+							eventClick(
+								'change',
+								'表单组件值改变事件。当表单某值改变时，可修改其他组件的值；也可为字符串，如opt=formChange,字符串即为/utils/formChangeValue(name,model,key)中的key值'
+							)
+							"
+							>表单组件改变事件change
+						</el-button>
+						</el-form-item>
+					</template>
+				</el-form>
+			</el-tab-pane>
+		</el-tabs>
+	</div>
+</template>
+<style  lang='scss' scoped>
+
+</style>
diff --git a/src/components/DesignForm/public/form/form.vue b/src/components/DesignForm/public/form/form.vue
index ec8c5d5ab..3d76b2f0b 100644
--- a/src/components/DesignForm/public/form/form.vue
+++ b/src/components/DesignForm/public/form/form.vue
@@ -53,14 +53,18 @@ const props = withDefaults(
       dict: () => {
         return {}
       },
-      isSearch: false
+      isSearch: false,
+			issave:{
+				type:Boolean,
+				default:true
+			},
     }
 )
 const emits = defineEmits<{
   (e: 'btnClick', type: string): void
   (e: 'change', val: any): void // 表单组件值发生变化时
+	(e: 'update:issave', type: boolean): void
 }>()
-
 const route = useRoute()
 const router = useRouter()
 
@@ -93,6 +97,14 @@ const setWindowEvent = (bool?: boolean) => {
       }
     }
   }
+watch(
+	() => props.formData,
+    () => {
+			console.log("监听数据----->1",props.formData)
+			emits('update:issave', false)
+    },
+    { deep: true }
+)
   watch(
     () => props.formData.config,
     () => {
diff --git a/src/components/DesignForm/public/form/formGroup.vue b/src/components/DesignForm/public/form/formGroup.vue
index 6a153ea43..43552beb8 100644
--- a/src/components/DesignForm/public/form/formGroup.vue
+++ b/src/components/DesignForm/public/form/formGroup.vue
@@ -423,7 +423,7 @@ const dataList = ref<any>(props.data)
             </div>
             <div class="drag-move icon-move"></div>
           </div>
-          <div class="tooltip">{{ element.name }}</div>
+          <div class="tooltip" style="display: none;">{{ element.name }}</div>
         </template>
 
 
diff --git a/src/components/DesignForm/public/headTools.vue b/src/components/DesignForm/public/headTools.vue
index 7833142bd..35eed17c8 100644
--- a/src/components/DesignForm/public/headTools.vue
+++ b/src/components/DesignForm/public/headTools.vue
@@ -31,8 +31,9 @@ const btnList = computed(() => {
 		{ 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: 'vue', label: '导出vue文件', key: 4 },
+		{ icon: 'save', label: '保存', key: 5 },
+		{ icon: 'close', label: '关闭', key: 6 }
     ]
 	if (props.showKey?.length) {
 		// 按照指定的key显示
@@ -54,10 +55,11 @@ const btnList = computed(() => {
 		<slot></slot>
 		<el-button
 			link
-			type="primary"
+			
 			@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>
diff --git a/src/utils/DesignForm/form.ts b/src/utils/DesignForm/form.ts
index e7f5f092b..bb5f37103 100644
--- a/src/utils/DesignForm/form.ts
+++ b/src/utils/DesignForm/form.ts
@@ -57,6 +57,7 @@ export function obj2string(o: any) {
 }
 
 export function objToStringify(obj: any, isBeautify?: boolean) {
+	// console.log("EDITTYPE--->",EDITTYPE,isBeautify)
   if (EDITTYPE === 'javascript') {
     if (isBeautify) {
       return jsBeautify('opt=' + obj2string(obj), {
diff --git a/src/views/sysworkflow/codepage/createform.vue b/src/views/sysworkflow/codepage/createform.vue
new file mode 100644
index 000000000..3aeaf316a
--- /dev/null
+++ b/src/views/sysworkflow/codepage/createform.vue
@@ -0,0 +1,562 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2023-05-26 10:35:30
+@ 备注: 
+-->
+<script lang='ts' setup>
+import '@/assets/scss/element-var.scss'
+import '@/assets/scss/index.scss'
+import '@/assets/iconfont/iconfont.css'
+import 'element-plus/dist/index.css'
+import { useDesignFormStore } from '@/store/DesignForm/designForm'
+import { useRoute, useRouter } from 'vue-router'
+import {
+    json2string,
+    objToStringify,
+    string2json,
+    stringToObj
+  } from '@/utils/DesignForm/form'
+
+import { getRequest } from '@/api/DesignForm'
+import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils'
+
+//引入页面
+import DragControl from '@/components/DesignForm/dragControl.vue';
+import HeadTools from '@/components/DesignForm/public/headTools.vue';
+import FormDesign from '@/components/DesignForm/public/form/form.vue'
+import FormControlAttr from '@/components/DesignForm/formControlAttr.vue';
+import VueFile from '@/components/DesignForm/vueFile.vue'
+import AceDrawer from '@/components/DesignForm/aceDrawer.vue'
+
+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 } from '@/api/DesignForm/requestapi'
+
+const isSave = ref(false)
+
+const props = defineProps({
+  draweropenclose:{
+		type:Boolean,
+		default:true
+	},
+  formconfigcont:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+});
+const emits = defineEmits(["update:draweropenclose","handlequery"]);
+
+/**
+ * 弹窗显示控制
+ */
+const openShow = computed({
+	get: () => props.draweropenclose,
+	set: (val) => {
+		emits("update:draweropenclose", val);
+	},
+});
+
+const layoutStore = useLayoutStore()
+layoutStore.changeBreadcrumb([{ label: '系统工具' }, { label: '表单设计' }])
+
+const store = useDesignFormStore()
+const router = useRouter()
+const route: any = useRoute().query || {}
+const state = reactive<formStruct>({
+    formData: {
+      list: [],
+      form: {
+        size: 'default',
+				name:'',
+				formName: props.formconfigcont.formName
+      },
+      config: {}
+    },
+    editor: {},
+    loading: false,
+    formDataPreview: {},
+    previewVisible: false, // 预览窗口
+    designType: route.type, // 当前页面设计类型，有效值search
+    formDict: {},
+    formOtherData: {
+      source: route.source || '',
+      formName: props.formconfigcont.formName
+    }
+})
+const drawer = reactive<DrawerStruct>({
+    visible: false,
+    type: '',
+    title: '',
+    codeType: '',
+    direction: undefined, //弹出方向rtl / ltr
+    callback: ''
+})
+const vueFileEl = ref()
+const formControlAttrEl = ref()
+// 当前表单设计类型，供各子组件调用以展示不同页面，统一方式不需要每个组件都从路由中取
+provide('formDesignType', state.designType)
+  const getInitData = () => {
+    const id = route.id // 当前记录保存的id
+    if (id) {
+      // 获取初始表单数据
+      state.loading = true
+      getRequest('designById', { id: id })
+        .then(res => {
+          const result = res.data
+          // 初始设计搜索时res.data=''
+          if (result.data) {
+            state.formData = stringToObj(result.data)
+          }
+          state.formDict = string2json(result.dict)
+          // 恢复表单名称
+          state.formOtherData.source = result.source
+          state.formOtherData.formName = result.name
+          if (result.source && state.designType !== 'search') {
+            // 加载属性侧边栏的字段标识，搜索时不需要请求
+            formControlAttrEl.value.getFormFieldBySource(result.source)
+          }
+          state.loading = false
+        })
+        .catch((res: any) => {
+          // console.log(res)
+          ElMessage.error(res.message || '加载异常')
+          state.loading = false
+        })
+    }
+  }
+  const headToolClick = (type: string) => {
+    switch (type) {
+      case 'del':
+        state.formData.list = []
+        store.setActiveKey('')
+        store.setControlAttr({})
+        break
+      case 'eye':
+        // 打开预览窗口
+        store.setActiveKey('')
+        store.setControlAttr({})
+        state.previewVisible = true
+        // eslint-disable-next-line no-case-declarations
+        let stringPreview = objToStringify(state.formData) // 防止预览窗口数据修改影响
+        // eslint-disable-next-line no-case-declarations
+        const formName = state.formData.form.name
+        // eslint-disable-next-line no-case-declarations
+        const reg = new RegExp(`get${formName}ControlByName`, 'g')
+        stringPreview = stringPreview.replace(
+          reg,
+          `getPreview${formName}ControlByName`
+        )
+        state.formDataPreview = stringToObj(stringPreview)
+        state.formDataPreview.form.name = `Preview${formName}` // 修改下表单名
+        break
+      case 'json':
+        // 生成脚本预览
+        openAceEditDrawer({
+          direction: 'rtl',
+          content: state.formData,
+          title: '可编辑修改或将已生成的脚本粘贴进来'
+        })
+        break
+      case 'save':
+        // saveData();
+				saveDataNew();
+        break
+      case 'vue':
+        vueFileEl.value.open(state.formData)
+				emits("update:draweropenclose", false);
+        break
+			case 'close':
+			console.log("关闭")
+				if(isSave.value){
+					emits("update:draweropenclose", false);
+				}else{
+					ElMessageBox.confirm(
+						'表单已做设计或修改！请问是否保存？',
+						'温馨提示！',
+					{
+						confirmButtonText: '保存',
+						cancelButtonText: '不保存',
+						type: 'warning',
+						draggable: true,
+					})
+					.then(() => {
+						saveDataNew();
+					})
+					.catch(() => {
+						emits("update:draweropenclose", false);
+					})
+				}
+				
+				break
+    }
+  }
+  // 弹窗确认
+  const dialogConfirm = (editVal: string) => {
+    // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
+    try {
+      if (typeof drawer.callback === 'function') {
+        // callback
+        const newObj =
+          drawer.codeType === 'json'
+            ? string2json(editVal)
+            : stringToObj(editVal)
+        drawer.callback(newObj)
+      } else {
+        switch (drawer.type) {
+          case 'css':
+            // 表单属性－编辑表单样式
+            if (!state.formData.config) {
+              state.formData.config = {}
+            }
+            state.formData.config.style = editVal
+            break
+          case 'dict':
+            state.formDict = string2json(editVal)
+            break
+          case 'beforeRequest':
+          case 'beforeSubmit':
+          case 'afterResponse':
+          case 'afterSubmit':
+          case 'change':
+            if (!state.formData.events) {
+              state.formData.events = {}
+            }
+            state.formData.events[drawer.type] = stringToObj(editVal)
+            break
+          default:
+            state.formData = stringToObj(editVal)
+        }
+      }
+      dialogCancel()
+    } catch (res) {
+      // console.log(res.message)
+      //ElMessage.error(res.message)
+    }
+  }
+//讲数据保存到服务端(新版)
+const saveDataNew = () => {
+	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)
+  }
+	let apiKey = 'designSave'
+  if (route.id) {
+    // 编辑状态 当前记录id
+    Object.assign(params, { id: route.id })
+    apiKey = 'designEdit'
+  }
+  // 列表搜索模式下只有修改
+  if (state.designType === 'search') {
+    params = {
+      data: objToStringify(state.formData),
+      dict: json2string(state.formDict),
+      id: route.id
+    }
+  }
+  state.loading = true
+
+	saveProductionForm(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 saveData = () => {
+    // 添加校验，没有选择数据源时则必须要配置接口url
+    const { addUrl, editUrl, requestUrl } = state.formData.config
+    if (
+      !state.formOtherData.source &&
+      (!addUrl || !editUrl || !requestUrl) &&
+      state.designType !== 'search'
+    ) {
+      ElMessage.error('请选择数据源或配置接口url地址，否则表单无法提交保存')
+      return
+    }
+    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)
+    }
+    let apiKey = 'designSave'
+    if (route.id) {
+      // 编辑状态 当前记录id
+      Object.assign(params, { id: route.id })
+      apiKey = 'designEdit'
+    }
+    // 列表搜索模式下只有修改
+    if (state.designType === 'search') {
+      params = {
+        data: objToStringify(state.formData),
+        dict: json2string(state.formDict),
+        id: route.id
+      }
+    }
+    state.loading = true
+    getRequest(apiKey, params)
+      .then((res: any) => {
+        ElMessage({
+          message: res.message || '保存成功！',
+          type: 'success'
+        })
+        // 根据不同情况跳转到不同地址
+        const path = route.redirect || '/design/form/list'
+        const query: any = {}
+        if (route.redirect && route.redirect.indexOf('?') !== -1) {
+          // 带有问号参数时，放在path传是有问题的，将id=1转为{id:1}
+          const p = route.redirect.split('?')[1]
+          const pSplit = p.split('&')
+          pSplit.forEach((item: string) => {
+            const splitItem = item.split('=')
+            query[splitItem[0]] = splitItem[1]
+          })
+        }
+        router.push({ path: path, query: query })
+        state.loading = false
+      })
+      .catch((res: any) => {
+        ElMessage.error(res.message || '保存异常')
+        state.loading = false
+      })
+    // 清空右侧内容管理菜单存在session的内容，刷新时可重新加载新菜单
+    if (!route.id) {
+      // 新增时
+      window.sessionStorage.removeItem('formMenuList')
+    }
+    // 清空右侧栏信息
+    store.setActiveKey('')
+    store.setControlAttr({})
+  }
+  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.formData.config?.style || ''
+        break
+      case 'dict':
+        // 格式化一下
+        editData = json2string(state.formDict, true)
+        break
+      case 'beforeRequest':
+      case 'beforeSubmit':
+      case 'afterResponse':
+      case 'afterSubmit':
+      case 'change':
+        // eslint-disable-next-line no-case-declarations
+        const beforeData = state.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
+  }
+  const drawerBeforeClose = () => {
+    dialogCancel()
+  }
+  const dialogCancel = () => {
+    drawer.visible = false
+    drawer.type = ''
+    drawer.title = ''
+    drawer.codeType = ''
+    drawer.callback = ''
+    drawer.content = ''
+  }
+  // 预览窗口提交测试
+  const previewForm = ref()
+  const previewSubmit = () => {
+    previewForm.value.validate((valid: boolean, fields: any) => {
+      if (valid) {
+        // alert('校验通过')
+        ElMessage.success('校验通过')
+        console.log(fields)
+      } else {
+        // alert('校验不通过')
+        // console.log('error submit!', fields)
+        ElMessage.error('校验不通过')
+        return false
+      }
+    })
+  }
+  // 选择模板
+  const selectTemplate = (data: FormData) => {
+		
+    state.formData = stringToObj(objToStringify(data))
+  }
+  // 搜索设计时左侧快速添加字段
+  const searchCheckField = (data: FormData) => {
+    state.formData.list.push(data)
+  }
+  getInitData()
+  // 从数据源点创建表单过来时，带有参数source
+  onMounted(() => {
+    if (route.source) {
+      formControlAttrEl.value.getFormFieldBySource(route.source)
+    }
+  })
+onMounted(() => {
+	console.log("监听数据",route.type,props.formconfigcont.formname,props.formconfigcont.formlogo,state)
+	state.formOtherData.formName = props.formconfigcont.formname
+	state.formData.form.name = props.formconfigcont.formlogo
+	state.formData.form.formName = props.formconfigcont.formname
+})
+/**
+ * 监听数据
+ */
+watch(() => props.draweropenclose,() => {
+	console.log("监听数据",props.draweropenclose,state)
+	if(props.draweropenclose){
+		state.formOtherData.formName = props.formconfigcont.formName
+		state.formData.form.name = props.formconfigcont.formlogo
+		state.formData.form.formName = props.formconfigcont.formName
+	}else{
+		state.formOtherData.formName = "未命名表单"
+		state.formData.form.name = props.formconfigcont.formlogo
+		state.formData.form.formName = "未命名表单"
+	}
+	
+});
+
+</script>
+<template>
+	<div class="design-container">
+		<DragControl
+			:formid="state.formOtherData.source"
+      @click-check="searchCheckField"
+      @click="selectTemplate"
+		/>
+		<div class="main-body">
+			
+			<HeadTools @click="headToolClick" />
+			<div v-loading="state.loading" class="main-form">
+				<div v-if="state.formData.list.length === 0" class="empty-tips">
+					从左侧拖拽来添加组件
+				</div>
+				<FormDesign 
+					v-model:issave="isSave"
+					:type="5"
+          :form-data="state.formData"
+          :dict="state.formDict"
+					
+				/>
+			</div>
+		</div>
+    <!--面版右侧-->
+    <form-control-attr
+      ref="formControlAttrEl"
+			v-model:formOtherData="state.formOtherData"
+      :form-data="state.formData.form"
+      :form-config="state.formData.config"
+      @open-dialog="openAceEditDrawer"
+    />
+		<ace-drawer
+      v-model="drawer.visible"
+      :title="drawer.title"
+      :direction="drawer.direction"
+      :content="drawer.content"
+      :code-type="drawer.codeType"
+      @before-close="drawerBeforeClose"
+      @confirm="dialogConfirm"
+    />
+		<vue-file v-if="!['search'].includes(state.designType)" ref="vueFileEl" />
+		<el-dialog v-model="state.previewVisible" title="预览" :fullscreen="true">
+      <form-design
+        v-if="state.previewVisible"
+				ref="previewForm"
+        :form-data="state.formDataPreview"
+        :dict="state.formDict"
+        :type="1"
+      />
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button size="small" type="primary" @click="previewSubmit">
+            提交
+          </el-button>
+          <el-button size="small" @click="state.previewVisible = false">
+            取消
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+	</div>
+</template>
+<style  lang='scss' scoped>
+.design-container{
+	padding: 0;
+}
+</style>
diff --git a/src/views/sysworkflow/codepage/index.vue b/src/views/sysworkflow/codepage/index.vue
index 35d86ac24..ce2263d0b 100644
--- a/src/views/sysworkflow/codepage/index.vue
+++ b/src/views/sysworkflow/codepage/index.vue
@@ -1,423 +1,185 @@
 <!--
 @ 作者: 秦东
-@ 时间: 2023-05-26 10:35:30
-@ 备注: 
+@ 时间: 2023-08-28 14:47:07
+@ 备注: 表单设计
 -->
 <script lang='ts' setup>
-import '@/assets/scss/element-var.scss'
-import '@/assets/scss/index.scss'
-import '@/assets/iconfont/iconfont.css'
-import 'element-plus/dist/index.css'
-import { useDesignFormStore } from '@/store/DesignForm/designForm'
-import { useRoute, useRouter } from 'vue-router'
-import {
-    json2string,
-    objToStringify,
-    string2json,
-    stringToObj
-  } from '@/utils/DesignForm/form'
-
-import { getRequest } from '@/api/DesignForm'
-import { afterResponse, beforeRequest, onChange } from '@/api/DesignForm/utils'
-
+import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
+import { getCustomerFormList,getProductionMarkForm } from '@/api/DesignForm/requestapi'
 //引入页面
-import DragControl from '@/components/DesignForm/dragControl.vue';
-import HeadTools from '@/components/DesignForm/public/headTools.vue';
-import FormDesign from '@/components/DesignForm/public/form/form.vue'
-import FormControlAttr from '@/components/DesignForm/formControlAttr.vue';
-import VueFile from '@/components/DesignForm/vueFile.vue'
-import AceDrawer from '@/components/DesignForm/aceDrawer.vue'
-
-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'
-
-const layoutStore = useLayoutStore()
-layoutStore.changeBreadcrumb([{ label: '系统工具' }, { label: '表单设计' }])
+import CreateForm from '@/views/sysworkflow/codepage/createform.vue'
 
-const store = useDesignFormStore()
-const router = useRouter()
-const route: any = useRoute().query || {}
-const state = reactive<formStruct>({
-    formData: {
-      list: [],
-      form: {
-        size: 'default',
-				name:''
-      },
-      config: {}
-    },
-    editor: {},
-    loading: false,
-    formDataPreview: {},
-    previewVisible: false, // 预览窗口
-    designType: route.type, // 当前页面设计类型，有效值search
-    formDict: {},
-    formOtherData: {
-      source: route.source || '',
-      formName: '未命名表单'
-    }
+const queryParams = reactive<SearchForm>({
+	page: 1,
+	pagesize:15
+});
+const ids = ref<number[]>([]);		//记录总数
+const loading =ref(false);		//加载表单
+const drawerOpenOrClose = ref(false);
+const total = ref(0);					//记录总数
+const contList = ref<customerFormCont[]>()
+const drawerWith = ref<number>(0);
+const formConfigCont = reactive<customerFormConfig>({
+	formname:"",
+	formlogo:""
 })
-const drawer = reactive<DrawerStruct>({
-    visible: false,
-    type: '',
-    title: '',
-    codeType: '',
-    direction: undefined, //弹出方向rtl / ltr
-    callback: ''
+//搜索表单
+function handleQuery(){
+	getCustomerFormList(queryParams)
+		.then(({ data }) => {
+			console.log("搜索表单-->",data);
+			total.value = data.total
+			contList.value = data.list
+		})
+		.finally(() => {})
+}
+//重置搜索条件
+function resetQuery(){}
+//新增表单
+function openDialog(){
+	getProductionMarkForm()
+		.then(({data})=>{
+			formConfigCont.formlogo = data.formlogo
+			formConfigCont.formname = data.formname
+			console.log("新增表单",formConfigCont)
+		})
+		.finally(()=>{
+			drawerOpenOrClose.value = true;
+		})
+	
+}
+//删除表单
+function handleDelete(){}
+/**
+ * 行checkbox change事件
+ */
+function handleSelectionChange(selection: any) {
+  ids.value = selection.map((item: any) => item.id);
+}
+//设置自定义表单
+function setupCustomerForm(cont:customerFormCont){
+
+}
+onMounted(()=>{
+	handleQuery();
+	drawerWith.value = window.innerWidth - 220
+});
+window.addEventListener("resize", function(){
+	drawerWith.value = window.innerWidth -220
+	console.log("搜索表单-->",window.innerWidth);
 })
-const vueFileEl = ref()
-const formControlAttrEl = ref()
-// 当前表单设计类型，供各子组件调用以展示不同页面，统一方式不需要每个组件都从路由中取
-provide('formDesignType', state.designType)
-  const getInitData = () => {
-    const id = route.id // 当前记录保存的id
-    if (id) {
-      // 获取初始表单数据
-      state.loading = true
-      getRequest('designById', { id: id })
-        .then(res => {
-          const result = res.data
-          // 初始设计搜索时res.data=''
-          if (result.data) {
-            state.formData = stringToObj(result.data)
-          }
-          state.formDict = string2json(result.dict)
-          // 恢复表单名称
-          state.formOtherData.source = result.source
-          state.formOtherData.formName = result.name
-          if (result.source && state.designType !== 'search') {
-            // 加载属性侧边栏的字段标识，搜索时不需要请求
-            formControlAttrEl.value.getFormFieldBySource(result.source)
-          }
-          state.loading = false
-        })
-        .catch((res: any) => {
-          // console.log(res)
-          ElMessage.error(res.message || '加载异常')
-          state.loading = false
-        })
-    }
-  }
-  const headToolClick = (type: string) => {
-    switch (type) {
-      case 'del':
-        state.formData.list = []
-        store.setActiveKey('')
-        store.setControlAttr({})
-        break
-      case 'eye':
-        // 打开预览窗口
-        store.setActiveKey('')
-        store.setControlAttr({})
-        state.previewVisible = true
-        // eslint-disable-next-line no-case-declarations
-        let stringPreview = objToStringify(state.formData) // 防止预览窗口数据修改影响
-        // eslint-disable-next-line no-case-declarations
-        const formName = state.formData.form.name
-        // eslint-disable-next-line no-case-declarations
-        const reg = new RegExp(`get${formName}ControlByName`, 'g')
-        stringPreview = stringPreview.replace(
-          reg,
-          `getPreview${formName}ControlByName`
-        )
-        state.formDataPreview = stringToObj(stringPreview)
-        state.formDataPreview.form.name = `Preview${formName}` // 修改下表单名
-        break
-      case 'json':
-        // 生成脚本预览
-        openAceEditDrawer({
-          direction: 'rtl',
-          content: state.formData,
-          title: '可编辑修改或将已生成的脚本粘贴进来'
-        })
-        break
-      case 'save':
-        saveData()
-        break
-      case 'vue':
-        vueFileEl.value.open(state.formData)
-        break
-    }
-  }
-  // 弹窗确认
-  const dialogConfirm = (editVal: string) => {
-    // 生成脚本预览和导入json，都是将编辑器内容更新至state.formData
-    try {
-      if (typeof drawer.callback === 'function') {
-        // callback
-        const newObj =
-          drawer.codeType === 'json'
-            ? string2json(editVal)
-            : stringToObj(editVal)
-        drawer.callback(newObj)
-      } else {
-        switch (drawer.type) {
-          case 'css':
-            // 表单属性－编辑表单样式
-            if (!state.formData.config) {
-              state.formData.config = {}
-            }
-            state.formData.config.style = editVal
-            break
-          case 'dict':
-            state.formDict = string2json(editVal)
-            break
-          case 'beforeRequest':
-          case 'beforeSubmit':
-          case 'afterResponse':
-          case 'afterSubmit':
-          case 'change':
-            if (!state.formData.events) {
-              state.formData.events = {}
-            }
-            state.formData.events[drawer.type] = stringToObj(editVal)
-            break
-          default:
-            state.formData = stringToObj(editVal)
-        }
-      }
-      dialogCancel()
-    } catch (res) {
-      // console.log(res.message)
-      //ElMessage.error(res.message)
-    }
-  }
-  // 将数据保存在服务端
-  const saveData = () => {
-    // 添加校验，没有选择数据源时则必须要配置接口url
-    const { addUrl, editUrl, requestUrl } = state.formData.config
-    if (
-      !state.formOtherData.source &&
-      (!addUrl || !editUrl || !requestUrl) &&
-      state.designType !== 'search'
-    ) {
-      ElMessage.error('请选择数据源或配置接口url地址，否则表单无法提交保存')
-      return
-    }
-    let params: any = {
-      data: objToStringify(state.formData),
-      source: state.formOtherData.source, // 数据源允许在表单属性设置里修改的
-      name: state.formOtherData.formName, // 表单名称，用于在显示所有已创建的表单列表里显示
-      type: 1, // 1表单 2列表
-      dict: json2string(state.formDict)
-    }
-    let apiKey = 'designSave'
-    if (route.id) {
-      // 编辑状态 当前记录id
-      Object.assign(params, { id: route.id })
-      apiKey = 'designEdit'
-    }
-    // 列表搜索模式下只有修改
-    if (state.designType === 'search') {
-      params = {
-        data: objToStringify(state.formData),
-        dict: json2string(state.formDict),
-        id: route.id
-      }
-    }
-    state.loading = true
-    getRequest(apiKey, params)
-      .then((res: any) => {
-        ElMessage({
-          message: res.message || '保存成功！',
-          type: 'success'
-        })
-        // 根据不同情况跳转到不同地址
-        const path = route.redirect || '/design/form/list'
-        const query: any = {}
-        if (route.redirect && route.redirect.indexOf('?') !== -1) {
-          // 带有问号参数时，放在path传是有问题的，将id=1转为{id:1}
-          const p = route.redirect.split('?')[1]
-          const pSplit = p.split('&')
-          pSplit.forEach((item: string) => {
-            const splitItem = item.split('=')
-            query[splitItem[0]] = splitItem[1]
-          })
-        }
-        router.push({ path: path, query: query })
-        state.loading = false
-      })
-      .catch((res: any) => {
-        ElMessage.error(res.message || '保存异常')
-        state.loading = false
-      })
-    // 清空右侧内容管理菜单存在session的内容，刷新时可重新加载新菜单
-    if (!route.id) {
-      // 新增时
-      window.sessionStorage.removeItem('formMenuList')
-    }
-    // 清空右侧栏信息
-    store.setActiveKey('')
-    store.setControlAttr({})
-  }
-  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.formData.config?.style || ''
-        break
-      case 'dict':
-        // 格式化一下
-        editData = json2string(state.formDict, true)
-        break
-      case 'beforeRequest':
-      case 'beforeSubmit':
-      case 'afterResponse':
-      case 'afterSubmit':
-      case 'change':
-        // eslint-disable-next-line no-case-declarations
-        const beforeData = state.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
-  }
-  const drawerBeforeClose = () => {
-    dialogCancel()
-  }
-  const dialogCancel = () => {
-    drawer.visible = false
-    drawer.type = ''
-    drawer.title = ''
-    drawer.codeType = ''
-    drawer.callback = ''
-    drawer.content = ''
-  }
-  // 预览窗口提交测试
-  const previewForm = ref()
-  const previewSubmit = () => {
-    previewForm.value.validate((valid: boolean, fields: any) => {
-      if (valid) {
-        // alert('校验通过')
-        ElMessage.success('校验通过')
-        console.log(fields)
-      } else {
-        // alert('校验不通过')
-        // console.log('error submit!', fields)
-        ElMessage.error('校验不通过')
-        return false
-      }
-    })
-  }
-  // 选择模板
-  const selectTemplate = (data: FormData) => {
-		
-    state.formData = stringToObj(objToStringify(data))
-  }
-  // 搜索设计时左侧快速添加字段
-  const searchCheckField = (data: FormData) => {
-    state.formData.list.push(data)
-  }
-  getInitData()
-  // 从数据源点创建表单过来时，带有参数source
-  onMounted(() => {
-    if (route.source) {
-      formControlAttrEl.value.getFormFieldBySource(route.source)
-    }
-  })
 </script>
 <template>
-	<div class="design-container">
-		<DragControl
-			:formid="state.formOtherData.source"
-      @click-check="searchCheckField"
-      @click="selectTemplate"
-		/>
-		<div class="main-body">
-			
-			<HeadTools @click="headToolClick" />
-			<div v-loading="state.loading" class="main-form">
-				<div v-if="state.formData.list.length === 0" class="empty-tips">
-					从左侧拖拽来添加组件
-				</div>
-				<FormDesign 
-					:type="5"
-          :form-data="state.formData"
-          :dict="state.formDict"
-				/>
-			</div>
-		</div>
-    <!--面版右侧-->
-    <form-control-attr
-      ref="formControlAttrEl"
-			v-model:formOtherData="state.formOtherData"
-      :form-data="state.formData.form"
-      :form-config="state.formData.config"
-      @open-dialog="openAceEditDrawer"
-    />
-		<ace-drawer
-      v-model="drawer.visible"
-      :title="drawer.title"
-      :direction="drawer.direction"
-      :content="drawer.content"
-      :code-type="drawer.codeType"
-      @before-close="drawerBeforeClose"
-      @confirm="dialogConfirm"
-    />
-		<vue-file v-if="!['search'].includes(state.designType)" ref="vueFileEl" />
-		<el-dialog v-model="state.previewVisible" title="预览" :fullscreen="true">
-      <form-design
-        v-if="state.previewVisible"
-				ref="previewForm"
-        :form-data="state.formDataPreview"
-        :dict="state.formDict"
-        :type="1"
-      />
-      <template #footer>
-        <div class="dialog-footer">
-          <el-button size="small" type="primary" @click="previewSubmit">
-            提交
-          </el-button>
-          <el-button size="small" @click="state.previewVisible = false">
-            取消
-          </el-button>
-        </div>
+	<div class="app-container">
+		<div class="search">
+      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
+        <el-form-item label="关键字" prop="keywords">
+          <el-input
+            v-model="queryParams.keywords"
+            placeholder="表单名称"
+            clearable
+            @keyup.enter="handleQuery"
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"
+            ><template #icon><i-ep-search /></template>搜索</el-button
+          >
+          <el-button @click="resetQuery">
+            <template #icon><i-ep-refresh /></template>
+            重置</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </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()"
+        >
+					<i-ep-delete />删除表单
+				</el-button>
       </template>
-    </el-dialog>
+			<el-table
+        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">
+					<template #default="scope">
+						<el-tag  v-if="scope.row.classify === 1" effect="plain">表单</el-tag>
+						<el-tag v-else effect="plain">流程表单</el-tag>
+					</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>
+				<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-button
+              type="warning"
+              link
+              size="small"
+              @click.stop="setupCustomerForm(scope.row)"
+              ><i-ep-MessageBox />数据结构</el-button
+            >
+            <el-button
+							
+              type="primary"
+              link
+              size="small"
+              
+              ><i-ep-edit />编辑</el-button
+            >
+            <el-button
+							
+              type="danger"
+              link
+              size="small"
+              
+              ><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"
+      />
+		</el-card>
 	</div>
+	<el-drawer  v-model="drawerOpenOrClose" title="I am the 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" :formconfigcont="formConfigCont" @handlequery="handleQuery" />
+  </el-drawer>
 </template>
 <style  lang='scss' scoped>
-
+.drawerClass{
+	.el-drawer__body{
+		padding: 0;
+	}
+}
 </style>