為什么要這么做,適用于在一個頁面邏輯比較多的時候,可以搞多個頁面,防止出錯
index頁面點擊解約按鈕,彈出框 進入jieyue.vue
核心代碼
<el-button
size="mini"
type="text"
icon="el-icon-edit"
v-if="scope.row.delFlag == 0"
@click="jieyue(scope.row)"
v-hasPermi="['sep:channel:edit']"
>解約</el-button>
<testDialog title="測試窗口" v-if="openDialog" ref="testDialog"/>
</div>
</template>
<script>
// 引用組件
import testDialog from "./jieyue.vue";
export default {
// 注冊組件
components: {testDialog},
name: "Channel",
data() {
return {
openDialog: false,
// 按鈕方法
jieyue() {
this.openDialog = true;
this.$nextTick(() => {
this.$refs.testDialog.init(2);
});
},
代碼截圖
jieyue.vue就是常規(guī)代碼了文章來源：http://www.zghlxwxcb.cn/news/detail-663618.html
<template>
<!-- 添加或修改個體戶渠道信息對話框 -->
<el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
<el-form ref="form" :model="form" :rules="rules" label-width="180px">
<!-- <el-form-item label="渠道編號" prop="channelNo">
<el-input v-model="form.channelNo" placeholder="請輸入渠道編號" />
</el-form-item>-->
<el-form-item label="渠道商名稱" prop="channelName">
<el-input v-model="form.channelName" placeholder="請輸入渠道商名稱" />
</el-form-item>
<!-- 做成一個下拉框選擇 -->
<el-form-item label="上級渠道" prop="parentId">
<!-- <el-input v-model="form.parentId" placeholder="請輸入個體戶父渠道ID" /> -->
<el-select v-model="form.parentId" clearable placeholder="請選擇上級渠道(無則不選)" >
<el-option v-for="item in channelOption"
:key="item.id"
:label="item.channelName"
:value="item.id">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="返傭收款公司名稱" prop="channelRebateName" >
<el-input v-model="form.channelRebateName" placeholder="請輸入渠道返傭收款公司名稱" />
</el-form-item>
<el-form-item label="返傭收款公司聯(lián)系人" prop="channelLinkname">
<el-input v-model="form.channelLinkname" placeholder="請輸入渠道返傭收款公司聯(lián)系人" />
</el-form-item>
<el-form-item label="返傭收款公司聯(lián)系電話" prop="channelLinkphone" >
<el-input v-model="form.channelLinkphone" placeholder="請輸入渠道返傭收款公司聯(lián)系電話" />
</el-form-item>
<el-form-item label="返傭收款公司聯(lián)系郵箱" prop="channelLinkmail" >
<el-input v-model="form.channelLinkmail" placeholder="請輸入渠道返傭收款公司聯(lián)系郵箱" />
</el-form-item>
<el-form-item label="返傭收款公司收款賬戶" prop="channelAccount" >
<el-input v-model="form.channelAccount" placeholder="請輸入渠道返傭收款公司收款賬戶" />
</el-form-item>
<el-form-item label="返傭收款公司開戶銀行" prop="channelBank" >
<el-input v-model="form.channelBank" placeholder="請輸入渠道返傭收款公司開戶銀行" />
</el-form-item>
<el-form-item label="返傭打款服務商名稱" prop="serviceId">
<el-select v-model="form.serviceId" placeholder="請選擇返傭打款服務商名稱" @change="chooseService($event)">
<el-option
v-for="item in servicesOptions"
:key="item.id"
:label="item.serviceName"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="客戶經(jīng)理" prop="salesManagerId">
<el-select v-model="form.salesManagerId" placeholder="請選擇客戶經(jīng)理" @change="chooseManager($event)">
<el-option
v-for="item in managerOptions"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitForm">確 定</el-button>
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import {
listChannel, getChannel, delChannel, addChannel, updateChannel,
deactivateAccount,
resetPassword,
getChannelSelection,
updateChannelBatch, addChannelUser, listChannelData
} from '@/api/sep/channel'
import { getSepEnterprise, updateSepEnterpriseData } from '@/api/sep/SepEnterprise'
import { listUser,changeUserStatus } from '@/api/system/user'
export default {
name: "testDialog",
data() {
return {
form: {},
//服務商list
servicesOptions:[],
//客戶經(jīng)理list
managerOptions:[],
channelOption:[],
// 表單校驗
rules: {
salesManagerId:[{ required: true, message: '客戶經(jīng)理不能為空', trigger: 'change' }],
serviceId:[{ required: true, message: '返傭打款服務商名稱不能為空', trigger: 'change' }],
channelBank:[{ required: true, message: '返傭收款公司開戶銀行不能為空', trigger: 'blur' }],
channelName:[{ required: true, message: '渠道商名稱不能為空', trigger: 'blur' }],
channelRebateName:[{ required: true, message: '返傭收款公司名稱不能為空', trigger: 'blur' }],
channelLinkname:[{ required: true, message: '聯(lián)系人不能為空', trigger: 'blur' }],
channelLinkmail:[{ required: true, message: '聯(lián)系郵箱不能為空', trigger: 'blur' }],
channelLinkphone: [
// 添加正則表達式 pattern: /^1[3|5|7|8|9]\d{9}$/，驗證手機號是否正確
{ required: true, message: '請輸入手機號', trigger: 'blur' },
// { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '請輸入正確的號碼格式', trigger: 'change' }
],
channelAccount: [
{ required: true, message: '請輸入銀行卡號', trigger: 'blur' },
// {pattern: /^([1-9])(\d{17})(\d|X)$/,message: "請輸入正確的銀行卡號",trigger: "change"}
],
},
// 彈出層標題
title: "",
// 是否顯示彈出層
open: false,
// 表單參數(shù)
bizform: {}
};
},
methods: {
// 窗口初始化方法，nextTick方法可以添加邏輯，如打開窗口時查詢數(shù)據(jù)填充
init(bizId) {
console.log("123")
this.open = true;
// this.$nextTick(() => {
// getById(bizId).then(response => {
// this.bizform = response.data;
// this.open = true;
// this.title = "修改業(yè)務";
// });
// });
},
// 取消按鈕
cancel() {
this.open = false;
this.reset();
},
submitForm: function () {
this.$refs["bizform"].validate(valid => {
if (valid) {
if (this.bizform.id != undefined) {
updateBizDefine(this.bizform).then(response => {
if (response.data) {
this.msgSuccess("修改成功");
this.open = false;
// 調(diào)用主頁面的getList方法刷新主頁面
this.$parent.getList();
} else {
this.msgError(response.resultMsg);
}
});
} else {
addBizDefine(this.bizform).then(response => {
if (response.data) {
this.msgSuccess("新增成功");
this.open = false;
// 調(diào)用主頁面的getList方法刷新主頁面
this.$parent.getList();
} else {
this.msgError(response.resultMsg);
}
});
}
}
});
}
}
};
</script>
參考博客文章來源地址http://www.zghlxwxcb.cn/news/detail-663618.html
到了這里，關(guān)于vue 彈出框 引入另一個vue頁面的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
