Skip to content

I
integrate-admin
提交 a1617cc1 authored 作者: 刘旭's avatar 刘旭
浏览文件
操作

集成的表单设计的js改为setup语法糖，保持代码一致

上级 4881991c
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 364 行增加 和 429 行删除
package.json
浏览文件 @ a1617cc1
......@@ -4,7 +4,7 @@
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"serve": "vite preview --open",
"tsc": "vue-tsc --noEmit"
},
"dependencies": {
......
src/App.vue
浏览文件 @ a1617cc1
......@@ -15,6 +15,7 @@ export default {
</script>
<template>
<!-- el-config-provider 设置系统语言 -->
<el-config-provider :locale="locale">
<router-view></router-view>
</el-config-provider>
......@@ -28,6 +29,7 @@ export default {
/* 1px边框适配 */
.border-top-1px {
position: relative;
&::after {
content: "";
position: absolute;
......@@ -38,8 +40,10 @@ export default {
transform: scaleY(0.5);
}
}
.border-bottom-1px {
position: relative;
&::after {
content: "";
position: absolute;
......@@ -50,8 +54,10 @@ export default {
transform: scaleY(0.4);
}
}
.border-left-1px {
position: relative;
&::after {
content: "";
position: absolute;
......@@ -71,6 +77,7 @@ export default {
align-items: center;
justify-content: space-between;
}
/* 垂直居中对齐 */
.flex-center-h {
display: flex;
......@@ -90,16 +97,20 @@ export default {
flex-flow: wrap;
align-content: space-between;
}
/* flex布局end */
.font12 {
font-size: 12px;
}
.font14 {
font-size: 14px;
}
.font16 {
font-size: 16px;
}
/* 超出省略... */
.over1 {
overflow: hidden;
......@@ -141,5 +152,6 @@ export default {
-moz-line-clamp: 3 !important;
-moz-box-orient: vertical;
}
/* 超出省略...end */
</style>
src/main.ts
浏览文件 @ a1617cc1
......@@ -22,8 +22,6 @@ import { permission } from './directives/permission'
import SocketService from '@/socket/main'
// SocketService.Instance.connect();
import DesignForm from "../src/vueFormCreate";
// 国际化
import i18n from "@/lang/index";
......@@ -79,7 +77,6 @@ Object.keys(ElIconModules).forEach((key) => {
app.use(store, key)
app.use(router);
app.use(ElementPlus)
app.use(DesignForm);
app.use(i18n);
app.mount('#app');
//注册
......
src/views/manage/formConfiguration.vue
浏览文件 @ a1617cc1
......@@ -31,7 +31,7 @@
</div>
<!-- 详情页面 -->
<el-drawer v-model="visible" :title="title" size="80%" @close="handleClose">
<ElDesignForm ref="jsonRef" />
<ElDesignForm ref="designFormRef" />
<template #footer>
<span>
<el-button @click="handleClose">关闭</el-button>
......@@ -64,6 +64,7 @@
<script setup lang="ts">
import { ref, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";
import { ElDesignForm, ElGenerateForm } from "../../vueFormCreate";
import { getStructureList, saveStructure, getStructureData, deleteStructure, deleteStructureData } from '@/services/api/systemApi/formConfiguration/formConfiguration'
const visible = ref(false)
......@@ -72,7 +73,7 @@ const loading = ref(true)
const loadingDialog = ref(true)
const searchValue = ref('')
const tableList = ref()
const jsonRef = ref()
const designFormRef = ref()
const title = ref('详情')
const structureId = ref()
const dataList = ref()
......@@ -117,22 +118,23 @@ const handleScreen = () => init(searchValue.value, tablePage.value.pageNo, table
const handleAdd = () => {
title.value = '添加'
visible.value = true
nextTick(() => jsonRef.value.clear())
nextTick(() => designFormRef.value.clear())
}
const handleDetails = (row: any) => {
title.value = '详情'
visible.value = true
nextTick(() => jsonRef.value.detailJson(row.formJson))
nextTick(() => designFormRef.value.detailJson(row.formJson))
}
const handleEdit = (row: any) => {
title.value = '编辑'
structureId.value = row.id
visible.value = true
nextTick(() => jsonRef.value.detailJson(row.formJson))
nextTick(() => designFormRef.value.detailJson(row.formJson))
}
const handleQuery = (row: any) => {
formId.value = row.formId
dbTableName.value = row.dbTableName
......@@ -171,11 +173,11 @@ const deleteData = (id: any) => {
}
const onConfirm = () => {
const json = jsonRef.value.state.widgetForm
const json = designFormRef.value.state.widgetForm
if (title.value === '添加') {
saveStructure(json).then((res: any) => {
if (res.code === 200) {
jsonRef.value.handleClearable()
designFormRef.value.handleClearable()
init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
visible.value = false
ElMessage({ type: 'success', message: '添加成功' })
......@@ -184,7 +186,7 @@ const onConfirm = () => {
} else {
saveStructure(json, structureId.value).then((res: any) => {
if (res.code === 200) {
jsonRef.value.handleClearable()
designFormRef.value.handleClearable()
init(searchValue.value, tablePage.value.pageNo, tablePage.value.pageSize)
visible.value = false
ElMessage({ type: 'success', message: '编辑成功' })
......@@ -195,7 +197,7 @@ const onConfirm = () => {
}
const handleClose = () => {
jsonRef.value.handleClearable()
designFormRef.value.handleClearable()
visible.value = false
}
......
src/vueFormCreate/components/CodeEditor.vue
浏览文件 @ a1617cc1
......@@ -2,8 +2,8 @@
<div ref="aceRef" style="width: 100%; height: 350px;"></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
<script lang="ts" setup>
import { onMounted, watch, ref } from 'vue'
// Ace 是一个用 JavaScript 编写的代码编辑器 仅生成文件
import ace, { Ace } from 'ace-builds'
......@@ -11,68 +11,58 @@ interface State {
aceRef?: HTMLElement
codeEditor?: Ace.Editor
}
const aceRef: any = ref<State>()
const codeEditor: any = ref<State>()
export default defineComponent({
name: 'CodeEditor',
props: {
value: {
type: String,
default: ''
},
language: {
type: String,
default: 'javascript'
},
theme: {
tyle: String,
default: 'github'
},
readonly: {
type: Boolean,
default: false
}
const props = defineProps({
value: {
type: String,
default: ''
},
language: {
type: String,
default: 'javascript'
},
theme: {
tyle: String,
default: 'github'
},
emits: ['update:value'],
setup(props, context) {
const state = reactive<State>({
aceRef: undefined,
codeEditor: undefined
})
readonly: {
type: Boolean,
default: false
}
})
onMounted(() => {
state.codeEditor = ace.edit(state.aceRef!, {
mode: `ace/mode/${props.language}`,
theme: `ace/theme/${props.theme}`,
value: props.value,
readOnly: props.readonly,
fontSize: 12,
tabSize: 2
})
const emits = defineEmits(['update:value'])
state.codeEditor.on('change', () =>
context.emit('update:value', state.codeEditor?.getValue())
)
})
onMounted(() => {
codeEditor.value = ace.edit(aceRef.value!, {
mode: `ace/mode/${props.language}`,
theme: `ace/theme/${props.theme}`,
value: props.value,
readOnly: props.readonly,
fontSize: 12,
tabSize: 2
})
watch(
() => props.value,
val => {
if (state.codeEditor) {
const currentPosition = state.codeEditor?.selection.getCursor()
state.codeEditor.setValue(val)
state.codeEditor.clearSelection()
state.codeEditor.gotoLine(
currentPosition.row + 1,
currentPosition.column,
true
)
}
}
)
codeEditor.value.on('change', () =>
emits('update:value', codeEditor.value?.getValue())
)
})
return {
...toRefs(state)
watch(
() => props.value,
val => {
if (codeEditor.value) {
const currentPosition = codeEditor.value?.selection.getCursor()
codeEditor.value.setValue(val)
codeEditor.value.clearSelection()
codeEditor.value.gotoLine(
currentPosition.row + 1,
currentPosition.column,
true
)
}
}
})
)
</script>
src/vueFormCreate/components/ComponentGroup.vue
浏览文件 @ a1617cc1
<template>
<div class="widget-cate">{{ title }}</div>
<Draggable
tag="ul"
item-key="type"
ghostClass="ghost"
:group="{ name: 'people', pull: 'clone', put: false }"
:sort="false"
:list="list"
>
<Draggable tag="ul" item-key="type" ghostClass="ghost" :group="{ name: 'people', pull: 'clone', put: false }"
:sort="false" :list="list">
<template #item="{ element }">
<li
class="form-edit-widget-label"
:class="{ 'no-put': element.tpye === 'divider' }"
>
<li class="form-edit-widget-label" :class="{ 'no-put': element.tpye === 'divider' }">
<a>
<SvgIcon :iconClass="element.type" />
<span>{{ element.label }}</span>
......@@ -22,25 +13,17 @@
</Draggable>
</template>
<script lang="ts">
import { defineComponent, PropType } from 'vue'
<script lang="ts" setup>
import Draggable from 'vuedraggable'
import SvgIcon from './SvgIcon.vue'
export default defineComponent({
name: 'ComponentGroup',
components: {
Draggable,
SvgIcon
const props = defineProps({
title: {
type: String,
required: true
},
props: {
title: {
type: String,
required: true
},
list: {
required: true
}
list: {
required: true
}
})
</script>
src/vueFormCreate/components/RichTextEditor.vue
浏览文件 @ a1617cc1
......@@ -2,10 +2,9 @@
<div ref="editor"></div>
</template>
<script lang="ts">
<script lang="ts" setup>
import {
computed,
defineComponent,
onBeforeUnmount,
onMounted,
ref,
......@@ -13,50 +12,44 @@ import {
} from 'vue'
import WangEditor from 'wangeditor'
export default defineComponent({
name: 'RichTextEditor',
props: {
value: {
type: String,
default: ''
},
disable: {
type: Boolean,
default: false
}
const props = defineProps({
value: {
type: String,
default: ''
},
emits: ['update:value'],
setup(props, context) {
const editor = ref()
const content = computed({
set: val => context.emit('update:value', val),
get: () => props.value
})
let instance: WangEditor | null
onMounted(() => {
instance = new WangEditor(editor.value)
Object.assign(instance.config, {
zIndex: 9,
onchange: (html: string) => (content.value = html)
})
instance.create()
watchEffect(() =>
instance && props.disable ? instance.disable() : instance?.enable()
)
})
onBeforeUnmount(() => {
instance && instance.destroy()
instance = null
})
return {
editor
}
disable: {
type: Boolean,
default: false
}
})
const emits = defineEmits(['update:value'])
const editor = ref()
const content = computed({
set: val => emits('update:value', val),
get: () => props.value
})
let instance: WangEditor | null
onMounted(() => {
instance = new WangEditor(editor.value)
Object.assign(instance.config, {
zIndex: 9,
onchange: (html: string) => (content.value = html)
})
instance.create()
watchEffect(() =>
instance && props.disable ? instance.disable() : instance?.enable()
)
})
onBeforeUnmount(() => {
instance && instance.destroy()
instance = null
})
</script>
src/vueFormCreate/components/SvgIcon.vue
浏览文件 @ a1617cc1
......@@ -5,45 +5,35 @@
</svg>
</template>
<script lang="ts">
import { defineComponent, computed } from 'vue'
<script lang="ts" setup>
import { computed } from 'vue'
import * as utils from '../utils'
export default defineComponent({
name: 'SvgIcon',
props: {
iconClass: {
type: String,
required: true
},
className: {
type: String,
default: ''
}
const props = defineProps({
iconClass: {
type: String,
required: true
},
setup(props) {
const isExternal = computed(() => utils.isExternal(props.iconClass))
const iconName = computed(() => `#icon-${props.iconClass}`)
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`
} else {
return 'svg-icon'
}
})
const styleExternalIcon = computed(() => ({
mask: `url(${props.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
}))
className: {
type: String,
default: ''
}
})
return {
isExternal,
iconName,
svgClass,
styleExternalIcon
}
const isExternal = computed(() => utils.isExternal(props.iconClass))
const iconName = computed(() => `#icon-${props.iconClass}`)
const svgClass = computed(() => {
if (props.className) {
return `svg-icon ${props.className}`
} else {
return 'svg-icon'
}
})
const styleExternalIcon = computed(() => ({
mask: `url(${props.iconClass}) no-repeat 50% 50%`,
'-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
}))
</script>
<style lang="scss" scoped>
......
src/vueFormCreate/config/element.ts
浏览文件 @ a1617cc1
......@@ -16,9 +16,9 @@ export interface WidgetForm {
size: any
hideRequiredAsterisk: boolean
labelWidth: number
labelPosition: string
labelPosition: any
dbTableName: string
dbTableComment: string,
dbTableComment: string
formId: string
}
}
......@@ -49,7 +49,7 @@ export const widgetForm: WidgetForm = {
}
export const put = () => {
console.log('widgetForm', widgetForm);
}
export const basicComponents = [
......
src/vueFormCreate/core/element/ElCustomHeader.vue
浏览文件 @ a1617cc1
......@@ -34,15 +34,14 @@
</el-header>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
<script lang="ts" setup>
import SvgIcon from '../../components/SvgIcon.vue'
export default defineComponent({
name: 'CustomHeader',
components: {
SvgIcon
},
emits: ['uploadJson', 'clearable', 'preview', 'generateJson', 'generateCode']
})
const emits = defineEmits(['uploadJson', 'clearable', 'preview', 'generateJson', 'generateCode'])
</script>
<style lang="scss" scoped>
:deep(.el-icon) {
width: 2em;
}
</style>
src/vueFormCreate/core/element/ElFormConfig.vue
浏览文件 @ a1617cc1
......@@ -37,39 +37,31 @@
</div>
</template>
<script lang="ts">
<script lang="ts" setup>
import { WidgetForm } from '../../config/element'
import { element } from '../../config'
import { defineComponent, PropType, ref, watch } from 'vue'
import { PropType, ref, watch } from 'vue'
export default defineComponent({
name: 'ElFormConfig',
props: {
config: {
type: Object as PropType<WidgetForm['config']>,
required: true
}
},
emits: ['update:config'],
setup(props, context) {
const data = ref(props.config)
watch(data, () => {
context.emit('update:config', data)
})
const state = ref<any>({
widgetForm: element.widgetForm
})
const props = defineProps({
config: {
type: Object as PropType<WidgetForm['config']>,
required: true
}
})
const emits = defineEmits(['update:config'])
const data = ref(props.config)
// 编辑时更新数据
const updataNewData = (value: any) => data.value = value.config
watch(data, () => {
emits('update:config', data)
})
const state = ref<any>({
widgetForm: element.widgetForm
})
// 编辑时更新数据
const updataNewData = (value: any) => data.value = value.config
return {
data,
state,
updataNewData
}
}
defineExpose({
updataNewData
})
</script>
src/vueFormCreate/core/element/ElGenerateForm.vue
浏览文件 @ a1617cc1
<template>
<div class="fc-style" style="padding: 20px;">
<el-form ref="generateForm" label-suffix=":" :model="model" :rules="rules" :size="widgetForm.config.size"
:label-position="widgetForm.config.labelPosition" :label-width="`${widgetForm.config.labelWidth}px`"
:hide-required-asterisk="widgetForm.config.hideRequiredAsterisk">
<template v-for="(element, index) of widgetForm.list">
<el-form ref="generateForm" label-suffix=":" :model="state.model" :rules="state.rules"
:size="state.widgetForm.config.size" :label-position="state.widgetForm.config.labelPosition"
:label-width="`${state.widgetForm.config.labelWidth}px`"
:hide-required-asterisk="state.widgetForm.config.hideRequiredAsterisk">
<template v-for="(element, index) of state.widgetForm.list">
<template v-if="element.type === 'grid'">
<el-row type="flex" v-if="element.key" :key="element.key" :gutter="element.options.gutter ?? 0"
:justify="element.options.justify" :align="element.options.align">
<el-col v-for="(col, colIndex) of element.columns" :key="colIndex" :span="col.span ?? 0">
<ElGenerateFormItem v-for="colItem of col.list" :model="model" :key="colItem.key" :element="colItem"
<ElGenerateFormItem v-for="colItem of col.list" :model="state.model" :key="colItem.key" :element="colItem"
:config="data.config" :disabled="disabled" />
</el-col>
</el-row>
</template>
<ElGenerateFormItem v-else :model="model" :key="element.key" :element="widgetForm.list[index]"
<ElGenerateFormItem v-else :model="state.model" :key="element.key" :element="state.widgetForm.list[index]"
:config="data.config" :disabled="disabled" />
</template>
</el-form>
</div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs, watch } from 'vue'
<script lang="ts" setup>
import { onMounted, reactive, toRefs, watch } from 'vue'
import { ElMessage } from 'element-plus'
import ElGenerateFormItem from './ElGenerateFormItem.vue'
import { element } from '../../config'
export default defineComponent({
name: 'ElGenerateForm',
components: {
ElGenerateFormItem
const props = defineProps({
data: {
type: Object,
default: element.widgetForm
},
props: {
data: {
type: Object,
default: element.widgetForm
},
value: {
type: Object
},
disabled: {
type: Boolean,
default: false
}
value: {
type: Object
},
setup(props) {
const state = reactive({
generateForm: null as any,
model: {} as any,
rules: {} as any,
widgetForm:
(props.data && JSON.parse(JSON.stringify(props.data))) ??
element.widgetForm
})
const generateModel = (list: any[]) => {
for (let index = 0; index < list.length; index++) {
const model = list[index].model
if (!model) {
return
}
if (list[index].type === 'grid') {
list[index].columns.forEach((col: any) => generateModel(col.list))
} else {
if (props.value && Object.keys(props.value).includes(model)) {
state.model[model] = props.value[model]
} else {
state.model[model] = list[index].options.defaultValue
}
disabled: {
type: Boolean,
default: false
}
})
state.rules[model] = list[index].options.rules
}
const state = reactive({
generateForm: null as any,
model: {} as any,
rules: {} as any,
widgetForm:
(props.data && JSON.parse(JSON.stringify(props.data))) ??
element.widgetForm
})
const generateModel = (list: any[]) => {
for (let index = 0; index < list.length; index++) {
const model = list[index].model
if (!model) {
return
}
if (list[index].type === 'grid') {
list[index].columns.forEach((col: any) => generateModel(col.list))
} else {
if (props.value && Object.keys(props.value).includes(model)) {
state.model[model] = props.value[model]
} else {
state.model[model] = list[index].options.defaultValue
}
state.rules[model] = list[index].options.rules
}
}
}
const generateOptions = (list: any[]) => {
list.forEach(item => {
if (item.type === 'grid') {
item.columns.forEach((col: any) => generateOptions(col.list))
} else {
if (item.options.remote && item.options.remoteFunc) {
fetch(item.options.remoteFunc)
.then(resp => resp.json())
.then(json => {
if (json instanceof Array) {
item.options.remoteOptions = json.map(data => ({
label: data[item.options.props.label],
value: data[item.options.props.value],
children: data[item.options.props.children]
}))
}
})
}
}
})
const generateOptions = (list: any[]) => {
list.forEach(item => {
if (item.type === 'grid') {
item.columns.forEach((col: any) => generateOptions(col.list))
} else {
if (item.options.remote && item.options.remoteFunc) {
fetch(item.options.remoteFunc)
.then(resp => resp.json())
.then(json => {
if (json instanceof Array) {
item.options.remoteOptions = json.map(data => ({
label: data[item.options.props.label],
value: data[item.options.props.value],
children: data[item.options.props.children]
}))
}
})
}
}
})
}
watch(
() => props.data,
val => {
state.widgetForm =
(val && JSON.parse(JSON.stringify(val))) ?? element.widgetForm
state.model = {}
state.rules = {}
generateModel(state.widgetForm.list)
generateOptions(state.widgetForm.list)
},
{ deep: true, immediate: true }
)
watch(
() => props.data,
val => {
state.widgetForm =
(val && JSON.parse(JSON.stringify(val))) ?? element.widgetForm
state.model = {}
state.rules = {}
generateModel(state.widgetForm.list)
generateOptions(state.widgetForm.list)
},
{ deep: true, immediate: true }
)
onMounted(() => {
generateModel(state.widgetForm?.list ?? [])
generateOptions(state.widgetForm?.list ?? [])
})
onMounted(() => {
generateModel(state.widgetForm?.list ?? [])
generateOptions(state.widgetForm?.list ?? [])
})
const getData = () => {
return new Promise((resolve, reject) => {
state.generateForm
.validate()
.then((validate: boolean) => {
if (validate) {
// console.log('成功', state.generateForm);
resolve(state.model)
} else {
// console.log('失败');
ElMessage.error('验证失败')
}
})
.catch((error: Error) => {
reject(error)
})
const getData = () => {
return new Promise((resolve, reject) => {
state.generateForm
.validate()
.then((validate: boolean) => {
if (validate) {
// console.log('成功', state.generateForm);
resolve(state.model)
} else {
// console.log('失败');
ElMessage.error('验证失败')
}
})
}
.catch((error: Error) => {
reject(error)
})
})
}
const reset = () => {
state.generateForm.resetFields()
}
const reset = () => {
state.generateForm.resetFields()
}
return {
...toRefs(state),
getData,
reset
}
}
defineExpose({
...toRefs(state),
getData,
reset
})
</script>
src/vueFormCreate/core/element/ElWidgetConfig.vue
浏览文件 @ a1617cc1
......@@ -402,115 +402,95 @@
</el-form>
</template>
<script lang="ts">
import { defineComponent, ref, watch, reactive } from 'vue'
<script lang="ts" setup>
import { ref, watch, reactive } from 'vue'
import Draggable from 'vuedraggable'
import SvgIcon from '../../components/SvgIcon.vue'
import type { FormInstance, FormRules } from 'element-plus'
export default defineComponent({
name: 'ElWidgetConfig',
components: {
Draggable,
SvgIcon
},
props: {
select: {
type: Object
}
},
emits: ['update:select'],
setup(props, context) {
const add = async (formEl: FormInstance | undefined) => {
if (!formEl) return
console.log('sda');
await formEl.validate((valid, fields) => {
if (valid) {
console.log('校验通过');
} else {
console.log('fields', fields);
}
})
}
const data = ref<any>(props.select)
const widgetConfigRef = ref<FormInstance>()
const rules = reactive<FormRules>({
model: [{ required: true, message: '字段标识不为空', trigger: 'blur' }],
dbFieldName: [{ required: true, message: '表字段名称不为空', trigger: 'blur' }],
dbFieldComment: [{ required: true, message: '表字段注释不为空', trigger: 'blur' }]
})
watch(
() => props.select,
(val) => (data.value = val)
)
watch(data, (val) => context.emit('update:select', val), { deep: true })
const hasKey = (key: string) =>
Object.keys(data.value.options).includes(key)
const handleInsertColumn = () => {
data.value.columns.push({
span: 0,
list: []
})
}
const props = defineProps({
select: {
type: Object
}
})
const handleInsertOption = () => {
const index = data.value.options.options.length + 1
data.value.options.options.push({
label: `Option ${index}`,
value: `Option ${index}`
})
}
const emits = defineEmits(['update:select'])
const handleOptionsRemove = (index: number) => {
if (data.value.type === 'grid') {
data.value.columns.splice(index, 1)
} else {
data.value.options.options.splice(index, 1)
}
}
const add = async (formEl: FormInstance | undefined) => {
if (!formEl) return
console.log('sda');
await formEl.validate((valid, fields) => {
if (valid) {
console.log('校验通过');
} else {
console.log('fields', fields);
const handleSliderModeChange = (checked: boolean) => {
checked
? (data.value.options.defaultValue = [10, 90])
: (data.value.options.defaultValue = 0)
}
})
}
const data = ref<any>(props.select)
const widgetConfigRef = ref<FormInstance>()
const rules = reactive<FormRules>({
model: [{ required: true, message: '字段标识不为空', trigger: 'blur' }],
dbFieldName: [{ required: true, message: '表字段名称不为空', trigger: 'blur' }],
dbFieldComment: [{ required: true, message: '表字段注释不为空', trigger: 'blur' }]
})
watch(
() => props.select,
(val) => (data.value = val)
)
watch(data, (val) => emits('update:select', val), { deep: true })
const hasKey = (key: string) =>
Object.keys(data.value.options).includes(key)
const handleInsertColumn = () => {
data.value.columns.push({
span: 0,
list: []
})
}
const handleInsertOption = () => {
const index = data.value.options.options.length + 1
data.value.options.options.push({
label: `Option ${index}`,
value: `Option ${index}`
})
}
const handleOptionsRemove = (index: number) => {
if (data.value.type === 'grid') {
data.value.columns.splice(index, 1)
} else {
data.value.options.options.splice(index, 1)
}
}
const handleSelectModeChange = (val: boolean) => {
if (data.value.type === 'img-upload') {
return
}
if (val) {
if (data.value.options.defaultValue) {
if (!(data.value.options.defaultValue instanceof Array)) {
data.value.options.defaultValue = [data.value.options.defaultValue]
}
} else {
data.value.options.defaultValue = []
}
} else {
data.value.options.defaultValue.length
? (data.value.options.defaultValue =
data.value.options.defaultValue[0])
: (data.value.options.defaultValue = null)
}
}
const handleSliderModeChange = (checked: boolean) => {
checked
? (data.value.options.defaultValue = [10, 90])
: (data.value.options.defaultValue = 0)
}
return {
data,
rules,
widgetConfigRef,
hasKey,
handleInsertColumn,
handleInsertOption,
handleOptionsRemove,
handleSliderModeChange,
handleSelectModeChange,
add
const handleSelectModeChange = (val: boolean) => {
if (data.value.type === 'img-upload') {
return
}
if (val) {
if (data.value.options.defaultValue) {
if (!(data.value.options.defaultValue instanceof Array)) {
data.value.options.defaultValue = [data.value.options.defaultValue]
}
} else {
data.value.options.defaultValue = []
}
} else {
data.value.options.defaultValue.length
? (data.value.options.defaultValue =
data.value.options.defaultValue[0])
: (data.value.options.defaultValue = null)
}
})
}
</script>
src/vueFormCreate/index.ts
浏览文件 @ a1617cc1
import { App } from 'vue'
import ElDesignForm from './core/element/ElDesignForm.vue'
import ElDesignForm from './core/element/ElDesignForm.vue' // 主页面
import ElGenerateForm from './core/element/ElGenerateForm.vue'
import Icons from './icons'
import './styles/index.styl'
......@@ -32,5 +32,5 @@ export {
export default {
install,
ElDesignForm,
ElGenerateForm
}
ElGenerateForm,
}
\ No newline at end of file
vite.config.ts
浏览文件 @ a1617cc1
......@@ -122,6 +122,7 @@ export default ({ command, mode }) => {
},
},
build: {
minify: 'terser',
// 分块打包配置
chunkSizeWarningLimit: 1500, // 分块打包，分解块，将大块分解成更小的块
rollupOptions: {
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论