|
@@ -173,20 +173,28 @@
|
|
|
<!-- 样式配置 -->
|
|
<!-- 样式配置 -->
|
|
|
<el-card
|
|
<el-card
|
|
|
v-if="isStyle"
|
|
v-if="isStyle"
|
|
|
- :body-class="value ? 'p-8px!' : 'hidden'"
|
|
|
|
|
- :header-class="value ? '' : 'border-b-none!'"
|
|
|
|
|
|
|
+ :body-class="value && expandStyle ? 'p-8px!' : 'hidden'"
|
|
|
|
|
+ :header-class="value && expandStyle ? '' : 'border-b-none!'"
|
|
|
class="mb-12px"
|
|
class="mb-12px"
|
|
|
>
|
|
>
|
|
|
<template #header>
|
|
<template #header>
|
|
|
<div class="flex items-center justify-between">
|
|
<div class="flex items-center justify-between">
|
|
|
- <span>{{ schema.label }}</span>
|
|
|
|
|
|
|
+ <span class="flex items-center gap-1">
|
|
|
|
|
+ <span>{{ schema.label }}</span>
|
|
|
|
|
+ <el-tooltip ref="expandTooltipRef" content="折叠/展开">
|
|
|
|
|
+ <span class="flex" @click="expandStyle = !expandStyle">
|
|
|
|
|
+ <lu-chevrons-down v-if="!expandStyle" size="12px" class="cursor-pointer" />
|
|
|
|
|
+ <lu-chevrons-up v-else size="12px" class="cursor-pointer" />
|
|
|
|
|
+ </span>
|
|
|
|
|
+ </el-tooltip>
|
|
|
|
|
+ </span>
|
|
|
<el-checkbox
|
|
<el-checkbox
|
|
|
:model-value="!!value"
|
|
:model-value="!!value"
|
|
|
@change="(val) => $emit('changeStateStyle', schema?.field!, val ? 'add' : 'delete')"
|
|
@change="(val) => $emit('changeStateStyle', schema?.field!, val ? 'add' : 'delete')"
|
|
|
/>
|
|
/>
|
|
|
</div>
|
|
</div>
|
|
|
</template>
|
|
</template>
|
|
|
- <template v-if="value">
|
|
|
|
|
|
|
+ <template v-if="value && expandStyle">
|
|
|
<!-- 模块 -->
|
|
<!-- 模块 -->
|
|
|
<!-- <StylePart v-if="schema.valueType === 'part'" v-model="value" /> -->
|
|
<!-- <StylePart v-if="schema.valueType === 'part'" v-model="value" /> -->
|
|
|
<!-- 背景 -->
|
|
<!-- 背景 -->
|
|
@@ -266,6 +274,7 @@ import { computed, defineComponent, nextTick, ref } from 'vue'
|
|
|
import { get, set } from 'lodash-es'
|
|
import { get, set } from 'lodash-es'
|
|
|
import { v4 } from 'uuid'
|
|
import { v4 } from 'uuid'
|
|
|
import { useProjectStore } from '@/store/modules/project'
|
|
import { useProjectStore } from '@/store/modules/project'
|
|
|
|
|
+import { LuChevronsDown, LuChevronsUp } from 'vue-icons-plus/lu'
|
|
|
|
|
|
|
|
import CusCheckbox from './components/CusCheckbox.vue'
|
|
import CusCheckbox from './components/CusCheckbox.vue'
|
|
|
import CusTextarea from './components/CusTextarea.vue'
|
|
import CusTextarea from './components/CusTextarea.vue'
|
|
@@ -320,6 +329,7 @@ const componentProps = computed(() => {
|
|
|
const { onValueChange: _onValueChange, ...rest } = props.schema?.componentProps || {}
|
|
const { onValueChange: _onValueChange, ...rest } = props.schema?.componentProps || {}
|
|
|
return rest
|
|
return rest
|
|
|
})
|
|
})
|
|
|
|
|
+const expandStyle = ref(true)
|
|
|
|
|
|
|
|
// 绑定数据
|
|
// 绑定数据
|
|
|
const value = computed({
|
|
const value = computed({
|