Skip to content

V
VueElementTemplate
Commit 4bd71744 authored by 赵帅's avatar 赵帅
Browse files
Options

Merge branch 'master' of 115.28.80.125:softwarefactory/vueelementtemplate

parents 7046cace 32acc360
Expand all Show whitespace changes
Inline Side-by-side
Showing with 4955 additions and 493 deletions
docs/styleguide/develop.md
View file @ 4bd71744
关于如何进行组件化开发，请见文档：http://factory.haomo-studio.com/frontend/react/react-element-based.html 关于如何进行组件化开发，请见文档：http://factory.haomo-studio.com/frontend/react/react-element-based.html
##### 待开发组件清单如下：
src/router/index.js
View file @ 4bd71744
...@@ -136,6 +136,15 @@ export const asyncRouterMap = [ ...@@ -136,6 +136,15 @@ export const asyncRouterMap = [
title: 'calendar', title: 'calendar',
icon: 'table' icon: 'table'
} }
},
{
path: 'iconMenu',
component: _import('haomo/components/iconMenu/index'),
name: 'haomo-iconMenu',
meta: {
title: '图标菜单',
icon: 'table'
}
} }
] ]
}, },
......
src/utils/request.js
View file @ 4bd71744
...@@ -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/forms/HmComplexForm.vue
View file @ 4bd71744
<template> <template>
<div class="app-container documentation-container">
<el-row type="flex" class="hm-form" style="margin-top: 50px"> <el-row type="flex" class="hm-form" style="margin-top: 50px">
<el-col :span="6"> <el-col :span="6">
<div></div> <div></div>
...@@ -6,9 +7,15 @@ ...@@ -6,9 +7,15 @@
<el-col :span="12"> <el-col :span="12">
<div> <div>
<!--表单部分--> <!--表单部分-->
<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 in showUserColumns" :key="column.id" :label="column.name" :prop="column.codeCamel"> <el-form-item v-for="column in showUserColumns"
:key="column.id"
:label="column.name"
:prop="column.codeCamel">
<!--el-input<el-input v-if="column.codeCamel==='password'" type="password" <!--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>-->
...@@ -32,7 +39,8 @@ ...@@ -32,7 +39,8 @@
</el-option> </el-option>
</el-select> </el-select>
<!-- 4 文本域 --> <!-- 4 文本域 -->
<el-input v-else-if="column.widgetType === 4" v-model="formModel[column.codeCamel]" <el-input v-else-if="column.widgetType === 4"
v-model="formModel[column.codeCamel]"
type="textarea" type="textarea"
:autosize="{ minRows: 2, maxRows: 5}" :autosize="{ minRows: 2, maxRows: 5}"
:rows="2"> :rows="2">
...@@ -56,10 +64,12 @@ ...@@ -56,10 +64,12 @@
<el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio> <el-radio v-for="(option,key) in column.options" :key="key" :label="key">{{option}}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<!--按钮-->
<el-form-item v-if="buttons && buttons.length > 0"> <el-form-item v-if="buttons && buttons.length > 0">
<el-col :span="12" v-for="(btn,key) in buttons" :key="key"> <el-col :span="12" v-for="(btn,key) in buttons" :key="key">
<el-button v-if="btn === '确定' || btn === '提交'" type="primary" @click="onSubmit()">{{btn}}</el-button> <el-button v-if="btn === '确定' || btn === '提交' || btn === '保存' || btn === '发布'" type="primary" @click="onSubmit()">{{btn}}</el-button>
<el-button v-if="btn === '取消' || btn === '重置'" type="primary" @click="resetForm()">{{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-col>
</el-form-item> </el-form-item>
</el-form> </el-form>
...@@ -69,6 +79,7 @@ ...@@ -69,6 +79,7 @@
<div></div> <div></div>
</el-col> </el-col>
</el-row> </el-row>
</div>
</template> </template>
<script> <script>
...@@ -105,8 +116,10 @@ ...@@ -105,8 +116,10 @@
* { name: 'username', widgetType: 1 }, * { name: 'username', widgetType: 1 },
* { name: 'securityLevel', widgetType: 5 }, * { name: 'securityLevel', widgetType: 5 },
* { name: 'type', widgetType: 2, options: ['企业', '代理商'] }, * { name: 'type', widgetType: 2, options: ['企业', '代理商'] },
* { name: 'avatar', widgetType: 3 }, { name: 'departmentId', widgetType: 4 }, * { name: 'avatar', widgetType: 3 },
* { name: 'createTime', widgetType: 6 } * { name: 'departmentId', widgetType: 4 },
* { name: 'createTime', widgetType: 6 },
* { name: 'identity', widgetType: 7, options: ['会员', '访客'] },
* ] * ]
*/ */
columns: { columns: {
...@@ -122,7 +135,9 @@ ...@@ -122,7 +135,9 @@
} }
}, },
/** /**
* 非必传，指定要显示的按钮(确定、保存、取消、提交、重置)。默认不显示。示例：['确定', '取消'] * 非必传，指定要显示的按钮(确定、保存、取消、提交、重置)，默认不显示。
* 如果要传入了确定/取消的回调函数，请先传入对应的按钮
* 示例：['确定', '取消']
*/ */
buttons: { buttons: {
type: Array, type: Array,
...@@ -134,6 +149,22 @@ ...@@ -134,6 +149,22 @@
tableId: { tableId: {
type: String, type: String,
required: false required: false
},
/**
* 非必传，传入点击'确定'后的回调函数，该回调函数会在form组件onSubmit函数的成功回调中调用
* 如果要传入该函数，请先传入对应的按钮
*/
confirmFunction: {
type: Function,
required: false
},
/**
* 非必传，传入点击'取消'后的回调函数，该回调函数会在点击'取消'后直接调用
* 如果要传入该函数，请先传入对应的按钮
*/
cancelFunction: {
type: Function,
required: false
} }
}, },
data() { data() {
...@@ -305,7 +336,6 @@ ...@@ -305,7 +336,6 @@
// console.log(self.showUserColumns) // console.log(self.showUserColumns)
} }
}) })
console.log(self.showUserColumns)
// 提取v-model绑定的变量 // 提取v-model绑定的变量
_.each(self.showUserColumns, function(item) { _.each(self.showUserColumns, function(item) {
if (item.widgetType === 3 && item.options && item.options.length > 0) { if (item.widgetType === 3 && item.options && item.options.length > 0) {
...@@ -314,7 +344,7 @@ ...@@ -314,7 +344,7 @@
self.$set(self.formModel, item.codeCamel, '') self.$set(self.formModel, item.codeCamel, '')
} }
}) })
console.log(self.formModel)
if (!request.defaults.baseURL) { if (!request.defaults.baseURL) {
request.defaults.baseURL = '/org/api' request.defaults.baseURL = '/org/api'
} }
...@@ -358,6 +388,7 @@ ...@@ -358,6 +388,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', {
...@@ -375,6 +406,7 @@ ...@@ -375,6 +406,7 @@
}).then(resp => { }).then(resp => {
console.log('创建成功') console.log('创建成功')
self.resetForm() self.resetForm()
self.confirmFunction && self.confirmFunction()
}) })
} }
} else { } else {
...@@ -394,7 +426,7 @@ ...@@ -394,7 +426,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 @ 4bd71744
<template> <template>
<div> <div>
<hm-complex-form :schema="schema['HmUser']" :columns="showUserColumns" :buttons="showUserButtons" :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>
...@@ -19,7 +24,6 @@ ...@@ -19,7 +24,6 @@
}, },
data() { data() {
return { return {
// showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'createTime']
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框 // widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }], 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: ['会员', '访客'] }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置 // 要显示按钮 暂只支持确定、保存、取消、提交、重置
...@@ -36,7 +40,14 @@ ...@@ -36,7 +40,14 @@
// console.log(this.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 @ 4bd71744
<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 @ 4bd71744
This diff is collapsed.
src/views/haomo/components/iconMenu/iconfont.css 0 → 100755
View file @ 4bd71744
@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 @ 4bd71744
<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/tables/HmComplexTable.md
View file @ 4bd71744
...@@ -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/index.vue
View file @ 4bd71744
...@@ -21,10 +21,10 @@ ...@@ -21,10 +21,10 @@
}, },
data() { data() {
return { return {
showUserColumns: ['mobile', 'loginid', 'username', 'email'], showUserColumns: ['mobile', 'loginid', 'username', 'email', 'securityLevel'],
userFilters: [ userFilters: [
{ placeholder: '过滤手机号', 'mobile': { 'like': '' }}, { placeholder: '过滤手机号', 'mobile': { 'like': '' }, isShow: true },
{ placeholder: '过滤用户名', 'username': { 'equalTo': '' }} { placeholder: '过滤用户名', 'username': { 'equalTo': '' }, isShow: true }
] ]
} }
}, },
...@@ -33,9 +33,40 @@ ...@@ -33,9 +33,40 @@
created() { created() {
this.schema = schema this.schema = schema
this.userOptions = { this.userOptions = {
page_size: 10,
changeValue: { changeValue: {
username: { 1: '是', 0: '否' } 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']
} }
} }
}, },
......
src/views/haomo/schemas/hm_org_schema.js
View file @ 4bd71744
This diff is collapsed.
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