父页面 修改数据时 想带入原有数据。
于是 我 :editTasks="editData" 绑定这个数据以便传到修改子组件。
<transition name="el-fade-in">
<floatingBox v-show="editBoxShow" style="width: 320px;">
<editTask v-if="editShow" slot="edit" :userid="id" :taskUuid="uuid" :editTasks="editData" @editState="editState"></editTask>
</floatingBox>
</transition>editTask(val) {
this.taskOneData = this.taskOneData;
this.msgEtTkSync = false;
this.uuid = val.uuid;
this.id = val.id;
//将这行数据传到editTask组件页面。
this.editData = val;
this.editBoxShow = true;
this.editShow = true;
this.taskEdit = true;
},可是不管怎么获取id 就是没有，其他的数据都有。然后在我对比了各种之前的例子之后，我想起了去后端看看是不是 没有把 id查出来。忽然发现 就是这个原因。因为之前为了简化sql 没有select id。所以id子组件一直获取不到。想想真是个奇葩。
父组件完整代码如下
<template>
<el-row class="taskMan">
<el-row type="flex" style="height: 10px;margin-bottom: 14px;position: relative">
<!-- <el-button @click="querybank" style="width: 100px;position: absolute;right: 120px;">查询
</el-button> -->
<div class="left-box">
<el-form :model="filters" size="mini" label-width="120px" ref="queryOptions">
<el-row style="margin-left:-55px">
<el-col :span="18" class="query-col">
<el-form-item label="路由名称" prop="sysCode">
<el-select v-model="filters.sysCode" clearable value-key="value" placeholder="请选择">
<el-option v-for="item in routerList" :key="item.sysCode" :label="item.sysName" :value="item.sysCode">
<span>{{ item.sysName }}</span>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div>
<el-button icon="el-icon-search" class="middle-button-search" style="position: absolute;right: 100px" @click="querybank"
size="mini">查询</el-button>
<el-button @click="exportData" class="middle-button-search" style="position: absolute;right: 220px" icon="el-icon-download"
size="mini">
导出</el-button>
</el-row>
<div class="middle-show">
<i class="el-icon-s-order middle-div-i"></i>
<div class="middle-div-text">路由配置列表</div>
</div>
<el-table :data="bankData" size="mini" style="width: 100%;font-size: 13px;border: 1px solid rgb(247,247,247); top: 10px;"
@current-change="taskChge" :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}" height="450px"
highlight-current-row border>
<el-table-column prop="bankCode" label="银行编码" min-width="30px" align='center'></el-table-column>
<el-table-column prop="bankName" label="银行名称" min-width="30px" align='center'></el-table-column>
<el-table-column prop="sysName" label="路由" min-width="30px" align='center'></el-table-column>
<el-table-column prop="channelName" label="支付渠道" min-width="30px" align='center'></el-table-column>
<el-table-column prop="authVendor" label="鉴权" min-width="30px" align='center'></el-table-column>
<el-table-column prop="open" label="是否生效" min-width="30px" align='center'>
<template slot-scope="scope">
<span v-if="scope.row.open == 0">是</span>
<span v-else-if="scope.row.open == 1">否</span>
</template>
</el-table-column>
<el-table-column fixed="right" min-width="40px" align='center'>
<template slot="header" slot-scope="scope">
操作
</template>
<template slot-scope="scope">
<el-button @click="editTask(scope.row)" type="text" size="mini" style="font-size: 13px;line-height: 10px;">修改
</el-button>
</template>
</el-table-column>
</el-table>
<el-row type="flex" justify="center" class="pagination">
<el-pagination @size-change="taskSizeChg" @current-change="taskCurChge" :current-page="bankPage.currentPage"
:page-sizes="[10, 20, 30]" :page-size="bankPage.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="bankPage.totalElements"></el-pagination>
</el-row>
<!-- <el-dialog title="提示" :visible.sync="msgEtTkSync" :close-on-click-modal="false" :close-on-press-escape="false" width="20%">
<span style="font-size: 13px;">路由鉴权支付渠道配置?</span>
<span slot="footer" class="dialog-footer">
<el-button @click="editTask">确 定</el-button>
<el-button type="primary" @click="msgEtTkSync = false">取 消</el-button>
</span>
</el-dialog> -->
<transition name="el-fade-in">
<floatingBox v-show="editBoxShow" style="width: 320px;">
<editTask v-if="editShow" slot="edit" :userid="id" :taskUuid="uuid" :editTasks="editData" @editState="editState"></editTask>
</floatingBox>
</transition>
</el-row>
</template>
<script>
import {
getDataForSP
} from "../../../utils/webUtils.js";
import floatingBox from "../../public/floatingBox.vue";
import editTask from "./editBank.vue";
export default {
name: "taskMan",
components: {
editTask,
floatingBox
},
data() {
return {
editBoxShow: false,
addShow: false,
editShow: false,
taskEdit: false,
msgEtTkSync: false,
msgExTkSync: false,
msgDlTkSync: false,
taskOneData: {},
editData: [{}],
bankData: [{
// id: "",
routeCode: "",
sysName: "",
bankCode: "",
bankName: "",
payVendor: "",
channelName: "",
authVendor: ""
}],
routerList: [],
filters: {
sysCode: ""
},
id: '',
uuid: '',
bankPage: {
pageSize: 10, //每页显示条目个数
currentPage: 1, //当前页数
totalElements: 0,
searchData: {}
},
}
},
mounted() {
this.querybank();
this.queryRouters();
// this.queryProcStus();
},
methods: {
editState(msg) {
this.editBoxShow = msg;
this.editShow = msg;
this.addShow = msg;
this.taskEdit = msg;
this.querybank();
},
toMsgEdit(val) {
this.taskOneData = val;
this.msgEtTkSync = true;
},
editTask(val) {
this.taskOneData = this.taskOneData;
this.msgEtTkSync = false;
this.uuid = val.uuid;
this.id = val.id;
//将这行数据传到editTask组件页面。
this.editData = val;
this.editBoxShow = true;
this.editShow = true;
this.taskEdit = true;
},
taskChge(val) {
if (val && val.uuid) {
this.taskUuid = val.uuid;
this.editTasks = val.editData;
}
if (this.taskEdit) {
this.uuid = val.uuid;
this.editData = val.editData;
}
},
procSizeChg(pageSize) {
this.procPage.pageSize = pageSize;
if (this.procPage.currentPage === 1) {
this.queryProc();
}
this.procPage.currentPage = 1;
},
procCurChge(currentPage) {
this.procPage.currentPage = currentPage;
this.queryProc();
},
taskSync() {
this.axios.request({
method: 'put',
url: './shd/kdi/task/sync',
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
data: {}
}).then(response => {
this.$message({
message: response.data.info,
type: 'success'
});
}).catch(error => {
console.log(error);
})
},
//导出
exportData() {
this.axios.request({
method: 'get',
url: "./businessChannelRoute/exportBanks",
params: Object.assign(this.filters),
/* params: Object.assign(this.filters, {
size: this.buyPage.pageSize,
page: this.buyPage.currentPage
}), */
responseType: 'blob'
}).then((res) => {
if (res.data.type === "application/json") {
return this.$message.error("暂无数据或数据超出两万暂无法下载");
} else {
const link = document.createElement('a')
let blob = new Blob([res.data], {
type: 'application/vnd.ms-excel'
});
link.style.display = 'none'
link.href = URL.createObjectURL(blob);
let num = ''
for (let i = 0; i < 10; i++) {
num += Math.ceil(Math.random() * 10)
}
link.setAttribute('download', '路由配置列表信息_' + num + '.xls')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
}).catch(error => {
this.$Notice.error({
title: '错误',
desc: '网络连接错误'
})
console.log(error)
})
},
//获取所有数据 1.获取路由列表 2.获取渠道列表 3.获取银行列表
querybank() {
this.axios.request({
method: "get",
url: "./businessChannelRoute/getBanks", //findByFilter findAllOrderByJob
params: {
routeCode: this.filters.sysCode,
size: this.bankPage.pageSize,
page: this.bankPage.currentPage
}
}).then(response => {
this.bankData = response.data.data.list;
this.bankPage.pageSize = response.data.data.pageSize;
this.bankPage.currentPage = response.data.data.pageNum;
this.bankPage.totalElements = response.data.data.total;
}).catch(error => {
console.log(error);
});
},
//查找路由
queryRouters() {
this.axios.request({
method: "get",
url: "./businessChannelRoute/getRouters", //findByFilter findAllOrderByJob
}).then(response => {
this.routerList = response.data.data
// console.log(this.routerList)
}).catch(error => {
console.log(error);
});
},
//列表分页
userSize: function(pageSize) {
this.bankPage.pageSize = pageSize;
if (this.bankPage.currentPage === 1) {
if (this.userSchOn !== "") {
this.userSearch();
} else {
this.getChannelRoute();
}
}
this.bankPage.currentPage = 1;
},
taskSizeChg(pageSize) {
this.bankPage.pageSize = pageSize;
if (this.bankPage.currentPage === 1) {
this.querybank();
}
this.bankPage.currentPage = 1;
},
taskCurChge(currentPage) {
this.bankPage.currentPage = currentPage;
this.querybank();
},
toDeleteTask(val) {
this.taskOneData = val;
this.msgDlTkSync = true;
},
deleteTask() {
let val = this.taskOneData;
this.msgDlTkSync = false;
this.axios.request({
method: 'post',
url: './task/deleteTask?taskIds=' + val.id,
data: {}
}).then(response => {
this.querybank();
this.$message({
message: "删除成功!",
type: 'success'
});
}).catch(error => {
console.log(error);
})
}
}
}
</script>
<style scoped>
.taskMan {
margin-right: 30px;
}
.pagination {
margin: 10px 0;
}
.middle-button-search {
width: 100px;
position: absolute;
right: 100px;
top: 0px;
}
.middle-show {
border: 1px solid #cccccc;
height: 30px;
position: relative;
margin-top: 30px;
}
</style>
编辑子组件代码如下
<template>
<el-row class="edit">
<el-container style="height: 100%;">
<el-header height="60px">
路由鉴权支付渠道配置
</el-header>
<el-main>
<el-form label-width="100px" :model="editTaskData" :rules="rules" ref="task" size="mini" :label-position="formAlignLeft">
<el-form-item label="路由" prop="sysCode">
<el-select v-model="editTaskData.sysCode" value-key="value" placeholder="请选择">
<el-option v-for="item in routerList" :key="item.sysCode" :label="item.sysName" :value="item.sysCode">
<span>{{ item.sysName }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="支付渠道" prop="channelCode">
<el-select v-model="editTaskData.channelCode" value-key="value" placeholder="请选择">
<el-option v-for="item in payVendorList" :key="item.channelCode" :label="item.channelName" :value="item.channelCode">
<span>{{ item.channelName }}</span>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="鉴权" prop="authVendor">
<el-select v-model="editTaskData.authVendor">
<el-option v-for="item in authVendorList" :key="item.value" :label="item.label" :value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否生效" prop="open">
<!-- <el-switch style="display: block" v-model="editTaskData.open" active-value="0" inactive-value="1" active-color="#13ce66"
inactive-color="#ff4949" active-text="是" inactive-text="否">
</el-switch> -->
<el-radio-group style="width: 140px;" v-model="editTaskData.open">
<el-radio :label="0">启用</el-radio>
<el-radio :label="1">失效</el-radio>
</el-radio-group>
</el-form-item>
</el-form>
</el-main>
<el-footer height="80px">
<el-row style="height: 20px;margin-bottom: 5px;">
<transition name="el-zoom-in-bottom">
<el-row v-show="infoShow" style="display: flex;justify-content: center;align-items: center;">
{{ (info !== '') ? "提示信息："+info : ''}}
</el-row>
</transition>
</el-row>
<el-row style="display: flex;justify-content: center;align-items: center;">
<el-button @click="submit" style="font-size: 13px; " size="mini" type="primary">
确定
</el-button>
<el-button @click="editOut" style="font-size: 13px; " size="mini">
取消
</el-button>
</el-row>
</el-footer>
</el-container>
</el-row>
</template>
<script>
import {
replaceSpacesObj
} from '../../../utils/webUtils.js';
export default {
name: "editTask",
data() {
return {
formAlignLeft: 'left',
uuid: this.taskUuid,
id: this.userid,
editData: this.editTasks,
editTaskData: {
id: "",
sysCode: "",
sysName: "",
routeCode: "",
bankCode: "",
payVendor: "",
open: "",
authVendor: "",
channelName: "",
channelCode: ""
},
routerList: [],
payVendorList: [],
authVendorList: [{
value: 'ybpay',
label: 'ybpay'
}],
para: [],
rules: {
sysCode: [{
required: true,
message: '路由不得为空',
trigger: 'blur'
}, ],
channelCode: [{
required: true,
message: '支付渠道不得为空',
trigger: 'blur'
}, ],
authVendor: [{
required: true,
message: '关联表达式不得为空',
trigger: 'blur'
}, ],
component: [{
required: true,
message: '任务描述不得为空',
trigger: 'blur'
}, ]
},
info: '',
infoShow: false
}
},
props: {
taskUuid: {
type: String
},
editTasks: {
type: Object
},
userid: {
type: Number
},
},
//深度监听父组件的props传值
watch: {
taskUuid(val) {
this.uuid = val;
this.para = [];
// this.queryTaskByUuid();
},
editTasks(val) {
this.editData = val;
this.para = [];
// this.queryTaskByUuid();
},
id(val) {
this.id = val
},
other: {
//深度观察对象
handler(val) {},
deep: true
}
},
created() {
this.copyTask()
},
mounted() {
this.queryRouters();
this.queryChannels();
},
methods: {
copyTask() {
this.editTaskData.channelName = this.editTasks.channelName
this.editTaskData.channelCode = this.editTasks.payVendor
this.editTaskData.bankCode = this.editTasks.bankCode
// this.editTaskData.id = this.id
this.editTaskData.sysName = this.editTasks.sysName
this.editTaskData.sysCode = this.editTasks.routeCode
this.editTaskData.authVendor = this.editTasks.authVendor
this.editTaskData.open = this.editTasks.open
// if (this.editTaskData.open === 0) {
// this.editTaskData.open = "0"
// } else {
// this.editTaskData.open = "1"
// }
},
//查找路由
queryRouters() {
this.axios.request({
method: "get",
url: "./businessChannelRoute/getRouters", //findByFilter findAllOrderByJob
}).then(response => {
this.routerList = response.data.data
}).catch(error => {
console.log(error);
});
},
//查找渠道
queryChannels() {
this.axios.request({
method: "get",
url: "./businessChannelRoute/getChannels", //findByFilter findAllOrderByJob
}).then(response => {
this.payVendorList = response.data.data
}).catch(error => {
console.log(error);
});
},
submit() {
this.$refs['task'].validate((valid) => {
if (!valid) {
return;
}
this.axios.request({
method: "post",
url: "./businessChannelRoute/saveChannelRoute",
params: replaceSpacesObj({
id: this.id,
routCode: this.editTaskData.sysCode,
bankCode: this.editTaskData.bankCode,
authVendor: this.editTaskData.authVendor,
payVendor: this.editTaskData.channelCode,
// 0开启1关闭
open: Number.parseInt(this.editTaskData.open),
// open: (this.editTaskData.open === "0" ? 0 : 1),
}),
headers: {
"Content-Type": "application/json;charset=UTF-8"
},
data: replaceSpacesObj(this.editTaskData)
}).then(response => {
this.info = '修改成功,两秒后关闭';
this.infoShow = true;
setTimeout(() => {
this.infoShow = false;
this.$emit("editState", false);
this.editTaskData = {};
this.info = '';
}, 2000);
}).catch(error => {
console.log(error);
this.info = '修改失败';
this.infoShow = true;
});
});
},
editOut() {
this.infoShow = false;
// this.editTaskData = {};
// this.info = '';
this.$emit("editState", false);
}
}
}
</script>
<style scoped>
.edit {
width: 500px;
height: 100%;
z-index: 100;
}
</style>
扫一扫
1058
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
