添加自定义表单图标CURD操作

src/components/DesignForm/formControlAttr.vue

@@ -25,6 +25,8 @@
     //样式布局
     import LayoutPage from '@/components/DesignForm/layoutPage/index.vue'
 
+	import { Plus } from '@element-plus/icons-vue'
+    
     
     const props = withDefaults(			//接收父级参数
         defineProps<{
@@ -1547,6 +1549,34 @@
         }
         return false;
     }
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-18 11:42:52
+@ 功能: 上传图标相关
+*/
+const imgUploadApiUrl = import.meta.env.VITE_APP_BASE_API+"/api/upordown" //上传地址
+const handleAvatarSuccess: UploadProps['onSuccess'] = (
+  response,
+  uploadFile
+) => {
+//   imageUrl.value = URL.createObjectURL(uploadFile.raw!)
+formConfig.value.imageUrl = response.data.url
+}
+
+const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
+	console.log("beforeAvatarUpload",rawFile.type)
+  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/jpg' && rawFile.type !== 'image/png' && rawFile.type !== 'image/gif' && rawFile.type !== 'image/icon') {
+    ElMessage.error('请上传以下格式的图片(jpg、jpeg、png、gif、icon)!'+rawFile.type)
+    return false
+  } else if (rawFile.size / 1024 / 1024 > 2) {
+    ElMessage.error('图片大小不要大于 2MB!')
+    return false
+  }
+  return true
+}
+
+
+
     </script>
     <template>
         <div  class="sidebar-tools">
@@ -2084,7 +2114,21 @@
                                     />
                                 </el-form-item>
                             
-                        
+								<el-form-item  class="form_cont">
+									<template #label>
+										表单图标
+									</template>
+									<el-upload
+										class="avatar-uploader"
+										:action="imgUploadApiUrl"
+										:show-file-list="false"
+										:on-success="handleAvatarSuccess"
+										:before-upload="beforeAvatarUpload"
+									>
+										<img v-if="formConfig.imageUrl" :src="formConfig.imageUrl" class="avatar" />
+										<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
+									</el-upload>
+								</el-form-item>
                         
                         <template v-if="!state.isSearch">
                             <el-divider content-position="left">接口数据事件</el-divider>
@@ -2323,7 +2367,18 @@
     .form_cont{
         padding: 0 10px;
     }
-	
+	.avatar-uploader{
+		width: 100px;
+		height: 100px;
+		.avatar{
+			width: 100px;
+			height: 100px;
+		}
+		.avatar-uploader-icon{
+			width: 100px;
+			height: 100px;
+		}
+	}
     </style>
     <style  >
 	

src/components/workflow/drwer/approverDrawer.vue

@@ -101,14 +101,24 @@ const matrixIsShow = ref(false)
 watch(approverConfig1, (val:any)=>{
 	
 	val.value.attribute = val.value.attribute*1
-	// console.log("directormaxlevel",val.value)
+	console.log("directormaxlevel",val.value)
 	matrixIsShow.value = false
     approverConfig.value = val.value
 	if(val.type == 3){
+		if(val.value.nodeName != ""){
+			nodeTitle.value = val.value.nodeName+"设置"
+		}else{
 			nodeTitle.value = "执行人设置"
+		}
+		
+	}else{
+		if(val.value.nodeName != ""){
+			nodeTitle.value = val.value.nodeName+"设置"
 		}else{
 			nodeTitle.value = "审批人设置"
 		}
+		
+	}
 	isExecutor.value = false
 	// approverConfig.attribute = approverConfig.attribute*1
 	if(visible.value){
@@ -217,12 +227,12 @@ const saveApprover = ()=> {
 			}
 		});
 	}
