geg-gas/geg-gas-web
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 组件标签支持定宽模式

Browse Source 
feat: 响应式布局（草稿）
This commit is contained in:
gaoyunqi
2024-03-01 12:00:50 +08:00
parent 8a8d18a33a
commit d703b01902
7 changed files with 2709 additions and 2830 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
.env
View File

@ -9,3 +9,7 @@ VITE_GLOB_APP_SHORT_NAME = 全代码平台
# 应用名称 # 应用名称
VITE_SYSTEM_NAME = 全代码平台 VITE_SYSTEM_NAME = 全代码平台
# 响应式布局的表单宽度分界
VITE_RESP_LG_WIDTH = 1280
VITE_RESP_MD_WIDTH = 960

28
src/components/Designer/src/components/AntdFormConfig.vue
View File

@ -22,12 +22,23 @@
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item label="标签模式">
<a-radio-group v-model:value="data.labelCol.labelWidthMode" button-style="solid" size="small">
<a-radio-button value="flex">{{ t('百分比') }}</a-radio-button>
<a-radio-button value="fix">{{ t('定宽') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item label="标签宽度"> <a-form-item label="标签宽度">
<a-input-number v-model:value="data.labelCol.span" :min="0" :max="24" addonAfter="/ 24" /> <a-input-number v-model:value="data.labelCol.span" :max="24" :min="0" addonAfter="/ 24" />
</a-form-item>
<a-form-item v-show="data.labelCol.labelWidthMode === 'fix'" label="标签定宽">
<a-input-number v-model:value="data.labelCol.labelFixWidth" :max="200" :min="40" addonAfter="px" />
</a-form-item> </a-form-item>
<a-form-item label="标签边距"> <a-form-item label="标签边距">
<a-input-number v-model:value="data.labelCol.offset" :min="0" :max="24" addonAfter="/ 24" /> <a-input-number v-model:value="data.labelCol.offset" :max="24" :min="0" addonAfter="/ 24" />
</a-form-item> </a-form-item>
<a-form-item :label="t('组件尺寸')"> <a-form-item :label="t('组件尺寸')">
@ -49,33 +60,34 @@
import { WidgetForm } from '../types'; import { WidgetForm } from '../types';
import { defineComponent, PropType, ref, watch } from 'vue'; import { defineComponent, PropType, ref, watch } from 'vue';
import { useI18n } from '/@/hooks/web/useI18n'; import { useI18n } from '/@/hooks/web/useI18n';
const { t } = useI18n(); const { t } = useI18n();
export default defineComponent({ export default defineComponent({
name: 'AntdFormConfig', name: 'AntdFormConfig',
props: { props: {
config: { config: {
type: Object as PropType<WidgetForm['config']>, type: Object as PropType<WidgetForm['config']>,
required: true, required: true
}, }
}, },
emits: ['update:config'], emits: ['update:config'],
setup(props, context) { setup(props, context) {
const data = ref(props.config); const data = ref(props.config);
const layout = { const layout = {
labelCol: { span: 6 }, labelCol: { span: 6 },
wrapperCol: { span: 18 }, wrapperCol: { span: 18 }
}; };
watch(data, () => context.emit('update:config', data)); watch(data, () => context.emit('update:config', data));
return { return {
data, data,
layout, layout,
t, t
}; };
}, }
}); });
</script> </script>
<style scoped lang="less"> <style lang="less" scoped>
.fc-style .widget-config-container .config-content .ant-form-item, .fc-style .widget-config-container .config-content .ant-form-item,
.fc-style .widget-config-container .config-content .el-form-item, .fc-style .widget-config-container .config-content .el-form-item,
.fc-style .widget-config-container .config-content h4 { .fc-style .widget-config-container .config-content h4 {

654
src/components/Designer/src/components/AntdWidgetFormItem.vue
View File

File diff suppressed because it is too large Load Diff

285
src/components/Designer/src/components/componentProperty/PropertyOption.vue
View File

@ -1,13 +1,13 @@
<template> <template>
<div class="awc-containter"> <div class="awc-containter">
<a-form v-bind="layout" v-if="data" :key="data.key" size="small"> <a-form v-if="data" :key="data.key" size="small" v-bind="layout">
<a-form-item :label="t('不存表')" v-if="data.type == 'input'"> <a-form-item v-if="data.type == 'input'" :label="t('不存表')">
<a-switch v-model:checked="data.options.isSave" @change="handleIsSave" /> <a-switch v-model:checked="data.options.isSave" @change="handleIsSave" />
</a-form-item> </a-form-item>
<template v-if="designType === 'data'"> <template v-if="designType === 'data'">
<a-form-item :label="t('绑定表')" v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveTableAndField.includes(data.type) && !data.isSubFormChild && !data.isSingleFormChild && data.type !== 'input')"> <a-form-item v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveTableAndField.includes(data.type) && !data.isSubFormChild && !data.isSingleFormChild && data.type !== 'input')" :label="t('绑定表')">
<a-select @change="handleTableChange" v-model:value="data.bindTable" size="mini" :placeholder="t('请选择数据表')"> <a-select v-model:value="data.bindTable" :placeholder="t('请选择数据表')" size="mini" @change="handleTableChange">
<a-select-option v-for="(table, idx) in tableInfo" :disabled="table.disabled" :value="table.name" :key="idx"> <a-select-option v-for="(table, idx) in tableInfo" :key="idx" :disabled="table.disabled" :value="table.name">
{{ table.name }} {{ table.name }}
<span> <span>
<a-tag :color="table.isMain ? 'blue' : 'orange'"> <a-tag :color="table.isMain ? 'blue' : 'orange'">
@ -17,9 +17,9 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('绑定字段')" v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveField.includes(data.type) && data.type !== 'input')"> <a-form-item v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveField.includes(data.type) && data.type !== 'input')" :label="t('绑定字段')">
<a-select v-model:value="data.bindField" size="mini" :placeholder="t('请选择表字段')"> <a-select v-model:value="data.bindField" :placeholder="t('请选择表字段')" size="mini">
<a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx"> <a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
{{ field.name }} {{ field.name }}
<span> <span>
<a-tag color="blue"> <a-tag color="blue">
@ -33,13 +33,13 @@
<template v-if="data.type === 'form' || data.type === 'form-view'"> <template v-if="data.type === 'form' || data.type === 'form-view'">
<a-form-item :label="t('预加载数据')"> <a-form-item :label="t('预加载数据')">
<a-radio-group button-style="solid" v-model:value="data.options.preloadType" size="small" @change="preloadChange"> <a-radio-group v-model:value="data.options.preloadType" button-style="solid" size="small" @change="preloadChange">
<a-radio-button value="api">API</a-radio-button> <a-radio-button value="api">API</a-radio-button>
<a-radio-button value="dic">{{ t('数据字典') }}</a-radio-button> <a-radio-button value="dic">{{ t('数据字典') }}</a-radio-button>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item :label="t('接口配置')" v-if="data.options.preloadType === 'api'"> <a-form-item v-if="data.options.preloadType === 'api'" :label="t('接口配置')">
<a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="showApiConfig()"> <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="showApiConfig()">
<template #suffix> <template #suffix>
<Icon icon="ant-design:ellipsis-outlined" /> <Icon icon="ant-design:ellipsis-outlined" />
@ -47,15 +47,15 @@
</a-input> </a-input>
</a-form-item> </a-form-item>
<a-form-item :label="t('数据选项')" v-if="data.options.preloadType === 'dic'"> <a-form-item v-if="data.options.preloadType === 'dic'" :label="t('数据选项')">
<DicTreeSelect v-model:value="data.options.itemId" @change="handleDicChange" /> <DicTreeSelect v-model:value="data.options.itemId" @change="handleDicChange" />
</a-form-item> </a-form-item>
<a-form-item :label="t('按钮选数据')" v-if="data.type === 'form'"> <a-form-item v-if="data.type === 'form'" :label="t('按钮选数据')">
<a-switch v-model:checked="data.options.useSelectButton" /> <a-switch v-model:checked="data.options.useSelectButton" />
</a-form-item> </a-form-item>
<a-form-item label="开启分页" v-if="data.type === 'form'"> <a-form-item v-if="data.type === 'form'" label="开启分页">
<a-switch v-model:checked="data.options.showPagination" /> <a-switch v-model:checked="data.options.showPagination" />
</a-form-item> </a-form-item>
@ -65,7 +65,7 @@
</a-form-item> </a-form-item>
<a-form-item :label="t('表头配置')"> <a-form-item :label="t('表头配置')">
<a-input :value="configText" :placeholder="t('点击进行表头配置')" @click="tableTitleClick"> <a-input :placeholder="t('点击进行表头配置')" :value="configText" @click="tableTitleClick">
<template #suffix> <template #suffix>
<Icon icon="ant-design:ellipsis-outlined" /> <Icon icon="ant-design:ellipsis-outlined" />
</template> </template>
@ -74,7 +74,7 @@
</template> </template>
<template v-if="data.options.preloadType && data.type === 'form'"> <template v-if="data.options.preloadType && data.type === 'form'">
<a-form-item :label="item.label" v-for="item in data.children.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key"> <a-form-item v-for="item in data.children.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key" :label="item.label">
<a-input v-if="data.options.preloadType === 'api'" v-model:value="item.options.prestrainField" :placeholder="t('请填写接口出参字段')" /> <a-input v-if="data.options.preloadType === 'api'" v-model:value="item.options.prestrainField" :placeholder="t('请填写接口出参字段')" />
<a-select v-else-if="data.options.preloadType === 'dic'" v-model:value="item.options.prestrainField"> <a-select v-else-if="data.options.preloadType === 'dic'" v-model:value="item.options.prestrainField">
<a-select-option value="name">name</a-select-option> <a-select-option value="name">name</a-select-option>
@ -88,8 +88,8 @@
</template> </template>
<a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('开始字段')"> <a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('开始字段')">
<a-select v-model:value="data.bindStartTime" size="mini" :placeholder="t('请选择开始字段')"> <a-select v-model:value="data.bindStartTime" :placeholder="t('请选择开始字段')" size="mini">
<a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx"> <a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
{{ field.name }} {{ field.name }}
<span> <span>
<a-tag color="blue"> <a-tag color="blue">
@ -101,8 +101,8 @@
</a-form-item> </a-form-item>
<a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('结束字段')"> <a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('结束字段')">
<a-select v-model:value="data.bindEndTime" size="mini" :placeholder="t('请选择结束字段')"> <a-select v-model:value="data.bindEndTime" :placeholder="t('请选择结束字段')" size="mini">
<a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx"> <a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
{{ field.name }} {{ field.name }}
<span> <span>
<a-tag color="blue"> <a-tag color="blue">
@ -112,7 +112,7 @@
</a-select-option> </a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('级联配置')" v-if="data.type === 'cascader'" required> <a-form-item v-if="data.type === 'cascader'" :label="t('级联配置')" required>
<a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行级联配置')" @click="showApiConfig(true)"> <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行级联配置')" @click="showApiConfig(true)">
<template #suffix> <template #suffix>
<Icon icon="ant-design:ellipsis-outlined" /> <Icon icon="ant-design:ellipsis-outlined" />
@ -128,13 +128,13 @@
<a-form-item v-if="hasKey('selectedConfig')" :label="t('选择设置')"> <a-form-item v-if="hasKey('selectedConfig')" :label="t('选择设置')">
<a-select v-model:value="data.options.selectedConfig" :options="selectedOptions"></a-select> <a-select v-model:value="data.options.selectedConfig" :options="selectedOptions"></a-select>
</a-form-item> </a-form-item>
<a-form-item label="数据分页" v-if="hasKey('isPagination')"> <a-form-item v-if="hasKey('isPagination')" label="数据分页">
<a-switch v-model:checked="data.options.isPagination" /> <a-switch v-model:checked="data.options.isPagination" />
</a-form-item> </a-form-item>
<a-form-item :label="t('标题')" v-if="!noHaveTitle.includes(data.type)"> <a-form-item v-if="!noHaveTitle.includes(data.type)" :label="t('标题')">
<a-input v-model:value="data.label" size="mini" /> <a-input v-model:value="data.label" size="mini" />
</a-form-item> </a-form-item>
<a-form-item :label="t('标题')" v-if="data.type === 'card'"> <a-form-item v-if="data.type === 'card'" :label="t('标题')">
<a-input v-model:value="data.options.title" size="mini" /> <a-input v-model:value="data.options.title" size="mini" />
</a-form-item> </a-form-item>
<a-form-item v-if="hasKey('showTime')" :label="t('开始占位')"> <a-form-item v-if="hasKey('showTime')" :label="t('开始占位')">
@ -145,13 +145,12 @@
<a-input v-model:value="data.options.endTimePlaceholder" /> <a-input v-model:value="data.options.endTimePlaceholder" />
</a-form-item> </a-form-item>
<a-form-item :label="t('占位提示')" v-if="hasKey('placeholder')"> <a-form-item v-if="hasKey('placeholder')" :label="t('占位提示')">
<a-textarea v-if="data.type === 'opinion'" v-model:value="data.options.placeholder" :placeholder="t('请输入占位提示')" /> <a-textarea v-if="data.type === 'opinion'" v-model:value="data.options.placeholder" :placeholder="t('请输入占位提示')" />
<a-input v-else v-model:value="data.options.placeholder" :placeholder="t('请输入占位提示')" /> <a-input v-else v-model:value="data.options.placeholder" :placeholder="t('请输入占位提示')" />
</a-form-item> </a-form-item>
<a-form-item <a-form-item
:label="t('默认值')"
v-if=" v-if="
(hasKey('defaultValue') && (hasKey('defaultValue') &&
(data.type === 'input' || (data.type === 'input' ||
@ -166,9 +165,10 @@
data.type === 'computational')) || data.type === 'computational')) ||
(needDicDefaultValue.includes(data.type) && data.options.datasourceType == 'dic') (needDicDefaultValue.includes(data.type) && data.options.datasourceType == 'dic')
" "
:label="t('默认值')"
> >
<a-textarea v-if="data.type === 'textarea'" v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" /> <a-textarea v-if="data.type === 'textarea'" v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" />
<a-rate v-else-if="data.type === 'rate'" v-model:value="data.options.defaultValue" :count="data.options.count" :allowHalf="data.options.allowHalf" :allowClear="data.options.allowClear" /> <a-rate v-else-if="data.type === 'rate'" v-model:value="data.options.defaultValue" :allowClear="data.options.allowClear" :allowHalf="data.options.allowHalf" :count="data.options.count" />
<ColorPicker v-else-if="data.type === 'picker-color'" v-model:value="data.options.defaultValue" /> <ColorPicker v-else-if="data.type === 'picker-color'" v-model:value="data.options.defaultValue" />
<a-input-number v-else-if="data.type === 'money-chinese' || data.type === 'computational' || data.type === 'number'" v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" /> <a-input-number v-else-if="data.type === 'money-chinese' || data.type === 'computational' || data.type === 'number'" v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" />
<a-switch v-else-if="data.type === 'switch'" v-model:checked="data.options.defaultValue" :checkedValue="1" :unCheckedValue="0" /> <a-switch v-else-if="data.type === 'switch'" v-model:checked="data.options.defaultValue" :checkedValue="1" :unCheckedValue="0" />
@ -181,27 +181,27 @@
</template> </template>
<a-select <a-select
v-else-if="data.type == 'multiple-popup' || data.type == 'checkbox'" v-else-if="data.type == 'multiple-popup' || data.type == 'checkbox'"
:options="defaultSelectOption"
mode="multiple"
:placeholder="t('请选择默认值')"
:fieldNames="{ label: 'name', value: 'value' }"
v-model:value="data.options.defaultTempValue" v-model:value="data.options.defaultTempValue"
@change="handleDfValChange"
:allowClear="true" :allowClear="true"
:fieldNames="{ label: 'name', value: 'value' }"
:options="defaultSelectOption"
:placeholder="t('请选择默认值')"
mode="multiple"
@change="handleDfValChange"
@dropdownVisibleChange="handleDfValueFocus" @dropdownVisibleChange="handleDfValueFocus"
> >
</a-select> </a-select>
<a-select <a-select
v-else-if="needDicDefaultValue.includes(data.type)" v-else-if="needDicDefaultValue.includes(data.type)"
:options="defaultSelectOption"
:placeholder="t('请选择默认值')"
:fieldNames="{ label: 'name', value: 'value' }"
v-model:value="data.options.defaultSelect" v-model:value="data.options.defaultSelect"
:allowClear="true" :allowClear="true"
:fieldNames="{ label: 'name', value: 'value' }"
:options="defaultSelectOption"
:placeholder="t('请选择默认值')"
@dropdownVisibleChange="handleDfValueFocus" @dropdownVisibleChange="handleDfValueFocus"
> >
</a-select> </a-select>
<a-input v-else v-model:value="data.options.defaultValue" @blur="data.type === 'number' ? changeNumber : ''" :placeholder="t('请输入默认值')" /> <a-input v-else v-model:value="data.options.defaultValue" :placeholder="t('请输入默认值')" @blur="data.type === 'number' ? changeNumber : ''" />
</a-form-item> </a-form-item>
<a-form-item v-if="hasKey('format') && (data.type === 'time' || data.type === 'time-range')" :label="t('时间格式')"> <a-form-item v-if="hasKey('format') && (data.type === 'time' || data.type === 'time-range')" :label="t('时间格式')">
@ -221,19 +221,19 @@
<template v-if="data.type === 'time'"> <template v-if="data.type === 'time'">
<a-form-item :label="t('默认值')"> <a-form-item :label="t('默认值')">
<TimePicker style="width: 100%" v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" /> <TimePicker v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" style="width: 100%" />
</a-form-item> </a-form-item>
</template> </template>
<template v-if="data.type === 'date'"> <template v-if="data.type === 'date'">
<a-form-item :label="t('默认值')"> <a-form-item :label="t('默认值')">
<XjrDatePicker style="width: 100%" v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" /> <XjrDatePicker v-model:value="data.options.defaultValue" :format="data.options.format" :placeholder="data.options.placeholder" style="width: 100%" />
</a-form-item> </a-form-item>
</template> </template>
<a-form-item :label="t('编码规则')" v-if="hasKey('autoCodeRule')" required> <a-form-item v-if="hasKey('autoCodeRule')" :label="t('编码规则')" required>
<a-select v-model:value="data.options.autoCodeRule" size="mini" :placeholder="t('请选择编码规则')"> <a-select v-model:value="data.options.autoCodeRule" :placeholder="t('请选择编码规则')" size="mini">
<a-select-option v-for="rule in codeRuleOptions" :value="rule.code" :key="rule.id"> <a-select-option v-for="rule in codeRuleOptions" :key="rule.id" :value="rule.code">
{{ rule.name }} {{ rule.name }}
</a-select-option> </a-select-option>
</a-select> </a-select>
@ -246,24 +246,24 @@
<ComputationalSetting <ComputationalSetting
v-if="computationalDialog" v-if="computationalDialog"
v-model:computationalConfig="data.options.computationalConfig" v-model:computationalConfig="data.options.computationalConfig"
@setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
v-model:computationalDialog="computationalDialog" v-model:computationalDialog="computationalDialog"
@setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
/> />
</template> </template>
<a-form-item label="url" v-if="hasKey('url')"> <a-form-item v-if="hasKey('url')" label="url">
<a-textarea v-model:value="data.options.url" placeholder="请输入url" /> <a-textarea v-model:value="data.options.url" placeholder="请输入url" />
</a-form-item> </a-form-item>
<a-form-item :label="t('标签宽度')" v-if="hasKey('labelWidth')"> <a-form-item v-if="hasKey('labelWidth')" :label="t('标签宽度')">
<a-input-number v-model:value="data.options.labelWidth" :min="0" /> <a-input-number v-model:value="data.options.labelWidth" :min="0" />
</a-form-item> </a-form-item>
<a-form-item :label="t('组件宽度')" v-if="hasKey('width')"> <a-form-item v-if="hasKey('width')" :label="t('组件宽度')">
<a-input v-model:value="data.options.width" /> <a-input v-model:value="data.options.width" />
</a-form-item> </a-form-item>
<a-form-item :label="t('信息类型')" v-if="hasKey('infoType')"> <a-form-item v-if="hasKey('infoType')" :label="t('信息类型')">
<a-select v-model:value="data.options.infoType" size="mini"> <a-select v-model:value="data.options.infoType" size="mini">
<a-select-option :value="0">{{ t('当前用户') }}</a-select-option> <a-select-option :value="0">{{ t('当前用户') }}</a-select-option>
<a-select-option :value="1">{{ t('当前组织') }}</a-select-option> <a-select-option :value="1">{{ t('当前组织') }}</a-select-option>
@ -271,13 +271,13 @@
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('组件类型')" v-if="hasKey('orgzType')"> <a-form-item v-if="hasKey('orgzType')" :label="t('组件类型')">
<a-select v-model:value="data.options.orgzType" size="mini"> <a-select v-model:value="data.options.orgzType" size="mini">
<a-select-option :value="0">{{ t('系统组织架构') }}</a-select-option> <a-select-option :value="0">{{ t('系统组织架构') }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('组件类型')" v-if="hasKey('userType')"> <a-form-item v-if="hasKey('userType')" :label="t('组件类型')">
<a-select v-model:value="data.options.userType" size="mini"> <a-select v-model:value="data.options.userType" size="mini">
<a-select-option :value="0">{{ t('系统用户') }}</a-select-option> <a-select-option :value="0">{{ t('系统用户') }}</a-select-option>
</a-select> </a-select>
@ -287,7 +287,7 @@
<template #label> <template #label>
<a-tooltip> <a-tooltip>
<template #title> 二次加载是决定编辑状态是否重新获取信息体数据</template> <template #title> 二次加载是决定编辑状态是否重新获取信息体数据</template>
<Icon icon="ant-design:question-circle-outlined" color="#909399" /> <Icon color="#909399" icon="ant-design:question-circle-outlined" />
</a-tooltip> </a-tooltip>
&nbsp;{{ t('二次加载') }} &nbsp;{{ t('二次加载') }}
</template> </template>
@ -300,7 +300,7 @@
</a-form-item> </a-form-item>
<template v-if="data.options.isSpecial"> <template v-if="data.options.isSpecial">
<a-form-item :label="t('按钮类型')" required> <a-form-item :label="t('按钮类型')" required>
<a-select v-model:value="data.options.buttonType" size="mini" disabled :placeholder="t('请选择按钮类型')"> <a-select v-model:value="data.options.buttonType" :placeholder="t('请选择按钮类型')" disabled size="mini">
<a-select-option :value="1">{{ t('联想弹层按钮') }}</a-select-option> <a-select-option :value="1">{{ t('联想弹层按钮') }}</a-select-option>
<a-select-option :value="2">{{ t('表格选择数据按钮') }}</a-select-option> <a-select-option :value="2">{{ t('表格选择数据按钮') }}</a-select-option>
</a-select> </a-select>
@ -310,19 +310,19 @@
</template> </template>
<template v-if="data.options.buttonType == 2"> <template v-if="data.options.buttonType == 2">
<a-form-item :label="t('表格选择')" required> <a-form-item :label="t('表格选择')" required>
<a-select v-model:value="data.options.selectTable" size="mini" :placeholder="t('请选择表格')"> <a-select v-model:value="data.options.selectTable" :placeholder="t('请选择表格')" size="mini">
<a-select-option v-for="item in buttonTableOptions" :value="item.key" :key="item.key">{{ item.label }}</a-select-option> <a-select-option v-for="item in buttonTableOptions" :key="item.key" :value="item.key">{{ item.label }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('表头配置')"> <a-form-item :label="t('表头配置')">
<a-input :value="configText" :placeholder="t('点击进行表头配置')" @click="tableTitleClick"> <a-input :placeholder="t('点击进行表头配置')" :value="configText" @click="tableTitleClick">
<template #suffix> <template #suffix>
<Icon icon="ant-design:ellipsis-outlined" /> <Icon icon="ant-design:ellipsis-outlined" />
</template> </template>
</a-input> </a-input>
</a-form-item> </a-form-item>
<template v-if="data.options.selectTable"> <template v-if="data.options.selectTable">
<a-form-item :label="item.label" v-for="item in data.options.tableColumns.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key"> <a-form-item v-for="item in data.options.tableColumns.filter((x) => !unPreloadComponents.includes(x.type))" :key="item.key" :label="item.label">
<a-input v-if="data.options.datasourceType === 'api'" v-model:value="item.prestrainField" :placeholder="t('请填写接口出参字段')" /> <a-input v-if="data.options.datasourceType === 'api'" v-model:value="item.prestrainField" :placeholder="t('请填写接口出参字段')" />
<a-select v-else-if="data.options.datasourceType === 'dic'" v-model:value="item.prestrainField"> <a-select v-else-if="data.options.datasourceType === 'dic'" v-model:value="item.prestrainField">
<a-select-option value="name">name</a-select-option> <a-select-option value="name">name</a-select-option>
@ -340,78 +340,78 @@
</a-form-item> </a-form-item>
</template> </template>
<a-form-item :label="t('最大值')" v-if="hasKey('max')"> <a-form-item v-if="hasKey('max')" :label="t('最大值')">
<a-input-number v-model:value.number="data.options.max" @change="changeNumber" /> <a-input-number v-model:value.number="data.options.max" @change="changeNumber" />
</a-form-item> </a-form-item>
<a-form-item :label="t('最大值')" v-if="hasKey('count')"> <a-form-item v-if="hasKey('count')" :label="t('最大值')">
<a-input-number v-model:value.number="data.options.count" @change="changeNumber" /> <a-input-number v-model:value.number="data.options.count" @change="changeNumber" />
</a-form-item> </a-form-item>
<a-form-item :label="t('最小值')" v-if="hasKey('min')"> <a-form-item v-if="hasKey('min')" :label="t('最小值')">
<a-input-number v-model:value.number="data.options.min" @change="changeNumber" /> <a-input-number v-model:value.number="data.options.min" @change="changeNumber" />
</a-form-item> </a-form-item>
<a-form-item :label="t('步长')" v-if="hasKey('step')"> <a-form-item v-if="hasKey('step')" :label="t('步长')">
<a-input-number v-model:value.number="data.options.step" :min="0" /> <a-input-number v-model:value.number="data.options.step" :min="0" />
</a-form-item> </a-form-item>
<a-form-item :label="t('前置标签')" v-if="hasKey('addonBefore')"> <a-form-item v-if="hasKey('addonBefore')" :label="t('前置标签')">
<a-input v-model:value="data.options.addonBefore" :placeholder="t('请输入前置标签')" /> <a-input v-model:value="data.options.addonBefore" :placeholder="t('请输入前置标签')" />
</a-form-item> </a-form-item>
<a-form-item :label="t('后置标签')" v-if="hasKey('addonAfter')"> <a-form-item v-if="hasKey('addonAfter')" :label="t('后置标签')">
<a-input v-model:value="data.options.addonAfter" :placeholder="t('请输入后置标签')" /> <a-input v-model:value="data.options.addonAfter" :placeholder="t('请输入后置标签')" />
</a-form-item> </a-form-item>
<a-form-item :label="t('前置图标')" v-if="hasKey('prefix')"> <a-form-item v-if="hasKey('prefix')" :label="t('前置图标')">
<IconPicker v-model:value="data.options.prefix" :disabled="false" :readonly="false" /> <IconPicker v-model:value="data.options.prefix" :disabled="false" :readonly="false" />
</a-form-item> </a-form-item>
<a-form-item :label="t('后置图标')" v-if="hasKey('suffix')"> <a-form-item v-if="hasKey('suffix')" :label="t('后置图标')">
<IconPicker v-model:value="data.options.suffix" :disabled="false" :readonly="false" /> <IconPicker v-model:value="data.options.suffix" :disabled="false" :readonly="false" />
</a-form-item> </a-form-item>
<a-form-item :label="t('最大长度')" v-if="hasKey('maxlength')"> <a-form-item v-if="hasKey('maxlength')" :label="t('最大长度')">
<a-input v-model:value.number="data.options.maxlength" :placeholder="t('请输入最大长度，按字符计算')" /> <a-input v-model:value.number="data.options.maxlength" :placeholder="t('请输入最大长度，按字符计算')" />
</a-form-item> </a-form-item>
<a-form-item :label="t('开启提示')" v-if="hasKey('checkedChildren')"> <a-form-item v-if="hasKey('checkedChildren')" :label="t('开启提示')">
<a-input v-model:value="data.options.checkedChildren" /> <a-input v-model:value="data.options.checkedChildren" />
</a-form-item> </a-form-item>
<a-form-item :label="t('关闭提示')" v-if="hasKey('unCheckedChildren')"> <a-form-item v-if="hasKey('unCheckedChildren')" :label="t('关闭提示')">
<a-input v-model:value="data.options.unCheckedChildren" /> <a-input v-model:value="data.options.unCheckedChildren" />
</a-form-item> </a-form-item>
<a-form-item :label="t('开启颜色')" v-if="hasKey('checkedColor')"> <a-form-item v-if="hasKey('checkedColor')" :label="t('开启颜色')">
<ColorPicker v-model:value="data.options.checkedColor" /> <ColorPicker v-model:value="data.options.checkedColor" />
</a-form-item> </a-form-item>
<a-form-item :label="t('关闭颜色')" v-if="hasKey('unCheckedColor')"> <a-form-item v-if="hasKey('unCheckedColor')" :label="t('关闭颜色')">
<ColorPicker v-model:value="data.options.unCheckedColor" /> <ColorPicker v-model:value="data.options.unCheckedColor" />
</a-form-item> </a-form-item>
<a-form-item :label="t('地址字段')" v-if="hasKey('address')"> <a-form-item v-if="hasKey('address')" :label="t('地址字段')">
<a-select v-model:value="data.options.address" size="mini" allowClear> <a-select v-model:value="data.options.address" allowClear size="mini">
<a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{ it.label }}</a-select-option> <a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{ it.label }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('经纬度字段')" v-if="hasKey('latiAndLong')"> <a-form-item v-if="hasKey('latiAndLong')" :label="t('经纬度字段')">
<a-select v-model:value="data.options.latiAndLong" size="mini" allowClear> <a-select v-model:value="data.options.latiAndLong" allowClear size="mini">
<a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{ it.label }}</a-select-option> <a-select-option v-for="it in mapComps" :key="it.model" :value="it.bindField">{{ it.label }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('配置类型')" v-if="hasKey('codeType')"> <a-form-item v-if="hasKey('codeType')" :label="t('配置类型')">
<a-select v-model:value="data.options.codeType" size="mini" :placeholder="t('请选择配置类型')" @change="handleChangeCode"> <a-select v-model:value="data.options.codeType" :placeholder="t('请选择配置类型')" size="mini" @change="handleChangeCode">
<a-select-option value="fixed" key="fixed"> {{ t('固定二维码') }} </a-select-option> <a-select-option key="fixed" value="fixed"> {{ t('固定二维码') }}</a-select-option>
<a-select-option value="api" key="api"> {{ t('接口配置') }} </a-select-option> <a-select-option key="api" value="api"> {{ t('接口配置') }}</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('二维码内容')" v-if="data.type == 'qrcode' && data.options.codeType == 'fixed'"> <a-form-item v-if="data.type == 'qrcode' && data.options.codeType == 'fixed'" :label="t('二维码内容')">
<a-textarea v-model:value="data.options.defaultValue" :placeholder="t('请填写二维码内容')" :rows="4" /> <a-textarea v-model:value="data.options.defaultValue" :placeholder="t('请填写二维码内容')" :rows="4" />
</a-form-item> </a-form-item>
<a-form-item :label="t('接口配置')" v-if="data.type == 'qrcode' && data.options.codeType == 'api'"> <a-form-item v-if="data.type == 'qrcode' && data.options.codeType == 'api'" :label="t('接口配置')">
<a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="handleApiConfig()"> <a-input v-model:value="data.options.apiConfig.path" :placeholder="t('点击进行接口配置')" @click="handleApiConfig()">
<template #suffix> <template #suffix>
<Icon icon="ant-design:ellipsis-outlined" /> <Icon icon="ant-design:ellipsis-outlined" />
@ -419,22 +419,41 @@
</a-input> </a-input>
</a-form-item> </a-form-item>
<!-- 子表不需要span --> <!-- 子表不需要span -->
<a-form-item label="标签宽度" v-if="hasKey('span') && (!data.isSubFormChild || !data.isSingleFormChild)"> <a-form-item v-if="hasKey('responsive')" label="响应式">
<a-input-number v-model:value="data.options.span" :min="0" :max="24" addonAfter="/ 24" @change="handleSpanChange" /> <a-switch v-model:checked="data.options.responsive" />
</a-form-item> </a-form-item>
<a-form-item :label="t('双滑块模式')" v-if="hasKey('range')"> <a-form-item v-if="hasKey('respNewRow') && data.options.responsive" label="独立成行">
<a-switch v-model:checked="data.options.respNewRow" />
</a-form-item>
<a-form-item v-if="hasKey('labelWidthMode')" label="宽度模式">
<a-radio-group v-model:value="data.options.labelWidthMode" button-style="solid" size="small">
<a-radio-button value="flex">{{ t('百分比') }}</a-radio-button>
<a-radio-button value="fix">{{ t('定宽') }}</a-radio-button>
</a-radio-group>
</a-form-item>
<a-form-item v-if="hasKey('labelWidthMode') && data.options.labelWidthMode === 'fix'" label="标签定宽">
<a-input-number v-model:value="data.options.labelFixWidth" :max="200" :min="40" addonAfter="px" />
</a-form-item>
<a-form-item v-if="hasKey('span') && (!data.isSubFormChild || !data.isSingleFormChild)" label="标签宽度">
<a-input-number v-model:value="data.options.span" :max="24" :min="0" addonAfter="/ 24" @change="handleSpanChange" />
</a-form-item>
<a-form-item v-if="hasKey('range')" :label="t('双滑块模式')">
<a-switch v-model:checked="data.options.range" @change="handleSliderModeChange" /> <a-switch v-model:checked="data.options.range" @change="handleSliderModeChange" />
</a-form-item> </a-form-item>
<a-form-item :label="t('反向坐标轴')" v-if="hasKey('reverse')"> <a-form-item v-if="hasKey('reverse')" :label="t('反向坐标轴')">
<a-switch v-model:checked="data.options.reverse" /> <a-switch v-model:checked="data.options.reverse" />
</a-form-item> </a-form-item>
<template v-if="data.type === 'image'"> <template v-if="data.type === 'image'">
<a-form-item :label="t('默认值')"> <a-form-item :label="t('默认值')">
<a-input v-model:value="imageUrl" :disabled="true" style="margin-bottom: 10px" /> <a-input v-model:value="imageUrl" :disabled="true" style="margin-bottom: 10px" />
<a-upload action="" :beforeUpload="submitUpload" accept="" :max-count="1" :show-upload-list="false"> <a-upload :beforeUpload="submitUpload" :max-count="1" :show-upload-list="false" accept="" action="">
<a-button> <a-button>
<SvgIcon name="upload" style="margin-right: 10px" /> <SvgIcon name="upload" style="margin-right: 10px" />
{{ t('点击上传') }} {{ t('点击上传') }}
@ -446,31 +465,31 @@
</a-form-item> </a-form-item>
</template> </template>
<a-form-item :label="t('切换按钮')" v-if="hasKey('visibilityToggle')"> <a-form-item v-if="hasKey('visibilityToggle')" :label="t('切换按钮')">
<a-switch v-model:checked="data.options.visibilityToggle" /> <a-switch v-model:checked="data.options.visibilityToggle" />
</a-form-item> </a-form-item>
<a-form-item :label="t('行数')" v-if="hasKey('rows') && !data.options.autoSize"> <a-form-item v-if="hasKey('rows') && !data.options.autoSize" :label="t('行数')">
<a-input-number v-model:value="data.options.rows" :min="0" /> <a-input-number v-model:value="data.options.rows" :min="0" />
</a-form-item> </a-form-item>
<a-form-item :label="t('显示字数')" v-if="hasKey('showCount')"> <a-form-item v-if="hasKey('showCount')" :label="t('显示字数')">
<a-switch v-model:checked="data.options.showCount" /> <a-switch v-model:checked="data.options.showCount" />
</a-form-item> </a-form-item>
<a-form-item :label="t('自适应高度')" v-if="hasKey('autoSize')"> <a-form-item v-if="hasKey('autoSize')" :label="t('自适应高度')">
<a-switch v-model:checked="data.options.autoSize" /> <a-switch v-model:checked="data.options.autoSize" />
</a-form-item> </a-form-item>
<a-form-item :label="t('最小行数')" v-if="hasKey('minRows') && !data.options.autoSize"> <a-form-item v-if="hasKey('minRows') && !data.options.autoSize" :label="t('最小行数')">
<a-input-number v-model:value="data.options.minRows" :min="0" /> <a-input-number v-model:value="data.options.minRows" :min="0" />
</a-form-item> </a-form-item>
<a-form-item :label="t('最大行数')" v-if="hasKey('maxRows') && !data.options.autoSize"> <a-form-item v-if="hasKey('maxRows') && !data.options.autoSize" :label="t('最大行数')">
<a-input-number v-model:value="data.options.maxRows" :min="0" /> <a-input-number v-model:value="data.options.maxRows" :min="0" />
</a-form-item> </a-form-item>
<a-form-item :label="t('允许半选')" v-if="hasKey('allowHalf')"> <a-form-item v-if="hasKey('allowHalf')" :label="t('允许半选')">
<a-switch v-model:checked="data.options.allowHalf" /> <a-switch v-model:checked="data.options.allowHalf" />
</a-form-item> </a-form-item>
<template v-if="data.type === 'divider'"> <template v-if="data.type === 'divider'">
@ -484,7 +503,7 @@
<a-input-number v-model:value="data.options.marginBottom" :min="0" /> <a-input-number v-model:value="data.options.marginBottom" :min="0" />
</a-form-item> </a-form-item>
<a-form-item :label="t('文案对齐')"> <a-form-item :label="t('文案对齐')">
<a-radio-group button-style="solid" v-model:value="data.options.orientation"> <a-radio-group v-model:value="data.options.orientation" button-style="solid">
<a-radio-button value="left">{{ t('左') }}</a-radio-button> <a-radio-button value="left">{{ t('左') }}</a-radio-button>
<a-radio-button value="center">{{ t('中') }}</a-radio-button> <a-radio-button value="center">{{ t('中') }}</a-radio-button>
<a-radio-button value="right">{{ t('右') }}</a-radio-button> <a-radio-button value="right">{{ t('右') }}</a-radio-button>
@ -518,53 +537,53 @@
</a-form-item> </a-form-item>
</template> </template>
<a-form-item :label="t('选项样式')" v-if="hasKey('optionType')"> <a-form-item v-if="hasKey('optionType')" :label="t('选项样式')">
<a-radio-group button-style="solid" v-model:value="data.options.optionType"> <a-radio-group v-model:value="data.options.optionType" button-style="solid">
<a-radio-button value="default">{{ t('默认') }}</a-radio-button> <a-radio-button value="default">{{ t('默认') }}</a-radio-button>
<a-radio-button value="button">{{ t('按钮') }}</a-radio-button> <a-radio-button value="button">{{ t('按钮') }}</a-radio-button>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item :label="t('显示标签')" v-if="hasKey('showLabel')"> <a-form-item v-if="hasKey('showLabel')" :label="t('显示标签')">
<a-switch v-model:checked="data.options.showLabel" /> <a-switch v-model:checked="data.options.showLabel" />
</a-form-item> </a-form-item>
<a-form-item :label="t('是否显示')" v-if="hasKey('isShow')"> <a-form-item v-if="hasKey('isShow')" :label="t('是否显示')">
<a-switch v-model:checked="data.options.isShow" /> <a-switch v-model:checked="data.options.isShow" />
</a-form-item> </a-form-item>
<a-form-item :label="t('允许搜索')" v-if="hasKey('showSearch')"> <a-form-item v-if="hasKey('showSearch')" :label="t('允许搜索')">
<a-switch v-model:checked="data.options.showSearch" /> <a-switch v-model:checked="data.options.showSearch" />
</a-form-item> </a-form-item>
<a-form-item :label="t('是否必填')" v-if="hasKey('required')"> <a-form-item v-if="hasKey('required')" :label="t('是否必填')">
<a-switch v-model:checked="data.options.required" :disabled="data.options.readonly || data.options.disabled" /> <a-switch v-model:checked="data.options.required" :disabled="data.options.readonly || data.options.disabled" />
</a-form-item> </a-form-item>
<a-form-item :label="t('是否只读')" v-if="hasKey('readonly')"> <a-form-item v-if="hasKey('readonly')" :label="t('是否只读')">
<a-switch v-model:checked="data.options.readonly" :disabled="data.options.disabled || data.options.disabled" @change="changeReadonly" /> <a-switch v-model:checked="data.options.readonly" :disabled="data.options.disabled || data.options.disabled" @change="changeReadonly" />
</a-form-item> </a-form-item>
<a-form-item :label="t('是否禁用')" v-if="hasKey('disabled')"> <a-form-item v-if="hasKey('disabled')" :label="t('是否禁用')">
<a-switch v-model:checked="data.options.disabled" @change="changeDisabled" :disabled="data.type === 'info' || (data.type == 'input' && data.options.isSave)" /> <a-switch v-model:checked="data.options.disabled" :disabled="data.type === 'info' || (data.type == 'input' && data.options.isSave)" @change="changeDisabled" />
</a-form-item> </a-form-item>
<a-form-item :label="t('是否合计')" v-if="hasKey('subTotal') && data.isSubFormChild"> <a-form-item v-if="hasKey('subTotal') && data.isSubFormChild" :label="t('是否合计')">
<a-switch v-model:checked="data.options.subTotal" /> <a-switch v-model:checked="data.options.subTotal" />
</a-form-item> </a-form-item>
<a-form-item :label="t('开启清除')" v-if="hasKey('allowClear')"> <a-form-item v-if="hasKey('allowClear')" :label="t('开启清除')">
<a-switch v-model:checked="data.options.allowClear" :disabled="data.options.readonly || data.options.disabled" /> <a-switch v-model:checked="data.options.allowClear" :disabled="data.options.readonly || data.options.disabled" />
</a-form-item> </a-form-item>
<a-form-item :label="t('移动端扫描')" v-if="hasKey('scan')"> <a-form-item v-if="hasKey('scan')" :label="t('移动端扫描')">
<a-switch v-model:checked="data.options.scan" /> <a-switch v-model:checked="data.options.scan" />
</a-form-item> </a-form-item>
<a-form-item :label="t('组件边框')" v-if="hasKey('showComponentBorder')"> <a-form-item v-if="hasKey('showComponentBorder')" :label="t('组件边框')">
<a-switch v-model:checked="data.options.showComponentBorder" /> <a-switch v-model:checked="data.options.showComponentBorder" />
</a-form-item> </a-form-item>
<a-form-item :label="t('表单边框')" v-if="hasKey('showFormBorder')"> <a-form-item v-if="hasKey('showFormBorder')" :label="t('表单边框')">
<a-switch v-model:checked="data.options.showFormBorder" /> <a-switch v-model:checked="data.options.showFormBorder" />
</a-form-item> </a-form-item>
<a-form-item :label="t('显示序号')" v-if="hasKey('showIndex')"> <a-form-item v-if="hasKey('showIndex')" :label="t('显示序号')">
<a-switch v-model:checked="data.options.showIndex" /> <a-switch v-model:checked="data.options.showIndex" />
</a-form-item> </a-form-item>
<template v-if="data.type === 'title' || data.type === 'text'"> <template v-if="data.type === 'title' || data.type === 'text'">
@ -574,7 +593,7 @@
<a-form-item :label="t('字体颜色')"> <a-form-item :label="t('字体颜色')">
<ColorPicker v-model:value="data.options.color" /> <ColorPicker v-model:value="data.options.color" />
</a-form-item> </a-form-item>
<a-form-item :label="t('字体')" v-if="data.type === 'text'"> <a-form-item v-if="data.type === 'text'" :label="t('字体')">
<a-select v-model:value="data.options.fontFamily"> <a-select v-model:value="data.options.fontFamily">
<a-select-option value="Arial"> Arial</a-select-option> <a-select-option value="Arial"> Arial</a-select-option>
<a-select-option value="宋体">{{ t('宋体') }}</a-select-option> <a-select-option value="宋体">{{ t('宋体') }}</a-select-option>
@ -586,7 +605,7 @@
<a-form-item :label="t('字体大小')"> <a-form-item :label="t('字体大小')">
<a-input-number v-model:value="data.options.fontSize" :min="0" /> <a-input-number v-model:value="data.options.fontSize" :min="0" />
</a-form-item> </a-form-item>
<a-form-item :label="t('粗细')" v-if="data.type === 'text'"> <a-form-item v-if="data.type === 'text'" :label="t('粗细')">
<a-select v-model:value="data.options.fontWeight"> <a-select v-model:value="data.options.fontWeight">
<a-select-option value="lighter"> lighter</a-select-option> <a-select-option value="lighter"> lighter</a-select-option>
<a-select-option value="normal"> normal</a-select-option> <a-select-option value="normal"> normal</a-select-option>
@ -597,7 +616,7 @@
<a-select-option value="800">800</a-select-option> <a-select-option value="800">800</a-select-option>
</a-select> </a-select>
</a-form-item> </a-form-item>
<a-form-item :label="t('样式')" v-if="data.type === 'text'"> <a-form-item v-if="data.type === 'text'" :label="t('样式')">
<a-select v-model:value="data.options.fontStyle"> <a-select v-model:value="data.options.fontStyle">
<a-select-option value="italic"> italic</a-select-option> <a-select-option value="italic"> italic</a-select-option>
<a-select-option value="normal"> normal</a-select-option> <a-select-option value="normal"> normal</a-select-option>
@ -618,7 +637,7 @@
</a-form-item> </a-form-item>
<a-form-item :label="t('列配置项')"> <a-form-item :label="t('列配置项')">
<a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%"> <a-button size="small" style="width: 100%" type="primary" @click="handleInsertColumn">
{{ t('添加列') }} {{ t('添加列') }}
</a-button> </a-button>
</a-form-item> </a-form-item>
@ -626,9 +645,9 @@
<a-form-item :label="t('列宽配置')"> <a-form-item :label="t('列宽配置')">
<ul> <ul>
<li v-for="(item, index) in data.layout" class="column-width"> <li v-for="(item, index) in data.layout" class="column-width">
<a-input-number :placeholder="t('栅格值')" size="small" v-model:value="item.span" :min="0" :max="24" /> <a-input-number v-model:value="item.span" :max="24" :min="0" :placeholder="t('栅格值')" size="small" />
<DragOutlined class="draggable-icon" /> <DragOutlined class="draggable-icon" />
<SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" /> <SvgIcon class="delete-icon" name="delete" @click.stop="handleOptionsRemove(index)" />
</li> </li>
</ul> </ul>
</a-form-item> </a-form-item>
@ -654,26 +673,26 @@
<template v-if="data.type === 'tab'"> <template v-if="data.type === 'tab'">
<a-form-item :label="t('选项卡配置')"> <a-form-item :label="t('选项卡配置')">
<a-button size="small" type="primary" @click="handleInsertColumn" style="width: 100%"> <a-button size="small" style="width: 100%" type="primary" @click="handleInsertColumn">
{{ t('添加选项卡') }} {{ t('添加选项卡') }}
</a-button> </a-button>
<ul style="margin-top: 10px"> <ul style="margin-top: 10px">
<li v-for="(item, index) in data.layout" class="column-width"> <li v-for="(item, index) in data.layout" class="column-width">
<a-input :placeholder="t('选项卡名称')" size="small" v-model:value="item.name" :min="0" :max="24" /> <a-input v-model:value="item.name" :max="24" :min="0" :placeholder="t('选项卡名称')" size="small" />
<DragOutlined class="draggable-icon" /> <DragOutlined class="draggable-icon" />
<SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" /> <SvgIcon class="delete-icon" name="delete" @click.stop="handleOptionsRemove(index)" />
</li> </li>
</ul> </ul>
</a-form-item> </a-form-item>
<a-form-item :label="t('选项卡风格')"> <a-form-item :label="t('选项卡风格')">
<a-radio-group button-style="solid" v-model:value="data.options.type"> <a-radio-group v-model:value="data.options.type" button-style="solid">
<a-radio-button value="line">line</a-radio-button> <a-radio-button value="line">line</a-radio-button>
<a-radio-button value="card">card</a-radio-button> <a-radio-button value="card">card</a-radio-button>
</a-radio-group> </a-radio-group>
</a-form-item> </a-form-item>
<a-form-item :label="t('选项卡位置')"> <a-form-item :label="t('选项卡位置')">
<a-radio-group button-style="solid" v-model:value="data.options.tabPosition"> <a-radio-group v-model:value="data.options.tabPosition" button-style="solid">
<a-radio-button value="top">{{ t('顶部') }}</a-radio-button> <a-radio-button value="top">{{ t('顶部') }}</a-radio-button>
<a-radio-button value="right">{{ t('右侧') }}</a-radio-button> <a-radio-button value="right">{{ t('右侧') }}</a-radio-button>
<a-radio-button value="bottom">{{ t('底部') }}</a-radio-button> <a-radio-button value="bottom">{{ t('底部') }}</a-radio-button>
@ -684,28 +703,28 @@
<template v-if="data.type === 'form'"> <template v-if="data.type === 'form'">
<div class="flex justify-between items-center ml-3 mb-3"> <div class="flex justify-between items-center ml-3 mb-3">
<div class="pl-2 border-l-[6px] border-[#5e95ff] border-solid" style="font-size: 14px !important">{{ t('表头合并') }}</div> <div class="pl-2 border-l-[6px] border-[#5e95ff] border-solid" style="font-size: 14px !important">{{ t('表头合并') }}</div>
<a-button style="font-size: 14px !important" type="primary" size="small" @click="addMutipleHeads">{{ t('添加') }}</a-button> <a-button size="small" style="font-size: 14px !important" type="primary" @click="addMutipleHeads">{{ t('添加') }}</a-button>
</div> </div>
<div v-if="data.options.multipleHeads?.length > 0"> <div v-if="data.options.multipleHeads?.length > 0">
<div v-for="(sight, index) in data.options.multipleHeads" :key="sight.key" class="mt-6 relative bg-[#f8f8f8] py-2 px-4 ml-3"> <div v-for="(sight, index) in data.options.multipleHeads" :key="sight.key" class="mt-6 relative bg-[#f8f8f8] py-2 px-4 ml-3">
<a-form-item label="名称" :name="['sights', index, 'title']" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }"> <a-form-item :labelCol="{ span: 4 }" :name="['sights', index, 'title']" :wrapperCol="{ span: 20 }" label="名称">
<a-input v-model:value="sight.title" /> <a-input v-model:value="sight.title" />
</a-form-item> </a-form-item>
<a-form-item :name="['sights', index, 'children']" label="子列" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }"> <a-form-item :labelCol="{ span: 4 }" :name="['sights', index, 'children']" :wrapperCol="{ span: 20 }" label="子列">
<a-select mode="multiple" v-model:value="sight.children" :options="sight.headschilds" :fieldNames="{ label: 'title', value: 'key' }" style="width: 100%" @click="sightChild(sight)"></a-select> <a-select v-model:value="sight.children" :fieldNames="{ label: 'title', value: 'key' }" :options="sight.headschilds" mode="multiple" style="width: 100%" @click="sightChild(sight)"></a-select>
</a-form-item> </a-form-item>
<a-form-item :name="['sights', index, 'align']" label="对齐" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }"> <a-form-item :labelCol="{ span: 4 }" :name="['sights', index, 'align']" :wrapperCol="{ span: 20 }" label="对齐">
<a-select v-model:value="sight.align" :options="sightsAlign" style="width: 100%"></a-select> <a-select v-model:value="sight.align" :options="sightsAlign" style="width: 100%"></a-select>
</a-form-item> </a-form-item>
<div class="icon-delete"> <div class="icon-delete">
<SvgIcon name="delete" @click.stop="deleteSight(index, sight.key)" class="svg-delete" /> <SvgIcon class="svg-delete" name="delete" @click.stop="deleteSight(index, sight.key)" />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
</a-form> </a-form>
<ApiConfig v-if="apiConfigDialog" v-model:apiConfigDialog="apiConfigDialog" v-model:apiConfig="data.options.apiConfig" :isCascader="isCascader" :isQrcode="isQrcode" :formItem="data" :title="isCascader ? t('级联配置-API') : t('API配置')" /> <ApiConfig v-if="apiConfigDialog" v-model:apiConfig="data.options.apiConfig" v-model:apiConfigDialog="apiConfigDialog" :formItem="data" :isCascader="isCascader" :isQrcode="isQrcode" :title="isCascader ? t('级联配置-API') : t('API配置')" />
<ApiAssoConfig v-if="apiAssoDia" v-model:apiAssoDia="apiAssoDia" v-model:apiConfig="data.options.apiConfig" type="preload-title" /> <ApiAssoConfig v-if="apiAssoDia" v-model:apiAssoDia="apiAssoDia" v-model:apiConfig="data.options.apiConfig" type="preload-title" />
<DicAssoConfig v-if="dicAssoDia" v-model:dicAssoDia="dicAssoDia" v-model:dicOptions="data.options.dicOptions" type="preload-title" /> <DicAssoConfig v-if="dicAssoDia" v-model:dicAssoDia="dicAssoDia" v-model:dicOptions="data.options.dicOptions" type="preload-title" />
</div> </div>
@ -739,6 +758,7 @@
import { cloneDeep, random } from 'lodash-es'; import { cloneDeep, random } from 'lodash-es';
import { uploadMultiApi } from '/@/api/sys/upload'; import { uploadMultiApi } from '/@/api/sys/upload';
import { getFileList } from '/@/api/system/file'; import { getFileList } from '/@/api/system/file';
const { t } = useI18n(); const { t } = useI18n();
export default defineComponent({ export default defineComponent({
name: 'PropertyOption', name: 'PropertyOption',
@ -995,6 +1015,7 @@
sortableColumn(); sortableColumn();
} }
}); });
function getTabMapRelaton(o, bindTable) { function getTabMapRelaton(o, bindTable) {
o.layout.forEach((k) => { o.layout.forEach((k) => {
if (k.list?.length > 0) { if (k.list?.length > 0) {
@ -1014,6 +1035,7 @@
} }
}); });
} }
function getMapRelationComps(curComp, list) { function getMapRelationComps(curComp, list) {
//获取地图可以映射的组件 //获取地图可以映射的组件
if (curComp.type == 'map') { if (curComp.type == 'map') {
@ -1044,6 +1066,7 @@
} }
} }
} }
function getButtonRelatonTables(list) { function getButtonRelatonTables(list) {
list.forEach((x) => { list.forEach((x) => {
if (['tab', 'grid', 'card'].includes(x.type)) { if (['tab', 'grid', 'card'].includes(x.type)) {
@ -1063,6 +1086,7 @@
} }
}); });
} }
const sortableColumn = () => { const sortableColumn = () => {
nextTick(() => { nextTick(() => {
const tbody: any = document.querySelector('.awc-containter ul'); const tbody: any = document.querySelector('.awc-containter ul');
@ -1271,6 +1295,7 @@
getImage(); getImage();
}); });
}; };
async function getImage() { async function getImage() {
if (data.value.options.defaultValue) { if (data.value.options.defaultValue) {
let fileList = await getFileList({ folderId: data.value.options.defaultValue }); let fileList = await getFileList({ folderId: data.value.options.defaultValue });
@ -1282,9 +1307,11 @@
imageUrl.value = ''; imageUrl.value = '';
} }
} }
function handleChangeCode() { function handleChangeCode() {
data.value.options.defaultValue = ''; data.value.options.defaultValue = '';
} }
const deleteSight = (index: number, key: string) => { const deleteSight = (index: number, key: string) => {
data.value.options.multipleHeads.splice(index, 1); data.value.options.multipleHeads.splice(index, 1);
data.value.options.multipleHeads.forEach((o) => { data.value.options.multipleHeads.forEach((o) => {
@ -1347,6 +1374,7 @@
} }
} }
} }
function findSelf(obj, cur, parent) { function findSelf(obj, cur, parent) {
for (let i = 0; i < obj.children.length; i++) { for (let i = 0; i < obj.children.length; i++) {
let k = obj.children[i]; let k = obj.children[i];
@ -1363,6 +1391,7 @@
} }
} }
} }
function findBrother(arr, cur, key) { function findBrother(arr, cur, key) {
arr.forEach((o) => { arr.forEach((o) => {
if (o.children.length > 0 && cur != o.key && o.key !== key) { if (o.children.length > 0 && cur != o.key && o.key !== key) {
@ -1370,6 +1399,7 @@
} }
}); });
} }
function findBrotherParent(arr, cur) { function findBrotherParent(arr, cur) {
for (let i = 0; i < arr.length; i++) { for (let i = 0; i < arr.length; i++) {
let k = arr[i]; let k = arr[i];
@ -1381,6 +1411,7 @@
} }
} }
} }
const filtercomps = ref<string[]>([]); const filtercomps = ref<string[]>([]);
const filterHeads = ref<string[]>([]); const filterHeads = ref<string[]>([]);
@ -1398,6 +1429,7 @@
sight.headschilds = temp; sight.headschilds = temp;
}; };
function checkDatas(origin, temp, sight) { function checkDatas(origin, temp, sight) {
filtercomps.value = []; filtercomps.value = [];
@ -1413,6 +1445,7 @@
} }
}); });
} }
function checkHeads(origin, temp, sight) { function checkHeads(origin, temp, sight) {
filterHeads.value = [sight.key]; //不能选自己 filterHeads.value = [sight.key]; //不能选自己
origin.forEach((o) => { origin.forEach((o) => {
@ -1443,6 +1476,7 @@
function handleSpanChange(val) { function handleSpanChange(val) {
if (val === null) val = ''; if (val === null) val = '';
} }
async function handleDfValueFocus(open) { async function handleDfValueFocus(open) {
if (open && needDicDefaultValue.includes(data.value.type)) { if (open && needDicDefaultValue.includes(data.value.type)) {
if (!data.value.options.itemId) { if (!data.value.options.itemId) {
@ -1457,9 +1491,11 @@
} }
} }
} }
function handleDfValChange(e) { function handleDfValChange(e) {
data.value.options.defaultSelect = e.join(','); data.value.options.defaultSelect = e.join(',');
} }
function handleIsSave(e) { function handleIsSave(e) {
data.value.options.disabled = e; data.value.options.disabled = e;
if (designType == 'data' && data.value.type == 'input' && data.value.options.isSave !== undefined) { if (designType == 'data' && data.value.type == 'input' && data.value.options.isSave !== undefined) {
@ -1467,6 +1503,7 @@
//if (e) data.value.bindTable = null; //if (e) data.value.bindTable = null;
} }
} }
function findBindTable(list, curComp) { function findBindTable(list, curComp) {
list.forEach((x) => { list.forEach((x) => {
if (['tab', 'grid', 'card'].includes(x.type)) { if (['tab', 'grid', 'card'].includes(x.type)) {
@ -1509,6 +1546,7 @@
} }
}); });
} }
return { return {
data, data,
hasKey, hasKey,
@ -1571,7 +1609,7 @@
} }
}); });
</script> </script>
<style scoped lang="less"> <style lang="less" scoped>
*, *,
:deep(.ant-input) { :deep(.ant-input) {
font-size: 12px !important; font-size: 12px !important;
@ -1638,5 +1676,6 @@
height: 13px !important; height: 13px !important;
} }
} }
// @import '/@/assets/style/designer/index.css'; // @import '/@/assets/style/designer/index.css';
</style> </style>

