dhcc-front-component
安装步骤
// 进入模板目录
npm install // 安装项目依赖，等待安装完成之后
本地开发
// 开启服务器，浏览器访问 http://localhost:8080
npm run dev
构建生产
// 执行构建命令，生成的dist文件夹放在服务器下即可访问
npm run build
组件使用说明与演示
//涉及全局的公共组件已注册，路径为src/common/script/globalComponents.js 调用组件时直接使用标签，如表单组件 <v-form></v-form>
vForm Attributes
| 参数 | 说明 | 类型 |
|---|
| arrList | 渲染表单的结构(具体prop看下面的详情) | Array |
| search | 该表单是否应用于检索条件区域,如果为true则支持检索并隐藏其他按钮（默认false） | Boolean |
| buttonGroup | 表单需要的按钮组，参数固定为'submit','cancle','reset',''close,分别代表 新增、清空、重置、关闭。其他根据需求需要的按钮请使用插槽。插槽名称为slotBtn。如果不加这个属性时默认新增时按钮为（提交、清空、关闭）;编辑时按钮为（提交、重置、关闭） | Array |
| url | 提交表单的接口 | String |
| findById | 编辑或详情时返显数据的接口与参数集合 | Object |
| formTemplate | 提交之后保持在原有页面，需要这个参数;可参照用户管理或者机构管理 | Object |
| labelWidth | 表单域标签的宽度 | String |
| labelPosition | 表单域标签的位置 | String |
arrList Attributes
| 参数 | 说明 | 类型 |
|---|
| type | 表单类型(目前支持input,textarea,select,date,daterange,password,tree,cascader) | String |
| name | 字段名 | String |
| value | 默认值） | String |
| param | 当type为select时，必须加param参数，值为字典参数 | String |
| customOption | 当type为select时，自定义下拉内容，格式例如 {"0":"自","1":"定","2":"义"}，但要把param去掉 | Object |
| label | 表单标签名称 | String |
| noReset | 禁止清空，默认false | Boolean |
| disabled | 设置禁用，默认false | Boolean |
| filter | 当type为select时,需要过滤掉的选项的value | Array |
| span | 栅格布局长度 | Number |
| hide | 是否显示隐藏 注意，hide：true是隐藏，默认显示 | Boolean |
| rule | 对应表单校验规则，规则见elementui 表单校验 | Array |
| eventChange | 下拉框监听事件， 如果该下拉支持监听，使用方法见下面Form Events | Boolean |
| eventBlur | 表单失去焦点事件，用法和eventChange事件相似 | Boolean |
| md | ≥992px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) |
| lg | ≥1200px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) |
| xl | ≥1920px 响应式栅格数或者栅格属性对象 | number/object (例如： {span: 4, offset: 4}) |
vForm Events
| 事件名称 | 说明 | 使用方法 |
|---|
| eventChange | 下拉监听事件 | 在组件上绑定事件，<v-form @eventChange="方法名"> 然后在对应表单上加eventChange：true的属性。在事件内用拓展公共方法onselect()控制指定表单 |
| eventBlur | 表单失去焦点事件 | 在组件上绑定事件，<v-form @eventChange="方法名"> 然后在对应表单上加eventBlur：true的属性。在事件内用拓展公共方法onselect()控制指定表单 |
表单组件属性控制使用说明
对应控制表单属性的公共方法 Control(arr, obj) ,参数arr是要操作的表单数组，obj是对指定表单项的属性操作 例如：
let arr = [
[
{type: "input",name: "userName",value: "",label: "用户名",span: 6,header:"用户管理基本信息",rule: [
{required: true,validator: this.validator.empty,trigger: "blur"},
{max: 50,message: "长度小于50个字符",trigger: "blur"},
{validator: this.cleanSpelChar,trigger: "blur"},
{validator: this.ifThere,trigger: "blur"}]
},
{type: "input",name: "nickName",value: "",label: "用户姓名",span: 6,rule: [
{required: true,validator: this.validator.empty,trigger: "blur"}]
},
]
]
this.common.Control(arr,{
'userName':{
disabled:true
},
'nickName':{
disabled:true
}
})
目录结构介绍
|-- build // webpack配置文件
|-- config // 项目打包路径
|-- src // 源码目录
| |-- assets // 引入外部文件
| |-- common // 公共组件与方法文件夹
| |-- components // 公共组件文件夹
| |-- script // 公共方法文件夹（包含校验规则）
| |-- modules // 项目所在文件夹（可部署多个项目）
| |-- |--platform // 例如：当前项目为平台
| |-- |--|--api // 接口文件
| |-- |--|--components // 项目页面
| |-- |--|--router // 路由
| |-- |--|--script // 该项目特有js组件
| |-- |--|--App.vue // 页面入口文件
| |-- |--|--index.html // 入口html文件
| |-- |--|--index.js // 程序入口文件，加载各种公共组件
| |-- router // 路由
| |-- store // 状态管理仓库
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 代码编写规格
|-- .gitignore // 忽略的文件
|-- element-variables.scss // 主题样式
|-- package.json // 项目及工具的依赖配置文件
|-- README.md // 说明