|
|
|
@ -1,5 +1,4 @@ |
|
|
|
<!-- |
|
|
|
<<<<<<< HEAD |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 2024-02-29 14:18:54 |
|
|
|
@ 备注: 样式布局 |
|
|
|
@ -173,179 +172,3 @@ const activeName = ref('0') |
|
|
|
background-color: rgb(229, 229, 229); |
|
|
|
} |
|
|
|
</style> |
|
|
|
======= |
|
|
|
@ 作者: 秦东 |
|
|
|
@ 时间: 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 "输入设置" |
|
|
|
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","upload","tinymce": |
|
|
|
unitIsShow.value = false; |
|
|
|
break; |
|
|
|
case "treeSelect","colorPicker","signaturemap": |
|
|
|
unitIsShow.value = false; |
|
|
|
break; |
|
|
|
case "txt","table","videoUpAndPlay","lowcodeCarsusel","grid","tabs": |
|
|
|
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: |
|
|
|
unitIsShow.value = true; |
|
|
|
labelIsShow.value = true; |
|
|
|
return "输入设置" |
|
|
|
break; |
|
|
|
} |
|
|
|
return "输入设置" |
|
|
|
} |
|
|
|
// 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="标签设置" 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> |
|
|
|
|
|
|
|
>>>>>>> v7_master |
|
|
|
|