自定义也列表

src/api/DesignForm/requestapi.ts

@@ -277,3 +277,11 @@ export function silentLogin(data?:any){
 		data: data
 	});
 }
+//自定义表单分组列表
+export function customerFormGroupList(data?:any){
+	return request({
+		url: '/systemapi/customer_form/customerFormGroupList',
+		method: 'post',
+		data: data
+	});
+}

src/components/DesignForm/formControlAttr.vue

@@ -12,7 +12,7 @@
     import { formatNumber } from '@/api/DesignForm/utils'
     import { PublicAtrr } from '@/api/DesignForm/types'
     
-    import { chineseToPinyin } from '@/api/DesignForm/requestapi'
+    import { chineseToPinyin,customerFormGroupList } from '@/api/DesignForm/requestapi'
     
     
     //数学计算公式编辑器
@@ -1561,8 +1561,8 @@ const handleAvatarSuccess: UploadProps['onSuccess'] = (
   response,
   uploadFile
 ) => {
-//   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+	//   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
-formConfig.value.imageUrl = response.data.url
+	formConfig.value.imageUrl = response.data.url
 }
 
 const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
@@ -1577,9 +1577,79 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
   return true
 }
 
+const page = ref<number>(1)
+const pageSize = ref<number>(200000)
+const loadingmore = ref(false)
+const loadingnomore = ref(false)
+const formGroup = ref<any[]>([])
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-19 08:38:27
+@ 功能: 获取表单分组
+*/
+const gainFormGroupList = () =>{
+	loadingmore.value = true;
+	let sendInfo = {
+		page:page.value,
+		pagesize:pageSize.value,
+		state:1
+	}
+	customerFormGroupList(sendInfo)
+		.then((data)=>{
+			console.log("获取表单分组",data)
+			formGroup.value = data.data
+		})
+		.finally(()=>{
+			loadingmore.value = false;
+		})
+}
+onMounted(() => {
+	gainFormGroupList()
+})
 
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-19 09:17:51
+@ 功能: 控制下拉列表触底加载
+*/
+const handleVisibleChange = (visible: any) => {
+  if (visible) {
+    // 如果下拉框显示
+    let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap')
+    // 监听下拉框滚动事件
+    selectDropdown.addEventListener('scroll', loadNextPage)
+  } else {
+    // 如果下拉框隐藏
+    let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap')
+    // 移除下拉框滚动事件监听
+    selectDropdown.removeEventListener('scroll', loadNextPage)
+  }
+}
+const loadNextPage = () => {
+  let selectDropdown: any = document.querySelector('.el-select-dropdown__wrap');
+  // 判断下拉框是否触底
+  if (selectDropdown.scrollTop + selectDropdown.clientHeight >= selectDropdown.scrollHeight - 2) {
+    loadingnomore.value = false
+    loadingmore.value = true
+    if (selectoptions.value.length <= 20) {
+      setTimeout(() => {
+        selectoptions.value.push({
+          label: String(selectoptions.value.length),
+          value: String(selectoptions.value.length),
+        }
+        )
+        loadingmore.value = false
 
-
+      }, 2000)
+    }else{
+      loadingmore.value = false
+    selectDropdown.removeEventListener('scroll', loadNextPage)
+    loadingnomore.value = true
+    }
+  } else {
+    loadingnomore.value = true
+  }
+}
     </script>
     <template>
         <div  class="sidebar-tools">
@@ -2079,7 +2149,16 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
                     <el-form size="small" class="form">
     
                         <el-divider content-position="left">基础配置</el-divider>
-                            
+								<el-form-item  class="form_cont">
+									<template #label>
+										归属分组
+									</template>
+									<el-select id="groupForm" v-model="formConfig.groupKey" placeholder="Select" ref="groupForm">
+										<el-option v-for="item in formGroup" :key="item.idStr" :label="item.title" :value="item.idStr" />
+										<p v-if="loadingmore">加载中</p>
+										<p v-if="loadingnomore">无数据</p>
+									</el-select>
+								</el-form-item>
                                 <el-form-item
                                     v-for="(item, index) in formAttr.filter(item => !item.hide)"
                                     :label="item.label"
@@ -2116,7 +2195,7 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
                                         @input="formAttrChange(item)"
                                     />
                                 </el-form-item>
-                            
+								
 								<el-form-item  class="form_cont">
 									<template #label>
 										表单图标

src/components/DesignForm/pageList/types.ts

@@ -0,0 +1,56 @@
+//基础列表字段
+export const tempOtherUnit = [
+	{
+		label: '其他字段',
+		options: [
+			{
+				label: '多选',
+				type: 'selection'
+			},
+			{ 
+				label: '序号', 
+				type: 'index', 
+				width: '70px' 
+			},
+			{ 
+				label: '操作',
+				 prop: '__control' 
+			}
+		]
+	}
+]
+//新增与批量删除按钮
+export const controlBtnList = [
+    {
+		label: '新增',
+		key: 'add',
+		type: 'primary',
+		size: 'small',
+		icon: 'plus'
+    },
+    {
+		label: '导出',
+		key: 'import',
+		type: 'primary',
+		size: 'small',
+		icon: 'plus'
+    },
+    {
+		label: '批量删除',
+		key: 'del',
+		type: 'danger',
+		size: 'small',
+		icon: 'delete'
+    }
+]
+//编辑删除按钮
+export  const operateBtnList = [
+    {
+		label: '编辑',
+		key: 'edit'
+    },
+    {
+		label: '删除',
+		key: 'del'
+    }
+]

