Skip to content

V
VueElementTemplate
Commit f39d2ee5 authored by 杨柠瑞's avatar 杨柠瑞
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents 5ba274b8 6292ec46
Show whitespace changes
Inline Side-by-side
Showing with 118 additions and 50 deletions
src/views/haomo/components/forms/HmComplexForm.vue
View file @ f39d2ee5
......@@ -8,7 +8,7 @@
<!--表单部分-->
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
style="width:80%;margin:0 auto">
<el-form-item v-for="(column,index) in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
<el-form-item v-for="column in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel">
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
v-model="formModel[column.codeCamel]"></el-input>-->
......@@ -24,7 +24,7 @@
:picker-options="pickerOptions">
</el-date-picker>
<!-- 3 下拉框 -->
<el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]">
<el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" clearable>
<el-option v-for="(item,key) in column.options"
:key="key"
:label="item"
......@@ -38,7 +38,10 @@
:rows="2">
</el-input>
<!-- 5 复选框 -->
<el-checkbox v-else-if="column.widgetType === 3" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox>
<el-checkbox v-else-if="column.widgetType === 3 && !column.options" v-model="formModel[column.codeCamel]" true-label="1" false-label="0"></el-checkbox>
<el-checkbox-group v-else-if="column.widgetType === 3 && column.options" v-model="formModel[column.codeCamel]">
<el-checkbox v-for="option in column.options" :label="option" :key="option">{{option}}</el-checkbox>
</el-checkbox-group>
<!-- 6 富文本 -->
<quill-editor v-else-if="column.widgetType === 5"
ref="textEditor"
......@@ -48,6 +51,10 @@
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
<!-- 7 单选框 -->
<el-radio-group v-else-if="column.widgetType === 7" v-model="formModel[column.codeCamel]">
<el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="buttons && buttons.length > 0">
<el-col :span="12" v-for="(btn,key) in buttons" :key="key">
......@@ -93,7 +100,7 @@
required: true
},
/**
* 必传，指定要显示的表单字段及类型。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-6(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式)，若表单类型为下拉框，还需传入options字段，值为数组(数组元素是下拉框的选项)
* 必传，指定要显示的表单字段及类型。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），对于复选框，如果只有一个备选项则不必传options
* 示例：[
* { name: 'username', widgetType: 1 },
* { name: 'securityLevel', widgetType: 5 },
......@@ -233,6 +240,13 @@
console.log(this.buttons)
},
methods: {
// 判断是否一个对象的所有属性都为空
isEmpty(obj) {
_.forEach(obj, function(val) {
if (val) return false
})
return true
},
logTimeChange(value) {
console.log(value)
},
......@@ -257,48 +271,56 @@
})
},
onEditorBlur(editor) {
console.log('editor blur!')
// console.log('editor blur!')
},
onEditorFocus(editor) {
console.log('editor focus!')
// console.log('editor focus!')
},
onEditorReady(editor) {
console.log('editor ready!')
// console.log('editor ready!')
},
init() {
const self = this
// 如果没有传columns，则全部显示
if (!self.columns || !self.columns.length) {
_.each(self.schema['columns'], function(column) {
const tmp = JSON.parse(JSON.stringify(column))
self.$set(tmp, 'code', tmp.code.toLowerCase())
self.showUserColumns.push(tmp)
})
} else { // 传了columns，则只显示传入的字段
// if (!self.columns || !self.columns.length) {
// _.each(self.schema['columns'], function(column) {
// const tmp = JSON.parse(JSON.stringify(column))
// self.$set(tmp, 'code', tmp.code.toLowerCase())
// self.showUserColumns.push(tmp)
// })
// } else
if (self.columns && self.columns.length) {
self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
console.log(self.showUserColumns)
// console.log(self.showUserColumns)
// 将字符串对象进行替换处理
_.each(self.showUserColumns, function(column, index) {
if (typeof column === 'object') {
// 生成一个新对象
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column.name]
// console.log(tmp)
self.$set(tmp, 'code', tmp.code.toLowerCase())
self.$set(tmp, 'widgetType', column.widgetType || 1)
self.$set(tmp, 'options', column.options)
self.$set(self.showUserColumns, index, tmp)
console.log(self.showUserColumns)
}
})
column.options && self.$set(tmp, 'options', column.options)
self.$set(self.showUserColumns, index, tmp) // 顺序
// console.log(self.showUserColumns)
}
})
console.log(self.showUserColumns)
// 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) {
if (item.widgetType === 3 && item.options && item.options.length > 0) {
self.$set(self.formModel, item.codeCamel, [])
} else {
self.$set(self.formModel, item.codeCamel, '')
}
})
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
} else {
console.log('columns为必传字段!!')
}
},
// 提交
/**
......@@ -311,10 +333,10 @@
const self = this
console.log('点击了提交函数')
console.log(self.formModel)
// if (self.isEmpty(self.formModel)) return
self.$refs.form.validate((valid) => {
console.log(valid)
if (valid) {
console.log('提交成功!')
console.log('valid通过!')
// 存在tableId 则修改信息
if (self.tableId) {
request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', {
......
src/views/haomo/components/forms/index.vue
View file @ f39d2ee5
<template>
<div>
<hm-complex-form :schema="schema['HmUser2']" :columns="showUserColumns" :buttons="showUserButtons" :tableId="tableId">
<hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :buttons="showUserButtons" :tableId="tableId">
</hm-complex-form>
</div>
</template>
......@@ -20,8 +20,8 @@
data() {
return {
// showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'createTime']
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['企业', '代理商'] }, { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }],
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
// showUserButtons: []
......
src/views/haomo/pages/login/HmLogin.vue
View file @ f39d2ee5
<template>
<el-row type="flex">
<el-col :span="10" class="detail-content" style="margin:0 auto" >
<el-form style="border: 0.5px solid #e6ebf5">
<el-col :span="options.span" class="detail-content" style="margin:0 auto;border: 0.5px solid #e6ebf5" >
<el-row type="flex">
<el-col style="height: 45px;background-color: #00BF8B" ></el-col>
</el-row>
<el-row type="flex" style="margin-top:35px">
<el-row type="flex" style="margin-top:30px">
<el-col style="margin: 0 auto;height: 70px;width:433px;text-align: center;line-height: 70px;font-size: 35px;color:#586C8C;font-weight: bold" >
<img />张家口人民检察院
</el-col>
</el-row>
<el-form-item prop="pass">
<el-input class="style" style="width:433px;margin: 0 auto;margin-top:25px;display: block;" prefix-icon="el-icon-search" auto-complete="off"></el-input>
<el-form :model="hm_form" status-icon :rules="rules2" ref="hm_form" style="width: 433px;margin: 0 auto;">
<el-form-item prop="account">
<el-input class="style" placeholder="请输入账号" v-model="hm_form.account" style="margin-top:25px;display: block;" prefix-icon="el-icon-search" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" style="width:433px;margin: 0 auto;display: block;border-width: 0px;border-bottom-width: 1px;border-radius: 0px;" prefix-icon="el-icon-search" suffix-icon="el-icon-view" auto-complete="off"></el-input>
<el-form-item prop="pass">
<el-input type="password" placeholder="请输入密码" v-model="hm_form.pass" style="display: block;border-width: 0px;border-bottom-width: 1px;border-radius: 0px;" prefix-icon="el-icon-search" suffix-icon="el-icon-view" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" style="width: 178px;height: 44px ;font-size:16px;background-color: #00BF8B;margin: 0 auto;display: block">提交</el-button>
<el-button type="success" @click="submitForm('hm_form',options)" style="width: 178px;height: 44px ;font-size:16px;background-color: #00BF8B;margin: 0 auto;display: block">提交</el-button>
</el-form-item>
</el-form>
</el-col>
......@@ -38,7 +38,34 @@
}
},
data() {
var account = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入账号'))
} else {
callback()
}
}
var pass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
callback()
}
}
return {
hm_form: {
account: '',
pass: ''
},
rules2: {
account: [
{ validator: account, trigger: 'blur' }
],
pass: [
{ validator: pass, trigger: 'blur' }
]
}
}
},
computed: {
},
......@@ -47,7 +74,16 @@
created() {
},
methods: {
submitForm(formName, callback) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!' + JSON.stringify(callback))
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
......
src/views/haomo/pages/login/index.vue
View file @ f39d2ee5
<template>
<div>
<hm-login></hm-login>
<hm-login :options="options"></hm-login>
</div>
</template>
......@@ -21,8 +21,18 @@
filters: {
},
created() {
this.options = {
spx: function(account, pass) {
alert(account + pass)
},
methods: {}
span: 10
}
},
methods: {
test: function() {
alert(4)
}
}
}
</script>
<style scoped>
......
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