# 精简SaaS前端界面配置说明
## 导航栏配置

#### 配置文件
```
resources/json/navigation.json
```
#### 格式样例：
```json
[{
    "text": "采购",
    "iconCls": "x-fa fa-shopping-basket",
    "items": [{
        "text": "制单",
        "items": [{
            "id": "purchase",
            "text": "采购单",
            "addType": "purchase-purchase-formpanel",
            "viewType": "purchase-purchase-querypanel"
        }]
    }, {
        "text": "报表",
        "items": [{
            "id": "puchasedetail",
            "text": "采购明细表"
        }]
    }]
}]
```
#### 字段说明
```
text: 一级菜单项名称
iconCls： 一级菜单项图标
items:  二级菜单
items[0].text:  二级菜单项标题（左）
items[1].text: 二级菜单项标题（右）
items[i].items: 二级菜单项
items[i].items[i].id： 二级菜单项id
items[i].items[i].text: 二级菜单项名称
items[i].items[i].viewType: 点击名称进入的界面的xtype
items[i].items[i].addType: 可选设置，添加“新增”按钮，点击进入xtype对应界面
```

## 主从表配置
#### 基础主从表组件
```
view: view.core.form.FormPanel
controller: view.core.form.FormPanelController
viewModel: view.core.form.FormPanelModel
```
- 自定义的主从表view、controller、viewModel需要继承自以上基础组件。


#### 配置字段说明

| 字段名 | 说明 | 必填 | 样例 |
| --- | --- | --- | --- |
| extend | 继承，默认继承基础主从表 | √ | "saas.view.core.form.FormPanel" |
| xtype | 文件路径，使用'-'连接，全小写 | √ | "purchase-purchase-formpanel" |
| controller | 控制层，可定义自定义的方法等。命名与xtype一致 | x | "purchase-purchase-formpanel" |
| viewModel | Model层，可定义数据绑定关系等。命名与xtype一致 | x | "purchase-purchase-formpanel" |
| viewName | 用于获取界面自定义配置 | x | "purchase-purchase-formpanel" |
| caller | 用于获取单据编号 | √ | "Purchase" |
| addTitle | 新增时打开的页面标题 | √ | "采购单" |
| idField | id字段 | √ | "id" |
| codeField | 编号字段 | √ | "pu_code" |
| statusField | 状态字段 | √ | "pu_status" |
| statusCodeField | 状态码字段 | √ |  "pu_statuscode" |
| readUrl | 取数接口 | √ | "/api/purchase/purchase/read" |
| saveUrl | 保存接口 | √ | "/api/purchase/purchase/save" |
| auditUrl | 审核接口 | √ | "/api/purchase/purchase/audit" |
| deleteUrl | 删除接口 | √ | "/api/purchase/purchase/delete" |
| toolBtns | 自定义按钮 | x | [ Button ] |
| defaultItems | 界面字段 | √ | [ Field ]|

##### 主表字段配置说明

包括部分原有配置和主从表专属配置，不包括detailGridField

| 字段 | 说明 | 必填 | 样例 |
| --- | --- | --- | --- |
| name | 字段名，根据该值设置字段绑定 | √ | "pu_vendcode" |
| ignore | 是否忽略，为真时getFormData方法不会得到该字段值 | x | true |
| defaultValue | 默认值 | x | "1001" |

##### 从表配置说明

从表被定义为一个formfield(_xtype=detailGridField_)，可以与其他字段一同放到主从表的items中。

| 字段 | 说明 | 必填 | 样例 |
| --- | --- | --- | --- |
| storeModel | grid model | √ | "saas.model.purchase.purchasedetail" |
| detnoColumn | 序号列，配置该项后无需再columns定义序号列 | √ | "pud_detno" |
| deleteDetailUrl | 删除明细接口 | √ | "/api/purchase/purchase/deleteItem" |
| allowEmpty | 是否允许从表数据为空，为真时表单校验不会校验从表非dirty数据，无数据时也可以保存 | x | false |
| showCount | 是否显示合计栏 | x | true |
| columns[i].ignore | 是否忽略，为真时在调用保存方法时不会取到该列值 | x | true |
| columns[i].allowBlank | 是否必填列 | x | true |
| columns[i].isValid | 自定义校验规则，传入value，返回boolean | x | function(v) { return v > 10; } |
| columns[i].defaultValue | 默认值，只对设置了dataIndex的column生效 | x | 40 |
- 需要根据columns在models文件夹下添加storeModel对应的Model