src/types/components.d.ts

@@ -22,6 +22,7 @@ declare module '@vue/runtime-core' {
     DiyIconfont: typeof import('./../components/DesignForm/public/expand/diy-iconfont.vue')['default']
     DragControl: typeof import('./../components/DesignForm/dragControl.vue')['default']
     ElAffix: typeof import('element-plus/es')['ElAffix']
+    ElAside: typeof import('element-plus/es')['ElAside']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
     ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
@@ -29,12 +30,14 @@ declare module '@vue/runtime-core' {
     ElCard: typeof import('element-plus/es')['ElCard']
     ElCarousel: typeof import('element-plus/es')['ElCarousel']
     ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
+    ElCascader: typeof import('element-plus/es')['ElCascader']
     ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
     ElCheckboxGroup: typeof import('element-plus/es')['ElCheckboxGroup']
     ElCol: typeof import('element-plus/es')['ElCol']
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
+    ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
@@ -51,11 +54,13 @@ declare module '@vue/runtime-core' {
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
+    ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElPopover: typeof import('element-plus/es')['ElPopover']
+    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadio: typeof import('element-plus/es')['ElRadio']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
@@ -98,7 +103,13 @@ declare module '@vue/runtime-core' {
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
+    IEpDelete: typeof import('~icons/ep/delete')['default']
+    IEpEdit: typeof import('~icons/ep/edit')['default']
+    IEpPlus: typeof import('~icons/ep/plus')['default']
+    IEpRefresh: typeof import('~icons/ep/refresh')['default']
+    IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
+    IEpView: typeof import('~icons/ep/view')['default']
     LangSelect: typeof import('./../components/LangSelect/index.vue')['default']
     LayoutPage: typeof import('./../components/DesignForm/layoutPage/index.vue')['default']
     List: typeof import('./../components/DesignForm/public/form/components/list.vue')['default']

src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue

@@ -191,7 +191,7 @@ const runNextWindows = (val:number) => {
 	tabsActive.value = val
 }
 onMounted(()=>{
-	formKeyStr.value = "16"
+	formKeyStr.value = "13"
 })
 </script>
 <template>

src/views/sysworkflow/lowcodepage/pageList.vue

@@ -4,11 +4,191 @@
 @ 备注: 自定义表单列表
 -->
 <script lang='ts' setup>
+import { json2string,objToStringify,string2json,stringToObj } from '@/utils/DesignForm/form'
+import { analysisForm,setFlowFormKeyPower } from '@/api/workflowapi/index'
 
+import tempOtherUnit from '@/components/DesignForm/pageList/types'
+
+import PageListHeadTools from '@/views/sysworkflow/lowcodepage/pageListHeadTools.vue'
+
+
+
+const props = defineProps({
+	formKey:{
+		type:String,
+		default:""
+	},
+	formVersion:{
+		type:String,
+		default:""
+	},
+	state:{
+		type:Object,
+		default(){
+			return {}
+		}
+	}
+});
+
+const emits = defineEmits<{
+    (e: 'update:state', val: formStruct): void
+	(e: 'update:formKey', val: string): void
+	(e: 'update:formVersion', val: string): void
+	(e: 'judgeFlowIsEdit', val: boolean): void
+	(e: 'runNextWindows', val: number): void
+	(e: 'closeFormPage'): void
+}>()
+
+const statePro =  computed({
+	get() {
+		return props.state
+	},
+	set(val: formStruct) {
+		emits('update:state', val)
+	}
+});
+
+
+const pageLoading = ref(false)
+//自定义列表结构
+const state = reactive({
+    tableData: {
+      // tableProps: {}, //表格所有参数
+      columns: [],
+      config: {}
+    },
+    searchData: {},
+    loading: false,
+    attrObj: {},
+    config: {},
+    tagList: {},
+    formId: props.formKey || '',
+    formList: [], // 所有可选表单数据源
+    name: '',
+    treeData: {}, // 左侧树相关
+    previewVisible: false,
+    tabsName: 'second',
+    formFieldList: [], // 表单数据源所有可选字段
+    dict: {},
+    refreshTable: true
+})
+
+const kaif = (id: number, callback?: (list: any) => void) => {
+	// const content = stringToObj(props.state.formData)
+	console.log('获取当前数据下所有字段',statePro.value.formData)
+	filterFiled(statePro.value.formData)
+	callback && callback(statePro.value.formData.list)
+
+	console.log('获取当前数据下所有字段--->',state.formFieldList)
+}
+const filterFiled = (obj: any) => {
+    obj?.list.forEach((item: FormList) => {
+      if (item.type === 'grid' || item.type === 'tabs') {
+        item.columns.forEach((col: FormList) => {
+          filterFiled(col)
+        })
+      } else if (['card', 'div'].includes(item.type)) {
+        filterFiled(item)
+      } else if (!excludeType.includes(item.type) && item.name) {
+        state.formFieldList.push({
+          prop: item.name,
+          label: item.formItem?.label,
+          help: item.config.help || ''
+        })
+      }
+    })
+  }
+	const excludeType = [
+    'txt',
+    'title',
+    'table',
+    'component',
+    'upload',
+    'button',
+    'tinymce',
+    'inputSlot',
+    'flex'
+  ]
+
+const powerUnitAry = ref<any>({
+	nodeKey:"",
+	recUnitAry:{
+		masterUnitList:[],
+		sunUnitList:[],
+		unitAllKey:[],
+		unitAllState:[]
+	}
+})
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-13 08:24:54
+@ 功能: 解析表单
+*/
+const jieForm = () => {
+	analysisForm({nodeKey:"begin",nodeJson:JSON.stringify(statePro.value.formData)})
+		.then((data)=>{
+			if(data.code == 0){
+				powerUnitAry.value = data.data
+			}
+		})
+}
+const handleSelectionChange = (val: User[]) => {
+	console.log('表单选中--->',val)
+}
+watch(()=>statePro.value,()=>{
+	jieForm()
+},
+{
+	deep: true
+})
+onMounted(()=>{
+	jieForm()
+})
 </script>
 <template>
-	<div></div>
+	<div ref="container" class="design-containers design-table" v-loading="pageLoading">
+		<div class="components-list">
+			<el-divider content-position="left">表格列字段</el-divider>
+			<el-table
+				ref="multipleTableRef"
+				:data="powerUnitAry.recUnitAry.masterUnitList"
+				style="width: 100%"
+				@selection-change="handleSelectionChange"
+			>
+				<el-table-column type="selection" width="30" />
+				<el-table-column label="栏目">
+					<template #default="scope">{{ scope.row.name }}</template>
+				</el-table-column>
+			</el-table>
+		</div>
+		<div class="main-body">
+			<div class="header">
+				<div class="field">
+				</div>
+				<PageListHeadTools />
+			</div>
+
+		</div>
+		<div class="sidebar-tools">
+			{{props.formKey}}
+			<br>
+			{{props.formVersion}}
+		</div>
+	</div>
 </template>
 <style  lang='scss' scoped>
-
+.design-containers{
+	display: flex;
+    background-color: #FFFFFF;
+	margin: 0;
+	.components-list{
+		width: 200px;
+		padding:  0;
+		overflow-y: auto;
+		height: calc(100vh - 40px);
+		position: relative;
+		overflow-x: hidden;
+		border-right: 1px solid #e0e0e0;
+	}
+}
 </style>

src/views/sysworkflow/lowcodepage/pageListHeadTools.vue

@@ -0,0 +1,64 @@
+<!-- Created by weiXin:337547038 -->
+<template>
+	<div class="main-tools">
+	  <slot></slot>
+	  <el-button
+		link
+		type="primary"
+		@click="btnClick(item.icon)"
+		v-for="item in btnList"
+		:key="item.icon"
+	  >
+		<i v-if="item.iconFont==''" :class="['icon-' + item.icon]" ></i><i v-if="item.iconFont!=''" :class="['fa ' + item.iconFont]" ></i>{{ item.label }}
+	  </el-button>
+	</div>
+</template>
+  
+  <script lang="ts" setup>
+	import { computed } from 'vue'
+  
+	const props = withDefaults(
+	  defineProps<{
+		showKey?: string[] // showKey,hideKey设置其中一个即可，showKey优先
+		hideKey?: string[] // 设置了showKey时，hideKey无效
+	  }>(),
+	  {
+		showKey: () => {
+		  return []
+		},
+		hideKey: () => {
+		  return []
+		}
+	  }
+	)
+	const emits = defineEmits<{
+	  (e: 'click', value: string): void
+	}>()
+  
+	const btnList = computed(() => {
+	  const list = [
+		{ icon: 'del',iconFont:"", label: '清空', key: 1 },
+		{ icon: 'eye',iconFont:"", label: '预览', key: 2 },
+		{ icon: 'json',iconFont:"", label: '生成脚本预览', key: 3 },
+		// { icon: 'vue', label: '导出vue文件', key: 4 },
+		{ icon: 'save',iconFont:"fa-save", label: '保存', key: 5 },
+	  ]
+	  if (props.showKey?.length) {
+		// 按照指定的key显示
+		return list.filter((item: any) => {
+		  return props.showKey.includes(item.key)
+		})
+	  } else if (props.hideKey?.length) {
+		// 按照指定的key隐藏
+		return list.filter((item: any) => {
+		  return !props.hideKey.includes(item.key)
+		})
+	  } else {
+		return list // 否则显示全部
+	  }
+	})
+	const btnClick = (type: string) => {
+	  emits('click', type)
+	}
+  </script>
+