Merge branch 'v7_master'

src/api/DesignForm/requestapi.ts

@@ -277,3 +277,35 @@ export function silentLogin(data?:any){
 		data: data
 	});
 }
+//自定义表单分组列表
+export function customerFormGroupList(data?:any){
+	return request({
+		url: '/systemapi/customer_form/customerFormGroupList',
+		method: 'post',
+		data: data
+	});
+}
+//查看分组详情
+export function gainFormGroupInfo(data:getContForId){
+	return request({
+		url: '/systemapi/customer_form/gainFormGroupInfo',
+		method: 'post',
+		data: data
+	});
+}
+//改变自定义表单分组内容
+export function editCustomerFormGroup(data?:any){
+	return request({
+		url: '/systemapi/customer_form/editCustomerFormGroup',
+		method: 'post',
+		data: data
+	});
+}
+//改变自定义表单分组状态
+export function editFormGroupState(data?:any){
+	return request({
+		url: '/systemapi/customer_form/editFormGroupState',
+		method: 'post',
+		data: data
+	});
+}

src/api/DesignForm/type.ts

@@ -2,17 +2,29 @@
 export interface SearchForm extends PageQuery{
 	keywords?: string;
 	classify?:number;
+	groupId?:string;
 }
 //自定义表单列表内容
 export interface customerFormCont{
-	id:string;
+	id: number,
-	name:string;
+	name: string,
-	tablename:string;
+	tablename: string,
-	states:number;
+	classify: number,
-	classify:number;
+	permit: string,
-	creatername:string;
+	permitstr: string,
-	creatertime:string;
+	states: number,
-	flowkey:any;
+	createrTime: number,
+	editTime: number,
+	flowkey: number,
+	userpermit: string,
+	postpermit: string,
+	groupid: number,
+	icon: string,
+	flowIsOpen: 1,
+	idStr: string,
+	creatername: string,
+	creatertimeStr: string,
+	flowkeyStr: string
 }
 
 export type CustomerFormPageResult = PageResult<customerFormCont[]>;

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">
@@ -2077,9 +2147,18 @@ const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
                 </el-tab-pane>
                 <el-tab-pane label="表单配置" name="second">
                     <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.list" :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"

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

@@ -47,6 +47,7 @@ declare module '@vue/runtime-core' {
     ElDropdown: typeof import('element-plus/es')['ElDropdown']
     ElDropdownItem: typeof import('element-plus/es')['ElDropdownItem']
     ElDropdownMenu: typeof import('element-plus/es')['ElDropdownMenu']
+    ElFooter: typeof import('element-plus/es')['ElFooter']
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']

src/views/login/index.vue

@@ -194,6 +194,7 @@ function handleLogin() {
           );
 						console.log("登陆输出：",redirect,otherQueryParams);
           router.push({ path: redirect, query: otherQueryParams });
+					getCaptcha();
         })
         .catch(() => {
           // 验证失败，重新生成验证码

src/views/sysworkflow/codepage/cardadd.vue

@@ -0,0 +1,195 @@
+<!--
+@ 作者: 袁纪菲
+@ 时间: 2024.3.18
+@ 备注: 添加卡片
+-->
+<script setup>
+import { ref,computed,reactive,watch,toRef} from 'vue';
+
+const props = defineProps({
+  visible:Boolean
+});
+const emits = defineEmits(["update:visible", "data"]);
+
+const formLabelWidth = '80px'
+let timer
+const dialog = ref(false)
+const loading = ref(false)
+
+const form = reactive({
+  data:{
+    id: '',
+    name: '',
+    imageUrl: '',
+  },
+  visible: computed({
+    get(){
+      return props.visible
+    },
+    set(val) {
+      emits('update:visible', val)
+    }
+  })
+})
+const drawerRefadd = ref();
+
+// 图片预览地址
+const previewImageUrl = ref('');
+// 图片上传前的钩子函数
+const beforeUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJPG) {
+    ElMessage.error('只能上传 JPG 或 PNG 格式的图片');
+    return false;
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过 2MB');
+    return false;
+  }
+  // 如果验证通过，则可以将本地图片转为 URL 显示预览
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    previewImageUrl.value = reader.result;
+    form.data.imageUrl = reader.result; // 更新到表单数据
+  };
+  return isJPG && isLt2M;
+};
+// 表单提交
+const onSubmit = async () => {
+  // 验证表单数据...
+  if (!form.data.name) {
+    ElMessage.error("标题不能为空");
+    return;
+  }
+  // 模拟向本地数据添加新的卡片数据
+  const newCard = { ...form.data };
+  // 关闭添加卡片的抽屉
+  drawerRefadd.value.close();
+  // 将新卡片数据发送回父组件
+  emits('data', newCard);
+  // 清空表单以便下次使用
+  form.data.name = '';
+  // 提交成功后，关闭loading状态
+  loading.value = false;
+  emits('update:visible', false)
+};
+  
+// };
+// 关闭
+const handleClose = () => {
+  if (loading.value) {
+    return
+  }
+  ElMessageBox.confirm(
+    '你是否要提交数据?',
+    "温馨提示",
+     {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      loading.value = true
+      timer = setTimeout(() => {
+        // done() 不能用done
+        // 动画关闭需要一定的时间
+        setTimeout(() => {
+          loading.value = false
+          emits('update:visible', false)
+        }, 400)
+      }, 2000)
+    })
+    
+    .catch(() => {
+      // catch error
+      cancelForm();
+    })
+}
+// 取消
+const cancelForm = () => {
+  loading.value = false
+  dialog.value = false
+  emits('update:visible', false)
+  clearTimeout(timer)
+  form.data.name = ''
+}
+
+</script>
+
+<template>
+    <el-drawer
+    ref="drawerRefadd"
+    :model-value="visible"
+    title="添加"
+    :before-close="handleClose"
+    direction="ltr"
+    class="demo-drawer"
+    size="400px"
+    >
+    <div class="demo-drawer__content">
+      <el-form :model="form">
+        <el-form-item label="标题" :label-width="formLabelWidth">
+          <el-input v-model="form.data.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="图片" :label-width=formLabelWidth>
+          <el-upload
+            class="picture-uploader"
+            action=""
+            :auto-upload="false"
+            :before-upload="beforeUpload"
+            :on-change="handleChange"
+            list-type="picture-card">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <!-- 预览区域 -->
+          <div v-if="form.data.imageUrl" class="preview-image">
+            <img :src="form.data.imageUrl" alt="预览图片" />
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="demo-drawer__footer">
+        <el-button @click="cancelForm">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="onSubmit">
+        {{loading ? '正在提交 ...' : '提交'}}
+        </el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped>
+.el-form {
+  margin: 30px 15px 10px 0;
+  .el-image {
+    width: 120px;
+    height: 120px;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+  }
+}
+.picture {
+  display: flex;
+  justify-content: space-around;
+  .uppicture {
+    flex: 1;
+    position: relative;
+    border: 1px solid #ccc;
+    input {
+      width: 100%;
+      height: 100%;
+      vertical-align: middle;
+      opacity: 0;
+    }
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 30px;
+    }
+  }
+}
+</style>

