鹏友金融-核心系统管理功能-前端项目说明

环境配置（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" } ] }; };

  文档说明