设置组件CSS控制器

src/components/DesignForm/assembly/index.ts

@@ -402,6 +402,14 @@ const selectOption: any = [
 	  title: '高级字段',
 	  children: [
 		{
+			type: 'table',
+			label: '子表',
+			icon: 'component',
+			iconFont: 'fa-table',
+			control: {
+				modelValue: ''
+			},
+			config: {},
 			styles:{
 				divStyle:{},
 				labelStyle:{},

src/components/DesignForm/designLayout/bianXian.vue

@@ -128,7 +128,7 @@ watch(()=>props.dataVal.lineColorVal,(val : any)=>{
 });
 </script>
 <template>
-    <table style="width:100%">
+    <table style="width:94%; margin-left:3%">
         <tr>
             <td width="50">方向</td>
             <td>
@@ -142,14 +142,15 @@ watch(()=>props.dataVal.lineColorVal,(val : any)=>{
         <tr>
             <td>颜色</td>
             <td>
-                <el-color-picker v-model="props.dataVal.lineColorVal" :predefine="predefineColors"  size="default" />
+                <el-color-picker v-model="props.dataVal.lineColorVal" :predefine="predefineColors"  size="default" show-alpha />
                 {{ props.dataVal.lineColorVal }}
             </td>
         </tr>
         <tr>
             <td>宽度</td>
             <td>
-                <el-input-number v-model="props.dataVal.boxWidth" min="0" controls-position="right"></el-input-number>Px
+                <el-input-number v-model="props.dataVal.boxWidth" min="0" controls-position="right">
+				</el-input-number>PX
             </td>
         </tr>
         <tr>

src/components/DesignForm/designLayout/pageSize.vue

@@ -147,7 +147,7 @@ const xiuShi  = (val:any) =>{
 }
 </script>
 <template>
-    <el-row>
+    <el-row style="width:94%; margin-left:3%">
         <el-col :span="24">
 			<el-switch
 				v-model="props.layouytStyle.widthStatus"
@@ -164,7 +164,7 @@ const xiuShi  = (val:any) =>{
 					<td width="70">宽度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.width">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -172,7 +172,7 @@ const xiuShi  = (val:any) =>{
 					<td>最大宽度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.widthMax">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -180,7 +180,7 @@ const xiuShi  = (val:any) =>{
 					<td>最小宽度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.widthMin">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -192,7 +192,7 @@ const xiuShi  = (val:any) =>{
 					<td width="70">Xs</td>
 					<td>
 						<el-input v-model="props.layouytStyle.widthXs">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -200,7 +200,7 @@ const xiuShi  = (val:any) =>{
 					<td>Sm</td>
 					<td>
 						<el-input v-model="props.layouytStyle.widthSm">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -208,7 +208,7 @@ const xiuShi  = (val:any) =>{
 					<td>Md</td>
 					<td>
 						<el-input v-model="props.layouytStyle.widthMd">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -216,7 +216,7 @@ const xiuShi  = (val:any) =>{
 					<td>Lg</td>
 					<td>
 						<el-input v-model="props.layouytStyle.widthLg">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -224,7 +224,7 @@ const xiuShi  = (val:any) =>{
 					<td>Xl</td>
 					<td>
 						<el-input v-model="props.layouytStyle.widthXl">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -237,7 +237,7 @@ const xiuShi  = (val:any) =>{
 					<td width="70">高度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.height">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -245,7 +245,7 @@ const xiuShi  = (val:any) =>{
 					<td>最大高度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.heightMax">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -253,7 +253,7 @@ const xiuShi  = (val:any) =>{
 					<td>最小高度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.heightMin">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>

src/components/DesignForm/designLayout/pageSizeSmail.vue

@@ -122,12 +122,12 @@ watch(()=>props.layouytStyle.objectFit,(val:any) => {
 })
 </script>
 <template>
-    <table style="width:100%">
+    <table style="width:94%; margin-left:3%">
 		<tr>
 			<td width="70">宽度</td>
 			<td>
 				<el-input v-model="props.layouytStyle.width">
-					<template #append>PX</template>
+					<template #suffix>PX</template>
 				</el-input>
 			</td>
 		</tr>
@@ -135,7 +135,7 @@ watch(()=>props.layouytStyle.objectFit,(val:any) => {
 			<td>最大宽度</td>
 			<td>
 				<el-input v-model="props.layouytStyle.widthMax">
-					<template #append>PX</template>
+					<template #suffix>PX</template>
 				</el-input>
 			</td>
 		</tr>
@@ -143,7 +143,7 @@ watch(()=>props.layouytStyle.objectFit,(val:any) => {
 			<td>最小宽度</td>
 			<td>
 				<el-input v-model="props.layouytStyle.widthMin">
-					<template #append>PX</template>
+					<template #suffix>PX</template>
 				</el-input>
 			</td>
 		</tr>
@@ -151,7 +151,7 @@ watch(()=>props.layouytStyle.objectFit,(val:any) => {
 					<td >高度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.height">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -159,7 +159,7 @@ watch(()=>props.layouytStyle.objectFit,(val:any) => {
 					<td>最大高度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.heightMax">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>
@@ -167,7 +167,7 @@ watch(()=>props.layouytStyle.objectFit,(val:any) => {
 					<td>最小高度</td>
 					<td>
 						<el-input v-model="props.layouytStyle.heightMin">
-							<template #append>PX</template>
+							<template #suffix>PX</template>
 						</el-input>
 					</td>
 				</tr>

src/components/DesignForm/designLayout/textPage.vue

@@ -74,14 +74,30 @@ const fontWeightList = [
 		label:"bolder",
 	}
 ];
+const textColor = ref([
+    '#ff4500',
+    '#ff8c00',
+    '#ffd700',
+    '#90ee90',
+    '#00ced1',
+    '#1e90ff',
+    '#c71585',
+    'rgba(255, 69, 0, 0.68)',
+    'rgb(255, 120, 0)',
+    'hsv(51, 100, 98)',
+    'hsva(120, 40, 94, 0.5)',
+    'hsl(181, 100%, 37%)',
+    'hsla(209, 100%, 56%, 0.73)',
+    '#c7158577',
+])
 </script>
 <template>
-    <table style="width:100%">
+    <table style="width:94%; margin-left:3%">
         <tr>
 			<td width="70">字号</td>
 			<td>
 				<el-input v-model="props.layouytStyle.fontSize">
-					<template #append>PX</template>
+					<template #suffix>PX</template>
 				</el-input>
 			</td>
 		</tr>
@@ -106,7 +122,7 @@ const fontWeightList = [
 			<td width="70">行高</td>
 			<td>
 				<el-input v-model="props.layouytStyle.fontHight">
-					<template #append>PX</template>
+					<template #suffix>PX</template>
 				</el-input>
 			</td>
 		</tr>
@@ -130,8 +146,8 @@ const fontWeightList = [
         <tr>
             <td width="50">颜色</td>
             <td>
-                <el-color-picker v-model="props.layouytStyle.fontColor" size="default" />
+                <el-color-picker v-model="props.layouytStyle.fontColor" :predefine="textColor"  size="default" show-alpha />
-                {{ props.layouytStyle.backgroundColor }}
+                {{ props.layouytStyle.fontColor }}
             </td>
         </tr>
     </table>

src/components/DesignForm/designLayout/unitBackGround.vue

@@ -40,16 +40,44 @@ watch(()=>transparency,(val : any)=>{
 {
     deep: true
 });
-if(props.layouytStyle.backgroundColor){
+if(props.layouytStyle.transparency){
-    props.layouytStyle.backgroundColor = 100
+    if(props.layouytStyle.transparency == "" || props.layouytStyle.transparency == null){
+		props.layouytStyle.transparency = 100
 	}
+}else{
+	props.layouytStyle.transparency = 100
+}
+// if(props.layouytStyle.backgroundColor){
+//     if(props.layouytStyle.backgroundColor == "" || props.layouytStyle.backgroundColor == null){
+// 		props.layouytStyle.backgroundColor = 'rgba(255, 255, 255, 1)'
+// 	}
+// }else{
+// 	props.layouytStyle.backgroundColor = 'rgba(255, 255, 255, 1)'
+// }
+const predefineColorsd = ref([
+    '#ff4500',
+    '#ff8c00',
+    '#ffd700',
+    '#90ee90',
+    '#00ced1',
+    '#1e90ff',
+    '#c71585',
+    'rgba(255, 69, 0, 0.68)',
+    'rgb(255, 120, 0)',
+    'hsv(51, 100, 98)',
+    'hsva(120, 40, 94, 0.5)',
+    'hsl(181, 100%, 37%)',
+    'hsla(209, 100%, 56%, 0.73)',
+    '#c7158577',
+])
 </script>
 <template>
-    <table style="width:100%">
+    <table style="width:94%; margin-left:3%">
         <tr>
             <td width="50">颜色</td>
             <td>
-                <el-color-picker v-model="props.layouytStyle.backgroundColor"   size="default" />
+                <el-color-picker v-model="props.layouytStyle.backgroundColor" :predefine="predefineColorsd" show-alpha  size="default" />
+			
                 {{ props.layouytStyle.backgroundColor }}
             </td>
         </tr>

src/components/DesignForm/designLayout/yuanjao.vue

@@ -124,7 +124,7 @@ const calculationProperties = () =>{
 }
 </script>
 <template>
-    <table style="width:100%">
+    <table style="width:94%; margin-left:3%">
         <tr>
             <td style="width:55px">
                 <el-image style="width: 20px; height: 20px; cursor: pointer;" :src="BianKuangYj" :fit="'fit'" @click.top="boxHornCope(1)" />

src/components/DesignForm/formControlAttr.vue

@@ -2033,6 +2033,7 @@ const cssIsShouw = (val:any) => {
 						</el-button>
 					</div>
 					<el-divider content-position="left">组件布局</el-divider>
+					
 					<LayoutPage v-if="cssIsShouw(attrList)"  v-model:styles-val="controlDataStyls" :place="controlData.type" />
 
 

src/components/DesignForm/layoutPage/index.vue

@@ -24,6 +24,7 @@ const props = defineProps({
 		default:""
 	}
 });
+const buttionShow = ref(false)
 const unitIsShow = ref(true)
 const labelIsShow = ref(true)
 const inputUnitTitle = (val:string) => {
@@ -66,6 +67,11 @@ const inputUnitTitle = (val:string) => {
 		case "title":
 			unitIsShow.value = false;
 			break;
+		case "button":
+			buttionShow.value = true;
+			unitIsShow.value = false;
+			labelIsShow.value = false;
+			break;
 		default:
 			return "Input布局"
 			break;
@@ -144,6 +150,16 @@ const activeName = ref('0')
                 <el-divider content-position="left">文本</el-divider>
                 <TextPage  v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" />
             </el-collapse-item>
+
+			<el-collapse-item v-if="buttionShow" title="按钮布局" name="2">
+                <el-divider content-position="left">尺寸</el-divider>
+                <PageSizeSmail  v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" />
+                <el-divider content-position="left">文本</el-divider>
+                <TextPage  v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" />
+            </el-collapse-item>
+
+
+
         </el-collapse>
     </div>
 </template>

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

@@ -436,8 +436,9 @@ const getFormItemLableStyle = (ele: any) => {
 						<el-button
 						v-bind="element.control"
 						@click="clickBtn(element.control)"
+						color="#626aef"
 						>
-							{{ element.control?.label }}
+						<td :style="getFormItemLableStyle(element.styles)">{{ element.control?.label }}</td>
 						</el-button>
 					</div>
 					

src/types/components.d.ts

@@ -9,7 +9,6 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    '副本': typeof import('./../components/DesignForm/formControlAttr - 副本.vue')['default']
     AceDrawer: typeof import('./../components/DesignForm/aceDrawer.vue')['default']
     AddNode: typeof import('./../components/workflow/addNode.vue')['default']
     ApproverDrawer: typeof import('./../components/workflow/drwer/approverDrawer.vue')['default']
@@ -22,14 +21,11 @@ declare module '@vue/runtime-core' {
     DesignLayoutPage: typeof import('./../components/DesignForm/designLayout/designLayoutPage.vue')['default']
     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']
-    ElAlert: typeof import('element-plus/es')['ElAlert']
     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']
@@ -57,7 +53,6 @@ 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']
@@ -71,11 +66,7 @@ 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']
-    ElSpace: typeof import('element-plus/es')['ElSpace']
-    ElStep: typeof import('element-plus/es')['ElStep']
-    ElSteps: typeof import('element-plus/es')['ElSteps']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
     ElSwitch: typeof import('element-plus/es')['ElSwitch']
     ElTable: typeof import('element-plus/es')['ElTable']
@@ -84,11 +75,8 @@ declare module '@vue/runtime-core' {
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
     ElText: typeof import('element-plus/es')['ElText']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElTimePicker: typeof import('element-plus/es')['ElTimePicker']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
-    ElTransfer: typeof import('element-plus/es')['ElTransfer']
     ElTree: typeof import('element-plus/es')['ElTree']
     ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     ElUpload: typeof import('element-plus/es')['ElUpload']
@@ -112,25 +100,15 @@ 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']
-    IEpCollection: typeof import('~icons/ep/collection')['default']
     IEpDelete: typeof import('~icons/ep/delete')['default']
-    IEpDownload: typeof import('~icons/ep/download')['default']
     IEpEdit: typeof import('~icons/ep/edit')['default']
     IEpMessageBox: typeof import('~icons/ep/message-box')['default']
-    IEpMinus: typeof import('~icons/ep/minus')['default']
     IEpOperation: typeof import('~icons/ep/operation')['default']
-    IEpPicture: typeof import('~icons/ep/picture')['default']
     IEpPlus: typeof import('~icons/ep/plus')['default']
-    IEpPosition: typeof import('~icons/ep/position')['default']
     IEpRefresh: typeof import('~icons/ep/refresh')['default']
-    IEpRefreshLeft: typeof import('~icons/ep/refresh-left')['default']
     IEpSearch: typeof import('~icons/ep/search')['default']
     IEpSetting: typeof import('~icons/ep/setting')['default']
-    IEpTop: typeof import('~icons/ep/top')['default']
-    IEpUploadFilled: typeof import('~icons/ep/upload-filled')['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']

src/widget/digitpage/index.vue

@@ -15,7 +15,7 @@
 			<span :style="getFormItemLableStyle(configStyle)">{{ getLabel(data.item) }}</span>
 			<Tooltips :content="config.help" />
 		</template>
-		<template #label v-else>1
+		<template #label v-else>
 			<span :style="getFormItemLableStyle(configStyle)" >{{ getLabel(data.item) }}</span>
 		</template>
 		<div  v-if="type === 4"  class="form-value" v-html="value"></div>