You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
80 lines
2.0 KiB
Vue
80 lines
2.0 KiB
Vue
<script lang="ts">
|
|
|
|
import inputType from './inputType.vue';
|
|
import tableType from './tableType.vue';
|
|
import inputAreaType from './inputAreaType.vue';
|
|
import switchType from './switchType.vue';
|
|
import functionType from './functionType.vue';
|
|
|
|
export default {
|
|
name: 'option-form',
|
|
components: {
|
|
inputType,
|
|
tableType,
|
|
inputAreaType,
|
|
switchType,
|
|
functionType
|
|
}
|
|
};
|
|
</script>
|
|
<template>
|
|
<el-form :model="formData" label-width="auto" style="max-width: 600px">
|
|
<div v-for="i in Object.keys(formData)" :key="i">
|
|
<component :is="getType(i)" :formData="formData" :keyValue="i" :itemName="nameEnum[i]||''" />
|
|
</div>
|
|
</el-form>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
|
|
const props = defineProps({
|
|
formData: Object
|
|
});
|
|
const { formData } = toRefs(props);
|
|
|
|
const typeEnum = {
|
|
inputType: ['name', 'key', 'labelWidth', 'submitBottomName', 'resetBottomName', 'total', 'pageNum', 'pageSize', 'dataKey'],
|
|
inputAreaType: [],
|
|
tableType: ['thTdMap'],
|
|
switchType: ['isReset', 'isResetBottom', 'isSubmitBottom', 'disabled', 'isPagination', 'isInLine', 'isOperate'],
|
|
functionType: ['submitFunction', 'updateFunction', 'deleteFunction']
|
|
};
|
|
const nameEnum = {
|
|
name: '组件名称',
|
|
key: '组件key值',
|
|
labelWidth: '标签长度',
|
|
submitBottomName: '确定按钮名称',
|
|
resetBottomName: '重置按钮名称',
|
|
isReset: '是否可重置',
|
|
isResetBottom: '是否显示重置按钮',
|
|
isSubmitBottom: '是否显示确定按钮',
|
|
disabled: '是否禁用',
|
|
submitFunction: '提交函数',
|
|
isPagination: '是否分页',
|
|
total: '总数字段名',
|
|
pageNum: '当前页字段名',
|
|
pageSize: '每页条数字段名',
|
|
dataKey: '获取的数据字段',
|
|
isInLine: '是否为行内表单',
|
|
thTdMap: '表单数据设置',
|
|
updateFunction: '修改函数',
|
|
deleteFunction: '删除函数',
|
|
isOperate: '是否显示操作组'
|
|
};
|
|
const getType = (e) => {
|
|
let res = '';
|
|
Object.keys(typeEnum).forEach((key) => {
|
|
if (typeEnum[key].includes(e)) {
|
|
res = key;
|
|
}
|
|
});
|
|
return res;
|
|
};
|
|
|
|
|
|
</script>
|
|
<style scoped lang="less">
|
|
</style>
|
|
|
|
|
|
|