Skip to content

V
VueElementTemplate
Commit 67e95b6d authored by 胡小根's avatar 胡小根
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents 6d7adb9a 4e5d9dd9
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4519 additions and 1351 deletions
package.json
View file @ 67e95b6d
...@@ -39,6 +39,7 @@ ...@@ -39,6 +39,7 @@
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-i18n": "7.3.2", "vue-i18n": "7.3.2",
"vue-multiselect": "2.0.8", "vue-multiselect": "2.0.8",
"vue-quill-editor": "^3.0.5",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-splitpane": "1.0.2", "vue-splitpane": "1.0.2",
"vuedraggable": "2.15.0", "vuedraggable": "2.15.0",
...@@ -46,7 +47,9 @@ ...@@ -46,7 +47,9 @@
"xlsx": "^0.11.16" "xlsx": "^0.11.16"
}, },
"pre-commit": { "pre-commit": {
"run": ["lint"] "run": [
"lint"
]
}, },
"devDependencies": { "devDependencies": {
"autoprefixer": "7.2.3", "autoprefixer": "7.2.3",
......
src/main.js
View file @ 67e95b6d
import Vue from 'vue' import Vue from 'vue'
import VueQuillEditor from 'vue-quill-editor' // 富文本插件
import 'normalize.css/normalize.css'// A modern alternative to CSS resets import 'normalize.css/normalize.css'// A modern alternative to CSS resets
...@@ -17,12 +18,16 @@ import './errorLog'// error log ...@@ -17,12 +18,16 @@ import './errorLog'// error log
import './permission' // permission control import './permission' // permission control
import './mock' // simulation data import './mock' // simulation data
import 'quill/dist/quill.core.css' // 富文本CSS
import 'quill/dist/quill.snow.css' // 富文本CSS
import * as filters from './filters' // global filters import * as filters from './filters' // global filters
import Icon from 'vue-awesome/components/Icon' import Icon from 'vue-awesome/components/Icon'
Vue.component('icon', Icon) Vue.component('icon', Icon)
Vue.use(VueQuillEditor) // 富文本
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 @ 67e95b6d
...@@ -123,6 +123,7 @@ export const asyncRouterMap = [ ...@@ -123,6 +123,7 @@ export const asyncRouterMap = [
}, },
{ {
path: '/haomo/pages', path: '/haomo/pages',
component: _import('haomo/pages/index'),
redirect: '/haomo/pages/login', redirect: '/haomo/pages/login',
name: 'haomo-pages', name: 'haomo-pages',
meta: { meta: {
...@@ -132,7 +133,7 @@ export const asyncRouterMap = [ ...@@ -132,7 +133,7 @@ export const asyncRouterMap = [
children: [ children: [
{ {
path: 'login', path: 'login',
component: _import('haomo/pages/login'), component: _import('haomo/pages/login/index'),
name: 'haomo-login', name: 'haomo-login',
meta: { meta: {
title: '登录', title: '登录',
...@@ -141,7 +142,7 @@ export const asyncRouterMap = [ ...@@ -141,7 +142,7 @@ export const asyncRouterMap = [
}, },
{ {
path: 'personal', path: 'personal',
component: _import('haomo/pages/personal'), component: _import('haomo/pages/personal-center/index'),
name: 'haomo-personal', name: 'haomo-personal',
meta: { meta: {
title: '个人中心', title: '个人中心',
......
src/views/haomo/components/details/HmComplexDetail.md
View file @ 67e95b6d
### 基本使用 ### 基本使用
```jsx ```jsx
<hm-complex-detail :userId="0e26566e953449a7a7500c34be39fd26" <hm-complex-detail :tableId="0e26566e953449a7a7500c34be39fd26"
:schema="{ :schema="{
'model': 'HmUser', 'model': 'HmUser',
'modelPlural': 'HmUsers', 'modelPlural': 'HmUsers',
...@@ -205,23 +205,15 @@ ...@@ -205,23 +205,15 @@
<template> <template>
<div> <div>
<hm-complex-detail :schema="schema['HmUser']" <hm-complex-detail :schema="schema['HmUser']"
:userId="userId" :tableId="tableId"
:columns="showUserColumns"> :columns="showUserColumns">
</hm-complex-detail> </hm-complex-detail>
</div> </div>
</template> </template>
<script>
import HmComplexDetail from './HmComplexDetail.vue'
import schema from '../../schemas/hm_org_schema'
<script>
export default { export default {
name: 'HmComplexDetail', name: 'HmComplexDetail',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-complex-detail': HmComplexDetail
},
data() { data() {
return { return {
schema: { schema: {
...@@ -430,7 +422,8 @@ ...@@ -430,7 +422,8 @@
filters: { filters: {
}, },
created() { created() {
this.userId = '0e26566e953449a7a7500c34be39fd26' this.tableId = '0e26566e953449a7a7500c34be39fd26'
this.schema = schema
}, },
methods: {} methods: {}
} }
......
src/views/haomo/components/details/HmComplexDetail.vue
View file @ 67e95b6d
<template> <template>
<el-row type="flex"> <el-row type="flex">
<el-col :span="24" class="detail-content"> <el-col :span="24" class="detail-content">
<h2 class="title">详情页面</h2>
<el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto"> <el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">
<el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name"> <el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">
<div>{{detail[column.codeCamel]}}</div> <div>{{detail[column.codeCamel]}}</div>
...@@ -56,11 +55,11 @@ ...@@ -56,11 +55,11 @@
return true return true
} }
}, },
/* /**
* 在详情页需要传入用户的id用来带出用户信息 * 在详情页需要传入用户的id用来带出用户信息
* */ */
userId: { tableId: {
type: null, type: String,
required: true required: true
} }
}, },
...@@ -68,7 +67,7 @@ ...@@ -68,7 +67,7 @@
return { return {
list: null, list: null,
detail: null, detail: null,
showColumns: [] // 要显示的列数据 showColumns: [] // 要显示的列数据,
} }
}, },
computed: { computed: {
...@@ -138,7 +137,7 @@ ...@@ -138,7 +137,7 @@
self.list = resp.data self.list = resp.data
// 匹配需要展示的用户 // 匹配需要展示的用户
_.each(self.list, function(item) { _.each(self.list, function(item) {
if (item.id === self.userId) { if (item.id === self.tableId) {
self.detail = item self.detail = item
} }
}) })
......
src/views/haomo/components/details/index.vue
View file @ 67e95b6d
<template> <template>
<div> <div>
<hm-complex-detail :schema="schema['HmUser']" :userId="userId"> <hm-complex-detail :schema="schema['HmUser']" :tableId="tableId">
</hm-complex-detail> </hm-complex-detail>
<hm-complex-detail :schema="schema['HmUser']" :userId="userId" :columns="showUserColumns"> <hm-complex-detail :schema="schema['HmUser']" :tableId="tableId" :columns="showUserColumns">
</hm-complex-detail> </hm-complex-detail>
</div> </div>
</template> </template>
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
}, },
created() { created() {
this.schema = schema this.schema = schema
this.userId = '0e26566e953449a7a7500c34be39fd26' this.tableId = '0e26566e953449a7a7500c34be39fd26'
}, },
methods: {} methods: {}
} }
......
src/views/haomo/components/forms/HmComplexForm.md
View file @ 67e95b6d
### 基本使用 ### 基本使用
```jsx ```jsx
<hm-complex-form :fields="['username', 'loginid', 'password', 'mobile', 'email']" <hm-complex-form :tableId="tableId"
:columns="['username', 'loginid', 'password', 'mobile', 'email']"
:schema="{ :schema="{
'model': 'HmUser', 'model': 'HmUser',
'modelPlural': 'HmUsers', 'modelPlural': 'HmUsers',
...@@ -204,8 +205,10 @@ ...@@ -204,8 +205,10 @@
```vue ```vue
<template> <template>
<div> <div>
<hm-complex-form :schema="schema['HmUser']" <hm-complex-form
:fields="showFields"> :tableId="tableId"
:schema="schema['HmUser']"
:columns="showUserColumns">
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -413,11 +416,12 @@ ...@@ -413,11 +416,12 @@
] ]
} }
}, },
showFields: ['username', 'loginid', 'password', 'mobile', 'email'] showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email']
} }
}, },
created() { created() {
this.schema = schema this.schema = schema
this.tableId = '0e26566e953449a7a7500c34be39fd26'
} }
} }
</script> </script>
......
src/views/haomo/components/forms/HmComplexForm.vue
View file @ 67e95b6d
...@@ -8,11 +8,19 @@ ...@@ -8,11 +8,19 @@
<!--表单部分--> <!--表单部分-->
<el-form ref="form" :model="formModel" :rules="rules" label-width="110px" <el-form ref="form" :model="formModel" :rules="rules" label-width="110px"
style="width:80%;margin:0 auto"> style="width:80%;margin:0 auto">
<el-form-item v-for="(column,index) in showFields" :key="index" :label="column.name" :prop="column.codeCamel"> <el-form-item v-for="(column,index) in showUserColumns" :key="index" :label="column.name" :prop="column.codeCamel">
<el-input v-if="column.codeCamel==='password'" type="password" :placeholder="column.name" <!--el-input<el-input v-if="column.codeCamel==='password'" type="password"
v-model="formModel[column.codeCamel]"></el-input> v-model="formModel[column.codeCamel]"></el-input>-->
<el-input v-if="column.codeCamel!=='password'" :placeholder="column.name" <el-input v-if="column.codeCamel!=='securityLevel'" v-model="formModel[column.codeCamel]"></el-input>
v-model="formModel[column.codeCamel]"></el-input> <!-- quill-editor -->
<quill-editor v-if="column.codeCamel==='securityLevel'" class="editor-example bubble"
ref="textEditor"
v-model="formModel[column.codeCamel]"
:options="editorOption"
@blur="onEditorBlur($event)"
@focus="onEditorFocus($event)"
@ready="onEditorReady($event)">
</quill-editor>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-col :span="12"> <el-col :span="12">
...@@ -36,7 +44,10 @@ ...@@ -36,7 +44,10 @@
import request from '@/utils/request' import request from '@/utils/request'
/** /**
* 表单页面。 * 毫末科技的表单组件.
*
* demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/forms
* @author 王康
*/ */
export default { export default {
name: 'HmComplexForm', name: 'HmComplexForm',
...@@ -58,24 +69,31 @@ ...@@ -58,24 +69,31 @@
/** /**
* 指定要显示的字段。默认为根据schema得到的所有字段。 * 指定要显示的字段。默认为根据schema得到的所有字段。
*/ */
fields: { columns: {
type: Array, type: Array,
required: false, required: false,
validator: function(value) { validator: function(value) {
if (typeof value !== 'object') { if (typeof value !== 'object') {
console.warn(`传入的fields不符合要求，必须是数组`) console.warn(`传入的columns不符合要求，必须是数组`)
return false return false
} }
return true return true
} }
},
/**
* 传入用户的id用来修改用户信息
*/
tableId: {
type: String,
required: false
} }
}, },
data() { data() {
return { return {
form: null, form: null,
formModel: {}, // 双向绑定的数据变量 formModel: {}, // 双向绑定的数据变量
showFields: [], // 要显示的字段 showUserColumns: [], // 要显示的字段
// form: { // form: {
// name: '', // name: '',
// gender: '男', // gender: '男',
...@@ -99,8 +117,8 @@ ...@@ -99,8 +117,8 @@
{ required: true, message: '请输入登陆ID', trigger: 'blur' } { required: true, message: '请输入登陆ID', trigger: 'blur' }
], ],
password: [ password: [
{ required: true, message: '请输入密码', trigger: 'blur' }, { required: true, message: '请输入密码', trigger: 'blur' }
{ 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' } { pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, message: '请输入正确的电话号码或手机号', trigger: 'blur&change' }
...@@ -108,45 +126,84 @@ ...@@ -108,45 +126,84 @@
email: [ email: [
{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur&change' } { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur&change' }
] ]
},
editorOption: {
placeholder: '',
modules: {
toolbar: [
['bold', 'italic', 'underline', 'strike'],
[{ 'list': 'ordered' }, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['image']
]
}
} }
} }
}, },
created() { created() {
// this.validate()
this.init() this.init()
// console.log(this.schema) // console.log(this.schema)
}, },
methods: { methods: {
validate() {
const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
// 由于vue中不允许通过其他的props来验证当前props，只能在created里进行调用
_.each(self.columns, function(item) {
if (!item) {
return 0
}
if (typeof item !== 'string' && typeof item !== 'object') {
console.error(`传入的columns不符合要求，数组元素必须是字符串或对象`)
}
if (typeof item === 'string' && !_.keyBy(self.schema['columns'], 'code')[item.toUpperCase()]) {
console.error(`传入的columns不符合要求，字符串元素[${item}]必须是schema中定义的列[code]`)
}
if (typeof item === 'object' && !_.keyBy(self.schema['columns'], 'code')[item['code'].toUpperCase()]) {
console.error(`传入的columns不符合要求，元素的code属性[${item['code']}]必须是schema中定义的列[code]`)
}
})
},
onEditorBlur(editor) {
console.log('editor blur!')
},
onEditorFocus(editor) {
console.log('editor focus!')
},
onEditorReady(editor) {
console.log('editor ready!')
},
init() { init() {
const self = this const self = this
// 如果没有传fields，则全部显示 // 如果没有传columns，则全部显示
if (!self.fields || !self.fields.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.showFields.push(tmp) self.showUserColumns.push(tmp)
}) })
// console.log(self.showFields) // console.log(self.showUserColumns)
} else { // 如果传入了fields，则只显示传入的字段 } else { // columns，则只显示传入的字段
self.showFields = JSON.parse(JSON.stringify(self.fields)) self.showUserColumns = JSON.parse(JSON.stringify(self.columns))
// console.log('1111111') // console.log('1111111')
// console.log(self.showFields) console.log(self.showUserColumns)
// 将字符串对象进行替换处理 // 将字符串对象进行替换处理
_.each(self.showFields, function(column, index) { _.each(self.showUserColumns, function(column, index) {
if (typeof column === 'string') { if (typeof column === 'string') {
// 生成一个新对象 // 生成一个新对象
console.log(column) // const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()]
const tmp = _.keyBy(self.schema['columns'], 'code')[column.toUpperCase()] 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(self.showFields, index, tmp)
} }
}) })
// console.log('2222222') // console.log('2222222')
console.log(self.showFields) console.log(self.showUserColumns)
} }
// 提取v-model绑定的变量 // 提取v-model绑定的变量
_.each(self.showFields, function(item) { _.each(self.showUserColumns, function(item) {
self.formModel[item.codeCamel] = '' self.formModel[item.codeCamel] = ''
}) })
console.log(self.formModel) console.log(self.formModel)
...@@ -168,6 +225,29 @@ ...@@ -168,6 +225,29 @@
self.$refs.form.validate((valid) => { self.$refs.form.validate((valid) => {
if (valid) { if (valid) {
console.log('提交成功!') console.log('提交成功!')
// 存在tableId 则修改信息
if (self.tableId) {
request(self.schema.modelUnderscorePlural + '/' + self.tableId + '/edit', {
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
data: self.formModel,
transformRequest:
function(obj) {
var str = []
// 删除空值的属性
obj = _.omitBy(obj, function(value) {
return !value
})
for (var p in obj) {
str.push(encodeURIComponent(p) + '=' + encodeURIComponent(obj[p]))
}
return str.join('&')
}
}).then(resp => {
console.log('修改成功')
self.resetForm()
})
} else { // 不存在tableId 则创建一条数据
request(self.schema.modelUnderscorePlural + '/new', { request(self.schema.modelUnderscorePlural + '/new', {
method: 'post', method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
...@@ -181,9 +261,10 @@ ...@@ -181,9 +261,10 @@
return str.join('&') return str.join('&')
} }
}).then(resp => { }).then(resp => {
console.log(resp.data) console.log('创建成功')
self.resetForm() self.resetForm()
}) })
}
} else { } else {
console.log('提交失败!!') console.log('提交失败!!')
return false return false
......
src/views/haomo/components/forms/index.vue
View file @ 67e95b6d
<template> <template>
<div> <div>
<hm-complex-form :schema="schema['HmUser']" :fields="showFields"> <hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :tableId="tableId">
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
}, },
data() { data() {
return { return {
showFields: ['username', 'loginid', 'password', 'mobile', 'email'] showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'securityLevel']
// showUserColumns: []
} }
}, },
computed: { computed: {
...@@ -28,6 +29,7 @@ ...@@ -28,6 +29,7 @@
}, },
created() { created() {
this.schema = schema this.schema = schema
this.tableId = '0e26566e953449a7a7500c34be39fd26'
}, },
methods: {} methods: {}
} }
......
src/views/haomo/components/panel/HmComplexPanel.vue deleted 100644 → 0
View file @ 6d7adb9a
<template>
<el-row type="flex">
<el-col :span="hmCollapse" class="detail-content" style="margin:0 auto">
<h2 class="title">面板页面</h2>
<el-card class="box-card" :style="hmStyle">
<div slot="header" class="clearfix" :class="hmTitleClass">
<span>{{hmTitle}}</span>
</div>
<div :style="hmPanelHeight" :class="hmContentClass">
<span>{{hmContentText}}</span>
<!--<el-form :data="detail" label-width="110px" status-icon style="width:80%;margin:0 auto">-->
<!--<el-form-item v-for="(column,index) in showColumns" :key="index" :label="column.name">-->
<!--<div>{{detail[column.codeCamel]}}</div>-->
<!--</el-form-item>-->
<!--</el-form>-->
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
import _ from 'lodash'
import request from '@/utils/request'
export default {
name: 'HmComplexDetail',
// 继承其他组件
extends: {},
// 使用其它组件
components: {},
props: {
/**
* 组件所使用的表定义schema。表定义schema，请使用 model2codejs 从pdm文件生成schema。
* 对于所有毫末科技的组件，必须传schema，以完成数据的交互
*/
schema: {
type: Object,
required: true
},
/**
* 指定要显示的列。默认为根据schema得到的所有列。完整示例为：
* [
* {
* "name": "姓名",
* "code": "username",
* "render": function(value){
* return "<a href='value'></a>"
* }
* },
* "mobile",
* "sexual"
* ]
*/
columns: {
type: Array,
required: false,
validator: function(value) {
if (typeof value !== 'object') {
console.warn(`传入的columns不符合要求，必须是数组`)
return false
}
return true
}
},
/*
* 在详情页需要传入用户的id用来带出用户信息
* */
userId: {
type: null,
required: true
},
hmTitle: {
type: null,
required: false
},
hmTitleClass: {
type: null,
required: false
},
hmContentClass: {
type: null,
required: false
},
hmContentText: {
type: null,
required: false
},
hmStyle: {
type: Object,
required: false
},
hmPanelHeight: {
type: Object,
required: false
},
hmCollapse: {
type: null,
required: false
}
},
data() {
return {
list: null,
detail: null,
showColumns: [] // 要显示的列数据
}
},
computed: {
},
filters: {
},
created() {
this.getList()
this.init()
},
methods: {
validate() {
const self = this
// this.columns数组元素本身必须是string或者object. 且必须是schema中定义的列
// 由于vue中不允许通过其他的props来验证当前props，只能在created里进行调用
_.each(self.columns, function(item) {
if (!item) {
return 0
}
if (typeof item !== 'string' && typeof item !== 'object') {
console.error(`传入的columns不符合要求，数组元素必须是字符串或对象`)
}
if (typeof item === 'string' && !_.keyBy(self.schema['columns'], 'code')[item.toUpperCase()]) {
console.error(`传入的columns不符合要求，字符串元素[${item}]必须是schema中定义的列[code]`)
}
if (typeof item === 'object' && !_.keyBy(self.schema['columns'], 'code')[item['code'].toUpperCase()]) {
console.error(`传入的columns不符合要求，元素的code属性[${item['code']}]必须是schema中定义的列[code]`)
}
})
},
init() {
const self = this
// 处理要显示的列
if (!self.columns || !self.columns.length) {
_.each(self.schema['columns'], function(column) {
const tmp = JSON.parse(JSON.stringify(column))
self.showColumns.push(tmp)
})
} else {
self.showColumns = []
// 将字符串对象进行替换处理
_.each(self.schema['columns'], function(column) {
_.each(self.columns, function(item) {
if (column.codeCamel === item) {
const tmp = JSON.parse(JSON.stringify(column))
self.showColumns.push(tmp)
}
})
})
}
if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api'
}
console.log(request.defaults)
console.log(`request.defaults.baseURL: ${request.defaults.baseURL}`)
},
getList: function() {
const self = this
self.listLoading = true
const params = {}
// 拿到所有的用户
request(self.schema.modelUnderscorePlural, {
params: params
}).then(resp => {
self.list = resp.data
// 匹配需要展示的用户
_.each(self.list, function(item) {
if (item.id === self.userId) {
self.detail = item
}
})
})
}
}
}
</script>
<style scoped>
.title{
text-align: center;
}
.center{
text-align: center;
}
</style>
src/views/haomo/components/panel/HmPanel.md 0 → 100644
View file @ 67e95b6d
### 基本使用
```jsx
<hm-panel :options="{
'panel_class': 'center',
'title_class': 'weight',
'content_class': 'center',
'panel_style': {
width: '100%',
margin: '20px auto'
},
'panel_span': 22,
'content_height': {
height: '600px'
},
'canCollapse': true
}">
<div slot="title">面板标题</div>
<div slot="content">面板内容</div>
</hm-panel>
```
### 不可收起的panel
```vue
<template>
<div>
<hm-panel :options="options">
<div slot="title">测试面板</div>
<div slot="content">面板内容</div>
</hm-panel>
</div>
</template>
<script>
export default {
name: 'HmPanel',
data() {
return {
}
},
created() {
this.options = {
panel_class: 'center',
title_class: 'center',
content_class: 'center',
panel_style: {
width: '80%',
background: '#42b983',
margin: '0 auto'
},
panel_span: 20,
canCollapse: false
}
this.schema = schema
this.showFields = ['username', 'loginid', 'password', 'mobile', 'email']
}
}
</script>
```
\ No newline at end of file
src/views/haomo/components/panel/HmPanel.vue 0 → 100644
View file @ 67e95b6d
<template>
<el-row type="flex">
<el-col :span="options.panel_span" class="detail-content" :class="options.panel_class" style="margin:0 auto">
<el-card class="box-card" :style="options.panel_style">
<div slot="header" class="clearfix" :class="[options.title_class, options.canCollapse ? 'pointer' : '']" @click="toggle()">
<slot name="title"></slot>
</div>
<div :style="options.content_height" :class="options.content_class" v-show="collapse">
<slot name="content"></slot>
</div>
</el-card>
</el-col>
</el-row>
</template>
<script>
export default {
name: 'HmPanel',
// 继承其他组件
extends: {},
// 使用其它组件
components: {},
props: {
/**
* 在面板页传入面板对象
* 完整示例为：{ panel_class: '面板类名', title_class: '标题类名', content_class: '内容类名', panel_style: '面板样式',
* panel_span: '面板宽度比例', content_height: '内容高度', canCollapse: '是否可收起'}
*/
options: {
type: Object,
required: true
}
},
data() {
return {
collapse: true
}
},
computed: {
},
filters: {
},
created() {
},
methods: {
toggle() {
if (this.options.canCollapse) {
this.collapse = !this.collapse
console.log('收起展开')
} else {
console.log('不可收起')
}
}
}
}
</script>
<style scoped>
.weight{
font-weight: 700;
}
.center{
text-align: center;
}
.pointer{
cursor:pointer;
}
</style>
src/views/haomo/components/panel/index.vue
View file @ 67e95b6d
<template> <template>
<div> <div>
<hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="hmTitle" :hmTitleClass="hmTitleClass" <hm-panel :options="options">
:hmContentText="hmContentText" :hmStyle="hmStyle" :hmPanelHeight="hmPanelHeight" :hmCollapse="collapses"> <div slot="title">面板标题</div>
</hm-complex-panel> <div slot="content">
<hm-complex-panel :schema="schema['HmUser']" :userId="userId" :hmTitle="titleBak" :hmContentClass="hmContentClass" :showFields="showFields" <hm-complex-detail :schema="schema['HmUser']" :tableId="userId">
:hmContentText="hmContentTextBak" :hmStyle="styleBak" :hmPanelHeight="panelHeightBak" :hmCollapse="collapseBak"> </hm-complex-detail>
</hm-complex-panel> </div>
</hm-panel>
<hm-panel :options="options2">
<div slot="title">
<hm-complex-form :schema="schema['HmUser']" :fields="showFields"></hm-complex-form>
</div>
<div slot="content">
<hm-complex-form :schema="schema['HmUser']" :fields="showFields"></hm-complex-form>
</div>
</hm-panel>
</div> </div>
</template> </template>
<script> <script>
import HmComplexPanel from './HmComplexPanel.vue' import HmPanel from './HmPanel.vue'
import schema from '../../schemas/hm_org_schema' import schema from '../../schemas/hm_org_schema'
import HmComplexDetail from '../details/HmComplexDetail.vue'
import HmComplexForm from '../forms/HmComplexForm.vue'
export default { export default {
name: 'HmComplexPanel', name: 'HmPanel',
// 继承其他组件 // 继承其他组件
extends: {}, extends: {},
// 使用其它组件 // 使用其它组件
components: { components: {
'hm-complex-panel': HmComplexPanel 'hm-panel': HmPanel,
'hm-complex-detail': HmComplexDetail,
'hm-complex-form': HmComplexForm
}, },
data() { data() {
return { return {
...@@ -31,33 +44,35 @@ ...@@ -31,33 +44,35 @@
filters: { filters: {
}, },
created() { created() {
this.schema = schema this.options = {
this.userId = '0e26566e953449a7a7500c34be39fd26' panel_class: 'center',
this.hmTitle = '面版名称' title_class: 'weight',
this.hmTitleClass = 'center' content_class: 'center',
this.hmContentClass = 'center' panel_style: {
this.hmContentText = '面板文字' width: '100%',
this.hmStyle = { margin: '20px auto'
width: '50%', },
panel_span: 22,
content_height: {
height: '600px'
},
canCollapse: true
}
this.options2 = {
panel_class: 'center',
title_class: 'center',
content_class: 'center',
panel_style: {
width: '80%',
background: '#42b983', background: '#42b983',
margin: '0 auto' margin: '0 auto'
},
panel_span: 20,
canCollapse: false
} }
this.hmPanelHeight = { this.schema = schema
height: '100px' this.userId = '0e26566e953449a7a7500c34be39fd26'
}
this.collapses = 12
this.showFields = ['username', 'loginid', 'password', 'mobile', 'email'] this.showFields = ['username', 'loginid', 'password', 'mobile', 'email']
this.titleBak = '测试面板'
this.hmContentTextBak = '我测试一下'
this.styleBak = {
width: '100%',
background: '#f56c6c',
marginBottom: '20px'
}
this.panelHeightBak = {
height: '200px'
}
this.collapseBak = 22
}, },
methods: {} methods: {}
} }
......
src/views/haomo/components/tables/HmComplexTable.vue
View file @ 67e95b6d
...@@ -242,7 +242,9 @@ ...@@ -242,7 +242,9 @@
// 将字符串对象进行替换处理 // 将字符串对象进行替换处理
_.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
const tmp = _.keyBy(self.schema['columns'], 'codeCamel')[column]
console.log(tmp) 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)
......
src/views/haomo/pages/index.vue 0 → 100644
View file @ 67e95b6d
<template>
<transition name="fade" mode="out-in">
<keep-alive :include='cachedViews'>
<router-view></router-view>
</keep-alive>
</transition>
</template>
<script>
export default {
name: 'PagesMain',
computed: {
cachedViews() {
return this.$store.state.tagsView.cachedViews
}
}
}
</script>
src/views/haomo/pages/login/HmLogin.vue 0 → 100644
View file @ 67e95b6d
<template>
<el-row type="flex">
<el-col :span="10" class="detail-content" style="margin:0 auto" >
<el-form style="border: 0.5px solid #e6ebf5">
<el-row type="flex">
<el-col style="height: 45px;background-color: #00BF8B" ></el-col>
</el-row>
<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" >
<img />张家口人民检察院
</el-col>
</el-row>
<el-form-item prop="pass">
<el-input class="style" style="width:433px;margin: 0 auto;margin-top:25px;display: block;" prefix-icon="el-icon-search" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" style="width:433px;margin: 0 auto;display: block;border-width: 0px;border-bottom-width: 1px;border-radius: 0px;" prefix-icon="el-icon-search" suffix-icon="el-icon-view" auto-complete="off"></el-input>
</el-form-item>
<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-form-item>
</el-form>
</el-col>
</el-row>
</template>
<script>
export default {
name: 'HmLogin',
// 继承其他组件
extends: {},
// 使用其它组件
components: {},
props: {
options: {
type: Object,
required: false
}
},
data() {
},
computed: {
},
filters: {
},
created() {
},
methods: {
}
}
</script>
<style scoped>
</style>
src/views/haomo/pages/login/index.vue 0 → 100644
View file @ 67e95b6d
<template>
<div>
<hm-login></hm-login>
</div>
</template>
<script>
import HmLogin from './HmLogin.vue'
export default {
name: 'login',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
'hm-login': HmLogin
},
data() {
},
computed: {
},
filters: {
},
created() {
},
methods: {}
}
</script>
<style scoped>
</style>
src/views/haomo/pages/personal-center/index.vue 0 → 100644
View file @ 67e95b6d
<template>
<div>
个人中心
</div>
</template>
<script>
export default {
name: 'login',
// 继承其他组件
extends: {},
// 使用其它组件
components: {
},
data() {
return {
}
},
computed: {
},
filters: {
},
created() {
},
methods: {}
}
</script>
<style scoped>
</style>
src/views/haomo/schemas/hm_org_schema.js
View file @ 67e95b6d
This diff is collapsed.
styleguide.config.js
View file @ 67e95b6d
...@@ -28,7 +28,8 @@ const sections = [ ...@@ -28,7 +28,8 @@ const sections = [
return [ return [
'./src/views/haomo/components/tables/HmComplexTable.vue', './src/views/haomo/components/tables/HmComplexTable.vue',
'./src/views/haomo/components/forms/HmComplexForm.vue', './src/views/haomo/components/forms/HmComplexForm.vue',
'./src/views/haomo/components/details/HmComplexDetail.vue' './src/views/haomo/components/details/HmComplexDetail.vue',
'./src/views/haomo/components/panel/HmPanel.vue'
] ]
} }
}, },
......
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