# 额度系统-前端项目说明

## 框架核心功能说明

本框架主要基于数据模型来进行开发，数据模型与接口一一对应。模型存放目录为`src/controller`。

1. 完整数据模型说明

   ```javascript
   // 数据模型基类，
   import ApiModel from '@/utils/core/apiModel'
   // 如果该接口需要访问贷前的接口，则需要引入getEnvInfo方法
   import { getEnvInfo } from '@/utils/utils'

   // 模型表单项
   const formList = [
     {
       type: 'input', // 输入类型（input：输入框，select：下拉选择框，date：日期选择，dateRange：日期范围选择，）
       label: '申请编号',
       value: '', // 这里可以设置初始值
       name: 'invoiceSerialno'
     },
     {
       type: 'select',
       label: '当前流程状态',
       value: [], // 注意这里是多选，所以为数组类型
       name: 'phaseNoArray',
       options: [], // options 为后续调用接口生成
       attrs: ['filterable', 'multiple', 'clearable', 'collapse-tags'] // 改参数与element一致
     },
     {
       type: 'dateRange', // 日期范围类型
       label: '申请时间',
       value: [],
       name: 'applyTime', // 这里的name作为标识不能省略
       names: ['beginApplyTime', 'endApplyTime'] // 开始与结束日期分别对应的字段名
     },
     {
       type: 'input',
       label: '转账金额',
       name: 'crtAmt',
       isMoney: true, // isMoney标识该输入项是否为金额，如果为true，则只能输入数字
       rules: [{ required: true }] // rules用来控制表单校验规则，如required来标识是否为必填项
     },
     {
       type: 'input',
       label: '审批机构',
       name: 'approveOrgName',
       attrs: ['readonly'] // 该项为只读项
     },
     {
       type: 'select',
       label: '线下退款账户类型',
       value: '',
       name: 'accountingChannel',
       descName: 'accountingChannelDesc', // descName 标识代表如果该项为只读的时候，需获取接口的字段名作为该项的value
       options: [],
       rules: [{ required: true }]
     },
     {
       type: 'input',
       label: '开票申请金额',
       name: 'invoiceApplyAmount',
       children: [
         // children项表明该项包含多个子项，最终会按照子项生成表单数据
         {
           type: 'input',
           value: '',
           name: 'beginInvoiceApplyAmount'
         },
         {
           type: 'input',
           value: '',
           name: 'endInvoiceApplyAmount'
         }
       ]
     }
   ]

   // 模型表格信息
   const tableList = [
     {
       label: '开票类型',
       prop: 'invoiceTypeDesc'
     },
     {
       label: '开票申请金额',
       prop: 'invoiceApplyAmount',
       isMoney: true // isMoney表明该项会进行金额格式化展示
     },
     {
       prop: 'action', // action 项为按钮操作项目，使用方法后续说明
       label: '操作管理',
       attrs: {
         // width: '260px',
         fixed: 'right'
       },
       type: 'buttons'
     }
   ]

   // 导出接口模型，其中options为预留参数项，实际使用可通过传入不同options项，改变输出接口
   export default options => {
     // 接口地址，required
     const api = 'server/acceptDiscountInvoiceList'

     return new ApiModel({
       // baseConf项为调用贷前接口才需要
       baseConf: {
         // 调用贷前接口
         apiPrefix: ctsApiPrefix
       },
       api,
       formList, // 若无表单相，该项可省略
       tableList, // 若无表格相，该项可省略
       request(params) {
         // request为实际请求配置，其中有get, post, upload（上传文件时使用）, submit(下载文件时使用)四种方法
         return this.post(params)
       }
     })
   }
   ```

2. 使用方法说明

```javascript
// 导入数据模型
import CommForm from '@/components/CommForm'
import CommTable from '@/components/CommTable'
import acceptDiscountInvoiceList from '@/controller/acceptDiscountInvoiceList'

// 定义按钮项
const recordButtons = [
  {
    text: '贷款详情',
    prop: 'businessDetailButton'
  },
  {
    text: '发送详情',
    prop: 'sendDetailButton'
  }
]

const model = acceptDiscountInvoiceList()

// 生成模型对应tableList项中的具体按钮项
model.computedItem = item => {
  return {
    ...item,
    action: {
      buttons: recordButtons.filter(button => Number(item[button.prop]) === 1)
    }
  }
}

this.model = model
// getFormList生成表单数据，可以传入初始值对象。formList作为CommForm组件主要参数
this.formList = model.getFormList()
// getTableList生成表格数据，作为CommTable组件主要参数
this.tableHeader = model.getTableList()

// 其他具体使用方法请查看相关源码
```

## 环境配置（env 文件）说明

- 本地开发环境

  - 配置文件：.env.development
  - 运行命令 `npm run serve`

- 开发环境

  - 配置文件：.env.dev
  - 对用构建命令 `npm run dev`

- 测试环境

  - 配置文件：.env.someone
  - 对用构建命令 `npm run someone`

- 正式环境(对应分支master)

  - 配置文件：.env.production
  - 对用构建命令 `npm run build`


## 配置项说明（以.env.development 为例）

- 环境标识
  - development： 本地环境
  - dev： 开发环境
  - test： 测试环境
  - someone: 测试环境
  - production： 正式环境

- NODE_ENV = 'development'


## git 仓库分支说明

- master
  用于存储线上稳定、可运行、自以为无 Bug 的代码最新版本。

- dev
  该分支作废,千万不要将dev分支合并到其他分支

- dev_pro
  开发分支，也是开发环境的发布分支。建议每天上班 pull、下班 push，避免长期不合并导致冲突代码。

- product
  生产分支

## 目录

- src 主目录
    - assets 静态资源文件（icon/提示图片）
    - components vue组件
      - dialogAssembly 所有弹框组件
      - searchTable 路由对应的list页面
      - tabs 处理详情/编辑详情对应tabs页面
    - controller 接口相关配置信息
    - pages 每个list页面对应一个文件
    - plugins vue相关的配置项
    - router 路由配置
    - store 状态管理
    - style 公共样式文件
    - utils 工具类请求封装

## 文档说明


## 测试环境权限问题
- 设置浏览器Session Storage增加menuId
  如: key:g_menu_id value:489 对应测试环境左侧菜单的data-menuid