Skip to content

V
VueElementTemplate
Commit 81a03386 authored by gaochao's avatar gaochao
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents a975ca5a 963b386d
Show whitespace changes
Inline Side-by-side
Showing with 725 additions and 364 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 81a03386
...@@ -9,61 +9,65 @@ ...@@ -9,61 +9,65 @@
<div> <div>
<!--表单部分--> <!--表单部分-->
<el-form ref="form" <el-form ref="form"
:label-position="formStyle && formStyle.formOptions && formStyle.formOptions.labelPosition || 'right'"
element-loading-text="加载中" element-loading-text="加载中"
:label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '170px'"
:model="formModel" :model="formModel"
:rules="rules" :rules="rules"
label-width="200px" :style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'80%',margin:'0 auto'}">
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"
:key="column.id" :key="column.id"
:label="column.name" :label="column.name"
: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>-->
<!-- 1 普通input -->
<el-input v-if="column.widgetType === 1"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="useralidate(formModel[column.codeCamel])"></el-input>
<!-- 2 日期选择 --> <!-- 2 日期选择 -->
<el-date-picker v-else-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]" v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.datePicker && formStyle.datePicker.style || {width: '65%'}"
:type="column.dateType || 'date'" :type="column.dateType || 'date'"
align="right" :disabled="column.disabled" align="right" :disabled="column.disabled"
@change="logTimeChange" @change="column.change && column.change($event)"
:value-format="column.dateFormate || 'yyyy-MM-dd'" :value-format="column.dateFormate || 'yyyy-MM-dd'"
:picker-options="pickerOptions"> :picker-options="pickerOptions">
</el-date-picker> </el-date-picker>
<!-- 3 下拉框 --> <!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2" <el-select v-else-if="column.widgetType === 2"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
@change="selectChange" @change="column.change && column.change($event)"
:style="formStyle && formStyle.select && formStyle.select.style || {width: '65%'}"
:multiple="column.multiple" :multiple="column.multiple"
:disabled="column.disabled" :disabled="column.disabled"
style="width: 50%"
clearable> clearable>
<el-option v-for="item in column.options" <el-option v-for="(item,key) in column.options"
:key="item.value" :key="key"
:label="item.label" :label="item.label"
:value="item.value"> :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
<!-- 4 文本域 --> <!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4" <el-input v-else-if="column.widgetType === 4"
:style="formStyle && formStyle.textarea && formStyle.textarea.style || {width: '65%'}"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
type="textarea" :disabled="column.disabled" type="textarea" :disabled="column.disabled"
:autosize="{ minRows: 2, maxRows: 5}" :resize="formStyle && formStyle.textarea && formStyle.textarea.resize || 'vertical'"
:rows="2"> :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> </el-input>
<!-- 5 复选框 --> <!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3 && !column.options" <el-checkbox v-else-if="column.widgetType === 3 && !column.options"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
:disabled="column.disabled" :disabled="column.disabled"
@change="column.change && column.change($event)"
true-label="1" false-label="0"></el-checkbox> true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options" <el-checkbox-group v-else-if="column.widgetType === 3 && column.options"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
:disabled="column.disabled" :disabled="column.disabled"
@change="checkboxsChange"> @change="column.change && column.change($event)">
<el-checkbox v-for="option in column.options" <el-checkbox v-for="option in column.options"
:label="option" :key="option">{{option}}</el-checkbox> :label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group> </el-checkbox-group>
...@@ -71,28 +75,39 @@ ...@@ -71,28 +75,39 @@
<quill-editor v-else-if="column.widgetType === 5" <quill-editor v-else-if="column.widgetType === 5"
ref="textEditor" :disabled="column.disabled" ref="textEditor" :disabled="column.disabled"
v-model="formModel[column.codeCamel]" v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.quillEdito && formStyle.quillEdito.style || {width:'65%'}"
:options="editorOption" :options="editorOption"
@blur="onEditorBlur($event)" @blur="onEditorBlur($event)"
@focus="onEditorFocus($event)" @focus="onEditorFocus($event)"
@change="column.change && column.change($event)"
@ready="onEditorReady($event)"> @ready="onEditorReady($event)">
</quill-editor> </quill-editor>
<!-- 7 单选框 --> <!-- 7 单选框 -->
<el-radio-group v-else-if="column.widgetType === 7" <el-radio-group v-else-if="column.widgetType === 7"
:disabled="column.disabled" :disabled="column.disabled"
@change="column.change && column.change($event)"
v-model="formModel[column.codeCamel]"> v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options" <el-radio v-for="option in column.options"
:key="key" :label="key">{{option}}</el-radio> :key="option.label" :label="option.label">{{option.value}}</el-radio>
</el-radio-group> </el-radio-group>
<!-- 8 文件 --> <!-- 8 文件 -->
<el-upload v-else-if="column.widgetType === 8" <el-upload v-else-if="column.widgetType === 8"
class="upload-demo" name="picture"
action="/api/upload" :action=" column.url || '/api/upload'"
:on-remove="handleRemove" :on-remove="handleRemove"
multiple :file-list="fileList"
:on-exceed="handleExceed"> :multiple="column.multiple"
ref="upload"
:on-success="uploadSuccess">
<el-button slot="trigger" size="small" type="primary" <el-button slot="trigger" size="small" type="primary"
:disabled="column.disabled">选取文件</el-button> :disabled="column.disabled">选取文件</el-button>
</el-upload> </el-upload>
<!-- 1 普通input -->
<el-input v-else
:style="formStyle && formStyle.input && formStyle.input.style || {width:'65%'}"
v-model="formModel[column.codeCamel]"
:disabled="column.disabled"
@change="column.change && column.change($event)"></el-input>
</el-form-item> </el-form-item>
<!--按钮--> <!--按钮-->
<el-form-item v-if="buttons && buttons.length > 0"> <el-form-item v-if="buttons && buttons.length > 0">
...@@ -105,7 +120,10 @@ ...@@ -105,7 +120,10 @@
@click="resetForm(btn.method)">{{btn.text}}</el-button> @click="resetForm(btn.method)">{{btn.text}}</el-button>
<el-button v-if="btn.type === 3" <el-button v-if="btn.type === 3"
type="primary" type="primary"
@click="btn.method">{{btn.text}}</el-button> @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-col>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -149,20 +167,32 @@ ...@@ -149,20 +167,32 @@
/** /**
* 必传，指定要显示的表单字段及类型。数组的元素为对象类型，对象的属性有name、codeCamel、widgetType、disabled、 * 必传，指定要显示的表单字段及类型。数组的元素为对象类型，对象的属性有name、codeCamel、widgetType、disabled、
* options、multiple、dateType等，不同的表单类型需配置的属性不同， * options、multiple、dateType等，不同的表单类型需配置的属性不同，
* codeCamel必须有，表示要显示的表单字段, * codeCamel属性，表示要显示的表单字段, 如果其他字段都不需要传，可以只写codeCamel的值，比如['username','departmentId']
* name表示自定义的字段名，如果不传，默认为数据库中的字段名， * name属性可选，表示自定义的字段名，如果不传，默认为数据库中的字段名，
* widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input * change属性可选，值为函数类型，表示input的change事件的执行方法，参数即为input输入内容
* 取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框)， * default属性可选(复选框不支持)，设置默认值，取值规范参考form/index.vue
* hide属性可选，设置该表单字段是否显示,值为boolean
* widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* 取值1-8(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传)，
* 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项）， * 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
* 对于复选框，如果只有一个备选项则不必传options, * 对于复选框，如果只有一个备选项则不必传options,
* 若表单类型为下拉框，还可传入multiple字段，取值true/false，表示是否多选，默认false * 若表单类型为下拉框，还可传入multiple字段，取值boolean类型，true/false，表示是否多选，默认false
* 若表单类型为时间日期，可传入dateType字段，值为date（只显示日期）或datetime（显示日期和时间），如果不传， * 若表单类型为时间日期，可传入dateType字段，值为'date'（只显示日期）或'datetime'（显示日期和时间），如果不传，
* 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式， * 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式，
* 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-dd HH:mm:ss'，如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应 * 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-ddHH:mm:ss'，
* 所有的表单类型都可传入disabled字段，取值true/false，表示是否禁用，默认不禁用 * 如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应
* disabled属性可选，取值boolean类型,true/false，表示是否禁用，默认不禁用
* rule属性可选，进行自定义验证规则，rule取值规范参照elementUI，下面有简单示例
* 示例：[ * 示例：[
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true }, { name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true,
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false }, rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
},
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
rule: [
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
]
},
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false, { name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false,
options: [ options: [
{ value: 0, label: '选项1' }, { value: 0, label: '选项1' },
...@@ -193,16 +223,18 @@ ...@@ -193,16 +223,18 @@
/** /**
* 非必传，指定要显示的按钮及类型，默认不显示。 * 非必传，指定要显示的按钮及类型，默认不显示。
* 类型（type）关系到按钮要执行的方法，type=1，执行组件的提交方法，还可以传入了method字段，值为函数， * 类型（type）关系到按钮要执行的方法，type=1，执行组件的提交方法，还可以传入了method字段，值为函数，
* 该函数会作为提交方法的回调函数执行,同时还可以传入beforeSubmit字段，值为函数，函数接受一个包含表单数据的Object * 该函数会作为提交方法的回调函数执行，函数接受一个参数为新建或修改的数据,
* 类型参数，该函数可以在提交之前对表单数据进行处理，参数类似{username: 'name', loginid: 'id'},其中键为 * 同时还可以传入beforeSubmit字段，值为函数，函数接受两个参数(value,isCancel)
* 调用者传入的codeCamel * value为包含表单数据的对象，{username: 'name', loginid: 'id'},其中键为调用者传入的codeCamel
* 该函数可以在提交之前对表单数据进行处理，并返回数据；对象isCancel包含一个值为false的属性cancelSubmit
* 如果需要取消提交，将cancelSubmit值改为true
* type=2，执行组件的重置方法,如果用户传入了method，会作为重置方法的回调函数执行 * type=2，执行组件的重置方法,如果用户传入了method，会作为重置方法的回调函数执行
* type=3，直接执行用户传入的方法 * type=3，直接执行用户传入的方法
* 如果要传入了确定/取消的回调函数，请先传入对应的按钮 * 如果要传入了确定/取消的回调函数，请先传入对应的按钮
* 示例：[ * 示例：[
* {text: '确定', type: '1', method: method1}, * {text: '确定', type: 1, method: method1, beforeSubmit: this.processData},
* {text: '重置', type: '2', method: method2}, * {text: '重置', type: 2, method: method2},
* {text: '取消', type: '3', method: method3} * {text: '取消', type: 3, method: method3}
* ] * ]
*/ */
buttons: { buttons: {
...@@ -224,33 +256,93 @@ ...@@ -224,33 +256,93 @@
layout: { layout: {
type: Object, type: Object,
required: false required: false
},
/**
* 用来将本表的外链字段(table_id类似的字段)指向的外链表相关联, 格式为:
* {
* "hm_user": { //外链表 表名 本表所对应的主键表）
* includes:['user_id'] // 与主表所对应的外键
* }
* }
*
*/
includes: {
type: Object,
required: false
},
/**
* 用来将其他表的外链字段指向本表关联，同时返回数据, 格式为:
* {
* 'auth_token': { //主键id所对应的外键表 表名1 （本表所对应的外键表）
* includes: ['user_id'] //外键表的外键字段
* }
* }
*/
refers: {
type: Object,
required: false
},
/**
* 请求成功或失败时的提示信息,格式为:
* tips: {
* hidde: false, // 是否显示提示，默认false显示
* newSuccess: { text: '发布成功' }, // 新建成功的提示
* newError: { text: '发布失败' }, // 新建失败的提示
* editSuccess: { text: '编辑成功' }, // 编辑成功的提示
* editError: { text: '编辑失败' } // 编辑失败的提示
* otherError: { text: '没有传ID，不可以提交' }
* }
*/
tips: {
type: Object,
required: false
},
/**
* 表单样式设置,格式为:
* formStyle: {
* formOptions: { labelWidth: '170px', labelPosition: 'right' },
* datePicker: { style: { width: '60%' }},
* input: { style: { width: '60%' }},
* select: { style: { width: '60%' }},
* textarea: {
* style: { width: '60%' },
* resize: 'none',
* autosize: { minRows: 3, maxRows: 5 },
* rows: 3
* },
* quillEdito: { style: { width: '65%' }}
* },
*/
formStyle: {
type: Object,
required: false
} }
}, },
data() { data() {
var validateUsername = (rule, value, callback) => { // var validateUsername = (rule, value, callback) => {
// console.log(value.length) // // console.log(value.length)
if (!value) { // if (!value) {
callback(new Error('请输入用户名')) // callback(new Error('请输入用户名'))
} else if ((value.length < 2 || value.length > 10)) { // } else if ((value.length < 2 || value.length > 10)) {
callback(new Error('用户名长度在 2 到 10 个字符')) // callback(new Error('用户名长度在 2 到 10 个字符'))
} else { // } else {
callback() // callback()
} // }
} // }
var validatePassword = (rule, value, callback) => { // var validatePassword = (rule, value, callback) => {
if (value.length > 0 && !(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value))) { // if (value.length > 0 && !(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value))) {
callback(new Error('密码必须同时包含数字和字母 6-20位')) // callback(new Error('密码必须同时包含数字和字母 6-20位'))
} else { // } else {
callback() // callback()
} // }
} // }
var validateMobile = (rule, value, callback) => { // var validateMobile = (rule, value, callback) => {
if (value.length > 0 && !(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(value))) { // if (value.length > 0 && !(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(value))) {
callback(new Error('请输入正确的电话号码或手机号')) // callback(new Error('请输入正确的电话号码或手机号'))
} else { // } else {
callback() // callback()
} // }
} // }
// var validateEmail = (rule, value, callback) => { // var validateEmail = (rule, value, callback) => {
// if (value.length > 0) { // if (value.length > 0) {
// if (!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value))) { // if (!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value))) {
...@@ -266,26 +358,26 @@ ...@@ -266,26 +358,26 @@
formModel: {}, // 双向绑定的数据变量 formModel: {}, // 双向绑定的数据变量
showUserColumns: [], // 要显示的字段 showUserColumns: [], // 要显示的字段
rules: { rules: {
username: [ // username: [
{ validator: validateUsername, trigger: 'change' } // { validator: validateUsername, trigger: 'change' }
// { required: true, message: '请输入用户名', trigger: 'blur' }, // { required: true, message: '请输入用户名', trigger: 'blur' },
// { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } // { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
], // ],
loginid: [ // loginid: [
// { required: true, message: '请输入登陆ID', trigger: 'blur' } // { required: true, message: '请输入登陆ID', trigger: 'blur' }
], // ],
password: [ // password: [
{ validator: validatePassword, trigger: 'change' } // { validator: validatePassword, trigger: 'change' }
// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' } // { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
], // ],
mobile: [ // mobile: [
{ validator: validateMobile, trigger: 'change' } // { validator: validateMobile, trigger: 'change' }
// { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码', trigger: 'change' } // { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码', trigger: 'change' }
], // ]
email: [ // email: [
// { validator: validateEmail, trigger: 'change' } // { validator: validateEmail, trigger: 'change' }
{ type: 'email', message: '请输入正确的邮箱', trigger: 'change' } // { type: 'email', message: '请输入正确的邮箱', trigger: 'change' }
] // ]
}, },
editorOption: { // 富文本选项配置 editorOption: { // 富文本选项配置
placeholder: '', placeholder: '',
...@@ -299,9 +391,9 @@ ...@@ -299,9 +391,9 @@
} }
}, },
pickerOptions: { // 日期选项配置 pickerOptions: { // 日期选项配置
disabledDate(time) { // disabledDate(time) {
return time.getTime() > Date.now() // return time.getTime() > Date.now()
}, // },
shortcuts: [{ shortcuts: [{
text: '今天', text: '今天',
onClick(picker) { onClick(picker) {
...@@ -322,45 +414,88 @@ ...@@ -322,45 +414,88 @@
picker.$emit('pick', date) picker.$emit('pick', date)
} }
}] }]
} },
fileList: [], // 上传文件列表
fileCode: '', // 上传组件对应的数据库字段
isCancel: { cancelSubmit: false }
} }
}, },
created() { created() {
// this.validate() // this.validate()
this.init() this.init()
this.getList() this.getList()
console.log(this.buttons) // console.log(this.buttons)
}, },
methods: { methods: {
createRule() { handleRemove(file, fileList) {
_.each() // console.log(self.formModel)
}, },
useralidate(value) { handlePreview(file) {
// console.log(event) console.log(file)
console.log(value)
}, },
handleRemove(file, fileList) { uploadSuccess(response, file, fileList) {
console.log(file, fileList) const self = this
console.log('上传成功')
// console.log(response)
// console.log('fileList', fileList)
// console.log(self.fileList)
_.each(self.columns, function(item, index) {
if (item.widgetType === 8) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
self.formModel[key] = response.message || response.visitName
}
})
}
})
// console.log(404, self.formModel)
}, },
handleExceed(files, fileList) { // inputChange(val) {
this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`) // // console.log(event)
// // console.log(val)
// },
// checkboxChange(val) {
// console.log(val)
// },
// checkboxsChange(val) {
// console.log(val)
// },
// selectChange(val) {
// console.log(val)
// },
// radioChange(val) {
// console.log(val)
// },
// logTimeChange(val) {
// console.log(val)
// },
// textareaChange(val) {
// console.log(val)
// },
// onEditorChange({ quill, html, text }) {
// console.log(quill)
// console.log(html)
// console.log(text)
// // this.content = html
// },
onEditorBlur(val) {
// console.log(val)
}, },
checkboxsChange(val) { onEditorFocus(val) {
console.log(val) // console.log('editor focus!')
}, },
selectChange(val) { onEditorReady(val) {
console.log(val) // console.log('editor ready!')
}, },
// 判断是否一个对象的所有属性都为空 // 判断是否一个对象的所有属性都为空
isEmpty(obj) { isEmpty(obj) {
_.forEach(obj, function(val) { for (var key in obj) {
if (val) return false if (obj[key] && _.trim(obj[key])) {
}) return false
}
}
return true return true
}, },
logTimeChange(value) {
console.log(value)
},
validate() { validate() {
const self = this const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列 // this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
...@@ -381,15 +516,6 @@ ...@@ -381,15 +516,6 @@
} }
}) })
}, },
onEditorBlur(editor) {
// console.log('editor blur!')
},
onEditorFocus(editor) {
// console.log('editor focus!')
},
onEditorReady(editor) {
// console.log('editor ready!')
},
// 存在tableId，修改数据前先获取数据 // 存在tableId，修改数据前先获取数据
getList() { getList() {
const self = this const self = this
...@@ -402,49 +528,63 @@ ...@@ -402,49 +528,63 @@
} */ } */
self.Loading = false self.Loading = false
// console.log(self.formModel) // console.log(self.formModel)
var formArray = _.keys(self.formModel) var formArray = _.keys(self.formModel) // 提取formModel的属性到数组
// console.log(formArray) // console.log(formArray)
self.formModel = _.pick(resp.data, formArray) self.formModel = _.pick(resp.data, formArray) // 根据数组中的属性提取出data中对应的数据
// console.log(self.formModel)
// 下拉框多选时将字符串转为数组
_.each(self.columns, function(item, index) {
if (item.widgetType === 2 && item.multiple === true) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
// console.log(11111, self.formModel[key])
self.formModel[key] = self.formModel[key].split(',')
}
})
}
})
// console.log(2222, self.formModel)
}) })
}, },
// 初始化
init() { init() {
const self = this const self = this
if (self.columns && self.columns.length) { if (self.columns && self.columns.length) {
self.showUserColumns = JSON.parse(JSON.stringify(self.columns)) self.showUserColumns = _.cloneDeep(self.columns)
// console.log(self.showUserColumns) // console.log(504, self.showUserColumns)
// 将字符串对象进行替换处理 // console.log(514, self.formModel)
// 处理传来的表单字段
_.each(self.showUserColumns, function(column, index) { _.each(self.showUserColumns, function(column, index) {
if (typeof column === 'object') { if (typeof column === 'string') {
// 生成一个新对象 // 生成一个新对象
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column.codeCamel] const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column]
// console.log(tmp) /* self.$set(tmp, 'code', tmp.code.toLowerCase())
// self.$set(tmp, 'code', tmp.code.toLowerCase())
column.name && self.$set(tmp, 'name', column.name) // 自定义字段名 column.name && self.$set(tmp, 'name', column.name) // 自定义字段名
self.$set(tmp, 'widgetType', column.widgetType || 1) column.rule && self.$set(tmp, 'rule', column.rule) // 设置表单校验规则
// column.validate && self.$set(tmp, 'validate', column.validate)
column.disabled && self.$set(tmp, 'disabled', column.disabled) // 设置是否禁用 column.disabled && self.$set(tmp, 'disabled', column.disabled) // 设置是否禁用
column.options && self.$set(tmp, 'options', column.options) // 设置下拉框或者多选的选项 column.options && self.$set(tmp, 'options', column.options) // 设置下拉框或者多选的选项
column.multiple && self.$set(tmp, 'multiple', column.multiple) // 设置下拉框是否多选 column.multiple && self.$set(tmp, 'multiple', column.multiple) // 设置下拉框是否多选
column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型 column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式 column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
column.change && self.$set(tmp, 'change', column.change) // 设置change函数
column.url && self.$set(tmp, 'url', column.url) // 设置文件上传地址 */
self.$set(tmp, 'widgetType', 1) // 设置表单类型
self.$set(self.showUserColumns, index, tmp) // 顺序 self.$set(self.showUserColumns, index, tmp) // 顺序
} }
}) })
console.log(self.showUserColumns) console.log(self.showUserColumns)
// 提取v-model绑定的变量 // 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) { _.each(self.showUserColumns, function(item) {
if (item.widgetType === 3 && item.options && item.options.length > 0) { if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
self.$set(self.formModel, item.codeCamel, []) self.$set(self.formModel, item.codeCamel, [])
} else { } else {
self.$set(self.formModel, item.codeCamel, '') item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '')
} }
}) })
if (!request.defaults.baseURL) { if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api' request.defaults.baseURL = '/org/api'
console.log('没有')
} }
console.log(request.defaults.baseURL) // console.log(request.defaults.baseURL)
// 加载等待 // 加载等待
if (self.tableId) { if (self.tableId) {
self.Loading = true self.Loading = true
...@@ -465,13 +605,36 @@ ...@@ -465,13 +605,36 @@
onSubmit(callback, processData) { onSubmit(callback, processData) {
const self = this const self = this
console.log('点击了提交函数') console.log('点击了提交函数')
// console.log(self.formModel)
self.formModel = processData ? processData(self.formModel) : self.formModel // 对表单数据进行处理
console.log(self.formModel) console.log(self.formModel)
// if (self.isEmpty(self.formModel)) return // 对表单数据进行处理
self.formModel = processData ? processData(self.formModel, self.isCancel) : self.formModel
// 如果在processData中禁止提交了，显示提示信息
if (self.isCancel.cancelSubmit) {
console.log('取消提交')
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.otherError.text,
type: 'error'
})
}
return
}
// self.formModel = JSON.stringify(self.formModel)
// var params = _.cloneDeep(self.formModel)
// params = JSON.stringify(params)
// console.log(self.formModel)
// 如果所有值都为空 禁止提交
if (self.isEmpty(self.formModel)) {
self.$message({
message: '不能都为空',
type: 'error'
})
return
}
// 验证、提交
self.$refs.form.validate((valid) => { self.$refs.form.validate((valid) => {
if (valid) { if (valid) {
console.log('valid通过!') // console.log('valid通过!')
// 存在tableId 则修改信息 // 存在tableId 则修改信息
if (self.tableId) { if (self.tableId) {
request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', { request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', {
...@@ -483,7 +646,7 @@ ...@@ -483,7 +646,7 @@
var str = [] var str = []
// 删除空值的属性 // 删除空值的属性
obj = _.omitBy(obj, function(value) { obj = _.omitBy(obj, function(value) {
return !value return value === null // 删除value=null的属性，剩下的返回给新对象
}) })
for (var p in obj) { for (var p in obj) {
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p])) str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
...@@ -492,12 +655,35 @@ ...@@ -492,12 +655,35 @@
} }
}).then(resp => { }).then(resp => {
console.log('修改成功') console.log('修改成功')
self.resetForm() // self.resetForm()
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.editSuccess.text,
type: 'success'
})
}
// self.formModel = {} // 新建完成清空数据
if (typeof (callback) === 'function') { if (typeof (callback) === 'function') {
callback() callback(resp.data)
}
}).catch(err => {
console.log(err)
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.editError.text,
type: 'error'
})
} }
}) })
} else { // 不存在tableId 则创建一条数据 } else { // 不存在tableId 则创建一条数据
console.log(self.formModel)
// if (self.isEmpty(self.formModel)) {
// self.$message({
// message: '不能都为空',
// type: 'error'
// })
// return
// }
request(self.schema.modelUnderscorePlural + '/new', { request(self.schema.modelUnderscorePlural + '/new', {
method: 'post', method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
...@@ -512,14 +698,33 @@ ...@@ -512,14 +698,33 @@
} }
}).then(resp => { }).then(resp => {
console.log('创建成功') console.log('创建成功')
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.newSuccess.text,
type: 'success'
})
}
// self.formModel = {} // 新建完成清空数据
// self.resetForm() // self.resetForm()
if (typeof (callback) === 'function') { if (typeof (callback) === 'function') {
callback() callback(resp.data)
}
}).catch(err => {
console.log(err)
if (self.tips && !self.tips.hidde) {
self.$message({
message: self.tips.newError.text,
type: 'error'
})
} }
}) })
} }
} else { } else {
console.log('提交失败!!') console.log('提交失败!!')
self.$message({
message: '验证未通过',
type: 'error'
})
return false return false
} }
}) })
...@@ -535,8 +740,20 @@ ...@@ -535,8 +740,20 @@
* 清空所有输入及提示信息。 * 清空所有输入及提示信息。
*/ */
resetForm(callback) { resetForm(callback) {
// const self = this
console.log('重置') console.log('重置')
this.$refs.form.resetFields() this.$refs.form.resetFields()
// console.log(self.formModel)
// // 清空
// _.each(self.formModel, function(value, index) {
// self.formModel[index] = ''
// })
// 执行回调
if (typeof (callback) === 'function') {
callback()
}
},
cancel(callback) {
if (typeof (callback) === 'function') { if (typeof (callback) === 'function') {
callback() callback()
} }
......
src/views/haomo/components/forms/index.vue
View file @ 81a03386
<template> <template>
<!--:tableId="tableId"--> <!--:refers="judgeRefers"-->
<div> <div>
<hm-complex-form :schema="schema['HmUser']" <hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns" :columns="showUserColumns"
:buttons="showUserButtons" :buttons="showUserButtons"
:tableId="tableId"
:layout="layout" :layout="layout"
> :tips="tips"
:refers="userRefers">
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -25,34 +25,119 @@ ...@@ -25,34 +25,119 @@
}, },
data() { data() {
return { return {
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 8: 文件上传
showUserColumns: [ showUserColumns: [
{ name: '用户名称', codeCamel: 'username', widgetType: 1, disabled: true }, // 1普通input
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false }, { name: '选择类型', codeCamel: 'type', widgetType: 1, disabled: false,
{ name: '选择类型', codeCamel: 'type', widgetType: 2, multiple: false, change: this.inputChange
// rule: { required: true, message: '用户名不能为空', trigger: 'blur' }
// hide: true
// default: '默认值',
},
// 5富文本
{ name: '电子邮件', codeCamel: 'email', widgetType: 5, disabled: false,
change: this.inputChange, hide: false
// rule: [
// { required: true, message: '请输入邮箱地址', trigger: 'blur' },
// { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
// ]
},
// 2下拉框
{ name: '用户名称', codeCamel: 'username', widgetType: 2, multiple: false,
change: this.inputChange, // default: [1], 如果开启多选，默认选中项用数组[1]、[1,2,3]
options: [ options: [
{ value: 0, label: '选项1' }, { value: '1', label: '企业' }, // 下拉框的label是选项文字，value是选中值
{ value: 1, label: '选项2' }, { value: '2', label: '代理商' },
{ value: 2, label: '选项3' }, { value: '3', label: '会员' },
{ value: 3, label: '选项4' }, { value: '4', label: '访客' }
{ value: 4, label: '选项5' }
] ]
}, },
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'] }, // 3多选 不支持默认值
{ codeCamel: 'password', widgetType: 4 }, { name: '部门ID', codeCamel: 'departmentId', widgetType: 3, options: ['美女', '帅哥'], change: this.inputChange },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' }, // 4密码
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }, { name: '密码', codeCamel: 'password', widgetType: 4, change: this.inputChange },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8 } // 'password',
// 6日期
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime',
dateFormate: 'yyyy-MM-dd HH:mm:ss', change: this.inputChange
// default: '2018-01-01 00:07:08'
},
// 7单选
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7,
options: [
{ label: 1, value: '会员' }, // 单选的value是选项文字，label是选中值
{ label: 2, value: '访客' }
], // default: 1
change: this.inputChange },
// 8文件
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
],
showUserColumns2: [
// 1普通input
{ name: '用户名称', codeCamel: 'username', widgetType: 1 },
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 1 },
{ name: '部门名称', codeCamel: 'departmentName', widgetType: 1 },
{ name: '密码', codeCamel: 'password', widgetType: 1 },
{ name: '电话', codeCamel: 'mobile', widgetType: 1 },
{ name: '电子邮件', codeCamel: 'email', widgetType: 1 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 1 },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 1 }
], ],
userIncludes: {
'hm_user': {
includes: ['user_id']
}
},
// 主查外
userRefers: {
'cc_shift': {
includes: ['applicant_id']
}
},
// 要显示按钮 // 要显示按钮
showUserButtons: [ showUserButtons: [
{ text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData }, { text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData },
{ text: '重置', type: 2, method: this.method2 }, { text: '重置', type: 2, method: this.method2 },
{ text: '生成', method: this.method4 },
{ text: '取消', type: 3, method: this.method3 } { text: '取消', type: 3, method: this.method3 }
], ],
// showUserButtons: [] // showUserButtons: []
// 布局方式 // 布局方式
layout: { left: 6, middle: 12, right: 6 } layout: { left: 4, middle: 16, right: 4 },
// 自定义提示消息
tips: {
hidde: false, // 是否显示提示，默认false显示
newSuccess: { text: '发布成功' }, // 新建成功的提示
newError: { text: '发布失败' }, // 新建失败的提示
editSuccess: { text: '编辑成功' }, // 编辑成功的提示
editError: { text: '编辑失败' }, // 编辑失败的提示
otherError: { text: '填写有误，不可以提交' } // processData中取消提交的提示
},
// 各类型表单样式设置
formStyle: {
formOptions: {
labelWidth: '170px',
labelPosition: 'right'
},
datePicker: { style: { width: '60%' }},
input: { style: { width: '60%' }},
select: { style: { width: '60%' }},
textarea: {
style: { width: '60%' },
resize: 'none',
autosize: { minRows: 3, maxRows: 5 },
rows: 3
},
quillEdito: { style: { width: '65%' }}
},
// 'cc_option': {
// includes: ['ccSubjectId']
// }
judgeRefers: { // 主查外
'cc_hm_user': {
includes: ['applicantId']
}
}
} }
}, },
computed: { computed: {
...@@ -62,12 +147,18 @@ ...@@ -62,12 +147,18 @@
created() { created() {
this.schema = schema this.schema = schema
// console.log(this.schema) // console.log(this.schema)
this.tableId = '0e26566e953449a7a7500c34be39fd26' // this.tableId = '1efff63125954583b0ac5a9c252b9041'
this.tableId = 'b08d2220d2574bf2ac09ec4f470ed999'
}, },
methods: { methods: {
processData(object) { inputChange(val) {
console.log(object) // console.log(event)
return object console.log(val)
},
processData(object, isCancel) {
isCancel.cancelSubmit = false // 如果要取消提交，设为true
console.log(125, object)
return object // 将数据返回
}, },
method1() { method1() {
console.log('method1') console.log('method1')
...@@ -78,15 +169,8 @@ ...@@ -78,15 +169,8 @@
method3() { method3() {
console.log('method3') console.log('method3')
}, },
usernameValidate() { method4() {
console.log(1) console.log('method4')
// if (!value) {
// callback(new Error('请输入用户名'))
// } else if ((value.length < 2 || value.length > 10)) {
// callback(new Error('用户名长度在 2 到 10 个字符'))
// } else {
// callback()
// }
} }
} }
} }
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 81a03386
...@@ -33,7 +33,6 @@ ...@@ -33,7 +33,6 @@
class="filter-item hm-complex-table__filter-span" class="filter-item hm-complex-table__filter-span"
@keyup.enter.native="handleFilter" @keyup.enter.native="handleFilter"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
:placeholder="filter.placeholder[0]" :placeholder="filter.placeholder[0]"
v-if="filter.isShow && !isShowFilter(filter) && isDatetimeFilter(filter)" v-if="filter.isShow && !isShowFilter(filter) && isDatetimeFilter(filter)"
v-model="listQuery.filters[schema['modelUnderscore']][getFilterColumn(filter)][getFilterOper(filter)]"> v-model="listQuery.filters[schema['modelUnderscore']][getFilterColumn(filter)][getFilterOper(filter)]">
...@@ -43,37 +42,19 @@ ...@@ -43,37 +42,19 @@
class="filter-item" class="filter-item"
@keyup.enter.native="handleFilter" @keyup.enter.native="handleFilter"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
:placeholder="filter.placeholder[1]" :placeholder="filter.placeholder[1]"
v-if="filter.isShow && !isShowFilter(filter) && isDatetimeFilter(filter)" v-if="filter.isShow && !isShowFilter(filter) && isDatetimeFilter(filter)"
v-model="listQuery.filters[schema['modelUnderscore']][getFilterColumn(filter)][getFilterOperTwin(filter)]"> v-model="listQuery.filters[schema['modelUnderscore']][getFilterColumn(filter)][getFilterOperTwin(filter)]">
</el-date-picker> </el-date-picker>
</span> </span>
<!-- end 过滤条件 --> <!-- end 过滤条件 -->
<!--预定义按钮-->
<el-button-group v-if="buttonGroup">
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
</el-button-group>
<span v-if="!buttonGroup">
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
</span>
<!--自定义--> <!--自定义-->
<span v-if="definedOperate.length" v-for="operate in definedOperate"> <span v-if="definedOperate.length" v-for="operate in definedOperate">
<!--自定义按钮--> <!--自定义按钮-->
<el-button v-if="operate.type == 'button'" class="filter-item" type="primary" v-waves :icon="operate.icon" @click="operate.func">{{operate.label}}</el-button> <el-button v-if="operate.type == 'button'" class="filter-item" type="primary" v-waves :icon="operate.icon" @click="operate.func">{{operate.label}}</el-button>
<!--自定义下拉选择--> <!--自定义下拉选择-->
<el-form-item v-if="operate.type == 'select'" :label="operate.label"> <el-form-item v-if="operate.type == 'select'" :label="operate.label">
<el-select v-model="operate.value" :placeholder="operate.placeholder"> <el-select v-model="operate.value" :placeholder="operate.placeholder" clearable>
<el-option v-for="o in operate.options" :label="o.label" :value="o.code"></el-option> <el-option v-for="o in operate.options" :label="o.label" :value="o.code"></el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -89,18 +70,31 @@ ...@@ -89,18 +70,31 @@
<!--自定义时间选择--> <!--自定义时间选择-->
<el-form-item v-if="operate.type == 'datetime'" :label="operate.label"> <el-form-item v-if="operate.type == 'datetime'" :label="operate.label">
<el-date-picker type="datetime" <el-date-picker type="datetime"
align="right"
class="filter-item" class="filter-item"
@keyup.enter.native="handleFilter" @keyup.enter.native="handleFilter"
value-format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
:placeholder="operate.placeholder" :placeholder="operate.placeholder"
v-model="operate.value"> v-model="operate.value">
</el-date-picker> </el-date-picker>
</el-form-item> </el-form-item>
</span> </span>
<!--预定义按钮-->
<el-button-group v-if="buttonGroup">
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
</el-button-group>
<span v-if="!buttonGroup">
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-refresh" v-if="isShowRefresh" @click="refreshList">刷新</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
</span>
</el-form> </el-form>
</div> </div>
...@@ -108,20 +102,23 @@ ...@@ -108,20 +102,23 @@
<!-- 表格 --> <!-- 表格 -->
<el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
style="width: 100%" @selection-change="handleSelectionChange"> style="width: 100%" @selection-change="handleSelectionChange" @sort-change="sortChange" @current-change="tableCurrentChange">
<el-table-column type="index" :index="indexMethod" label="序号" width="50px"></el-table-column> <el-table-column type="index" :index="indexMethod" label="序号" width="50px"></el-table-column>
<el-table-column type="selection" width="55"> <el-table-column type="selection" width="55" v-if="isShowSelection"></el-table-column>
</el-table-column> <el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name"
<el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name"> :prop="column.codeCamel" :sortable="column.isSort" :width="column.width" :show-overflow-tooltip="showOverflowTooltip">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row[column.codeCamel] }}</span> <span v-if="(scope.row[column.codeCamel] !== false && scope.row[column.codeCamel] !== true )&& !column.render">{{ scope.row[column.codeCamel] }}</span>
<el-checkbox v-if="(scope.row[column.codeCamel] === false || scope.row[column.codeCamel] === true) && !column.render" v-model="scope.row[column.codeCamel]"></el-checkbox>
<span v-if='column.render' v-html="column.render(scope)"></span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column fixed="right" label="操作" :width="operationWidth" v-if="isShowEditDataButton || isShowDeleteButton"> <el-table-column fixed="right" label="操作" :width="operationWidth" v-if="isShowEditDataButton || isShowDeleteButton || definedOperation.length">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button @click="openDialog('editData',scope.row)" v-if="isShowEditDataButton" type="text" size="small">编辑</el-button> <el-button @click="openDialog('editData',scope.row)" v-if="isShowEditDataButton" type="text" size="small">编辑</el-button>
<el-button @click="deleteData(scope.row)" type="text" v-if="isShowDeleteButton" size="small">删除</el-button> <el-button @click="deleteData(scope.row)" type="text" v-if="isShowDeleteButton" size="small">删除</el-button>
<el-button @click="openDialog('detail',scope.row)" type="text" v-if="isShowDetail" size="small">详情</el-button> <el-button @click="openDialog('detail',scope.row)" type="text" v-if="isShowDetail" size="small">详情</el-button>
<el-button @click="operation.func(scope.row)" type="text" v-if="definedOperation.length" size="small" v-for="operation in definedOperation">{{operation.label}}</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -138,17 +135,15 @@ ...@@ -138,17 +135,15 @@
<!-- 弹窗 --> <!-- 弹窗 -->
<!-- @TODO 补充详情弹窗 --> <!-- @TODO 补充详情弹窗 -->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="dialogWidth"> <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="dialogWidth" v-if="dialogFormVisible">
<el-form v-if="dialogName == '详情'">
<el-form-item :label="dialog.name" :label-width="formLabelWidth" v-for="dialog in dialogForm">
<el-input v-model="dialog.value" disabled auto-complete="off"></el-input>
</el-form-item>
</el-form>
<hm-complex-form :schema="formSchema" <hm-complex-form :schema="formSchema"
:columns="showUserColumns" :columns="showUserColumns"
:buttons="showUserButtons" :buttons="showUserButtons"
:layout="layout" :layout="layout"
:tableId="tableId" v-if="dialogName != '详情'"> :tableId="tableId"
:tips="formTips"
:formStyle="formStyle"
ref="selectfood">
</hm-complex-form> </hm-complex-form>
</el-dialog> </el-dialog>
...@@ -253,6 +248,7 @@ ...@@ -253,6 +248,7 @@
* { * {
* "name": "姓名", * "name": "姓名",
* "codeCamel": "username", * "codeCamel": "username",
* "isSort": false, //是否排序，默认false
* "render": function(value){ * "render": function(value){
* return "<a href='value'></a>" * return "<a href='value'></a>"
* } * }
...@@ -282,7 +278,7 @@ ...@@ -282,7 +278,7 @@
}, },
/** /**
* 表格的选项，包括：pageSize、showExport、sortItem、sortOrder、showRefresh、showDeleteButton、 * 表格的选项，包括：pageSize、showExport、sortItem、sortOrder、showRefresh、showDeleteButton、
* buttonGroup、showDetail、dataProcessing、changeValue、newData、editData完整的示例为： * buttonGroup、showDetail、dataProcessing、promiseProcessing、changeValue、newData、editData完整的示例为：
* { * {
* "pageSize": 10, // 默认为10条数据/页 * "pageSize": 10, // 默认为10条数据/页
* "showExport": false, // 默认为不显示导出按钮 * "showExport": false, // 默认为不显示导出按钮
...@@ -291,13 +287,12 @@ ...@@ -291,13 +287,12 @@
* "showRefresh": false, //默认不显示刷新按钮 * "showRefresh": false, //默认不显示刷新按钮
* "showDeleteButton": false, //默认不显示删除按钮 * "showDeleteButton": false, //默认不显示删除按钮
* "buttonGroup": false //默认不以按钮组的方式呈现button * "buttonGroup": false //默认不以按钮组的方式呈现button
* showDetail: { * tableCurrentChange(value){} // 设置点击某行所执行方法
* isShow: false, // 默认不显示详情 * dataProcessing(value, params, definedOperate){} // 对接口返回数据进行处理（必须有返回值,返回值需为 [{}] 的形式，支持放回Promise对象）
* showColumns: ['mobile', 'loginid', 'username', 'email'] * promiseProcessing(value, params, definedOperate){} // 对接口返回数据进行处理（必须有返回值,返回Promise对象）
* },
* dataProcessing(value){} // 对接口返回数据进行处理
* "changeValue": { // 数据库字段转化显示，例如(0=否,1=是) * "changeValue": { // 数据库字段转化显示，例如(0=否,1=是)
* username: {1: '是', 0: '否'} * username: {1: '是', 0: '否'},
* type: { 1: 'Hm-isChecked', 0: 'Hm-noChecked' } // 以多选框的形式展示Hm-isChecked(选择状态)、Hm-noChecked(未选择状态)
* }, * },
* "newData": { // 新建按钮的配置 * "newData": { // 新建按钮的配置
* isShow: false, // 默认不显示新建按钮 * isShow: false, // 默认不显示新建按钮
...@@ -310,7 +305,10 @@ ...@@ -310,7 +305,10 @@
* showUserColumns: [], // 编辑表单的Columns配置,详情参考Form组件 * showUserColumns: [], // 编辑表单的Columns配置,详情参考Form组件
* formSchema: {}, // 编辑表单的schema配置 * formSchema: {}, // 编辑表单的schema配置
* layout: {} // 布局方式 * layout: {} // 布局方式
* } * },
* showDetail: { // 同编辑的的配置
* isShow: false, // 默认不显示详情
* },
* } * }
*/ */
options: { options: {
...@@ -321,7 +319,7 @@ ...@@ -321,7 +319,7 @@
* 自定义表格选项，包括：definedParams、definedOperate、完整的示例为： * 自定义表格选项，包括：definedParams、definedOperate、完整的示例为：
* { * {
* definedParams(params, operate){return params} // 自定义查询数据时的Params * definedParams(params, operate){return params} // 自定义查询数据时的Params
* definedOperate: [ // 自定义table顶部的操作，如果要根据多选框、输入框、时间选择器的值查询，需在自定义definedParams()方法中添加 * definedOperate: [ // 自定义table顶部的操作，如果要根据下拉选择、输入框、时间选择器的值查询，需在自定义definedParams()方法中添加
* { type: 'select', label:'', placeholder: '', options:[{label: '', code: ''}], value:''}, // 自定义多选框 * { type: 'select', label:'', placeholder: '', options:[{label: '', code: ''}], value:''}, // 自定义多选框
* { type: 'input', label:'', placeholder: '', code:'', value:''}, // 自定义输入框 * { type: 'input', label:'', placeholder: '', code:'', value:''}, // 自定义输入框
* { type: 'datetime', label:'', placeholder: '', code:'', value:''}, // 自定义时间选择器 * { type: 'datetime', label:'', placeholder: '', code:'', value:''}, // 自定义时间选择器
...@@ -358,18 +356,19 @@ ...@@ -358,18 +356,19 @@
multipleSelection: [], // 选择的数组 multipleSelection: [], // 选择的数组
dialogName: '', dialogName: '',
isShowSelection: false, // 是否显示多选
isShowNewButton: false, // 是否显示新建 isShowNewButton: false, // 是否显示新建
isShowEditDataButton: false, // 是否显示编辑 isShowEditDataButton: false, // 是否显示编辑
isShowDeleteButton: false, // 是否显示删除 isShowDeleteButton: false, // 是否显示删除
isShowExport: false, // 是否显示导出按钮 isShowExport: false, // 是否显示导出按钮
formSchema: {}, // form弹窗的Schema定义 formSchema: {}, // form弹窗的Schema定义
showUserColumns: [], // form弹窗的Columns定义 showUserColumns: [], // form弹窗的Columns定义
showUserButtons: [ // from弹窗显示按钮 showUserButtons: [], // from弹窗显示按钮,
{ text: '确定', type: 1, method: this.formConfirm },
{ text: '取消', type: 2, method: this.formCancel }
],
layout: { left: 0, middle: 24, right: 0 }, // form弹窗的布局方式 layout: { left: 0, middle: 24, right: 0 }, // form弹窗的布局方式
tableId: '', tableId: '',
formTips: '',
formStyle: '',
showOverflowTooltip: false,
isShowRefresh: false, isShowRefresh: false,
buttonGroup: false, buttonGroup: false,
...@@ -377,32 +376,7 @@ ...@@ -377,32 +376,7 @@
isShowDetail: false, // 是否显示详情按钮 isShowDetail: false, // 是否显示详情按钮
definedOperate: [], // 自定义操作 definedOperate: [], // 自定义操作
definedOperation: []
pickerOptions: { // 日期选项配置
disabledDate(time) {
return time.getTime() > Date.now()
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date())
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}]
}
} }
}, },
computed: { computed: {
...@@ -429,10 +403,16 @@ ...@@ -429,10 +403,16 @@
}, },
created() { created() {
// this.validate() // this.validate()
const self = this
this.init() if (this.userDefined && this.userDefined.pretreatment) {
self.userDefined.pretreatment().then(function() {})
this.getList() self.init()
self.getList()
console.log('IS-[object Promise]')
} else {
self.init()
self.getList()
}
}, },
methods: { methods: {
indexMethod(index) { indexMethod(index) {
...@@ -469,7 +449,7 @@ ...@@ -469,7 +449,7 @@
self.showColumns.push(tmp) self.showColumns.push(tmp)
}) })
} else { } else {
self.showColumns = JSON.parse(JSON.stringify(self.columns)) self.showColumns = _.cloneDeep(self.columns)
// 将字符串对象进行替换处理 // 将字符串对象进行替换处理
_.each(self.showColumns, function(column, index) { _.each(self.showColumns, function(column, index) {
if (typeof column === 'string') { if (typeof column === 'string') {
...@@ -481,6 +461,11 @@ ...@@ -481,6 +461,11 @@
} }
}) })
} }
if (self.showColumns) {
_.map(self.showColumns, function(item, index) {
item.isSort = item.isSort === undefined ? false : item.isSort === true ? 'custom' : false
})
}
// 处理过滤条件 // 处理过滤条件
if (self.filters) { if (self.filters) {
...@@ -511,11 +496,22 @@ ...@@ -511,11 +496,22 @@
console.log(request.defaults) console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`) console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
}, },
// 设置自定义组件
setDefinedOperate() { setDefinedOperate() {
const self = this const self = this
if (self.userDefined.definedOperate) { if (self.userDefined.definedOperate) {
self.definedOperate = self.userDefined.definedOperate self.definedOperate = self.userDefined.definedOperate
} }
if (self.userDefined.definedOperation) {
self.operationWidth += 50 * self.userDefined.definedOperation.length
self.definedOperation = self.userDefined.definedOperation
}
},
// 排序
sortChange(row) {
this.listQuery.sortItem = row.prop.replace(/([A-Z])/g, '_$1').toLowerCase()
this.listQuery.sortOrder = row.order === 'descending' ? 'desc' : 'asc'
this.getList()
}, },
getList() { getList() {
const self = this const self = this
...@@ -540,10 +536,6 @@ ...@@ -540,10 +536,6 @@
request(self.schema.modelUnderscorePlural, { request(self.schema.modelUnderscorePlural, {
params: params params: params
}).then(resp => { }).then(resp => {
// 数据库字段转化显示
if (self.options && self.options.changeValue) {
resp.data = self.changeValue(resp.data)
}
if (resp.data.length !== 0 && resp.data[0].superior !== undefined && resp.data[0].includes !== undefined && if (resp.data.length !== 0 && resp.data[0].superior !== undefined && resp.data[0].includes !== undefined &&
resp.data[0].refers !== undefined && resp.data[0].relates !== undefined) { resp.data[0].refers !== undefined && resp.data[0].relates !== undefined) {
self.list = [] self.list = []
...@@ -553,22 +545,39 @@ ...@@ -553,22 +545,39 @@
} else { } else {
self.list = resp.data self.list = resp.data
} }
// 数据库字段转化显示
if (self.options && self.options.changeValue) {
self.list = self.changeValue(self.list)
}
// 数据处理 // 数据处理
if (self.options && self.options.dataProcessing) { if (self.options && self.options.dataProcessing) {
self.list = self.options.dataProcessing(resp.data) console.log('NO-[object Promise]')
self.list = self.options.dataProcessing(resp.data, params, self.definedOperate)
}
if (self.options && self.options.promiseProcessing) {
self.options.promiseProcessing(resp.data, params, self.definedOperate).then(function(dataList) {
self.list = dataList
})
} }
self.total = parseInt(resp.headers.total) self.total = parseInt(resp.headers.total)
self.listLoading = false self.listLoading = false
}) })
}, },
tableCurrentChange(value) {
const self = this
if (self.options && self.options.tableCurrentChange) {
console.log('value', value)
self.options.tableCurrentChange(value)
}
},
// 数据库字段转化显示，例如(0=否,1=是) // 数据库字段转化显示，例如(0=否,1=是)
changeValue(data) { changeValue(data) {
const self = this const self = this
_.map(data, function(item, index) { _.map(data, function(item, index) {
_.forEach(item, function(listValue, listKey) { _.forEach(item, function(listValue, listKey) {
if (self.options.changeValue[listKey] && self.options.changeValue[listKey][listValue]) { if (self.options.changeValue[listKey] && self.options.changeValue[listKey][listValue]) {
item[listKey] = self.options.changeValue[listKey][listValue] item[listKey] = self.options.changeValue[listKey][listValue] === 'Hm-isChecked' ? true : self.options.changeValue[listKey][listValue] === 'Hm-noChecked' ? false : self.options.changeValue[listKey][listValue]
} }
}) })
}) })
...@@ -590,36 +599,57 @@ ...@@ -590,36 +599,57 @@
// 添加一条数据 // 添加一条数据
openDialog(type, data) { openDialog(type, data) {
const self = this const self = this
self.dialogFormVisible = true if (type === 'editData' && self.userDefined && self.userDefined.definedEdit) {
self.userDefined.definedEdit(true, data)
return false
}
if (type === 'newData' && self.userDefined && self.userDefined.definedNew) {
self.userDefined.definedNew(true)
return false
}
if (type === 'detail' && self.userDefined && self.userDefined.definedDetail) {
self.userDefined.definedDetail(true, data)
return false
}
self.tableId = ''
if (type === 'editData') { if (type === 'editData') {
self.dialogName = '编辑' self.dialogName = '编辑'
if (self.options.editData.showUserButtons) {
self.showUserButtons = self.options.editData.showUserButtons
}
self.tableId = data.id
self.showUserColumns = self.options.editData.showUserColumns self.showUserColumns = self.options.editData.showUserColumns
self.formSchema = self.options.editData.formSchema self.formSchema = self.options.editData.formSchema
self.layout = self.options.editData.layout self.layout = self.options.editData.layout
self.tableId = data.id self.formTips = self.options.editData.tips
self.formStyle = self.options.editData.formStyle
} }
if (type === 'newData') { if (type === 'newData') {
self.dialogName = '新建' self.dialogName = '新建'
if (self.options.newData.showUserButtons) {
self.showUserButtons = self.options.newData.showUserButtons
}
self.showUserColumns = self.options.newData.showUserColumns self.showUserColumns = self.options.newData.showUserColumns
self.formSchema = self.options.newData.formSchema self.formSchema = self.options.newData.formSchema
self.layout = self.options.newData.layout self.layout = self.options.newData.layout
self.formTips = self.options.newData.tips
self.formStyle = self.options.newData.formStyle
} }
if (type === 'detail') { if (type === 'detail') {
self.dialogName = '详情' self.dialogName = '详情'
self.dialogForm = []
_.each(self.options.showDetail.showColumns, function(columns) {
_.each(self.schema.columns, function(item, index) {
if (columns === item.codeCamel) {
self.dialogForm.push(item)
}
})
})
_.map(self.dialogForm, function(item, index) { if (self.options.detailData.showUserButtons) {
item.value = data[item.code] self.showUserButtons = self.options.detailData.showUserButtons
item.id = data.id
})
} }
self.showUserColumns = self.options.showDetail.showUserColumns
self.formSchema = self.options.showDetail.formSchema
self.layout = self.options.showDetail.layout
self.formTips = self.options.showDetail.tips
self.formStyle = self.options.showDetail.formStyle
self.tableId = data.id
}
self.dialogFormVisible = true
}, },
// 表单的提交 // 表单的提交
formConfirm() { formConfirm() {
...@@ -748,6 +778,12 @@ ...@@ -748,6 +778,12 @@
self.isShowDetail = self.options.showDetail.isShow self.isShowDetail = self.options.showDetail.isShow
self.operationWidth += 50 self.operationWidth += 50
} }
if (self.options.showSelection) { // 设置是否显示多选
self.isShowSelection = self.options.showSelection
}
if (self.options.showOverflowTooltip) { // 当内容过长被隐藏时显示 tooltip
self.showOverflowTooltip = self.options.showOverflowTooltip
}
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val this.multipleSelection = val
......
src/views/haomo/components/tables/index.vue
View file @ 81a03386
...@@ -24,7 +24,11 @@ ...@@ -24,7 +24,11 @@
}, },
data() { data() {
return { return {
showUserColumns: ['mobile', 'loginid', 'username', 'email', 'createTime'], showUserColumns: [
{ name: '手机号', codeCamel: 'mobile', isSort: true },
{ name: '登录ID', codeCamel: 'loginid', isSort: true },
'username', 'email', { name: '创建时间', codeCamel: 'createTime', isSort: true, width: '130px' }
],
userFilters: [ userFilters: [
{ placeholder: '过滤手机号', 'mobile': { 'like': '' }, isShow: true }, { placeholder: '过滤手机号', 'mobile': { 'like': '' }, isShow: true },
{ placeholder: '过滤用户名', 'username': { 'equalTo': '' }, isShow: true }, { placeholder: '过滤用户名', 'username': { 'equalTo': '' }, isShow: true },
...@@ -51,7 +55,7 @@ ...@@ -51,7 +55,7 @@
sortItem: 'create_time', sortItem: 'create_time',
sortOrder: 'desc', sortOrder: 'desc',
changeValue: { changeValue: {
username: { 1: '是', 0: '否' } username: { 1: 'Hm-isChecked', 0: 'Hm-noChecked' }
}, },
newData: { newData: {
isShow: true, isShow: true,
...@@ -60,24 +64,33 @@ ...@@ -60,24 +64,33 @@
{ name: '登录ID', codeCamel: 'loginid', widgetType: 1 }, { name: '登录ID', codeCamel: 'loginid', widgetType: 1 },
{ name: '类型', codeCamel: 'type', widgetType: 1 } { name: '类型', codeCamel: 'type', widgetType: 1 }
], ],
showUserButtons: [],
formSchema: schema['HmUser'], formSchema: schema['HmUser'],
layout: { left: 0, middle: 24, right: 0 } layout: { left: 0, middle: 24, right: 0 },
tips: {},
formStyle: {}
}, },
editData: { editData: {
isShow: true, isShow: true,
showUserColumns: [{ name: '姓名', codeCamel: 'username', widgetType: 1 }], showUserColumns: [{ name: '姓名', codeCamel: 'username', widgetType: 1 }],
showUserButtons: [],
formSchema: schema['HmUser'], formSchema: schema['HmUser'],
layout: { left: 0, middle: 24, right: 0 } layout: { left: 0, middle: 24, right: 0 },
tips: {},
formStyle: {}
},
showDetail: {
isShow: true
}, },
showRefresh: true, showRefresh: true,
showExport: true, showExport: true,
showDeleteButton: true, showDeleteButton: true,
buttonGroup: false, buttonGroup: false,
showDetail: { showSelection: false,
isShow: true, showOverflowTooltip: true,
showColumns: ['mobile', 'loginid', 'username', 'email'] tableCurrentChange(value) {}
} // dataProcessing(value, params, definedOperate) {}, // 处理返回后的数据,必须return 处理后的数据
// dataProcessing(value) {} // 处理返回后的数据,必须return 处理后的数据 // promiseProcessing(value, params, definedOperate) {} // 处理返回后的数据,必须return Promise对象
} }
this.userDefined = { this.userDefined = {
definedParams(params, operate) { definedParams(params, operate) {
...@@ -86,8 +99,19 @@ ...@@ -86,8 +99,19 @@
definedOperate: [ definedOperate: [
{ type: 'select', label: '', placeholder: '类型', options: [{ label: '姓名', code: 'username' }, { label: '登录ID', code: 'loginid' }], value: '' }, { type: 'select', label: '', placeholder: '类型', options: [{ label: '姓名', code: 'username' }, { label: '登录ID', code: 'loginid' }], value: '' },
{ type: 'input', label: '', placeholder: '邮箱', code: 'email', value: '' }, { type: 'input', label: '', placeholder: '邮箱', code: 'email', value: '' },
{ type: 'datetime', label: '', placeholder: '创建时间', code: 'createTime', value: '' }, { type: 'datetime', label: '', placeholder: '创建时间', code: 'createTime', value: '' }
{ type: 'button', label: '搜索', icon: 'el-icon-search', func: this.dropDown }] ],
definedOperation: [{ label: '测试', func: this.dropDown }],
definedEdit() {
},
definedNew() {
},
definedDetail() {
}
// pretreatment() {}
} }
}, },
methods: { methods: {
...@@ -95,8 +119,8 @@ ...@@ -95,8 +119,8 @@
this.dialogFormVisible = false this.dialogFormVisible = false
console.log('method1') console.log('method1')
}, },
dropDown() { dropDown(value) {
console.log('输出一些东西') console.log('输出一些东西', value)
} }
} }
} }
......
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