Skip to content

V
VueElementTemplate
Commit 43fcb0e0 authored by gaochao's avatar gaochao
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents 6c4d4262 501d8e99
Show whitespace changes
Inline Side-by-side
Showing with 360 additions and 131 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 43fcb0e0
...@@ -75,7 +75,7 @@ ...@@ -75,7 +75,7 @@
<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%'}" :style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'65%'}"
:options="editorOption" :options="editorOption"
@blur="onEditorBlur($event)" @blur="onEditorBlur($event)"
@focus="onEditorFocus($event)" @focus="onEditorFocus($event)"
...@@ -282,6 +282,27 @@ ...@@ -282,6 +282,27 @@
type: Object, type: Object,
required: false required: false
}, },
/**
* 要写入或修改的外表字段codeCamel值, 第一个元素为外键字段，格式为:
* [ ccSubjectId, description, correct, serialNumber]
*/
foreignFormFields: {
type: Array,
required: false
},
/**
* 用来将其他有间接关系的表(所谓间接关系, 一定是跟本表的某个字段名一致, 且指向同一张表),
* 两张表中非主键的两个字段相等 格式为:
* {
* 'relate_table1': ['column1', 'column2'], //’关联的另一张表名’:[‘一致的字段名’]
* 'relate_table1': ['column3', 'column4']
* }
* }
*/
relates: {
type: Array,
required: false
},
/** /**
* 请求成功或失败时的提示信息,格式为: * 请求成功或失败时的提示信息,格式为:
* tips: { * tips: {
...@@ -301,16 +322,16 @@ ...@@ -301,16 +322,16 @@
* 表单样式设置,格式为: * 表单样式设置,格式为:
* formStyle: { * formStyle: {
* formOptions: { labelWidth: '170px', labelPosition: 'right' }, * formOptions: { labelWidth: '170px', labelPosition: 'right' },
* datePicker: { style: { width: '60%' }}, * datePicker: { style: { width: '100px' }},
* input: { style: { width: '60%' }}, * input: { style: { width: '60%' }},
* select: { style: { width: '60%' }}, * select: { style: { width: '100px' }},
* textarea: { * textarea: {
* style: { width: '60%' }, * style: { width: '100px' },
* resize: 'none', * resize: 'none',
* autosize: { minRows: 3, maxRows: 5 }, * autosize: { minRows: 3, maxRows: 5 },
* rows: 3 * rows: 3
* }, * },
* quillEdito: { style: { width: '65%' }} * quillEditor: { style: { width: '65%' }}
* }, * },
*/ */
formStyle: { formStyle: {
...@@ -353,7 +374,14 @@ ...@@ -353,7 +374,14 @@
// } // }
// } // }
return { return {
Loading: true, foreignArray: [], // 批量创建或删除的多条外表数据
nativeFormModel: {}, // 有外表时 本表数据 从formModel中提取
foreignFormModel: {}, // 字段相同的多条外表数据 从formModel中提取
foreignForm: {}, // 单条外表数据 只包含键，值为空 从foreignFormFields中提取
partPropModel: {}, // 外表中从属于foreignFormModel的属性 从formModel中提取
indirectData: '', // 间接关联表数据
relateData: {}, // 中间表数据
Loading: true, // 加载等待
form: null, form: null,
formModel: {}, // 双向绑定的数据变量 formModel: {}, // 双向绑定的数据变量
showUserColumns: [], // 要显示的字段 showUserColumns: [], // 要显示的字段
...@@ -390,7 +418,8 @@ ...@@ -390,7 +418,8 @@
] ]
} }
}, },
pickerOptions: { // 日期选项配置 // 日期选项配置
pickerOptions: {
// disabledDate(time) { // disabledDate(time) {
// return time.getTime() > Date.now() // return time.getTime() > Date.now()
// }, // },
...@@ -417,22 +446,22 @@ ...@@ -417,22 +446,22 @@
}, },
fileList: [], // 上传文件列表 fileList: [], // 上传文件列表
fileCode: '', // 上传组件对应的数据库字段 fileCode: '', // 上传组件对应的数据库字段
isCancel: { cancelSubmit: false } isCancel: { cancelSubmit: false } // 主动取消提交（processData中）
} }
}, },
created() { created() {
// this.validate() // this.validate()
this.init() this.init()
this.getData()
this.getList() this.getList()
// setTimeout(function() {
// var url = _.keys(self.refers)[0] + 's' + '/create/batch'
// console.log(url)
// }, 3000)
// console.log(this.buttons) // console.log(this.buttons)
}, },
methods: { methods: {
handleRemove(file, fileList) { // 上传成功的回调函数
// console.log(self.formModel)
},
handlePreview(file) {
console.log(file)
},
uploadSuccess(response, file, fileList) { uploadSuccess(response, file, fileList) {
const self = this const self = this
console.log('上传成功') console.log('上传成功')
...@@ -487,7 +516,11 @@ ...@@ -487,7 +516,11 @@
onEditorReady(val) { onEditorReady(val) {
// console.log('editor ready!') // console.log('editor ready!')
}, },
handleRemove(file, fileList) {
// console.log(self.formModel)
},
// 判断是否一个对象的所有属性都为空 // 判断是否一个对象的所有属性都为空
// 可判断空对象或者属性值为null、空数组、空字符串，属性值为空对象无法判断
isEmpty(obj) { isEmpty(obj) {
for (var key in obj) { for (var key in obj) {
if (obj[key] && _.trim(obj[key])) { if (obj[key] && _.trim(obj[key])) {
...@@ -496,6 +529,14 @@ ...@@ -496,6 +529,14 @@
} }
return true return true
}, },
// 判断一个对象是否为空对象，没有属性
isEmptyObject(e) {
var t
for (t in e) {
return !1
}
return !0
},
validate() { validate() {
const self = this const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列 // this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
...@@ -516,23 +557,75 @@ ...@@ -516,23 +557,75 @@
} }
}) })
}, },
// 存在tableId，修改数据前先获取数据 // 获取间接关联表数据
getData() {
const self = this
if (!self.relates || !self.relates.length || !self.relates[0].indirectTable) return
// console.log(534, self.relates)
var params = {}
params.filters = self.relates[0].filters || { }
// console.log('url', typeof (self.relates[0].indirectTable))
request(self.relates[0].indirectTable, {
params: params
}).then(resp => {
// 设置中间表与间接关联表对应字段
if (resp.data && resp.data.length) {
// console.log(resp.data)
self.$set(self.relateData, self.relates[1].relateKeys[1], resp.data[0].id)
}
// console.log(548, self.relateData)
})
},
// 创建中间表数据
newRelateData() {
const self = this
if (self.tableId || !self.relates || !self.relates.length || !self.relates[1].relateTable) return
var data = self.relateData
if (self.isEmpty(data)) {
console.error('不能创建空数据')
return
}
request(self.relates[1].relateTable + '/new', {
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
data: data,
transformRequest:
function(obj) {
var str = []
for (var p in obj) {
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
}
return str.join('&')
}
}).then(resp => {
console.log('创建中间表成功')
console.log(resp.data)
})
},
// 批量创建的参数处理
transformRequest(arr) {
var str = []
_.each(arr, function(obj, i) {
for (var k in obj) {
str.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]))
}
})
console.log(str.join('&'))
return str.join('&')
},
// 存在tableId，编辑数据前先获取数据
getList() { getList() {
const self = this const self = this
if (!self.tableId) return if (!self.tableId) return
// 获取数据 // 获取数据
request(self.schema.modelUnderscorePlural + '/' + self.tableId).then(resp => { request(self.schema.modelUnderscorePlural + '/' + self.tableId).then(resp => {
// 数据库字段转化显示
/* if (self.options.changeValue) {
resp.data = self.changeValue(resp.data)
} */
self.Loading = false self.Loading = false
// console.log(self.formModel) // console.log(self.formModel)
var formArray = _.keys(self.formModel) // 提取formModel的属性到数组 var formArray = _.keys(self.formModel) // 提取formModel的属性到数组
// console.log(formArray) // console.log(formArray)
self.formModel = _.pick(resp.data, formArray) // 根据数组中的属性提取出data中对应的数据 self.formModel = _.pick(resp.data, formArray) // 根据数组中的属性提取出data中对应的数据
// 下拉框多选时将字符串转为数组 // 下拉框多选时将字符串转为数组 column.widgetType === 3 && !column.options
_.each(self.columns, function(item, index) { _.each(self.columns, function(item, index) {
if (item.widgetType === 2 && item.multiple === true) { if (item.widgetType === 2 && item.multiple === true) {
_.forEach(self.formModel, function(value, key) { _.forEach(self.formModel, function(value, key) {
...@@ -542,8 +635,18 @@ ...@@ -542,8 +635,18 @@
} }
}) })
} }
// 单个复选框时，将请求回来的1和0转为'1'和'0'
if (item.widgetType === 3 && !item.options) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
// console.log(11111, self.formModel[key])
self.formModel[key] = self.formModel[key] + ''
}
})
}
}) })
// console.log(2222, self.formModel) // console.log('getList', self.formModel)
// console.log(typeof self.formModel.isUsed)
}) })
}, },
// 初始化 // 初始化
...@@ -572,7 +675,7 @@ ...@@ -572,7 +675,7 @@
self.$set(self.showUserColumns, index, tmp) // 顺序 self.$set(self.showUserColumns, index, tmp) // 顺序
} }
}) })
console.log(self.showUserColumns) console.log('self.showUserColumns', self.showUserColumns)
// 提取v-model绑定的变量 // 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) { _.each(self.showUserColumns, function(item) {
if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) { if (item.widgetType === 8 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
...@@ -581,6 +684,7 @@ ...@@ -581,6 +684,7 @@
item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '') item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '')
} }
}) })
console.log('self.formModel', self.formModel)
if (!request.defaults.baseURL) { if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api' request.defaults.baseURL = '/org/api'
} }
...@@ -675,19 +779,52 @@ ...@@ -675,19 +779,52 @@
}) })
} }
}) })
} else { // 不存在tableId 则创建一条数据 } else {
// 不存在tableId 则创建一条数据
console.log(self.formModel) console.log(self.formModel)
// if (self.isEmpty(self.formModel)) { if (self.refers && self.foreignForm) {
// self.$message({ // 遍历foreignFormFields 生成外表数据对象
// message: '不能都为空', _.each(self.foreignFormFields, function(val, key) {
// type: 'error' self.$set(self.foreignForm, val, '')
// }) })
// return _.each(self.showUserColumns, function(item, index) {
// } // 提取本表数据以提交
if (!item.isForeign) {
for (const key in self.formModel) {
if (item.codeCamel === key) {
self.nativeFormModel[key] = self.formModel[key]
break
}
}
}
// 提取字段相同的多条外表数据 到foreignFormModel
if (item.isForeign && !item.partProp) {
for (const key in self.formModel) {
if (item.codeCamel === key) {
self.foreignFormModel[key] = self.formModel[key]
break
}
}
}
// 提取外表中从属于foreignFormModel的属性到partPropModel
if (item.partProp) {
for (const key in self.formModel) {
if (item.codeCamel === key) {
self.partPropModel[key] = self.formModel[key]
break
}
}
}
})
console.log('本表', self.nativeFormModel)
console.log('外表', self.foreignFormModel)
console.log('部分属性', self.partPropModel)
}
// 发送新建请求
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' },
data: self.formModel, data: self.refers ? self.nativeFormModel : self.formModel,
transformRequest: transformRequest:
function(obj) { function(obj) {
var str = [] var str = []
...@@ -698,13 +835,80 @@ ...@@ -698,13 +835,80 @@
} }
}).then(resp => { }).then(resp => {
console.log('创建成功') console.log('创建成功')
// 设置中间表与本表(主表)对应字段
console.log(resp.data)
// if (!self.relates || !self.relates.length) return
// 创建中间表数据
if (resp.data && self.relates && self.relates.length && self.relates[1].relateTable) {
self.$set(self.relateData, self.relates[1].relateKeys[0], resp.data.id)
self.newRelateData()
// console.log(self.relateData)
}
// 将返回的id写入foreignForm
if (!self.isEmptyObject(self.foreignForm)) {
self.$set(self.foreignForm, self.foreignFormFields[0], resp.data.id)
}
// 从foreignFormModel和单条外表foreignForm中提取多条数据到foreignArray
if (!self.isEmptyObject(self.foreignFormModel)) {
_.each(self.foreignFormModel, function(val, key) {
var temp = _.cloneDeep(self.foreignForm)
var idx = key.slice(0, -1)
temp[idx] = val
// temp = Object.assign(temp, self.partProp)
self.foreignArray.push(temp)
})
}
// 提取serialNumber: 'A'之类，属于外表写入/修改的数据
if (!self.isEmptyObject(self.foreignForm)) {
_.each(self.showUserColumns, function(item, index) {
if (item.isForeign && !item.partProp) {
_.each(item, function(val, key) {
if (_.has(self.foreignForm, key)) {
for (let i = 0, len = self.foreignArray.length; i < len; i++) {
if (!self.foreignArray[i][key]) {
self.foreignArray[i][key] = val
break
}
}
}
})
}
})
}
// 把外表公共属性partProp的值写入foreignArray的每条数据对象
if (self.foreignArray.length > 0) {
_.each(self.foreignArray, function(item, key) {
var tem = _.cloneDeep(self.partPropModel)
if (_.includes(item, _.values(self.partPropModel)[0])) {
tem[_.keys(self.partPropModel)[0]] = 1 // 可能出问题
} else {
tem[_.keys(self.partPropModel)[0]] = 0 // 可能出问题
}
item = Object.assign(item, tem)
})
console.log('外表数据', self.foreignArray)
// 批量创建信息
const url = _.keys(self.refers)[0] + 's' + '/create/batch'
// const string = self.transformRequest(self.foreignArray)
const string = JSON.stringify(self.foreignArray)
request.post(url + '?params=' + string, {
headers: { 'Content-Type': 'application/json;charset=UTF-8' }
}).then(resp => {
console.log('批量创建成功')
console.log(resp.data)
}).catch(error => {
console.log('批量创建失败', error)
})
}
// 提示信息
if (self.tips && !self.tips.hidde) { if (self.tips && !self.tips.hidde) {
self.$message({ self.$message({
message: self.tips.newSuccess.text, message: self.tips.newSuccess.text,
type: 'success' type: 'success'
}) })
} }
// self.formModel = {} // 新建完成清空数据
// self.resetForm() // self.resetForm()
if (typeof (callback) === 'function') { if (typeof (callback) === 'function') {
callback(resp.data) callback(resp.data)
...@@ -753,9 +957,11 @@ ...@@ -753,9 +957,11 @@
callback() callback()
} }
}, },
// 取消的回调函数
cancel(callback) { cancel(callback) {
const self = this
if (typeof (callback) === 'function') { if (typeof (callback) === 'function') {
callback() callback(self.formModel)
} }
} }
} }
......
src/views/haomo/components/forms/index.vue
View file @ 43fcb0e0
<template> <template>
<!--:refers="judgeRefers"-->
<div> <div>
<hm-complex-form :schema="schema['HmUser']" <hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns" :columns="showUserColumns"
:buttons="showUserButtons" :buttons="showUserButtons"
:layout="layout" :layout="layout"
:tips="tips" :tips="tips"
:refers="userRefers"> :refers="userRefers"
:foreignFormFields="foreignFormFields"
:relates="userRelates">
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -72,38 +73,51 @@ ...@@ -72,38 +73,51 @@
// 8文件 // 8文件
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址 { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
], ],
// CcSubject示例
showUserColumns2: [ showUserColumns2: [
// 1普通input { name: '题目', codeCamel: 'subject' },
{ name: '用户名称', codeCamel: 'username', widgetType: 1 }, { name: '题目类型', codeCamel: 'subjectType', default: 3 },
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 1 }, { name: 'A选项', codeCamel: 'description0', code: 'description', serialNumber: 'A', widgetType: 1, isForeign: true },
{ name: '部门名称', codeCamel: 'departmentName', widgetType: 1 }, { name: 'B选项', codeCamel: 'description1', code: 'description', serialNumber: 'B', widgetType: 1, isForeign: true },
{ name: '密码', codeCamel: 'password', widgetType: 1 }, { name: '正确选项', codeCamel: 'correct', widgetType: 1, isForeign: true, partProp: true },
{ name: '电话', codeCamel: 'mobile', widgetType: 1 }, { name: '试题详解', codeCamel: 'commentary', widgetType: 1 }
{ name: '电子邮件', codeCamel: 'email', widgetType: 1 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 1 },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 1 }
], ],
userIncludes: { // schema['CcMenuResource'] + userRelates + showUserColumns3 理论学习示例
'hm_user': { showUserColumns3: [
includes: ['user_id'] { name: '标题', codeCamel: 'title', widgetType: 1 },
} { name: '封面图片', codeCamel: 'thumbnail', widgetType: 8 },
}, { name: '视频', codeCamel: 'videoName', widgetType: 8 },
// 主查外 { name: '简介', codeCamel: 'lntroduction', widgetType: 1 },
{ name: '内容', codeCamel: 'content', widgetType: 4 },
{ name: '发布人', codeCamel: 'publisher', widgetType: 1 }
],
// schema['CcSubject']+foreignFormFields+userRefers+showUserColumns2 判断题示例
// 第一个值为外键字段(codeCamel)
foreignFormFields: ['ccSubjectId', 'description', 'correct', 'serialNumber'],
// 主查外表 外键字段
userRefers: { userRefers: {
'cc_shift': { 'cc_option': {
includes: ['applicant_id'] includes: ['ccSubjectId']
} }
}, },
// userIncludes: {
// 'hm_user': {
// includes: ['user_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: '生成', method: this.method4 },
// { text: '预览', method: this.method5 },
// { text: '预览2', method: this.method5 },
{ text: '取消', type: 3, method: this.method3 } { text: '取消', type: 3, method: this.method3 }
], ],
// showUserButtons: [] // showUserButtons: []
// 布局方式 // 布局方式
layout: { left: 4, middle: 16, right: 4 }, layout: { left: 2, middle: 20, right: 2 },
// 自定义提示消息 // 自定义提示消息
tips: { tips: {
hidde: false, // 是否显示提示，默认false显示 hidde: false, // 是否显示提示，默认false显示
...@@ -128,16 +142,22 @@ ...@@ -128,16 +142,22 @@
autosize: { minRows: 3, maxRows: 5 }, autosize: { minRows: 3, maxRows: 5 },
rows: 3 rows: 3
}, },
quillEdito: { style: { width: '65%' }} quillEditor: { style: { width: '65%' }}
}, },
// 'cc_option': {
// includes: ['ccSubjectId'] // 关联表 本表即页面显示的要创建的表'CcMenuResource' 中间表'cc_menu_resource_associations'
// } // 间接关联表'cc_secondary_menu_dictionaries'
judgeRefers: { // 主查外 userRelates: [
'cc_hm_user': { // 间接关联表
includes: ['applicantId'] { indirectTable: 'cc_secondary_menu_dictionaries', // 下划线复数
} // 过滤查询的条件
filters: { 'cc_secondary_menu_dictionary': { 'name': { equalTo: '理论学习' }}}
},
// 中间表
{ relateTable: 'cc_menu_resource_associations',
relateKeys: ['resourceId', 'menuId'] // 中间表与主表(本表)字段 与间接关联表对应字段
} }
]
} }
}, },
computed: { computed: {
...@@ -169,7 +189,12 @@ ...@@ -169,7 +189,12 @@
method3() { method3() {
console.log('method3') console.log('method3')
}, },
method4() { method4(formModel) {
console.log(formModel)
console.log('method4')
},
method5(formModel) {
console.log(formModel)
console.log('method4') console.log('method4')
} }
} }
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 43fcb0e0
...@@ -95,6 +95,7 @@ ...@@ -95,6 +95,7 @@
<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-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 class="filter-item" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
</span> </span>
<hm-full-calendar style="display: inline;margin-left: 10px;" :schema="HmFullCalendar.calendarSchema" :demoEvents="HmFullCalendar.demoEvents" v-if="HmFullCalendar.calendarSchema"></hm-full-calendar>
</el-form> </el-form>
</div> </div>
...@@ -136,14 +137,13 @@ ...@@ -136,14 +137,13 @@
<!-- @TODO 补充详情弹窗 --> <!-- @TODO 补充详情弹窗 -->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="dialogWidth" v-if="dialogFormVisible"> <el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="dialogWidth" v-if="dialogFormVisible">
<hm-complex-form :schema="formSchema" <hm-complex-form :schema="HmComplexForm.formSchema"
:columns="showUserColumns" :columns="HmComplexForm.showUserColumns"
:buttons="showUserButtons" :buttons="HmComplexForm.showUserButtons"
:layout="layout" :layout="HmComplexForm.layout"
:tableId="tableId" :tableId="HmComplexForm.tableId"
:tips="formTips" :tips="HmComplexForm.formTips"
:formStyle="formStyle" :formStyle="HmComplexForm.formStyle">
ref="selectfood">
</hm-complex-form> </hm-complex-form>
</el-dialog> </el-dialog>
...@@ -160,6 +160,7 @@ ...@@ -160,6 +160,7 @@
import * as excel from '@/vendor/Export2Excel' import * as excel from '@/vendor/Export2Excel'
import { Button, Table, TableColumn, Pagination, Loading } from 'element-ui' import { Button, Table, TableColumn, Pagination, Loading } from 'element-ui'
import HmComplexForm from '../forms/HmComplexForm.vue' import HmComplexForm from '../forms/HmComplexForm.vue'
import HmFullCalendar from '../calendar/HmFullCalendar.vue'
/** /**
* 毫末科技的表格组件. * 毫末科技的表格组件.
...@@ -178,7 +179,8 @@ ...@@ -178,7 +179,8 @@
'el-table': Table, 'el-table': Table,
'el-table-column': TableColumn, 'el-table-column': TableColumn,
'el-pagination': Pagination, 'el-pagination': Pagination,
'hm-complex-form': HmComplexForm 'hm-complex-form': HmComplexForm,
'hm-full-calendar': HmFullCalendar
}, },
// 混入公共对象 // 混入公共对象
mixins: [], mixins: [],
...@@ -361,14 +363,17 @@ ...@@ -361,14 +363,17 @@
isShowEditDataButton: false, // 是否显示编辑 isShowEditDataButton: false, // 是否显示编辑
isShowDeleteButton: false, // 是否显示删除 isShowDeleteButton: false, // 是否显示删除
isShowExport: false, // 是否显示导出按钮 isShowExport: false, // 是否显示导出按钮
HmComplexForm: { // 设置form组件
formSchema: {}, // form弹窗的Schema定义 formSchema: {}, // form弹窗的Schema定义
showUserColumns: [], // form弹窗的Columns定义 showUserColumns: [], // form弹窗的Columns定义
showUserButtons: [], // from弹窗显示按钮, showUserButtons: [], // from弹窗显示按钮,
layout: { left: 0, middle: 24, right: 0 }, // form弹窗的布局方式 layout: { left: 0, middle: 24, right: 0 }, // form弹窗的布局方式
tableId: '', tableId: '',
formTips: '', formTips: '',
formStyle: '', formStyle: ''
showOverflowTooltip: false, },
showOverflowTooltip: false, // 设置当内容过长被隐藏时显示 tooltip
HmFullCalendar: {}, //
isShowRefresh: false, isShowRefresh: false,
buttonGroup: false, buttonGroup: false,
...@@ -611,29 +616,29 @@ ...@@ -611,29 +616,29 @@
self.userDefined.definedDetail(true, data) self.userDefined.definedDetail(true, data)
return false return false
} }
self.tableId = '' self.HmComplexForm.tableId = ''
if (type === 'editData') { if (type === 'editData') {
self.dialogName = '编辑' self.dialogName = '编辑'
if (self.options.editData.showUserButtons) { if (self.options.editData.showUserButtons) {
self.showUserButtons = self.options.editData.showUserButtons self.showUserButtons = self.options.editData.showUserButtons
} }
self.tableId = data.id self.HmComplexForm.tableId = data.id
self.showUserColumns = self.options.editData.showUserColumns self.HmComplexForm.showUserColumns = self.options.editData.showUserColumns
self.formSchema = self.options.editData.formSchema self.HmComplexForm.formSchema = self.options.editData.formSchema
self.layout = self.options.editData.layout self.HmComplexForm.layout = self.options.editData.layout
self.formTips = self.options.editData.tips self.HmComplexForm.formTips = self.options.editData.tips
self.formStyle = self.options.editData.formStyle self.HmComplexForm.formStyle = self.options.editData.formStyle
} }
if (type === 'newData') { if (type === 'newData') {
self.dialogName = '新建' self.dialogName = '新建'
if (self.options.newData.showUserButtons) { if (self.options.newData.showUserButtons) {
self.showUserButtons = self.options.newData.showUserButtons self.showUserButtons = self.options.newData.showUserButtons
} }
self.showUserColumns = self.options.newData.showUserColumns self.HmComplexForm.showUserColumns = self.options.newData.showUserColumns
self.formSchema = self.options.newData.formSchema self.HmComplexForm.formSchema = self.options.newData.formSchema
self.layout = self.options.newData.layout self.HmComplexForm.layout = self.options.newData.layout
self.formTips = self.options.newData.tips self.HmComplexForm.formTips = self.options.newData.tips
self.formStyle = self.options.newData.formStyle self.HmComplexForm.formStyle = self.options.newData.formStyle
} }
if (type === 'detail') { if (type === 'detail') {
self.dialogName = '详情' self.dialogName = '详情'
...@@ -641,12 +646,12 @@ ...@@ -641,12 +646,12 @@
if (self.options.detailData.showUserButtons) { if (self.options.detailData.showUserButtons) {
self.showUserButtons = self.options.detailData.showUserButtons self.showUserButtons = self.options.detailData.showUserButtons
} }
self.showUserColumns = self.options.showDetail.showUserColumns self.HmComplexForm.showUserColumns = self.options.showDetail.showUserColumns
self.formSchema = self.options.showDetail.formSchema self.HmComplexForm.formSchema = self.options.showDetail.formSchema
self.layout = self.options.showDetail.layout self.HmComplexForm.layout = self.options.showDetail.layout
self.formTips = self.options.showDetail.tips self.HmComplexForm.formTips = self.options.showDetail.tips
self.formStyle = self.options.showDetail.formStyle self.HmComplexForm.formStyle = self.options.showDetail.formStyle
self.tableId = data.id self.HmComplexForm.tableId = data.id
} }
self.dialogFormVisible = true self.dialogFormVisible = true
...@@ -676,29 +681,9 @@ ...@@ -676,29 +681,9 @@
// 删除一条数据 // 删除一条数据
deleteData(data) { deleteData(data) {
const self = this const self = this
self.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { const params = { ids: [data.id] }
confirmButtonText: '确定', params.ids = JSON.stringify(params.ids)
cancelButtonText: '取消', self.deleteDataRequest(params)
type: 'warning'
}).then(() => {
request(self.schema.modelUnderscorePlural + '/' + data.id + '/delete', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }
}).then(data => {
if (data.data.message === 'delete success') {
self.$message({
message: data.data.message,
type: 'success'
})
self.getList()
}
})
}).catch(() => {
self.$message({
message: '已取消删除',
type: 'success'
})
})
}, },
refreshList() { refreshList() {
this.listQuery = { this.listQuery = {
...@@ -715,15 +700,17 @@ ...@@ -715,15 +700,17 @@
// 批量删除 // 批量删除
BatchRemove() { BatchRemove() {
const self = this const self = this
const datas = { const datas = { ids: [] }
ids: []
}
if (!self.multipleSelection) return false if (!self.multipleSelection) return false
_.each(self.multipleSelection, function(item, index) { _.each(self.multipleSelection, function(item, index) {
datas.ids.push(item.id) datas.ids.push(item.id)
}) })
datas.ids = JSON.stringify(datas.ids) datas.ids = JSON.stringify(datas.ids)
self.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { self.deleteDataRequest(datas)
},
deleteDataRequest(data) {
const self = this
self.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
confirmButtonText: '确定', confirmButtonText: '确定',
cancelButtonText: '取消', cancelButtonText: '取消',
type: 'warning' type: 'warning'
...@@ -731,12 +718,12 @@ ...@@ -731,12 +718,12 @@
request(self.schema.modelUnderscorePlural + '/delete/batch', { request(self.schema.modelUnderscorePlural + '/delete/batch', {
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' },
data: datas, data: data,
transformRequest: param transformRequest: param
}).then(data => { }).then(resp => {
if (data.data.message === 'delete success') { if (resp.data.message === 'delete success') {
self.$message({ self.$message({
message: data.data.message, message: resp.data.message,
type: 'success' type: 'success'
}) })
self.getList() self.getList()
...@@ -784,6 +771,9 @@ ...@@ -784,6 +771,9 @@
if (self.options.showOverflowTooltip) { // 当内容过长被隐藏时显示 tooltip if (self.options.showOverflowTooltip) { // 当内容过长被隐藏时显示 tooltip
self.showOverflowTooltip = self.options.showOverflowTooltip self.showOverflowTooltip = self.options.showOverflowTooltip
} }
if (self.options.HmFullCalendar) { // 当内容过长被隐藏时显示 tooltip
self.HmFullCalendar = self.options.HmFullCalendar
}
}, },
handleSelectionChange(val) { handleSelectionChange(val) {
this.multipleSelection = val this.multipleSelection = val
......
src/views/haomo/components/tables/index.vue
View file @ 43fcb0e0
...@@ -82,11 +82,19 @@ ...@@ -82,11 +82,19 @@
showDetail: { showDetail: {
isShow: true isShow: true
}, },
HmFullCalendar: {
calendarSchema: schema['HmUser'],
demoEvents: {
title: 'username',
start: 'createTime',
end: 'lastUpdateTime'
}
},
showRefresh: true, showRefresh: true,
showExport: true, showExport: true,
showDeleteButton: true, showDeleteButton: true,
buttonGroup: false, buttonGroup: false,
showSelection: false, showSelection: true,
showOverflowTooltip: true, showOverflowTooltip: true,
tableCurrentChange(value) {} tableCurrentChange(value) {}
// dataProcessing(value, params, definedOperate) {}, // 处理返回后的数据,必须return 处理后的数据 // dataProcessing(value, params, definedOperate) {}, // 处理返回后的数据,必须return 处理后的数据
......
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