-	console.log("正确",formData.value)
+	// console.log("正确",formData.value)
 	if(formData.value.purview){
-		console.log("正确")
+		// console.log("正确")
 		let isNew = true
 		formData.value.purview.forEach((item:any)=>{
-			console.log("正确---->",item.nodeKey)
+			// console.log("正确---->",item.nodeKey)
 			if(item.nodeKey == approverConfig1.value.value.nodeNumber){
 				item.powerAry=powerAry
 				isNew = false
@@ -299,6 +309,7 @@ watch(()=>visible.value,(val:boolean)=>{
 		jieForm();
 	}
 })
+const nodeSetUp = ref("first")
 </script>
 <template>
 	
@@ -307,6 +318,15 @@ watch(()=>visible.value,(val:boolean)=>{
 		<div class="demo-drawer__content">
 			<!--审批人设置主体-->
 			<div class="drawer_content">
+				<el-tabs v-model="nodeSetUp" class="demo-tabs">
+					<el-tab-pane name="first">
+						<template #label>
+							<span class="wordKeyCss">属性设置</span>
+						</template>
+					
+
+
+						<!-- <el-divider content-position="left">节点属性</el-divider> -->
 						<div class="approver_content">
 							<el-radio-group v-model="approverConfig.settype" class="clear" @change="changeType">
 								<template v-for="({value, label}) in setTypes"  :key="value">
@@ -463,8 +483,12 @@ watch(()=>visible.value,(val:boolean)=>{
 								<el-radio v-for="item in nodeOptional" :key="item.nodeNumber" :label="item.nodeNumber" >{{ item.nodeName }}（编号：{{ item.nodeNumber }}）</el-radio>
 							</el-radio-group>
 						</div>
-
-				<el-divider content-position="left">操作权限</el-divider>
+					</el-tab-pane>
+    				<el-tab-pane name="second">
+						<template #label>
+							<span class="wordKeyCss">操作权限</span>
+						</template>
+						<!-- <el-divider content-position="left">操作权限</el-divider> -->
 						<div class="info_box">
 							<div class="table_name"><el-text class="mx-1" type="primary">主表</el-text></div>
 							<el-table v-if="powerUnitAry.recUnitAry.masterUnitList" :data="powerUnitAry.recUnitAry.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="customer-no-border-table" >
@@ -499,7 +523,8 @@ watch(()=>visible.value,(val:boolean)=>{
 								</el-col>
 							</el-row>
 						</div>
-
+					</el-tab-pane>
+				</el-tabs>
 
 			</div>
 			<div class="demo-drawer__footer clear">
@@ -631,4 +656,7 @@ watch(()=>visible.value,(val:boolean)=>{
 .info_box{
 	padding: 0 20px;
 }
+.wordKeyCss{
+	padding: 0 20px;
+}
 </style>

src/components/workflow/drwer/promoterDrawer.vue

@@ -169,19 +169,30 @@ watch(()=>visible.value,(val:boolean)=>{
 		jieForm();
 	}
 })
+const nodeSetUp = ref("first")
 </script>
 <template>
 	<el-drawer v-model="visible" :append-to-body="true" title="发起人"  class="set_promoter" :show-close="false" :size="550" :before-close="closeDrawer"> 
 		<div class="demo-drawer__content">
 			
             <div class="promoter_content drawer_content">
-				<el-divider content-position="left">节点属性</el-divider>
+				<el-tabs v-model="nodeSetUp" class="demo-tabs">
+					<el-tab-pane name="first">
+						<template #label>
+							<span class="wordKeyCss">属性设置</span>
+						</template>
+
+						<!-- <el-divider content-position="left">节点属性</el-divider> -->
 						<div class="info_box">
 							<p>{{ $func.arrToStr(flowPermission) || '所有人' }}</p>
 							<el-button type="primary" @click="addPromoter">添加/修改发起人</el-button>
 						</div>
-                
-				<el-divider content-position="left">操作权限</el-divider>
+					</el-tab-pane>
+                	<el-tab-pane name="second">
+						<template #label>
+							<span class="wordKeyCss">操作权限</span>
+						</template>
+						<!-- <el-divider content-position="left">操作权限</el-divider> -->
 						<div class="info_box">
 							<div class="table_name"><el-text class="mx-1" type="primary">主表</el-text></div>
 							<el-table v-if="powerUnitAry.recUnitAry.masterUnitList" :data="powerUnitAry.recUnitAry.masterUnitList" size="small" style="width: 100%; --el-table-border-color: none;" :header-cell-style="{background:'#eef1f6',color:'#606266'}" class="customer-no-border-table" >
@@ -216,6 +227,8 @@ watch(()=>visible.value,(val:boolean)=>{
 								</el-col>
 							</el-row>
 						</div>
+					</el-tab-pane>
+				</el-tabs>
 				<!-- {{formData}} -->
             </div>
 			

src/types/components.d.ts

@@ -22,23 +22,19 @@ 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']
     ElButton: typeof import('element-plus/es')['ElButton']
-    ElButtonGroup: typeof import('element-plus/es')['ElButtonGroup']
     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']
@@ -55,14 +51,11 @@ 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']
-    ElLink: typeof import('element-plus/es')['ElLink']
-    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']
@@ -70,7 +63,6 @@ declare module '@vue/runtime-core' {
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSelect: typeof import('element-plus/es')['ElSelect']
-    ElSelectV2: typeof import('element-plus/es')['ElSelectV2']
     ElSlider: typeof import('element-plus/es')['ElSlider']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
@@ -105,19 +97,8 @@ declare module '@vue/runtime-core' {
     HeadToolsNew: typeof import('./../components/DesignForm/public/headToolsNew.vue')['default']
     IconSelect: typeof import('./../components/IconSelect/index.vue')['default']
     IEpCaretBottom: typeof import('~icons/ep/caret-bottom')['default']
-    IEpCaretTop: typeof import('~icons/ep/caret-top')['default']
     IEpClose: typeof import('~icons/ep/close')['default']
-    IEpDelete: typeof import('~icons/ep/delete')['default']
-    IEpEdit: typeof import('~icons/ep/edit')['default']
-    IEpMessageBox: typeof import('~icons/ep/message-box')['default']
-    IEpOperation: typeof import('~icons/ep/operation')['default']
-    IEpPicture: typeof import('~icons/ep/picture')['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']
-    IEpUser: typeof import('~icons/ep/user')['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

@@ -11,6 +11,7 @@ import { getProductionMarkForm } from '@/api/DesignForm/requestapi'
 // import PageDesign from "@/views/sysworkflow/lowcodepage/pageDesign.vue"
 import PageDesignEs from "@/views/sysworkflow/lowcodepage/pageDesignes.vue"
 import WorkFlow from "@/views/sysworkflow/lowcodepage/workFlow.vue"
+import PageList from "@/views/sysworkflow/lowcodepage/pageList.vue"
 
 
 
@@ -190,7 +191,7 @@ const runNextWindows = (val:number) => {
 	tabsActive.value = val
 }
 onMounted(()=>{
-	// formKeyStr.value = "16"
+	formKeyStr.value = "16"
 })
 </script>
 <template>
@@ -199,15 +200,19 @@ onMounted(()=>{
 		<el-drawer  v-model="drawerOpenOrClose" title="设置/编辑自定义表单" :with-header="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :size="props.drawerWith">
 			<el-tabs v-model="tabsActive" @tab-click="handleClick" stretch class="tabsMain">
 				<el-tab-pane label="页面设计" :name="1">
-					{{creetTabsActive}} ==》 {{tabsActive}}
+					
 					<PageDesignEs v-model:state="state"  v-model:form-key="formKeyStr" v-model:form-version="formVersion" :formconfigcont="formConfigCont" @judgeFormIsEdit="judgeFormIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
 				</el-tab-pane>
 				<el-tab-pane label="流程设计" :name="2">
-					{{creetTabsActive}} ==》 {{tabsActive}}
+
 					<WorkFlow v-model:state="state"  v-model:form-key="formKeyStr" v-model:form-version="formVersion" @judgeFlowIsEdit="judgeFlowIsEdit" @runNextWindows="runNextWindows" @closeFormPage="closeFormPage" />
 				</el-tab-pane>
-				<el-tab-pane label="列表设计" :name="3">{{creetTabsActive}} ==》 {{tabsActive}}</el-tab-pane>
-				<el-tab-pane label="页面设置" :name="4"></el-tab-pane>
+				<el-tab-pane label="列表设计" :name="3">
+					<PageList v-model:state="state"  v-model:form-key="formKeyStr" v-model:form-version="formVersion" />
+				</el-tab-pane>
+				<el-tab-pane label="页面设置" :name="4">
+					{{creetTabsActive}} ==》 {{tabsActive}}
+				</el-tab-pane>
 			</el-tabs>
 		</el-drawer>
 	</div>

src/views/sysworkflow/lowcodepage/pageList.vue

@@ -0,0 +1,14 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-03-18 11:32:14
+@ 备注: 自定义表单列表
+-->
+<script lang='ts' setup>
+
+</script>
+<template>
+	<div></div>
+</template>
+<style  lang='scss' scoped>
+
+</style>