feat: 组件标签支持定宽模式
feat: 响应式布局（草稿）
This commit is contained in:
gaoyunqi
@ -1,105 +1,117 @@
|
||||
<template>
|
||||
<div class="form-config-container">
|
||||
<a-form v-bind="layout">
|
||||
<a-form-item :label="t('表单形式')">
|
||||
<a-radio-group v-model:value="data.formType" button-style="solid" size="small">
|
||||
<a-radio-button value="modal">{{ t('弹窗') }}</a-radio-button>
|
||||
<a-radio-button value="drawer">{{ t('抽屉') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<div class="form-config-container">
|
||||
<a-form v-bind="layout">
|
||||
<a-form-item :label="t('表单形式')">
|
||||
<a-radio-group v-model:value="data.formType" button-style="solid" size="small">
|
||||
<a-radio-button value="modal">{{ t('弹窗') }}</a-radio-button>
|
||||
<a-radio-button value="drawer">{{ t('抽屉') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('表单布局')">
|
||||
<a-radio-group v-model:value="data.layout" button-style="solid" size="small">
|
||||
<a-radio-button value="horizontal">{{ t('水平排列') }}</a-radio-button>
|
||||
<a-radio-button value="vertical">{{ t('垂直排列') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('表单布局')">
|
||||
<a-radio-group v-model:value="data.layout" button-style="solid" size="small">
|
||||
<a-radio-button value="horizontal">{{ t('水平排列') }}</a-radio-button>
|
||||
<a-radio-button value="vertical">{{ t('垂直排列') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('标签对齐')">
|
||||
<a-radio-group v-model:value="data.labelAlign" button-style="solid" size="small">
|
||||
<a-radio-button value="left">{{ t('左对齐') }}</a-radio-button>
|
||||
<a-radio-button value="right">{{ t('右对齐') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('标签对齐')">
|
||||
<a-radio-group v-model:value="data.labelAlign" button-style="solid" size="small">
|
||||
<a-radio-button value="left">{{ t('左对齐') }}</a-radio-button>
|
||||
<a-radio-button value="right">{{ t('右对齐') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="标签宽度">
|
||||
<a-input-number v-model:value="data.labelCol.span" :min="0" :max="24" addonAfter="/ 24" />
|
||||
</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-input-number v-model:value="data.labelCol.offset" :min="0" :max="24" addonAfter="/ 24" />
|
||||
</a-form-item>
|
||||
<a-form-item label="标签宽度">
|
||||
<a-input-number v-model:value="data.labelCol.span" :max="24" :min="0" addonAfter="/ 24" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('组件尺寸')">
|
||||
<a-radio-group v-model:value="data.size" button-style="solid" size="small">
|
||||
<a-radio-button value="default">{{ t('默认') }}</a-radio-button>
|
||||
<a-radio-button value="large">{{ t('大') }}</a-radio-button>
|
||||
<a-radio-button value="small">{{ t('小') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</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 label="表单宽度">
|
||||
<a-input-number v-model:value="data.formWidth" addonAfter="px" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<a-form-item label="标签边距">
|
||||
<a-input-number v-model:value="data.labelCol.offset" :max="24" :min="0" addonAfter="/ 24" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('组件尺寸')">
|
||||
<a-radio-group v-model:value="data.size" button-style="solid" size="small">
|
||||
<a-radio-button value="default">{{ t('默认') }}</a-radio-button>
|
||||
<a-radio-button value="large">{{ t('大') }}</a-radio-button>
|
||||
<a-radio-button value="small">{{ t('小') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="表单宽度">
|
||||
<a-input-number v-model:value="data.formWidth" addonAfter="px" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { WidgetForm } from '../types';
|
||||
import { defineComponent, PropType, ref, watch } from 'vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
const { t } = useI18n();
|
||||
export default defineComponent({
|
||||
name: 'AntdFormConfig',
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<WidgetForm['config']>,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['update:config'],
|
||||
setup(props, context) {
|
||||
const data = ref(props.config);
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 18 },
|
||||
};
|
||||
watch(data, () => context.emit('update:config', data));
|
||||
import { WidgetForm } from '../types';
|
||||
import { defineComponent, PropType, ref, watch } from 'vue';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
|
||||
return {
|
||||
data,
|
||||
layout,
|
||||
t,
|
||||
};
|
||||
},
|
||||
});
|
||||
const { t } = useI18n();
|
||||
export default defineComponent({
|
||||
name: 'AntdFormConfig',
|
||||
props: {
|
||||
config: {
|
||||
type: Object as PropType<WidgetForm['config']>,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['update:config'],
|
||||
setup(props, context) {
|
||||
const data = ref(props.config);
|
||||
const layout = {
|
||||
labelCol: { span: 6 },
|
||||
wrapperCol: { span: 18 }
|
||||
};
|
||||
watch(data, () => context.emit('update:config', data));
|
||||
|
||||
return {
|
||||
data,
|
||||
layout,
|
||||
t
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.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 h4 {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed #e1e1e1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
<style lang="less" scoped>
|
||||
.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 h4 {
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px dashed #e1e1e1;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.form-config-container {
|
||||
padding: 10px;
|
||||
}
|
||||
.form-config-container {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
:deep(.ant-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// :deep(.ant-radio-group) {
|
||||
// display: flex;
|
||||
// :deep(.ant-radio-group) {
|
||||
// display: flex;
|
||||
|
||||
// .ant-radio-button-wrapper {
|
||||
// flex: 1;
|
||||
// text-align: center;
|
||||
// padding: 3px 0 !important;
|
||||
// }
|
||||
// }
|
||||
// @import '/@/assets/style/designer/index.css';
|
||||
// .ant-radio-button-wrapper {
|
||||
// flex: 1;
|
||||
// text-align: center;
|
||||
// padding: 3px 0 !important;
|
||||
// }
|
||||
// }
|
||||
// @import '/@/assets/style/designer/index.css';
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,13 +1,13 @@
|
||||
<template>
|
||||
<div class="awc-containter">
|
||||
<a-form v-bind="layout" v-if="data" :key="data.key" size="small">
|
||||
<a-form-item :label="t('不存表')" v-if="data.type == 'input'">
|
||||
<a-form v-if="data" :key="data.key" size="small" v-bind="layout">
|
||||
<a-form-item v-if="data.type == 'input'" :label="t('不存表')">
|
||||
<a-switch v-model:checked="data.options.isSave" @change="handleIsSave" />
|
||||
</a-form-item>
|
||||
<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-select @change="handleTableChange" v-model:value="data.bindTable" size="mini" :placeholder="t('请选择数据表')">
|
||||
<a-select-option v-for="(table, idx) in tableInfo" :disabled="table.disabled" :value="table.name" :key="idx">
|
||||
<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 v-model:value="data.bindTable" :placeholder="t('请选择数据表')" size="mini" @change="handleTableChange">
|
||||
<a-select-option v-for="(table, idx) in tableInfo" :key="idx" :disabled="table.disabled" :value="table.name">
|
||||
{{ table.name }}
|
||||
<span>
|
||||
<a-tag :color="table.isMain ? 'blue' : 'orange'">
|
||||
@ -17,9 +17,9 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('绑定字段')" v-if="(data.type == 'input' && !data.options.isSave) || (!noHaveField.includes(data.type) && data.type !== 'input')">
|
||||
<a-select v-model:value="data.bindField" size="mini" :placeholder="t('请选择表字段')">
|
||||
<a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
|
||||
<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" :placeholder="t('请选择表字段')" size="mini">
|
||||
<a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
|
||||
{{ field.name }}
|
||||
<span>
|
||||
<a-tag color="blue">
|
||||
@ -33,13 +33,13 @@
|
||||
|
||||
<template v-if="data.type === 'form' || data.type === 'form-view'">
|
||||
<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="dic">{{ t('数据字典') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</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()">
|
||||
<template #suffix>
|
||||
<Icon icon="ant-design:ellipsis-outlined" />
|
||||
@ -47,15 +47,15 @@
|
||||
</a-input>
|
||||
</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" />
|
||||
</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-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-form-item>
|
||||
|
||||
@ -65,7 +65,7 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('表头配置')">
|
||||
<a-input :value="configText" :placeholder="t('点击进行表头配置')" @click="tableTitleClick">
|
||||
<a-input :placeholder="t('点击进行表头配置')" :value="configText" @click="tableTitleClick">
|
||||
<template #suffix>
|
||||
<Icon icon="ant-design:ellipsis-outlined" />
|
||||
</template>
|
||||
@ -74,7 +74,7 @@
|
||||
</template>
|
||||
|
||||
<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-select v-else-if="data.options.preloadType === 'dic'" v-model:value="item.options.prestrainField">
|
||||
<a-select-option value="name">name</a-select-option>
|
||||
@ -88,8 +88,8 @@
|
||||
</template>
|
||||
|
||||
<a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('开始字段')">
|
||||
<a-select v-model:value="data.bindStartTime" size="mini" :placeholder="t('请选择开始字段')">
|
||||
<a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
|
||||
<a-select v-model:value="data.bindStartTime" :placeholder="t('请选择开始字段')" size="mini">
|
||||
<a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
|
||||
{{ field.name }}
|
||||
<span>
|
||||
<a-tag color="blue">
|
||||
@ -101,8 +101,8 @@
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item v-if="hasKey('showTime') && designType === 'data'" :label="t('结束字段')">
|
||||
<a-select v-model:value="data.bindEndTime" size="mini" :placeholder="t('请选择结束字段')">
|
||||
<a-select-option v-for="(field, idx) in fieldsInfo" :value="field.name" :key="idx">
|
||||
<a-select v-model:value="data.bindEndTime" :placeholder="t('请选择结束字段')" size="mini">
|
||||
<a-select-option v-for="(field, idx) in fieldsInfo" :key="idx" :value="field.name">
|
||||
{{ field.name }}
|
||||
<span>
|
||||
<a-tag color="blue">
|
||||
@ -112,7 +112,7 @@
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</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)">
|
||||
<template #suffix>
|
||||
<Icon icon="ant-design:ellipsis-outlined" />
|
||||
@ -126,15 +126,15 @@
|
||||
<a-select v-model:value="data.options.separator" :options="separatorOptions" />
|
||||
</a-form-item>
|
||||
<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 label="数据分页" v-if="hasKey('isPagination')">
|
||||
<a-form-item v-if="hasKey('isPagination')" label="数据分页">
|
||||
<a-switch v-model:checked="data.options.isPagination" />
|
||||
</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-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-form-item>
|
||||
<a-form-item v-if="hasKey('showTime')" :label="t('开始占位')">
|
||||
@ -145,13 +145,12 @@
|
||||
<a-input v-model:value="data.options.endTimePlaceholder" />
|
||||
</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-input v-else v-model:value="data.options.placeholder" :placeholder="t('请输入占位提示')" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
:label="t('默认值')"
|
||||
v-if="
|
||||
(hasKey('defaultValue') &&
|
||||
(data.type === 'input' ||
|
||||
@ -166,9 +165,10 @@
|
||||
data.type === 'computational')) ||
|
||||
(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-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" />
|
||||
<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" />
|
||||
@ -181,27 +181,27 @@
|
||||
</template>
|
||||
<a-select
|
||||
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"
|
||||
@change="handleDfValChange"
|
||||
:allowClear="true"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
:options="defaultSelectOption"
|
||||
:placeholder="t('请选择默认值')"
|
||||
mode="multiple"
|
||||
@change="handleDfValChange"
|
||||
@dropdownVisibleChange="handleDfValueFocus"
|
||||
>
|
||||
</a-select>
|
||||
<a-select
|
||||
v-else-if="needDicDefaultValue.includes(data.type)"
|
||||
:options="defaultSelectOption"
|
||||
:placeholder="t('请选择默认值')"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
v-model:value="data.options.defaultSelect"
|
||||
:allowClear="true"
|
||||
:fieldNames="{ label: 'name', value: 'value' }"
|
||||
:options="defaultSelectOption"
|
||||
:placeholder="t('请选择默认值')"
|
||||
@dropdownVisibleChange="handleDfValueFocus"
|
||||
>
|
||||
</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 v-if="hasKey('format') && (data.type === 'time' || data.type === 'time-range')" :label="t('时间格式')">
|
||||
@ -221,19 +221,19 @@
|
||||
|
||||
<template v-if="data.type === 'time'">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<template v-if="data.type === 'date'">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<a-form-item :label="t('编码规则')" v-if="hasKey('autoCodeRule')" required>
|
||||
<a-select v-model:value="data.options.autoCodeRule" size="mini" :placeholder="t('请选择编码规则')">
|
||||
<a-select-option v-for="rule in codeRuleOptions" :value="rule.code" :key="rule.id">
|
||||
<a-form-item v-if="hasKey('autoCodeRule')" :label="t('编码规则')" required>
|
||||
<a-select v-model:value="data.options.autoCodeRule" :placeholder="t('请选择编码规则')" size="mini">
|
||||
<a-select-option v-for="rule in codeRuleOptions" :key="rule.id" :value="rule.code">
|
||||
{{ rule.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
@ -246,24 +246,24 @@
|
||||
<ComputationalSetting
|
||||
v-if="computationalDialog"
|
||||
v-model:computationalConfig="data.options.computationalConfig"
|
||||
@setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
|
||||
v-model:computationalDialog="computationalDialog"
|
||||
@setComputationalConfigValue="(val) => (data.options.computationalConfigValue = val)"
|
||||
/>
|
||||
</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-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-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-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-option :value="0">{{ t('当前用户') }}</a-select-option>
|
||||
<a-select-option :value="1">{{ t('当前组织') }}</a-select-option>
|
||||
@ -271,13 +271,13 @@
|
||||
</a-select>
|
||||
</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-option :value="0">{{ t('系统组织架构') }}</a-select-option>
|
||||
</a-select>
|
||||
</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-option :value="0">{{ t('系统用户') }}</a-select-option>
|
||||
</a-select>
|
||||
@ -286,8 +286,8 @@
|
||||
<a-form-item v-if="hasKey('loadAgain')">
|
||||
<template #label>
|
||||
<a-tooltip>
|
||||
<template #title> 二次加载是决定编辑状态是否重新获取信息体数据 </template>
|
||||
<Icon icon="ant-design:question-circle-outlined" color="#909399" />
|
||||
<template #title> 二次加载是决定编辑状态是否重新获取信息体数据</template>
|
||||
<Icon color="#909399" icon="ant-design:question-circle-outlined" />
|
||||
</a-tooltip>
|
||||
{{ t('二次加载') }}
|
||||
</template>
|
||||
@ -300,7 +300,7 @@
|
||||
</a-form-item>
|
||||
<template v-if="data.options.isSpecial">
|
||||
<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="2">{{ t('表格选择数据按钮') }}</a-select-option>
|
||||
</a-select>
|
||||
@ -310,19 +310,19 @@
|
||||
</template>
|
||||
<template v-if="data.options.buttonType == 2">
|
||||
<a-form-item :label="t('表格选择')" required>
|
||||
<a-select v-model:value="data.options.selectTable" size="mini" :placeholder="t('请选择表格')">
|
||||
<a-select-option v-for="item in buttonTableOptions" :value="item.key" :key="item.key">{{ item.label }}</a-select-option>
|
||||
<a-select v-model:value="data.options.selectTable" :placeholder="t('请选择表格')" size="mini">
|
||||
<a-select-option v-for="item in buttonTableOptions" :key="item.key" :value="item.key">{{ item.label }}</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('表头配置')">
|
||||
<a-input :value="configText" :placeholder="t('点击进行表头配置')" @click="tableTitleClick">
|
||||
<a-input :placeholder="t('点击进行表头配置')" :value="configText" @click="tableTitleClick">
|
||||
<template #suffix>
|
||||
<Icon icon="ant-design:ellipsis-outlined" />
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<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-select v-else-if="data.options.datasourceType === 'dic'" v-model:value="item.prestrainField">
|
||||
<a-select-option value="name">name</a-select-option>
|
||||
@ -340,78 +340,78 @@
|
||||
</a-form-item>
|
||||
</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-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-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-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-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-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-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" />
|
||||
</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" />
|
||||
</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-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-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-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" />
|
||||
</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" />
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item :label="t('地址字段')" v-if="hasKey('address')">
|
||||
<a-select v-model:value="data.options.address" size="mini" allowClear>
|
||||
<a-form-item v-if="hasKey('address')" :label="t('地址字段')">
|
||||
<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>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('经纬度字段')" v-if="hasKey('latiAndLong')">
|
||||
<a-select v-model:value="data.options.latiAndLong" size="mini" allowClear>
|
||||
<a-form-item v-if="hasKey('latiAndLong')" :label="t('经纬度字段')">
|
||||
<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>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('配置类型')" v-if="hasKey('codeType')">
|
||||
<a-select v-model:value="data.options.codeType" size="mini" :placeholder="t('请选择配置类型')" @change="handleChangeCode">
|
||||
<a-select-option value="fixed" key="fixed"> {{ t('固定二维码') }} </a-select-option>
|
||||
<a-select-option value="api" key="api"> {{ t('接口配置') }} </a-select-option>
|
||||
<a-form-item v-if="hasKey('codeType')" :label="t('配置类型')">
|
||||
<a-select v-model:value="data.options.codeType" :placeholder="t('请选择配置类型')" size="mini" @change="handleChangeCode">
|
||||
<a-select-option key="fixed" value="fixed"> {{ t('固定二维码') }}</a-select-option>
|
||||
<a-select-option key="api" value="api"> {{ t('接口配置') }}</a-select-option>
|
||||
</a-select>
|
||||
</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-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()">
|
||||
<template #suffix>
|
||||
<Icon icon="ant-design:ellipsis-outlined" />
|
||||
@ -419,22 +419,41 @@
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<!-- 子表不需要span -->
|
||||
<a-form-item label="标签宽度" v-if="hasKey('span') && (!data.isSubFormChild || !data.isSingleFormChild)">
|
||||
<a-input-number v-model:value="data.options.span" :min="0" :max="24" addonAfter="/ 24" @change="handleSpanChange" />
|
||||
<a-form-item v-if="hasKey('responsive')" label="响应式">
|
||||
<a-switch v-model:checked="data.options.responsive" />
|
||||
</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-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-form-item>
|
||||
|
||||
<template v-if="data.type === 'image'">
|
||||
<a-form-item :label="t('默认值')">
|
||||
<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>
|
||||
<SvgIcon name="upload" style="margin-right: 10px" />
|
||||
{{ t('点击上传') }}
|
||||
@ -446,31 +465,31 @@
|
||||
</a-form-item>
|
||||
</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-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-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-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-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-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-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-form-item>
|
||||
<template v-if="data.type === 'divider'">
|
||||
@ -484,7 +503,7 @@
|
||||
<a-input-number v-model:value="data.options.marginBottom" :min="0" />
|
||||
</a-form-item>
|
||||
<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="center">{{ t('中') }}</a-radio-button>
|
||||
<a-radio-button value="right">{{ t('右') }}</a-radio-button>
|
||||
@ -495,7 +514,7 @@
|
||||
<a-form-item :label="t('上传列表样式')">
|
||||
<a-radio-group v-model:value="data.options.listType" button-style="solid">
|
||||
<a-radio-button value="text">text</a-radio-button>
|
||||
<a-radio-button value="picture">picture </a-radio-button>
|
||||
<a-radio-button value="picture">picture</a-radio-button>
|
||||
<a-radio-button value="picture-card">picture-card</a-radio-button>
|
||||
<!-- <a-radio-button value="dragger">dragger</a-radio-button> -->
|
||||
</a-radio-group>
|
||||
@ -518,53 +537,53 @@
|
||||
</a-form-item>
|
||||
</template>
|
||||
|
||||
<a-form-item :label="t('选项样式')" v-if="hasKey('optionType')">
|
||||
<a-radio-group button-style="solid" v-model:value="data.options.optionType">
|
||||
<a-form-item v-if="hasKey('optionType')" :label="t('选项样式')">
|
||||
<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="button">{{ t('按钮') }}</a-radio-button>
|
||||
</a-radio-group>
|
||||
</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-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-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-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-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-form-item>
|
||||
|
||||
<a-form-item :label="t('是否禁用')" v-if="hasKey('disabled')">
|
||||
<a-switch v-model:checked="data.options.disabled" @change="changeDisabled" :disabled="data.type === 'info' || (data.type == 'input' && data.options.isSave)" />
|
||||
<a-form-item v-if="hasKey('disabled')" :label="t('是否禁用')">
|
||||
<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 :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-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-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-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-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-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-form-item>
|
||||
<template v-if="data.type === 'title' || data.type === 'text'">
|
||||
@ -574,9 +593,9 @@
|
||||
<a-form-item :label="t('字体颜色')">
|
||||
<ColorPicker v-model:value="data.options.color" />
|
||||
</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-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>
|
||||
<a-select-option value="黑体">{{ t('黑体') }}</a-select-option>
|
||||
@ -586,21 +605,21 @@
|
||||
<a-form-item :label="t('字体大小')">
|
||||
<a-input-number v-model:value="data.options.fontSize" :min="0" />
|
||||
</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-option value="lighter"> lighter </a-select-option>
|
||||
<a-select-option value="normal"> normal </a-select-option>
|
||||
<a-select-option value="bold"> bold </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="bold"> bold</a-select-option>
|
||||
<a-select-option value="500">500</a-select-option>
|
||||
<a-select-option value="600">600</a-select-option>
|
||||
<a-select-option value="700">700</a-select-option>
|
||||
<a-select-option value="800">800</a-select-option>
|
||||
</a-select>
|
||||
</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-option value="italic"> italic </a-select-option>
|
||||
<a-select-option value="normal"> normal </a-select-option>
|
||||
<a-select-option value="italic"> italic</a-select-option>
|
||||
<a-select-option value="normal"> normal</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item :label="t('对齐方式')">
|
||||
@ -618,7 +637,7 @@
|
||||
</a-form-item>
|
||||
|
||||
<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('添加列') }}
|
||||
</a-button>
|
||||
</a-form-item>
|
||||
@ -626,9 +645,9 @@
|
||||
<a-form-item :label="t('列宽配置')">
|
||||
<ul>
|
||||
<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" />
|
||||
<SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
|
||||
<SvgIcon class="delete-icon" name="delete" @click.stop="handleOptionsRemove(index)" />
|
||||
</li>
|
||||
</ul>
|
||||
</a-form-item>
|
||||
@ -654,26 +673,26 @@
|
||||
|
||||
<template v-if="data.type === 'tab'">
|
||||
<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('添加选项卡') }}
|
||||
</a-button>
|
||||
<ul style="margin-top: 10px">
|
||||
<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" />
|
||||
<SvgIcon name="delete" @click.stop="handleOptionsRemove(index)" class="delete-icon" />
|
||||
<SvgIcon class="delete-icon" name="delete" @click.stop="handleOptionsRemove(index)" />
|
||||
</li>
|
||||
</ul>
|
||||
</a-form-item>
|
||||
<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="card">card</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<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="right">{{ t('右侧') }}</a-radio-button>
|
||||
<a-radio-button value="bottom">{{ t('底部') }}</a-radio-button>
|
||||
@ -684,28 +703,28 @@
|
||||
<template v-if="data.type === 'form'">
|
||||
<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>
|
||||
<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 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">
|
||||
<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-form-item>
|
||||
<a-form-item :name="['sights', index, 'children']" label="子列" :labelCol="{ span: 4 }" :wrapperCol="{ span: 20 }">
|
||||
<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-form-item :labelCol="{ span: 4 }" :name="['sights', index, 'children']" :wrapperCol="{ span: 20 }" label="子列">
|
||||
<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 :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-form-item>
|
||||
<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>
|
||||
</template>
|
||||
</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" />
|
||||
<DicAssoConfig v-if="dicAssoDia" v-model:dicAssoDia="dicAssoDia" v-model:dicOptions="data.options.dicOptions" type="preload-title" />
|
||||
</div>
|
||||
@ -739,6 +758,7 @@
|
||||
import { cloneDeep, random } from 'lodash-es';
|
||||
import { uploadMultiApi } from '/@/api/sys/upload';
|
||||
import { getFileList } from '/@/api/system/file';
|
||||
|
||||
const { t } = useI18n();
|
||||
export default defineComponent({
|
||||
name: 'PropertyOption',
|
||||
@ -995,6 +1015,7 @@
|
||||
sortableColumn();
|
||||
}
|
||||
});
|
||||
|
||||
function getTabMapRelaton(o, bindTable) {
|
||||
o.layout.forEach((k) => {
|
||||
if (k.list?.length > 0) {
|
||||
@ -1014,6 +1035,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function getMapRelationComps(curComp, list) {
|
||||
//获取地图可以映射的组件
|
||||
if (curComp.type == 'map') {
|
||||
@ -1044,6 +1066,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function getButtonRelatonTables(list) {
|
||||
list.forEach((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
@ -1063,6 +1086,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const sortableColumn = () => {
|
||||
nextTick(() => {
|
||||
const tbody: any = document.querySelector('.awc-containter ul');
|
||||
@ -1271,6 +1295,7 @@
|
||||
getImage();
|
||||
});
|
||||
};
|
||||
|
||||
async function getImage() {
|
||||
if (data.value.options.defaultValue) {
|
||||
let fileList = await getFileList({ folderId: data.value.options.defaultValue });
|
||||
@ -1282,9 +1307,11 @@
|
||||
imageUrl.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
function handleChangeCode() {
|
||||
data.value.options.defaultValue = '';
|
||||
}
|
||||
|
||||
const deleteSight = (index: number, key: string) => {
|
||||
data.value.options.multipleHeads.splice(index, 1);
|
||||
data.value.options.multipleHeads.forEach((o) => {
|
||||
@ -1347,6 +1374,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function findSelf(obj, cur, parent) {
|
||||
for (let i = 0; i < obj.children.length; i++) {
|
||||
let k = obj.children[i];
|
||||
@ -1363,6 +1391,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function findBrother(arr, cur, key) {
|
||||
arr.forEach((o) => {
|
||||
if (o.children.length > 0 && cur != o.key && o.key !== key) {
|
||||
@ -1370,6 +1399,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function findBrotherParent(arr, cur) {
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
let k = arr[i];
|
||||
@ -1381,6 +1411,7 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const filtercomps = ref<string[]>([]);
|
||||
const filterHeads = ref<string[]>([]);
|
||||
|
||||
@ -1398,6 +1429,7 @@
|
||||
|
||||
sight.headschilds = temp;
|
||||
};
|
||||
|
||||
function checkDatas(origin, temp, sight) {
|
||||
filtercomps.value = [];
|
||||
|
||||
@ -1413,6 +1445,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function checkHeads(origin, temp, sight) {
|
||||
filterHeads.value = [sight.key]; //不能选自己
|
||||
origin.forEach((o) => {
|
||||
@ -1443,6 +1476,7 @@
|
||||
function handleSpanChange(val) {
|
||||
if (val === null) val = '';
|
||||
}
|
||||
|
||||
async function handleDfValueFocus(open) {
|
||||
if (open && needDicDefaultValue.includes(data.value.type)) {
|
||||
if (!data.value.options.itemId) {
|
||||
@ -1457,9 +1491,11 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleDfValChange(e) {
|
||||
data.value.options.defaultSelect = e.join(',');
|
||||
}
|
||||
|
||||
function handleIsSave(e) {
|
||||
data.value.options.disabled = e;
|
||||
if (designType == 'data' && data.value.type == 'input' && data.value.options.isSave !== undefined) {
|
||||
@ -1467,6 +1503,7 @@
|
||||
//if (e) data.value.bindTable = null;
|
||||
}
|
||||
}
|
||||
|
||||
function findBindTable(list, curComp) {
|
||||
list.forEach((x) => {
|
||||
if (['tab', 'grid', 'card'].includes(x.type)) {
|
||||
@ -1509,6 +1546,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
data,
|
||||
hasKey,
|
||||
@ -1571,7 +1609,7 @@
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
<style lang="less" scoped>
|
||||
*,
|
||||
:deep(.ant-input) {
|
||||
font-size: 12px !important;
|
||||
@ -1638,5 +1676,6 @@
|
||||
height: 13px !important;
|
||||
}
|
||||
}
|
||||
|
||||
// @import '/@/assets/style/designer/index.css';
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,9 +1,9 @@
|
||||
<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">
|
||||
<Row v-bind="getRow">
|
||||
<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)">
|
||||
<SimpleFormItem v-model:value="formModel[schema.field]" :form-api="formApi" :isWorkFlow="isWorkFlow" :refreshFieldObj="refreshFieldObj" :schema="schema" />
|
||||
</template>
|
||||
@ -27,8 +27,8 @@
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { Form, FormInstance, Row, Col, Modal, message } from 'ant-design-vue';
|
||||
import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil } from 'lodash-es';
|
||||
import { computed, reactive, ref, provide, unref, nextTick, toRaw, createVNode, inject, onMounted } from 'vue';
|
||||
import { cloneDeep, isArray, isBoolean, isFunction, isObject, isString, uniqBy, isNil, debounce } from 'lodash-es';
|
||||
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 SimpleFormItem from './components/SimpleFormItem.vue';
|
||||
import { NamePath, ValidateOptions } from 'ant-design-vue/lib/form/interface';
|
||||
@ -45,6 +45,8 @@
|
||||
const { t } = useI18n();
|
||||
const { notification } = useMessage();
|
||||
const formRef = ref<FormInstance>();
|
||||
const formWrap = ref<HTMLElement>();
|
||||
const wrapWidth = ref(960);
|
||||
|
||||
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(() => {
|
||||
window.addEventListener('resize', debGetWrapSize);
|
||||
getWrapSize();
|
||||
nextTick(() => {
|
||||
//添加隐藏组件
|
||||
if (unref(getProps)?.hiddenComponent?.length) {
|
||||
@ -108,6 +138,10 @@
|
||||
});
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', debGetWrapSize);
|
||||
});
|
||||
|
||||
function showComponent(schema) {
|
||||
return props.isWorkFlow ? !noShowWorkFlowComponents.includes(schema.type) : !noShowGenerateComponents.includes(schema.type);
|
||||
}
|
||||
|
||||
@ -336,7 +336,19 @@
|
||||
});
|
||||
|
||||
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(() => {
|
||||
|
||||
Reference in New Issue
Block a user