vue 彈出框 引入另一個(gè)vue頁面的示例代碼
為什么要這么做,適用于在一個(gè)頁面邏輯比較多的時(shí)候,可以搞多個(gè)頁面,防止出錯(cuò)

index頁面點(diǎn)擊解約按鈕,彈出框 進(jìn)入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="測(cè)試窗口" v-if="openDialog" ref="testDialog"/>
</div>
</template>
<script>
// 引用組件
import testDialog from "./jieyue.vue";
export default {
// 注冊(cè)組件
components: {testDialog},
name: "Channel",
data() {
return {
openDialog: false,
// 按鈕方法
jieyue() {
this.openDialog = true;
this.$nextTick(() => {
this.$refs.testDialog.init(2);
});
},代碼截圖

jieyue.vue就是常規(guī)代碼了
<template>
<!-- 添加或修改個(gè)體戶渠道信息對(duì)話框 -->
<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="渠道編號(hào)" prop="channelNo">
<el-input v-model="form.channelNo" placeholder="請(qǐng)輸入渠道編號(hào)" />
</el-form-item>-->
<el-form-item label="渠道商名稱" prop="channelName">
<el-input v-model="form.channelName" placeholder="請(qǐng)輸入渠道商名稱" />
</el-form-item>
<!-- 做成一個(gè)下拉框選擇 -->
<el-form-item label="上級(jí)渠道" prop="parentId">
<!-- <el-input v-model="form.parentId" placeholder="請(qǐng)輸入個(gè)體戶父渠道ID" /> -->
<el-select v-model="form.parentId" clearable placeholder="請(qǐng)選擇上級(jí)渠道(無則不選)" >
<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="請(qǐng)輸入渠道返傭收款公司名稱" />
</el-form-item>
<el-form-item label="返傭收款公司聯(lián)系人" prop="channelLinkname">
<el-input v-model="form.channelLinkname" placeholder="請(qǐng)輸入渠道返傭收款公司聯(lián)系人" />
</el-form-item>
<el-form-item label="返傭收款公司聯(lián)系電話" prop="channelLinkphone" >
<el-input v-model="form.channelLinkphone" placeholder="請(qǐng)輸入渠道返傭收款公司聯(lián)系電話" />
</el-form-item>
<el-form-item label="返傭收款公司聯(lián)系郵箱" prop="channelLinkmail" >
<el-input v-model="form.channelLinkmail" placeholder="請(qǐng)輸入渠道返傭收款公司聯(lián)系郵箱" />
</el-form-item>
<el-form-item label="返傭收款公司收款賬戶" prop="channelAccount" >
<el-input v-model="form.channelAccount" placeholder="請(qǐng)輸入渠道返傭收款公司收款賬戶" />
</el-form-item>
<el-form-item label="返傭收款公司開戶銀行" prop="channelBank" >
<el-input v-model="form.channelBank" placeholder="請(qǐng)輸入渠道返傭收款公司開戶銀行" />
</el-form-item>
<el-form-item label="返傭打款服務(wù)商名稱" prop="serviceId">
<el-select v-model="form.serviceId" placeholder="請(qǐng)選擇返傭打款服務(wù)商名稱" @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="請(qǐng)選擇客戶經(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: {},
//服務(wù)商list
servicesOptions:[],
//客戶經(jīng)理list
managerOptions:[],
channelOption:[],
// 表單校驗(yàn)
rules: {
salesManagerId:[{ required: true, message: '客戶經(jīng)理不能為空', trigger: 'change' }],
serviceId:[{ required: true, message: '返傭打款服務(wù)商名稱不能為空', 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: [
// 添加正則表達(dá)式 pattern: /^1[3|5|7|8|9]\d{9}$/,驗(yàn)證手機(jī)號(hào)是否正確
{ required: true, message: '請(qǐng)輸入手機(jī)號(hào)', trigger: 'blur' },
// { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '請(qǐng)輸入正確的號(hào)碼格式', trigger: 'change' }
],
channelAccount: [
{ required: true, message: '請(qǐng)輸入銀行卡號(hào)', trigger: 'blur' },
// {pattern: /^([1-9])(\d{17})(\d|X)$/,message: "請(qǐng)輸入正確的銀行卡號(hào)",trigger: "change"}
],
},
// 彈出層標(biāo)題
title: "",
// 是否顯示彈出層
open: false,
// 表單參數(shù)
bizform: {}
};
},
methods: {
// 窗口初始化方法,nextTick方法可以添加邏輯,如打開窗口時(shí)查詢數(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è)務(wù)";
// });
// });
},
// 取消按鈕
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>參考資料:https://www.ibashu.cn/news/show_306835.html
到此這篇關(guān)于vue 彈出框 引入另一個(gè)vue頁面的文章就介紹到這了,更多相關(guān)vue 彈出框 另一個(gè)vue頁面內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue實(shí)現(xiàn)左右滑動(dòng)效果實(shí)例代碼
左右滾動(dòng)的效果,在日常開發(fā)中比較常見,這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)左右滑動(dòng)效果的相關(guān)資料,需要的朋友可以參考下2021-05-05
解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項(xiàng)
這篇文章主要介紹了解決vue-cli3創(chuàng)建使用iview定制主題javascriptEnabled找不到該配置項(xiàng)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
vue?css?相對(duì)路徑導(dǎo)入問題級(jí)踩坑記錄
這篇文章主要介紹了vue?css?相對(duì)路徑導(dǎo)入問題級(jí)踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-06-06
想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法
這篇文章主要為大家介紹了想到頭禿也想不到的Vue3復(fù)用組件還可以這么hack的用法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04
詳解如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)
最近參與了公司一個(gè)新的B端項(xiàng)目的研發(fā),從無到有搭建項(xiàng)目的過程中,遇到了關(guān)于項(xiàng)目鑒權(quán)的問題,這篇文章主要給大家介紹了關(guān)于如何使用Vuex實(shí)現(xiàn)Vue后臺(tái)管理中的角色鑒權(quán)的相關(guān)資料,需要的朋友可以參考下2022-05-05
vue-router的beforeRouteUpdate不觸發(fā)問題
這篇文章主要介紹了vue-router的beforeRouteUpdate不觸發(fā)問題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04

