2 changed files with 2478 additions and 2476 deletions
File diff suppressed because it is too large
@ -1,174 +1,175 @@ |
|||||
<!-- |
<!-- |
||||
@ 作者: 秦东 |
@ 作者: 秦东 |
||||
@ 时间: 2024-02-29 14:18:54 |
@ 时间: 2024-02-29 14:18:54 |
||||
@ 备注: 样式布局 |
@ 备注: 样式布局 |
||||
--> |
--> |
||||
<script lang='ts' setup> |
<script lang='ts' setup> |
||||
import DesignLayout from "@/components/DesignForm/designLayout/designLayoutPage.vue" |
import DesignLayout from "@/components/DesignForm/designLayout/designLayoutPage.vue" |
||||
import BianXian from "@/components/DesignForm/designLayout/bianXian.vue" |
import BianXian from "@/components/DesignForm/designLayout/bianXian.vue" |
||||
import YuanJiao from "@/components/DesignForm/designLayout/yuanjao.vue" |
import YuanJiao from "@/components/DesignForm/designLayout/yuanjao.vue" |
||||
import UnitBackGround from "@/components/DesignForm/designLayout/unitBackGround.vue" |
import UnitBackGround from "@/components/DesignForm/designLayout/unitBackGround.vue" |
||||
import PageSize from "@/components/DesignForm/designLayout/pageSize.vue" |
import PageSize from "@/components/DesignForm/designLayout/pageSize.vue" |
||||
import PageSizeSmail from "@/components/DesignForm/designLayout/pageSizeSmail.vue" |
import PageSizeSmail from "@/components/DesignForm/designLayout/pageSizeSmail.vue" |
||||
import TextPage from "@/components/DesignForm/designLayout/textPage.vue" |
import TextPage from "@/components/DesignForm/designLayout/textPage.vue" |
||||
|
|
||||
const props = defineProps({ |
const props = defineProps({ |
||||
stylesVal:{ |
stylesVal:{ |
||||
type:Object, |
type:Object, |
||||
default(){ |
default(){ |
||||
return {} |
return {} |
||||
} |
} |
||||
}, |
}, |
||||
place:{ |
place:{ |
||||
type:String, |
type:String, |
||||
default:"" |
default:"" |
||||
} |
} |
||||
}); |
}); |
||||
const buttionShow = ref(false) |
const buttionShow = ref(false) |
||||
const unitIsShow = ref(true) |
const unitIsShow = ref(true) |
||||
const labelIsShow = ref(true) |
const labelIsShow = ref(true) |
||||
const inputUnitTitle = (val:string) => { |
const inputUnitTitle = (val:string) => { |
||||
console.log("inputUnitTitle",val); |
console.log("inputUnitTitle",val); |
||||
switch (val) { |
switch (val) { |
||||
case "radio": |
case "radio": |
||||
return "Radio布局" |
return "输入设置" |
||||
break; |
break; |
||||
case "select": |
case "select": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "datePicker": |
case "datePicker": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "timePicker": |
case "timePicker": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "switch": |
case "switch": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "inputNumber": |
case "inputNumber": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "cascader": |
case "cascader": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "rate": |
case "rate": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "slider","upload","tinymce": |
case "slider","upload","tinymce": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "treeSelect","colorPicker","signaturemap": |
case "treeSelect","colorPicker","signaturemap": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "txt","table","videoUpAndPlay","lowcodeCarsusel","grid","tabs": |
case "txt","table","videoUpAndPlay","lowcodeCarsusel","grid","tabs": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
labelIsShow.value = false; |
labelIsShow.value = false; |
||||
break; |
break; |
||||
case "title": |
case "title": |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
break; |
break; |
||||
case "button": |
case "button": |
||||
buttionShow.value = true; |
buttionShow.value = true; |
||||
unitIsShow.value = false; |
unitIsShow.value = false; |
||||
labelIsShow.value = false; |
labelIsShow.value = false; |
||||
break; |
break; |
||||
|
|
||||
default: |
default: |
||||
unitIsShow.value = true; |
unitIsShow.value = true; |
||||
labelIsShow.value = true; |
labelIsShow.value = true; |
||||
return "Input布局" |
return "输入设置" |
||||
break; |
break; |
||||
} |
} |
||||
return "Input布局" |
return "输入设置" |
||||
} |
} |
||||
// const divStyle = reactive<any>({}) |
// const divStyle = reactive<any>({}) |
||||
// watch(()=>divStyle,(val : any)=>{ |
// watch(()=>divStyle,(val : any)=>{ |
||||
// // console.log("格式布局-----1--->",val) |
// // console.log("格式布局-----1--->",val) |
||||
// props.stylesVal[props.place] = val |
// props.stylesVal[props.place] = val |
||||
// // Object.assign(store.controlAttr.styles.divStyle, val) |
// // Object.assign(store.controlAttr.styles.divStyle, val) |
||||
// }, |
// }, |
||||
// { |
// { |
||||
// deep: true |
// deep: true |
||||
// }); |
// }); |
||||
|
|
||||
watch(()=>props.place,(val : any)=>{ |
watch(()=>props.place,(val : any)=>{ |
||||
console.log("格式布局-----1--->",val) |
console.log("格式布局-----1--->",val) |
||||
inputUnitTitle(val); |
inputUnitTitle(val); |
||||
// props.stylesVal[props.place] = val |
// props.stylesVal[props.place] = val |
||||
// Object.assign(store.controlAttr.styles.divStyle, val) |
// Object.assign(store.controlAttr.styles.divStyle, val) |
||||
}, |
}, |
||||
{ |
{ |
||||
deep: true |
deep: true |
||||
}); |
}); |
||||
const activeName = ref('0') |
const activeName = ref('0') |
||||
</script> |
</script> |
||||
<template> |
<template> |
||||
<div class="jhk_kjh"> |
<div class="jhk_kjh"> |
||||
当前组件类别======>{{props.place}} |
<!-- 当前组件类别======>{{props.place}} --> |
||||
<el-collapse v-model="activeName" accordion> |
<el-collapse v-model="activeName" accordion> |
||||
|
|
||||
<el-collapse-item title="边框布局" name="1"> |
<el-collapse-item title="边框设置" name="1"> |
||||
|
|
||||
<el-divider content-position="left">外框</el-divider> |
<el-divider content-position="left">外框</el-divider> |
||||
<DesignLayout v-model:layouyt-style="props.stylesVal.divStyle" /> |
<DesignLayout v-model:layouyt-style="props.stylesVal.divStyle" /> |
||||
<el-divider content-position="left">圆角</el-divider> |
<el-divider content-position="left">圆角</el-divider> |
||||
<YuanJiao v-model:layouyt-style="props.stylesVal.divStyle" /> |
<YuanJiao v-model:layouyt-style="props.stylesVal.divStyle" /> |
||||
<el-divider content-position="left">边线</el-divider> |
<el-divider content-position="left">边线</el-divider> |
||||
<BianXian v-model:dataVal="props.stylesVal.divStyle" /> |
<BianXian v-model:dataVal="props.stylesVal.divStyle" /> |
||||
<el-divider content-position="left">背景</el-divider> |
<el-divider content-position="left">背景</el-divider> |
||||
<UnitBackGround v-model:layouyt-style="props.stylesVal.divStyle" /> |
<UnitBackGround v-model:layouyt-style="props.stylesVal.divStyle" /> |
||||
<el-divider content-position="left">尺寸</el-divider> |
<el-divider content-position="left">尺寸</el-divider> |
||||
<PageSize v-model:layouyt-style="props.stylesVal.divStyle" :place="'div'" /> |
<PageSize v-model:layouyt-style="props.stylesVal.divStyle" :place="'div'" /> |
||||
|
|
||||
<el-divider v-if="props.place=='txt'" content-position="left">文本</el-divider> |
<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'" /> |
<TextPage v-if="props.place=='txt'" v-model:layouyt-style="props.stylesVal.divStyle" :place="'div'" /> |
||||
|
|
||||
</el-collapse-item> |
</el-collapse-item> |
||||
|
|
||||
<el-collapse-item v-if="labelIsShow" title="Lable布局" name="2"> |
<el-collapse-item v-if="labelIsShow" title="标签设置" name="2"> |
||||
<el-divider content-position="left">外框</el-divider> |
<el-divider content-position="left">外框</el-divider> |
||||
<DesignLayout v-model:layouyt-style="props.stylesVal.labelStyle" /> |
<DesignLayout v-model:layouyt-style="props.stylesVal.labelStyle" /> |
||||
<el-divider content-position="left">圆角</el-divider> |
<el-divider content-position="left">圆角</el-divider> |
||||
<YuanJiao v-model:layouyt-style="props.stylesVal.labelStyle" /> |
<YuanJiao v-model:layouyt-style="props.stylesVal.labelStyle" /> |
||||
<el-divider content-position="left">边线</el-divider> |
<el-divider content-position="left">边线</el-divider> |
||||
<BianXian v-model:dataVal="props.stylesVal.labelStyle" /> |
<BianXian v-model:dataVal="props.stylesVal.labelStyle" /> |
||||
<el-divider content-position="left">背景</el-divider> |
<el-divider content-position="left">背景</el-divider> |
||||
<UnitBackGround v-model:layouyt-style="props.stylesVal.labelStyle" /> |
<UnitBackGround v-model:layouyt-style="props.stylesVal.labelStyle" /> |
||||
<el-divider content-position="left">尺寸</el-divider> |
<el-divider content-position="left">尺寸</el-divider> |
||||
<PageSizeSmail v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
<PageSizeSmail v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
||||
<el-divider content-position="left">文本</el-divider> |
<el-divider content-position="left">文本</el-divider> |
||||
<TextPage v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
<TextPage v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
||||
</el-collapse-item> |
</el-collapse-item> |
||||
|
|
||||
<el-collapse-item v-if="unitIsShow" :title="inputUnitTitle(props.place)" name="3"> |
<el-collapse-item v-if="unitIsShow" :title="inputUnitTitle(props.place)" name="3"> |
||||
<el-divider content-position="left">外框</el-divider> |
<el-divider content-position="left">外框</el-divider> |
||||
<DesignLayout v-model:layouyt-style="props.stylesVal.inputStyle" /> |
<DesignLayout v-model:layouyt-style="props.stylesVal.inputStyle" /> |
||||
|
|
||||
<el-divider content-position="left">边线</el-divider> |
<el-divider content-position="left">边线</el-divider> |
||||
<BianXian v-model:dataVal="props.stylesVal.inputStyle" /> |
<BianXian v-model:dataVal="props.stylesVal.inputStyle" /> |
||||
<el-divider content-position="left">背景</el-divider> |
<el-divider content-position="left">背景</el-divider> |
||||
<UnitBackGround v-model:layouyt-style="props.stylesVal.inputStyle" /> |
<UnitBackGround v-model:layouyt-style="props.stylesVal.inputStyle" /> |
||||
<el-divider content-position="left">尺寸</el-divider> |
<el-divider content-position="left">尺寸</el-divider> |
||||
<PageSizeSmail v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" /> |
<PageSizeSmail v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" /> |
||||
<el-divider content-position="left">文本</el-divider> |
<el-divider content-position="left">文本</el-divider> |
||||
<TextPage v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" /> |
<TextPage v-model:layouyt-style="props.stylesVal.inputStyle" :place="'div'" /> |
||||
</el-collapse-item> |
</el-collapse-item> |
||||
|
|
||||
<el-collapse-item v-if="buttionShow" title="按钮布局" name="2"> |
<el-collapse-item v-if="buttionShow" title="输入设置" name="2"> |
||||
<el-divider content-position="left">尺寸</el-divider> |
<el-divider content-position="left">尺寸</el-divider> |
||||
<PageSizeSmail v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
<PageSizeSmail v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
||||
<el-divider content-position="left">文本</el-divider> |
<el-divider content-position="left">文本</el-divider> |
||||
<TextPage v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
<TextPage v-model:layouyt-style="props.stylesVal.labelStyle" :place="'div'" /> |
||||
</el-collapse-item> |
</el-collapse-item> |
||||
|
|
||||
|
|
||||
|
|
||||
</el-collapse> |
</el-collapse> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
<style > |
<style > |
||||
.jhk_kjh .el-collapse-item__header{ |
.jhk_kjh .el-collapse-item__header{ |
||||
padding-left: 10px; |
padding-left: 10px; |
||||
background-color: rgb(229, 229, 229); |
background-color: rgb(229, 229, 229); |
||||
} |
} |
||||
</style> |
</style> |
||||
|
|
||||
Loading…
Reference in new issue