前端工作总结03
1、includes()与indexOf()的结合使用解决删除否的情况。
因为我们的列表中有些会有签发signMark的值，有些没有，
我用map方法返回相应数组某些值，返回一些新数组，如果没有返回的是[undefined],此时我们的length为1，所以我们可以通过arr.indexOf(undefined)来反映是否有这个值，通过includes()来判断是否数组中是否有某些值。用map()方法，includes()，indexOf()三个结合使用判断。
其实includes()也可以顶替indexOf()进行使用，includes(undefined)也是可以使用，indexOf(undefined)>=0两个是一个意思。
2. 解决内容过长 提示语显示不全的问题 2023/11/30
dev-bugfix
全局src/style/index.scss.el-tooltip__popper { max-width: 300px; } 把这个调大或者取消掉
3.运营端出现一种情况就是提交业务审核的时候发现，有问题，控制台报错，一直走不下去。
看了下控制台出现的原因是因为fileUrl这个字段取不到，因为后端做了判断有提示语，所以我就进行了搜索，发现子组件里边有一个clearFile方法，初始化fileUrl的值付了一个null，但是我们在父组件判断的时候是按照''空的字符串进行判断的，所以出现了这个问题。
所以把fileUrl的值赋值为'' 就可以了。
4、子票区间显示问题
if(rowData.billRange&&rowData.billRange.indexOf(",") != -1) { label = rowData.billRange.replace(/\,/g, "-")}
5、mixin案例1 为了进行获取CFCA相关的一些信息
import Api from '@api/modules/busiCenter'
export default {
data() {
return {
boundUKeyType: '工商',
boundUKeyList: [],
boundAllUKeyList: [],
usbKeyForms: {
ukeyIssuingAuthority: 6,
SerialNumber: '',
SubjectCN: '',
IssuerDN: ''
},
endorsedRecordStatus: [
{ code: 6, label: 'CFCA' }
]
}
},
mounted() {
this.getUkeyInfo()
},
methods: {
bussinessDia(boundRecord) {
if (boundRecord.remitterBankName && boundRecord.remitterBankName.indexOf('中信') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.remitterBankName && boundRecord.remitterBankName.indexOf('上海浦东') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('CNCB') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('SPD') >= 0) {
this.boundUKeyType = 'cfca'
} else if (boundRecord.bankSource && boundRecord.bankSource.indexOf('ICBC') >= 0) {
this.boundUKeyType = '工商'
// } else if (boundRecord.acceptorBankName && boundRecord.acceptorBankName.indexOf('中信') >= 0) {
// this.boundUKeyType = 'cfca'
// } else if (boundRecord.acceptorBankName && boundRecord.acceptorBankName.indexOf('上海浦东') >= 0) {
// this.boundUKeyType = 'cfca'
} else {
this.boundUKeyType = '工商'
}
const boundUKeyList = []
for (var i = 0; i < this.boundAllUKeyList.length; i++) {
if (this.boundUKeyType == '工商' && this.boundAllUKeyList[i].ukeyIssuingAuthority == 1) {
boundUKeyList.push(this.boundAllUKeyList[i])
}
if (this.boundUKeyType == 'cfca' && this.boundAllUKeyList[i].ukeyIssuingAuthority != 1) {
if (this.boundAllUKeyList[i].serialNo) {
boundUKeyList.push(this.boundAllUKeyList[i])
}
}
}
this.boundUKeyList = boundUKeyList
// this.getUkeyInfo();
this.boundUKeyDialog = true
},
getUkeyInfo() {
Api.getUkeyInfo().then((resp) => {
if (resp.code == 200) {
const respdata = resp.data
this.boundAllUKeyList = respdata
}
})
},
closeBoundUkey() {
this.boundUKeyDialog = false
this.doInit()
},
confirmBoundUkey() {
if (this.boundUKeyType == 'cfca') {
this.usbKeyDialog = true
if (this.$refs.usbKeyForm) {
this.$refs.usbKeyForm.clearform()
}
} else {
this.usbKeyVarity()
}
}
}
}
6、mixin案例2 判断Ukey这个盾是否有效
import Api from '@api/modules/busiCenter'
export default{
data(){
return {
usbKeyDialog:false,
boundUKeyDialog: false,
dialogHTMLVisible: false
}
},
methods:{
dialogHTMLShow(){
this.dialogHTMLVisible = true;
},
closeNotHasUkey(){
this.dialogHTMLVisible = false;
},
usbKeyVarity(val){
this.usbKeyDialog = false
this.boundUKeyDialog = false
// console.log(val);
this.register()
},
async addUsbkey() {
const varity={
serialNo:this.usbKeyForms.SerialNumber, //序列号
issuerDn:this.usbKeyForms.IssuerDN //颁发者DN
}
const resp = await Api.getUkeyVerify(varity)
if(resp.code==200){
const respdata=resp.data
if(respdata.status=='0'){
if(this.usbKeyForms.CSPName.indexOf('Ucan')>-1){
const billData = this.multipleSelections[0];
let source = '<?xml version="1.0" encoding="utf-8"?><T><D><M>'+
'<k>出票人名称</k><v>'+ billData.remitterName+
'</v></M><M><k>出票人账号</k><v>'+ billData.remitterAcctNo+
'</v></M><M><k>票据金额</k><v>'+ billData.billAmount+
'</v></M><M><k>收款人姓名</k><v>'+ billData.payeeName+
'</v></M></D></T>'
this.$refs.usbKeyForm.SignOnClick512(source);
}else{
this.usbKeyVarity();
}
}else if(respdata.status=='1'){
this.$message.error('UKey证书已过期，请使用其他UKey')
}else if(respdata.status=='2'){
this.$message.error('UKey证书已吊销，请使用其他UKey')
}else if(respdata.status=='3'){
this.$message.error('UKey证书匹配失败，请使用其他UKey')
}
// this.usbKeyDialog = false
}
},
usbKeyFormFn(val){
this.usbKeyForms=JSON.parse(JSON.stringify(val))
// this.usbKeyForms.ukeyIssuingAuthority=6
},
}
}
7、退出登录清空vuex协议的缓存
methods: {
...mapActions({
clearUserInfo: 'clearUserInfo'
clearTreaty: 'clearTreaty'
}),
this.clearTreaty()
}
export default {
state: {
user: sessionStorage.getItem('user') && JSON.parse(sessionStorage.getItem('user')) || {},
signStatus: sessionStorage.getItem('signStatus'),
signXpStatus: sessionStorage.getItem('signXpStatus'),
signZcStatus: sessionStorage.getItem('signZcStatus')
},
mutations: {
saveUser(state, user) {
state.user = user
sessionStorage.setItem('user', JSON.stringify(user))
sessionStorage.setItem('authorization', user.token)
},
signStatus(state, status) {
state.signStatus = status
sessionStorage.setItem('signStatus', status)
},
signXpStatus(state, status) {
state.signXpStatus = status
sessionStorage.setItem('signXpStatus', status)
},
signZcStatus(state, status) {
state.signZcStatus = status
sessionStorage.setItem('signZcStatus', status)
},
clearXy(state) {
state.signStatus = ''
state.signXpStatus = ''
state.signZcStatus = ''
}
},
actions: {
clearUserInfo(context) {
context.commit('saveUser', {})
},
clearTreaty(context) {
context.commit('clearXy')
},
saveSignStatus(context, signStatus) {
context.commit('signStatus', signStatus)
},
saveXpStatus(context, signStatus) {
context.commit('signXpStatus', signStatus)
},
saveZcStatus(context, signStatus) {
context.commit('signZcStatus', signStatus)
}
},
getters: {
getUser(state) {
return state.user
}
}
}
8、全局使用mixin
我们常常会在src文件夹里边放入很多mixin，那么请大家思考一下，如果单组件单独引用，我们可以去做，如果全局呢？
第一步：main.js
import commonMixin from './mixin/commonMixin'
Vue.mixin(commonMixin)第二步：mixin里边建立这个js 文件
export default {
methods: {
showChangeIngAlert() {
console.log('走这里吗？')
const enterpriseInfo = JSON.parse(sessionStorage.getItem('enterpriseInfo')) || {companyDto: {}}
const { updateStage } = enterpriseInfo.companyDto
// updateStage 0---无事发生 1---提交待审核 2---审核通过（企业名称修改了） 3---银行账户信息认证 4---银行账户认证完成 5---审核不通过
if(updateStage == '1') {
this.$alert('企业信息变更审核中，暂时不能做该业务', '提示', {
confirmButtonText: '确定',
type: 'warning',
center: true
})
return true
}
return false
}
}
}
第三步：在文件中直接使用
// 提交复核
applyClick() {
if(this.showChangeIngAlert()) { return }
if (this.multipleSelections.length > 1) {
this.$message.error('只能选择一条数据')
} else if (this.multipleSelections.length > 0) {
this.$emit('applyClick', this.multipleSelections)
} else {
this.$message.error('请至少选择一条数据')
}
},9、通过提交一直转圈 获取tradeInfoId 添加判断
问题是一个提交业务的按钮出现的，出现这个问题在于控制台报错，走不下去了，
tradeInfoId，因为不存在这个键，怎么会不报错呢？
tradeInfoId: getMybjObj.tradeInfoDto.tradeInfoId || ''看一行这个代码，如果没有值的时候就会出现错误
咱们更改一下
let tradeInfoId = ''
if (getMybjObj.tradeInfoDto && getMybjObj.tradeInfoDto.tradeInfoId) {
tradeInfoId = getMybjObj.tradeInfoDto.tradeInfoId
} else {
tradeInfoId = ''
}
tradeInfoId: tradeInfoId10、本地可以反显，但是线上就出现问题，问题如下：
TypeError: Cannot read properties of undefined (reading ‘replace‘)
然后再点击第一个文件指向这一行的代码
query.billRange==0?"0-0":query.billRange.replace(/\,/g,'-')我们思考一下
如果说 没有query.billRange，那么replace方法肯定用不了，那么我们想一想本地可以，线上不可以，本地和线上的区别在哪里呢？那就是异步任务的问题，有的时候跑的快也会出现问题，所以会出现this.$nextTick，所以我们在获取值的时候给其他的值直接赋值，然后再使用新的值也可以解决这个问题。代码如下：
if (this.query.billRange) {
this.billRange = this.query.billRange
} else {
this.billRange = ''
}
billRange==0?"0-0":billRange.replace(/\,/g,'-')11、feat: 配置生产环境体验版访问域名
我们可以通过ip来判断，直接上代码
const urlHost = window.location.host.indexOf('123.249.122.186') > -1 ? 'http://123.249.122.186:8904' : window.location.host.indexOf('cctcr.cctgroup.com.cn') > -1 ? 'https://cctcr.cctgroup.com.cn' : 'http://uat.dpdemo.cctcr.cn:8902'
if(key=='7-1'){
var url1 = `${urlHost}/demo/#/loginTransfer?key=0&token=${token}`
window.open(url1, '_blank')
return
}
if(key=='7-2'){
var url1 = 'http://localhost:8085/micro-ucenter/home'
window.open(url1, '_blank')
return
}
if(key=='7-3'){
var url1 = `${urlHost}/demo/#/loginTransfer?key=2&token=${token}`
window.open(url1, '_blank')
return
}
if(key=='7-4'){
var url1 = `${urlHost}/demo/#/loginTransfer?key=3&token=${token}`
window.open(url1, '_blank')
return
}
this.$store.dispatch('menu/saveActivePrimaryMenu', keyCode).then(() => {
this.$router.replace({ path: '/home', query: { key }})
})12、上传企业logo展示大小调整
<div class="navbar-left-font" :class="{'logoPathDiv': logoPath}">
.navbar-left-font.logoPathDiv {
width: 180px;
height: 50px;
img{
width: 180px;
height: 50px;
}
}
13、el-date-picker在Ie下的样式问题(外边框断断续续)
.el-date-editor .el-range-input{
height: 98% !important;
}
因为盒子高度太高盖住了