现在要做一个 点击查看详情 然后弹窗展示信息的需求 弹窗分为上下两部分 上面部分展示小程序的信息 下面部分展示APP(H5)的信息 但是没有那么简单 如果是单独展示 那就非常简单 现在是 上下两个区域 都要根据一个唯一的字段 然后分别渲染4种情况的字段上去 所以要用上字典 类似模板这种东西
// 查看详情弹框 showDetail(id, data, title) { let yss = data[0] || {}; let app = data[1] || {}; let yssProps = yss.props || {}; let appProps = app.props || {}; let yssNavigationConfig = yssProps.navigationConfig || {}; let appNavigationConfig = appProps.navigationConfig || {};
let getTmp = (type, pageType) => {
let main, config;
if(type == 'app') {
main = app
config = appNavigationConfig
}else if( type == 'yss') {
main = yss
config = yssNavigationConfig
}
//这个就是字典 模板 根据一个唯一的字段 去渲染不同的数据
let tmp = {
'0': {
// 自研小程序
head: [
{ title: '节点ID', dataIndex: 'name', key: 'name', width: 160 },
{ title: main.node_id, dataIndex: 'value', key: 'value' },
],
body: [
{ name: '节点路径', value: main.abs_path, width: 160 },
{ name: '页面类型', value: this.pageTypes[config.page_type] },
{ name: 'url', value: config.url },
{ name: '是否需要登录', value: this.need_login[config.need_login] },
{ name: '服务准入证件类型', value: this.id_types[config.id_types] },
],
},
'1': {
// 自研h5
head: [
{ title: '节点ID', dataIndex: 'name', key: 'name', width: 160 },
{ title: main.node_id, dataIndex: 'value', key: 'value' },
],
body: [
{ name: '节点路径', value: main.abs_path, width: 160 },
{ name: '页面类型', value: this.pageTypes[config.page_type] },
{ name: 'H5源链接', value: config.url },
{ name: '是否需要登录', value: this.need_login[config.need_login] },
{ name: '服务准入证件类型', value: this.id_types[config.id_types] },
],
},
'2': {
// 第三方小程序
head: [
{ title: '节点ID', dataIndex: 'name', key: 'name', width: 160 },
{ title: main.node_id, dataIndex: 'value', key: 'value' },
],
body: [
{ name: '节点路径', value: main.abs_path, width: 160 },
{ name: '页面类型', value: this.pageTypes[config.page_type] },
{ name: 'url', value: config.url },
{ name: 'appid', value: config.appId },
{ name: '是否需要登录', value: this.need_login[config.need_login] },
{ name: '服务准入证件类型', value: config.id_types?config.id_types.map(item => {
return this.id_types[item]
}).join(' 、') : ''},
{ name: '是否经过授权页', value: config.need_auth === '0' ? '否' : '是' },
{ name: '是否需要token', value: config.needToken === '0' ? '否' : '是' },
{ name: '组织机构(orgid)', value: config.orgid },
{ name: '业务部门(bussiness)', value: config.business },
],
},
'3': {
// 第三方h5
head: [
{ title: '节点ID', dataIndex: 'name', key: 'name', width: 160 },
{ title: main.node_id, dataIndex: 'value', key: 'value' },
],
body: [
{ name: '节点路径', value: main.abs_path, width: 160 },
{ name: '页面类型', value: this.pageTypes[config.page_type] },
{ name: 'H5源链接', value: config.url },
{ name: '是否需要登录', value: this.need_login[config.need_login] },
{ name: '服务准入证件类型', value: config.id_types?config.id_types.map(item => {
return this.id_types[item]
}).join(' 、') : '' },
{ name: '是否经过授权页', value: config.need_auth === '0' ? '否' : '是' },
{ name: '是否需要token', value: config.needToken === '0' ? '否' : '是' },
{ name: '组织机构(orgid)', value: config.orgid },
{ name: '业务部门(bussiness)', value: config.business },
],
},
};
return tmp[pageType]
}
let self = this;
const h = this.$createElement;
let tableBody = [];
if(!yssNavigationConfig.page_type) {
tableBody.push(
h('gmd-table', {
scopedSlots: { title: props => h('span', '小程序') },
props: {
bordered: true,
pagination: false,
'row-key': 'name',
columns: [],
'data-source': [],
},
}),
);
}
if (yssNavigationConfig.page_type) {
tableBody.push(
h('gmd-table', {
scopedSlots: { title: props => h('span', '小程序') },
props: {
bordered: true,
pagination: false,
'row-key': 'name',
columns: getTmp('yss', yssNavigationConfig.page_type).head,
'data-source': getTmp('yss', yssNavigationConfig.page_type).body,
},
}),
);
}
if(!appNavigationConfig.page_type) {
tableBody.push(
h('gmd-table', {
scopedSlots: { title: props => h('span', 'APP') },
props: {
bordered: true,
pagination: false,
'row-key': 'name',
columns: [],
'data-source': [],
},
}),
);
}
// console.log(appNavigationConfig.page_type, tmp[appNavigationConfig.page_type],99999999888)
if (appNavigationConfig.page_type) {
tableBody.push(
h('gmd-table', {
scopedSlots: { title: props => h('span', 'APP') },
props: {
bordered: true,
pagination: false,
'row-key': 'name',
columns: getTmp('app', appNavigationConfig.page_type).head,
'data-source': getTmp('app', appNavigationConfig.page_type).body,
},
}),
);
}
modal({
title: `${id}-${title}`,
content: Vue.component('delete', {
render: h => {
return h(
'div',
{
style: {
height: '500px',
overflow: 'scroll',
},
},
tableBody,
);
},
}),
pdata: {},
okText: '确认',
showFoot: true,
success: () => {},
});
},
// 点击查看详情按钮
handleDetail(data) {
console.log(1111111111111111111111111)
console.log(data,55555)
let title = data.item_name;
let item_id = +data.item_id;
let item_type = data.online_platform.slice(0,1) === "," ? data.online_platform.slice(1) : data.online_platform;
console.log(item_type,6666)
//获取查看详情弹窗的数据
joinneed_detail({
item_id,
item_type,
}).then(res => {
//传数据给查看详情弹窗
this.showDetail(data.item_id, res.data.result, title);
});
},
