Skip to content

L
link-tools
Commit f90e4ccd by 无尘
Options

add 动态参数和第三方小程序配置

parent b325f655
Showing with 847 additions and 18 deletions
linktools.vue
...@@ -123,21 +123,176 @@ components: { ...@@ -123,21 +123,176 @@ components: {
<el-input v-model="h5linkObj.url" placeholder="请输入网址"></el-input><a class="h5link-help" href="http://doc.demogic.com/doc/index.php?s=/41&page_id=441" target="_blank">【帮助文档】请联系公司技术人员查看文档配置标准链接</a> <el-input v-model="h5linkObj.url" placeholder="请输入网址"></el-input><a class="h5link-help" href="http://doc.demogic.com/doc/index.php?s=/41&page_id=441" target="_blank">【帮助文档】请联系公司技术人员查看文档配置标准链接</a>
</div> </div>
<div class="h5link-row"> <div class="h5link-row">
<label class="h5link-title">固定参数</label> <label class="h5link-title">动态参数</label>
<el-input v-model="h5linkObj.fixParam" type="textarea" resize="none" :rows="4" placeholder="请输入固定参数(可选)"></el-input> <div class="h5-table">
<table cellspacing="0" cellpadding="0" border="0" class=" el-table el-table__header">
<colgroup>
<col name="el-table_1_column_1" width="359">
<col name="el-table_1_column_2" width="359">
<col name="el-table_1_column_3" width="359">
<col name="gutter" width="0">
</colgroup>
<thead class="has-gutter">
<tr class="">
<th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
<div class="cell">GIC参数</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
<div class="cell">第三方H5</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
<div class="cell">操作</div>
</th>
<th class="gutter" style="width: 0px; display: none;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<el-select size="small" class="dynamic-param-select" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<td>
<el-input size="small" class="h5-el-input" v-model="dynamicRow.value" type="text" @keyup.native="(value) => dynamicBlur(value)" placeholder="请输入参数"></el-input>
</td>
<td><el-button type="text" @click.stop="addDynamic()">添加</el-button></td>
</tr>
<template v-for="(dynamicItem,index) in dynamicList">
<tr>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.key}}</template>
<template v-if="dynamicItem.editAble">
<el-select size="small" class="dynamic-param-select" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</td>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.value}}</template>
<template v-if="dynamicItem.editAble">
<el-input size="small" class="h5-el-input" v-model="dynamicItem.inputValue" type="text" placeholder="请输入参数"></el-input>
</template>
</td>
<td>
<template v-if="dynamicItem.editAble">
<el-button type="text" @click.stop="confirmDynamic(index,dynamicItem)">确认</el-button>
<el-button type="text" @click.stop="cancleDynamic(index,dynamicItem)">取消</el-button>
</template>
<template v-if="!dynamicItem.editAble">
<el-button type="text" @click.stop="editDynamic(index,dynamicItem)">编辑</el-button>
<el-button type="text" @click.stop="delDynamic(index)">删除</el-button>
</template>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div> </div>
<div class="h5link-row"> <div class="h5link-row">
<label class="h5link-title">时间戳开关</label> <label class="h5link-title">时间戳开关</label>
<el-switch v-model="h5linkObj.timeSwitch" @change="timeSwitch($event,h5linkObj.timeSwitch)"></el-switch> <el-switch v-model="h5linkObj.timeSwitch" @change="timeSwitch($event,h5linkObj.timeSwitch)"></el-switch>
</div>
</div>
<!-- <el-select class="dynamic-param-select" v-model="h5linkObj.dynamicPara" multiple placeholder="请选择动态参数(可选)"> <!-- 第三方小程序 -->
<div class="h5link-contain" v-if="thirdlinkVisible">
<div class="h5link-row">
<label class="h5link-title">名称</label>
<el-input v-model="thirdObj.name" placeholder="请输入名称"></el-input>
</div>
<div class="h5link-row">
<label class="h5link-title">appid</label>
<el-input v-model="thirdObj.appid" placeholder="请输入 appid"></el-input>
</div>
<div class="h5link-row">
<label class="h5link-title">动态参数</label>
<div class="h5-table">
<table cellspacing="0" cellpadding="0" border="0" class=" el-table el-table__header">
<colgroup>
<col name="el-table_1_column_1" width="359">
<col name="el-table_1_column_2" width="359">
<col name="el-table_1_column_3" width="359">
<col name="gutter" width="0">
</colgroup>
<thead class="has-gutter">
<tr class="">
<th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
<div class="cell">GIC参数</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
<div class="cell">第三方H5</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
<div class="cell">操作</div>
</th>
<th class="gutter" style="width: 0px; display: none;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<el-select size="small" class="dynamic-param-select" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<td>
<el-input size="small" class="h5-el-input" v-model="dynamicRow.value" type="text" @keyup.native="(value) => dynamicBlur(value)" placeholder="请输入参数"></el-input>
</td>
<td><el-button type="text" @click.stop="addDynamic()">添加</el-button></td>
</tr>
<template v-for="(dynamicItem,index) in dynamicList">
<tr>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.key}}</template>
<template v-if="dynamicItem.editAble">
<el-select size="small" class="dynamic-param-select" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-option <el-option
v-for="item in h5linkObj.dynamicParaOptions" v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> --> </el-select>
</template>
</td>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.value}}</template>
<template v-if="dynamicItem.editAble">
<el-input size="small" class="h5-el-input" v-model="dynamicItem.inputValue" type="text" placeholder="请输入参数"></el-input>
</template>
</td>
<td>
<template v-if="dynamicItem.editAble">
<el-button type="text" @click.stop="confirmDynamic(index,dynamicItem)">确认</el-button>
<el-button type="text" @click.stop="cancleDynamic(index,dynamicItem)">取消</el-button>
</template>
<template v-if="!dynamicItem.editAble">
<el-button type="text" @click.stop="editDynamic(index,dynamicItem)">编辑</el-button>
<el-button type="text" @click.stop="delDynamic(index)">删除</el-button>
</template>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
...@@ -344,7 +499,26 @@ export default { ...@@ -344,7 +499,26 @@ export default {
}, },
] ]
}, },
dynamicRow: {
key: '',
value: '',
selectKey: '',
inputValue: '',
editAble: false
},
dynamicList: [],
// --------------------------- // ---------------------------
//第三方小程序
thirdlinkVisible: false,
thirdObj:{
name: '',
appid: '',
},
// --------------------------- // ---------------------------
// 父组件传递的 props // 父组件传递的 props
mylinkToolsVisible: this.linkToolsVisible, mylinkToolsVisible: this.linkToolsVisible,
...@@ -468,7 +642,18 @@ export default { ...@@ -468,7 +642,18 @@ export default {
// 判断出现下拉内容/h5部分 // 判断出现下拉内容/h5部分
// 每次修改选择类型,清空已选择的值 // 每次修改选择类型,清空已选择的值
that.dynamicRow = {
key: '',
value: '',
selectKey: '',
inputValue: '',
editAble: false
}
that.dynamicList = [];
that. thirdObj = {
name: '',
appid: '',
};
that.selectLinkObj.name = ''; that.selectLinkObj.name = '';
that.selectLinkObj.url = ''; that.selectLinkObj.url = '';
that.selectLinkObj.params = ''; that.selectLinkObj.params = '';
...@@ -477,7 +662,7 @@ export default { ...@@ -477,7 +662,7 @@ export default {
that.threeLevelSelectValue = ''; that.threeLevelSelectValue = '';
// 如果是 h5,二级,三级隐藏, // 如果是 h5,二级,三级隐藏,
var type = selectOneItem.type == 5? true:false; var type = selectOneItem.type == 5 || selectOneItem.type == 7? true:false;
that.setOneLevelVisible(type,selectOneItem) that.setOneLevelVisible(type,selectOneItem)
}, },
...@@ -487,14 +672,23 @@ export default { ...@@ -487,14 +672,23 @@ export default {
if (type) { if (type) {
// 设置选择的 id // 设置选择的 id
that.selectLinkObj.id = selectOneItem.linkId; that.selectLinkObj.id = selectOneItem.linkId;
console.log("一级选择obj:",that.selectLinkObj) console.log("一级选择obj:",selectOneItem,that.selectLinkObj)
if (selectOneItem.type ==5 ) {
that.h5linkVisible = true; // h5 链接参数输入部分显示 that.h5linkVisible = true; // h5 链接参数输入部分显示
that.thirdlinkVisible = false; // 第三方小程序
}
if (selectOneItem.type ==7 ) {
that.h5linkVisible = false; // h5 链接参数输入部分显示
that.thirdlinkVisible = true; // 第三方小程序
}
that.twoLevelVisible = false; // 二级部分隐藏 that.twoLevelVisible = false; // 二级部分隐藏
that.threeLevelVisible = false; // 三级部分隐藏 that.threeLevelVisible = false; // 三级部分隐藏
that.goodsLinksVisible = false; // 商品链接列表部分 that.goodsLinksVisible = false; // 商品链接列表部分
}else { }else {
// 不是 h5,显示二级,隐藏三级 // 不是 h5,显示二级,隐藏三级
that.h5linkVisible = false; // h5 链接参数输入部分隐藏 that.h5linkVisible = false; // h5 链接参数输入部分隐藏
that.thirdlinkVisible = false; // 第三方小程序
that.twoLevelVisible = true; // 二级部分显示 that.twoLevelVisible = true; // 二级部分显示
that.twoLevelOptions = []; that.twoLevelOptions = [];
that.threeLevelVisible = false; // 三级部分隐藏 that.threeLevelVisible = false; // 三级部分隐藏
...@@ -1151,7 +1345,8 @@ export default { ...@@ -1151,7 +1345,8 @@ export default {
// 确认操作 // 确认操作
confirmLinkSelect() { confirmLinkSelect() {
var that = this var that = this
console.log(that.linksType,that.twoLevelValue,that.threeLevelValue,that.h5linkObj.conditionType) console.log("确定的类型:",that.oneLevelTypeValue)
// console.log(that.linksType,that.twoLevelValue,that.threeLevelValue,that.h5linkObj.conditionType)
// 如果选择 h5 判断选择的链接 // 如果选择 h5 判断选择的链接
if (that.oneLevelTypeValue == 5) { if (that.oneLevelTypeValue == 5) {
if (!that.h5linkObj.name.trim() || !that.h5linkObj.url.trim()) { if (!that.h5linkObj.name.trim() || !that.h5linkObj.url.trim()) {
...@@ -1164,7 +1359,18 @@ export default { ...@@ -1164,7 +1359,18 @@ export default {
that.selectLinkObj.conditionType = that.h5linkObj.conditionType; that.selectLinkObj.conditionType = that.h5linkObj.conditionType;
that.selectLinkObj.name = that.h5linkObj.name; that.selectLinkObj.name = that.h5linkObj.name;
that.selectLinkObj.url = that.h5linkObj.url;// +'?'+that.h5linkObj.fixParam+'&'+that.h5linkObj.dynamicPara; that.selectLinkObj.url = that.h5linkObj.url;// +'?'+that.h5linkObj.fixParam+'&'+that.h5linkObj.dynamicPara;
that.selectLinkObj.params = that.h5linkObj.fixParam // 去掉固定参数 20180912 that.h5linkObj.fixParam
that.selectLinkObj.params = '';
if (!!that.dynamicList.length) {
let h5DataList = JSON.parse(JSON.stringify(that.dynamicList))
h5DataList.forEach(function(ele,index){
delete ele.editAble;
delete ele.selectKey;
delete ele.inputValue;
})
that.selectLinkObj.params = h5DataList
}
that.selectLinkObj.timeSwitch = (that.h5linkObj.timeSwitch== true? 1:0) that.selectLinkObj.timeSwitch = (that.h5linkObj.timeSwitch== true? 1:0)
console.log(that.selectLinkObj) console.log(that.selectLinkObj)
// that.selectLinkObj.fixParam = that.h5linkObj.fixParam; // that.selectLinkObj.fixParam = that.h5linkObj.fixParam;
...@@ -1174,6 +1380,36 @@ export default { ...@@ -1174,6 +1380,36 @@ export default {
return; return;
} }
// 如果是第三方小程序
if (that.oneLevelTypeValue == 7) {
if (!that.thirdObj.name.trim() || !that.thirdObj.appid.trim()) {
that.$message.error({
duration: 1000,
message: "请填写链接内容"
})
return;
}
that.selectLinkObj.name = that.thirdObj.name;
that.selectLinkObj.appid = that.thirdObj.appid;//
that.selectLinkObj.params = ''
if (!!that.dynamicList.length) {
let thirdDataList = JSON.parse(JSON.stringify(that.dynamicList))
thirdDataList.forEach(function(ele,index){
delete ele.editAble;
delete ele.selectKey;
delete ele.inputValue;
})
that.selectLinkObj.params = thirdDataList
}
console.log(that.selectLinkObj)
// 触发父组件方法,传递参数
that.transData();
return;
}
// 如果选择的自定义页面 // 如果选择的自定义页面
if (that.oneLevelTypeValue == 6) { if (that.oneLevelTypeValue == 6) {
if (!that.twoLevelValue.trim()) { if (!that.twoLevelValue.trim()) {
...@@ -1243,6 +1479,7 @@ export default { ...@@ -1243,6 +1479,7 @@ export default {
resetAll() { resetAll() {
var that = this var that = this
that.h5linkVisible = false; that.h5linkVisible = false;
that.thirdlinkVisible = false; // 第三方小程序
that.linksType = ''; that.linksType = '';
that.twoLevelVisible = false; // 二级下拉 that.twoLevelVisible = false; // 二级下拉
that.threeLevelVisible = false; // 三级整个 that.threeLevelVisible = false; // 三级整个
...@@ -1251,6 +1488,22 @@ export default { ...@@ -1251,6 +1488,22 @@ export default {
that.twoLevelSelectValue = ''; that.twoLevelSelectValue = '';
that.threeLevelValue = ''; // 清空所有选择的 that.threeLevelValue = ''; // 清空所有选择的
// h5新增部分
that.dynamicRow = {
key: '',
value: '',
selectKey: '',
inputValue: '',
editAble: false
}
that.dynamicList = [];
// 第三方小程序
that.thirdObj = {
name: '',
appid: ''
}
that.selectLinkObj = { that.selectLinkObj = {
url: '', url: '',
name: '' name: ''
...@@ -1415,6 +1668,122 @@ export default { ...@@ -1415,6 +1668,122 @@ export default {
.catch(function (error) { .catch(function (error) {
console.log("error:",error); console.log("error:",error);
}) })
},
// 判断添加重复字段
isRepeat(arr) {
var hash = {};
for(var i in arr) {
if(hash[arr[i]]){
return true;
}
hash[arr[i]] = true;
}
return false;
},
// dynamicChange
dynamicChange(e) {
var that = this
console.log(e);
that.dynamicRow.selectKey = e
},
dynamicBlur(e) {
var that = this
that.dynamicRow.inputValue = e.target.value
},
// 添加参数
addDynamic() {
var that = this
// console.log(that.dynamicRow)
if (!that.dynamicRow.key||!String(that.dynamicRow.value).trim()) {
that.$message.error({
duration: 1000,
message: "请完善参数"
})
return
}
that.dynamicList.push(JSON.parse(JSON.stringify(that.dynamicRow)))
var arrKeys = that.dynamicList.map(ite=>ite.key) // 返回对象中键值集合的数组
var arrValues = that.dynamicList.map(ite=>ite.value)
// console.log("所有name:",arrValues)
if (that.isRepeat(arrKeys) || that.isRepeat(arrValues)) {
that.dynamicList.splice(that.dynamicList.length-1,1)
// arrKeys.splice(that.dynamicList.length-1,1)
that.$message.error({
duration: 1000,
message: "选项不能重复"
})
// console.log(that.dynamicList,arrKeys,arrValues)
return;
}
// 添加对象到数组中
// that.dynamicList.push(that.dynamicRow)
},
// 点击编辑
editDynamic(index,obj) {
var that = this
obj.editAble = true
},
// 删除参数
delDynamic(index) {
var that = this
console.log(index)
that.dynamicList.splice(index,1)
},
// 确认编辑
confirmDynamic(index,obj) {
var that = this
console.log(index,obj)
if (!obj.selectKey||!String(obj.inputValue).trim()) {
that.$message.error({
duration: 1000,
message: "请完善参数"
})
return
}
// 判断重复字段
var copyList = JSON.parse(JSON.stringify(that.dynamicList))
copyList[index].key = obj.selectKey
copyList[index].value = obj.inputValue
var copyKeys = copyList.map(ite=>ite.key) // 返回对象中键值集合的数组
var copyValues = copyList.map(ite=>ite.value)
// console.log("所有name:",copyValues)
if (that.isRepeat(copyKeys) || that.isRepeat(copyValues)) {
copyList.splice(copyList.length-1,1)
// copyKeys.splice(copyList.length-1,1)
that.$message.error({
duration: 1000,
message: "选项不能重复"
})
// console.log(copyList,copyKeys,copyValues)
return;
}
obj.key = obj.selectKey;
obj.value = obj.inputValue;
// console.log(that.dynamicList)
// return;
// 隐藏编辑部分
obj.editAble = false;
},
// 取消编辑
cancleDynamic(index,obj) {
var that = this
console.log(index,obj)
// 恢复原值
obj.selectKey = obj.key
obj.inputValue = obj.value
// 隐藏编辑部分
obj.editAble = false;
} }
}, },
...@@ -1672,6 +2041,10 @@ export default { ...@@ -1672,6 +2041,10 @@ export default {
width: 450px; width: 450px;
} }
.h5-el-input {
width: 150px;
}
.el-textarea { .el-textarea {
vertical-align: top; vertical-align: top;
} }
...@@ -1682,6 +2055,46 @@ export default { ...@@ -1682,6 +2055,46 @@ export default {
color: #5073FD; color: #5073FD;
} }
.h5-table {
width: calc(100% - 86px);
display: inline-block;
vertical-align: top;
.el-table {
width: auto;
thead th, thead tr {
background: #f1f3f7;
}
th {
padding: 12px 0;
min-width: 0;
text-align: center;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
}
td {
text-align: center;
padding: 0;
}
.el-select {
width: 150px;
}
}
.el-table th {
padding: 12px 0;
min-width: 0;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
}
}
.dynamic-param-select { .dynamic-param-select {
vertical-align: top; vertical-align: top;
} }
......
linktoolspage.vue
...@@ -99,7 +99,7 @@ components: { ...@@ -99,7 +99,7 @@ components: {
</div> </div>
</div> </div>
<!-- h5 --> <!-- h5 v-if="h5linkVisible"-->
<div class="h5link-contain" v-if="h5linkVisible"> <div class="h5link-contain" v-if="h5linkVisible">
<div class="h5link-row"> <div class="h5link-row">
<label class="h5link-title">进入条件</label> <label class="h5link-title">进入条件</label>
...@@ -121,20 +121,176 @@ components: { ...@@ -121,20 +121,176 @@ components: {
<el-input v-model="h5linkObj.url" placeholder="请输入网址"></el-input><a class="h5link-help" href="http://doc.demogic.com/doc/index.php?s=/41&page_id=441" target="_blank">【帮助文档】请联系公司技术人员查看文档配置标准链接</a> <el-input v-model="h5linkObj.url" placeholder="请输入网址"></el-input><a class="h5link-help" href="http://doc.demogic.com/doc/index.php?s=/41&page_id=441" target="_blank">【帮助文档】请联系公司技术人员查看文档配置标准链接</a>
</div> </div>
<div class="h5link-row"> <div class="h5link-row">
<label class="h5link-title">固定参数</label> <label class="h5link-title">动态参数</label>
<el-input v-model="h5linkObj.fixParam" type="textarea" resize="none" :rows="4" placeholder="请输入固定参数(可选)"></el-input> <div class="h5-table">
<table cellspacing="0" cellpadding="0" border="0" class=" el-table el-table__header">
<colgroup>
<col name="el-table_1_column_1" width="359">
<col name="el-table_1_column_2" width="359">
<col name="el-table_1_column_3" width="359">
<col name="gutter" width="0">
</colgroup>
<thead class="has-gutter">
<tr class="">
<th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
<div class="cell">GIC参数</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
<div class="cell">第三方H5</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
<div class="cell">操作</div>
</th>
<th class="gutter" style="width: 0px; display: none;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<el-select size="small" class="dynamic-param-select" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<td>
<el-input size="small" class="h5-el-input" v-model="dynamicRow.value" type="text" @keyup.native="(value) => dynamicBlur(value)" placeholder="请输入参数"></el-input>
</td>
<td><el-button type="text" @click.stop="addDynamic()">添加</el-button></td>
</tr>
<template v-for="(dynamicItem,index) in dynamicList">
<tr>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.key}}</template>
<template v-if="dynamicItem.editAble">
<el-select size="small" class="dynamic-param-select" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
</td>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.value}}</template>
<template v-if="dynamicItem.editAble">
<el-input size="small" class="h5-el-input" v-model="dynamicItem.inputValue" type="text" placeholder="请输入参数"></el-input>
</template>
</td>
<td>
<template v-if="dynamicItem.editAble">
<el-button type="text" @click.stop="confirmDynamic(index,dynamicItem)">确认</el-button>
<el-button type="text" @click.stop="cancleDynamic(index,dynamicItem)">取消</el-button>
</template>
<template v-if="!dynamicItem.editAble">
<el-button type="text" @click.stop="editDynamic(index,dynamicItem)">编辑</el-button>
<el-button type="text" @click.stop="delDynamic(index)">删除</el-button>
</template>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div> </div>
<div class="h5link-row"> <div class="h5link-row">
<label class="h5link-title">时间戳开关</label> <label class="h5link-title">时间戳开关</label>
<el-switch v-model="h5linkObj.timeSwitch" @change="timeSwitch($event,h5linkObj.timeSwitch)"></el-switch> <el-switch v-model="h5linkObj.timeSwitch" @change="timeSwitch($event,h5linkObj.timeSwitch)"></el-switch>
<!-- <el-select class="dynamic-param-select" v-model="h5linkObj.dynamicPara" multiple placeholder="请选择动态参数(可选)"> </div>
</div>
<!-- 第三方小程序 -->
<div class="h5link-contain" v-if="thirdlinkVisible">
<div class="h5link-row">
<label class="h5link-title">名称</label>
<el-input v-model="thirdObj.name" placeholder="请输入名称"></el-input>
</div>
<div class="h5link-row">
<label class="h5link-title">appid</label>
<el-input v-model="thirdObj.appid" placeholder="请输入 appid"></el-input>
</div>
<div class="h5link-row">
<label class="h5link-title">动态参数</label>
<div class="h5-table">
<table cellspacing="0" cellpadding="0" border="0" class=" el-table el-table__header">
<colgroup>
<col name="el-table_1_column_1" width="359">
<col name="el-table_1_column_2" width="359">
<col name="el-table_1_column_3" width="359">
<col name="gutter" width="0">
</colgroup>
<thead class="has-gutter">
<tr class="">
<th colspan="1" rowspan="1" class="el-table_1_column_1 is-leaf">
<div class="cell">GIC参数</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_2 is-leaf">
<div class="cell">第三方H5</div>
</th>
<th colspan="1" rowspan="1" class="el-table_1_column_3 is-leaf">
<div class="cell">操作</div>
</th>
<th class="gutter" style="width: 0px; display: none;"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<el-select size="small" class="dynamic-param-select" v-model="dynamicRow.key" placeholder="请选择参数" @change="dynamicChange($event)">
<el-option
v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</td>
<td>
<el-input size="small" class="h5-el-input" v-model="dynamicRow.value" type="text" @keyup.native="(value) => dynamicBlur(value)" placeholder="请输入参数"></el-input>
</td>
<td><el-button type="text" @click.stop="addDynamic()">添加</el-button></td>
</tr>
<template v-for="(dynamicItem,index) in dynamicList">
<tr>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.key}}</template>
<template v-if="dynamicItem.editAble">
<el-select size="small" class="dynamic-param-select" v-model="dynamicItem.selectKey" placeholder="请选择参数">
<el-option <el-option
v-for="item in h5linkObj.dynamicParaOptions" v-for="item in h5linkObj.dynamicParaOptions"
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> --> </el-select>
</template>
</td>
<td>
<template v-if="!dynamicItem.editAble">{{dynamicItem.value}}</template>
<template v-if="dynamicItem.editAble">
<el-input size="small" class="h5-el-input" v-model="dynamicItem.inputValue" type="text" placeholder="请输入参数"></el-input>
</template>
</td>
<td>
<template v-if="dynamicItem.editAble">
<el-button type="text" @click.stop="confirmDynamic(index,dynamicItem)">确认</el-button>
<el-button type="text" @click.stop="cancleDynamic(index,dynamicItem)">取消</el-button>
</template>
<template v-if="!dynamicItem.editAble">
<el-button type="text" @click.stop="editDynamic(index,dynamicItem)">编辑</el-button>
<el-button type="text" @click.stop="delDynamic(index)">删除</el-button>
</template>
</td>
</tr>
</template>
</tbody>
</table>
</div>
</div> </div>
</div> </div>
...@@ -339,7 +495,26 @@ export default { ...@@ -339,7 +495,26 @@ export default {
}, },
] ]
}, },
dynamicRow: {
key: '',
value: '',
selectKey: '',
inputValue: '',
editAble: false
},
dynamicList: [],
// --------------------------- // ---------------------------
//第三方小程序
thirdlinkVisible: false,
thirdObj:{
name: '',
appid: '',
},
// --------------------------- // ---------------------------
// 父组件传递的 props // 父组件传递的 props
mylinkToolsVisible: this.linkToolsVisible, mylinkToolsVisible: this.linkToolsVisible,
...@@ -463,7 +638,18 @@ export default { ...@@ -463,7 +638,18 @@ export default {
// 判断出现下拉内容/h5部分 // 判断出现下拉内容/h5部分
// 每次修改选择类型,清空已选择的值 // 每次修改选择类型,清空已选择的值
that.dynamicRow = {
key: '',
value: '',
selectKey: '',
inputValue: '',
editAble: false
}
that.dynamicList = [];
that. thirdObj = {
name: '',
appid: '',
};
that.selectLinkObj.name = ''; that.selectLinkObj.name = '';
that.selectLinkObj.url = ''; that.selectLinkObj.url = '';
that.selectLinkObj.params = ''; that.selectLinkObj.params = '';
...@@ -472,7 +658,7 @@ export default { ...@@ -472,7 +658,7 @@ export default {
that.threeLevelSelectValue = ''; that.threeLevelSelectValue = '';
// 如果是 h5,二级,三级隐藏, // 如果是 h5,二级,三级隐藏,
var type = selectOneItem.type == 5? true:false; var type = selectOneItem.type == 5 || selectOneItem.type == 7? true:false;
that.setOneLevelVisible(type,selectOneItem) that.setOneLevelVisible(type,selectOneItem)
}, },
...@@ -483,13 +669,21 @@ export default { ...@@ -483,13 +669,21 @@ export default {
// 设置选择的 id // 设置选择的 id
that.selectLinkObj.id = selectOneItem.linkId; that.selectLinkObj.id = selectOneItem.linkId;
console.log("一级选择obj:",that.selectLinkObj) console.log("一级选择obj:",that.selectLinkObj)
if (selectOneItem.type ==5 ) {
that.h5linkVisible = true; // h5 链接参数输入部分显示 that.h5linkVisible = true; // h5 链接参数输入部分显示
that.thirdlinkVisible = false; // 第三方小程序
}
if (selectOneItem.type ==7 ) {
that.h5linkVisible = false; // h5 链接参数输入部分显示
that.thirdlinkVisible = true; // 第三方小程序
}
that.twoLevelVisible = false; // 二级部分隐藏 that.twoLevelVisible = false; // 二级部分隐藏
that.threeLevelVisible = false; // 三级部分隐藏 that.threeLevelVisible = false; // 三级部分隐藏
that.goodsLinksVisible = false; // 商品链接列表部分 that.goodsLinksVisible = false; // 商品链接列表部分
}else { }else {
// 不是 h5,显示二级,隐藏三级 // 不是 h5,显示二级,隐藏三级
that.h5linkVisible = false; // h5 链接参数输入部分隐藏 that.h5linkVisible = false; // h5 链接参数输入部分隐藏
that.thirdlinkVisible = false; // 第三方小程序
that.twoLevelVisible = true; // 二级部分显示 that.twoLevelVisible = true; // 二级部分显示
that.twoLevelOptions = []; that.twoLevelOptions = [];
that.threeLevelVisible = false; // 三级部分隐藏 that.threeLevelVisible = false; // 三级部分隐藏
...@@ -1155,7 +1349,18 @@ export default { ...@@ -1155,7 +1349,18 @@ export default {
that.selectLinkObj.conditionType = that.h5linkObj.conditionType; that.selectLinkObj.conditionType = that.h5linkObj.conditionType;
that.selectLinkObj.name = that.h5linkObj.name; that.selectLinkObj.name = that.h5linkObj.name;
that.selectLinkObj.url = that.h5linkObj.url;// +'?'+that.h5linkObj.fixParam+'&'+that.h5linkObj.dynamicPara; that.selectLinkObj.url = that.h5linkObj.url;// +'?'+that.h5linkObj.fixParam+'&'+that.h5linkObj.dynamicPara;
that.selectLinkObj.params = that.h5linkObj.fixParam // 去掉固定参数 20180912 that.h5linkObj.fixParam
that.selectLinkObj.params = '';
if (!!that.dynamicList.length) {
let h5DataList = JSON.parse(JSON.stringify(that.dynamicList))
h5DataList.forEach(function(ele,index){
delete ele.editAble;
delete ele.selectKey;
delete ele.inputValue;
})
that.selectLinkObj.params = h5DataList
}
that.selectLinkObj.timeSwitch = (that.h5linkObj.timeSwitch== true? 1:0) that.selectLinkObj.timeSwitch = (that.h5linkObj.timeSwitch== true? 1:0)
console.log(that.selectLinkObj) console.log(that.selectLinkObj)
// that.selectLinkObj.fixParam = that.h5linkObj.fixParam; // that.selectLinkObj.fixParam = that.h5linkObj.fixParam;
...@@ -1165,6 +1370,36 @@ export default { ...@@ -1165,6 +1370,36 @@ export default {
return; return;
} }
// 如果是第三方小程序
if (that.oneLevelTypeValue == 7) {
if (!that.thirdObj.name.trim() || !that.thirdObj.appid.trim()) {
that.$message.error({
duration: 1000,
message: "请填写链接内容"
})
return;
}
that.selectLinkObj.name = that.thirdObj.name;
that.selectLinkObj.appid = that.thirdObj.appid;//
that.selectLinkObj.params = ''
if (!!that.dynamicList.length) {
let thirdDataList = JSON.parse(JSON.stringify(that.dynamicList))
thirdDataList.forEach(function(ele,index){
delete ele.editAble;
delete ele.selectKey;
delete ele.inputValue;
})
that.selectLinkObj.params = thirdDataList
}
console.log(that.selectLinkObj)
// 触发父组件方法,传递参数
that.transData();
return;
}
// 如果选择的自定义页面 // 如果选择的自定义页面
if (that.oneLevelTypeValue == 6) { if (that.oneLevelTypeValue == 6) {
if (!that.twoLevelValue.trim()) { if (!that.twoLevelValue.trim()) {
...@@ -1234,6 +1469,7 @@ export default { ...@@ -1234,6 +1469,7 @@ export default {
resetAll() { resetAll() {
var that = this var that = this
that.h5linkVisible = false; that.h5linkVisible = false;
that.thirdlinkVisible = false; // 第三方小程序
that.linksType = ''; that.linksType = '';
that.twoLevelVisible = false; // 二级下拉 that.twoLevelVisible = false; // 二级下拉
that.threeLevelVisible = false; // 三级整个 that.threeLevelVisible = false; // 三级整个
...@@ -1242,6 +1478,22 @@ export default { ...@@ -1242,6 +1478,22 @@ export default {
that.twoLevelSelectValue = ''; that.twoLevelSelectValue = '';
that.threeLevelValue = ''; // 清空所有选择的 that.threeLevelValue = ''; // 清空所有选择的
// h5新增部分
that.dynamicRow = {
key: '',
value: '',
selectKey: '',
inputValue: '',
editAble: false
}
that.dynamicList = [];
// 第三方小程序
that.thirdObj = {
name: '',
appid: ''
}
that.selectLinkObj = { that.selectLinkObj = {
url: '', url: '',
name: '' name: ''
...@@ -1256,7 +1508,7 @@ export default { ...@@ -1256,7 +1508,7 @@ export default {
that.h5linkObj.name = ''; that.h5linkObj.name = '';
that.h5linkObj.url = ''; that.h5linkObj.url = '';
that.h5linkObj.fixParam = ''; that.h5linkObj.fixParam = '';
// that.h5linkObj.dynamicPara =''; that.h5linkObj.dynamicPara ='';
}, },
// 触发父组件方法,传递参数 // 触发父组件方法,传递参数
...@@ -1407,6 +1659,122 @@ export default { ...@@ -1407,6 +1659,122 @@ export default {
.catch(function (error) { .catch(function (error) {
console.log("error:",error); console.log("error:",error);
}) })
},
// 判断添加重复字段
isRepeat(arr) {
var hash = {};
for(var i in arr) {
if(hash[arr[i]]){
return true;
}
hash[arr[i]] = true;
}
return false;
},
// dynamicChange
dynamicChange(e) {
var that = this
console.log(e);
that.dynamicRow.selectKey = e
},
dynamicBlur(e) {
var that = this
that.dynamicRow.inputValue = e.target.value
},
// 添加参数
addDynamic() {
var that = this
// console.log(that.dynamicRow)
if (!that.dynamicRow.key||!String(that.dynamicRow.value).trim()) {
that.$message.error({
duration: 1000,
message: "请完善参数"
})
return
}
that.dynamicList.push(JSON.parse(JSON.stringify(that.dynamicRow)))
var arrKeys = that.dynamicList.map(ite=>ite.key) // 返回对象中键值集合的数组
var arrValues = that.dynamicList.map(ite=>ite.value)
// console.log("所有name:",arrValues)
if (that.isRepeat(arrKeys) || that.isRepeat(arrValues)) {
that.dynamicList.splice(that.dynamicList.length-1,1)
// arrKeys.splice(that.dynamicList.length-1,1)
that.$message.error({
duration: 1000,
message: "选项不能重复"
})
// console.log(that.dynamicList,arrKeys,arrValues)
return;
}
// 添加对象到数组中
// that.dynamicList.push(that.dynamicRow)
},
// 点击编辑
editDynamic(index,obj) {
var that = this
obj.editAble = true
},
// 删除参数
delDynamic(index) {
var that = this
console.log(index)
that.dynamicList.splice(index,1)
},
// 确认编辑
confirmDynamic(index,obj) {
var that = this
console.log(index,obj)
if (!obj.selectKey||!String(obj.inputValue).trim()) {
that.$message.error({
duration: 1000,
message: "请完善参数"
})
return
}
// 判断重复字段
var copyList = JSON.parse(JSON.stringify(that.dynamicList))
copyList[index].key = obj.selectKey
copyList[index].value = obj.inputValue
var copyKeys = copyList.map(ite=>ite.key) // 返回对象中键值集合的数组
var copyValues = copyList.map(ite=>ite.value)
// console.log("所有name:",copyValues)
if (that.isRepeat(copyKeys) || that.isRepeat(copyValues)) {
copyList.splice(copyList.length-1,1)
// copyKeys.splice(copyList.length-1,1)
that.$message.error({
duration: 1000,
message: "选项不能重复"
})
// console.log(copyList,copyKeys,copyValues)
return;
}
obj.key = obj.selectKey;
obj.value = obj.inputValue;
// console.log(that.dynamicList)
// return;
// 隐藏编辑部分
obj.editAble = false;
},
// 取消编辑
cancleDynamic(index,obj) {
var that = this
console.log(index,obj)
// 恢复原值
obj.selectKey = obj.key
obj.inputValue = obj.value
// 隐藏编辑部分
obj.editAble = false;
} }
}, },
...@@ -2350,6 +2718,10 @@ export default { ...@@ -2350,6 +2718,10 @@ export default {
width: 450px; width: 450px;
} }
.h5-el-input {
width: 150px;
}
.el-textarea { .el-textarea {
vertical-align: top; vertical-align: top;
} }
...@@ -2360,6 +2732,50 @@ export default { ...@@ -2360,6 +2732,50 @@ export default {
color: #5073FD; color: #5073FD;
} }
.h5-table {
width: calc(100% - 86px);
display: inline-block;
vertical-align: top;
.el-table {
width: auto;
thead th, thead tr {
background: #f1f3f7;
}
th {
padding: 12px 0;
min-width: 0;
text-align: center;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
}
td {
text-align: center;
padding: 0;
}
.el-input {
width: 150px;
}
.el-select {
width: 150px;
}
}
.el-table th {
padding: 12px 0;
min-width: 0;
box-sizing: border-box;
text-overflow: ellipsis;
vertical-align: middle;
position: relative;
}
}
.dynamic-param-select { .dynamic-param-select {
vertical-align: top; vertical-align: top;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment