工作优化代码

报修列表优化方案：

repair/index.vue代码修改:

• 所有行内样式去掉统一放入style样式标签中

• data数源要整理合并，放入单独文件去引用，现在文件里太冗余。

• vue单文件组件里最好export default {}一致。我建议data、props、钩子、watch、computed、components

• exportExcel()方法优化：

• 首先此方法出现许多paramsAry.push('startTime=' + this.queryInfo[attr])相同操作，故可封装。再则字符串拼接使用es6模板字符串用法即可。if嵌套太深，需要优化。

*此处为新增封装方法
pushParams(array, args) {
    array.push(`${args}=this.queryInfo[attr]`)
}
exportExcel() {
    const paramsAry = []
    const token = this.getToken()
    const subSys = this.getSubSys()
    let paramsStr = ''
    let url = `${process.env.BASE_API}${exportExcel()}?token=${token}&subSys=${subSys}`
    for (const attr in this.queryInfo) {
        if (this.queryInfo[attr] !== '') {
            if (attr === 'startDate') {
                if (this.date === 0) {
                  const date = new Date()
                  paramsAry.push('createTime=' + this.handleDate(date))
                } else {
                  this.pushParams(paramsAry, 'startTime')
                }
          } else if (attr === 'endDate') {
            this.date !== 0 && this.pushParams(paramsAry, 'endTime')
          } else {
            paramsAry.push(attr + '=' + this.queryInfo[attr])
        }
      }
    }
    paramsAry.length &&  (url += `${paramsStr}&${paramsAry.join('&')}`)
    this.$refs.excelRepairBtn.href = url
}

• initRepairPage()方法优化

initRepairPage() {
    this.constListInfo.tagList = findConstList('Const', 'tag')
    this.states = this.$store.getters.serverconst.RepairConstant.status
    this.states.push("全部")
    this.statesTagList = []
    #这是一个map方法的优化
    this.statesTagList = this.states.map((el, index) => {
        return  {id: index, name: el, count: 0}
    })
    getCountByStatus().then(res => {
        let countList = res.data
        if (countList.length) {
            countList.forEach((countItem) => {
              this.statesTagList = this.statesTagList.map((stateItem, stateIndex) => {
                return countItem.status === stateIndex ? {...stateItem, count: countItem.total} :stateItem
              })
            })
        }
    })
    BaseTable.initMethod(this, getListApiUrl())
    this.queryInfo.status && this.queryEntry.equals.status = ''
    this.fetchData()
    this.initCreateTime()
    this.checkUrlPrefix(this.getgetSubSys())
}
#这是判断`this.getSubSys()`的方法，后期如若增加判断条件，只需改变Map即可,让判断更加优雅简洁,只要`if else`判断多的方法都可以使用Map数据池进行优化。
checkUrlPrefix(prefix){
    const actions = new Map([
        ['ENT',[true, false]],
        ['WWW',[false, true]],
        ['default',[false, true]]
    ])
    #使用`get`方法得到`value`
    let action = actions.get(prefix) || actions.get('default')
    this.showJs = action[0]
    this.showZd = action[1]
}

• getTableData()方法优化

#从性能来说 switch case要性能高于if else，从可读性和维护性来说，这样的写法要明显优于之前的if多层嵌套
getTableData(info) {
    for (const attr in info) {
        if (info[attr] !== '') {
            switch(true) {
                case (attr === 'status'):
                case (attr === 'auditPass'):
                    this.queryEntry.equals[attr] = info[attr];
                    break;
                case ((attr === 'startDate' || attr === 'endDate') && this.date === 0):
                    this.queryEntry.gtEquals = {}
                    this.queryEntry.ltEquals = {}
                    const date = new Date()
                    this.queryEntry.equals.createTime = this.handleDate(date)
                    break;
                case (attr === 'startDate'):
                    this.queryEntry.gtEquals.createTime = info[attr]
                    break;
                case (attr === 'endDate'):
                    this.queryEntry.ltEquals.createTime = info[attr]
                    break;
                default:
                this.queryEntry.like[attr] = info[attr]
            }
        }
    }
    this.fetchData(1)
}