src/views/sysworkflow/codepage/cardedit.vue

@@ -0,0 +1,190 @@
+<!--
+@ 作者: 袁纪菲
+@ 时间: 2024.3.18
+@ 备注: 编辑卡片
+-->
+<script setup>
+import { ref,computed,reactive} from 'vue';
+import { ElDrawer, ElMessageBox } from 'element-plus'
+const props = defineProps({
+  visible:Boolean
+});
+const emits = defineEmits(["update:visible", "data"]);
+
+const formLabelWidth = '80px'
+let timer
+const dialog = ref(false)
+const loading = ref(false)
+
+const form = reactive({
+  data:{
+    id: '',
+    name: '',
+    imageUrl: '',
+  },
+  visible: computed({
+    get(){
+      return props.visible
+    },
+    set(val) {
+      emits('update:visible', val)
+    }
+  })
+})
+const drawerRefedit = ref();
+
+// 图片预览地址
+const previewImageUrl = ref('');
+// 图片上传前的钩子函数
+const beforeUpload = (file) => {
+  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isJPG) {
+    ElMessage.error('只能上传 JPG 或 PNG 格式的图片');
+    return false;
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    ElMessage.error('图片大小不能超过 2MB');
+    return false;
+  }
+  // 如果验证通过，则可以将本地图片转为 URL 显示预览
+  const reader = new FileReader();
+  reader.readAsDataURL(file);
+  reader.onload = () => {
+    previewImageUrl.value = reader.result;
+    form.data.imageUrl = reader.result; // 更新到表单数据
+  };
+  return isJPG && isLt2M;
+};
+// 表单提交
+const onSubmit = async () => {
+  // 验证表单数据...
+  if (!form.data.name) {
+    ElMessage.error("标题不能为空");
+    return;
+  }
+  // 模拟向本地数据添加新的卡片数据
+  const newCard = { ...form.data };
+  // 关闭添加卡片的抽屉
+  drawerRefadd.value.close();
+  // 将新卡片数据发送回父组件
+  emits('data', newCard);
+  // 清空表单以便下次使用
+  form.data.name = '';
+  // 提交成功后，关闭loading状态
+  loading.value = false;
+  drawerRefedit.value = false;
+};
+const handleClose = () => {
+  if (loading.value) {
+    return
+  }
+  ElMessageBox.confirm(
+    '你是否要提交数据?',
+    "温馨提示",
+     {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+    }
+  )
+    .then(() => {
+      loading.value = true
+      timer = setTimeout(() => {
+        // done()
+        // 动画关闭需要一定的时间
+        setTimeout(() => {
+          loading.value = false
+          emits('update:visible', false)
+        }, 400)
+      }, 2000)
+    })
+    .catch(() => {
+      // catch error
+      cancelForm();
+    })
+}
+// 取消
+const cancelForm = () => {
+  loading.value = false
+  dialog.value = false
+  emits('update:visible', false)
+  clearTimeout(timer)
+  form.data.name = ''
+}
+</script>
+<template>
+     <el-drawer
+    ref="drawerRefedit"
+    :model-value="visible"
+    title="编辑"
+    :before-close="handleClose"
+    direction="ltr"
+    class="demo-drawer"
+    size="400px"
+    >
+    <div class="demo-drawer__content">
+      <el-form :model="form">
+        <el-form-item label="标题" :label-width="formLabelWidth">
+          <el-input v-model="form.data.name" autocomplete="off" />
+        </el-form-item>
+        <el-form-item label="图片" :label-width=formLabelWidth>
+          <el-upload
+            class="picture-uploader"
+            action=""
+            :auto-upload="false"
+            :before-upload="beforeUpload"
+            :on-change="handleChange"
+            list-type="picture-card">
+            <i class="el-icon-plus"></i>
+          </el-upload>
+          <!-- 预览区域 -->
+          <div v-if="form.data.imageUrl" class="preview-image">
+            <img :src="form.data.imageUrl" alt="预览图片" />
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="demo-drawer__footer">
+        <el-button @click="cancelForm">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="onSubmit">
+        {{loading ? '正在提交 ...' : '提交'}}
+        </el-button>
+      </div>
+    </div>
+  </el-drawer>
+</template>
+
+<style scoped>
+ .el-form {
+  margin: 30px 15px 10px 0;
+  .el-image {
+    width: 120px;
+    height: 120px;
+    border: 1px solid #ccc;
+    margin-right: 10px;
+  }
+}
+.picture {
+  display: flex;
+  justify-content: space-around;
+  .uppicture {
+    flex: 1;
+    position: relative;
+    border: 1px solid #ccc;
+    input {
+      width: 100%;
+      height: 100%;
+      vertical-align: middle;
+      opacity: 0;
+    }
+    i {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      font-size: 30px;
+    }
+  }
+}
+
+</style>

src/views/sysworkflow/codepage/page.vue

@@ -1,241 +1,213 @@
 <!--
-@ 作者: 秦东
+@ 作者: 袁纪菲
-@ 时间: 2024-02-20 08:59:00
+@ 时间: 2024.3.18
-@ 备注: 实验表单
+@ 备注: 应用管理父组件
 -->
-<script lang='ts' setup>
+<script lang = "ts" setup>
+import cardedit from './cardedit.vue';
+import cardadd from './cardadd.vue';
+import {ref,onMounted,onUnmounted,watch} from 'vue';
+import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
 
-const size = ref('default')
+// 弹窗状态
-const labelPosition = ref('right')
+const props = defineProps({
+  visible:Boolean
+});
+const drawerRefadd = ref(false);
+const drawerRefedit = ref(false)
 
