Merge branch 'v5'

src/assets/scss/form.scss

@@ -161,7 +161,7 @@ $mainColor: #66b1ff;
     padding: 0;
     width: 100%;
   }
-  .group {border: 1px dashed #ddd;margin: 2px 2px 10px 2px;padding: 5px;position: relative;min-height: 50px;
+  .group {border: 1px dashed #ddd;margin: 2px 0px 10px 0px;padding: 5px;position: relative;min-height: 50px;
     &.active {border: 3px solid $mainColor;position: relative;
       > .drag-control {display: block}
       > .tooltip {display: block;}
@@ -194,6 +194,49 @@ $mainColor: #66b1ff;
     .group {width: 23%}
   }
 }
+.detail-form {min-height: calc(100vh - 170px);
+  > div {height: 100%}
+  > .drag {min-height: calc(100vh - 170px) !important;}
+  .ghost {
+    background: #F56C6C;
+    border: 2px solid #F56C6C;
+    outline-width: 0;
+    height: 3px;
+    box-sizing: border-box;
+    font-size: 0;
+    content: '';
+    overflow: hidden;
+    padding: 0;
+    width: 100%;
+  }
+  .group {border: 0px dashed #ddd;margin: 2px 0px 10px 0px;padding: 5px;position: relative;min-height: 50px;
+  
+ 
+    > div {margin-bottom: 0}
+  
+    
+  }
+  .group-inputSlot {border-color: #eebe77;display: inline-block;
+    &:hover, &.active {border-color: #eebe77 !important;}
+  }
+  .tooltip {display: none;position: absolute;font-size: 12px;top: 0;right: 0;z-index: 5}
+  .drag-control {display: none;
+    .item-control {position: absolute;right: 0;bottom: 0;z-index: 2; display: flex;align-items: center;height: 24px;background: $mainColor;
+      i {width: 24px;height: 24px;color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer}
+    }
+    .drag-move {position: absolute;left: 0;top: 0;z-index: 2;width: 24px;height: 24px;background: $mainColor;color: #fff;text-align: center;line-height: 24px;cursor: move}
+  }
+  .drag {height: 100%;border: 0px dashed #ddd;min-height: 40px;margin: 0 2px;padding: 5px;align-content: flex-start;}
+  &.form-row-2 {
+    .group {width: 48%}
+  }
+  &.form-row-3 {
+    .group {width: 32%}
+  }
+  &.form-row-4 {
+    .group {width: 23%}
+  }
+}
 /*表格设计*/
 .design-table {
   .main-body {border-left: 0}

src/components/DesignForm/public/form/form.vue

@@ -4,6 +4,8 @@
 @ 备注: 自定义表单通用模块
 -->
 <script lang='ts' setup>
+import '@/assets/scss/element-var.scss'
+import '@/assets/scss/index.scss'
 import FormGroup from './formGroup.vue'
 import { FormData,FormList,FormDataStyle } from '@/api/DesignForm/types'
 import { getRequest } from '@/api/DesignForm'
@@ -1080,10 +1082,12 @@ defineExpose({
 			class="add-form"
 			:class="{
 				'design-form': type === 5,
-				'detail-form': type === 3 || type === 4
+				'detail-form': type === 3 || type === 4 || type === 1
 			}"
 		>
+			
 			<FormGroup :tableinfo="formData.form" :numrun="numrun" :data="formData.list" />
+			
 			<slot></slot>
 	  	</el-form>
 	</div>