---

## 查询列表配置
#### 基础查询列表组件
```
view: view.core.query.QueryPanel
controller: view.core.query.QuertPanelController
viewModel: view.core.query.QueryPanelModel
```
#### view配置字段说明

| 字段 | 说明 | 必填 | 样例 |
| --- | --- | --- | --- |
| extend | 一般需要继承基础查询列表组件 | √ | "saas.view.core.query.QueryPanel" |
| xtype | 文件路径，使用'-'连接，全小写 | √ | "purchase-purchase-querypanel" |
| controller | 控制层，可定义自定义的方法等。命名与xtype一致 | x | "purchase-purchase-querypanel" |
| viewModel | Model层，可定义数据绑定关系等。命名与xtype一致 | x | "purchase-purchase-querypanel" |
| viewName | 用于获取界面自定义配置 | x | "purchase-purchase-querypanel" |
| queryFormItems | 查询字段 | √ | 参看[查询字段配置说明](#cxzd) |
| moreQueryFormItems | 更多查询字段 | x | 参看[查询字段配置说明](cxzd) |
| queryGridConfig | 查询列表配置 | √ | 参看[列表配置说明](#) |

查询字段配置说明


| 字段 | 说明 | 必填 | 样例 |
| --- | --- | --- | --- |
| xtype | 字段类型 | √ | "textfield" |
| name | 字段绑定名 | √ | "pu_vendname" |
| fieldLabel | 字段名| x | "供应商名称" |
| fieldType | 字段类型，默认根据xtype自动创建，可以指定["string", "date", "number", "enum"] | x | "string" |
| operation | 字段条件连接符，默认根据xtype自动创建 | x | "between" |
| getCondition | 自定义条件规则，定义后将使用该方法生成条件，传入参数为字段value，返回sql条件 | x | function(value) { return "pu_vendname like'" + value + "'" } |
| showDetail | 当该值为true时，该字段生成条件后查询结果将以关联列表展示 | x | true |
| isShowDetail | 自定义需要按照关联列表显示的条件，传入参数为字段value，返回Boolean，默认返回!!value | x | function(value) {return !!value;} |

列表配置说明

| 字段 | 说明 | 必填 | 样例 |
| --- | --- | --- | --- |
| idField | id字段 | √ | "pu_id" |
| codeField | code字段 | √ | "pu_code" |
| addTitle | 单据名称，新增tab标题 | √ | "采购单" |
| addXtype | 主从表单据xtype | √ | "purchase-purchase-formpanel" |
| defaultCondition | 默认条件 | x | "pu_class='采购单'" |
| baseVastUrl | 查询列表接口 | √ | "/api/purchase/purchase/" |
| baseColumn | 基础列配置 | √ | [ Column ] |
| relativeColumn | 关联列设置 | x | [ Column ] |

## 放大镜配置

dbfindtrigger，用于选择基础资料

| 字段 | 说明 | 必填 | 样例 |
| --- | --- | --- | --- |
| dataUrl | 查询接口 | √ | "/api/document/vendor/list" |
| addXtype | 新增基础资料页面xtype | √ | "document-vendor-formpanel" |
| addTitle | 新增单据名称，新增tab标题 | √ | "供应商资料" |
| dbfinds | 字段赋值配置，from：基础资料字段；to： 主表或从表字段;ignore：非模糊查询字段 | √ | [{
                            from:'id',to:'pu_vendid',ignore:true
                        },{
                            from:'ve_code',to:'pu_vendcode'
                        },{
                            from:'ve_name',to:'pu_vendname'
                        }] |
| dbtpls | 模糊查询展示列 | √ | [{
                            field:'ve_code',width:100
                        },{
                            field:'ve_name',width:100
                        }] |
| defaultCondition | 默认查询条件 | x | "ve_statuscode='OPEN'" |
| dbSearchFields | 自定义查询字段 | √ | [ Ext.form.field ] |
| dbColumns | 列配置 | √ | [ Ext.grid.column ] |

---

### 前端配置调整日志

- 2018-10-20

deleteDetailUrl 配置调整 formpanel.form->formpanel.detailGridField

- 2018-10-27 10:10:33

主从表从表配置detnoColumn属性说明变更

- 2018-10-31 11:50:22

从表必填配置说明allowEmpty、isValid

- 2018-10-31 18:00:55

从表默认值配置说明

- 2018-11-1 17:52:58

从表显示合计栏配置说明

- 2018-11-6 08:39:18

放大镜配置说明