178 lines
6.3 KiB
Vue
178 lines
6.3 KiB
Vue
<template>
|
|
<section class="panel">
|
|
<el-scrollbar>
|
|
<el-tabs v-model="activeName" stretch>
|
|
<el-tab-pane label="组件属性" name="field">
|
|
<el-form v-model="fForm" label-width="90px">
|
|
<el-form-item v-if="fForm.name !== 'button' && fForm.name !== 'layout'" label="字段名" prop="field_name">
|
|
<el-input v-model="fForm.field_name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="fForm.name !== 'layout'" label="标题" prop="title">
|
|
<el-input v-model="fForm.title"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="fForm.name !== 'button' && fForm.name !== 'layout'" label="默认值" prop="value">
|
|
<el-input v-model="fForm.value"></el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="fForm.span !== undefined" label="栅格列数" prop="span">
|
|
<el-slider v-model="fForm.span" :min="1" :max="24"/>
|
|
</el-form-item>
|
|
<template v-for="item in fieldEditors[fForm.name] || []" :key="item.key">
|
|
<el-form-item :label="item.label">
|
|
<el-input
|
|
v-if="item.type === 'input'"
|
|
:model-value="getByPath(fForm, item.key)"
|
|
@input="val => setByPath(fForm, item.key, val)"
|
|
clearable
|
|
/>
|
|
<el-input
|
|
v-else-if="item.type === 'number'"
|
|
type="number"
|
|
:model-value="getByPath(fForm, item.key)"
|
|
@input="val => setByPath(fForm, item.key, Number(val))"
|
|
/>
|
|
<el-switch
|
|
v-else-if="item.type === 'switch'"
|
|
:model-value="getByPath(fForm, item.key)"
|
|
@change="val => setByPath(fForm, item.key, val)"
|
|
/>
|
|
<el-color-picker v-else-if="item.type === 'color'" show-alpha
|
|
:model-value="getByPath(fForm, item.key)"
|
|
@change="val => setByPath(fForm, item.key, val)"/>
|
|
<el-radio-group v-else-if="item.type === 'radio'"
|
|
:model-value="getByPath(fForm, item.key)"
|
|
@change="val => setByPath(fForm, item.key, val)">
|
|
<el-radio-button v-for="op in item.options" :key="op.value"
|
|
:value="op.value">{{ op.label }}
|
|
</el-radio-button>
|
|
</el-radio-group>
|
|
<el-select v-else-if="item.type === 'select'" :model-value="getByPath(fForm, item.key)"
|
|
@change="val => setByPath(fForm, item.key, val)">
|
|
<el-option v-for="op in item.options" :key="op.value" :value="op.value"
|
|
:label="op.label">
|
|
</el-option>
|
|
</el-select>
|
|
<pi-icon
|
|
v-else-if="item.type === 'icon'"
|
|
:model-value="getByPath(fForm, item.key)"
|
|
@update:modelValue="val => setByPath(fForm, item.key, val)"
|
|
/>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item label="是否必填" v-if="fForm.required !== undefined">
|
|
<el-switch v-model="fForm.required"/>
|
|
</el-form-item>
|
|
<template v-if="fForm.options !== undefined">
|
|
<el-divider>选项</el-divider>
|
|
<pi-draggable v-model="fForm.options" item-key="label" :template="{label:'', value:''}">
|
|
<template #default="scope">
|
|
<div style="display:flex;">
|
|
<el-input v-model="scope.element.label" placeholder="label"/>
|
|
<el-input v-model="scope.element.value" placeholder="value"/>
|
|
</div>
|
|
</template>
|
|
</pi-draggable>
|
|
</template>
|
|
<template v-if="fForm.name !== 'button' && fForm.name !== 'layout'">
|
|
<el-divider>正则校验</el-divider>
|
|
<pi-draggable v-model="fForm.rules" item-key="regex" :template="{regex:'',message:''}">
|
|
<template #default="scope">
|
|
<el-form-item label="表达式">
|
|
<el-input v-model="scope.element.regex"/>
|
|
</el-form-item>
|
|
<el-form-item label="错误提示">
|
|
<el-input v-model="scope.element.message"/>
|
|
</el-form-item>
|
|
</template>
|
|
</pi-draggable>
|
|
</template>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
<el-tab-pane label="表单属性" name="form">
|
|
<el-form v-model="cForm" label-width="90px">
|
|
<el-form-item label="表单名称" prop="ref">
|
|
<el-input v-model="cForm.ref"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="表单模型" prop="model">
|
|
<el-input v-model="cForm.model"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="校验模型" prop="rules">
|
|
<el-input v-model="cForm.rules"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="表单尺寸" prop="size">
|
|
<el-radio-group v-model="cForm.size">
|
|
<el-radio-button value="large">较大</el-radio-button>
|
|
<el-radio-button value="default">默认</el-radio-button>
|
|
<el-radio-button value="small">较小</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="标签对齐" prop="labelPosition">
|
|
<el-radio-group v-model="cForm.labelPosition">
|
|
<el-radio-button value="left">左对齐</el-radio-button>
|
|
<el-radio-button value="right">右对齐</el-radio-button>
|
|
<el-radio-button value="top">顶部对齐</el-radio-button>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="标签宽度" prop="labelWidth">
|
|
<el-input-number v-model="cForm.labelWidth"/>
|
|
</el-form-item>
|
|
<el-form-item label="禁用表单" prop="disabled">
|
|
<el-switch v-model="cForm.disabled"/>
|
|
</el-form-item>
|
|
<el-form-item prop="act">
|
|
<el-button type="primary" @click="emit('save')">暂存</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</el-tab-pane>
|
|
</el-tabs>
|
|
</el-scrollbar>
|
|
</section>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {computed, ref} from "vue";
|
|
import piIcon from "@/components/piIcon"
|
|
import piDraggable from "@/components/piDraggable"
|
|
import {fieldEditors, getByPath, setByPath} from "./config"
|
|
|
|
const props = defineProps({
|
|
curField: {type: Object, default: {}},
|
|
config: {type: Object, default: {}}
|
|
})
|
|
const emit = defineEmits(['update:modelValue', 'save'])
|
|
let activeName = ref("field")
|
|
let cForm = computed({
|
|
get() {
|
|
return props.config
|
|
},
|
|
set(value) {
|
|
this.$emit('update:modelValue', value)
|
|
}
|
|
})
|
|
let fForm = computed({
|
|
get() {
|
|
return props.curField
|
|
},
|
|
set(value) {
|
|
this.$emit('update:modelValue', value)
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.panel {
|
|
width: 350px
|
|
}
|
|
|
|
:deep(.el-scrollbar__bar) {
|
|
display: none !important;
|
|
}
|
|
|
|
:deep(.el-scrollbar__wrap) {
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
:deep(.el-scrollbar__wrap::-webkit-scrollbar) {
|
|
display: none !important;
|
|
}
|
|
</style>
|