vue + vant + jq 实际项目开发
项目结构：
1、html页面
2、js 当前页面主要逻辑
3、common.js 公共逻辑， jq写法
① 过滤器
② 公共方法
4、component.js 公共组件1、html页面：index.html
vue
2、当前页面js逻辑 index.js
new Vue({
el: '#app',
data() {
return {
xmgl_info: 0,
khgl_info: 0,
khgl_db: {},
authLimit: {}
};
},
methods: {
},
mounted() {
this.authLimit = getAuthListByUserIdApp(this);
if(this.authLimit.xmgl){
getFq(this);
getLx(this);
getJz(this);
getJx(this);
// 单独处理：其他方法精确到人，此方法精确到部门 需判断是否有此权限
if(this.authLimit.xmfq_lx) getLcLx(this);
this.xmgl_info = xmgl_info == 0 ? '' : xmgl_info;
}
if(this.authLimit.yhgl){
getXx(this); // 客户录入
getFw(this); // 客户服务
getLxr(this); // 客户联系人变更
this.khgl_info = khgl_info == 0 ? '' : khgl_info;
}
}
});3、common.js
$(function(){
// 解决手机端返回上一页后，页面不刷新问题
window.addEventListener('pageshow', function(event) {
// alert(event.persisted + "-" + JSON.stringify(window.performance) + " - " + window.performance.navigation.type);
if (event.persisted || window.performance && window.performance.navigation.type == 2) {
//如果检测到页面是从“往返缓存”中读取的，刷新页面
window.location.reload();
}
});
// 校验用户登录状态
if(location.href.indexOf("/login.html") == -1 && location.href.indexOf("/psd.html") == -1) getUser();
});
// vue filters - 项目类型
Vue.filter('projectType', function(value,type){
var types = getProjectTypes();
var desp = [];
for(var d in types){
if(value == types[d].id){
desp[0] = types[d].name;
break;
}
}
return type == "str" ? desp[0] : desp;
});
// vue filters - 项目类型
Vue.filter('projectType', function(value,type){
var types = getProjectTypes();
var desp = [];
for(var d in types){
if(value == types[d].id){
desp[0] = types[d].name;
break;
}
}
return type == "str" ? desp[0] : desp;
});
// 获取项目类型
function getProjectTypes(){
var types = [];
$.ajax({
type:"POST",
url: "/scabcmp/protype/getAllType",
dataType: "json",
data: {
code: "xmlx"
},
async: false,
success:function(result){
if(result.ret.succeed){
for(var d in result.list){
var d = {
id : result.list[d].id,
name : result.list[d].name
}
types.push(d);
}
}else {
this.$toast(result.ret.retMsg);
}
}
});
return types;
}
4、component.js
① foot 组件：
// 底部导航栏
Vue.component("foot", {
props: ["index"],
data() {
return {
footType: "", // 项目：1； 客户：2
authLimit: {},
xtgl_db: {},
xtgl_lc: {},
xtgl_db_totle: 0,
xtgl_lc_totle: 0,
khgl_db: {},
khgl_lc: {},
khgl_db_totle: 0,
khgl_lc_totle: 0
}
},
template: '',
methods: {
},
mounted() {
this.authLimit = getAuthListByUserIdApp(this);
if(location.href.indexOf("/project/") != -1){
this.footType = 1;
getProjectAll(this, this.authLimit);
}else if(location.href.indexOf("/customer/") != -1){
this.footType = 2;
getCustomerAll(this, this.authLimit);
}
}
});
② 审批模块：
// approve
Vue.component("approve", {
props: ["id"],
data() {
return {
result: 1,
content: ''
}
},
template: '\
审批意见
\
\
- 同意
\
- 不同意
\
- 退回
\
\
\
\
',
methods: {
setopinion: function(index){
this.result = index;
},
}
});
③ 流程状态：
// flow state log
Vue.component("statelog", {
props: [],
data() {
return {
id: '',
stateList: [],
pid: 0,
workflowType: 0
}
},
template: '\
\
\
{{ stateList.length-index }}. {{ item.worknode_name }}
\
\
操作人：{{ item.name }}
\
状态：{{ item.worknode_status }}
\
接收时间：{{ item.create_time }}
\
操作时间：{{ item.time }}
\
操作耗时：{{ item.spend_time }}
\
\
\
\
',
methods: {
getState: function(){
if((this.pid > 0) && (this.workflowType > 0)){
var _this = this;
$.ajax({
type:"POST",
url:"../../../project/getApproveRecords",
dataType: "json",
data:{
projectId: _this.pid,
workflowType : _this.workflowType
},
success:function(result){
if(result.ret.succeed){
_this.stateList = result.approveList;
} else {
_this.$toast(result.ret.retMsg);
_this.error = true;
}
}
});
}
}
},
mounted() {
this.pid = jQuery.url.param("id");
this.workflowType = jQuery.url.param("workflowType");
this.getState(this.id);
}
});
html页面中调用common.js的过滤器：
