弹窗新增修改公用demo

index使用页面

html

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

js

import DetailDialog from "./syslogAddDetail";
  components: {
     DetailDialog
  },
 data() {
    return {
      // 编辑|新增 弹框
      addOrEditDialog: {
        visible: false,
        title: "编辑|新增",
        item: {},
        action: "add"
      },
    };
  },
methods: {
      // 新增
    add(){
      this.showAddOrEditDialog({}, "add");
    },
    closeAddOrEditDialog() {
      this.addOrEditDialog.visible = false;
    },
     // 打开编辑窗口 - 新增活编辑
    showAddOrEditDialog(item, action = "add") {
      this.addOrEditDialog = {
        action,
        detail: item,
        item,
        visible: true,
        title: action === "add" ? "新增" : "编辑"
      };
    },
    saveItem(param) {
     switch (action) {
        let addPoolParam = {}
        let editPoolParam = {}
        case "add":
        //   addSnatSet(addPoolParam)
        //     .then(res => {
        //       this.$message.success(res.msg);
        //       this.closeAddOrEditDialog();
        //       this.$refs.addoreditDialog.cancelLoad();
        //       this.getList();
        //     })
        //     .catch(() => {
        //       this.$refs.addoreditDialog.cancelLoad();
        //     });
          break;
        case "edit":
        // editSnatSet({ id: item.id, ...editPoolParam })
        //     .then(res => {
        //     this.$message.success(res.msg);
        //     this.closeAddOrEditDialog();
        //     this.$refs.addoreditDialog.cancelLoad();
        //     this.getList();
        //     })
        //     .catch(() => {
        //     this.$refs.addoreditDialog.cancelLoad();
        //     });
          break;
        default:
          break;
      }
    },
}

弹窗页面detail

<template>
  <!-- 新增弹窗 --> 
  <div class="main-wrapper">
    <el-dialog :close-on-click-modal="false" :visible="visible" :title="title" @close="close">
      <el-form
        ref="editForm"
        :rules="rules"
        :model="editForm"
        label-position="right"
        label-width="120px"
      >
         <!-- IP -->
        <el-form-item label="远端服务器IP" prop="ip">
          <el-input
            type="input"
            :rows="6"
            placeholder="请配置远端服务器IP"
            v-model="editForm.ip"
          ></el-input>
        </el-form-item>
        <!-- 端口 -->
        <el-form-item label="远端服务器端口" prop="port">
          <el-input v-model="editForm.port" class="input-el" clearable placeholder="请配置远端服务器端口" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="save">{{suretext}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      default: false,
      required: true,
      type: Boolean
    },
    title: {
      default: "新增",
      type: String
    },
    detail: {
      type: Object,
      default() {
        return {};
      }
    },
    action: {
      type: String,
      default: "add"
    }
  },
  data() {
    return {
      editForm:{
        ip:'',
        port:''
      },
      rules: {
        ip: [
          { required: true, message: "不能为空", trigger: ["blur"] }
        ],
        port: [
          { required: true, message: "不能为空", trigger: ["blur"] }
        ],
      },
      loading: false,
      suretext: "确 定",
    };
  },
  computed: {
    isDisabled() {
      return this.action === "edit";
    }
  },
  created() {
    this.initData();
  },
  methods: {
    //初始化数据
    initData() {
      console.log(this.detail, "xiugai");
      switch (this.action) {
        case "add":
          break;
        case "edit":
        //   this.editForm.ip = this.detail.ip;
        //   this.editForm.port = this.detail.port
          break;
        default:
          break;
      }
    },
    close() {
      this.$emit("close");
    },
    cancelLoad() {
      this.loading = false;
      this.suretext = "确 定";
    },
    save() {
      console.log("save", this.editForm);
      this.$refs["editForm"].validate(valid => {
        if (valid) {
          this.loading = true;
          this.suretext = "保存中...";
          this.$emit("save", {
            ...this.editForm
          });
        }
      });
    }
  }
};
</script>
<style lang="scss">
</style>