devil
October 22, 2018, 1:30am
1
Hi Vladimir, I found Framework7 send same HTTP request in so many times? and the back link of navigation was not work. Could you know what happened and how do I fixed?
<template>
<f7-page @pageReinit="getDataItems">
<f7-navbar title="待办流程" back-link="Back"></f7-navbar>
<f7-list media-list>
<f7-list-item
swipeout
v-for="item in items"
v-bind:key="item.id"
v-bind:title="item.title"
v-bind:subtitle="item.businessNo"
v-bind:text="item.createTime"
v-bind:after="item.name"
@swipeout:open="saveCurItem(item)">
<f7-swipeout-actions right>
<f7-swipeout-button close @click=" $refs.actionsOneGroup.open()">More</f7-swipeout-button>
</f7-swipeout-actions>
</f7-list-item>
</f7-list>
<f7-actions ref="actionsOneGroup" right>
<f7-actions-group>
<f7-actions-button @click="checkDetail">查看</f7-actions-button>
<f7-actions-button @click="admitApplication">审批</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button color="red">Cancel</f7-actions-button>
</f7-actions-group>
</f7-actions>
</f7-page>
</template>
<script>
import Framework7 from 'framework7/framework7.esm.bundle.js'
var app = new Framework7();
export default {
data () {
return {
items: [],
curItem:null,
}
},
created () {
app.request.setup({
headers: {
'AccessToken': sessionStorage.getItem('accessToken'),
'JSESSIONID': sessionStorage.getItem('userToken')
}
});
},
watch: {
items: {
handler(){
},
deep:true
}
},
methods: {
getDataItems: function(){
let that = this;
app.request.json('http://172.18.84.213:8181/camel/rest/workflow/tasks', {'page': 1, 'limit': 10, 'jsonStr': ''}, function (result) {
if (result.totalCount >0) {
that.items = result.data;
}
})
},
saveCurItem:function (item) {
this.curItem = item;
},
checkDetail:function () {
let item = this.curItem;
this.$f7router.navigate('/oa/' + item.businessKey.split(':')[0] + '/' + item.entityId)
},
admitApplication: function () {
let item = this.curItem;
this.$f7router.navigate('/oa/admitL1/' + item.entityId + "/" + item.id)
},
showAlert: function (title, text) {
app.dialog.alert(text, title, () => {
this.$f7router.back();
});
},
},
}
</script>
Framework7 doesn’t send anything on its own. Your code is wrong, follow one of the official templates examples http://framework7.io/templates/ . You should never call new Framework7()
in Framework7-Vue app
getDataItems: function(){
console.log('init');
}
See how many times it’s being called, and then
getDataItems: function(){
console.log('init');
let that = this;
app.request.json('http://172.18.84.213:8181/camel/rest/workflow/tasks', {'page': 1, 'limit': 10, 'jsonStr': ''}, function (result) {
if (result.totalCount >0) {
that.items = result.data;
}
})
}
Not sure if items redraw would trigger reinit
I also see you use sockjs. Can you try to isolate that for testing?
devil
October 23, 2018, 7:03am
4
@nolimits4web thank you for your reply. but I am not clear in your templates examples. Although You said I should never call new Framework7() in Framework7-Vue app, but how do i get Framework7 instance? I got error message ‘[Vue warn]: Error in created hook: “TypeError: Cannot read property ‘request’ of undefined”’ when i used follow code :
let app = this.$f7;
app.request.json('http://172.18.84.213:8181/camel/rest/redheadapplys' ...........
Please tell me the detail.
devil
October 23, 2018, 7:12am
5
plague69:
console.log(‘init’);
@plague69 I got follow result with your idea. The init was called 11 times. So how can I fix it.
It is initiated automatically inside of f7-app
component.
You should get F7 instance as this.$f7
in component. If it is not available, e.g. you see the error, then call it within $f7ready:
this.$f7ready((f7)=>{
// do something with `f7`
})
devil
October 25, 2018, 12:59am
7
@nolimits4web Hi Vladimir, I modified my code with your command, but there was still a lot of HTTP connection of same request. Could you please help me to review it ? I am beginner of Framework7. I fond it very useful. I strongly expect you to give me any advice.
<template>
<f7-page >
<!--<f7-page @pageReinit="getDataItems">-->
<f7-navbar title="红头文件申请" back-link="Back"></f7-navbar>
<f7-block-title>
<f7-button round fill raised href="/oa/workflow/applyRedHeadTable/-1" >添加</f7-button>
</f7-block-title>
<f7-block-title></f7-block-title>
<f7-list media-list>
<f7-list-item
swipeout
v-for="(item) in items"
v-bind:key="item.id"
v-bind:title="item.title"
v-bind:after="item.docStatus"
v-bind:subtitle="item.businessNo"
v-bind:text="item.orgName"
@swipeout:open="saveCurItem(item)"
@swipeout:deleted="delRecord">
<f7-swipeout-actions right>
<f7-swipeout-button close @click=" $refs.actionsOneGroup.open()">More</f7-swipeout-button>
</f7-swipeout-actions>
</f7-list-item>
</f7-list>
<f7-actions ref="actionsOneGroup">
<f7-actions-group>
<f7-actions-button @click="checkDetail">查看</f7-actions-button>
<f7-actions-button v-show="isShow('编辑')" @click="editDetail">编辑</f7-actions-button>
<f7-actions-button v-show="isShow('启动')" @click="startApproval">启动</f7-actions-button>
<f7-actions-button v-show="isShow('删除')" @click="delRecord">删除</f7-actions-button>
</f7-actions-group>
<f7-actions-group>
<f7-actions-button color="red">Cancel</f7-actions-button>
</f7-actions-group>
</f7-actions>
</f7-page>
</template>
<script>
// import Framework7 from 'framework7/framework7.esm.bundle.js'
// var app = new Framework7();
export default {
name: "applyRedHead",
data() {
return {
items: [],
curItem:null
}
},
created() {
this.$f7ready((f7)=>{
let that = this;
f7.request.setup({
headers: {
'AccessToken': sessionStorage.getItem('accessToken'),
'JSESSIONID': sessionStorage.getItem('userToken')
}
});
console.log('init');
f7.request.json('http://172.18.84.213:8181/camel/rest/redheadapplys', {
'page': 1,
'limit': 10,
'jsonStr': '',
'otherStr': '',
'start': '0'
}, function (result) {
if (result.success === undefined) {
that.items = result.data;
}
})
})
},
watch: {
items: {
handler(){
},
deep:true
}
},
methods: {
isShow: function(label) {
let status = -1;
let that = this;
if(that.curItem == null) {
return false;
}
status = that.curItem.status;
switch(status){
case 0 :
if (label.includes("编辑")){
return true;
} else if (label.includes("启动")){
return true;
} else if (label.includes("删除")){
return true;
}
break;
case 1:
if (label.includes("编辑")){
return false;
} else if (label.includes("启动")){
return false;
} else if (label.includes("删除")){
return false;
}
break;
case 2:
if (label.includes("编辑")){
return false;
} else if (label.includes("启动")){
return false;
} else if (label.includes("删除")){
return false;
}
break;
}
},
saveCurItem:function (item) {
this.curItem = item;
},
checkDetail:function () {
this.$f7router.navigate("/oa/redheadapply/" + this.curItem.id)
},
editDetail: function () {
this.$f7router.navigate("/oa/workflow/applyRedHeadTable/" + this.curItem.id)
},
delRecord: function () {
let url = "http://172.18.84.213:8181/camel/rest/redheadapplys/" + this.curItem.id;
fetch(url,
{method: "delete",
headers: {
"Content-Type": "application/json;charset=UTF-8",
'AccessToken': sessionStorage.getItem('accessToken'),
'JSESSIONID': sessionStorage.getItem('userToken')
},
}).then (function (response) {
if (response.status == 200){
this.showAlert("提示","记录删除成功")
}else {
this.showAlert("提示","删除记录失败")
}
}).catch(function(err){
console.log("Fetch错误",err)
});
},
startApproval: function () {
let that = this;
let url = "http://172.18.84.213:8181/camel/rest/redheadapplys/workflow/startProcess" ;
let app = that.$f7;
app.dialog.confirm("流程启动后业务数据将无法修改!确定要启动吗?","提示", () => {
app.request.json(url, { 'id': that.curItem.id, }, function (result) {
that.showAlert("提示", result["msg"])
if(result.success == true) {
that.getDataItems();
}
})
})
},
showAlert: function (title, text) {
let app = this.$f7;
app.dialog.alert(text, title, () => {
this.$f7router.back();
});
}
},
}
</script>
<style scoped>
</style>
Code doesn’t tell me much. Would be good to see live example
devil
October 31, 2018, 6:48am
9
@nolimits4web Thanks, My issue have fixed.already. the problem was the same as you said in previous…
“You should get F7 instance as this.$f7 in component. If it is not available, e.g. you see the error, then call it within $f7ready:”