├── .eslintignore
├── .npmrc
├── src
    ├── index.js
    └── components
    │   └── element-common-form
    │       ├── index.js
    │       └── ElementCommonForm.vue
├── .babelrc
├── .gitignore
├── .eslintrc.js
├── LICENSE
├── README.md
└── package.json


/.eslintignore:
--------------------------------------------------------------------------------
1 | dist/*.js
2 | config/*.js
3 | 


--------------------------------------------------------------------------------
/.npmrc:
--------------------------------------------------------------------------------
1 | registry=https://registry.npmjs.org/


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | export * from './components/element-common-form/index'
2 | 


--------------------------------------------------------------------------------
/src/components/element-common-form/index.js:
--------------------------------------------------------------------------------
1 | import ElementCommonForm from './ElementCommonForm.vue'
2 | export { ElementCommonForm }
3 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "presets": [
 3 |     "es2015"
 4 |   ],
 5 |   "plugins": [
 6 |     "jsx-v-model",
 7 |     "transform-vue-jsx",
 8 |     "transform-runtime",
 9 |     "transform-decorators-legacy"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Created by .ignore support plugin (hsz.mobi)
 2 | ### Example user template template
 3 | ### Example user template
 4 | 
 5 | # IntelliJ project files
 6 | .idea
 7 | *.iml
 8 | out
 9 | gen
10 | node_modules
11 | npm-debug.log
12 | 
13 | *.log
14 | lib


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | // http://eslint.org/docs/user-guide/configuring
 2 | 
 3 | module.exports = {
 4 |   root: true,
 5 |   parserOptions: {
 6 |     parser: 'babel-eslint'
 7 |   },
 8 |   env: {
 9 |     browser: true
10 |   },
11 |   extends: [
12 |     // https://github.com/vuejs/eslint-plugin-vue#priority-a-essential-error-prevention
13 |     // consider switching to `plugin:vue/strongly-recommended` or `plugin:vue/recommended` for stricter rules.
14 |     'plugin:vue/strongly-recommended',
15 |     // https://github.com/standard/standard/blob/master/docs/RULES-en.md
16 |     'standard'
17 |   ],
18 |   // required to lint *.vue files
19 |   plugins: [
20 |     'vue'
21 |   ],
22 |   // add your custom rules here
23 |   rules: {
24 |     // vue规则 - tag自动闭合不强制
25 |     'vue/html-self-closing': 'off',
26 |     'vue/max-attributes-per-line': 'off',
27 |     
28 |     // allow async-await
29 |     'generator-star-spacing': 'off',
30 |     // allow debugger during development
31 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
32 |   }
33 | }
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 檀卫杰
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ### 介绍
 2 | element-ui 通用表单组件
 3 | 
 4 | ### 使用文档
 5 | 
 6 | **1、使用方法**
 7 | 
 8 | **安装**
 9 | ```
10 | npm i element-common-form
11 | ```
12 | **使用**
13 | ```
14 | <element-common-form :form-option="formOption" :is-reset-form-flag="isResetFormFlag"></element-common-form>
15 | ```
16 | 接收的props:
17 | 
18 | **isResetFormFlag**：是否更新表单内容标志，用于触发更新表单的**formModel**
19 | 
20 | **formOption**：表单配置，下有详细配置说明
21 | 
22 | **isDisabled**：表单是否可编辑
23 | 
24 | **2、单一表单组配置**
25 | 
26 | ```
27 | {
28 |   name: 'channel-form',
29 |   data: {},
30 |   items: [
31 |     {
32 |       label: '类型',
33 |       name: 'type',
34 |       type: 'select',
35 |       dataList: [{
36 |         index: 1,
37 |         text: '相机'
38 |       }, {
39 |         index: 6,
40 |         text: '其他'
41 |       }]
42 |     }
43 |   ],
44 |   rules: {
45 |     name: [{ required: true, message: '请输入产品名称', trigger: 'blur' }]
46 |   },
47 |   btnList: [{
48 |     text: '保存，下一步',
49 |     type: 'primary',
50 |     onClick: this.commitForm
51 |   }]
52 | }
53 |  
54 | ```
55 | 
56 | **3、多表单组配置**
57 | 
58 | ```
59 | formOption: {
60 |  name: 'channel-form',
61 |  data: {},
62 |  groups: [{
63 |    title: '',// 组标题
64 |    tips: ''// 组提示
65 |    items: [] // 组表单项，和单一组配置一致
66 |  }]
67 | }
68 | ```
69 | **4、配置文档**
70 | 
71 | | 节点 | 描述 | 类型 |是否必须|备注|
72 | | ------------- |-------------| -----| -----| -----|
73 | | name| 表单名 | String|否|默认名 oa-form|
74 | | data| 表单数据 | Object|否|用于编辑场景异步请求的表单填充数据|
75 | | groups| 表单组 | Array|否|groups 和 items 不应该同时存在，groups 中包含了items，如果groups为空取外部的items渲染，groups不为空仅渲染groups组内容|
76 | | items| 表单项 | Array|否|支持的type类型：输入框：input、textarea;多选框：checkbox;单选框：radio;下拉菜单：select|
77 | | rules| 表单校验规则 | Object|否|节点名需要与items配置的name一一对应|
78 | | btnList| 按钮列表 | Array|否|会在回调函数包含表单的数据及表单引用|
79 | 
80 | **5、备注**
81 | 
82 | 当前仅支持少数表单项，可以clone到本地或者直接拷贝`ElementCommonForm.vue`源码到项目中根据具体项目进行扩展
83 | 
84 | ### License
85 | MIT
86 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "element-common-form",
 3 |   "version": "1.0.1",
 4 |   "scripts": {
 5 |     "dev": "cross-env NODE_ENV=development webpack --config build/webpack.config.js --watch",
 6 |     "build": "node build/build.js",
 7 |     "unit": "cross-env NODE_ENV=testing karma start test/unit/karma.conf.js --single-run"
 8 |   },
 9 |   "description": "element common form",
10 |   "main": "lib/index.js",
11 |   "module": "lib/index.js",
12 |   "keywords": [
13 |     "element",
14 |     "vue",
15 |     "vue-component",
16 |     "component"
17 |   ],
18 |   "repository": {
19 |     "type": "git",
20 |     "url": "https://github.com/mrtanweijie/element-common-form.git"
21 |   },
22 |   "author": "twj",
23 |   "license": "MIT",
24 |   "devDependencies": {
25 |     "babel-core": "^6.25.0",
26 |     "babel-eslint": "^7.2.3",
27 |     "babel-helper-vue-jsx-merge-props": "^2.0.3",
28 |     "babel-loader": "^6.4.1",
29 |     "babel-plugin-istanbul": "^4.1.4",
30 |     "babel-plugin-jsx-v-model": "^2.0.3",
31 |     "babel-plugin-transform-decorators-legacy": "^1.3.5",
32 |     "babel-plugin-transform-runtime": "^6.23.0",
33 |     "babel-plugin-transform-vue-jsx": "^3.7.0",
34 |     "babel-preset-es2015": "^6.24.1",
35 |     "babel-preset-stage-2": "^6.24.1",
36 |     "chai": "^4.1.1",
37 |     "chalk": "^2.1.0",
38 |     "chromedriver": "^2.32.3",
39 |     "copy-webpack-plugin": "^4.0.1",
40 |     "cross-env": "^3.2.4",
41 |     "cross-spawn": "^5.1.0",
42 |     "css-loader": "^0.27.3",
43 |     "eslint": "^4.4.1",
44 |     "eslint-config-standard": "^10.2.1",
45 |     "eslint-friendly-formatter": "^3.0.0",
46 |     "eslint-loader": "^1.9.0",
47 |     "eslint-plugin-html": "^3.1.1",
48 |     "eslint-plugin-import": "^2.7.0",
49 |     "eslint-plugin-node": "^5.1.1",
50 |     "eslint-plugin-promise": "^3.5.0",
51 |     "eslint-plugin-standard": "^3.0.1",
52 |     "eslint-plugin-vue": "^5.2.2",
53 |     "eventsource-polyfill": "^0.9.6",
54 |     "extract-text-webpack-plugin": "^2.1.2",
55 |     "file-loader": "^0.10.1",
56 |     "html-webpack-plugin": "^2.30.1",
57 |     "img-loader": "^2.0.0",
58 |     "inject-loader": "^3.0.1",
59 |     "karma": "^1.7.0",
60 |     "karma-chrome-launcher": "^2.2.0",
61 |     "karma-coverage": "^1.1.1",
62 |     "karma-mocha": "^1.3.0",
63 |     "karma-sinon-chai": "^1.3.1",
64 |     "karma-sourcemap-loader": "^0.3.7",
65 |     "karma-spec-reporter": "^0.0.31",
66 |     "karma-webpack": "^2.0.4",
67 |     "less": "^2.7.2",
68 |     "less-loader": "^4.0.5",
69 |     "lodash.isplainobject": "^4.0.6",
70 |     "lolex": "^2.1.2",
71 |     "mocha": "^3.5.0",
72 |     "nightwatch": "^0.9.16",
73 |     "optimize-css-assets-webpack-plugin": "^3.0.0",
74 |     "ora": "^1.3.0",
75 |     "postcss-px-to-viewport": "^0.0.3",
76 |     "rimraf": "^2.6.1",
77 |     "selenium-server": "^3.5.0",
78 |     "semver": "^5.4.1",
79 |     "shelljs": "^0.7.8",
80 |     "sinon": "^3.2.0",
81 |     "sinon-chai": "^2.13.0",
82 |     "swiper": "^3.4.2",
83 |     "url-loader": "^0.5.9",
84 |     "vee-validate": "2.0.0-rc.25",
85 |     "vue": "^2.5.17",
86 |     "vue-class-component": "^7.1.0",
87 |     "vue-html-loader": "^1.2.3",
88 |     "vue-loader": "^11.0.0",
89 |     "vue-style-loader": "^2.0.5",
90 |     "vue-template-compiler": "^2.5.16",
91 |     "webpack": "^3.6.0",
92 |     "webpack-merge": "^4.1.0"
93 |   },
94 |   "dependencies": {},
95 |   "engines": {
96 |     "node": ">= 6.0.0",
97 |     "npm": ">= 3.0.0"
98 |   }
99 | }


--------------------------------------------------------------------------------
/src/components/element-common-form/ElementCommonForm.vue:
--------------------------------------------------------------------------------
  1 | <script>
  2 | export default {
  3 |   name: 'EleCommonForm',
  4 |   props: {
  5 |     // 是否更新表单内容标志，用于触发更新表单的formModel
  6 |     isResetFormFlag: {
  7 |       type: Boolean,
  8 |       default: false
  9 |     },
 10 |     // 表单配置,文档见wiki
 11 |     formOption: {
 12 |       type: Object,
 13 |       default: _ => ({})
 14 |     },
 15 |     // 是否可编辑
 16 |     isDisabled: {
 17 |       type: Boolean,
 18 |       default: false
 19 |     },
 20 |     inline: {
 21 |       type: Boolean,
 22 |       default: false
 23 |     }
 24 |   },
 25 |   data () {
 26 |     return {
 27 |       formModel: {},
 28 |       defaultStyle: 'width: 300px',
 29 |       dialogImgVisible: false,
 30 |       viewImg: ''
 31 |     }
 32 |   },
 33 |   computed: {
 34 |     formName () {
 35 |       return this.formOption.name || 'oa-form'
 36 |     },
 37 |     // 是否是表单组
 38 |     isGroup () {
 39 |       return this.formOption.groups && this.formOption.groups.length > 0
 40 |     }
 41 |   },
 42 |   watch: {
 43 |     isResetFormFlag () {
 44 |       this.formModelProcess()
 45 |     }
 46 |   },
 47 |   mounted () {
 48 |     this.formModelProcess()
 49 |   },
 50 |   methods: {
 51 |     // 表单Form节点数据处理
 52 |     formModelProcess () {
 53 |       let formObj = {}
 54 |       if (!this.formOption.data) {
 55 |         return
 56 |       }
 57 |       this.getFormItems().forEach((e) => {
 58 |         let nameVal = e.name
 59 |         if (!nameVal) {
 60 |           console.error('[oa form warn]: 存在未配置name或者name为空的表单项')
 61 |           return
 62 |         }
 63 |         // render 类型不添加属性,使用外部属性
 64 |         if (e.type === 'render') {
 65 |           return
 66 |         }
 67 |         formObj[nameVal] = this.checkValue(this.formOption.data[nameVal]) ? this.formOption.data[nameVal] : this.getItemDefaultValue(e)
 68 |       })
 69 |       this.formModel = Object.assign({}, formObj)
 70 |     },
 71 |     // 值为空判断
 72 |     checkValue (val) {
 73 |       return val || val === 0
 74 |     },
 75 |     getFormItems () {
 76 |       if (this.isGroup) {
 77 |         let groupItems = []
 78 |         this.formOption.groups.forEach(group => {
 79 |           groupItems = groupItems.concat(group.items || [])
 80 |         })
 81 |         return groupItems
 82 |       }
 83 |       return this.formOption.items || []
 84 |     },
 85 |     // 默认值
 86 |     getItemDefaultValue (item) {
 87 |       return item.value ? item.value : item.type === 'checkbox' ? [] : ''
 88 |     },
 89 |     // 生成列表
 90 |     generateList (itemObj) {
 91 |       let itemEle = []
 92 |       for (let index = 0; index < itemObj.dataList.length; index++) {
 93 |         const item = itemObj.dataList[index]
 94 |         switch (itemObj.type) {
 95 |           // 下拉菜单
 96 |           case 'select':
 97 |             itemEle.push(<el-option key={ item.index } label={ item.text } value={ item.index }></el-option>)
 98 |             break
 99 |           // 多选框
100 |           case 'checkbox':
101 |             itemEle.push(<el-checkbox label={ item.index }>{ item.text }</el-checkbox>)
102 |             break
103 |           // 单选框
104 |           case 'radio':
105 |             itemEle.push(<el-radio label={ item.index }>{ item.text }</el-radio>)
106 |             break
107 |         }
108 |       }
109 |       return itemEle
110 |     },
111 |     // 生成下拉菜单
112 |     generateSelect (item) {
113 |       return <el-select v-model={ this.formModel[item.name] } style={ item.style || this.defaultStyle }>{ this.generateList(item) }</el-select>
114 |     },
115 |     // 生成多选框
116 |     generateCheckbox (item) {
117 |       return <el-checkbox-group v-model={ this.formModel[item.name] }>{ this.generateList(item) }</el-checkbox-group>
118 |     },
119 |     // 生成单选
120 |     generateRadio (item) {
121 |       return <div class="oa-form-item">
122 |         <el-radio-group v-model={ this.formModel[item.name] }>{ this.generateList(item) }</el-radio-group>
123 |         { this.generateShowImg(item) }
124 |       </div>
125 |     },
126 |     // 生成输入框
127 |     generateInput (item) {
128 |       let ele = []
129 |       // 提示位置：默认右侧，bottom表示提示位置在输入框底部
130 |       if (item.tipsType === 'bottom') {
131 |         ele.push(<p class="title-tips item-tips-bottom">{ item.tips }</p>)
132 |       } else {
133 |         ele.push(<label class="title-tips">{ item.tips }</label>)
134 |       }
135 |       return <div class="oa-form-item">
136 |         <el-input v-model={ this.formModel[item.name] } type={ item.type } disabled={ item.disabled } autosize={ item.autosize } style={ item.style || this.defaultStyle }></el-input>
137 |         { this.generateShowImg(item) }
138 |         { ele }
139 |       </div>
140 |     },
141 |     // 生成位置预览
142 |     generateShowImg (item) {
143 |       return item.viewImg ? <span class="show-img" on-click={ () => { this.viewImg = item.viewImg; this.dialogImgVisible = true }}>位置预览</span> : ''
144 |     },
145 |     // 分组
146 |     generateGroup () {
147 |       let groupsEle = []
148 |       this.formOption.groups.forEach(group => {
149 |         groupsEle.push(<section class="section">
150 |           <h4 class="section-title">{ group.title }<span class="title-tips">{ group.tips }</span></h4>
151 |           { this.generateFormItems(group.items) }
152 |         </section>)
153 |       })
154 |       return groupsEle
155 |     },
156 |     // 生成表单项
157 |     generateFormItems (items = []) {
158 |       let ele = []
159 |       items.forEach((item) => {
160 |         let itemEle = ''
161 |         switch (item.type) {
162 |           // 外部自定义
163 |           case 'render':
164 |             itemEle = item.render()
165 |             break
166 |           // 下拉菜单
167 |           case 'select':
168 |             itemEle = this.generateSelect(item)
169 |             break
170 |           // 多选框
171 |           case 'checkbox':
172 |             itemEle = this.generateCheckbox(item)
173 |             break
174 |           // 单选框
175 |           case 'radio':
176 |             itemEle = this.generateRadio(item)
177 |             break
178 |           // 输入框
179 |           default:
180 |             itemEle = this.generateInput(item)
181 |             break
182 |         }
183 |         ele.push(<el-form-item label={ item.label } prop={ item.name } label-width={ item.labelWidth } >{ itemEle }</el-form-item>)
184 |       })
185 |       return ele
186 |     },
187 |     // 按钮列表
188 |     generateBtnList () {
189 |       if (!this.formOption.btnList || this.formOption.btnList.length === 0) {
190 |         console.error('[oa form warn]: 未配置表单按钮')
191 |         return
192 |       }
193 |       let btnListEle = []
194 |       this.formOption.btnList.forEach((btn) => {
195 |         btnListEle.push(<el-button type={ btn.type } on-click={ () => { btn.onClick(this.$refs[this.formName], this.formModel) } }>{ btn.text }</el-button>)
196 |       })
197 |       return btnListEle
198 |     }
199 |   },
200 |   render (h) {
201 |     let ele = []
202 |     // 表单内容
203 |     if (this.isGroup) {
204 |       ele = this.generateGroup()
205 |     } else {
206 |       ele = this.generateFormItems(this.formOption.items)
207 |     }
208 |     return (
209 |       <div class="oa-form-container">
210 |         <el-form ref={ this.formName } model={ this.formModel } rules={ this.formOption.rules } inline={ this.inline } disabled={ this.isDisabled } label-width={ this.formOption.labelWidth || '150px'}>
211 |           { ele }
212 |           <el-form-item label-width={ this.isGroup ? '0' : this.formOption.labelWidth}>
213 |             { this.generateBtnList() }
214 |             <label class="title-tips">{ this.formOption.btnTips || '' }</label>
215 |           </el-form-item>
216 |         </el-form>
217 |         <el-dialog title="配置位置预览图" visible={ this.dialogImgVisible } {...{on: {'update:visible': (val) => { this.dialogImgVisible = val }}}} width="700px">
218 |           <div class="center">
219 |             <img src={ this.viewImg } class="max-width-100"></img>
220 |           </div>
221 |         </el-dialog>
222 |       </div>
223 |     )
224 |   }
225 | }
226 | </script>
227 | 
228 | <style lang="less" scoped>
229 | .oa-form-container {
230 |   .section {
231 |     background: #fff;
232 |     padding: 15px 20px;
233 |     margin: 20px auto;
234 |     border: 1px solid #eee;
235 |     border-radius: 4px;
236 |   }
237 |   .section-title {
238 |     padding-bottom: 15px;
239 |     margin-bottom: 15px;
240 |     border-bottom: 1px solid #eee;
241 |   }
242 |   .title-tips {
243 |     font-size: 14px;
244 |     font-weight: 500;
245 |     line-height: 28px;
246 |     vertical-align: middle;
247 |     color: #999;
248 |     margin-left: 20px;
249 |   }
250 |   .oa-form-item {
251 |     .item-tips-bottom {
252 |        margin-top: 5px;
253 |        margin-left: 0px;
254 |     }
255 |     .show-img {
256 |       cursor: pointer;
257 |       color: #409EFF;
258 |       margin-left: 10px;
259 |     }
260 |   }
261 |   .center {
262 |     text-align: center;
263 |   }
264 |   .max-width-100 {
265 |     max-width: 100%
266 |   }
267 | }
268 | </style>
269 | 


--------------------------------------------------------------------------------