# node版本
目前`16.14.0`版的也支持（用`dart-sass`替换`node-sass`后，不再有`12.22.6 32`的限制）

# 部署说明
## 部署时切勿删除服务器上的config.js
打包时会忽略config.js,避免被替换

## OTA测试环境自动部署
在`git-bash`里运行下面命令来自动部署到OTA测试环境：
```bash
npm run deploy:dev
```
需要先安装7z命令(`npm install -g 7zip`)

# 项目配置
## 模板配置修改（基于vue init webpack）
### /.eslintrc.js
``` javascript
'plugin:vue/strongly-recommended'  // 使用vue官方推荐规则
```
### vscode 自动格式化配置
``` javascript
"eslint.autoFixOnSave": true,
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "html",
    { "language": "vue", "autoFix": true }
],
"eslint.options": {
    "plugins": [
    "vue"
    ]
},
```
### /config/index.js
``` javascript
build: {
    ...
    assetsPublicPath: './',   // 打包基于相对路径
    ...
    productionSourceMap: true,  // 关闭sourcemap
}
```
### /config/
各环境下对应api接口地址

运行指令见`package.json`


# 文档相关

## 接口文档

http://192.168.30.150:9988/swagger-ui.html#!/%E7%A5%A8%E7%A7%8D%E8%AE%BE%E7%BD%AE/addTicketTypeUsingPOST

## 设计稿
https://lanhuapp.com/web/#/item/board?pid=331d4cea-01ed-4686-8973-b33400aff846

## 产品文档
https://mubu.com/doc/pi4jtipPVp

`{"username":"admin", "password":"123456"}`


## 服务器
192.168.30.150 clear:123456

## 前端代码：
/home/clear/frontend
访问：
http://piaodevjava.cleartv.cn/frontend/ xxx


## 后端接口访问地址：
http://piaodevjava.cleartv.cn/swagger-ui.html


# 本项目相关问题及注意事项、经验总结

## router-view
在 router-view上加上一个唯一的key，来保证路由切换时都会重新渲染触发钩子
``` html
<router-view :key="key"></router-view>
```
``` javascript
computed: {
    key() {
        return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
    }
}
```

## 自定义事件传递多个参数

如 $emit('custom',arg1,arg2)

则 @custom="func(arguments)"

使用参数
``` javascript
func (args) {
    let [arg1,arg2]=...args
    console.log(arg1,arg2)
}
```

## 表格验证
http://www.cnblogs.com/Kummy/p/9470393.html


## 导航显示权限控制
`/src/router/index.js`

### 动态路由部分详见
``` javascript
let routerMap = [
  {
    path: '/ticketSale',
    component: Layout,
    name: '售票管理',
    meta: {title: '售票管理', icon: 'ticketSale'},  // 图标格式为svg,存放目录 `/src/icons/svg`。文件名与`icon`属性相对应
    redirect: 'noredirect',
    alwaysShow: true,   // 为显示美观，必须添加
    children: [
      {
        path: 'retail',
        name: 'Retail',
        component: () => import('@/views/sellManage/retail'), // 页面按模块加载
        meta: {title: '散客售票', permissionName: 'ticket_sale'}  // permissionName对应后台的权限列表
      }
    ]
  }
]
```
### 子页面 各权限显示控制

1. 子页面权限会在 `src/store/modules/permission.js` 的 `filterAsyncRouter` 方法中对比后台的权限列表进行筛选。

2. 最终结果就是：子路由的 `meta对象` 会新增一个属性 `permissionList` 。子页面权限控制就是根据这个属性进行的判断。

3. `src/main.js` 中混入了全局方法 `checkPermission(type)`。`type`为具体的权限类型。

    例如后台获取的权限列表为
    ``` json
    [
    "ticket_setting:list",
    "ticket_setting:add",
    "ticket_setting:edit",
    "ticket_setting:delete",
    "ticket_sale:all"
    ]
    ```
4. 票种设置页会 **自动生成** 对应 `permissionList` : `['add','edit','delete','list']`

    售票页面 对应 `permissionList` : `['all']`

    页面权限相关的元素，设置显示或者隐藏：

    **列表显示**
    ``` html
    <element v-if="checkPermission('list')"></element>
    ```

    **编辑按钮显示**
    ``` html
    <element v-if="checkPermission('edit')"></element>
    ```

# G2 图表
https://viserjs.github.io/docs.html#/viser/guide/usage
https://antv.alipay.com/zh-cn/g2/3.x/tutorial/index.html

# Echarts
http://www.echartsjs.com/index.html
https://github.com/ecomfe/vue-echarts

# 百度图说
http://tushuo.baidu.com/