diff --git a/src/views/haomo/components/forms/HmComplexForm.md b/src/views/haomo/components/forms/HmComplexForm.md index 5e1b4bc6b63dcfaab5d03d850887482ce706ebbd..31ff6618328319a82538592fa82ca9a2162f2419 100644 --- a/src/views/haomo/components/forms/HmComplexForm.md +++ b/src/views/haomo/components/forms/HmComplexForm.md @@ -212,9 +212,10 @@ ```vue <template> <hm-complex-form :schema="schema['HmUser']" - :columns="showUserColumns" - :tableId="tableId" - :buttons="showUserButtons"> + :columns="showUserColumns" + :tableId="tableId" + :layout="layout" + :buttons="showUserButtons"> </hm-complex-form> </template> @@ -424,7 +425,8 @@ }, showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['ä¼ä¸š', '代ç†å•†'] }, { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }], // è¦æ˜¾ç¤ºæŒ‰é’® æš‚åªæ”¯æŒç¡®å®šã€ä¿å˜ã€å–æ¶ˆã€æäº¤ã€é‡ç½® - showUserButtons: ['确定', 'å–æ¶ˆ'] + showUserButtons: ['确定', 'å–æ¶ˆ'], + layout: { left: 0, middle: 12, right: 12 } } }, created() { diff --git a/src/views/haomo/components/forms/HmComplexForm.vue b/src/views/haomo/components/forms/HmComplexForm.vue index 8652bfcc30c36704a0c05ef43e0782b027d28dcf..9578db7e5efbe8ae6414f962d31b75b6b8638cee 100644 --- a/src/views/haomo/components/forms/HmComplexForm.vue +++ b/src/views/haomo/components/forms/HmComplexForm.vue @@ -1,13 +1,15 @@ <template> <div class="app-container documentation-container"> - <el-row type="flex" class="hm-form" style="margin-top: 50px"> - <el-col :span="6"> + <!--v-loading="Loading"--> + <el-row type="flex" class="hm-form" style="margin-top: 20px" > + <el-col :span="layout.left"> <div></div> </el-col> - <el-col :span="12"> + <el-col :span="layout.middle"> <div> <!--表å•部分--> <el-form ref="form" + element-loading-text="åŠ è½½ä¸" :model="formModel" :rules="rules" label-width="110px" @@ -46,9 +48,13 @@ :rows="2"> </el-input> <!-- 5 å¤é€‰æ¡† --> - <el-checkbox v-else-if="column.widgetType === 3 && !column.options" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox> - <el-checkbox-group v-else-if="column.widgetType === 3 && column.options" v-model="formModel[column.codeCamel]"> - <el-checkbox v-for="option in column.options" :label="option" :key="option">{{option}}</el-checkbox> + <el-checkbox v-else-if="column.widgetType === 3 && !column.options" + v-model="formModel[column.codeCamel]" + true-label="1" false-label="0"></el-checkbox> + <el-checkbox-group v-else-if="column.widgetType === 3 && column.options" + v-model="formModel[column.codeCamel]"> + <el-checkbox v-for="option in column.options" + :label="option" :key="option">{{option}}</el-checkbox> </el-checkbox-group> <!-- 6 富文本 --> <quill-editor v-else-if="column.widgetType === 5" @@ -60,22 +66,30 @@ @ready="onEditorReady($event)"> </quill-editor> <!-- 7 å•选框 --> - <el-radio-group v-else-if="column.widgetType === 7" v-model="formModel[column.codeCamel]"> - <el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio> + <el-radio-group v-else-if="column.widgetType === 7" + v-model="formModel[column.codeCamel]"> + <el-radio v-for="(option,key) in column.options" + :key="key" :label="key">{{option}}</el-radio> </el-radio-group> </el-form-item> <!--按钮--> <el-form-item v-if="buttons && buttons.length > 0"> - <el-col :span="12" v-for="(btn,key) in buttons" :key="key"> - <el-button v-if="btn === '确定' || btn === 'æäº¤' || btn === 'ä¿å˜' || btn === 'å‘布'" type="primary" @click="onSubmit()">{{btn}}</el-button> - <el-button v-if="btn === 'é‡ç½®'" type="primary" @click="resetForm()">{{btn}}</el-button> - <el-button v-if="btn === 'å–æ¶ˆ'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button> + <el-col :span="24/buttons.length" v-for="(btn,key) in buttons" :key="key"> + <el-button v-if="btn.type === 1" + type="primary" + @click="onSubmit(btn.method)">{{btn.text}}</el-button> + <el-button v-if="btn.type === 2" + type="primary" + @click="resetForm(btn.method)">{{btn.text}}</el-button> + <el-button v-if="btn.type === 3" + type="primary" + @click="btn.method">{{btn.text}}</el-button> </el-col> </el-form-item> </el-form> </div> </el-col> - <el-col :span="6"> + <el-col :span="layout.right"> <div></div> </el-col> </el-row> @@ -141,9 +155,16 @@ } }, /** - * éžå¿…ä¼ ï¼ŒæŒ‡å®šè¦æ˜¾ç¤ºçš„æŒ‰é’®(确定ã€ä¿å˜ã€å–æ¶ˆã€æäº¤ã€é‡ç½®)ï¼Œé»˜è®¤ä¸æ˜¾ç¤ºã€‚ + * éžå¿…ä¼ ï¼ŒæŒ‡å®šè¦æ˜¾ç¤ºçš„æŒ‰é’®åŠç±»åž‹ï¼Œé»˜è®¤ä¸æ˜¾ç¤ºã€‚ + * 类型(typeï¼‰å…³ç³»åˆ°æŒ‰é’®è¦æ‰§è¡Œçš„æ–¹æ³•,type=1,执行组件的æäº¤æ–¹æ³•ï¼Œå¦‚æžœç”¨æˆ·ä¼ å…¥äº†method,会作为æäº¤æ–¹æ³•的回调函数执行 + * type=2,执行组件的é‡ç½®æ–¹æ³•,å¦‚æžœç”¨æˆ·ä¼ å…¥äº†method,会作为é‡ç½®æ–¹æ³•的回调函数执行 + * type=3ï¼Œç›´æŽ¥æ‰§è¡Œç”¨æˆ·ä¼ å…¥çš„æ–¹æ³• * 如果è¦ä¼ 入了确定/å–æ¶ˆçš„å›žè°ƒå‡½æ•°ï¼Œè¯·å…ˆä¼ å…¥å¯¹åº”çš„æŒ‰é’® - * 示例:['确定', 'å–æ¶ˆ'] + * 示例:[ + * {text: '确定', type: '1', method: method1}, + * {text: 'é‡ç½®', type: '2', method: method2}, + * {text: 'å–æ¶ˆ', type: '3', method: method3} + * ] */ buttons: { type: Array, @@ -157,19 +178,12 @@ required: false }, /** - * éžå¿…ä¼ ï¼Œä¼ å…¥ç‚¹å‡»'确定'åŽçš„回调函数,该回调函数会在form组件onSubmit函数的æˆåŠŸå›žè°ƒä¸è°ƒç”¨ - * 如果è¦ä¼ å…¥è¯¥å‡½æ•°ï¼Œè¯·å…ˆä¼ å…¥å¯¹åº”çš„æŒ‰é’® - */ - confirmFunction: { - type: Function, - required: false - }, - /** - * éžå¿…ä¼ ï¼Œä¼ å…¥ç‚¹å‡»'å–æ¶ˆ'åŽçš„回调函数,该回调函数会在点击'å–æ¶ˆ'åŽç›´æŽ¥è°ƒç”¨ - * 如果è¦ä¼ å…¥è¯¥å‡½æ•°ï¼Œè¯·å…ˆä¼ å…¥å¯¹åº”çš„æŒ‰é’® + * éžå¿…ä¼ ï¼Œå¸ƒå±€æ–¹å¼ï¼Œform组件布局分三æ ,左å³ä¸ºç•™ç™½ï¼Œä¸é—´æ˜¯form, + * é€šè¿‡ä¼ å‚å¯ä»¥æŽ§åˆ¶å„部分所å 份数,éµå¾ªelementUi24分æ ,默认居ä¸å¸ƒå±€(left:6,middle:12,right:6) + * 示例:{ left: 0, middle: 12, right: 12 } */ - cancelFunction: { - type: Function, + layout: { + type: Object, required: false } }, @@ -208,6 +222,7 @@ // } // } return { + Loading: true, form: null, formModel: {}, // åŒå‘绑定的数æ®å˜é‡ showUserColumns: [], // è¦æ˜¾ç¤ºçš„å—æ®µ @@ -274,6 +289,7 @@ created() { // this.validate() this.init() + this.getList() console.log(this.buttons) }, methods: { @@ -316,6 +332,24 @@ onEditorReady(editor) { // console.log('editor ready!') }, + // å˜åœ¨tableId,修改数æ®å‰å…ˆèŽ·å–æ•°æ® + getList() { + const self = this + + // èŽ·å–æ•°æ® + request(self.schema.modelUnderscorePlural + '/' + self.tableId).then(resp => { + // æ•°æ®åº“å—æ®µè½¬åŒ–显示 + /* if (self.options.changeValue) { + resp.data = self.changeValue(resp.data) + } */ + self.Loading = false + // console.log(self.formModel) + var formArray = _.keys(self.formModel) + // console.log(formArray) + self.formModel = _.pick(resp.data, formArray) + // console.log(self.formModel) + }) + }, init() { const self = this // å¦‚æžœæ²¡æœ‰ä¼ columns,则全部显示 @@ -340,9 +374,9 @@ self.$set(tmp, 'widgetType', column.widgetType || 1) column.options && self.$set(tmp, 'options', column.options) self.$set(self.showUserColumns, index, tmp) // é¡ºåº - // console.log(self.showUserColumns) } }) + console.log(self.showUserColumns) // æå–v-model绑定的å˜é‡ _.each(self.showUserColumns, function(item) { if (item.widgetType === 3 && item.options && item.options.length > 0) { @@ -351,10 +385,15 @@ self.$set(self.formModel, item.codeCamel, '') } }) - console.log(self.formModel) if (!request.defaults.baseURL) { request.defaults.baseURL = '/org/api' } + // åŠ è½½ç‰å¾… + if (self.tableId) { + self.Loading = true + } else { + self.Loading = false + } } else { console.log('columnsä¸ºå¿…ä¼ å—æ®µ!!') } @@ -366,7 +405,7 @@ * 所有选项输入并验è¯é€šè¿‡ï¼Œæ£ç¡®æäº¤ * 验è¯å¤±è´¥ï¼Œç¦æ¢æäº¤å¹¶ç»™å‡ºæç¤º */ - onSubmit() { + onSubmit(callback) { const self = this console.log('点击了æäº¤å‡½æ•°') console.log(self.formModel) @@ -395,7 +434,9 @@ }).then(resp => { console.log('修改æˆåŠŸ') self.resetForm() - self.confirmFunction && self.confirmFunction() + if (typeof (callback) === 'function') { + callback() + } }) } else { // ä¸å˜åœ¨tableId åˆ™åˆ›å»ºä¸€æ¡æ•°æ® request(self.schema.modelUnderscorePlural + '/new', { @@ -413,7 +454,9 @@ }).then(resp => { console.log('创建æˆåŠŸ') self.resetForm() - self.confirmFunction && self.confirmFunction() + if (typeof (callback) === 'function') { + callback() + } }) } } else { @@ -432,9 +475,12 @@ * * æ¸…ç©ºæ‰€æœ‰è¾“å…¥åŠæç¤ºä¿¡æ¯ã€‚ */ - resetForm() { + resetForm(callback) { console.log('é‡ç½®') this.$refs.form.resetFields() + if (typeof (callback) === 'function') { + callback() + } } } diff --git a/src/views/haomo/components/forms/index.vue b/src/views/haomo/components/forms/index.vue index e854bf6944320187c8577ede164f75fe302f07c4..ec8422b4f2369c8bac7ab0b87231ca8d20d66c87 100644 --- a/src/views/haomo/components/forms/index.vue +++ b/src/views/haomo/components/forms/index.vue @@ -3,8 +3,7 @@ <hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :buttons="showUserButtons" - :confirmFunction="confirm" - :cancelFunction="cancel" + :layout="layout" :tableId="tableId"> </hm-complex-form> </div> @@ -27,16 +26,22 @@ // widgetType值 1:普通input 2:下拉框 (如果是下拉框 å†ä¼ 一个options表示下拉框选项)3:å¤é€‰æ¡† 4:文本域 5:富文本 6:日期 7:å•选框 showUserColumns: [ { name: 'å§“å', codeCamel: 'username', widgetType: 1 }, - { name: '安全级别', codeCamel: 'securityLevel', widgetType: 5 }, + { name: '邮箱', codeCamel: 'email', widgetType: 5 }, { name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: '选择头åƒ', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, - { name: '部门', codeCamel: 'departmentId', widgetType: 4 }, + { codeCamel: 'password', widgetType: 4 }, { name: '新建时间', codeCamel: 'createTime', widgetType: 6 }, - { name: '登陆地å€', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] } + { name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] } + ], + // è¦æ˜¾ç¤ºæŒ‰é’® + showUserButtons: [ + { text: '确定', type: 1, method: this.method1 }, + { text: 'é‡ç½®', type: 2, method: this.method2 }, + { text: 'å–æ¶ˆ', type: 3, method: this.method3 } ], - // è¦æ˜¾ç¤ºæŒ‰é’® æš‚åªæ”¯æŒç¡®å®šã€ä¿å˜ã€å–æ¶ˆã€æäº¤ã€é‡ç½® - showUserButtons: ['确定', 'å–æ¶ˆ'] // showUserButtons: [] + // å¸ƒå±€æ–¹å¼ + layout: { left: 0, middle: 12, right: 12 } } }, computed: { @@ -49,11 +54,14 @@ this.tableId = '0e26566e953449a7a7500c34be39fd26' }, methods: { - confirm() { - console.log('确定') + method1() { + console.log('method1') + }, + method2() { + console.log('method2') }, - cancel() { - console.log('å–æ¶ˆ') + method3() { + console.log('method3') } } }