|
|
@@ -37,34 +37,39 @@ |
|
|
|
<el-dialog v-model="dialogFormVisible" :title="`${title}`"> |
|
|
|
<!-- 是否自定义Dialog --> |
|
|
|
<div v-if="tableFrom.customDialog"> |
|
|
|
<slot name="search" :searchCondition="searchCondition" /> |
|
|
|
</div> |
|
|
|
<div v-else> |
|
|
|
<!-- 系统内容 --> |
|
|
|
<el-form ref="ruleFormRef" :rules="rules" :model="form"> |
|
|
|
<el-form-item v-for="(item,index) in tableFrom.field" :label="item.label" :prop="item.prop" |
|
|
|
:label-width="formLabelWidth"> |
|
|
|
<!-- 输入框 --> |
|
|
|
<div style="width: 100%;" v-if="item.form.type === 'input'"> |
|
|
|
<el-input v-model="form[item.prop]" :type="item.itemType" |
|
|
|
:placeholder="item.form.placeholder" /> |
|
|
|
</div> |
|
|
|
<!-- 选择框 --> |
|
|
|
<div style="width: 100%;" v-else-if="item.form.type === 'select'"> |
|
|
|
<el-select style="width: 100%;" v-model="form[item.prop]" |
|
|
|
:placeholder="item.form.placeholder"> |
|
|
|
<el-option v-for="(itemData,index) in item.form.listData" :label="itemData.label" |
|
|
|
:value="itemData.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<!-- 日期框 --> |
|
|
|
<div style="width: 100%;" v-else-if="item.form.type === 'date'"> |
|
|
|
<el-date-picker style="width: 100%;" v-model="form[item.prop]" |
|
|
|
:value-format="item.form.valueFormat" :type="item.form.itemType" |
|
|
|
:placeholder="item.form.placeholder" /> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
|
|
|
|
</el-form> |
|
|
|
|
|
|
|
</div> |
|
|
|
<!-- 系统内容 --> |
|
|
|
<el-form ref="ruleFormRef" :rules="rules" :model="form"> |
|
|
|
<el-form-item v-for="(item,index) in tableFrom.field" :label="item.label" :prop="item.prop" |
|
|
|
:label-width="formLabelWidth"> |
|
|
|
<!-- 输入框 --> |
|
|
|
<div style="width: 100%;" v-if="item.form.type === 'input'"> |
|
|
|
<el-input v-model="form[item.prop]" :type="item.itemType" |
|
|
|
:placeholder="item.form.placeholder" /> |
|
|
|
</div> |
|
|
|
<!-- 选择框 --> |
|
|
|
<div style="width: 100%;" v-else-if="item.form.type === 'select'"> |
|
|
|
<el-select style="width: 100%;" v-model="form[item.prop]" :placeholder="item.form.placeholder"> |
|
|
|
<el-option v-for="(itemData,index) in item.form.listData" :label="itemData.label" |
|
|
|
:value="itemData.value" /> |
|
|
|
</el-select> |
|
|
|
</div> |
|
|
|
<!-- 日期框 --> |
|
|
|
<div style="width: 100%;" v-else-if="item.form.type === 'date'"> |
|
|
|
<el-date-picker style="width: 100%;" v-model="form[item.prop]" |
|
|
|
:value-format="item.form.valueFormat" :type="item.form.itemType" |
|
|
|
:placeholder="item.form.placeholder" /> |
|
|
|
</div> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
|
|
|
|
<template #footer> |
|
|
|
<template v-if="!tableFrom.customDialog" #footer> |
|
|
|
<span class="dialog-footer"> |
|
|
|
<el-button @click="cancel">取消</el-button> |
|
|
|
<el-button type="primary" @click="affirm(ruleFormRef)">提交</el-button> |
|
|
@@ -86,7 +91,6 @@ |
|
|
|
|
|
|
|
// 声明事件 |
|
|
|
const emit = defineEmits(['add', 'remove', 'refresh', 'edit', 'search', 'submit', 'handleEdit', 'handleDelete']) |
|
|
|
|
|
|
|
// 声明props |
|
|
|
const props = defineProps({ |
|
|
|
homeData: { //表单配置 |
|
|
@@ -114,7 +118,7 @@ |
|
|
|
const testData = ref(props.tableData) //表单数据 |
|
|
|
const visible = ref(false) //删除提示框是否显示 |
|
|
|
const dialogFormVisible = ref(false) //表单弹框是否显示 |
|
|
|
const formLabelWidth = '80px' //默认表单宽度 |
|
|
|
const formLabelWidth = '100px' //默认表单宽度 |
|
|
|
const title = ref('添加') //表单标题 |
|
|
|
const DStart = ref(true) //删除按钮状态 |
|
|
|
const EStart = ref(true) //编辑按钮状态 |