540
src/components/Designer/src/types/index.ts
View File

File diff suppressed because it is too large Load Diff

42
src/components/SimpleForm/src/SimpleForm.vue
View File

@ -1,9 +1,9 @@
<template> <template>
<div> <div ref="formWrap">
<Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress"> <Form ref="formRef" :label-col="getProps?.labelCol" :labelAlign="getProps?.labelAlign" :layout="getProps?.layout" :model="formModel" :wrapper-col="getProps?.wrapperCol" @keypress.enter="handleEnterPress">
<Row v-bind="getRow"> <Row v-bind="getRow">
<template v-for="schema in getSchemas" :key="schema.field"> <template v-for="schema in getSchemas" :key="schema.field">
<Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="schema.colProps?.span"> <Col v-if="getIfShow(schema, formModel[schema.field])" v-show="getIsShow(schema, formModel[schema.field])" :span="getColWidth(schema)">
<template v-if="showComponent(schema)"> <template v-if="showComponent(schema)">
<SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" /> <SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
</template> </template>
@ -27,8 +27,8 @@
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue'; import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil } from 'lodash-es'; import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil, debounce } from 'lodash-es';
import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted } from 'vue'; import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted, onUnmounted } from 'vue';
import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form'; import { CardComponentProps, FormActionType, FormProps, FormSchema, GridComponentProps, TabComponentProps, regTestProps, requestProps } from '../../Form/src/types/form';
import SimpleFormItem from './components/SimpleFormItem.vue'; import SimpleFormItem from './components/SimpleFormItem.vue';
import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface'; import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
@ -45,6 +45,8 @@
const { t } = useI18n(); const { t } = useI18n();
const { notification } = useMessage(); const { notification } = useMessage();
const formRef = ref<FormInstance>(); const formRef = ref<FormInstance>();
const formWrap = ref<HTMLElement>();
const wrapWidth = ref(960);
const propsRef = ref<Partial<FormProps>>({}); const propsRef = ref<Partial<FormProps>>({});
@ -97,7 +99,35 @@
}; };
}); });
function getWrapSize() {
const rect = formWrap.value?.getBoundingClientRect();
wrapWidth.value = rect?.width || 960;
}
function getColWidth(schema: any) {
const compProps = schema.componentProps;
if (compProps.responsive) {
if (compProps.respNewRow) {
return 24; // 响应式布局下独立成行
} else {
const wrapValue = wrapWidth.value;
if (wrapValue > import.meta.env.VITE_RESP_LG_WIDTH) {
return 8;
} else if (wrapValue > import.meta.env.VITE_RESP_MD_WIDTH) {
return 12;
} else {
return 24;
}
}
}
return schema.colProps?.span;
}
const debGetWrapSize = debounce(getWrapSize, 300);
onMounted(() => { onMounted(() => {
window.addEventListener('resize', debGetWrapSize);
getWrapSize();
nextTick(() => { nextTick(() => {
//添加隐藏组件 //添加隐藏组件
if (unref(getProps)?.hiddenComponent?.length) { if (unref(getProps)?.hiddenComponent?.length) {
@ -108,6 +138,10 @@
}); });
}); });
onUnmounted(() => {
window.removeEventListener('resize', debGetWrapSize);
});
function showComponent(schema) { function showComponent(schema) {
return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type); return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
} }

14
src/components/SimpleForm/src/components/SimpleFormItem.vue
View File

@ -336,7 +336,19 @@
}); });
const labelCol = computed(() => { const labelCol = computed(() => {
return unref(getComponentsProps).span ? { span: unref(getComponentsProps).span } : unref(itemLabelWidthProp).labelCol; // 列宽支持两种模式 labelWidthMode = flex为百分比宽度 fix 为定宽
const commonLabelCol = unref(itemLabelWidthProp).labelCol;
const itemLabelCol = unref(getComponentsProps).labelCol;
const { labelWidthMode, labelFixWidth } = props.schema.componentProps as any;
let labelCol: any = {};
if (labelWidthMode !== 'fix') {
labelCol.span = itemLabelCol?.span || commonLabelCol?.span;
} else {
labelCol.style = {
width: `${labelFixWidth || 120}px`
};
}
return labelCol;
}); });
const rules = computed(() => { const rules = computed(() => {