vue element 弹窗 新增修改 同一个Dialog展示

1.确定新增以及修改事件

注意：修改的时候需要把当前这一行的数据传递过去，做回显展示，并需要传递一个action标记，来判断是修改还是新增，默认不传为新增。

2.新增修改事件激活

注意：新增对象我们传递的两个参数，第一个是空对象，第二个为新增标记。并去触发修改事件。从图中我们可以看到新增的时候我们传的是空对象和新增标记，修改时我们传的是当前点击的这一条数据和修改标记。

3.解释修改事件内的this.addOrEditDialog对象

首先这些数据是我们使用弹窗组件，在data定义的

其次，弹窗组件的使用

我们定义一个自定义组件，组件的事件在下面解释。

把刚刚我们定义的data的数据绑定给自定义组件。

4.弹窗自定义组件

首先我们要定义一个props来接受父组件传递过来的数据（如下图所示）

5.传递数据的使用

如下图所示，首先我们初始化数据的时候，把上面props中detail中的当前点击的这一行数据拿到，默认赋值都为空，判断

传递过来的类型action，是新增的话，选用默认值，表单显示为空，如果点击的是修改，将数据赋值过去进行回显。

6.自定义组件dialog参数解释

如下图展示，visible是我们props传递过来的，是否展示此弹窗，默认不展示，title是标题，根据action标记来判断

来展示新增或者修改，@close是弹窗关闭事件，通过this.$emit来向父组件传递事件。

7.弹窗组件向父组件传递关闭保存事件

如下图所示，关闭和保存事件都需要把事件名称传递出去，注意，保存的时候，需要把表单内的信息也要传递出去。

8.接收传递的事件和参数

如下图所示，弹窗通过save传递的事件绑定新的事件，接收的参数通过param打印出来，以供我们使用。

通过action来判断点击的是新增的保存，还是修改的保存。

部分代码

 <!-- 编辑|新增 -->
    <DetailDialog
      v-if="addOrEditDialog.visible"
      :visible="addOrEditDialog.visible"
      :title="addOrEditDialog.title"
      :detail="addOrEditDialog.item"
      :action="addOrEditDialog.action"
      @close="closeAddOrEditDialog"
      @save="saveItem"
    />


      // 编辑|新增 弹框
      addOrEditDialog: {
        visible: false,
        title: '编辑|新增',
        item: {},
        action: 'add'
      },

  addItem() {
      console.log('添加')
      this.showAddOrEditDialog({}, 'add')
    },
     //关闭弹窗
    closeAddOrEditDialog() {
      this.addOrEditDialog.visible = false
    },
    /**
     * # 打开编辑窗口 - 新增活编辑
     */
            //吧当前数据 和action 标记传递过去
        <el-button
                  v-if="scope.row.orderStatus===0||scope.row.orderStatus===1"
                  type="text"
                  @click="showAddOrEditDialog(scope.row, 'edit')"
        >
    showAddOrEditDialog(item, action = 'add') {
      this.addOrEditDialog = {
        action,
        detail: item,
        item,
        visible: true,
        title: action === 'add' ? '创建工单' : '编辑'
      }
    },
    saveItem(param) {
      console.log('add edit', param)
      const {
        action = 'add',
        item
      } = this.addOrEditDialog
      switch (action) {
        case 'add':
          addWorkorder(param).then(res => {
            this.$message.success('添加成功！')
            this.closeAddOrEditDialog()
            this.getList()
          })
          break
        case 'edit':
          changeWorkorder({ orderId: item.orderId, ...param }).then(res => {
            this.$message.success('编辑成功！')
            this.closeAddOrEditDialog()
            this.getList()
          })
          break
        default:
          break
      }
    },

dialog组件

<template>
  <div class="dialog-page">
    <el-dialog
      :close-on-click-modal="false"
      width="665px"
      :visible="visible"
      :title="title"
      @close="close"
    >
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-row>
          <el-col :span="4"><div class="grid-content">  <el-form-item label="申请资源 :" /></div></el-col>
          <el-col
            :span="10"
          ><div class="grid-content">  <el-form-item label="模板" align="right" prop="templateId">
            <SelectPackage v-model="editForm.templateId" :selected-now="selectPackagNow" />
          </el-form-item></div></el-col>
          <el-col
            :span="10"
          ><div class="grid-content">
            <el-form-item label="镜像" prop="imageId">
              <SelectIso v-model="editForm.imageId" :selected-now="selectIsoNow" />
            </el-form-item></div></el-col>
        </el-row>
        <!--   <el-row>
          <el-col :span="4"><div class="grid-content">
          <el-form-item label="" /></div></el-col>
          <el-col
            :span="10"
          ><div class="grid-content">  <el-form-item label="网络" align="right">
          </el-form-item>
          </div></el-col>
          <el-col
            :span="10"
          ><div class="grid-content">  <el-form-item label="IP" align="right">
            <el-input v-model="editForm.name" clearable placeholder="IP" />
          </el-form-item></div></el-col>
        </el-row> -->

        <!-- 工单名称 -->
        <el-form-item label="工单名称" prop="orderName">
          <el-input v-model="editForm.orderName" clearable placeholder="工单名称" />
        </el-form-item>
        <!-- 申请理由 -->
        <el-form-item label="申请理由" prop="orderDescribe">
          <el-input v-model="editForm.orderDescribe" type="textarea" clearable placeholder="申请理由" />
        </el-form-item>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="info" @click="close">取 消</el-button>
        <el-button type="primary" @click="save">确 认</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>

import SelectIso from './SelectIso'
import SelectPackage from './SelectPackage'
export default {
  components: {
    SelectIso,
    SelectPackage
  },
  props: {
    visible: {
      default: false,
      required: true,
      type: Boolean
    },
    title: {
      default: '创建工单',
      type: String
    },
    detail: {
      type: Object,
      default() {
        return {}
      }
    },
    action: {
      type: String,
      default: 'add'
    }
  },
  data() {
    return {
      rules,
      height: 100,
      editForm: {
        orderDescribe: null,
        orderName: null,
        adUniqueToken: null,
        imageId: null,
        templateId: null
      },
      // 已选中的 镜像
      selectIsoNow: null,
      // 已选中的模板
      selectPackagNow: null
    }
  },

  created() {
    this.initData()
  },
  methods: {
    /**
     * @method initData
     * @description 初始化数据
     */
    initData() {
      this.initDict()
      this.initForm()
    },
    /**
     * # 初始化字典
     */
    initDict() {},
    initForm() {
      // 取出这一行的数据里的数据,填入表单中显示
      const {
        orderDescribe = null,
        orderName = null,
        imageId = null,
        image = null,
        templateId = null,
        template = null
      } =
        this.detail || {}
      switch (this.action) {
        case 'add':
          break
        case 'edit':
          this.editForm = {
            orderDescribe,
            orderName,
            imageId,
            templateId
          }
          break
        default:
          break
      }
    },
    close() {
      this.$emit('close')
    },
    save() {
      console.log('save', this.editForm)
      this.$refs['editForm'].validate((valid) => {
        if (valid) {
          this.$emit('save', {
            ...this.editForm
          })
        }
      })
    }
  }
}
</script>
<style lang="scss">
.dialog-page {
 .el-input--suffix .el-input__inner {
    /* background-color: red; */
   padding-right: 30px;
    100%;
    //  500px;
    height: 36px;
     background: #f7f7fa;
    border: 1px solid #d7d7d9;
    border-radius: 5px;
 }

  .el-form-item__label {
    padding: 0 2px;
    text-align: center;
  }
}

.el-row {
  // margin-bottom: 20px;
  margin-bottom: 10px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;

}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>