前端工作总结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  为了进行获取相关的一些信息

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 判断这个盾是否有效

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('已过期，请使用其他')
        }else if(respdata.status=='2'){
          this.$message.error('已吊销，请使用其他')
        }else if(respdata.status=='3'){
          this.$message.error('匹配失败，请使用其他')
        }
        // 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: 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、上传企业logo展示大小调整

<div class="navbar-left-font" :class="{'logoPathDiv': logoPath}">


 .navbar-left-font.logoPathDiv {
        width: 180px;
        height: 50px;
        img{
          width: 180px;
          height: 50px;
        }
      }

12、el-date-picker在Ie下的样式问题(外边框断断续续)

.el-date-editor .el-range-input{
  height: 98% !important;
}

因为盒子高度太高盖住了 

13、线上出现一些禁用效果无效。 

通过父组件传值过来来进行判断是否给true，但是发现有个问题就是偶尔会出现这个true不存在，这个值通过computed，解决的方案就是直接给了true，不用传的值，因为这个组件单用，并不影响，

通过这个我们应该思考一下，一般情况下，我们应该通过传值是没有问题了，一般值出现问题给this.$nextTick进行使用也是可以的，出现问题的本质还是没有拿到相应的值。

14、工作台出现问题。 

问题的出现发现我们的控制台报了一个错误，大概意思就是一个getInfo方法找不到，然后找了相关的代码，发现这个方法调用了，但是方法被注释掉了，后来通过沟通是不需要了，所以需要把调用的代码也需要去掉就可以了。

不影响后边的调用。

15、滚动条的效果不是很如意怎么办

function smoothScroll(targetPosition) {
  const startPosition = window.pageYOffset
  const distance = targetPosition - startPosition
  const duration = 1000 // 滚动时间
  let start = null

  function step(timestamp) {
    if (!start) start = timestamp
    const progress = timestamp - start
    const scrollY = progress / duration * distance + startPosition
    window.scrollTo(0, scrollY)
    if (progress < duration) {
      window.requestAnimationFrame(step)
    }
  }

  window.requestAnimationFrame(step)
},


// 在滚动事件中调用smoothScroll函数，传入目标位置
window.addEventListener('wheel', (e) => {
  e.preventDefault()
  const targetPosition = window.pageYOffset + e.deltaY * 800
  console.log('获取的数据是', targetPosition)
  this.smoothScroll(targetPosition)
})

上边的方法慎重使用，因为鼠标的滚动有默认的事件，但是我们要知道是可以进行操作的，里边的两个参数一个是延迟时间及滚动到的地方

16、网页的titile更改（Vue项目）

项目中出现两个功能菜单出现公用的组件，再设置单页面路由的时候titile都一样，导致显示的内容一样，那么我们通过查看在后置守卫有相应的代码

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'

NProgress.configure({ showSpinner: false })

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'hash',
  routes
})

router.afterEach((to) => {
  if (to.meta.title) {
    document.title = '平台-' + to.meta.title
  }
  NProgress.done()
})

router.beforeEach((to, from, next) => {
  NProgress.start()
})

export default router

 在后置守卫进行了设置。

我们给了两个解决方法

1、重新再写一个路由重新命名，name，title不一样，但是引用的组件一样

2、在后置守卫里边进行判断做更改，代码如下。

if (to.name == 'billAuditExaminApprove') {
      const urls = decodeURIComponent(to.fullPath.split('?')[1].split('=')[1])
      if (JSON.parse(urls).billBeh === 'BB03') {
        document.title = '平台-' + '贴现业务审核-审批'
      } else {
        document.title = '平台-' + to.meta.title
      }
    } else {
      document.title = '平台-' + to.meta.title
    }

延申

decodeURIComponent()

decodeURIComponent() 函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

17、table原生css样式不容许内容自适应宽度 

table{
     table-layout:fixed;
     word-break:break-all;
}

18、el-descriprtion的内容有数字时候在IE下失效

第一步 首先给内容套一个div标签

第二步 给标签一个属性样式

word-wrap:break-all; 

19、有个el-radio的提示语莫名出现

从我知道的分支上发现并没有相关的代码，然后又问相关的功能环境的分支，确定了是某个分支的代码，然后找到了，发现是某个同事增加了校验条件，但是校验的变量一样了，这样就会有结果不同功能但是同一校验，提交功能上不去。

解决的测试就是校验放在组件上，谁的校验谁用，分别校验。