luoJunYong.123
3 years ago
parent
e725ccbd18
commit
2da8aa4240
9 changed files with 101 additions and 480 deletions
@ -1,32 +0,0 @@ |
||||
export const saveData = { |
||||
|
||||
// 通过混入的方式可以保存数据 由于混入函数的created是先于引入混入的组件的created执行的，所以可以先拿到上次推出时的数据直接先一步渲染。
|
||||
// 其实这个函数我写再tipsBefore里了 不过有些页面是不需要依赖前一个页面的，所以区分开了。
|
||||
|
||||
created() { |
||||
if(sessionStorage.getItem(this.moduleName)) { |
||||
const getBeforeData = JSON.parse(sessionStorage.getItem(this.moduleName)) |
||||
for(const key in getBeforeData) { |
||||
this.form[key] = Number(getBeforeData[key])? Number(getBeforeData[key]): getBeforeData[key] |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
// 清空这个组件所保存的数据
|
||||
clearSaveData() { |
||||
sessionStorage.removeItem(this.moduleName) |
||||
} |
||||
}, |
||||
|
||||
|
||||
// 销毁组件之前将该组件中的数据保存起来
|
||||
beforeDestroy() { |
||||
let tmpForm = {} |
||||
for(const key in this.form) { |
||||
if(this.form[key] !== '') { |
||||
tmpForm[key] = this.form[key] |
||||
} |
||||
} |
||||
sessionStorage.setItem(this.moduleName, JSON.stringify(tmpForm)) |
||||
} |
||||
} |
||||
@ -1,176 +1,74 @@ |
||||
const nameMap = { |
||||
sex: { |
||||
1: '男', |
||||
2: '女' |
||||
}, |
||||
idType: { |
||||
82: '统一社会信用代码证', |
||||
83: '身份证' |
||||
}, |
||||
certificateType: { |
||||
83: '身份证', |
||||
115: '转账支票', |
||||
116: '现金支票' |
||||
}, |
||||
currency: { |
||||
12: 'CNY人民币' |
||||
}, |
||||
goldLogo: { |
||||
13: '钞户' |
||||
}, |
||||
accountQuality: { |
||||
14: '个人结算户', |
||||
101: '基本户', |
||||
102: '一般户', |
||||
103: '专用户', |
||||
104: '临时户' |
||||
}, |
||||
accountQualitysTwo: { |
||||
14: '个人结算户', |
||||
101: '基本户', |
||||
102: '一般户', |
||||
103: '专用户', |
||||
104: '临时户' |
||||
}, |
||||
accountQualitysThree: { |
||||
14: '个人结算户', |
||||
101: '基本户', |
||||
102: '一般户', |
||||
103: '专用户', |
||||
104: '临时户' |
||||
}, |
||||
voucherType: { |
||||
15: 'IC卡', |
||||
115: '转账支票', |
||||
116: '现金支票', |
||||
123: '存单', |
||||
127: '银行' |
||||
}, |
||||
accountType: { |
||||
16: '一类户', |
||||
17: '二类户', |
||||
97: '结算户', |
||||
98: '结算户', |
||||
99: '委托保障金户', |
||||
100: '资本临时户' |
||||
}, |
||||
drawWay: { |
||||
18: '密码', |
||||
93: '现金', |
||||
94: '转账', |
||||
114: '印鉴', |
||||
125: '部分支取', |
||||
126: '全部支取并销户' |
||||
}, |
||||
drawWayType: { |
||||
133: '现金' |
||||
}, |
||||
accountQualitysTwo: { |
||||
14: '个人结算户', |
||||
101: '基本户', |
||||
102: '一般户', |
||||
103: '专用户', |
||||
104: '临时户' |
||||
}, |
||||
voucherTypesTwo: { |
||||
15: 'IC卡', |
||||
115: '转账支票', |
||||
116: '现金支票', |
||||
123: '存单', |
||||
127: '银行' |
||||
}, |
||||
voucherTypesThree: { |
||||
15: 'IC卡', |
||||
115: '转账支票', |
||||
116: '现金支票', |
||||
123: '存单', |
||||
127: '银行' |
||||
}, |
||||
accountTypesTwo: { |
||||
16: '一类户', |
||||
17: '二类户', |
||||
97: '结算户', |
||||
98: '结算户', |
||||
99: '委托保障金户', |
||||
100: '资本临时户' |
||||
}, |
||||
accountTypesThree: { |
||||
16: '一类户', |
||||
17: '二类户', |
||||
97: '结算户', |
||||
98: '结算户', |
||||
99: '委托保障金户', |
||||
100: '资本临时户' |
||||
}, |
||||
data() { |
||||
var validateEveryData = (rule, value, callback) => { |
||||
// console.log("callback", callback);
|
||||
// console.log("校验某一项的规则对象", rule);
|
||||
// console.log("用户输入的值", value);
|
||||
|
||||
drawWaysTwo: { |
||||
18: '密码', |
||||
93: '现金', |
||||
94: '转账', |
||||
114: '印鉴', |
||||
125: '部分支取', |
||||
126: '全部支取并销户' |
||||
}, |
||||
drawWaysThree: { |
||||
18: '密码', |
||||
93: '现金', |
||||
94: '转账', |
||||
114: '印鉴', |
||||
125: '部分支取', |
||||
126: '全部支取并销户' |
||||
}, |
||||
chargeWay: { |
||||
13: '密码', |
||||
}, |
||||
chargeWay: { |
||||
13: '密码', |
||||
135: '现金', |
||||
}, |
||||
certificateDeposit: { |
||||
92: '现金' |
||||
}, |
||||
extendPeriod: { |
||||
90: '不续存', |
||||
91: '续存' |
||||
}, |
||||
depositTerm: { |
||||
84: '3个月', |
||||
85: '6个月', |
||||
86: '1年', |
||||
87: '2年', |
||||
88: '3年', |
||||
89: '5年' |
||||
}, |
||||
withdrawWay: { |
||||
125: '部分支取', |
||||
126: '全部支取并销户' |
||||
}, |
||||
extendDepositTarget: { |
||||
128: '不续存', |
||||
129: '续存1年', |
||||
130: '续存3年', |
||||
131: '续存5年' |
||||
}, |
||||
noticeType: { |
||||
95: '1天', |
||||
96: '7天' |
||||
}, |
||||
depositType: { |
||||
92: '现金' |
||||
}, |
||||
accountManagement: { |
||||
105: '工业存款', |
||||
106: '商业存款', |
||||
107: '外贸存款', |
||||
108: '其他存款' |
||||
}, |
||||
calculateWay: { |
||||
109: '季度', |
||||
110: '半年', |
||||
111: '1年' |
||||
}, |
||||
outAccountWay: { |
||||
112: '按月', |
||||
113: '满页' |
||||
}, |
||||
} |
||||
// 对输入框类型的校验
|
||||
if (value) { |
||||
if ((value + "").length > 0) { |
||||
// 用于回显时候的校验，因为输入的时候是字符串类型的数字，但是回显的时候可能就是数字
|
||||
callback(); // cb函数告知校验结果，必须要加
|
||||
return; |
||||
} |
||||
} |
||||
|
||||
// 对下拉框类型的校验
|
||||
if ( |
||||
(rule.itemType == "selectOne") | |
||||
(rule.itemType == "selectTwo") | |
||||
(rule.itemType == "selectThree") |
||||
) { |
||||
if (value) { |
||||
if ((value + "").length > 0) { |
||||
// 注意枚举值是数字类型的，所以这里要转换成为字符串类型的
|
||||
callback(); |
||||
return; |
||||
} |
||||
} |
||||
} |
||||
|
||||
// 根据不同的类型给予不同的校验提示
|
||||
switch (rule.itemType) { |
||||
case "text": |
||||
callback(new Error(rule.labelName + "不能为空")); // 文本类型的规则简单，就是得填写
|
||||
break; |
||||
case "number": |
||||
callback(new Error(rule.labelName + "请按规则填写")); // 数字类型的规则比较繁多
|
||||
break; |
||||
case "textarea": |
||||
callback(new Error(rule.labelName + "不能为空")); // 文本域类型的规则也简单，就是得填写
|
||||
break; |
||||
case "selectOne": |
||||
callback(new Error("请选择" + rule.labelName)); // 下拉框类型一 得填写
|
||||
break; |
||||
case "selectTwo": |
||||
callback(new Error("请选择" + rule.labelName)); // 下拉框类型二 得填写
|
||||
break; |
||||
case "selectThree": |
||||
callback(new Error("请选择" + rule.labelName)); // 下拉框类型三 多选数组得填写
|
||||
break; |
||||
case "dateRange": |
||||
callback(new Error("请选择" + rule.labelName + "范围")); // 下拉框类型三 多选数组得填写
|
||||
break; |
||||
|
||||
default: |
||||
break; |
||||
} |
||||
}; |
||||
return { |
||||
// 此对象用于存储各个下拉框的数组数据值，其实也可以挂在vue的原型上，不过个人认为写在data中好些
|
||||
selectTwoOptionsObj: {}, |
||||
// 用于下拉框加载时的效果
|
||||
loadingSelect: false, |
||||
// 绑定的数据
|
||||
form: {}, |
||||
// 校验规则
|
||||
validateEveryData: validateEveryData, |
||||
}; |
||||
}, |
||||
|
||||
作者：水冗水孚 |
||||
链接：https://juejin.cn/post/7060322827148197895
|
||||
来源：稀土掘金 |
||||
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 |
||||
Loading…
Reference in new issue