Skip to content

V
VueElementTemplate
Commit b14b9dd1 authored by 李静's avatar 李静
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents 40316230 a946a59e
Hide whitespace changes
Inline Side-by-side
Showing with 165 additions and 154 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ b14b9dd1
<template> <template>
<div class="app-container documentation-container"> <!--class="app-container documentation-container"-->
<div>
<!--v-loading="Loading"--> <!--v-loading="Loading"-->
<el-row type="flex" class="hm-form" style="margin-top: 20px" > <el-row type="flex" class="hm-form" style="margin-top: 12px" >
<el-col :span="layout ? layout.left : 6"> <el-col :span="layout ? layout.left : 1">
<div></div> <div></div>
</el-col> </el-col>
<el-col :span="layout ? layout.middle : 12"> <el-col :span="layout ? layout.middle : 23">
<div> <!--表单部分-->
<!--表单部分--> <el-form ref="form"
<el-form ref="form" :label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'"
:label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'" element-loading-text="加载中"
element-loading-text="加载中" :label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '163px'"
:label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '170px'" :model="formModel"
:model="formModel" :rules="rules"
:rules="rules" :style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'100%'}">
:style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'80%',margin:'0 auto'}"> <el-form-item v-for="column in showUserColumns"
<el-form-item v-for="column in showUserColumns" v-show="!column.hide"
v-show="!column.hide" :key="column.id"
:key="column.id" :label="column.name"
:label="column.name" :rules="column.rule?column.rule:null"
:rules="column.rule?column.rule:null" :prop="column.codeCamel">
:prop="column.codeCamel"> <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password" v-model="formModel[column.codeCamel]"></el-input>-->
v-model="formModel[column.codeCamel]"></el-input>--> <!-- 2 日期选择 -->
<!-- 2 日期选择 --> <!-- -->
<!-- --> <el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
<el-date-picker v-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '65%'}"
:ref="column.ref || ''"
:readonly="column.readonly"
:type="column.dateType || 'date'"
align="right" :disabled="column.disabled"
@change="column.change && column.change($event)"
:value-format="column.dateFormate || 'yyyy-MM-dd'"
:picker-options="pickerOptions">
</el-date-picker>
<!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2"
:ref="column.ref || ''"
v-model="formModel[column.codeCamel]"
@change="column.change && column.change($event)"
:style="formStyle && formStyle.select && formStyle.select.style || {width: '65%'}"
:multiple="column.multiple"
:disabled="column.disabled"
style="width: 50%"
clearable>
<el-option v-for="(item,key) in column.options"
:key="key"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4"
:ref="column.ref || ''"
:readonly="column.readonly"
:style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '65%'}"
v-model="formModel[column.codeCamel]"
type="textarea" :disabled="column.disabled"
:resize="formStyle && formStyle.textarea && formStyle.textarea.resize || 'vertical'"
:autosize="formStyle && formStyle.textarea && formStyle.textarea.autosize || { minRows: 4, maxRows: 6}"
:rows="formStyle && formStyle.textarea && formStyle.textarea.rows || 4" @change="column.change && column.change($event)">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options"
v-model="formModel[column.codeCamel]"
:ref="column.ref || ''"
:disabled="column.disabled"
@change="column.change && column.change($event)"
true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
v-model="formModel[column.codeCamel]"
:ref="column.ref || ''"
:disabled="column.disabled"
@change="column.change && column.change($event)">
<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"
:ref="column.ref || 'textEditor'" :disabled="column.disabled"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'65%'}" :style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '70%'}"
:options="editorOption" :ref="column.ref || ''"
@blur="onEditorBlur($event)" :readonly="column.readonly"
@focus="onEditorFocus($event)" :type="column.dateType || 'date'"
@change="(column.change && column.change($event)) || onEditorChange" align="right" :disabled="column.disabled"
@ready="onEditorReady($event)"> @change="column.change && column.change($event)"
</quill-editor> :value-format="column.dateFormate || 'yyyy-MM-dd'"
<!-- 7 单选框 --> :picker-options="pickerOptions">
<el-radio-group v-else-if="column.widgetType === 7" </el-date-picker>
:disabled="column.disabled" <!-- 3 下拉框 -->
@change="column.change && column.change($event)" <el-select v-else-if="column.widgetType === 2"
v-model="formModel[column.codeCamel]"> :ref="column.ref || ''"
<el-radio v-for="option in column.options" v-model="formModel[column.codeCamel]"
:key="option.label" :label="option.label">{{option.value}}</el-radio> @change="column.change && column.change($event)"
</el-radio-group> :style="formStyle && formStyle.select && formStyle.select.style || {width: '70%'}"
<!-- 8 文件 --> :multiple="column.multiple"
<el-upload v-else-if="column.widgetType === 8" :disabled="column.disabled"
name="picture" style="width: 50%"
:action=" column.url || '/api/upload'" clearable>
:on-remove="handleRemove" <el-option v-for="(item,key) in column.options"
:on-change="column.change || handleChange" :key="key"
:file-list="fileList" :label="item.label"
:multiple="column.multiple" :value="item.value">
</el-option>
</el-select>
<!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4"
:ref="column.ref || ''"
:readonly="column.readonly"
:style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '70%'}"
v-model="formModel[column.codeCamel]"
type="textarea" :disabled="column.disabled"
:resize="formStyle && formStyle.textarea && formStyle.textarea.resize || 'vertical'"
:autosize="formStyle && formStyle.textarea && formStyle.textarea.autosize || { minRows: 4, maxRows: 6}"
:rows="formStyle && formStyle.textarea && formStyle.textarea.rows || 4" @change="column.change && column.change($event)">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options"
v-model="formModel[column.codeCamel]"
:ref="column.ref || ''" :ref="column.ref || ''"
:on-success="uploadSuccess"> :disabled="column.disabled"
<el-button slot="trigger" size="small" type="primary" @change="column.change && column.change($event)"
:disabled="column.disabled">选取文件</el-button> true-label="1" false-label="0"></el-checkbox>
</el-upload> <el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
<!-- 1 普通input --> v-model="formModel[column.codeCamel]"
<el-input v-else :ref="column.ref || ''"
:style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}" :disabled="column.disabled"
v-model="formModel[column.codeCamel]" @change="column.change && column.change($event)">
:disabled="column.disabled" <el-checkbox v-for="option in column.options"
:readonly="column.readonly" :label="option" :key="option">{{option}}</el-checkbox>
:ref="column.ref || ''" </el-checkbox-group>
@change="column.change && column.change($event,formModel)"></el-input> <!-- 6 富文本 -->
</el-form-item> <quill-editor v-else-if="column.widgetType === 5"
<!--按钮--> :ref="column.ref || ''" :disabled="column.disabled"
<el-form-item v-if="buttons && buttons.length > 0"> v-model="formModel[column.codeCamel]"
<el-col :span="24/buttons.length" v-for="(btn,key) in buttons" :key="key"> :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'70%'}"
<el-button v-if="btn.type === 1" :options="editorOption"
type="primary" @blur="onEditorBlur($event)"
@click="onSubmit(btn.method,btn.beforeSubmit)">{{btn.text}}</el-button> @focus="onEditorFocus($event)"
<el-button v-if="btn.type === 2" @change="column.change && column.change($event)"
type="primary" @ready="onEditorReady($event)">
@click="resetForm(btn.method)">{{btn.text}}</el-button> </quill-editor>
<el-button v-if="btn.type === 3" <!-- 7 单选框 -->
type="primary" <el-radio-group v-else-if="column.widgetType === 7"
@click="cancel(btn.method)">{{btn.text}}</el-button> :disabled="column.disabled"
<el-button v-if="!btn.type" @change="column.change && column.change($event)"
type="primary" v-model="formModel[column.codeCamel]">
@click="cancel(btn.method)">{{btn.text}}</el-button> <el-radio v-for="option in column.options"
</el-col> :key="option.label" :label="option.label">{{option.value}}</el-radio>
</el-form-item> </el-radio-group>
</el-form> <!-- 8 文件 -->
</div> <el-upload v-else-if="column.widgetType === 8"
:accept="column.accept || '*/*'"
:name="column.param || 'picture'"
:action=" column.url || '/api/upload'"
:on-remove="handleRemove"
:on-change="column.change || handleChange"
:file-list="fileList"
:multiple="column.multiple"
ref="upload"
:on-success="uploadSuccess">
<el-button slot="trigger" size="small" type="primary"
:disabled="column.disabled">选取文件</el-button>
</el-upload>
<!-- 1 普通input || {width:'65%'}-->
<el-input v-else
:style="formStyle && formStyle.input && formStyle.input.style || {width:'70%'}"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
:readonly="column.readonly"
:ref="column.ref || ''"
@change="column.change && column.change($event,formModel)"></el-input>
</el-form-item>
<!--按钮-->
<el-form-item v-if="buttons && buttons.length > 0">
<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.beforeSubmit)">{{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="cancel(btn.method)">{{btn.text}}</el-button>
<el-button v-if="!btn.type"
type="primary"
@click="cancel(btn.method)">{{btn.text}}</el-button>
</el-col>
</el-form-item>
</el-form>
</el-col> </el-col>
<el-col :span="layout ? layout.left : 6"> <el-col :span="layout ? layout.right : 0">
<div></div> <div></div>
</el-col> </el-col>
</el-row> </el-row>
...@@ -183,6 +183,8 @@ ...@@ -183,6 +183,8 @@
* default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue * default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue
* hide属性可选，设置该表单字段是否显示,值为boolean * hide属性可选，设置该表单字段是否显示,值为boolean
* ref属性可选，用来获取当前表单dom节点 * ref属性可选，用来获取当前表单dom节点
* param属性可选，当表单类型为文件类型时，可传入param字段，值为后台规定必传参数，默认值为picture
* accept属性可选,当表单类型为文件类型时，可传入accept字段，限制限制上传文件类型，取值规范参考w3c
* widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input * widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)， * 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)，
* 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项）， * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
...@@ -533,12 +535,12 @@ ...@@ -533,12 +535,12 @@
// textareaChange(val) { // textareaChange(val) {
// console.log(val) // console.log(val)
// }, // },
onEditorChange({ quill, html, text }) { // onEditorChange({ quill, html, text }) {
console.log(quill) // console.log(quill)
console.log(html) // console.log(html)
console.log(text) // console.log(text)
// this.content = html // // this.content = html
}, // },
onEditorBlur(val) { onEditorBlur(val) {
// console.log(val) // console.log(val)
}, },
...@@ -893,9 +895,9 @@ ...@@ -893,9 +895,9 @@
// self.partPropModel[key] = value.join('') // self.partPropModel[key] = value.join('')
// } // }
// }) // })
console.log('本表', self.nativeFormModel) // console.log('本表', self.nativeFormModel)
console.log('外表', self.foreignFormModel) // console.log('外表', self.foreignFormModel)
console.log('部分属性', self.partPropModel) // console.log('部分属性', self.partPropModel)
} }
// 发送新建请求 // 发送新建请求
console.log('请求之前', self.formModel) console.log('请求之前', self.formModel)
...@@ -913,8 +915,6 @@ ...@@ -913,8 +915,6 @@
} }
}).then(resp => { }).then(resp => {
console.log('创建成功', resp.data) console.log('创建成功', resp.data)
// 设置中间表与本表(主表)对应字段
// if (!self.relates || !self.relates.length) return
// 创建中间表数据 // 创建中间表数据
if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) { if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) {
self.$set(self.relateData, self.relates[1].relateKeys[0], resp.data.id) self.$set(self.relateData, self.relates[1].relateKeys[0], resp.data.id)
...@@ -953,7 +953,7 @@ ...@@ -953,7 +953,7 @@
} }
}) })
} }
console.log('外表公共属性partProp', self.partPropModel) // console.log('外表公共属性partProp', self.partPropModel)
// 把外表公共属性partProp的值写入foreignArray的每条数据对象 // 把外表公共属性partProp的值写入foreignArray的每条数据对象
if (self.foreignArray.length > 0) { if (self.foreignArray.length > 0) {
_.each(self.foreignArray, function(item, key) { _.each(self.foreignArray, function(item, key) {
...@@ -980,7 +980,7 @@ ...@@ -980,7 +980,7 @@
} }
item = Object.assign(item, tem) item = Object.assign(item, tem)
}) })
console.log('外表数据', self.foreignArray) // console.log('外表数据', self.foreignArray)
// 批量创建信息 // 批量创建信息
const url = _.keys(self.refers)[0] + 's' + '/create/batch' const url = _.keys(self.refers)[0] + 's' + '/create/batch'
// const string = self.transformRequest(self.foreignArray) // const string = self.transformRequest(self.foreignArray)
...@@ -1059,6 +1059,17 @@ ...@@ -1059,6 +1059,17 @@
} }
</script> </script>
<style scoped> <style>
.hm-form .el-form-item__content{
margin-left: 173px !important;
}
.hm-form .ql-toolbar.ql-snow .ql-formats{
margin-right: 3px;
}
.hm-form .ql-toolbar.ql-snow + .ql-container.ql-snow {
height: 150px;
}
.hm-form .ql-toolbar.ql-snow{
padding: 7px;
}
</style> </style>
src/views/haomo/components/forms/index.vue
View file @ b14b9dd1
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
], // default: 1 ], // default: 1
change: this.inputChange }, change: this.inputChange },
// 8文件 change: this.uploadChange // 8文件 change: this.uploadChange
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址 { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload', param: 'picture', accept: 'image/*' } // url是后台接口地址
], ],
// CcSubject示例 // CcSubject示例
showUserColumns2: [ showUserColumns2: [
...@@ -188,8 +188,8 @@ ...@@ -188,8 +188,8 @@
console.log(125, object) console.log(125, object)
return object // 将数据返回 return object // 将数据返回
}, },
method1() { method1(formModel) {
console.log('method1') console.log('formModel')
}, },
method2() { method2() {
console.log('method2') console.log('method2')
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ b14b9dd1
...@@ -136,7 +136,7 @@ ...@@ -136,7 +136,7 @@
<!-- 弹窗 --> <!-- 弹窗 -->
<!-- @TODO 补充详情弹窗 --> <!-- @TODO 补充详情弹窗 -->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="dialogWidth" v-if="dialogFormVisible"> <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="45%" v-if="dialogFormVisible">
<hm-complex-form :schema="HmComplexForm.formSchema" <hm-complex-form :schema="HmComplexForm.formSchema"
:columns="HmComplexForm.showUserColumns" :columns="HmComplexForm.showUserColumns"
:buttons="HmComplexForm.showUserButtons" :buttons="HmComplexForm.showUserButtons"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment