新增编辑共用弹出框组件（vue |
您所在的位置：网站首页 › elementui框架弹框里选中表格 › 新增编辑共用弹出框组件（vue |
|
新增编辑共用弹出框组件
取 消
确认
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)
}
}
}
.formMain{
height: 200px;
}
.dialog-footer{
display: flex;
justify-content: center;
/*height: 30px;*/
}
（提示：不需要的方法可自行删掉） 在父组件中使用html部分: 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表单再组件化）： {{ item.name }} {{ item.name }} {{item.name}} 下载模板 上传Excel 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 }) } } } .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; }2、格式：父组件中子组件要放在这里： 新增编辑共用弹出框组件 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |