Skip to content

V
VueElementTemplate
Commit cc10fa0c authored by 王康's avatar 王康
Browse files
Options

f

parent 27385195
Hide whitespace changes
Inline Side-by-side
Showing with 167 additions and 61 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ cc10fa0c
......@@ -13,7 +13,7 @@
element-loading-text="加载中"
:label-width="formStyle && formStyle.formOptions && formStyle.formOptions.labelWidth || '163px'"
:model="formModel"
:rules="rules"
:rules="myRules"
:style=" formStyle && formStyle.formOptions && formStyle.formOptions.style || {width:'100%'}">
<el-form-item v-for="column in showUserColumns"
v-show="!column.hide"
......@@ -85,7 +85,7 @@
:ref="column.ref || ''" :disabled="column.disabled"
v-model="formModel[column.codeCamel]"
:style="formStyle && formStyle.quillEditor && formStyle.quillEditor.style || {width:'70%'}"
:options="editorOption"
:options="column.options || editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@change="column.change && column.change($event)"
......@@ -94,6 +94,7 @@
<!-- 6 单选框 -->
<el-radio-group v-else-if="column.widgetType === 7"
:disabled="column.disabled"
:readonly="column.readonly"
@change="column.change && column.change($event, formModel)"
v-model="formModel[column.codeCamel]">
<el-radio v-for="option in column.options"
......@@ -110,21 +111,21 @@
:file-list="fileList"
ref="upload"
:on-success="uploadSuccess">
<el-button slot="trigger" size="small" type="primary"
<el-button slot="trigger" size="small" type="primary" @click="currentFile = column.codeCamel"
:disabled="column.disabled">选取文件</el-button>
</el-upload>
<!-- 8树形图 -->
<!--:default-expanded-keys="[2, 3]"-->
<!--:default-checked-keys="[5]"-->
<div @click="currentTree = column.codeCamel" v-else-if="column.widgetType === 9"
>
<div @mouseenter="currentTree = column.codeCamel" v-else-if="column.widgetType === 9">
<el-tree :data="column.options"
@click="currentTree = column.codeCamel"
ref="tree"
show-checkbox
node-key="id"
@node-click="handleNodeChange"
@check-change="handleCheckChange"
:default-expanded-keys='column.expanded'
:default-checked-keys='column.checked'
:props="defaultProps">
</el-tree>
</div>
......@@ -433,6 +434,25 @@
formStyle: {
type: Object,
required: false
},
/**
* 自定义验证规则的第二种方式（第一种是在column数组的对象中传rule）
* 格式为:
* userRules: {
* pass: [
* { validator: validatePass, trigger: 'blur' }
* ],
* checkPass: [
* { validator: validatePass2, trigger: 'blur' }
* ],
* age: [
* { validator: checkAge, trigger: 'blur' }
* ]
* }
*/
rules: {
type: Object,
required: false
}
},
data() {
......@@ -484,7 +504,7 @@
form: null,
formModel: {}, // 双向绑定的数据变量
showUserColumns: [], // 要显示的字段
rules: {
myRules: {
// username: [
// { validator: validateUsername, trigger: 'change' }
// { required: true, message: '请输入用户名', trigger: 'blur' },
......@@ -617,8 +637,8 @@
console.log('上传成功')
console.log(response)
// console.log(self.currentFile)
// console.log(file)
// console.log('fileList', fileList)
console.log(file)
console.log('fileList', fileList)
console.log('formModel', self.formModel)
for (var i = 0, len = self.showUserColumns.length; i < len; i++) {
// && !self.showUserColumns[i].edited
......@@ -630,7 +650,11 @@
// 张家口
// self.formModel[key] = response.visitName + response.fileName
// 通用
self.formModel[key] = response.visitName + '/' + response.saveName
if (response.visitName && response.saveName) {
self.formModel[key] = response.visitName + '' + response.saveName
} else if (response.message) {
self.formModel[key] = file.name + '_' + response.message
}
break
}
}
......@@ -641,14 +665,17 @@
self.funObject.uploadFun(response, self.formModel)
}
},
mouseenter() {
console.log(222)
},
// 树形选择器
handleCheckChange(data, checked, indeterminate) {
// console.log(data, checked, indeterminate)
const self = this
console.log(1)
console.log('handleCheckChange函数')
console.log(this.$refs.tree[0].getCheckedNodes(true))
console.log(this.$refs.tree[0].getCheckedKeys(true))
console.log(self.currentTree)
console.log('currentTree:', self.currentTree)
for (var i = 0, len = self.showUserColumns.length; i < len; i++) {
// && !self.showUserColumns[i].edited
if (self.showUserColumns[i].widgetType === 9) {
......@@ -671,6 +698,9 @@
handleNodeChange(data, node, com) {
console.log(com)
},
treeCheck(data1, data2) {
console.log(this.currentTree)
},
// inputChange(val) {
// // console.log(event)
// // console.log(val)
......@@ -819,6 +849,8 @@
const filters = {}
const params = {}
filters[self.schema.modelUnderscore] = { 'id': { 'equalTo': self.tableId }}
// self.$set(filters, self.schema.modelUnderscore, { 'id': { 'equalTo': self.tableId }})
params.filters = filters
// 主查外
if (self.refers && !self.isEmptyObject(self.refers)) {
params.refers = self.refers
......@@ -827,8 +859,7 @@
if (self.includes && !self.isEmptyObject(self.includes)) {
params.includes = self.includes
}
params.filters = filters
// console.log('params', params)
console.log('params', params)
// 获取数据 + '/' + self.tableId
request(self.schema.modelUnderscorePlural, {
params: params
......@@ -836,8 +867,15 @@
self.Loading = false
// console.log(self.formModel)
// console.log('获取成功', resp.data)
// 如果是外查主
if (resp.data.length > 0 && resp.data[0].superior !== undefined && !self.isEmptyObject(resp.data[0].superior) && resp.data[0].includes !== undefined && !self.isEmptyObject(resp.data[0].includes)) {
// 如果是既有外查主又有主查外
if (resp.data.length > 0 && resp.data[0].superior !== undefined && !self.isEmptyObject(resp.data[0].superior) && resp.data[0].refers !== undefined && !self.isEmptyObject(resp.data[0].refers) && resp.data[0].includes !== undefined && !self.isEmptyObject(resp.data[0].includes)) {
console.log('主外联查', resp.data)
// 渲染之前执行用户的beforeRender方法对数据进行处理
if (self.funObject && !self.isEmptyObject(self.funObject)) {
self.formModel = self.funObject.beforeRender(resp.data, self.formModel)
}
// 如果是外查主
} else if (resp.data.length > 0 && resp.data[0].superior !== undefined && !self.isEmptyObject(resp.data[0].superior) && resp.data[0].includes !== undefined && !self.isEmptyObject(resp.data[0].includes)) {
console.log('外查主', resp.data)
self.foreighId = resp.data[0].includes[_.keys(self.includes)[0]].id
// 渲染之前执行用户的beforeRender方法对数据进行处理
......@@ -853,7 +891,7 @@
}
// 如果只是单表
} else if (resp.data.length > 0) {
// console.log('获取成功', resp.data)
console.log('单表查询', resp.data)
var formArray = _.keys(self.formModel) // 提取formModel的属性到数组
if (resp.data[0].superior && !self.isEmptyObject(resp.data[0].superior)) {
self.formModel = _.pick(resp.data[0].superior, formArray) // 根据数组中的属性提取出data中对应的数据
......@@ -861,11 +899,12 @@
self.formModel = _.pick(resp.data[0], formArray)
}
// 渲染之前执行用户的beforeRender方法对数据进行处理
if (self.funObject && !self.isEmptyObject(self.funObject)) {
if (self.funObject && typeof (self.funObject.beforeRender) === 'function') {
self.formModel = self.funObject.beforeRender(resp.data, self.formModel)
}
// console.log('获取到数据', self.formModel)
// 处理返回来的数据
console.log('getList处理多选前', self.formModel)
_.each(self.columns, function(item, index) {
// 下拉框多选时将字符串转为数组 column.widgetType === 3 && !column.options
if (item.widgetType === 2 && item.multiple === true) {
......@@ -992,15 +1031,26 @@
// 存在tableId 则修改信息
if (self.tableId) {
// 外查主 从formModel中分离本表、外表数据
_.each(self.formModel, function(val, idx) {
if (idx.slice(-1) === 'C') {
idx = idx.slice(0, idx.length - 1)
self.nativeFormModel[idx] = val
} else {
idx = idx.slice(0, idx.length - 1)
self.foreignFormModel[idx] = val
}
})
if (self.includes && !self.isEmptyObject(self.includes)) {
_.each(self.formModel, function(val, idx) {
// 后缀带O是非本表 连带查出来的表 并非就是指外表
// if (idx.slice(-1) === 'O') {
// idx = idx.slice(0, idx.length - 1)
// self.foreignFormModel[idx] = val
// } else {
// // 不带后缀是本表
// idx = idx.slice(0, idx.length - 1)
// self.nativeFormModel[idx] = val
// }
if (idx.slice(-1) === 'C') {
idx = idx.slice(0, idx.length - 1)
self.nativeFormModel[idx] = val
} else {
idx = idx.slice(0, idx.length - 1)
self.foreignFormModel[idx] = val
}
})
}
console.log(879, self.nativeFormModel)
console.log(880, self.foreignFormModel)
// 修改本表数据
......@@ -1032,7 +1082,7 @@
// 修改成功执行用户回调
if (typeof (callback) === 'function') {
callback(resp.data)
callback(resp.data, self.formModel)
}
}).catch(err => {
console.log(err)
......@@ -1217,7 +1267,7 @@
}
// 新建成功执行用户回调
if (typeof (callback) === 'function') {
callback(resp.data)
callback(resp.data, self.formModel)
}
// 清空上传文件和树形菜单的codeComel
self.currentFile = ''
......@@ -1232,6 +1282,7 @@
}
})
}
self.close()
} else {
console.log('提交失败!!')
self.$message({
......@@ -1265,6 +1316,7 @@
if (typeof (callback) === 'function') {
callback()
}
this.close()
},
// 取消的回调函数
cancel(callback) {
......@@ -1272,6 +1324,10 @@
if (typeof (callback) === 'function') {
callback(self.formModel)
}
self.close()
},
close() {
this.$emit('formVisible')
}
}
......@@ -1294,6 +1350,7 @@
border-color: rgba(153, 153, 153, 0.6);
}
.hm-form .el-tree{
border-radius: 4px;
border: 1px solid red;
height: 150px;
overflow-y: auto;
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ cc10fa0c
......@@ -96,11 +96,11 @@
<el-button class="filter-item" :style="titleButtonStyle" type="primary" v-waves icon="el-icon-close" v-if="multipleSelection.length" @click="BatchRemove">批量删除</el-button>
</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>
</div>
<!-- end 过滤 -->
<!-- 表格 -->
<el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row :cell-style="cellStyle" ref="multipleTable"
:style="tableStyle" @selection-change="handleSelectionChange" @sort-change="sortChange" @current-change="tableCurrentChange">
......@@ -147,13 +147,16 @@
:formStyle="HmComplexForm.formStyle"
:funObject="HmComplexForm.funObject"
:refers="HmComplexForm.formRefers"
:includes="HmComplexForm.formIncludes"
:foreignFormFields="HmComplexForm.foreignFormFields"
:relates="HmComplexForm.formRelates" >
:relates="HmComplexForm.formRelates"
:rules="HmComplexForm.rules"
v-on:formVisible='dialogClose'>
</hm-complex-form>
</el-dialog>
<!-- end 弹窗 -->
</div>
</template>
......@@ -166,7 +169,7 @@
import { Button, Table, TableColumn, Pagination, Loading } from 'element-ui'
import HmComplexForm from '../forms/HmComplexForm.vue'
import HmFullCalendar from '../calendar/HmFullCalendar.vue'
/**
* 毫末科技的表格组件.
*
......@@ -272,7 +275,7 @@
console.warn(`传入的columns不符合要求，必须是数组`)
return false
}
return true
}
},
......@@ -394,17 +397,21 @@
formStyle: {},
funObject: {},
formRefers: {},
formIncludes: {},
foreignFormFields: [],
formRelates: []
formRelates: [],
rules: {
}
},
showOverflowTooltip: false, // 设置当内容过长被隐藏时显示 tooltip
HmFullCalendar: {}, //
isShowRefresh: false,
buttonGroup: false,
operationWidth: 0, // 操作栏的宽度
operationWidth: 20, // 操作栏的宽度
isShowDetail: false, // 是否显示详情按钮
definedOperate: [], // 自定义操作
definedOperation: []
}
......@@ -416,18 +423,33 @@
if (!ret) {
return ret
}
if (!ret[self.schema['modelUnderscore']]) {
return ret
}
_.map(ret, function(item) {
_.forEach(item, function(value, key) {
if (value.lessThanOrEqualTo !== undefined && value.greaterThanOrEqualTo !== undefined &&
(value.greaterThanOrEqualTo === '' || value.greaterThanOrEqualTo === null) && (value.lessThanOrEqualTo === '' || value.lessThanOrEqualTo === null)) {
delete item[key]
}
if (value.greaterThanOrEqualTo !== undefined && (value.greaterThanOrEqualTo === '' || value.greaterThanOrEqualTo === null) && value.lessThanOrEqualTo) {
delete item[key].greaterThanOrEqualTo
}
if (value.lessThanOrEqualTo !== undefined && (value.lessThanOrEqualTo === '' || value.lessThanOrEqualTo === null) && value.greaterThanOrEqualTo) {
delete item[key].lessThanOrEqualTo
}
})
})
_.each(Object.keys(ret[self.schema['modelUnderscore']]), function(column) {
const operValue = ret[self.schema['modelUnderscore']][column]
if (Object.keys(operValue)[0] === 'like') {
ret[self.schema['modelUnderscore']][column]['like'] = '%' + ret[self.schema['modelUnderscore']][column]['like'] + '%'
}
})
return ret
}
},
......@@ -435,6 +457,7 @@
// this.validate()
const self = this
if (this.userDefined && this.userDefined.pretreatment) {
self.init()
self.userDefined.pretreatment().then(function() {
self.init()
self.getList()
......@@ -457,7 +480,7 @@
if (!item) {
return 0
}
if (typeof item !== 'string' && typeof item !== 'object') {
console.error(`传入的columns不符合要求，数组元素必须是字符串或对象`)
}
......@@ -469,10 +492,10 @@
}
})
},
init() {
const self = this
self.operationWidth = 0
self.operationWidth = 20
// 处理要显示的列
if (!self.columns || !self.columns.length) {
_.each(self.schema['columns'], function(column) {
......@@ -498,7 +521,7 @@
item.isSort = item.isSort === undefined ? false : item.isSort === true ? 'custom' : false
})
}
// 处理过滤条件
if (self.filters) {
const tableName = self.schema['modelUnderscore']
......@@ -523,7 +546,7 @@
if (self.userDefined) {
self.setDefinedOperate()
}
console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
},
......@@ -534,7 +557,20 @@
self.definedOperate = self.userDefined.definedOperate
}
if (self.userDefined.definedOperation) {
self.operationWidth += 50 * self.userDefined.definedOperation.length
_.each(self.userDefined.definedOperation, function(item, index) {
_.each(item.label, function(value) {
if (!isNaN(Number(value))) {
self.operationWidth += 8 // 如果是数字+8
} else {
self.operationWidth += 13 // 如果是汉字加13
}
})
if (self.userDefined.definedOperation.length > 1 && index > 1) {
self.operationWidth += 13 // 每添加一条需加上margin
} else {
self.operationWidth += 5
}
})
self.definedOperation = self.userDefined.definedOperation
}
},
......@@ -553,23 +589,23 @@
getList() {
const self = this
self.listLoading = true
// 处理过滤条件
let params = JSON.parse(JSON.stringify(self.listQuery))
params.filters = self.filterParams
params.filters = this.deleteFilter(params.filters)
if (self.includes) {
params.includes = self.includes
}
if (self.refers) {
params.refers = self.refers
}
if (self.userDefined && self.userDefined.definedParams) {
params = self.userDefined.definedParams(params, self.definedOperate)
}
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
......@@ -664,6 +700,7 @@
formStyle: {},
funObject: {},
formRefers: {},
formIncludes: {},
foreignFormFields: [],
formRelates: []
}
......@@ -681,6 +718,7 @@
self.options.editData.formStyle ? self.HmComplexForm.formStyle = self.options.editData.formStyle : ''
self.options.editData.funObject ? self.HmComplexForm.funObject = self.options.editData.funObject : ''
self.options.editData.formRefers ? self.HmComplexForm.formRefers = self.options.editData.formRefers : ''
self.options.editData.formIncludes ? self.HmComplexForm.formIncludes = self.options.editData.formIncludes : ''
self.options.editData.foreignFormFields ? self.HmComplexForm.foreignFormFields = self.options.editData.foreignFormFields : ''
self.options.editData.formRelates ? self.HmComplexForm.formRelates = self.options.editData.formRelates : ''
}
......@@ -696,12 +734,13 @@
self.options.newData.formStyle ? self.HmComplexForm.formStyle = self.options.newData.formStyle : ''
self.options.newData.funObject ? self.HmComplexForm.funObject = self.options.newData.funObject : ''
self.options.newData.formRefers ? self.HmComplexForm.formRefers = self.options.newData.formRefers : ''
self.options.newData.formIncludes ? self.HmComplexForm.formIncludes = self.options.newData.formIncludes : ''
self.options.newData.foreignFormFields ? self.HmComplexForm.foreignFormFields = self.options.newData.foreignFormFields : ''
self.options.newData.formRelates ? self.HmComplexForm.formRelates = self.options.newData.formRelates : ''
}
if (type === 'detail') {
self.dialogName = '详情'
if (self.options.showDetail.showUserButtons) {
self.HmComplexForm.showUserButtons = self.options.showDetail.showUserButtons
}
......@@ -712,11 +751,17 @@
self.options.showDetail.formStyle ? self.HmComplexForm.formStyle = self.options.showDetail.formStyle : ''
self.options.showDetail.funObject ? self.HmComplexForm.funObject = self.options.showDetail.funObject : ''
self.options.showDetail.formRefers ? self.HmComplexForm.formRefers = self.options.showDetail.formRefers : ''
self.options.showDetail.formIncludes ? self.HmComplexForm.formIncludes = self.options.showDetail.formIncludes : ''
self.options.showDetail.foreignFormFields ? self.HmComplexForm.foreignFormFields = self.options.showDetail.foreignFormFields : ''
self.options.showDetail.formRelates ? self.HmComplexForm.formRelates = self.options.showDetail.formRelates : ''
self.HmComplexForm.tableId = data.id
// wk 2018年05月09日11:57:06
if (self.options.showDetail.funCallback) {
self.options.showDetail.funCallback(data)
}
}
self.dialogFormVisible = true
},
statusFunc(row, operation) {
......@@ -764,7 +809,7 @@
filters: {}
}
this.init()
this.getList()
},
// 批量删除
......@@ -797,7 +842,7 @@
}).then(resp => {
if (resp.data.message === 'delete success') {
self.$message({
message: resp.data.message,
message: '删除成功',
type: 'success'
})
self.getList()
......@@ -820,7 +865,7 @@
}
if (self.options.editData && self.options.editData.isShow) { // 判断是否显示编辑按钮
self.isShowEditDataButton = self.options.editData.isShow
self.operationWidth += 50
self.operationWidth += 30
}
if (self.options.showRefresh) { // 判断是否显示刷新按钮
self.isShowRefresh = self.options.showRefresh
......@@ -839,14 +884,14 @@
}
if (self.options.showDeleteButton) { // 判断是否显示删除按钮
self.isShowDeleteButton = self.options.showDeleteButton
self.operationWidth += 50
self.operationWidth += 30
}
if (self.options.buttonGroup) { // 设置按钮是否以按钮组呈现
self.buttonGroup = self.options.buttonGroup
}
if (self.options.showDetail && self.options.showDetail.isShow) { // 设置按钮是否以按钮组呈现
self.isShowDetail = self.options.showDetail.isShow
self.operationWidth += 50
self.operationWidth += 30
}
if (self.options.showSelection) { // 设置是否显示多选
self.isShowSelection = self.options.showSelection
......@@ -912,7 +957,7 @@
}
}))
},
getFilterColumn(filter) {
const keys = Object.keys(filter)
let column = null
......@@ -930,6 +975,10 @@
},
getFilterOperTwin(filter) {
return Object.keys(filter[this.getFilterColumn(filter)])[1]
},
dialogClose() {
this.dialogFormVisible = false
this.getList()
}
}
}
......
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