新增编辑共用弹出框组件（vue-elementui）
新增编辑共用弹出框组件
<template>
<div>
<FormVue ref="form" v-loading="loadingAdd" :form-data="formData" :form="form" class="formMain" />
<span slot="footer" class="dialog-footer">
<el-button size="small" @click="cancel()">取 消el-button>
<el-button type="primary" size="small" @click="handleDialogConfirm()">确认el-button>
span>
div>
template>
<script>
import FormVue from '@/components/FormVue'
import { updateResident, addResident, listUserProperty } from '@/api/CommunityMag/community'
import { getDictVal } from '@/api/system/logininfor'
export default {
name: 'NewDialog',
components: { FormVue },
props: {
visible: { type: Boolean, required: true },
edit: { type: Boolean, required: true },
editInfo: { type: Object, required: true }
},
data() {
return {
userId: this.$store.getters.id,
property: [],
dialogVisible: this.visible,
isEdit: this.edit,
loadingAdd: false,
statusOptions: [],
form: {
community: undefined,
buildingId: undefined,
unitId: undefined,
roomNo: undefined,
houseArea: undefined,
residentName: undefined,
mobilePhone: undefined,
certificateNo: undefined,
residentIdentity: undefined
},
communityOptions: [],
formData: {
labelWidth: '100px', inline: false, labelPosition: 'right', size: 'small',
formItem: [
{ type: 'cascader', label: '小区名称', prop: 'propertyName', size: 'small', isDisabled: this.edit, multiple: false, tip: '', value: '', options: [] },
{ type: 'text', label: '业主姓名', prop: 'residentName', size: 'small', isDisabled: false, required: true },
{ type: 'text', label: '手机号', prop: 'mobilePhone', size: 'small', isDisabled: false, required: true },
{ type: 'text', label: '证件号', prop: 'certificateNo', size: 'small', isDisabled: false, required: true },
{ type: 'select', label: '住户身份', prop: 'residentIdentity', size: 'small', isDisabled: false, multiple: false, tip: '', value: '', options: [], required: true }
]
}
}
},
created() {
this.isEditData()
},
methods: {
isEditData() {
this.getOperationStatusDict()
this.getCommunity()
if (this.isEdit) {
const edit = this.editInfo
this.property.push(edit.communityId)
this.property.push(edit.buildingId)
this.property.push(edit.unitId)
this.property.push(edit.roomId)
this.editInfo.propertyName = this.property
this.editInfo.residentIdentity = this.editInfo.identity + ''
this.form = Object.assign({}, this.editInfo)
}
},
// 获取回显字典
getOperationStatusDict() {
getDictVal('tb_resident_info', 'resident_identity').then(res => {
this.statusOptions = this.selectDictLabels(res.data || [])
})
},
// 小区选项
getCommunity() {
this.loadingAdd = true
listUserProperty(this.userId).then(response => {
const merchant = response.data || []
const that = this
merchant.map(function(val) {
const children = val.children || []
children.map(function(params) {
that.communityOptions.push(params)
})
})
this.formData.formItem[0].options = this.casSelect(that.communityOptions || [])
this.formData.formItem[4].options = that.statusOptions
this.loadingAdd = false
})
},
casSelect(options) {
const that = this
if (options.length === 0) { return [] }
return options.map(function(params) {
if (params.level === 5) { return { label: params.name, value: params.id, disabled: params.disable } }
if (params.children === undefined || params.children.length === 0) { return { label: params.name, value: params.id, disabled: true } }
return { label: params.name, value: params.id, children: that.casSelect(params.children) }
})
},
// 对话框按确定键之后的方法
handleDialogConfirm() {
console.log(this.form)
if (this.isEdit) { // 更新资源数据（即编辑修改）
const resident = Object.assign({}, this.form)
resident.propertyName = undefined
updateResident(resident).then(response => {
if (response.code === 2000) {
this.$message({
message: response.message,
type: 'success'
})
this.$emit('getList')
this.cancel()
}
})
} else { // 插入一条资源数据（即添加）
const resident = Object.assign({}, this.form)
resident.propertyName = undefined
const property = {
userId: this.userId,
communityId: this.form.propertyName[0],
buildingId: this.form.propertyName[1],
unitId: this.form.propertyName[2],
roomId: this.form.propertyName[3],
data: JSON.stringify(resident)
}
addResident(property).then(response => {
if (response.code === 2000) {
this.$message({
message: response.message,
type: 'success'
})
this.$emit('getList')
this.cancel()
}
})
this.dialogVisible = false
}
},
// 按取消键后
cancel() {
this.$emit('update:visible', false)
}
}
}
script>
<style scoped>
.formMain{
height: 200px;
}
.dialog-footer{
display: flex;
justify-content: center;
/*height: 30px;*/
}
style>
（提示：不需要的方法可自行删掉）
在父组件中使用
html部分:
<el-dialog :title="isEdit?'编辑住户信息':'添加住户信息'" :visible.sync="dialogVisible" :edit.sync="isEdit" width="700px">
<new-dialog v-if="dialogVisible" :visible.sync="dialogVisible" :edit.sync="isEdit" :edit-info="editInfo" @getList="getList"/>
el-dialog>
js部分：
import newDialog from './newDialog'
export default {
components: { newDialog },
data() {
return {
isEdit: false,dialogVisible: false,editInfo: {}
}
},
methods:{
// 获取小区列表、表格信息
getList() {
this.loadingTable = true
this.searchData.userId = this.$store.getters.id
this.searchData.data.mobilePhone = this.searchData.mobilePhone
this.searchData.data.residentName = this.searchData.residentName
listResident(this.searchData).then((response) => {
const row = response.data.rows || []
this.list = row.map(function(val) {
val.identity = val.residentIdentity
if (val.residentIdentity !== undefined) {
val.residentIdentity = val.residentIdentity + 0 === 1 ? '住户' : '租户'
}
return val
})
this.total = response.data.total
this.loadingTable = false
this.loading = false
})
},
}
}
注意：
1、弹出框需要用到的FormVue（若想了解更多详情请戳这里vue-elementui表单再组件化）：
<template>
<el-form
ref="ruleForm"
class="demo-ruleForm"
:label-width="formData.labelWidth"
:model="dataForm"
:inline="formData.inline"
:rules="formData.rules"
:size="formData.size"
:label-position="formData.labelPosition"
>
<el-form-item
v-for="(item, index) in formData.formItem"
:key="index"
:label="item.label"
:prop="item.prop">
<el-input
v-if="item.type === 'text'"
v-model="dataForm[item.prop]"
:disabled="item.isDisabled"
:size="item.size"/>
<el-input
v-if="item.type === 'password'"
v-model="dataForm[item.prop]"
type="password"
:disabled="item.isDisabled"
/>
<el-radio-group
v-if="item.type==='radio'"
v-model="dataForm[item.prop]"
>
<el-radio
v-for="item in item.options"
:key="item.value"
:label="item.value"
>
{{ item.name }}
el-radio>
el-radio-group>
<el-radio-group
v-if="item.type==='radioButton'"
v-model="dataForm[item.prop]"
:disabled="item.isDisabled"
>
<el-radio-button
v-for="item in item.options"
:key="item.value"
:label="item.value"
>
{{ item.name }}
el-radio-button>
el-radio-group>
<el-checkbox-group
v-if="item.type==='checkbox'"
v-model="dataForm[item.prop]"
>
<el-checkbox
v-for="item in item.options"
:key="item.value"
:disabled="item.isDisabled"
:label="item.value"
>
{{item.name}}
el-checkbox>
el-checkbox-group>
<el-select
ref="selectForm"
v-if="item.type==='select'"
v-model="dataForm[item.prop]"
:multiple="item.multiple"
:value="item.tip"
collapse-tags
clearable
:disabled="item.isDisabled"
:placeholder="item.placeholder"
>
<el-option
v-for="val in item.options"
:key="val.value"
:label="val.label"
:value="val.value"
:disabled="val.isDisabled"
/>
el-select>
<el-cascader
v-if="item.type==='cascader'"
v-model="dataForm[item.prop]"
:options="item.options"
:disabled="item.isDisabled"
filterable
clearable
/>
<el-switch
v-if="item.type==='switch'"
v-model="dataForm[item.prop]"
/>
<el-date-picker
v-if="item.type==='date'"
v-model="dataForm[item.prop]"
type="date"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择日期"
/>
<el-time-picker
v-if="item.type==='time'"
v-model="dataForm[item.prop]"
placeholder="请选择时间"
/>
<el-date-picker
v-if="item.type==='dateTime'"
v-model="dataForm[item.prop]"
type="datetime"
placeholder="选择日期时间"
/>
<el-date-picker
v-if="item.type==='daterange'"
v-model="dataForm[item.prop]"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期" />
<el-date-picker
v-if="item.type==='datetimerange'"
v-model="dataForm[item.prop]"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
/>
<div v-if="item.type==='upload'">
<el-button @click="item.importTemplate()">下载模板el-button>
<el-upload
ref="upload"
:limit="1"
accept=".xlsx, .xls"
:headers="item.upload.headers"
:action="item.upload.url"
:http-request="item.handleFileUpload"
:auto-upload="false"
>
<el-button size="small">上传Excelel-button>
el-upload>
div>
el-form-item>
el-form>
template>
<script>
import { getToken } from '@/utils/auth'
export default {
props: {
formData: {
type: Object,
required: true
},
form: {
type: Object,
required: true
}
},
data() {
return {
dataForm: this.form,
value1: '',
fileList: [],
// 用户导入参数
upload: {
open: false, // 是否显示弹出层（用户导入）
title: '', // 弹出层标题（用户导入）
isUploading: false, // 是否禁用上传
updateSupport: 0, // 是否更新已经存在的用户数据
headers: { Authorization: getToken() }, // 设置上传的请求头部
url: process.env.VUE_APP_BASE_API + '/sys/user/import' // 上传的地址
}
}
},
watch: {
formWatch: function(val) {
this.dataForm = val
}
},
created() {
// console.log('qwwwww')
this.bindValue()
},
methods: {
bindValue() {
const obj = {}
this.formData.formItem.forEach((item, index) => {
// 这里不能写成this.form = obj 因为传递的不是值，而是引用，他们指向了同一个空间！
obj[item.prop] = item.value
})
}
}
}
script>
<style scoped>
.el-input--small{
width: 180px;
}
.el-button{
margin-right: 20px;
}
.el-form-item__content .upload-demo{
float: left;
}
.el-form-item__content .button{
float: left;
}
.el-form-item--small{
float:left;
}
.dialog-footer button{
float: left;
}
.demo-ruleForm{
height: 300px;
}
style>
2、格式：父组件中子组件要放在这里：
<template>
<div>
新增编辑共用弹出框组件
div>
template>