本框架主要基于数据模型来进行开发，数据模型与接口一一对应。模型存放目录为src/controller。
```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)
}
})
}
```
// 导入数据模型
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.development
npm run serve开发环境
配置文件：.env.dev
npm run dev测试环境
配置文件：.env.someone
npm run someone正式环境(对应分支master)
配置文件：.env.production
npm run buildNODE_ENV = 'development'
master
用于存储线上稳定、可运行、自以为无 Bug 的代码最新版本。
dev
该分支作废,千万不要将dev分支合并到其他分支
dev_pro
开发分支，也是开发环境的发布分支。建议每天上班 pull、下班 push，避免长期不合并导致冲突代码。
product
生产分支