Skip to content

V
VueElementTemplate
Commit 9b999237 authored by 胡小根's avatar 胡小根
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents d67bd16e 50f2eec6
Hide whitespace changes
Inline Side-by-side
Showing with 5940 additions and 837 deletions
README.md
View file @ 9b999237
...@@ -44,7 +44,6 @@ git clone https://github.com/PanJiaChen/vue-element-admin.git ...@@ -44,7 +44,6 @@ git clone https://github.com/PanJiaChen/vue-element-admin.git
# 安装依赖 # 安装依赖
npm install npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 # 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org npm install --registry=https://registry.npm.taobao.org
......
config/index.js
View file @ 9b999237
...@@ -22,7 +22,7 @@ module.exports = { ...@@ -22,7 +22,7 @@ module.exports = {
// Various Dev Server settings // Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST host: 'localhost', // can be overwritten by process.env.HOST
port: 9527, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined port: 9529, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
autoOpenBrowser: true, autoOpenBrowser: true,
errorOverlay: true, errorOverlay: true,
notifyOnErrors: false, notifyOnErrors: false,
......
src/main.js
View file @ 9b999237
import Vue from 'vue' import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor' // 富文本插件 import VueQuillEditor from 'vue-quill-editor' // 富文本插件
import VueAwesomeSwiper from 'vue-awesome-swiper' // vue-awesome-swiper
import 'normalize.css/normalize.css'// A modern alternative to CSS resets import 'normalize.css/normalize.css'// A modern alternative to CSS resets
...@@ -20,6 +21,7 @@ import './mock' // simulation data ...@@ -20,6 +21,7 @@ import './mock' // simulation data
import 'quill/dist/quill.core.css' // 富文本CSS import 'quill/dist/quill.core.css' // 富文本CSS
import 'quill/dist/quill.snow.css' // 富文本CSS import 'quill/dist/quill.snow.css' // 富文本CSS
import 'swiper/dist/css/swiper.css' // swiper css
import * as filters from './filters' // global filters import * as filters from './filters' // global filters
...@@ -28,6 +30,7 @@ import Icon from 'vue-awesome/components/Icon' ...@@ -28,6 +30,7 @@ import Icon from 'vue-awesome/components/Icon'
Vue.component('icon', Icon) Vue.component('icon', Icon)
Vue.use(VueQuillEditor) // 富文本 Vue.use(VueQuillEditor) // 富文本
Vue.use(VueAwesomeSwiper) // vue-awesome-swiper
Vue.use(Element, { Vue.use(Element, {
size: 'medium', // set element-ui default size size: 'medium', // set element-ui default size
i18n: (key, value) => i18n.t(key, value) i18n: (key, value) => i18n.t(key, value)
......
src/router/index.js
View file @ 9b999237
...@@ -118,6 +118,33 @@ export const asyncRouterMap = [ ...@@ -118,6 +118,33 @@ export const asyncRouterMap = [
title: '面板', title: '面板',
icon: 'table' icon: 'table'
} }
},
{
path: 'tab',
component: _import('haomo/components/tabs/index'),
name: 'haomo-tab',
meta: {
title: '选项卡',
icon: 'table'
}
},
{
path: 'calendar',
component: _import('haomo/components/calendar/index'),
name: '',
meta: {
title: 'calendar',
icon: 'table'
}
},
{
path: 'iconMenu',
component: _import('haomo/components/iconMenu/index'),
name: 'haomo-iconMenu',
meta: {
title: '图标菜单',
icon: 'table'
}
} }
] ]
}, },
......
src/utils/request.js
View file @ 9b999237
...@@ -13,7 +13,7 @@ const service = axios.create({ ...@@ -13,7 +13,7 @@ const service = axios.create({
service.interceptors.request.use(config => { service.interceptors.request.use(config => {
// Do something before request is sent // Do something before request is sent
if (store.getters.token) { if (store.getters.token) {
config.headers['X-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改 config.headers['X-Auth-Token'] = getToken() // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改
} }
return config return config
}, error => { }, error => {
......
src/views/haomo/components/calendar/HmFullCalendar.vue 0 → 100644
View file @ 9b999237
<template>
<div class="calender">
<i class="el-icon-date" @click="dialogTableVisible = true"></i>
<el-dialog :visible.sync="dialogTableVisible">
<full-calendar :events="fcEvents" locale="en"></full-calendar>
</el-dialog>
</div>
</template>
<script>
import fullCalendar from 'vue-fullcalendar'
import request from '@/utils/request'
import _ from 'lodash'
import moment from 'moment'
export default {
name: 'calender',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'full-calendar': fullCalendar
},
props: {
schema: {
type: Object,
required: true
},
demoEvents: {
type: Object,
required: false
}
},
data() {
return {
fcEvents: [],
dialogTableVisible: false
}
},
computed: {
},
filters: {
},
created() {
this.getList()
},
methods: {
getList() {
const self = this
console.log(self.schema)
request(self.schema.modelUnderscorePlural).then(resp => {
console.log(resp.data)
_.each(resp.data, function(item, index) {
const test = _.cloneDeep(self.demoEvents)
test.title = item[self.demoEvents.title]
test.start = moment(item[self.demoEvents.start]).format('YYYY-MM-DD')
test.end = moment(item[self.demoEvents.end]).format('YYYY-MM-DD')
self.fcEvents.push(test)
})
console.log(self.fcEvents)
})
}
}
}
</script>
<style scoped>
</style>
src/views/haomo/components/calendar/index.vue 0 → 100644
View file @ 9b999237
<template>
<div class="app-container calendar-list-container">
<hm-full-calendar :schema="schema['HmUser']" :demoEvents="demoEvents"></hm-full-calendar>
</div>
</template>
<script>
import HmFullCalendar from './HmFullCalendar.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmFullCalendar',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-full-calendar': HmFullCalendar
},
data() {
return {}
},
filters: {
},
created() {
this.schema = schema
this.demoEvents = {
title: 'username',
start: 'createTime',
end: 'lastUpdateTime'
}
},
methods: {}
}
</script>
src/views/haomo/components/forms/HmComplexForm.md
View file @ 9b999237
### 基本使用 ### 基本使用
```jsx ```jsx
<hm-complex-form :tableId="tableId" <hm-complex-form :columns="[
:columns="['username', 'loginid', 'password', 'mobile', 'email']" { name: 'username', widgetType: 1 },
:schema="{ { name: 'securityLevel', widgetType: 5 },
{ name: 'type', widgetType: 2, options: ['企业', '代理商'] },
{ name: 'avatar', widgetType: 3 },
{ name: 'departmentId', widgetType: 4 },
{ name: 'createTime', widgetType: 6 }
]"
:schema="{
'model': 'HmUser', 'model': 'HmUser',
'modelPlural': 'HmUsers', 'modelPlural': 'HmUsers',
'modelCamel': 'hmUser', 'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUsers', 'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user', 'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_users', 'modelUnderscorePlural': 'hm_users',
'columns': [ 'columns': [
{ {
'id': 'o50', 'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4', 'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字', 'name': '用户名字',
'code': 'USERNAME', 'code': 'USERNAME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1517859502', 'modificationDate': '1517859502',
'modifier': 'hm20160509', 'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'codeCamel': 'username', 'codeCamel': 'username',
'codeCamelPlural': 'usernames', 'codeCamelPlural': 'usernames',
'codeUnderscore': 'username', 'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames', 'codeUnderscorePlural': 'usernames',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o51', 'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782', 'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID', 'name': '登录ID',
'code': 'LOGINID', 'code': 'LOGINID',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'columnMandatory': '1', 'columnMandatory': '1',
'codeCamel': 'loginid', 'codeCamel': 'loginid',
'codeCamelPlural': 'loginids', 'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid', 'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids', 'codeUnderscorePlural': 'loginids',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o52', 'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112', 'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码', 'name': '密码',
'code': 'PASSWORD', 'code': 'PASSWORD',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'codeCamel': 'password', 'codeCamel': 'password',
'codeCamelPlural': 'passwords', 'codeCamelPlural': 'passwords',
'codeUnderscore': 'password', 'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords', 'codeUnderscorePlural': 'passwords',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o53', 'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0', 'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话', 'name': '联系电话',
'code': 'MOBILE', 'code': 'MOBILE',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)', 'dataType': 'VARCHAR2(16CHAR)',
'length': '16', 'length': '16',
'codeCamel': 'mobile', 'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles', 'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile', 'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles', 'codeUnderscorePlural': 'mobiles',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o54', 'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A', 'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱', 'name': '邮箱',
'code': 'EMAIL', 'code': 'EMAIL',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'codeCamel': 'email', 'codeCamel': 'email',
'codeCamelPlural': 'emails', 'codeCamelPlural': 'emails',
'codeUnderscore': 'email', 'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails', 'codeUnderscorePlural': 'emails',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o55', 'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C', 'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像', 'name': '头像',
'code': 'AVATAR', 'code': 'AVATAR',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)', 'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024', 'length': '1024',
'codeCamel': 'avatar', 'codeCamel': 'avatar',
'codeCamelPlural': 'avatars', 'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar', 'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars', 'codeUnderscorePlural': 'avatars',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o56', 'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A', 'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间', 'name': '创建时间',
'code': 'CREATE_TIME', 'code': 'CREATE_TIME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'DATE', 'dataType': 'DATE',
'codeCamel': 'createTime', 'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes', 'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time', 'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times', 'codeUnderscorePlural': 'create_times',
'type': 'datetime' 'type': 'datetime'
}, },
{ {
'id': 'o57', 'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC', 'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间', 'name': '更新时间',
'code': 'LAST_UPDATE_TIME', 'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'DATE', 'dataType': 'DATE',
'codeCamel': 'lastUpdateTime', 'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes', 'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time', 'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times', 'codeUnderscorePlural': 'last_update_times',
'type': 'datetime' 'type': 'datetime'
}, },
{ {
'id': 'o58', 'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB', 'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间', 'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME', 'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'DATE', 'dataType': 'DATE',
'codeCamel': 'lastLoginTime', 'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes', 'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time', 'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times', 'codeUnderscorePlural': 'last_login_times',
'type': 'datetime' 'type': 'datetime'
}, },
{ {
'id': 'o59', 'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52', 'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别', 'name': '安全级别',
'code': 'SECURITY_LEVEL', 'code': 'SECURITY_LEVEL',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'NUMBER(11,0)', 'dataType': 'NUMBER(11,0)',
'length': '11', 'length': '11',
'codeCamel': 'securityLevel', 'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels', 'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level', 'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels', 'codeUnderscorePlural': 'security_levels',
'type': 'number' 'type': 'number'
}, },
{ {
'id': 'o60', 'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171', 'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型', 'name': '类型',
'code': 'TYPE', 'code': 'TYPE',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'comment': '1:企业，2：代理商', 'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)', 'dataType': 'NUMBER(11,0)',
'length': '11', 'length': '11',
'codeCamel': 'type', 'codeCamel': 'type',
'codeCamelPlural': 'types', 'codeCamelPlural': 'types',
'codeUnderscore': 'type', 'codeUnderscore': 'type',
'codeUnderscorePlural': 'types', 'codeUnderscorePlural': 'types',
'type': 'number' 'type': 'number'
} }
] ]
}"></hm-complex-form> }"></hm-complex-form>
``` ```
### 指定显示的表单类型
### 指定显示的表单类型及按钮
```vue ```vue
<template> <template>
<div> <hm-complex-form :schema="schema['HmUser']"
<hm-complex-form :columns="showUserColumns"
:tableId="tableId" :tableId="tableId"
:schema="schema['HmUser']" :buttons="showUserButtons">
:columns="showUserColumns">
</hm-complex-form> </hm-complex-form>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'HmComplexForm', name: 'HmComplexFormIndex',
data() { data() {
return { return {
schema: { schema: {
'HmUser': { 'HmUser': {
'model': 'HmUser', 'model': 'HmUser',
'modelPlural': 'HmUsers', 'modelPlural': 'HmUsers',
'modelCamel': 'hmUser', 'modelCamel': 'hmUser',
'modelCamelPlural': 'hmUsers', 'modelCamelPlural': 'hmUsers',
'modelUnderscore': 'hm_user', 'modelUnderscore': 'hm_user',
'modelUnderscorePlural': 'hm_users', 'modelUnderscorePlural': 'hm_users',
'columns': [ 'columns': [
{ {
'id': 'o50', 'id': 'o50',
'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4', 'objectId': '170A4473-36CC-47E1-96C3-F238F8132AA4',
'name': '用户名字', 'name': '用户名字',
'code': 'USERNAME', 'code': 'USERNAME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1517859502', 'modificationDate': '1517859502',
'modifier': 'hm20160509', 'modifier': 'hm20160509',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'codeCamel': 'username', 'codeCamel': 'username',
'codeCamelPlural': 'usernames', 'codeCamelPlural': 'usernames',
'codeUnderscore': 'username', 'codeUnderscore': 'username',
'codeUnderscorePlural': 'usernames', 'codeUnderscorePlural': 'usernames',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o51', 'id': 'o51',
'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782', 'objectId': '70EC38C6-4AE4-4E79-BA72-29DA2FE50782',
'name': '登录ID', 'name': '登录ID',
'code': 'LOGINID', 'code': 'LOGINID',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'columnMandatory': '1', 'columnMandatory': '1',
'codeCamel': 'loginid', 'codeCamel': 'loginid',
'codeCamelPlural': 'loginids', 'codeCamelPlural': 'loginids',
'codeUnderscore': 'loginid', 'codeUnderscore': 'loginid',
'codeUnderscorePlural': 'loginids', 'codeUnderscorePlural': 'loginids',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o52', 'id': 'o52',
'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112', 'objectId': '4FCE7185-D489-4DED-AA5F-093A4DBC1112',
'name': '密码', 'name': '密码',
'code': 'PASSWORD', 'code': 'PASSWORD',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'codeCamel': 'password', 'codeCamel': 'password',
'codeCamelPlural': 'passwords', 'codeCamelPlural': 'passwords',
'codeUnderscore': 'password', 'codeUnderscore': 'password',
'codeUnderscorePlural': 'passwords', 'codeUnderscorePlural': 'passwords',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o53', 'id': 'o53',
'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0', 'objectId': '3A897125-CB02-40F5-9BB1-62A9B06553E0',
'name': '联系电话', 'name': '联系电话',
'code': 'MOBILE', 'code': 'MOBILE',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(16CHAR)', 'dataType': 'VARCHAR2(16CHAR)',
'length': '16', 'length': '16',
'codeCamel': 'mobile', 'codeCamel': 'mobile',
'codeCamelPlural': 'mobiles', 'codeCamelPlural': 'mobiles',
'codeUnderscore': 'mobile', 'codeUnderscore': 'mobile',
'codeUnderscorePlural': 'mobiles', 'codeUnderscorePlural': 'mobiles',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o54', 'id': 'o54',
'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A', 'objectId': '48B9C079-3CCA-4886-9543-3AE764998E9A',
'name': '邮箱', 'name': '邮箱',
'code': 'EMAIL', 'code': 'EMAIL',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(256CHAR)', 'dataType': 'VARCHAR2(256CHAR)',
'length': '256', 'length': '256',
'codeCamel': 'email', 'codeCamel': 'email',
'codeCamelPlural': 'emails', 'codeCamelPlural': 'emails',
'codeUnderscore': 'email', 'codeUnderscore': 'email',
'codeUnderscorePlural': 'emails', 'codeUnderscorePlural': 'emails',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o55', 'id': 'o55',
'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C', 'objectId': '533AB6E8-A3D0-473D-9DE6-0D0CABA6731C',
'name': '头像', 'name': '头像',
'code': 'AVATAR', 'code': 'AVATAR',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'VARCHAR2(1024CHAR)', 'dataType': 'VARCHAR2(1024CHAR)',
'length': '1024', 'length': '1024',
'codeCamel': 'avatar', 'codeCamel': 'avatar',
'codeCamelPlural': 'avatars', 'codeCamelPlural': 'avatars',
'codeUnderscore': 'avatar', 'codeUnderscore': 'avatar',
'codeUnderscorePlural': 'avatars', 'codeUnderscorePlural': 'avatars',
'type': 'string' 'type': 'string'
}, },
{ {
'id': 'o56', 'id': 'o56',
'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A', 'objectId': 'EF44AF1F-F6B9-412F-9FF7-AAECD6B5521A',
'name': '创建时间', 'name': '创建时间',
'code': 'CREATE_TIME', 'code': 'CREATE_TIME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'DATE', 'dataType': 'DATE',
'codeCamel': 'createTime', 'codeCamel': 'createTime',
'codeCamelPlural': 'createTimes', 'codeCamelPlural': 'createTimes',
'codeUnderscore': 'create_time', 'codeUnderscore': 'create_time',
'codeUnderscorePlural': 'create_times', 'codeUnderscorePlural': 'create_times',
'type': 'datetime' 'type': 'datetime'
}, },
{ {
'id': 'o57', 'id': 'o57',
'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC', 'objectId': 'CD1BC772-356B-4D14-A40E-28F115F95EEC',
'name': '更新时间', 'name': '更新时间',
'code': 'LAST_UPDATE_TIME', 'code': 'LAST_UPDATE_TIME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'DATE', 'dataType': 'DATE',
'codeCamel': 'lastUpdateTime', 'codeCamel': 'lastUpdateTime',
'codeCamelPlural': 'lastUpdateTimes', 'codeCamelPlural': 'lastUpdateTimes',
'codeUnderscore': 'last_update_time', 'codeUnderscore': 'last_update_time',
'codeUnderscorePlural': 'last_update_times', 'codeUnderscorePlural': 'last_update_times',
'type': 'datetime' 'type': 'datetime'
}, },
{ {
'id': 'o58', 'id': 'o58',
'objectId': '297D03AE-459D-4991-A459-3449FE893EEB', 'objectId': '297D03AE-459D-4991-A459-3449FE893EEB',
'name': '最后登录时间', 'name': '最后登录时间',
'code': 'LAST_LOGIN_TIME', 'code': 'LAST_LOGIN_TIME',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'DATE', 'dataType': 'DATE',
'codeCamel': 'lastLoginTime', 'codeCamel': 'lastLoginTime',
'codeCamelPlural': 'lastLoginTimes', 'codeCamelPlural': 'lastLoginTimes',
'codeUnderscore': 'last_login_time', 'codeUnderscore': 'last_login_time',
'codeUnderscorePlural': 'last_login_times', 'codeUnderscorePlural': 'last_login_times',
'type': 'datetime' 'type': 'datetime'
}, },
{ {
'id': 'o59', 'id': 'o59',
'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52', 'objectId': '6767F0FE-6C49-46F3-919E-D854C21FCA52',
'name': '安全级别', 'name': '安全级别',
'code': 'SECURITY_LEVEL', 'code': 'SECURITY_LEVEL',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'dataType': 'NUMBER(11,0)', 'dataType': 'NUMBER(11,0)',
'length': '11', 'length': '11',
'codeCamel': 'securityLevel', 'codeCamel': 'securityLevel',
'codeCamelPlural': 'securityLevels', 'codeCamelPlural': 'securityLevels',
'codeUnderscore': 'security_level', 'codeUnderscore': 'security_level',
'codeUnderscorePlural': 'security_levels', 'codeUnderscorePlural': 'security_levels',
'type': 'number' 'type': 'number'
}, },
{ {
'id': 'o60', 'id': 'o60',
'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171', 'objectId': 'C4BF570D-C8FC-4B72-919C-78DB3D790171',
'name': '类型', 'name': '类型',
'code': 'TYPE', 'code': 'TYPE',
'creationDate': '1498990741', 'creationDate': '1498990741',
'creator': 'hm20160509', 'creator': 'hm20160509',
'modificationDate': '1498995491', 'modificationDate': '1498995491',
'modifier': 'xjq', 'modifier': 'xjq',
'comment': '1:企业，2：代理商', 'comment': '1:企业，2：代理商',
'dataType': 'NUMBER(11,0)', 'dataType': 'NUMBER(11,0)',
'length': '11', 'length': '11',
'codeCamel': 'type', 'codeCamel': 'type',
'codeCamelPlural': 'types', 'codeCamelPlural': 'types',
'codeUnderscore': 'type', 'codeUnderscore': 'type',
'codeUnderscorePlural': 'types', 'codeUnderscorePlural': 'types',
'type': 'number' 'type': 'number'
} }
] ]
} }
}, },
showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email'] 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 }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
} }
}, },
created() { created() {
...@@ -425,4 +433,6 @@ ...@@ -425,4 +433,6 @@
} }
} }
</script> </script>
``` ```
\ No newline at end of file
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 9b999237
<template> <template>
<el-row type="flex" class="hm-form" style="margin-top: 50px"> <div class="app-container documentation-container">
<el-col :span="6"> <el-row type="flex" class="hm-form" style="margin-top: 50px">
<div></div> <el-col :span="6">
</el-col> <div></div>
<el-col :span="12"> </el-col>
<div> <el-col :span="12">
<!--表单部分--> <div>
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px" <!--表单部分-->
style="width:80%;margin:0 auto"> <el-form ref="form"
<el-form-item v-for="(column,index) in showUserColumns" :key="index" :label="column.name" :prop="column.codeCamel"> :model="formModel"
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password" :rules="rules"
v-model="formModel[column.codeCamel]"></el-input>--> label-width="110px"
<el-input v-if="column.codeCamel!=='securityLevel'" v-model="formModel[column.codeCamel]"></el-input> style="width:80%;margin:0 auto">
<!-- quill-editor --> <el-form-item v-for="column in showUserColumns"
<quill-editor v-if="column.codeCamel==='securityLevel'" class="editor-example bubble" :key="column.id"
ref="textEditor" :label="column.name"
v-model="formModel[column.codeCamel]" :prop="column.codeCamel">
:options="editorOption" <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
@blur="onEditorBlur($event)" v-model="formModel[column.codeCamel]"></el-input>-->
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)"> <!-- 1 普通input -->
</quill-editor> <el-input v-if="column.widgetType === 1" v-model="formModel[column.codeCamel]"></el-input>
</el-form-item> <!-- 2 日期选择 -->
<el-form-item> <el-date-picker v-else-if="column.widgetType === 6 || column.type === 'datetime' || column.type === 'date'"
<el-col :span="12"> v-model="formModel[column.codeCamel]"
<el-button type="primary" @click="onSubmit()">确定</el-button> type="datetime"
</el-col> align="right"
<el-col :span="12"> @change="logTimeChange"
<el-button @click="resetForm()">重置</el-button> value-format="yyyy-MM-dd HH:mm:ss"
</el-col> :picker-options="pickerOptions">
</el-form-item> </el-date-picker>
</el-form> <!-- 3 下拉框 -->
</div> <el-select v-else-if="column.widgetType === 2" v-model="formModel[column.codeCamel]" clearable>
</el-col> <el-option v-for="(item,key) in column.options"
<el-col :span="6"> :key="key"
<div></div> :label="item"
</el-col> :value="key">
</el-row> </el-option>
</el-select>
<!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4"
v-model="formModel[column.codeCamel]"
type="textarea"
:autosize="{ minRows: 2, maxRows: 5}"
:rows="2">
</el-input>
<!-- 5 复选框 -->
<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"
v-model="formModel[column.codeCamel]"
:options="editorOption"
@blur="onEditorBlur($event)"
@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">
<el-button v-if="btn === '确定' || btn === '提交' || btn === '保存' || btn === '发布'" type="primary" @click="onSubmit()">{{btn}}</el-button>
<el-button v-if="btn === '重置'" type="primary" @click="resetForm()">{{btn}}</el-button>
<el-button v-if="btn === '取消'" type="primary" @click="cancelFunction?cancelFunction():''">{{btn}}</el-button>
</el-col>
</el-form-item>
</el-form>
</div>
</el-col>
<el-col :span="6">
<div></div>
</el-col>
</el-row>
</div>
</template> </template>
<script> <script>
...@@ -54,24 +96,32 @@ ...@@ -54,24 +96,32 @@
// 集成其他组件 // 集成其他组件
extends: {}, extends: {},
// 使用其它组件 // 使用其它组件
components: {}, components: {
},
// 混入公共对象 // 混入公共对象
mixins: [], mixins: [],
/**
* 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必须传schema，以完成数据的交互
*/
props: { props: {
/**
* 必传，组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必传schema，以完成数据的交互
*/
schema: { schema: {
type: Object, type: Object,
required: true required: true
}, },
/** /**
* 指定要显示的字段。默认为根据schema得到的所有字段。 * 必传，指定要显示的表单字段及类型。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），对于复选框，如果只有一个备选项则不必传options
* 示例：[
* { 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 }
* ]
*/ */
columns: { columns: {
type: Array, type: Array,
required: false, required: true,
validator: function(value) { validator: function(value) {
if (typeof value !== 'object') { if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`) console.warn(`传入的columns不符合要求，必须是数组`)
...@@ -82,52 +132,99 @@ ...@@ -82,52 +132,99 @@
} }
}, },
/** /**
* 传入用户的id用来修改用户信息 * 非必传，指定要显示的按钮(确定、保存、取消、提交、重置)，默认不显示。
* 如果要传入了确定/取消的回调函数，请先传入对应的按钮
* 示例：['确定', '取消']
*/
buttons: {
type: Array,
required: false
},
/**
* 非必传，传入用户的id用来修改用户信息
*/ */
tableId: { tableId: {
type: String, type: String,
required: false required: false
},
/**
* 非必传，传入点击'确定'后的回调函数，该回调函数会在form组件onSubmit函数的成功回调中调用
* 如果要传入该函数，请先传入对应的按钮
*/
confirmFunction: {
type: Function,
required: false
},
/**
* 非必传，传入点击'取消'后的回调函数，该回调函数会在点击'取消'后直接调用
* 如果要传入该函数，请先传入对应的按钮
*/
cancelFunction: {
type: Function,
required: false
} }
}, },
data() { data() {
var validateUsername = (rule, value, callback) => {
// console.log(value.length)
if (!value) {
callback(new Error('请输入用户名'))
} else if ((value.length < 2 || value.length > 10)) {
callback(new Error('用户名长度在 2 到 10 个字符'))
} else {
callback()
}
}
var validatePassword = (rule, value, callback) => {
if (value.length > 0 && !(/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(value))) {
callback(new Error('密码必须同时包含数字和字母 6-20位'))
} else {
callback()
}
}
var validateMobile = (rule, value, callback) => {
if (value.length > 0 && !(/^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/.test(value))) {
callback(new Error('请输入正确的电话号码或手机号'))
} else {
callback()
}
}
// var validateEmail = (rule, value, callback) => {
// if (value.length > 0) {
// if (!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value))) {
// callback(new Error('请输入正确的邮箱'))
// } else {
// callback()
// }
// }
// }
return { return {
form: null, form: null,
formModel: {}, // 双向绑定的数据变量 formModel: {}, // 双向绑定的数据变量
showUserColumns: [], // 要显示的字段 showUserColumns: [], // 要显示的字段
// form: {
// name: '',
// gender: '男',
// age: '',
// password: '',
// website: '',
// img: '',
// date: '',
// education: '',
// color: '#ff0000',
// phone: '',
// email: '',
// address: ''
// },
rules: { rules: {
username: [ username: [
{ required: true, message: '请输入用户名', trigger: 'blur' }, { validator: validateUsername, trigger: 'change' }
{ min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' } // { required: true, message: '请输入用户名', trigger: 'blur' },
// { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
], ],
loginid: [ loginid: [
{ required: true, message: '请输入登陆ID', trigger: 'blur' } // { required: true, message: '请输入登陆ID', trigger: 'blur' }
], ],
password: [ password: [
{ required: true, message: '请输入密码', trigger: 'blur' } { validator: validatePassword, trigger: 'change' }
// { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' } // { pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/, message: '密码必须同时包含数字和字母 6-20位', trigger: 'change' }
], ],
mobile: [ mobile: [
{ pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码或手机号', trigger: 'blur&change' } { validator: validateMobile, trigger: 'change' }
// { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码', trigger: 'change' }
], ],
email: [ email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur&change' } // { validator: validateEmail, trigger: 'change' }
{ type: 'email', message: '请输入正确的邮箱', trigger: 'change' }
] ]
}, },
editorOption: { editorOption: { // 富文本选项配置
placeholder: '', placeholder: '',
modules: { modules: {
toolbar: [ toolbar: [
...@@ -137,15 +234,50 @@ ...@@ -137,15 +234,50 @@
['image'] ['image']
] ]
} }
},
pickerOptions: { // 日期选项配置
disabledDate(time) {
return time.getTime() > Date.now()
},
shortcuts: [{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date())
}
}, {
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
}
}, {
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}]
} }
} }
}, },
created() { created() {
// this.validate() // this.validate()
this.init() this.init()
// console.log(this.schema) console.log(this.buttons)
}, },
methods: { methods: {
// 判断是否一个对象的所有属性都为空
isEmpty(obj) {
_.forEach(obj, function(val) {
if (val) return false
})
return true
},
logTimeChange(value) {
console.log(value)
},
validate() { validate() {
const self = this const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列 // this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
...@@ -167,64 +299,71 @@ ...@@ -167,64 +299,71 @@
}) })
}, },
onEditorBlur(editor) { onEditorBlur(editor) {
console.log('editor blur!') // console.log('editor blur!')
}, },
onEditorFocus(editor) { onEditorFocus(editor) {
console.log('editor focus!') // console.log('editor focus!')
}, },
onEditorReady(editor) { onEditorReady(editor) {
console.log('editor ready!') // console.log('editor ready!')
}, },
init() { init() {
const self = this const self = this
// 如果没有传columns，则全部显示 // 如果没有传columns，则全部显示
if (!self.columns || !self.columns.length) { // if (!self.columns || !self.columns.length) {
_.each(self.schema['columns'], function(column) { // _.each(self.schema['columns'], function(column) {
const tmp = JSON.parse(JSON.stringify(column)) // const tmp = JSON.parse(JSON.stringify(column))
self.$set(tmp, 'code', tmp.code.toLowerCase()) // self.$set(tmp, 'code', tmp.code.toLowerCase())
self.showUserColumns.push(tmp) // self.showUserColumns.push(tmp)
}) // })
// console.log(self.showUserColumns) // } else
} else { // columns，则只显示传入的字段 if (self.columns && self.columns.length) {
self.showUserColumns = JSON.parse(JSON.stringify(self.columns)) self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
// console.log('1111111') // console.log(self.showUserColumns)
console.log(self.showUserColumns)
// 将字符串对象进行替换处理 // 将字符串对象进行替换处理
_.each(self.showUserColumns, function(column, index) { _.each(self.showUserColumns, function(column, index) {
if (typeof column === 'string') { if (typeof column === 'object') {
// 生成一个新对象 // 生成一个新对象
// const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()] const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column.name]
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column] // console.log(tmp)
self.$set(tmp, 'code', tmp.code.toLowerCase()) self.$set(tmp, 'code', tmp.code.toLowerCase())
self.$set(self.showUserColumns, index, tmp) self.$set(tmp, 'widgetType', column.widgetType || 1)
column.options && self.$set(tmp, 'options', column.options)
self.$set(self.showUserColumns, index, tmp) // 顺序
// console.log(self.showUserColumns)
} }
}) })
// console.log('2222222') // 提取v-model绑定的变量
console.log(self.showUserColumns) _.each(self.showUserColumns, function(item) {
} if (item.widgetType === 3 && item.options && item.options.length > 0) {
// 提取v-model绑定的变量 self.$set(self.formModel, item.codeCamel, [])
_.each(self.showUserColumns, function(item) { } else {
self.formModel[item.codeCamel] = '' self.$set(self.formModel, item.codeCamel, '')
}) }
console.log(self.formModel) })
if (!request.defaults.baseURL) { console.log(self.formModel)
request.defaults.baseURL = '/org/api' if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
} else {
console.log('columns为必传字段!!')
} }
console.log(request.defaults)
}, },
// 提交 // 提交
/** /**
* 确定提交函数。 * 确定提交函数。
* *
* 所有选项输入正并验证通过，正确提交 * 所有选项输入并验证通过，正确提交
* 验证失败，禁止提交并给出提示 * 验证失败，禁止提交并给出提示
*/ */
onSubmit() { onSubmit() {
const self = this const self = this
console.log('点击了提交函数')
console.log(self.formModel) console.log(self.formModel)
// if (self.isEmpty(self.formModel)) return
self.$refs.form.validate((valid) => { self.$refs.form.validate((valid) => {
if (valid) { if (valid) {
console.log('提交成功!') console.log('valid通过!')
// 存在tableId 则修改信息 // 存在tableId 则修改信息
if (self.tableId) { if (self.tableId) {
request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', { request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', {
...@@ -246,6 +385,7 @@ ...@@ -246,6 +385,7 @@
}).then(resp => { }).then(resp => {
console.log('修改成功') console.log('修改成功')
self.resetForm() self.resetForm()
self.confirmFunction && self.confirmFunction()
}) })
} else { // 不存在tableId 则创建一条数据 } else { // 不存在tableId 则创建一条数据
request(self.schema.modelUnderscorePlural + '/new', { request(self.schema.modelUnderscorePlural + '/new', {
...@@ -263,6 +403,7 @@ ...@@ -263,6 +403,7 @@
}).then(resp => { }).then(resp => {
console.log('创建成功') console.log('创建成功')
self.resetForm() self.resetForm()
self.confirmFunction && self.confirmFunction()
}) })
} }
} else { } else {
...@@ -282,7 +423,7 @@ ...@@ -282,7 +423,7 @@
* 清空所有输入及提示信息。 * 清空所有输入及提示信息。
*/ */
resetForm() { resetForm() {
console.log('chongzhi') console.log('重置')
this.$refs.form.resetFields() this.$refs.form.resetFields()
} }
} }
......
src/views/haomo/components/forms/index.vue
View file @ 9b999237
<template> <template>
<div> <div>
<hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :tableId="tableId"> <hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:buttons="showUserButtons"
:confirmFunction="confirm"
:cancelFunction="cancel"
:tableId="tableId">
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -10,7 +15,7 @@ ...@@ -10,7 +15,7 @@
import schema from '../../schemas/hm_org_schema' import schema from '../../schemas/hm_org_schema'
export default { export default {
name: 'HmComplexForm', name: 'HmComplexFormIndex',
// 继承其他组件 // 继承其他组件
extends: {}, extends: {},
// 使用其它组件 // 使用其它组件
...@@ -19,8 +24,11 @@ ...@@ -19,8 +24,11 @@
}, },
data() { data() {
return { return {
showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'securityLevel'] // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
// showUserColumns: [] 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: []
} }
}, },
computed: { computed: {
...@@ -29,9 +37,17 @@ ...@@ -29,9 +37,17 @@
}, },
created() { created() {
this.schema = schema this.schema = schema
// console.log(this.schema)
this.tableId = '0e26566e953449a7a7500c34be39fd26' this.tableId = '0e26566e953449a7a7500c34be39fd26'
}, },
methods: {} methods: {
confirm() {
console.log('确定')
},
cancel() {
console.log('取消')
}
}
} }
</script> </script>
<style scoped> <style scoped>
......
src/views/haomo/components/iconMenu/HmIconMenu.vue 0 → 100644
View file @ 9b999237
<template>
<div class="app-container documentation-container">
<el-collapse v-model="activeNames" @change="handleChange">
<el-collapse-item title="" name="1" style="width: 90%;margin:0 auto">
<el-row :gutter="20">
<el-col :span="4" v-for="(item,key) in icons" :key="key" style="margin-bottom: 20px;">
<i :class="item.className" style="margin-left: 5px;"></i>
<p>
<i class="hm-icon-menu_i" :style="{backgroundColor: item.color}"></i>
<span>{{item.text}}</span>
</p>
</el-col>
</el-row>
</el-collapse-item>
</el-collapse>
</div>
</template>
<script>
import _ from 'lodash'
import request from '@/utils/request'
/**
* 毫末科技的组件.
*
* demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/forms
* @author 王康
*/
export default {
name: 'HmIconMenu',
// 集成其他组件
extends: {},
// 使用其它组件
components: {
},
// 混入公共对象
mixins: [],
props: {
/**
* 必传，组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必传schema，以完成数据的交互
*/
schema: {
type: Object,
required: false
},
/**
* 必传，指定要显示的表单字段及类型。数组的每个元素须有name和widgetType两个字段，name表示要显示的表单字段，widgetType表示该字段要显示的表单类型(普通输入框、文本域、富文本、下拉框...)，取值1-7(1表示普通输入框,2表示下拉框,3表示复选框,4表示文本域,5表示富文本,6表示日期格式，7表示单选框)，若表单类型为下拉框/复选框/单选框，还需传入options字段，值为数组(数组元素是下拉框/复选框/单选框的选项），对于复选框，如果只有一个备选项则不必传options
* 示例：[
* { 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 }
* ]
*/
columns: {
type: Array,
required: false,
validator: function(value) {
if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`)
return false
}
return true
}
}
},
data() {
return {
activeNames: '1',
icons: [
{ className: 'icon-公文审批', text: '公文审批', color: '#f7b55d' },
{ className: 'icon-微平台', text: '微平台', color: '#4ea8ec' },
{ className: 'icon-综合OA', text: '综合OA', color: '#f7b55d' },
{ className: 'icon-议题征集', text: '议题征集', color: '#00bf8b' },
{ className: 'icon-通讯录导出', text: '通讯录导出', color: '#f7b55d' },
{ className: 'icon-检察课堂', text: '检察课堂', color: '#4ea8ec' },
{ className: 'icon-检察官网', text: '检察官网', color: '#4ea8ec' },
{ className: 'icon-总值电话', text: '总值电话', color: '#00bf8b' },
{ className: 'icon-数据统计', text: '数据统计', color: '#f7b55d' },
{ className: 'icon-内部公告', text: '内部公告', color: '#00bf8b' },
{ className: 'icon-应用下载', text: '应用下载', color: '#4ea8ec' }
]
}
},
created() {
// this.init()
},
methods: {
handleChange(val) {
console.log(val)
},
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
if (self.columns && self.columns.length) {
self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
// 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)
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为必传字段!!')
}
}
}
}
</script>
<style scoped>
@import './iconfont.css';
.hm-icon-menu_i{
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
margin-right: 5px;
}
</style>
src/views/haomo/components/iconMenu/fonts/icomoon.svg 0 → 100755
View file @ 9b999237
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg">
<metadata>Generated by IcoMoon</metadata>
<defs>
<font id="icomoon" horiz-adv-x="1024">
<font-face units-per-em="1024" ascent="960" descent="-64" />
<missing-glyph horiz-adv-x="1024" />
<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
<glyph unicode="&#xe900;" glyph-name="公文审批" horiz-adv-x="1129" d="M0 729.6v-574.676c0-120.427 95.262-218.924 211.692-218.924h705.641c116.431 0 211.692 98.498 211.692 218.924v574.676h-1129.026zM1129.026 806.4c-42.307 89.818-144.241 153.6-262.657 153.6h-141.837c-118.416 0-220.35-63.782-262.657-153.6h667.152z" />
<glyph unicode="&#xe901;" glyph-name="检察官网" horiz-adv-x="999" d="M958.228-64h-917.739c-22.363 0-40.488 20.374-40.488 45.511s18.125 45.511 40.488 45.511h917.739c22.363 0 40.488-20.374 40.488-45.511s-18.125-45.511-40.488-45.511zM907.924 391.111v411.954c0 86.314-70.861 156.935-157.468 156.935h-524.893c-86.607 0-157.468-70.621-157.468-156.935v-411.954h839.829zM68.094 300.089c24.173-66.537 82.358-113.778 149.977-113.778h539.875c67.619 0 125.818 47.241 149.977 113.778h-839.829z" />
<glyph unicode="&#xe902;" glyph-name="检察课堂" horiz-adv-x="932" d="M141.943 830.765c-2.298 14.629 7.237 28.428 21.305 30.818 14.052 2.406 27.323-7.509 29.636-22.138 0.453-2.877 0.453-5.803 0-8.68v-545.369c-2.313-14.612-15.584-24.543-29.636-22.138-10.942 1.853-19.507 10.776-21.305 22.138v545.369zM905.961 857.064c-14.208-0.098-25.713-12.044-25.791-26.819v-819.736c0-11.703-9.128-21.195-20.383-21.195l-736.007 5.835c-39.155-0.016-71.292 32.215-72.668 72.915v7.412c1.985 40.521 34.153 72.346 73.183 72.379h678.095c11.27 0 20.383 9.492 20.383 21.195v769.755c0 11.703-9.113 21.195-20.383 21.195h-678.095c-68.65 0-124.296-57.848-124.296-129.235v-758.995c0.234-68.299 51.269-124.782 116.825-129.219h4.064l790.684-6.55c11.254 0 20.383 9.492 20.383 21.195v873.57c-0.203 14.726-11.817 26.51-25.978 26.299h-0.016zM131.252 92.786c-11.254 0-20.367-9.492-20.367-21.195v-10.061c0-11.703 9.113-21.179 20.367-21.179l670.983-2.649c11.239 0.195 20.226 9.817 20.039 21.52 0 0.114 0 0.244-0.016 0.374v12.711c0 11.703-9.113 21.195-20.367 21.195l-670.639-0.715z" />
<glyph unicode="&#xe903;" glyph-name="内部公告" horiz-adv-x="1182" d="M1066.508 763.946c-13.619 14.988-37.18 16.429-52.637 3.237-1.186-1.004-2.306-2.088-3.342-3.237-15.992-15.879-15.992-41.242 0-57.121 55.979-57.153 91.922-138.714 91.922-232.594 0-93.831-35.943-171.346-91.922-232.545-15.992-15.879-15.992-41.226 0-57.121 13.619-14.988 37.18-16.429 52.654-3.237 1.17 1.004 2.289 2.088 3.325 3.237 72.004 73.388 115.968 175.457 115.968 289.617 0 114.257-43.964 216.246-115.968 289.714v0.049zM0 621.458v-344.907c0-73.299 54.074-129.406 124.839-129.406h124.7v603.685h-124.7c-70.765 0-124.839-56.090-124.839-129.304v-0.068zM640.711 944.897l-307.837-194.067v-603.685l307.837-194.033c58.246-38.796 108.147-8.638 108.147 60.367v866.757c0 73.282-49.901 99.163-108.147 64.66zM923.615 630.148c-14.17 15.823-38.703 17.345-54.786 3.404-1.234-1.043-2.382-2.207-3.46-3.404-16.657-16.815-16.657-43.586 0-60.384 29.106-30.158 49.97-73.299 49.97-120.768 0-47.418-16.692-90.542-49.97-120.699-16.657-16.798-16.657-43.586 0-60.384 14.153-15.823 38.686-17.363 54.769-3.404 1.234 1.061 2.382 2.207 3.477 3.404 45.78 47.418 74.921 112.078 74.921 181.083s-29.141 138.011-74.921 181.152z" />
<glyph unicode="&#xe904;" glyph-name="数据统计" horiz-adv-x="905" d="M122.356 57.905c-53.84 0-97.884 43.72-97.884 97.136v415.252c0 53.416 44.044 97.136 97.884 97.136s97.884-43.72 97.884-97.136v-415.252c0-53.416-44.044-97.136-97.884-97.136zM440.48 106.667c-53.84 0-97.884 44.392-97.884 98.63v534.156c0 54.25 44.044 98.643 97.884 98.643s97.884-44.392 97.884-98.643v-534.156c0-54.237-44.044-98.63-97.884-98.63zM819.777 204.19c-47.107 0-85.643 42.595-85.643 94.65v566.51c0 52.054 38.536 94.65 85.643 94.65s85.655-42.595 85.655-94.65v-566.51c0-52.054-38.547-94.65-85.655-94.65zM868.725-64h-832.018c-20.274 0-36.707 21.829-36.707 48.762s16.432 48.762 36.707 48.762h832.018c20.274 0 36.707-21.829 36.707-48.762s-16.432-48.762-36.707-48.762z" />
<glyph unicode="&#xe905;" glyph-name="通讯录导出" horiz-adv-x="1257" d="M936.356 163.13l-225.615 88.076c0 0-43.008 16.718-59.726 33.176-10.729 10.58-9.967 35.542-0.457 67.42s125.152 161.435 125.152 279.099c0 181.756-119.254 329.099-266.368 329.099s-266.368-147.344-266.368-329.099c0-112.718 103.039-247.084 115.78-271.511 12.726-24.412 9.617-61.634-0.427-72.901-15.073-16.947-70.211-33.939-70.211-33.939l-203.38-90.794c-47.519-17.099-84.735-61.985-84.735-112.641v-24.015c0-55.267 44.806-89.099 99.884-89.099h821.323c55.078 0 99.884 33.832 99.884 89.099v24.015c0 50.656-37.216 96.916-84.735 114.015zM925.117 618.667c-19.283 0-34.936 16.871-34.936 52.534 0 35.62 15.652 52.491 34.936 52.491h245.45c19.271 0 33.796-16.871 33.796-52.491 0-35.663-16.767-52.534-36.037-52.534h-243.209zM984.521 408.615c-23.169 0-41.975 16.871-41.975 52.513s18.806 52.513 41.975 52.513h232.925c23.169 0 39.282-16.871 39.282-52.513s-17.452-52.513-40.621-52.513h-231.586zM1062.524 146.051c-22.87 0-41.434 16.871-41.434 52.534 0 35.641 18.563 52.491 41.434 52.491h154.136c22.87 0 40.067-16.871 40.067-52.491 0-35.663-18.534-52.534-41.389-52.534h-152.814z" />
<glyph unicode="&#xe906;" glyph-name="微平台" horiz-adv-x="1084" d="M529.232 960c31.992 0 53.909-12.308 75.942-24.631 22.033-12.308 402.352-224.329 416.92-232.826 14.568-8.376 32.934-17.114 36.485-46.671 2.609-22.281-10.785-41.006-22.28-48.147-14.090-8.617-462.987-279.496-477.091-287.375-9.712-5.408-17.656-9.717-29.861-9.717-10.77 0-20.961 4.414-27.484 8.361-8.175 5.047-462.059 278.396-474.25 285.537-12.205 7.141-27.73 21.181-27.614 49.006 0 22.657 14.336 36.818 32.354 46.912 13.495 7.517 404.715 226.423 425.081 237.27 20.265 10.952 39.457 22.281 71.796 22.281zM70.294 504.864c-11.134 6.11-13.972 8.65-33.258 0-8.398-3.683-37.037-14.873-37.037-52.126 0-27.107 23.427-38.523 32.070-43.49 8.644-4.84 429.917-242.765 450.043-254.068 20.227-11.416 30.999-19.374 45.318-19.374s35.849 11.303 48.156 18.217c12.191 6.914 429.7 242.427 446.495 252.107 16.81 9.694 35.154 18.584 36.689 46.27 1.535 27.672-9.947 37.705-28.291 48.076-18.33 10.386-28.871 7.959-49.821-1.609-42.119-19.261-291.703-178.179-337.499-201.011-91.824-45.804-100.338-45.804-113.238-45.804-11.366 0-27.929 2.427-107.215 43.024-45.087 22.944-342.596 204.369-352.412 209.788zM48.651 309.717c-11.364-2.777-21.885-9.38-29.387-14.254-12.829-8.091-18.866-24.315-19.236-38.328-0.843-25.236 18.023-38.328 30.601-45.271s447.481-248.19 464.661-257.684c17.18-9.493 28.662-18.179 45.842-18.179 17.165 0 30.837 8.913 47.395 18.179 16.573 9.267 438.055 242.849 456.315 253.277s38.695 24.201 38.695 48.516c0 24.329-7.251 44.591-38.695 50.967-6.644 1.374-19.473-3.712-28.899-8.7-15.123-7.864-401.773-213.305-416.644-220.943-18.748-9.749-52.737-29.203-57.443-29.203-4.602 0-38.709 19.242-50.68 26.185-16.203 9.38-395.839 225.704-403.090 229.77-7.265 4.052-27.7 8.558-39.434 5.668z" />
<glyph unicode="&#xe907;" glyph-name="议题征集" horiz-adv-x="885" d="M711.797 503.409c0 60.426-20.146 116.294-54.532 161.274-29.879 39.351-70.863 70.271-118.119 88.189l0.353 1.4-20.146 5.986c-15.639 4.558-31.956 7.716-48.301 9.474l-2.43 0.343c-7.982 0.714-16.318 1.414-25.345 1.414h-1.398c-8.688 0-17.024-0.7-25.359-1.414l-2.43-0.343c-16.331-1.757-32.662-4.915-48.288-9.474l-19.454-5.643 0.339-1.4c-47.595-18.261-88.579-49.181-118.798-88.532-34.047-44.98-54.546-100.848-54.546-161.274 0-43.566 7.643-79.058 19.454-108.578 17.716-44.266 44.473-74.129 66.356-96.962 10.765-11.245 20.485-21.076 26.743-29.163 6.598-8.43 9.734-14.76 10.765-19.689 4.874-24.934 5.213-56.197 5.213-63.941v-2.458c0-35.836 29.187-64.655 65.311-64.655h50.718v252.978l-72.954 73.443c-9.028 8.774-9.028 23.547 0 32.321 9.041 8.787 23.282 8.787 31.97 0l63.573-63.941 63.573 63.941c9.028 8.787 23.268 8.787 31.956 0 9.028-8.774 9.028-23.547 0-32.321l-72.954-73.443v-252.607h54.885c36.138 0 65.311 29.149 65.311 64.642v2.101c0 7.744 0.353 39.351 5.213 63.941 0.692 3.529 2.091 7.387 5.213 12.316 5.213 8.43 14.933 18.975 27.096 31.264 18.069 18.975 40.984 42.866 59.406 76.587 18.408 33.392 31.603 77.301 31.603 134.226zM855.276 547.085h-104.91c1.738-14.639 2.783-29.278 2.783-44.284 0-6.014 0-12.013-0.353-18.027h102.48c16.331 0 29.54 13.891 29.54 31.156-0.353 17.279-13.209 31.156-29.54 31.156zM517.615 71.125h-150.076c-15.639 0-28.142-13.143-28.142-30.026 0-16.517 12.503-29.645 28.142-29.645h150.076c15.625 0 28.128 13.495 28.128 29.645 0 16.883-12.842 30.026-28.128 30.026zM696.172 291.092c-12.164-18.761-24.666-34.529-36.816-49.183l53.84-57.045c11.458-12.013 30.219-12.013 41.69 0 11.458 12.395 11.458 31.918 0 44.284l-58.713 61.945zM680.886 724.264l74.339 78.828c11.471 12.013 11.471 31.904 0 44.299-11.458 12.38-30.219 12.38-41.69 0l-73.293-77.713c14.594-13.876 28.142-28.897 40.645-45.413zM442.571 824.479h0.706c9.72 0 19.101-0.733 28.481-1.496v105.862c0 17.25-13.195 31.156-29.54 31.156-16.318 0-29.513-13.906-29.513-31.156v-105.862c9.381 1.129 19.101 1.496 28.481 1.496h1.385zM517.615-4.329h-150.076c-15.639 0-28.142-13.51-28.142-29.645 0-16.517 12.503-30.026 28.142-30.026h150.076c15.625 0 28.128 13.51 28.128 30.026s-12.842 29.645-28.128 29.645zM204.269 724.264c12.15 16.517 25.698 31.537 40.645 45.413l-73.307 77.713c-11.458 12.38-30.219 12.38-41.69 0-11.458-12.028-11.458-31.918 0-44.299l74.352-78.828zM129.577 228.781c-11.471-12.38-11.471-31.904 0-44.299 11.458-11.999 30.219-11.999 41.676 0l53.853 57.060c-12.164 14.639-25.006 30.789-36.83 49.183l-58.7-61.945zM131.654 502.801c0 15.006 1.045 30.026 2.783 44.284h-104.91c-16.331 0-29.526-13.876-29.526-31.156 0-17.265 13.195-31.156 29.526-31.156h102.48c-0.353 6.014-0.353 12.013-0.353 18.027z" />
<glyph unicode="&#xe908;" glyph-name="应用下载" horiz-adv-x="1501" d="M934.449 278.916l-142.090-144.703c-11.463-11.674-26.622-17.714-41.799-17.714s-30.335 5.847-41.818 17.714l-142.071 144.703c-23.135 23.542-23.135 61.787 0 85.155 23.116 23.368 60.671 23.561 83.617 0l41.060-41.835v336.876c0 33.363 26.47 60.282 59.212 60.282s59.193-26.918 59.193-60.282v-336.876l41.079 41.835c23.116 23.561 60.69 23.561 83.617 0 22.946-23.561 23.135-61.613 0-85.155zM1173.835 602.574c-7.75 0-15.158-1.659-22.737-2.238-48.487 206.104-229.42 359.665-446.789 359.665-202.211 0-372.23-133.589-434.018-318.216-1.118-1.891-2.406-3.589-3.505-5.654-155.031-37.859-266.785-178.414-266.785-344.401 0-196.148 156.698-355.728 349.284-355.728h824.552c180.762 0 327.096 149.238 327.096 333.113 0.189 184.261-146.334 333.46-327.096 333.46z" />
<glyph unicode="&#xe909;" glyph-name="综合OA" horiz-adv-x="1117" d="M554.24 960h-23.552l-431.413-81.36c-49.004-14.38-99.274-57.267-99.274-121.725v-610.010c0-51.213 44.825-106.083 99.781-121.725l431.413-89.181h23.046c60.527 0 105.859 45.158 105.859 105.453v812.464c-7.851 60.925-53.183 106.083-105.859 106.083zM202.348 285.785c-34.695-1.261-67.745 14.884-87.878 43.14-19.88 28.003-30.010 61.682-28.744 95.866-1.266 34.31 8.737 67.989 28.744 95.992 20.26 28.003 53.183 44.023 87.878 42.635 34.569 1.261 67.618-14.758 87.878-42.635v0.126c19.88-28.003 30.010-61.682 28.744-95.992 1.266-34.31-8.737-67.989-28.744-95.992-20.133-28.255-53.183-44.401-87.878-43.14zM526.383 288.938l-30.39 74.675h-117.002l-30.39-74.675h-42.42l111.684 272.209h37.734l53.309-128.284 59.894-143.925h-42.42zM368.088 391.803h86.813l-43.855 106.813-42.958-106.813zM251.165 481.372c-11.348 19.063-31.938 30.43-53.931 29.601-21.994 0.829-42.583-10.538-53.931-29.601-11.465-19.418-17.197-41.678-16.261-64.293-0.819-22.615 5.030-44.875 16.729-64.175 10.88-19.418 31.353-31.14 53.346-30.43v-0.474c21.877-0.71 42.35 10.893 53.346 30.075 11.582 19.655 17.314 42.152 16.378 65.004 1.17 22.615-4.329 44.875-15.676 64.293zM960.391 857.6h-289.291v-175.469h280.7c20.261 0 32.443-12.459 32.443-32.835 0-20.506-12.31-32.835-32.443-32.835h-280.7v-135.235h280.7c20.261 0 32.443-12.459 32.443-32.835 0-20.506-12.31-32.835-32.443-32.835h-280.7v-135.235h280.7c20.261 0 32.443-12.459 32.443-32.835s-12.31-32.835-32.443-32.835h-280.7v-176.247h297.755c81.556 0 148.236 66.969 148.236 150.031v518.489c-7.181 73.198-64.885 150.68-156.699 150.68z" />
<glyph unicode="&#xe90a;" glyph-name="总值电话" horiz-adv-x="1223" d="M397.442 433.347c0 108.612 96.15 196.632 214.761 196.632 118.629 0 214.779-88.021 214.779-196.632 0-108.547-96.15-196.584-214.779-196.584-118.611 0-214.761 88.037-214.761 196.584zM577.268 959.636l34.463 0.364 34.76-0.364c11.036-0.219 22.74-0.637 34.63-1.165 59.581-2.549 133.839-7.211 205.496-18.445 70.858-11.089 139.784-28.66 190.187-56.956 45.257-25.382 83.343-59.487 109.185-100.71 23.725-37.873 37.491-82.284 37.491-132.247 0-27.695-4.18-54.57-11.742-79.716h-0.056c-7.97-26.275-19.805-50.947-34.649-73.234v-0.055c-6.688-10.015-15.569-17.753-25.694-22.542-10.125-4.807-21.848-6.883-34.036-5.808l-0.056 0.091c-12.373 1.056-23.483 5.153-32.475 11.544-9.029 6.519-16.405 15.623-21.179 26.748-40.036 92.881-96.199 174.345-170.141 230.445-66.121 50.128-146.305 80.135-241.668 80.135h-80.091c-95.363 0-175.529-30.007-241.668-80.135-73.942-56.1-130.105-137.564-170.141-230.445-4.775-11.125-12.15-20.284-21.179-26.748-8.992-6.391-20.139-10.524-32.456-11.544l-0.056-0.091c-12.187-1.056-23.948 1.056-34.054 5.808-10.107 4.789-19.006 12.527-25.694 22.542v0.055c-14.844 22.287-26.679 46.941-34.63 73.234h-0.056c-7.58 25.146-11.76 52.021-11.76 79.716 0 49.964 13.767 94.374 37.491 132.247 25.861 41.224 63.873 75.273 109.185 100.71 50.459 28.296 119.329 45.867 190.187 56.956 71.675 11.235 145.896 15.896 205.514 18.445l34.89 1.165zM615.035 722.432h-39.071c-103.27 0-186.306-38.803-251.139-100.965-77.090-73.937-129.159-181.233-159.31-296.46-24.838-94.86-42.243-194.573-17.804-268.979 23.315-71.032 87.496-120.028 225.884-120.028h482.916c138.406 0 202.55 48.995 225.866 120.028 24.439 74.406 7.035 174.119-17.786 268.979-30.169 115.227-82.22 222.523-159.328 296.46-64.834 62.162-147.87 100.965-251.139 100.965h-39.089z" />
</font></defs></svg>
\ No newline at end of file
src/views/haomo/components/iconMenu/iconfont.css 0 → 100755
View file @ 9b999237
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?ftr1fl');
src: url('fonts/icomoon.eot?ftr1fl#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?ftr1fl') format('truetype'),
url('fonts/icomoon.woff?ftr1fl') format('woff'),
url('fonts/icomoon.svg?ftr1fl#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
/* use !important to prevent issues with browser extensions that change fonts */
font-family: 'icomoon' !important;
speak: none;
font-size: 48px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-公文审批:before {
content: "\e900";
color: #f7b55d;
}
.icon-检察官网:before {
content: "\e901";
color: #4ea8ec;
}
.icon-检察课堂:before {
content: "\e902";
color: #4ea8ec;
}
.icon-内部公告:before {
content: "\e903";
color: #00bf8b;
}
.icon-数据统计:before {
content: "\e904";
color: #f7b55d;
}
.icon-通讯录导出:before {
content: "\e905";
color: #f7b55d;
}
.icon-微平台:before {
content: "\e906";
color: #4ea8ec;
}
.icon-议题征集:before {
content: "\e907";
color: #00bf8b;
}
.icon-应用下载:before {
content: "\e908";
color: #4ea8ec;
}
.icon-综合OA:before {
content: "\e909";
color: #f7b55d;
}
.icon-总值电话:before {
content: "\e90a";
color: #00bf8b;
}
src/views/haomo/components/iconMenu/index.vue 0 → 100644
View file @ 9b999237
<template>
<div class="app-container calendar-list-container">
<hm-icon-menu>
</hm-icon-menu>
</div>
</template>
<script>
import HmIconMenu from './HmIconMenu.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmIconMenuIndex',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-icon-menu': HmIconMenu
},
data() {
return {
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: []
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
// console.log(this.schema)
this.tableId = '0e26566e953449a7a7500c34be39fd26'
},
methods: {
confirm() {
console.log('确定')
},
cancel() {
console.log('取消')
}
}
}
</script>
<style scoped>
</style>
src/views/haomo/components/panel/HmPanel.vue
View file @ 9b999237
...@@ -14,6 +14,12 @@ ...@@ -14,6 +14,12 @@
</template> </template>
<script> <script>
/**
* 毫末科技的面板组件.
*
* demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/panel
* @author 高天阳 gty@haomo-studio.com
*/
export default { export default {
name: 'HmPanel', name: 'HmPanel',
// 继承其他组件 // 继承其他组件
......
src/views/haomo/components/tables/HmComplexTable.md
View file @ 9b999237
...@@ -85,7 +85,8 @@ ...@@ -85,7 +85,8 @@
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<hm-complex-table :schema="schema['HmUser']" <hm-complex-table :schema="schema['HmUser']"
:columns="showUserColumns" :columns="showUserColumns"
:filters="userFilters"></hm-complex-table> :filters="userFilters"
:options="userOptions"></hm-complex-table>
</div> </div>
</template> </template>
...@@ -292,15 +293,52 @@ ...@@ -292,15 +293,52 @@
] ]
} }
}, },
showUserColumns: ['mobile', 'loginid'], showUserColumns: ['mobile', 'loginid', 'username', 'email'],
userFilters: [ userFilters: [
{ placeholder: '过滤手机号', 'mobile': { 'like': '' }}, { placeholder: '过滤手机号', 'mobile': { 'like': '' }},
{ placeholder: '过滤登录Id', 'loginid': { 'like': '3001' }} { placeholder: '过滤用户名', 'username': { 'equalTo': '' }}
] ]
} }
}, },
created() { created() {
this.schema = schema this.schema = schema
this.userOptions = {
changeValue: {
username: { 1: '是', 0: '否' }
},
newData: {
isShow: true,
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'loginid', widgetType: 1 }, { name: 'type', widgetType: 1 }],
formSchema: schema['HmUser'],
showUserButtons: ['提交', '取消'],
formConfirm() {
console.log('提交')
},
formCancel() {
console.log('取消')
}
},
editData: {
isShow: true,
showUserColumns: [{ name: 'username', widgetType: 1 }],
formSchema: schema['HmUser'],
showUserButtons: ['提交', '取消'],
formConfirm() {
console.log('提交')
},
formCancel() {
console.log('取消')
}
},
showRefresh: true,
showExport: true,
showDeleteButton: true,
buttonGroup: false,
showDetail: {
isShow: true,
showColumns: ['mobile', 'loginid', 'username', 'email']
}
}
} }
} }
</script> </script>
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 9b999237
...@@ -13,17 +13,41 @@ ...@@ -13,17 +13,41 @@
</span> </span>
<!-- end 过滤条件 --> <!-- end 过滤条件 -->
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button> <el-button-group v-if="buttonGroup">
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" @click="handleDownload">导出</el-button> <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</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-group>
<span v-if="!buttonGroup">
<el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" type="primary" :loading="downloadLoading" v-waves icon="el-icon-download" v-if="isShowExport" @click="handleDownload">导出</el-button>
<el-button class="filter-item" type="primary" v-waves icon="el-icon-plus" v-if="isShowNewButton" @click="openDialog('newData')">新建</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>
</span>
</div> </div>
<!-- end 过滤 --> <!-- end 过滤 -->
<!-- 表格 --> <!-- 表格 -->
<el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row <el-table :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row
style="width: 100%"> style="width: 100%" @selection-change="handleSelectionChange">
<el-table-column type="index" :index="indexMethod" label="序号" width="50px"></el-table-column>
<el-table-column type="selection" width="55">
</el-table-column>
<el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name"> <el-table-column v-for="(column,index) in showColumns" :key="index" align="center" :label="column.name">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row[column.code] }}</span> <span>{{ scope.row[column.codeCamel] }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" :width="operationWidth" v-if="isShowEditDataButton || isShowDeleteButton">
<template slot-scope="scope">
<el-button @click="openDialog('editData',scope.row)" v-if="isShowEditDataButton" type="text" size="small">编辑</el-button>
<el-button @click="deleteData(scope.row)" type="text" v-if="isShowDeleteButton" size="small">删除</el-button>
<el-button @click="openDialog('detail',scope.row)" type="text" v-if="isShowDetail" size="small">详情</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
...@@ -31,14 +55,30 @@ ...@@ -31,14 +55,30 @@
<!-- 翻页 --> <!-- 翻页 -->
<div class="pagination-container"> <div class="pagination-container">
<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page_no" <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.pageNo"
:page-sizes="[10,20,50]" :page-size="listQuery.page_size" layout="total, sizes, prev, pager, next, jumper" :total="total"> :page-sizes="[10,20,50]" :page-size="listQuery.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
</el-pagination> </el-pagination>
</div> </div>
<!-- end翻页 --> <!-- end翻页 -->
<!-- 弹窗 --> <!-- 弹窗 -->
<!-- @TODO 补充弹窗 --> <!-- @TODO 补充弹窗 -->
<el-dialog :title="dialogName" :visible.sync="dialogFormVisible" :close-on-click-modal="closeOnClickModal" width="dialogWidth">
<el-form v-if="dialogName == '详情'">
<el-form-item :label="dialog.name" :label-width="formLabelWidth" v-for="dialog in dialogForm">
<el-input v-model="dialog.value" disabled auto-complete="off"></el-input>
</el-form-item>
</el-form>
<hm-complex-form :schema="formSchema"
:columns="showUserColumns"
:buttons="showUserButtons"
:confirmFunction="formConfirm"
:cancelFunction="formCancel"
:tableId="tableId" v-if="dialogName != '详情'">
</hm-complex-form>
</el-dialog>
<!-- end 弹窗 --> <!-- end 弹窗 -->
</div> </div>
...@@ -48,9 +88,10 @@ ...@@ -48,9 +88,10 @@
import _ from 'lodash' import _ from 'lodash'
import request from '@/utils/request' import request from '@/utils/request'
import waves from '@/directive/waves' // 水波纹指令 import waves from '@/directive/waves' // 水波纹指令
import { parseTime } from '@/utils' import { parseTime, param } from '@/utils'
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'
/** /**
* 毫末科技的表格组件. * 毫末科技的表格组件.
...@@ -68,7 +109,8 @@ ...@@ -68,7 +109,8 @@
'el-button': Button, 'el-button': Button,
'el-table': Table, 'el-table': Table,
'el-table-column': TableColumn, 'el-table-column': TableColumn,
'el-pagination': Pagination 'el-pagination': Pagination,
'hm-complex-form': HmComplexForm
}, },
// 混入公共对象 // 混入公共对象
mixins: [], mixins: [],
...@@ -111,7 +153,7 @@ ...@@ -111,7 +153,7 @@
* [ * [
* { * {
* "name": "姓名", * "name": "姓名",
* "code": "username", * "codeCamel": "username",
* "render": function(value){ * "render": function(value){
* return "<a href='value'></a>" * return "<a href='value'></a>"
* } * }
...@@ -140,12 +182,35 @@ ...@@ -140,12 +182,35 @@
required: false required: false
}, },
/** /**
* 表格的选项，包括：page_size。完整的示例为： * 表格的选项，包括：pageSize。完整的示例为：
* { * {
* "page_size": 10, // 默认为10条数据/页 * "pageSize": 10, // 默认为10条数据/页
* "showExport": false, // 默认为不显示导出按钮 * "showExport": false, // 默认为不显示导出按钮
* "sort_item": "create_time", // 默认为create_time字段的desc排序 * "sortItem": "create_time", // 默认为create_time字段的desc排序
"sort_order": "desc" * "sortOrder": "desc",
* "showRefresh": false, //默认不显示刷新按钮
* "showDeleteButton": false, //默认不显示删除按钮
* "buttonGroup": false //默认不以按钮组的方式呈现button
* showDetail: false // 默认不显示详情
* "changeValue": { // 数据库字段转化显示，例如(0=否,1=是)
* username: {1: '是', 0: '否'}
* },
* "newData": { // 新建按钮的配置
* isShow: false, // 默认不显示新建按钮
* showUserColumns: [], // 新建表单的Columns配置,详情参考Form组件
* formSchema: {}, // 新建表单的schema配置
* showUserButtons: ['提交', '取消'], // 新建表单的显示按钮
* formConfirm() {}, // 新建的提交回调
* formCancel() {} // 新建的取消回调
* },
* "editData": { // 编辑按钮的配置
* isShow: false, // 默认不显示编辑按钮
* showUserColumns: [], // 编辑表单的Columns配置,详情参考Form组件
* formSchema: {}, // 编辑表单的schema配置
* showUserButtons: ['提交', '取消'], // 编辑表单的显示按钮
* formConfirm() {}, // 编辑的提交回调
* formCancel() {} // 编辑的取消回调
* }
* } * }
*/ */
options: { options: {
...@@ -163,15 +228,34 @@ ...@@ -163,15 +228,34 @@
total: null, total: null,
listLoading: true, listLoading: true,
listQuery: { listQuery: {
page_no: 1, pageNo: 1,
page_size: 20, pageSize: 20,
sort_item: 'create_time', sortItem: 'create_time',
sort_order: 'desc', sortOrder: 'desc',
filters: {} filters: {}
}, },
downloadLoading: false, downloadLoading: false,
dialogFormVisible: false, // 是否显示弹窗
dialogForm: [], // 弹窗数据
showColumns: [], // 要显示的列数据
formLabelWidth: '120px',
closeOnClickModal: false,
multipleSelection: [], // 选择的数组
dialogName: '',
showColumns: [] // 要显示的列数据 isShowNewButton: false, // 是否显示新建
isShowEditDataButton: false, // 是否显示编辑
isShowDeleteButton: false, // 是否显示删除
isShowExport: false, // 是否显示导出按钮
formSchema: {}, // form弹窗的Schema定义
showUserColumns: [], // form弹窗的Columns定义
showUserButtons: [], // from弹窗显示按钮
tableId: '',
isShowRefresh: false,
buttonGroup: false,
operationWidth: 0, // 操作栏的宽度
isShowDetail: false // 是否显示详情按钮
} }
}, },
computed: { computed: {
...@@ -204,6 +288,9 @@ ...@@ -204,6 +288,9 @@
this.getList() this.getList()
}, },
methods: { methods: {
indexMethod(index) {
return this.listQuery.pageSize * (this.listQuery.pageNo - 1) + index + 1
},
validate() { validate() {
const self = this const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列 // this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
...@@ -234,24 +321,18 @@ ...@@ -234,24 +321,18 @@
self.$set(tmp, 'code', tmp.code.toLowerCase()) self.$set(tmp, 'code', tmp.code.toLowerCase())
self.showColumns.push(tmp) self.showColumns.push(tmp)
}) })
console.log(self.showColumns)
} else { } else {
self.showColumns = JSON.parse(JSON.stringify(self.columns)) self.showColumns = JSON.parse(JSON.stringify(self.columns))
console.log('1111111')
console.log(self.showColumns)
// 将字符串对象进行替换处理 // 将字符串对象进行替换处理
_.each(self.showColumns, function(column, index) { _.each(self.showColumns, function(column, index) {
if (typeof column === 'string') { if (typeof column === 'string') {
// const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()] // const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
// 王康 修改 2018年02月25日22:58:23 // 王康 修改 2018年02月25日22:58:23
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column] const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column]
console.log(tmp)
self.$set(tmp, 'code', tmp.code.toLowerCase()) self.$set(tmp, 'code', tmp.code.toLowerCase())
self.$set(self.showColumns, index, tmp) self.$set(self.showColumns, index, tmp)
} }
}) })
console.log('2222222')
console.log(self.showColumns)
} }
// 处理过滤条件 // 处理过滤条件
...@@ -259,7 +340,7 @@ ...@@ -259,7 +340,7 @@
const tableName = self.schema['modelUnderscore'] const tableName = self.schema['modelUnderscore']
const filters = {} const filters = {}
filters[tableName] = {} filters[tableName] = {}
_.each(self.filters, function(filter) { _.each(_.cloneDeep(self.filters), function(filter) {
filters[tableName] = Object.assign(filters[tableName], filter) filters[tableName] = Object.assign(filters[tableName], filter)
}) })
delete filters[tableName]['placeholder'] delete filters[tableName]['placeholder']
...@@ -269,6 +350,30 @@ ...@@ -269,6 +350,30 @@
if (!request.defaults.baseURL) { if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api' request.defaults.baseURL = '/org/api'
} }
if (self.options.newData && self.options.newData.isShow) { // 判断是否显示新建按钮
self.isShowNewButton = self.options.newData.isShow
}
if (self.options.editData && self.options.editData.isShow) { // 判断是否显示编辑按钮
self.isShowEditDataButton = self.options.editData.isShow
self.operationWidth += 50
}
if (self.options.showRefresh) { // 判断是否显示刷新按钮
self.isShowRefresh = self.options.showRefresh
}
if (self.options.showExport) { // 判断是否显示导出按钮
self.isShowExport = self.options.showExport
}
if (self.options.showDeleteButton) { // 判断是否显示删除按钮
self.isShowDeleteButton = self.options.showDeleteButton
self.operationWidth += 50
}
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
}
console.log(request.defaults) console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`) console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
}, },
...@@ -279,24 +384,178 @@ ...@@ -279,24 +384,178 @@
// 处理过滤条件 // 处理过滤条件
const params = JSON.parse(JSON.stringify(self.listQuery)) const params = JSON.parse(JSON.stringify(self.listQuery))
params.filters = self.filterParams params.filters = self.filterParams
params.filters = this.deleteFilter(params.filters)
request(self.schema.modelUnderscorePlural, { request(self.schema.modelUnderscorePlural, {
params: params params: params
}).then(resp => { }).then(resp => {
if (self.options.changeValue) {
resp.data = self.changeValue(resp.data)
}
self.list = resp.data self.list = resp.data
self.total = parseInt(resp.headers.total) self.total = parseInt(resp.headers.total)
self.listLoading = false self.listLoading = false
}) })
}, },
// 数据库字段转化显示，例如(0=否,1=是)
changeValue(data) {
const self = this
_.map(data, function(item, index) {
_.forEach(item, function(listValue, listKey) {
if (self.options.changeValue[listKey] && self.options.changeValue[listKey][listValue]) {
item[listKey] = self.options.changeValue[listKey][listValue]
}
})
})
return data
},
// 添加一条数据
openDialog(type, data) {
const self = this
self.dialogFormVisible = true
if (type === 'editData') {
self.dialogName = '编辑'
self.showUserColumns = self.options.editData.showUserColumns
self.formSchema = self.options.editData.formSchema
self.showUserButtons = self.options.editData.showUserButtons
self.tableId = data.id
}
if (type === 'newData') {
self.dialogName = '新建'
self.showUserColumns = self.options.newData.showUserColumns
self.formSchema = self.options.newData.formSchema
self.showUserButtons = self.options.newData.showUserButtons
}
if (type === 'detail') {
self.dialogName = '详情'
self.dialogForm = []
_.each(self.options.showDetail.showColumns, function(columns) {
_.each(self.schema.columns, function(item, index) {
if (columns === item.codeCamel) {
self.dialogForm.push(item)
}
})
})
_.map(self.dialogForm, function(item, index) {
item.value = data[item.code]
item.id = data.id
})
}
},
// 表单的提交
formConfirm() {
this.options.newData.formConfirm()
this.dialogFormVisible = false
this.getList()
},
// 表单的取消
formCancel() {
this.options.newData.formCancel()
this.dialogFormVisible = false
this.getList()
},
// 删除过滤条件为空的filter
deleteFilter(filters) {
const newFilters = filters
_.forEach(newFilters, function(columns, columnsKey) {
_.forEach(newFilters[columnsKey], function(column, columnKey) {
if (columns[columnKey][Object.keys(column)] === '%%' || columns[columnKey][Object.keys(column)] === '' ||
columns[columnKey][Object.keys(column)] === null || columns[columnKey][Object.keys(column)].length === 0) {
delete (columns[columnKey])
}
})
})
return JSON.stringify(newFilters[Object.keys(newFilters)]) === '{}' ? null : newFilters
},
// 删除一条数据
deleteData(data) {
const self = this
self.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
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() {
this.listQuery = {
pageNo: 1,
pageSize: 20,
sortItem: 'create_time',
sortOrder: 'desc',
filters: {}
}
this.init()
this.getList()
},
// 批量删除
BatchRemove() {
const self = this
const datas = {
ids: []
}
if (!self.multipleSelection) return false
_.each(self.multipleSelection, function(item, index) {
datas.ids.push(item.id)
})
datas.ids = JSON.stringify(datas.ids)
self.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
request(self.schema.modelUnderscorePlural + '/delete/batch', {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
data: datas,
transformRequest: param
}).then(data => {
if (data.data.message === 'delete success') {
self.$message({
message: data.data.message,
type: 'success'
})
self.getList()
}
})
}).catch(() => {
self.$message({
message: '已取消删除',
type: 'success'
})
})
},
handleSelectionChange(val) {
this.multipleSelection = val
},
handleFilter() { handleFilter() {
this.getList() this.getList()
}, },
handleSizeChange(val) { handleSizeChange(val) {
this.listQuery.page_size = val this.listQuery.pageSize = val
this.getList() this.getList()
}, },
handleCurrentChange(val) { handleCurrentChange(val) {
this.listQuery.page_no = val this.listQuery.pageNo = val
this.getList() this.getList()
}, },
handleDelete(row) { handleDelete(row) {
...@@ -351,4 +610,7 @@ ...@@ -351,4 +610,7 @@
.hm-complex-table__filter-span { .hm-complex-table__filter-span {
margin-right: 5px; margin-right: 5px;
} }
.el-table__body tr.current-row>td{
background-color: #ecf5ff;
}
</style> </style>
src/views/haomo/components/tables/index.vue
View file @ 9b999237
...@@ -2,9 +2,8 @@ ...@@ -2,9 +2,8 @@
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<hm-complex-table :schema="schema['HmUser']" <hm-complex-table :schema="schema['HmUser']"
:columns="showUserColumns" :columns="showUserColumns"
:filters="userFilters"></hm-complex-table> :filters="userFilters"
<hm-complex-table :schema="schema['Department']"></hm-complex-table> :options="userOptions"></hm-complex-table>
<hm-complex-table :schema="schema['Role']"></hm-complex-table>
</div> </div>
</template> </template>
...@@ -22,10 +21,10 @@ ...@@ -22,10 +21,10 @@
}, },
data() { data() {
return { return {
showUserColumns: ['mobile', 'loginid'], showUserColumns: ['mobile', 'loginid', 'username', 'email'],
userFilters: [ userFilters: [
{ placeholder: '过滤手机号', 'mobile': { 'like': '' }}, { placeholder: '过滤手机号', 'mobile': { 'like': '' }},
{ placeholder: '过滤登录Id', 'loginid': { 'like': '3001' }} { placeholder: '过滤用户名', 'username': { 'equalTo': '' }}
] ]
} }
}, },
...@@ -33,6 +32,43 @@ ...@@ -33,6 +32,43 @@
}, },
created() { created() {
this.schema = schema this.schema = schema
this.userOptions = {
changeValue: {
username: { 1: '是', 0: '否' }
},
newData: {
isShow: true,
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'loginid', widgetType: 1 }, { name: 'type', widgetType: 1 }],
formSchema: schema['HmUser'],
showUserButtons: ['提交', '取消'],
formConfirm() {
console.log('提交')
},
formCancel() {
console.log('取消')
}
},
editData: {
isShow: true,
showUserColumns: [{ name: 'username', widgetType: 1 }],
formSchema: schema['HmUser'],
showUserButtons: ['提交', '取消'],
formConfirm() {
console.log('提交')
},
formCancel() {
console.log('取消')
}
},
showRefresh: true,
showExport: true,
showDeleteButton: true,
buttonGroup: false,
showDetail: {
isShow: true,
showColumns: ['mobile', 'loginid', 'username', 'email']
}
}
}, },
methods: {} methods: {}
} }
......
src/views/haomo/components/tabs/HmTab.vue 0 → 100644
View file @ 9b999237
<template>
<!--<el-row :gutter="20" style="margin-top: 20px;padding: 0 20px;">
<div width="1000px" height="500px">
<el-col :span="12" v-for="column in schema['columns']">
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane :label="column.name" name="first">
<ul style="list-style: none;margin: 0;padding: 0;">
<li>第1条数据</li>
<li>第2条数据</li>
<li>第3条数据</li>
</ul>
</el-tab-pane>
</el-tabs>
</el-col>
</div>
</el-row> -->
<swiper :options="swiperOption" style="padding: 20px 30px 0">
<swiper-slide v-for="(column,index) in schema['columns']" :key="index">
<el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
<el-tab-pane :label="column.name" name="first">
<ul style="list-style: none;margin: 0;padding: 0;">
<li>第1条数据</li>
<li>第2条数据</li>
<li>第3条数据</li>
</ul>
</el-tab-pane>
</el-tabs>
</swiper-slide>
<div class="swiper-button-prev" slot="button-prev" style="left: 1px;"></div>
<div class="swiper-button-next" slot="button-next" style="right: 3px;"></div>
</swiper>
</template>
<script>
// import _ from 'lodash'
// import request from '@/utils/request'
// import schema from '../../schemas/hm_org_schema'
/**
* 毫末科技的选项卡组件.
*
* demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/tabs
* @author 王康
*/
export default {
name: 'HmTab',
// 集成其他组件
extends: {},
// 使用其它组件
components: {},
// 混入公共对象
mixins: [],
/**
* 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必须传schema，以完成数据的交互
*/
props: {
schema: {
type: Object,
required: true
}
},
data() {
return {
activeName: 'first',
swiperOption: {
slidesPerView: 2,
slidesPerGroup: 2,
// loop: true,
spaceBetween: 30,
grabCursor: true,
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev'
}
}
}
},
created() {
// this.validate()
// console.log(this.schema)
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
console.log(this.schema)
}
}
}
</script>
<style scoped>
</style>
src/views/haomo/components/tabs/index.vue 0 → 100644
View file @ 9b999237
<template>
<div>
<hm-tab :schema="schema['CcHmUser']"></hm-tab>
</div>
</template>
<script>
import HmTab from './HmTab.vue'
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmTabIndex',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-tab': HmTab
},
data() {
return {
}
},
computed: {
},
filters: {
},
created() {
this.schema = schema
},
methods: {}
}
</script>
<style scoped>
</style>
src/views/haomo/pages/login/HmLogin.vue
View file @ 9b999237
<template> <template>
<el-row type="flex"> <el-row type="flex">
<el-col :span="10" class="detail-content" style="margin:0 auto" > <el-col :span="options.span" class="detail-content" style="margin:0 auto;border: 0.5px solid #e6ebf5" >
<el-form style="border: 0.5px solid #e6ebf5"> <el-row type="flex">
<el-row type="flex"> <el-col style="height: 45px;background-color: #00BF8B" ></el-col>
<el-col style="height: 45px;background-color: #00BF8B" ></el-col> </el-row>
</el-row> <el-row type="flex" style="margin-top:30px">
<el-row type="flex" style="margin-top:35px"> <el-col style="margin: 0 auto;height: 70px;width:433px;text-align: center;line-height: 70px;font-size: 35px;color:#586C8C;font-weight: bold" >
<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 />张家口人民检察院
<img />张家口人民检察院 </el-col>
</el-col> </el-row>
</el-row> <el-form :model="hm_form" status-icon :rules="rules2" ref="hm_form" style="width: 433px;margin: 0 auto;">
<el-form-item prop="pass"> <el-form-item prop="account">
<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-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>
<el-form-item prop="checkPass"> <el-form-item prop="pass">
<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-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-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-item>
</el-form> </el-form>
</el-col> </el-col>
...@@ -38,7 +38,34 @@ ...@@ -38,7 +38,34 @@
} }
}, },
data() { 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: { computed: {
}, },
...@@ -47,7 +74,16 @@ ...@@ -47,7 +74,16 @@
created() { created() {
}, },
methods: { methods: {
submitForm(formName, callback) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!' + JSON.stringify(callback))
} else {
console.log('error submit!!')
return false
}
})
}
} }
} }
</script> </script>
......
src/views/haomo/pages/login/index.vue
View file @ 9b999237
<template> <template>
<div> <div>
<hm-login></hm-login> <hm-login :options="options"></hm-login>
</div> </div>
</template> </template>
...@@ -21,8 +21,18 @@ ...@@ -21,8 +21,18 @@
filters: { filters: {
}, },
created() { created() {
this.options = {
spx: function(account, pass) {
alert(account + pass)
},
span: 10
}
}, },
methods: {} methods: {
test: function() {
alert(4)
}
}
} }
</script> </script>
<style scoped> <style scoped>
......
src/views/haomo/schemas/hm_org_schema.js
View file @ 9b999237
This source diff could not be displayed because it is too large. You can view the blob instead.
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