新增编辑共用弹出框组件（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>
<!--form表单再组件化，主要用于弹框-->

  <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">上传Excel</el-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>