crud编辑添加表单增加disabled属性,增加系统参数页面
This commit is contained in:
@@ -1,9 +1,20 @@
|
||||
<template>
|
||||
<!-- drawer -->
|
||||
<template v-if="modalConfig.component === 'drawer'">
|
||||
<el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
|
||||
<el-drawer
|
||||
v-model="modalVisible"
|
||||
:append-to-body="true"
|
||||
v-bind="modalConfig.drawer"
|
||||
@close="handleCloseModal"
|
||||
>
|
||||
<!-- 表单 -->
|
||||
<el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-width="auto"
|
||||
v-bind="modalConfig.form"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-col v-show="!item.hidden" v-bind="item.col">
|
||||
@@ -12,7 +23,12 @@
|
||||
<template v-if="item.tips" #label>
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
@@ -76,7 +92,12 @@
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -97,13 +118,26 @@
|
||||
</template>
|
||||
<!-- dialog -->
|
||||
<template v-else>
|
||||
<el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
|
||||
v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
|
||||
<el-dialog
|
||||
v-model="modalVisible"
|
||||
:align-center="true"
|
||||
:append-to-body="true"
|
||||
width="70vw"
|
||||
v-bind="modalConfig.dialog"
|
||||
style="padding-right: 0"
|
||||
@close="handleCloseModal"
|
||||
>
|
||||
<!-- 滚动 -->
|
||||
<el-scrollbar max-height="60vh">
|
||||
<!-- 表单 -->
|
||||
<el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
|
||||
style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
|
||||
<el-form
|
||||
ref="formRef"
|
||||
label-width="auto"
|
||||
v-bind="modalConfig.form"
|
||||
style="padding-right: var(--el-dialog-padding-primary)"
|
||||
:model="formData"
|
||||
:rules="formRules"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<template v-for="item in formItems" :key="item.prop">
|
||||
<el-col v-show="!item.hidden" v-bind="item.col">
|
||||
@@ -112,7 +146,12 @@
|
||||
<template v-if="item.tips" #label>
|
||||
<span>
|
||||
{{ item.label }}
|
||||
<el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
|
||||
<el-tooltip
|
||||
placement="bottom"
|
||||
effect="light"
|
||||
:content="item.tips"
|
||||
:raw-content="true"
|
||||
>
|
||||
<el-icon style="vertical-align: -0.15em" size="16">
|
||||
<QuestionFilled />
|
||||
</el-icon>
|
||||
@@ -121,7 +160,11 @@
|
||||
</template>
|
||||
<!-- Input 输入框 -->
|
||||
<template v-if="item.type === 'input' || item.type === undefined">
|
||||
<el-input v-model="formData[item.prop]" v-bind="item.attrs" />
|
||||
<el-input
|
||||
v-model="formData[item.prop]"
|
||||
v-bind="item.attrs"
|
||||
:disabled="item.disabled"
|
||||
/>
|
||||
</template>
|
||||
<!-- textarea 输入框 -->
|
||||
<template v-if="item.type === 'textarea'">
|
||||
@@ -179,8 +222,12 @@
|
||||
</template>
|
||||
<!-- 自定义 -->
|
||||
<template v-else-if="item.type === 'custom'">
|
||||
<slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
|
||||
:attrs="item.attrs" />
|
||||
<slot
|
||||
:name="item.slotName ?? item.prop"
|
||||
:prop="item.prop"
|
||||
:formData="formData"
|
||||
:attrs="item.attrs"
|
||||
/>
|
||||
</template>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
@@ -213,7 +260,6 @@ const props = defineProps<{
|
||||
const emit = defineEmits<{
|
||||
submitClick: [];
|
||||
}>();
|
||||
console.log(props.modalConfig, '全部')
|
||||
const pk = props.modalConfig.pk ?? "id";
|
||||
const modalVisible = ref(false);
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
Reference in New Issue
Block a user