-const ruleForm = reactive<any>({
+// 卡片数据
-	name: 'Hello',
+interface cardDatass {
-  region: '',
+  id: number;
-  count: '',
+  name: string;
-  date1: '',
+  imageUrl: '',
-  date2: '',
+}
-  delivery: false,
+const cardData = ref<cardDatass[]>([]);
-  type: [],
+const emits = defineEmits(["update:visible", "data"]);
-  resource: '',
+//添加
-  desc: '',
+const opencardadd = () => {
-})
+  drawerRefadd.value = true;
+  cardadd.value.onSubmit = handleAddCard;
+};
+// 新增卡片数据的接收与处理
+const handleAddCard = (newCard: cardDatass) => {
+  cardData.value.push(newCard);
+};
+//编辑
+const opencardedit = (index: number) => {
+    drawerRefedit.value = true;
+    // 将当前卡片的数据传给cardedit组件
+    cardedit.value.cardData = cardData.value[index];
+    cardedit.value.onSubmit = handleEditCard;
+};
+// 编辑卡片数据的接收与处理
+const handleEditCard = (newCard: cardDatass) => {
+  cardData.value.splice(0,1,newCard);
+};
+//删除
+const deleteCard = (index: number) => {
+  cardData.value.splice(index, 1);
+  emits('data', cardData.value);
+};
+//监听子组件发来的 'data' 事件
+watch(() => props.visible, () => {
+  },
+  { immediate: true }
+);
+// 监听子组件返回的新卡片数据
+const handleNewCard = (newCard: cardDatass) => {
+      cardData.value.push(newCard);
+    };
+
+onMounted(() => {
+  for(let i = 0;i<9;i++){
+    cardData.value.push({
+        id: i,
+        name: '卡片' + i,
+        imageUrl: ''
+    });
+  }
+});
+</script>
+<template>
+  <cardadd v-model:visible="drawerRefadd" :keyval="props.visible" @data="handleNewCard"/>
+  <cardedit v-model:visible="drawerRefedit" :keyval="props.visible" @data="handleNewCard"/>
+  <el-row :gutter="10">
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple" >
+          <el-card class="cardlarge">
+            <template #header>
+              <div class="cardhead-large">
+                  <el-row class="block-col-2">
+                    <el-col style="text-align: right;">
+                      <el-dropdown>
+                        <span class="el-dropdown-link">
+                          <el-icon><MoreFilled /></el-icon>
+                        </span>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item @click="opencardadd" >添加</el-dropdown-item>
+                            <el-dropdown-item >编辑</el-dropdown-item>
+                            <el-dropdown-item >删除</el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </el-col>
+                    <el-col style="text-align: left;">
+                      <span>标题一</span>
+                    </el-col>
+                  </el-row>
+              </div>
+            </template>
+            <div class="grid-content ep-bg-purple" >
+              <el-row :gutter="10" >
+                <el-col v-for="(card, index) in cardData" :key="card.id" :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          v-if="card.imageUrl"
+                          src="card.imageUrl"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>{{ card.name }}</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit(index)"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button>
+                          </div>
+                      </el-card>
+                </el-col>
+              </el-row>
+            </div>
+          </el-card>
+        </div>
+    </el-col>
+  </el-row>
 
