项目杂记

一、router封装懒加载

export const page403 = {
  path: '/403',
  name: 'err-403',
  component: resolve => require(['@/views/page403.vue'], resolve) //懒加载
}

export const otherRouter = {
  path: '/home',
  name: 'other-router',
  component: Main,
  children: [
    {
      path: 'home-index',
      name: 'home-index',
      meta: {
        title: '首页'
      },
      component: resolve => require(['@/views/home.vue'], resolve)
    }
  ]
}

二、qs库：

import qs from 'qs';
const url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
// 转为对象
console.log(qs.parse(url));
const a = {name:'hehe',age:10};
// 转为url参数形式
console.log(qs.stringify(a))

三、加密库-js-md5

md5('123456')

四、iview库表格自定义表头数据并动态添加按钮

<template>
    <Table
      style="margin-top: 40px"    //样式
      :columns="columns"           //表头数据
      :loading="tableLoading"   //表示数据是否在加载中。。。 ture|false
      :data="tableData">  //表格内部数据
    </Table>
</template>

<script>
export default{
    data(){
        return {
            //表头数据
            columns: [
          {
            title: '体测名称',
            render: (h, params) => {
              return h('div', `${params.row.year}年${params.row.version === 1 ? '春季体测' : '秋季体测'}`)
            }
          },
          {
            title: '体测项目',
            render: (h, params) => {
              return h('div', projectList[params.row.project])
            }
          },
          {
            title: '开放预约时间',
            render: (h, params) => {
              return h('div', [
                h('p', params.row.appointmentBeginTime),
                h('p', params.row.appointmentEndTime)
              ])
            }
          },
          {
            title: '体测时间',
            render: (h, params) => {
              return h('div', [
                h('p', `${params.row.physicalBeginDate}---${params.row.physicalEndDate}`),
                h('p', `${params.row.additionalRules === 1 ? '包含周六周日' : '不含周六周日'}`)
              ])
            }
          },
          {
            title: '体测地点',
            key: 'testAddress'
          },
          {
            title: '创建时间',
            key: 'createDate'
          },
          {
            title: '修改时间',
            key: 'updateDate'
          },
          {
            title: '操作',
            render: (h, params) => {
              return h('div', {
                style: this.twrapper
              }, [
                h('span', {
                  style: this.tdefault,
                  directives: [
                    {
                      name: 'hasBtn',
                      value: '查看'
                    }
                  ],
                  on: {
                    click: () => {
                      appointmentApi.getPhysicalAppointmentVoById({
                        id: params.row.id
                      }).then(data => {
                        if (data !== 'isError') {
                          this.currentAppointment = data
                          this.lookModal.isShow = true
                        }
                      })
                    }
                  }
                }, '查看'),
                h('span', {
                  style: this.twarning,
                  directives: [
                    {
                      name: 'hasBtn',
                      value: '编辑'
                    }
                  ],
                  on: {
                    click: () => {
                      appointmentApi.getPhysicalAppointmentVoById({
                        id: params.row.id
                      }).then(data => {
                        if (data !== 'isError') {
                          this.currentAppointment = data
                          this.openWriteModal()
                        }
                      })
                    }
                  }
                }, '编辑'),
                h('span', {
                  style: this.twarning,
                  directives: [
                    {
                      name: 'hasBtn',
                      value: '预约数据'
                    }
                  ],
                  on: {
                    click: () => {
                      this.infoModal.appointmentId = params.row.id
                      this.infoModal.isShow = true
                    }
                  }
                }, '预约数据')
              ])
            }
          }
        ]
        }
    }
}
</script>

五、项目的构成

├── build/               # Webpack 配置目录
├── dist/                # build 生成的生产环境下的项目
├── src/                 # 源码目录（开发都在这里进行）
│   ├── assets/            # 放置需要经由 Webpack 处理的静态文件
│   ├── components/        # 公共组件
│   ├── api/               # 前后端接口封装
│   ├── filters/           # 过滤器
│   ├── store/    　　　　 # 状态管理
│   ├── routes/            # 路由
│   ├── services/          # 服务（统一管理 XHR 请求）
│   ├── utils/             # 工具类js（各种引入库）
│   ├── views/             # 路由页面组件
│   ├── app.js             # 启动文件
│   ├── index.html         # 静态基页
├── static/              # 放置无需经由 Webpack 处理的静态文件
├── .babelrc             # Babel 转码配置
├── .eslintignore        # （配置）ESLint 检查中需忽略的文件（夹）
├── .eslintrc            # ESLint 配置
├── .gitignore           # （配置）需被 Git 忽略的文件（夹）
├── package.json         # （这个就不用多解释了吧）
├── package-lock.json    # （以记录当前状态下实际安装的各个npm package的具体来源和版本号)

六、Echars圆形图百分比显示

 tooltip: {
            show: true,
            trigger: 'item',
            formatter: (params) => {
              return params.name + ':' + Math.floor(Circular[params.dataIndex].value / this.nbumber * 100) + '%'
            }
          },

七、千分位显示数值

"1234567894".replace(/(\d)(?=(?:\d{6})+$)/g, "$1.")

--》1234.567894