Skip to content

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

form

parent dff3abd8
Show whitespace changes
Inline Side-by-side
Showing with 57 additions and 29 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 6a631277
......@@ -120,15 +120,16 @@
<!-- 8树形图 -->
<!--:default-expanded-keys="[2, 3]"-->
<!--:default-checked-keys="[5]"-->
<div class="hm-form_form_div" @mouseenter="currentTree = column.codeCamel;treeComponent = column.ref" v-else-if="column.widgetType === 9" :style="formStyle && formStyle.elTree && formStyle.elTree.style || {width: '70%'}">
<div class="hm-form_form_div" v-else-if="column.widgetType === 9" :style="formStyle && formStyle.elTree && formStyle.elTree.style || {width: '70%'}">
<el-tree :data="column.options"
:ref="column.ref || 'tree'"
:show-checkbox="column.checkBox || false"
node-key="id"
:accordion="column.accordion || false"
:draggable="column.draggable || false"
:check-strictly="column.checkStrictly || false"
@node-click="handleNodeChange"
@check-change="handleCheckChange"
@check-change="(data, checked, indeterminate)=>{ return handleCheckChange(data, checked, indeterminate, column.codeCamel, column.checkStrictly)}"
:default-checked-keys="formModel[column.codeCamel]"
:props="column.props || treeProps">
</el-tree>
......@@ -203,6 +204,7 @@
import request from '@/utils/request'
import { paramEncode } from '@/utils'
// import commonApi from '@/api/commonApi'
/**
* 毫末科技的表单组件.
*
......@@ -239,11 +241,15 @@
* param属性可选，当表单类型为文件类型时，可传入param字段，值为后台规定必传参数，默认值为picture
* accept属性可选,当表单类型为文件类型时，可传入accept字段，限制限制上传文件类型，取值规范参考w3c
* fileData属性可选，当表单类型为文件类型时，取值为all(表示返回路径+文件名)，取值为filePath(表示只返回路径)，取值fileName(表示只返回文件名),如果不传，默认只返回路径
* widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为普通input
* accordion属性可选，当表单类型为树形控件时，可传入accordion，值为boolean, 表示是否采用手风琴样式展开树形结构，默认为false
* checkBox属性可选，当表单类型为树形控件时，可传入checkBox，值为boolean, 表示是否显示勾选框，默认false
* checkStrictly属性可选，当表单类型为树形控件时，可传入checkStrictly，值为boolean, 表示在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false
* ref属性，树形控件必传，且值必须与codeCamel相同
* widgetType属性可选，表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，不传默认为1,普通input
* 取值1-11(1表示普通输入框,2表示普通下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框，8表示文件上传,
* 9表示树状控件，10表示级联下拉框，11b表示密码框)，
* 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
* 对于复选框，如果只有一个备选项则不必传options,
* 若表单类型为复选框，如果只有一个备选项则不必传options,
* 若表单类型为下拉框，还可传入multiple字段，取值boolean类型，true/false，表示是否多选，默认false
* 若表单类型为时间日期，可传入dateType字段，值为'date'（只显示日期）或'datetime'（显示日期和时间），如果不传，
* 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式，
......@@ -517,6 +523,7 @@
// }
// }
return {
i: 0,
currentFile: '', // 上传文件时当前选中的codeCamel值
currentTree: '', // 当前选中的树形菜单的codeCamel值
treeComponent: '', // 当前的树形菜单组件
......@@ -782,34 +789,49 @@
// console.log('自己的')
},
// 树形选择器
handleCheckChange(data, checked, indeterminate, aaa) {
handleCheckChange(data, checked, indeterminate, code, checkStrictly) {
const self = this
console.log('handleCheckChange函数')
// console.log(data)
// console.log(checked)
// console.log(indeterminate)
console.log(aaa)
// console.log(this.$refs.tree[0].getCheckedNodes(true))
// console.log('当前选择的codecamel:', self.currentTree)
// console.log('当前选择的tree组件', self.treeComponent)
// console.log(self.$refs[self.treeComponent][0].getCheckedKeys(true))
for (var i = 0, len = self.showUserColumns.length; i < len; i++) {
// && !self.showUserColumns[i].edited
if (self.showUserColumns[i].widgetType === 9) {
// self.$set(self.showUserColumns[i], 'edited', true)
for (var key in self.formModel) {
if (key === self.currentTree && self.showUserColumns[i].codeCamel === self.currentTree) {
// self.formModel[key] = response.message || response.visitName
// 张家口
// self.formModel[key] = response.visitName + response.fileName
// org
self.formModel[key] = self.$refs[self.treeComponent][0].getCheckedKeys(true)
break
}
}
self.formModel[code] = self.$refs[code][0].getCheckedKeys(true)
// for (var i = 0, len = self.showUserColumns.length; i < len; i++) {
// // && !self.showUserColumns[i].edited
// if (self.showUserColumns[i].widgetType === 9) {
// // self.$set(self.showUserColumns[i], 'edited', true)
// for (var key in self.formModel) {
// if (key === self.currentTree && self.showUserColumns[i].codeCamel === self.currentTree) {
// // self.formModel[key] = response.message || response.visitName
// // 张家口
// // self.formModel[key] = response.visitName + response.fileName
// // org
// self.formModel[key] = self.$refs[self.treeComponent][0].getCheckedKeys(true)
// break
// }
// }
// // break
// }
// }
// 处理单选
if (checkStrictly) {
self.i++
if (self.i % 2 === 0) {
if (checked) {
self.$refs[code][0].setCheckedNodes([])
self.$refs[code][0].setCheckedNodes([data])
// 交叉点击节点
} else {
self.$refs[code][0].setCheckedNodes([])
// 点击已经选中的节点，置空
}
}
}
console.log(self.$refs[code][0].getCheckedKeys(true), self.formModel)
},
// 树形选择器
handleNodeChange(data, node, com) {
......@@ -1045,27 +1067,31 @@
}
})
}
// 树形控件、文件上传，将请求回来的字符串放数组中
// 文件上传、级联菜单将请求回来的字符串放数组中
if (item.widgetType === 8 || item.widgetType === 10) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
// console.log(11111, self.formModel[key])
if (value === null || value === '') {
self.formModel[key] = []
} else {
self.formModel[key] = self.formModel[key].split(',')
}
}
})
}
// 树形控件、文件上传，将请求回来的字符串放数组中
if (item.widgetType === 9) {
_.forEach(self.formModel, function(value, key) {
if (item.codeCamel === key) {
// let str1 = ''
// let str2 = ''
// str1 = self.formModel[key].split(',')[0]
// str2 = self.formModel[key].split(',')[1]
// console.log(11111, self.formModel[key])
if (value === null || value === '') {
self.formModel[key] = []
} else {
self.formModel[key] = self.formModel[key].split(',')
self.$refs[key][0].setCheckedKeys(self.formModel[key])
}
}
})
}
})
......@@ -1103,9 +1129,11 @@
// console.log('self.showUserColumns', self.showUserColumns)
// 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) {
// 设置值为数组
if (item.widgetType === 8 || item.widgetType === 10 || item.widgetType === 9 || (item.widgetType === 3 && item.options && item.options.length > 0)) {
self.$set(self.formModel, item.codeCamel, [])
} else {
// 设置默认值
item.default ? self.$set(self.formModel, item.codeCamel, item.default) : self.$set(self.formModel, item.codeCamel, '')
}
})
......
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