-const editMycontRules = reactive({
+<!-- 分页 -->
-	name: [{ required: true, message: "请输入姓名", trigger: "blur" }],	
+  <div class="example-pagination-block">
-})
+    <div class="example-demonstration"></div>
-const editPostFormRef = ref(ElForm);	//编辑表单
+    <el-pagination layout="prev, pager, next" :total="50" />
-const submitForm = async (formEl: FormInstance | undefined) => {
+  </div>
-	editPostFormRef.value.validate((isValid: boolean) => {
-		if (isValid) {
 
-		}
+</template>
-	})
+<style scoped>
+/* 小卡片 */
+.cardpattern{
+  padding-bottom: 0px;
+  margin-bottom: 10px;
+  min-width: 100px;
 }
-const options = Array.from({ length: 10000 }).map((_, idx) => ({
+/* 小卡片标题 */
-  value: `${idx + 1}`,
+.cardhead{
-  label: `${idx + 1}`,
+  padding: 10px;
-}))
+  font-size: 15px;
-const resetForm = (formEl: FormInstance | undefined) => {
+}
-  if (!formEl) return
+/* 大卡片 */
-  formEl.resetFields()
+.cardlarge{
+  max-width: 480px;
+}
+/* 大卡片标题 */
+.cardhead-large{
+  font-size: 20px;
 }
-const inline = ref(false)
-const labelWidth = ref<any>("")
-const labelSuffix = ref<any>("")
-const hideRequiredAsterisk = ref(false)
-const requireAsteriskPosition  = ref('right')
-const showMessage =  ref(true)
-const inlineMessage = ref(false)
-const statusIcon = ref(false)
-</script>
-<template>
-	<el-row>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">对齐方式：</el-col>
-				<el-col :span="16">
-					<el-radio-group v-model="labelPosition" label="label position">
-						<el-radio-button label="left">Left</el-radio-button>
-						<el-radio-button label="right">Right</el-radio-button>
-						<el-radio-button label="top">Top</el-radio-button>
-					</el-radio-group>	
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">尺寸控制：</el-col>
-				<el-col :span="16">
-					<el-radio-group v-model="size" label="size control">
-						<el-radio-button label="large">large</el-radio-button>
-						<el-radio-button label="default">default</el-radio-button>
-						<el-radio-button label="small">small</el-radio-button>
-					</el-radio-group>
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">行内表单模式：</el-col>
-				<el-col :span="16">
-					<el-switch v-model="inline" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">标签宽度：</el-col>
-				<el-col :span="16">
-					<el-input v-model="labelWidth" placeholder="Please input">
-						<template #append>PX</template>
-					</el-input>
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">标签后缀：</el-col>
-				<el-col :span="16">
-					<el-input v-model="labelSuffix" placeholder="Please input">
-					</el-input>
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">是否隐藏必填字段标签旁边的红色星号。：</el-col>
-				<el-col :span="16">
-					<el-switch v-model="hideRequiredAsterisk" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
 
-		</el-col>
+/* 按钮整体 */
-		<el-col :span="24">
+.bottom {
-			<el-row>
+  margin-top: 20px;
-				<el-col :span="8">星号的位置</el-col>
+  line-height: 10px;
-				<el-col :span="16">
+  display: flex;
-					<el-radio-group v-model="requireAsteriskPosition" label="label position">
+  justify-content: space-evenly;
-						<el-radio-button label="left">Left</el-radio-button>
+  align-items: center;
-						<el-radio-button label="right">Right</el-radio-button>
-					</el-radio-group>	
-				</el-col>
-			</el-row>
   
-		</el-col>
+}
-		<el-col :span="24">
+/* 单个按钮 */
-			<el-row>
+.button {
-				<el-col :span="8">是否显示校验错误信息:</el-col>
+  padding: 0px;
-				<el-col :span="16">
+  min-height: auto;
-					<el-switch v-model="showMessage" active-text="Open" inactive-text="Close" />
+  margin-bottom: 1px;
-				</el-col>
+}
-			</el-row>
+/* 图片 */
-		</el-col>
+.picture {
-		<el-col :span="24">
+  height: 100%;
-			<el-row>
+  min-height: 50px;
-				<el-col :span="8">是否以行内形式展示校验信息:</el-col>
+  max-height: 100px;
-				<el-col :span="16">
+  display: block;
-					<el-switch v-model="inlineMessage" active-text="Open" inactive-text="Close" />
+  width: 100%;
-				</el-col>
+  min-width: 50px;
-			</el-row>
+}
-		</el-col>
-		<el-col :span="24">
-			<el-row>
-				<el-col :span="8">是否在输入框中显示校验结果反馈图标:</el-col>
-				<el-col :span="16">
-					<el-switch v-model="statusIcon" active-text="Open" inactive-text="Close" />
-				</el-col>
-			</el-row>
-		</el-col>
-		<el-col :span="24">
 
-			<el-form
+.el-col {
-				ref="editPostFormRef"
+  border-radius: 4px;
-				:model="ruleForm"
+}
-				:label-width="labelWidth"
+
-				:label-position="labelPosition"
+.grid-content {
-				:size="size"
+  border-radius: 4px;
-				:rules="editMycontRules"
+  min-height: 36px;
-				:inline="inline"
+}
-				:label-suffix="labelSuffix"
+
-				:hide-required-asterisk="hideRequiredAsterisk"
+.app_box{
-				:require-asterisk-position="requireAsteriskPosition"
+	margin: 15px 0 0 0px;
-				:show-message="showMessage"
+}
-				:inline-message="inlineMessage"
-				:status-icon="statusIcon"
-				form-row-2
-			>
-				<el-form-item label="Activity name" prop="name">
-					<el-input v-model="ruleForm.name" />
-				</el-form-item>
-				<el-form-item label="Activity zone" prop="region">
-					<el-select v-model="ruleForm.region" placeholder="Activity zone">
-						<el-option label="Zone one" value="shanghai" />
-						<el-option label="Zone two" value="beijing" />
-					</el-select>
-				</el-form-item>
-				<el-form-item label="Activity count" prop="count">
-					<el-select-v2
-						v-model="ruleForm.count"
-						placeholder="Activity count"
-						:options="options"
-					/>
-				</el-form-item>
-				<el-form-item label="Activity time" required>
-					<el-col :span="11">
-						<el-form-item prop="date1">
-						<el-date-picker
-							v-model="ruleForm.date1"
-							type="date"
-							label="Pick a date"
-							placeholder="Pick a date"
-							style="width: 100%"
-						/>
-						</el-form-item>
-					</el-col>
-					<el-col class="text-center" :span="2">
-						<span class="text-gray-500">-</span>
-					</el-col>
-					<el-col :span="11">
-						<el-form-item prop="date2">
-							<el-time-picker
-								v-model="ruleForm.date2"
-								label="Pick a time"
-								placeholder="Pick a time"
-								style="width: 100%"
-							/>
-						</el-form-item>
-					</el-col>
-				</el-form-item>
-				<el-form-item label="Instant delivery" prop="delivery">
-					<el-switch v-model="ruleForm.delivery" />
-				</el-form-item>
-				<el-form-item label="Activity type" prop="type">
-					<el-checkbox-group v-model="ruleForm.type">
-						<el-checkbox label="Online activities" name="type" />
-						<el-checkbox label="Promotion activities" name="type" />
-						<el-checkbox label="Offline activities" name="type" />
-						<el-checkbox label="Simple brand exposure" name="type" />
-					</el-checkbox-group>
-				</el-form-item>
-				<el-form-item label="Resources" prop="resource">
-					<el-radio-group v-model="ruleForm.resource">
-						<el-radio label="Sponsorship" />
-						<el-radio label="Venue" />
-					</el-radio-group>
-				</el-form-item>
-				<el-form-item label="Activity form" prop="desc">
-					<el-input v-model="ruleForm.desc" type="textarea" />
-				</el-form-item>
-				<el-form-item>
-					<el-button type="primary" @click="submitForm(ruleFormRef)">
-						Create
-					</el-button>
-					<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
-				</el-form-item>
-			</el-form>
-		</el-col>
-	</el-row>
-</template>
-<style  lang='scss' scoped>
 
+.block-col-2 .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.block-col-2 .el-dropdown-link {
+  display: flex;
+  align-items: center;
+}
+/* 分页 */
+.example-pagination-block + .example-pagination-block {
+  margin-top: 10px;
+}
+.example-pagination-block .example-demonstration {
+  margin-bottom: 16px;
+}
 </style>

src/views/sysworkflow/codepage/page_123.vue

@@ -0,0 +1,368 @@
+<!--
+@ 作者: 袁纪菲
+@ 时间: 2024.3.18
+@ 备注: 应用管理父组件
+-->
+<script lang = "ts" setup>
+import cardedit from './cardedit.vue';
+import cardadd from './cardadd.vue';
+import {ref,onMounted,onUnmounted,watch} from 'vue';
+import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
+
+const props = defineProps({
+  visible:Boolean
+});
+// 弹窗状态
+const drawerRefadd = ref(false);
+const drawerRefedit = ref(false)
+
+// 卡片数据
+interface cardDatass {
+  id: number;
+  name: string;
+}
+const cardData = ref<cardDatass[]>([]);
+const emits = defineEmits(["update:visible", "data"]);
+//添加
+const opencardadd = () => {
+  drawerRefadd.value = true;
+  cardadd.value.onSubmit = handleAddCard;
+};
+// 新增卡片数据的接收与处理
+const handleAddCard = (newCard: cardDatass) => {
+  cardData.value.push(newCard);
+};
+//编辑
+const opencardedit = (index: number) => {
+	drawerRefedit.value = true;
+  cardedit.value.onSubmit = handleEditCard;
+};
+// 编辑卡片数据的接收与处理
+const handleEditCard = (newCard: cardDatass) => {
+  cardData.value.splice(0,1,newCard);
+};
+//删除
+const deleteCard = (index: number) => {
+  cardData.value.splice(index, 1);
+  emits('data', cardData.value);
+};
+//监听子组件发来的 'data' 事件
+watch(() => props.visible, () => {
+  },
+  { immediate: true }
+);
+// 监听子组件返回的新卡片数据
+const handleNewCard = (newCard: cardDatass) => {
+      cardData.value.push(newCard);
+    };
+
+onMounted(() => {
+  for(let i = 0;i<5;i++){
+    cardData.value.push({
+      id: i,
+      name: '卡片' + i
+    });
+  }
+});
+</script>
+<template>
+  <cardadd v-model:visible="drawerRefadd" :keyval="props.visible" @data="handleNewCard"/>
+  <cardedit v-model:visible="drawerRefedit" :keyval="props.visible" />
+  <el-row :gutter="10">
+    <el-col v-for="(card, index) in cardData" :key="card.id" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple" >
+          <el-card class="cardlarge">
+            <template #header>
+              <div class="cardhead-large">
+                  <el-row class="block-col-2">
+                    <el-col style="text-align: right;">
+                      <el-dropdown>
+                        <span class="el-dropdown-link">
+                          <el-icon><MoreFilled /></el-icon>
+                        </span>
+                        <template #dropdown>
+                          <el-dropdown-menu>
+                            <el-dropdown-item @click="opencardadd" >添加</el-dropdown-item>
+                            <el-dropdown-item >编辑</el-dropdown-item>
+                            <el-dropdown-item @click="deleteCard">删除</el-dropdown-item>
+                          </el-dropdown-menu>
+                        </template>
+                      </el-dropdown>
+                    </el-col>
+                    <el-col style="text-align: left;">
+                      <span>标题一</span>
+                    </el-col>
+                  </el-row>
+              </div>
+            </template>
+            <div class="grid-content ep-bg-purple" >
+              <el-row :gutter="10" >
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>{{ card.name }}</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit(index)"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button>
+                          </div>
+                        
+                      </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>{{ card.name }}</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                  
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片3</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片4</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片5</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片6</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片7</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片8</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+                <el-col  :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
+                      <el-card class="cardpattern">
+                        <img
+                          src="../../../assets/1.png"
+                          title="示例图片"
+                          class="picture"
+                        />
+                          <div class="cardhead">
+                          <span>卡片9</span>
+                          </div>
+                          <div class="bottom">
+                            <el-button size="small" circle class="button" :icon="View"></el-button>
+                            <el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit"></el-button>
+                            <el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard"></el-button>
+                          </div>
+                    </el-card>
+                </el-col>
+              </el-row>
+
+            </div>
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6"> 
+        <div class="grid-content ep-bg-purple-light">
+          <el-card class="cardlarge">
+            
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple">
+          <el-card class="cardlarge">
+            
+          </el-card>
+        </div>
+    </el-col>
+    <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+        <div class="grid-content ep-bg-purple-light">
+          <el-card class="cardlarge">
+
+          </el-card>
+        </div>
+    </el-col>
+  </el-row>
+
+<!-- 分页 -->
+  <div class="example-pagination-block">
+    <div class="example-demonstration"></div>
+    <el-pagination layout="prev, pager, next" :total="50" />
+  </div>
+
+</template>
+<style scoped>
+/* 小卡片 */
+.cardpattern{
+  padding-bottom: 0px;
+  margin-bottom: 10px;
+  min-width: 100px;
+}
+/* 小卡片标题 */
+.cardhead{
+  padding: 10px;
+  font-size: 15px;
+}
+/* 大卡片 */
+.cardlarge{
+  max-width: 480px;
+}
+/* 大卡片标题 */
+.cardhead-large{
+  font-size: 20px;
+}
+
+/* 按钮整体 */
+.bottom {
+  margin-top: 20px;
+  line-height: 10px;
+  display: flex;
+  justify-content: space-evenly;
+  align-items: center;
+  
+}
+/* 单个按钮 */
+.button {
+  padding: 0px;
+  min-height: auto;
+  margin-bottom: 1px;
+}
+/* 图片 */
+.picture {
+  height: 100%;
+  min-height: 50px;
+  max-height: 100px;
+  display: block;
+  width: 100%;
+  min-width: 50px;
+}
+
+.el-col {
+  border-radius: 4px;
+}
+
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+
+.app_box{
+	margin: 15px 0 0 0px;
+}
+
+.block-col-2 .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+
+.block-col-2 .el-dropdown-link {
+  display: flex;
+  align-items: center;
+}
+/* 分页 */
+.example-pagination-block + .example-pagination-block {
+  margin-top: 10px;
+}
+.example-pagination-block .example-demonstration {
+  margin-bottom: 16px;
+}
+</style>

src/views/sysworkflow/codepage/page_black20240318.vue

@@ -0,0 +1,241 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-02-20 08:59:00
+@ 备注: 实验表单
+-->
+<script lang='ts' setup>
+
+const size = ref('default')
+const labelPosition = ref('right')
+
+const ruleForm = reactive<any>({
+	name: 'Hello',
+  region: '',
+  count: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const editMycontRules = reactive({
+	name: [{ required: true, message: "请输入姓名", trigger: "blur" }],	
+})
+const editPostFormRef = ref(ElForm);	//编辑表单
+const submitForm = async (formEl: FormInstance | undefined) => {
+	editPostFormRef.value.validate((isValid: boolean) => {
+		if (isValid) {
+
+		}
+	})
+}
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+  value: `${idx + 1}`,
+  label: `${idx + 1}`,
+}))
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+const inline = ref(false)
+const labelWidth = ref<any>("")
+const labelSuffix = ref<any>("")
+const hideRequiredAsterisk = ref(false)
+const requireAsteriskPosition  = ref('right')
+const showMessage =  ref(true)
+const inlineMessage = ref(false)
+const statusIcon = ref(false)
+</script>
+<template>
+	<el-row>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">对齐方式：</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="labelPosition" label="label position">
+						<el-radio-button label="left">Left</el-radio-button>
+						<el-radio-button label="right">Right</el-radio-button>
+						<el-radio-button label="top">Top</el-radio-button>
+					</el-radio-group>	
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">尺寸控制：</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="size" label="size control">
+						<el-radio-button label="large">large</el-radio-button>
+						<el-radio-button label="default">default</el-radio-button>
+						<el-radio-button label="small">small</el-radio-button>
+					</el-radio-group>
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">行内表单模式：</el-col>
+				<el-col :span="16">
+					<el-switch v-model="inline" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">标签宽度：</el-col>
+				<el-col :span="16">
+					<el-input v-model="labelWidth" placeholder="Please input">
+						<template #append>PX</template>
+					</el-input>
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">标签后缀：</el-col>
+				<el-col :span="16">
+					<el-input v-model="labelSuffix" placeholder="Please input">
+					</el-input>
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否隐藏必填字段标签旁边的红色星号。：</el-col>
+				<el-col :span="16">
+					<el-switch v-model="hideRequiredAsterisk" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">星号的位置</el-col>
+				<el-col :span="16">
+					<el-radio-group v-model="requireAsteriskPosition" label="label position">
+						<el-radio-button label="left">Left</el-radio-button>
+						<el-radio-button label="right">Right</el-radio-button>
+					</el-radio-group>	
+				</el-col>
+			</el-row>
+		
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否显示校验错误信息:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="showMessage" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否以行内形式展示校验信息:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="inlineMessage" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+			<el-row>
+				<el-col :span="8">是否在输入框中显示校验结果反馈图标:</el-col>
+				<el-col :span="16">
+					<el-switch v-model="statusIcon" active-text="Open" inactive-text="Close" />
+				</el-col>
+			</el-row>
+		</el-col>
+		<el-col :span="24">
+		
+			<el-form
+				ref="editPostFormRef"
+				:model="ruleForm"
+				:label-width="labelWidth"
+				:label-position="labelPosition"
+				:size="size"
+				:rules="editMycontRules"
+				:inline="inline"
+				:label-suffix="labelSuffix"
+				:hide-required-asterisk="hideRequiredAsterisk"
+				:require-asterisk-position="requireAsteriskPosition"
+				:show-message="showMessage"
+				:inline-message="inlineMessage"
+				:status-icon="statusIcon"
+				form-row-2
+			>
+				<el-form-item label="Activity name" prop="name">
+					<el-input v-model="ruleForm.name" />
+				</el-form-item>
+				<el-form-item label="Activity zone" prop="region">
+					<el-select v-model="ruleForm.region" placeholder="Activity zone">
+						<el-option label="Zone one" value="shanghai" />
+						<el-option label="Zone two" value="beijing" />
+					</el-select>
+				</el-form-item>
+				<el-form-item label="Activity count" prop="count">
+					<el-select-v2
+						v-model="ruleForm.count"
+						placeholder="Activity count"
+						:options="options"
+					/>
+				</el-form-item>
+				<el-form-item label="Activity time" required>
+					<el-col :span="11">
+						<el-form-item prop="date1">
+						<el-date-picker
+							v-model="ruleForm.date1"
+							type="date"
+							label="Pick a date"
+							placeholder="Pick a date"
+							style="width: 100%"
+						/>
+						</el-form-item>
+					</el-col>
+					<el-col class="text-center" :span="2">
+						<span class="text-gray-500">-</span>
+					</el-col>
+					<el-col :span="11">
+						<el-form-item prop="date2">
+							<el-time-picker
+								v-model="ruleForm.date2"
+								label="Pick a time"
+								placeholder="Pick a time"
+								style="width: 100%"
+							/>
+						</el-form-item>
+					</el-col>
+				</el-form-item>
+				<el-form-item label="Instant delivery" prop="delivery">
+					<el-switch v-model="ruleForm.delivery" />
+				</el-form-item>
+				<el-form-item label="Activity type" prop="type">
+					<el-checkbox-group v-model="ruleForm.type">
+						<el-checkbox label="Online activities" name="type" />
+						<el-checkbox label="Promotion activities" name="type" />
+						<el-checkbox label="Offline activities" name="type" />
+						<el-checkbox label="Simple brand exposure" name="type" />
+					</el-checkbox-group>
+				</el-form-item>
+				<el-form-item label="Resources" prop="resource">
+					<el-radio-group v-model="ruleForm.resource">
+						<el-radio label="Sponsorship" />
+						<el-radio label="Venue" />
+					</el-radio-group>
+				</el-form-item>
+				<el-form-item label="Activity form" prop="desc">
+					<el-input v-model="ruleForm.desc" type="textarea" />
+				</el-form-item>
+				<el-form-item>
+					<el-button type="primary" @click="submitForm(ruleFormRef)">
+						Create
+					</el-button>
+					<el-button @click="resetForm(ruleFormRef)">Reset</el-button>
+				</el-form-item>
+			</el-form>
+		</el-col>
+	</el-row>
+</template>
+<style  lang='scss' scoped>
+
+</style>

src/views/sysworkflow/lowcodepage/appFormList.vue

@@ -0,0 +1,169 @@
+<!--
+@ 作者: 秦东
+@ 时间: 2024-03-21 09:51:02
+@ 备注: 自定义表单分组内容列表
+-->
+<script lang='ts' setup>
+import { customerFormCont } from "@/api/DesignForm/type";
+import { getCustomerFormList } from '@/api/DesignForm/requestapi'
+import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
+
+import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
+import TaskCustomerForm from '@/views/taskplatform/taskmanagement/taskcustomerformnew.vue'
+
+
+const props = defineProps({
+	groupId:{
+		type:String,
+		default:""
+	},
+	drawerWith:{
+		type:Number,
+		default:true
+	},
+	formKey:{
+		type:String,
+		default:""
+	}
+});
+
+const emits = defineEmits(["update:formKey"]);
+
+//表单ID
+const formKeyStr =  computed({
+	get() {
+		return props.formKey
+	},
+	set(val: formStruct) {
+		emits('update:formKey', val)
+	}
+});
+const formId = ref<string>("")
+const versionTitle = ref<string>("")	//表单名称
+const versionId = ref<string>("")	//表单版本号
+const addFormIsShow = ref(false)
+const openTaskDrawer = ref(false) //新增任务
+const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')
+const pageApp = ref<number>(1)			//页码
+const pageAppSize = ref<number>(12)	//每页显示几个
+const pageAppTotal = ref<number>(0)	//总记录数
+const contList = ref<customerFormCont[]>()
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-21 10:54:23
+@ 功能: 获取表单列表
+*/
+const getFormAppList = () => {
+	let sendInfo = {
+		page:pageApp.value,
+		pagesize:pageAppSize.value,
+		groupId:props.groupId
+	}
+	getCustomerFormList(sendInfo)
+		.then(({ data }) => {
+			// console.log("搜索表单-->",data);
+			pageAppTotal.value = data.total
+			contList.value = data.list
+		})
+		.finally(() => {})
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-21 13:39:51
+@ 功能: 创建表单任务
+*/
+const startUsing = (id:string,title:string) => {
+	versionId.value = id
+	versionTitle.value = title
+	openTaskDrawer.value = true
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-21 10:57:11
+@ 功能: 编辑表单
+*/
+const editFormApp = (id:string) => {
+	formId.value = id.toString()
+	addFormIsShow.value= true
+	console.log("编辑表单",id,"-",formId.value,"-",addFormIsShow.value)
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-09 09:06:44
+@ 功能: 刷新页面
+*/
+const refreshPage = (pageType:string) =>{
+	addFormIsShow.value = false;
+	getFormAppList()
+}
+onMounted(()=>{
+	getFormAppList()
+})
+</script>
+<template>
+    <div>
+		<el-row :gutter="10" >
+			<el-col v-for="item in contList" :key="item.id"  :xs="8" :sm="12" :md="8" :lg="8" :xl="8" style=" margin-top: 10px;">
+				<el-card class="cardpattern"  body-style="padding:5px;">
+					<img
+						v-if="item.icon==''"
+						:src="squareUrl"
+						title="示例图片"
+						class="picture"
+						@click.top="startUsing(item.id,item.name)"
+					/>
+					<img
+						v-else
+						:src="item.icon"
+						title="示例图片"
+						class="picture"
+						@click.top="startUsing(item.id,item.name)"
+					/>
+					<div class="cardhead">
+						<el-text  class="w-150px mb-2" truncated :title="item.name" @click.top="startUsing(item.id,item.name)">{{item.name}}</el-text>
+					</div>
+					<el-row>
+						<el-col :span="8" class="but_centent">
+							<el-button size="small" circle class="button" :icon="View"></el-button>
+						</el-col>
+						<el-col :span="8" class="but_centent">
+							<el-button size="small" circle class="button" :icon="Edit" @click="editFormApp(item.idStr)"></el-button>
+						</el-col>
+						<el-col :span="8" class="but_centent">
+							<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button>
+						</el-col>
+					</el-row>
+				</el-card>
+			</el-col>		
+		</el-row>
+		<div class="formGroupPage">
+			<el-pagination layout="prev, pager, next" v-model:current-page="pageApp" :page-size="pageAppSize" :total="pageAppTotal" />
+		</div>
+		<TaskCustomerForm v-model:isopen="openTaskDrawer" :versionid="versionId" :versiontitle="versionTitle" :drawerwith="props.drawerWith" @searchquery="getFormAppList" />
+		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="props.drawerWith" v-model:form-key="formId" @refreshPage="refreshPage" />
+	</div>
+</template>
+<style  lang='scss' scoped>
+.cardhead{
+	padding: 5px 0;
+}
+.formGroupPage{
+	width:100%;
+	text-align: center;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+/* 图片 */
+.picture {
+  height: 100%;
+  min-height: 50px;
+  max-height: 100px;
+  display: block;
+  width: 100%;
+  min-width: 50px;
+}
+.but_centent{
+	text-align: center;
+}
+</style>

src/views/sysworkflow/lowcodepage/index.vue

@@ -5,7 +5,9 @@
 -->
 <script lang='ts' setup>
 import { SearchForm,customerFormCont,customerFormConfig } from "@/api/DesignForm/type";
-import { getCustomerFormList,getProductionMarkForm,editProductionFormStatus } from '@/api/DesignForm/requestapi'
+import { customerFormGroupList,editFormGroupState } from '@/api/DesignForm/requestapi'
+
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-09 08:59:37
@@ -13,34 +15,53 @@ import { getCustomerFormList,getProductionMarkForm,editProductionFormStatus } fr
 */
 import LowCodeFormPage from "@/views/sysworkflow/lowcodepage/lowCodeFormPage.vue"
 import LowCodeFormGroupPage from "@/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue"
+import AppFormList from "@/views/sysworkflow/lowcodepage/appFormList.vue"
 
 const contbody = ref()	//实例化内容容器
 const addFormIsShow = ref(false)
 const addFormGroupIsShow = ref(false)
 const drawerWith = ref();	//编辑表单时抽屉宽度
+const drawerGroupWith = ref();	//编辑表单时抽屉宽度
 const formKey = ref<string>("") //表单标识
+const formGroupKey = ref<string>("") //表单标识
 const groupKey = ref<string>("") //分组标识
+const squareUrl = ref<string>('https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png')
 
+const page = ref<number>(1)			//页码
+const pageSize = ref<number>(12)	//每页显示几个
+const pageTotal = ref<number>(0)	//总记录数
+const groupFormList = ref<any[]>([]) //记录数组
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-09 09:06:32
 @ 功能: 选择添加项目
 */
-const handleCommand = (command: string) => {
+const handleCommand = (command: string,groupId: string) => {
 	// ElMessage(`click on item ${command}`)
 	if (command == "addForm"){
 		formKey.value = ""
+		formGroupKey.value = groupId
 		// addFormIsShow.value = true
 		drawerWith.value = contbody.value?.clientWidth
 		addFormIsShow.value = true;
 		
 	}else{
 		addFormGroupIsShow.value = true
-		drawerWith.value = 400
+		drawerGroupWith.value = 400
 	}
 }
 /**
 @ 作者: 秦东
+@ 时间: 2024-03-21 13:53:29
+@ 功能: 编辑分组
+*/
+const editFormGroup = (id: string) =>{
+	groupKey.value = id
+	addFormGroupIsShow.value = true
+	drawerGroupWith.value = 400
+}
+/**
+@ 作者: 秦东
 @ 时间: 2024-03-09 09:06:44
 @ 功能: 刷新页面
 */
@@ -50,13 +71,68 @@ const refreshPage = (pageType:string) =>{
 	}else{
 		addFormGroupIsShow.value = false;
 	}
+	gainFormGroup()
+}
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-21 09:30:27
+@ 功能: 获取表单分组
+*/
+const gainFormGroup = () => {
+	let sendInfo = {
+		page:page.value,
+		pagesize:pageSize.value,
+		state:1
+	}
+	customerFormGroupList(sendInfo)
+		.then((data) =>{
+			console.log("获取表单分组",data)
+			pageTotal.value = data.data.total
+			groupFormList.value = data.data.list
+		})
 }
+/**
+@ 作者: 秦东
+@ 时间: 2024-03-21 14:22:58
+@ 功能: 改变分组状态
+*/
+const eidtGroupStatus = (id: string, state: number) => {
+
+	ElMessageBox.confirm(
+		'您确定要删除此分组吗？一经删除！数据将不可恢复！请慎重执行此操作！！！',
+		'温馨提示',
+		{
+			confirmButtonText: '确定',
+			cancelButtonText: '取消',
+			type: 'warning',
+		}
+	)
+	.then(() => {
+		let sendInfo = {
+			id: id.toString(),
+			status: state
+		}
+		editFormGroupState(sendInfo)
+			.then((data) =>{
+				ElMessageBox.alert(data.msg, '温馨提示！', {
+						confirmButtonText: '确定',
+						callback: (action: Action) => {
+							gainFormGroup()
+						}
+				});
+			})
+	})
+
 	
+}
+onMounted(()=>{
+	drawerWith.value = contbody.value?.clientWidth
+	gainFormGroup()
+})
 </script>
 <template>
 	<div ref="contbody" class="box_content">
-		
+		<!-- <el-affix :offset="100" >
-		<el-affix :offset="100" class="affix_box">
 			<el-dropdown  @command="handleCommand">
 				<el-button type="primary" class="fa fa-plus" circle ></el-button>
 				<template #dropdown>
@@ -66,16 +142,50 @@ const refreshPage = (pageType:string) =>{
 					</el-dropdown-menu>
 				</template>
 			</el-dropdown>
-		</el-affix>
+		</el-affix> -->
 		
+		<el-row :gutter="10" class="formGroupList">
+			<el-col v-for="item in groupFormList" :key="item.id" :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
+				<el-card class="cardlarge" body-style="padding:0px 10px 10px 5px;">
+					<template #header>
+						<div class="cardHeadBox">
+							<div class="textBox">
+								<el-avatar v-if="item.icon!=''" shape="square" size="small" :src="item.icon" />
+								<el-avatar v-else shape="square" size="small" :src="squareUrl" />
+								<el-text  class="w-200px mb-2 left_suojin" truncated size="large">{{item.title}}</el-text>
+							</div>
+							<el-dropdown>
+								<span class="el-dropdown-link">
+								<el-icon><MoreFilled /></el-icon>
+								</span>
+								<template #dropdown>
+									<el-dropdown-menu>
+										<el-dropdown-item @click="handleCommand('addFormGroup',item.idStr)" >新增分组</el-dropdown-item>
+										<el-dropdown-item @click="handleCommand('addForm',item.idStr)" >添加表单</el-dropdown-item>
+										<el-dropdown-item @click="handleCommand('addFormApp',item.idStr)" >添加应用</el-dropdown-item>
+										<el-dropdown-item @click="editFormGroup(item.idStr)">编辑</el-dropdown-item>
+										<el-dropdown-item @click="eidtGroupStatus(item.idStr,3)">删除</el-dropdown-item>
+									</el-dropdown-menu>
+								</template>
+							</el-dropdown>
+						</div>
+					</template>
+					<AppFormList v-model:form-key="formKey" :group-id="item.idStr" :drawer-with="drawerWith" />
 					
-		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" v-model:form-key="formKey" @refreshPage="refreshPage" />
+				</el-card>
-		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerWith"  :group-key="groupKey" @refreshPage="refreshPage" />
 				
+			</el-col>
 			
+		</el-row>
+		<!-- 分页 -->
+		<div class="formGroupPage">
+			<el-pagination layout="prev, pager, next" v-model:current-page="page" :page-size="pageSize" :total="pageTotal" />
+		</div>
 
 
 			
+		<LowCodeFormPage v-if="addFormIsShow" :drawer-with="drawerWith" v-model:form-key="formKey" :form-group-key="formGroupKey" @refreshPage="refreshPage" />
+		<LowCodeFormGroupPage v-if="addFormGroupIsShow" :drawer-with="drawerGroupWith"  :group-key="groupKey" @refreshPage="refreshPage" />
 	</div>
 </template>
 <style  lang='scss' scoped>
@@ -84,9 +194,72 @@ const refreshPage = (pageType:string) =>{
 	height: calc(100vh - 90px);
 	overflow: hidden;
 	overflow-y: auto;
+	padding: 0;
+	.formGroupList{
+		width:100%;
+		padding: 0 0 10px 10px;
+	}
+	.formGroupPage{
+		width:100%;
+		position: fixed;
+		bottom: 0px;
+		text-align: center;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
 }
 .affix_box{
+	display: flex;
 	margin-left: 10px;
 }
+.cardHeadBox{
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	.textBox{
+		display: flex;
+		align-items: center;
+		vertical-align: middle;
+		word-wrap: break-word;
+		.mx-1{
+			padding-left:10px;
+		}
+	}
+}
+.but_centent{
+	text-align: center;
+}
+.foot_bottom{
+	padding: 0 ;
+}
+/* 小卡片 */
+.cardpattern{
+//   padding-bottom: 0px;
+//   margin-bottom: 10px;
+//   min-width: 100px;
+}
+/* 小卡片标题 */
+.cardhead{
+  font-size: 15px;
+}
+/* 大卡片 */
+.cardlarge{
+  max-width: 480px;
+  margin-top:10px;
+  ::v-deep .el-card__header{
+	padding:10px !important;
+  }
+}
+
+/* 大卡片标题 */
+.cardhead-large{
+  font-size: 20px;
+}
+.left_suojin{
+	padding-left: 10px;
+}
+
+
 
 </style>

src/views/sysworkflow/lowcodepage/lowCodeFormGroupPage.vue

@@ -6,7 +6,7 @@
 <script lang='ts' setup>
 import { fromGroupSearch,fromGroupInfo,editFromGroupInfo } from "@/api/DesignForm/gromGroup/types";
 import { gainFormGroupInfo,addCustomerFormGroup } from "@/api/DesignForm/gromGroup/api";
-
+import { editCustomerFormGroup } from '@/api/DesignForm/requestapi'
 
 
 const props = defineProps({
@@ -52,6 +52,7 @@ const handleClose = (done: () => void) => {
 			.then(() => {
 				//   done()
 				submitForm();
+				
 			})
 			.catch(() => {
 				// catch error
@@ -62,6 +63,7 @@ const handleClose = (done: () => void) => {
 	}
 	
 }
+
 /**
 @ 作者: 秦东
 @ 时间: 2024-03-09 11:51:28
@@ -71,17 +73,40 @@ const submitForm =  () => {
 	butLoading.value = true;
 	ruleFormGroup.value.validate((isValid: boolean) => {
 		if (isValid) {
-			addCustomerFormGroup(formGroupContent)
+			if(props.groupKey != ""){
-				.then((data) =>{
+				//编辑
-					ElMessage({
+				let sendInfo = {
-						message: data.msg,
+					id: props.groupKey,
-						type: 'success',
+					title: formGroupContent.title,
+					sort: formGroupContent.sort,
+					icon: formGroupContent.icon
+				}
+				editCustomerFormGroup(sendInfo)
+					.then((data) =>{
+						ElMessage({
+							message: data.msg,
+							type: 'success',
+						})
+						closeFormGroupBox();
 					})
-					closeFormGroupBox();
+					.finally(() =>{
-				})
+						butLoading.value = false;
-				.finally(() =>{
+					});
-					butLoading.value = false;
+			}else{
-				});
+				//新增
+				addCustomerFormGroup(formGroupContent)
+					.then((data) =>{
+						ElMessage({
+							message: data.msg,
+							type: 'success',
+						})
+						closeFormGroupBox();
+					})
+					.finally(() =>{
+						butLoading.value = false;
+					});
+			}
+			
 		}else{
 			butLoading.value = false;
 		}

src/views/sysworkflow/lowcodepage/lowCodeFormPage.vue

@@ -23,6 +23,10 @@ const props = defineProps({
 	formKey:{
 		type:String,
 		default:""
+	},
+	formGroupKey:{
+		type:String,
+		default:""
 	}
 });
 const formConfigCont = reactive<customerFormConfig>({
@@ -46,7 +50,9 @@ const state = reactive<formStruct>({
 			name:'',
 			formName: formConfigCont.formName
 		},
-		config: {},
+		config: {
+			groupKey:props.formGroupKey
+		},
 		styles:{
 			divStyle:{},
 			labelStyle:{},
@@ -191,7 +197,7 @@ const runNextWindows = (val:number) => {
 	tabsActive.value = val
 }
 onMounted(()=>{
-	formKeyStr.value = "16"
+	// formKeyStr.value = "13"
 })
 </script>
 <template>
@@ -200,7 +206,6 @@ 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">
-					
 					<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">

src/views/sysworkflow/lowcodepage/pageDesignes.vue

@@ -496,6 +496,7 @@ const getInitData = ()	=> {
 			.then((res:any) => {
 				if(res.code == 0){
 					const result = res.data
+					console.log("初始设计搜索时--1--->",result)
 					// 初始设计搜索时res.data=''
 					if (result.mastesform) {
 						state.value.formData = stringToObj(result.mastesform)
@@ -507,6 +508,7 @@ const getInitData = ()	=> {
 						state.value.formData.purview=kjdkjksd.purview
 						console.log("初始设计搜索时--->",kjdkjksd)
 					}
+					state.value.formData.config.groupKey = result.groupKey
 					console.log("初始设计搜索时--end->",state.value.formData)
 					state.value.formDict = string2json(result.dict)
 					// 恢复表单名称

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>
+  

src/views/taskplatform/taskmanagement/taskcustomerformnew.vue

@@ -102,7 +102,7 @@ const getTaskFormData = () =>{
 	loadingData.value = true;
 	formLoading.value = true;
 	formLoading.value = true;
-	haveCustomerFormVersion({id:props.versionid})
+	haveCustomerFormVersion({id:props.versionid.toString()})
 		.then(({ data }) =>{
 			console.log("表单数据",data)
 			gainFlowChart.id=data.flowkeystr