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>
标签:default,demo,detail,公用,break,add,editForm,action,弹窗
From: https://www.cnblogs.com/loveliang/p/16921370.html