前端工作总结03

2023-12-04

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、8903 223 运营端复核通过提交一直转圈 获取tradeInfoId 添加判断

问题是一个提交业务的按钮出现的,出现这个问题在于控制台报错,走不下去了, tradeInfoId,因为不存在这个键,怎么会不报错呢?

tradeInfoId: getMybjObj.tradeInfoDto.tradeInfoId || ''

看一行这个代码,如果没有值的时候就会出现错误

咱们更改一下

let tradeInfoId = ''
        if (getMybjObj.tradeInfoDto && getMybjObj.tradeInfoDto.tradeInfoId) {
          tradeInfoId = getMybjObj.tradeInfoDto.tradeInfoId
        } else {
          tradeInfoId = ''
        }


tradeInfoId: tradeInfoId

10、本地可以反显,但是线上就出现问题,问题如下:

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;
        }
      }
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

前端工作总结03 的相关文章

随机推荐