hxgksystemapp/src/components/DesignForm/layoutPage/index.vue

<!--
@ 作者: 秦东
@ 时间: 2024-02-29 14:18:54
@ 备注: 样式布局
-->
<script lang='ts' setup>
import DesignLayout from "@/components/DesignForm/designLayout/designLayoutPage.vue"
import BianXian from "@/components/DesignForm/designLayout/bianXian.vue"
import YuanJiao from "@/components/DesignForm/designLayout/yuanjao.vue"
import UnitBackGround from "@/components/DesignForm/designLayout/unitBackGround.vue"
import PageSize from "@/components/DesignForm/designLayout/pageSize.vue"
import PageSizeSmail from "@/components/DesignForm/designLayout/pageSizeSmail.vue"
import TextPage from "@/components/DesignForm/designLayout/textPage.vue"

const props = defineProps({
	stylesVal:{
		type:Object,
		default(){
			return {}
		}
	},
    place:{
		type:String,
		default:""
	}
});
const buttionShow = ref(false)
const unitIsShow = ref(true)
const labelIsShow = ref(true)
const inputUnitTitle = (val:string) => {
	console.log("inputUnitTitle",val);
	switch (val) {
		case "radio":
			return "Radio布局"
			break;
		case "select":
			unitIsShow.value = false;
			break;
		case "datePicker":
			unitIsShow.value = false;
			break;
		case "timePicker":
			unitIsShow.value = false;
			break;
		case "switch":
			unitIsShow.value = false;
			break;
		case "inputNumber":
			unitIsShow.value = false;
			break;
		case "cascader":
			unitIsShow.value = false;
			break;
		case "rate":
			unitIsShow.value = false;
			break;
		case "slider":
			unitIsShow.value = false;
			break;
		case "treeSelect":
			unitIsShow.value = false;
			break;
		case "txt":
			unitIsShow.value = false;
			labelIsShow.value = false;
			break;
		case "title":
			unitIsShow.value = false;
			break;
		case "button":
			buttionShow.value = true;
			unitIsShow.value = false;
			labelIsShow.value = false;
			break;
		default:
			return "Input布局"
			break;
	}
	return "Input布局"
}
// const divStyle = reactive<any>({})
// watch(()=>divStyle,(val : any)=>{
//     // console.log("格式布局-----1--->",val)
//     props.stylesVal[props.place] = val
//     // Object.assign(store.controlAttr.styles.divStyle, val)
// },
// {
//     deep: true
// });

watch(()=>props.place,(val : any)=>{
    console.log("格式布局-----1--->",val)
	inputUnitTitle(val);
    // props.stylesVal[props.place] = val
    // Object.assign(store.controlAttr.styles.divStyle, val)
},
{
    deep: true
});
const activeName = ref('0')
</script>
<template>
	<div class="jhk_kjh">
	当前组件类别======>{{props.place}}
        <el-collapse v-model="activeName" accordion>

            <el-collapse-item title="边框布局" name="1">

                <el-divider content-position="left">外框</el-divider>
                <DesignLayout v-model:layouyt-style="props.stylesVal.divStyle" />
                <el-divider content-position="left">圆角</el-divider>
                <YuanJiao v-model:layouyt-style="props.stylesVal.divStyle" />
                <el-divider content-position="left">边线</el-divider>
                <BianXian v-model:dataVal="props.stylesVal.divStyle" />
                <el-divider content-position="left">背景</el-divider>
                <UnitBackGround v-model:layouyt-style="props.stylesVal.divStyle" />
                <el-divider content-position="left">尺寸</el-divider>
                <PageSize  v-model:layouyt-style="props.stylesVal.divStyle" :place="'div'" />

				<el-divider v-if="props.place=='txt'" content-position="left">文本</el-divider>
                <TextPage  v-if="props.place=='txt'" v-model:layouyt-style="props.stylesVal.divStyle" :place="'div'" />

            </el-collapse-item>

            <el-collapse-item v-if="labelIsShow" title="Lable布局" name="2">
                <el-divider content-position="left">外框</el-divider>
                <DesignLayout v-model:layouyt-style="props.stylesVal.labelStyle" />
                <el-divider content-position="left">圆角</el-divider>
                <YuanJiao v-model:layouyt-style="props.stylesVal.labelStyle" />
                <el-divider content-position="left">边线</el-divider>
                <BianXian v-model:dataVal="props.stylesVal.labelStyle" />
                <el-divider content-position="left">背景</el-divider>
                <UnitBackGround v-model:layouyt-style="props.stylesVal.labelStyle" />
                <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-item v-if="unitIsShow" :title="inputUnitTitle(props.place)" name="3">
                <el-divider content-position="left">外框</el-divider>
                <DesignLayout v-model:layouyt-style="props.stylesVal.inputStyle" />
                
                <el-divider content-position="left">边线</el-divider>
                <BianXian v-model:dataVal="props.stylesVal.inputStyle" />
                <el-divider content-position="left">背景</el-divider>
                <UnitBackGround v-model:layouyt-style="props.stylesVal.inputStyle" />
                <el-divider content-position="left">尺寸</el-divider>
                <PageSizeSmail  v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" />
                <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>
<style >
.jhk_kjh .el-collapse-item__header{
    padding-left: 10px;
    background-color: rgb(229, 229, 229);
}
</style>