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;
   width: 100%;
    // width: 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>