Skip to content

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

coding

parents 7d7b539f a1ce81e7
master storybook
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing with 635 additions and 11 deletions
src/lang/zh.js
View file @ 1673aa18
......@@ -32,6 +32,8 @@ export default {
customTreeTable: '自定义树表',
tab: 'Tab',
form: '表单',
calendar: '日历事项',
transfer: '穿梭框',
createForm: '创建表单',
editForm: '编辑表单',
errorPages: '错误页面',
......
src/router/index.js
View file @ 1673aa18
......@@ -137,6 +137,15 @@ export const asyncRouterMap = [
icon: 'table'
}
},
{
path: 'transfer',
component: _import('haomo/components/transfer/index'),
name: '',
meta: {
title: 'transfer',
icon: 'table'
}
},
{
path: 'iconMenu',
component: _import('haomo/components/iconMenu/index'),
......
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 1673aa18
......@@ -12,7 +12,7 @@
element-loading-text="加载中"
:model="formModel"
:rules="rules"
label-width="110px"
label-width="200px"
style="width:80%;margin:0 auto">
<el-form-item v-for="column in showUserColumns"
:key="column.id"
......@@ -26,10 +26,10 @@
<!-- 2 日期选择 -->
<el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
v-model="formModel[column.codeCamel]"
type="datetime"
:type="column.dateType || 'date'"
align="right"
@change="logTimeChange"
value-format="yyyy-MM-dd HH:mm:ss"
:value-format="column.dateFormate || 'yyyy-MM-dd'"
:picker-options="pickerOptions">
</el-date-picker>
<!-- 3 下拉框 -->
......@@ -129,16 +129,19 @@
* codeCamel表示要显示的表单字段,
* name表示自定义的字段名，如果不传，默认为数据库中的字段名，
* widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，
* 取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，
* 取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期，7表示单选框)，
* 若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），
* 对于复选框，如果只有一个备选项则不必传options
* 对于复选框，如果只有一个备选项则不必传options,
* 若表单类型为时间日期，可传入dateType字段，值为date（只显示日期）或datetime（显示日期和时间），如果不传，
* 默认只显示日期; 可传入dateFormate字段，为日期格式，取值遵循elementUI DatePicker组件中的日期格式，
* 比如 只显示日期取值'yyyy-MM-dd'，显示日期和时间取值'yyyy-MM-dd HH:mm:ss'，如果不传默认为只显示日期取值'yyyy-MM-dd'，date字段和dateFormate字段取值须对应
* 示例：[
* { name: '姓名', codeCamel: 'username', widgetType: 1 },
* { name: '安全级别', codeCamel: 'securityLevel', widgetType: 5 },
* { name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
* { name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
* { name: '部门', codeCamel: 'departmentId', widgetType: 4 },
* { name: '新建时间', codeCamel: 'createTime', widgetType: 6 },
* { name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
* { name: '登陆地址', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] },
* ]
*/
......@@ -372,7 +375,9 @@
// self.$set(tmp, 'code', tmp.code.toLowerCase())
column.name && self.$set(tmp, 'name', column.name) // 自定义字段名
self.$set(tmp, 'widgetType', column.widgetType || 1)
column.options && self.$set(tmp, 'options', column.options)
column.options && self.$set(tmp, 'options', column.options) // 设置下拉框/多选选项
column.dateType && self.$set(tmp, 'dateType', column.dateType) // 设置日期表单显示类型
column.dateFormate && self.$set(tmp, 'dateFormate', column.dateFormate) // 设置日期格式
self.$set(self.showUserColumns, index, tmp) // 顺序
}
})
......
src/views/haomo/components/forms/index.vue
View file @ 1673aa18
......@@ -25,12 +25,12 @@
return {
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
showUserColumns: [
{ name: '姓名', codeCamel: 'username', widgetType: 1 },
{ name: '邮箱', codeCamel: 'email', widgetType: 5 },
{ name: '用户名称', codeCamel: 'username', widgetType: 1 },
{ name: '电子邮件', codeCamel: 'email', widgetType: 5 },
{ name: '选择类型', codeCamel: 'type', widgetType: 2, options: ['选项1', '选项2'] },
{ name: '选择头像', codeCamel: 'avatar', widgetType: 3, options: ['美女', '帅哥'] },
{ codeCamel: 'password', widgetType: 4 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 6, dateType: 'datetime', dateFormate: 'yyyy-MM-dd HH:mm:ss' },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 7, options: ['会员', '访客'] }
],
// 要显示按钮
......@@ -41,7 +41,7 @@
],
// showUserButtons: []
// 布局方式
layout: { left: 0, middle: 12, right: 12 }
layout: { left: 6, middle: 12, right: 6 }
}
},
computed: {
......
src/views/haomo/components/transfer/HmTransfer.md 0 → 100644
View file @ 1673aa18
### 基本使用
```jsx
<hm-transfer :filterable="true"
:title="['左侧列表', '右侧列表']"
:buttonTexts="['左移', '右移']"
:schema="{
'model': 'HmUser',
'modelPlural': 'HmUsers',
'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_users',
'columns': [
{
'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字',
'code': 'USERNAME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1517859502',
'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'username',
'codeCamelPlural': 'usernames',
'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames',
'type': 'string'
},
{
'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID',
'code': 'LOGINID',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'columnMandatory': '1',
'codeCamel': 'loginid',
'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids',
'type': 'string'
},
{
'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码',
'code': 'PASSWORD',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'password',
'codeCamelPlural': 'passwords',
'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords',
'type': 'string'
},
{
'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话',
'code': 'MOBILE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)',
'length': '16',
'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles',
'type': 'string'
},
{
'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱',
'code': 'EMAIL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'email',
'codeCamelPlural': 'emails',
'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails',
'type': 'string'
},
{
'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像',
'code': 'AVATAR',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024',
'codeCamel': 'avatar',
'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars',
'type': 'string'
},
{
'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间',
'code': 'CREATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times',
'type': 'datetime'
},
{
'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间',
'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times',
'type': 'datetime'
},
{
'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times',
'type': 'datetime'
},
{
'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别',
'code': 'SECURITY_LEVEL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels',
'type': 'number'
},
{
'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型',
'code': 'TYPE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'type',
'codeCamelPlural': 'types',
'codeUnderscore': 'type',
'codeUnderscorePlural': 'types',
'type': 'number'
}
]
}"></hm-transfer>
```
### 指定列表显示的列
```vue
<template>
<div>
<hm-transfer
:schema="schema['HmUser']"
:filterable="canSearch"
:title="listTitle"
:buttonTexts="buttonTexts"
></hm-transfer>
</div>
</template>
<script>
export default {
name: 'HmTransfer',
data() {
return {
schema: {
'HmUser': {
'model': 'HmUser',
'modelPlural': 'HmUsers',
'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_users',
'columns': [
{
'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字',
'code': 'USERNAME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1517859502',
'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'username',
'codeCamelPlural': 'usernames',
'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames',
'type': 'string'
},
{
'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID',
'code': 'LOGINID',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'columnMandatory': '1',
'codeCamel': 'loginid',
'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids',
'type': 'string'
},
{
'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码',
'code': 'PASSWORD',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'password',
'codeCamelPlural': 'passwords',
'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords',
'type': 'string'
},
{
'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话',
'code': 'MOBILE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)',
'length': '16',
'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles',
'type': 'string'
},
{
'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱',
'code': 'EMAIL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)',
'length': '256',
'codeCamel': 'email',
'codeCamelPlural': 'emails',
'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails',
'type': 'string'
},
{
'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像',
'code': 'AVATAR',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024',
'codeCamel': 'avatar',
'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars',
'type': 'string'
},
{
'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间',
'code': 'CREATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times',
'type': 'datetime'
},
{
'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间',
'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times',
'type': 'datetime'
},
{
'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'DATE',
'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times',
'type': 'datetime'
},
{
'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别',
'code': 'SECURITY_LEVEL',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels',
'type': 'number'
},
{
'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型',
'code': 'TYPE',
'creationDate': '1498990741',
'creator': 'hm20160509',
'modificationDate': '1498995491',
'modifier': 'xjq',
'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)',
'length': '11',
'codeCamel': 'type',
'codeCamelPlural': 'types',
'codeUnderscore': 'type',
'codeUnderscorePlural': 'types',
'type': 'number'
}
]
}
},
showUserColumns: ['mobile', 'loginid']
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
this.canSearch = true
this.listTitle = ['左侧列表', '右侧列表']
this.buttonTexts = ['左移', '右移']
},
methods: {}
}
</script>
```
\ No newline at end of file
src/views/haomo/components/transfer/HmTransfer.vue 0 → 100644
View file @ 1673aa18
<template>
<el-transfer
v-model="value1"
:data="data"
:titles="title"
:button-texts="buttonTexts"
:filterable="filterable"
filter-placeholder="请输入关键字"
@change="handleChange"
></el-transfer>
</template>
<script>
import request from '@/utils/request'
import _ from 'lodash'
/**
* 毫末科技的穿梭框组件.
*
* demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/transfer
* @author 索光旭
*/
export default {
name: 'HmTransfer',
props: {
/**
* 必传,组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必须传schema，以完成数据的交互
*/
schema: {
type: Object,
required: true
},
/**
* 必传,项用于控制是否启用过滤功能
*/
filterable: {
type: Boolean,
required: true
},
/**
* 非必传,用于修改穿梭框标题显示
* 若不传,则显示默认文字list1,list2
*/
title: {
type: Array
},
/**
* 非必传,用于修改穿梭框按钮文字显示
* 若不传，则默认显示为左右箭头
*/
buttonTexts: {
type: Array
}
},
methods: {
// 获取所有用户信息
getUser: function() {
const self = this
const params = {}
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
self.list = resp.data
// 重新格式化用户信息
_.forIn(self.list, function(item, index) {
self.data.push({
key: index,
label: item.username
// disabled: index % 4 === 0 //需要禁止选择时设置
})
// 通过type类型判断左右显示
if (item.type !== 0) {
self.value1.push(index)
}
})
})
},
// 更改用户type字段值(入库操作)
changeType: function(val, userObj) {
const self = this
request(self.schema.modelUnderscorePlural + '/' + userObj.id + '/edit', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
params: { type: val }
}).then(data => {})
},
// 监测两侧列表改变事件
handleChange(value, directions, moveKey) {
const self = this
// 判断移动方向
if (directions === 'left') {
_.each(moveKey, function(key) {
const userObj = self.list[key]
self.changeType(0, userObj)
})
} else {
_.each(moveKey, function(key) {
const userObj = self.list[key]
self.changeType(1, userObj)
})
}
}
},
created: function() {
this.getUser()
},
data() {
return {
data: [],
list: null,
value1: [] // 右侧列表显示内容，必须项，否则穿梭功能无法实现
}
}
}
</script>
<style>
.el-transfer{
width: 33rem;
margin: 10rem auto;
}
</style>
src/views/haomo/components/transfer/index.vue 0 → 100644
View file @ 1673aa18
<!--
<hm-transfer
:schema="schema['HmUser']" 数据库操作对象 Object
:filterable="true" 是否显示搜索框 Boolean （必须项）
:title="['左侧列表', '右侧列表']" 列表标题 Array （可选项）
:buttonTexts="['左移', '右移']" 按钮名称 Array （可选项）
></hm-transfer>
-->
<template>
<hm-transfer
:schema="schema['HmUser']"
:filterable="canSearch"
:title="listTitle"
:buttonTexts="buttonTexts"
></hm-transfer>
</template>
<script>
import HmTransfer from './HmTransfer'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmTransferIndex',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-transfer': HmTransfer
},
data() {
return {}
},
computed: {},
filters: {},
created() {
this.schema = schema
this.canSearch = true
this.listTitle = ['左侧列表', '右侧列表']
this.buttonTexts = ['左移', '右移']
},
methods: {}
}
</script>
<style scoped>
</style>
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