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