<script lang="ts" setup>
|
import type { ItemCfg } from '../types/genItem';
|
|
import { computed, inject, unref } from 'vue';
|
|
import { alignOptions, fixedOptions } from '#/utils/constants';
|
|
import { layoutList, noWithList } from '../helper/rightPanel';
|
|
const props = defineProps(['activeData', 'formConf', 'drawingList', 'formInfo', 'dbType']);
|
const sliderMarks = { 2: 2, 4: 4, 6: 6, 8: 8, 10: 10, 12: 12, 14: 14, 16: 16, 18: 18, 20: 20, 22: 22, 24: 24 };
|
const visibilityOptions = [
|
{ id: 'pc', fullName: 'Web' },
|
{ id: 'app', fullName: 'App' },
|
];
|
const iframeVisibilityOptions = [{ id: 'pc', fullName: 'Web' }];
|
|
const getShowType: (() => string | undefined) | undefined = inject('getShowType');
|
const showType = computed(() => (getShowType as () => string | undefined)());
|
const config = computed<ItemCfg>(() => unref(props.activeData).__config__);
|
const jnpfKey = computed(() => unref(props.activeData).__config__?.jnpfKey);
|
const getClassNameOptions = computed(() => unref(props.formConf).classNames.map((o) => ({ id: o, fullName: o })));
|
const getVisibilityOptions = computed(() => (unref(jnpfKey) == 'iframe' ? iframeVisibilityOptions : visibilityOptions));
|
</script>
|
<template>
|
<a-form :colon="false" layout="vertical" class="right-board-form">
|
<a-form-item label="多端显示">
|
<jnpf-checkbox v-model:value="activeData.__config__.visibility" :options="getVisibilityOptions" />
|
</a-form-item>
|
<template v-if="config.isSubTable && showType === 'pc'">
|
<a-divider class="!mt-0">表格布局配置</a-divider>
|
<a-form-item label="冻结方式">
|
<jnpf-radio v-model:value="activeData.__config__.tableFixed" :options="fixedOptions" option-type="button" button-style="solid" class="right-radio" />
|
</a-form-item>
|
<a-form-item label="对齐方式">
|
<jnpf-radio v-model:value="activeData.__config__.tableAlign" :options="alignOptions" option-type="button" button-style="solid" class="right-radio" />
|
</a-form-item>
|
<a-form-item label="列宽度">
|
<a-input-number v-model:value="activeData.__config__.columnWidth" placeholder="请输入" :min="0" />
|
</a-form-item>
|
<a-divider>平铺布局配置</a-divider>
|
</template>
|
<a-form-item label="控件栅格">
|
<a-slider v-model:value="activeData.__config__.span" :max="24" :min="2" :step="2" :marks="sliderMarks" />
|
</a-form-item>
|
<a-form-item label="标题宽度" v-if="!layoutList.includes(jnpfKey)">
|
<jnpf-input-number v-model:value="activeData.__config__.labelWidth" placeholder="请输入" :min="0" />
|
</a-form-item>
|
<a-form-item v-if="!noWithList.includes(jnpfKey) && activeData.style && showType === 'pc'">
|
<template #label>
|
控件宽度
|
<BasicHelp text="支持%和px两种宽度设置" />
|
</template>
|
<a-input v-model:value="activeData.style.width" placeholder="请输入" />
|
</a-form-item>
|
<a-form-item>
|
<template #label>控件Class<BasicHelp text="不支持代码生成" /></template>
|
<jnpf-select v-model:value="activeData.__config__.className" multiple allow-clear :options="getClassNameOptions" show-search />
|
</a-form-item>
|
</a-form>
|
</template>
|
