<!--
 * @Author: PengJianTian
 * @Date: 2020-01-08 15:12:00
 * @LastEditTime: 2020-03-13 15:59:19
 * @LastEditors: PengJianTian
 * @Description:
 * @FilePath: \rlc-adm-web\README.md
 * @
 -->
# 鹏友金融-核心系统管理功能-前端项目说明

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

- 本地开发环境

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

- 开发环境

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

- 测试环境

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

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

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


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

- 环境标识
  - development： 本地环境
  - dev： 开发环境
  - test： 测试环境
  - production： 正式环境
  - someone： 本地联调临时地址

- NODE_ENV = 'development'


## git 仓库分支说明

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

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

- product
  生产上线分支

- release(暂未使用)
  预发布分支，作为测试环境的发布分支。它是指发布正式版本之前（即合并到 master 分支之前），我们可能需要有一个预发布的版本进行测试。预发布结束以后，必须合并进 Dev 和 Master 分支。

## 目录

- src 主目录
    - assets 静态资源文件（icon/提示图片）
    - http API请求
    - router 路由配置
    - store 状态管理
    - style 公共样式文件
    - utils 工具类
    - views 页面
      - components 公共组件
        - CreateForms.vue 表单生成组件
        - EditTable.vue 可编辑表格生成组件
        - FileUpload.vue 文件上传组件
        - Fold.vue 查询表单控制组件
        - imagePreview.vue 图片预览组件
        - LeftMenus.vue 详情左侧菜单组件
        - MenusTile.vue 详情标题组件
        - ModuleTitle.vue 模块标题组件
        - ProTable.vue 表格生成组件
        - SearchCondition.vue 表格查询组件
        - TableList.vue 公共表格类生成组件

## view文件页面文件说明(以clientsManage为例)
  - components 存放该页面相关的公共组件
  - tableComponent 存放详情左侧菜单对应的组件
  - config 当前文件下页面相关的配置项
    - column.config.js 表格列配置项
      ```javascript
      export const individualCusHouseInfo = [
        {
          prop: "creditLine",
          label: "授信额度(审批确定)",
          width: "150"
        },
        {
          prop: "operationOption", // operationOption 项为按钮操作项目，使用方法后续说明
          width: "100px",
          label: "操作管理",
          align: "center",
          fixed: "right",
          type: "buttons"
        }
      ];
    - condtion.config.js 搜索条件配置项
      ```javascript
      export const IMAGEDATACONFIGCOND = [
          {
            name: "customerType",
            label: "客户类型",
            type: "select",  // 输入类型（input：输入框，select：下拉选择框，date：日期选择，dateRange：日期范围选择等） 具体有哪些类型可以参考CreteForms.vue组件定义的类型
            options: [], // options 为后续调用接口生成
            value: "" // 注意这里如果是多选，则为数组类型
          },
        ];
      ```
    - defValues.config.js
      ```javascript
      // 该对象内的字段与formItem.config.js内一起使用,可以理解成name对应的属性值即是这里的对象属性
      export const enterpriseCusFirstStockInfoDefault = {
        firstShareholderName: "",
        firstShareholdercertType: "",
        firstShareholderCertid: ""
      };
      ```
    - formItem.config.js 表单配置项
      ```javascript
        export const stockInfo = [
          {
            name: "shareholderType",
            label: "股东类型",
            type: "select", // 同condtion.config.js
            options: [],
            readonly: false, // 是否只读
            placeholder: "请选择",
            collapse: 1, // 文本框的长度控制 最大值为4即满屏
            value: ""
          },
        ]
      ```
    - menus.config.js
      ```javascript
        {
        label: "基本信息",  // 左侧菜单名字
        isActive: true, // 是否激活
        defColor: "",
        isShow: true, // 是否显示
        name: "IMAGEDATACONFIGBASEINFO",
        type: "FORMS", // 当前菜单内组件的形式
        children: [  // 有多个菜单是配置
          {
            label: "基本信息",
            isShow: true,
            name: "baseInfo",
            type: "FORMS",
            formItems: [...basicInfo], // 表单配置配置项
            defValues: {  // 表单的model值
              ...customerBasicInfoDefault
            },
            formRules: {  // 表单规则
              ...IMAGEDATACONFIGRULES(isView)
            }
          }
        ]
      }
    ```
  - rules.config.js 表单必填项的校验规则
    ```javascript
    export const modifyMarkMsg = (required = true) => {
      return {
        changeRemark: [  // 对应表单字段名字
          {
            required,
            message: "请输入维护备注",
            trigger: "blur"
          }
        ]
      };
    };
    ```
## 文档说明