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
Expand all Show 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
# 安装依赖
npm install
   
# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
......
config/index.js
View file @ 9b999237
......@@ -22,7 +22,7 @@ module.exports = {
// Various Dev Server settings
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,
errorOverlay: true,
notifyOnErrors: false,
......
src/main.js
View file @ 9b999237
import Vue from 'vue'
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
......@@ -20,6 +21,7 @@ import './mock' // simulation data
import 'quill/dist/quill.core.css' // 富文本CSS
import 'quill/dist/quill.snow.css' // 富文本CSS
import 'swiper/dist/css/swiper.css' // swiper css
import * as filters from './filters' // global filters
......@@ -28,6 +30,7 @@ import Icon from 'vue-awesome/components/Icon'
Vue.component('icon', Icon)
Vue.use(VueQuillEditor) // 富文本
Vue.use(VueAwesomeSwiper) // vue-awesome-swiper
Vue.use(Element, {
size: 'medium', // set element-ui default size
i18n: (key, value) => i18n.t(key, value)
......
src/router/index.js
View file @ 9b999237
......@@ -118,6 +118,33 @@ export const asyncRouterMap = [
title: '面板',
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({
service.interceptors.request.use(config => {
// Do something before request is sent
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
}, 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
<hm-complex-form :tableId="tableId"
:columns="['username', 'loginid', 'password', 'mobile', 'email']"
<hm-complex-form :columns="[
{ 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 }
]"
:schema="{
'model': 'HmUser',
'modelPlural': 'HmUsers',
......@@ -200,22 +206,22 @@
]
}"></hm-complex-form>
```
### 指定显示的表单类型
### 指定显示的表单类型及按钮
```vue
<template>
<div>
<hm-complex-form
<hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns"
:tableId="tableId"
:schema="schema['HmUser']"
:columns="showUserColumns">
:buttons="showUserButtons">
</hm-complex-form>
</div>
</template>
<script>
export default {
name: 'HmComplexForm',
name: 'HmComplexFormIndex',
data() {
return {
schema: {
......@@ -416,7 +422,9 @@
]
}
},
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() {
......@@ -425,4 +433,6 @@
}
}
</script>
```
\ No newline at end of file
src/views/haomo/components/forms/index.vue
View file @ 9b999237
<template>
<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>
</div>
</template>
......@@ -10,7 +15,7 @@
import schema from '../../schemas/hm_org_schema'
export default {
name: 'HmComplexForm',
name: 'HmComplexFormIndex',
// 继承其他组件
extends: {},
// 使用其它组件
......@@ -19,8 +24,11 @@
},
data() {
return {
showUserColumns: ['username', 'loginid', 'password', 'mobile', 'email', 'securityLevel']
// showUserColumns: []
// widgetType值 1：普通input 2：下拉框 (如果是下拉框 再传一个options表示下拉框选项)3：复选框 4：文本域 5：富文本 6：日期 7：单选框
showUserColumns: [{ name: 'username', widgetType: 1 }, { name: 'securityLevel', widgetType: 5 }, { name: 'type', widgetType: 2, options: ['选项1', '选项2'] }, { name: 'avatar', widgetType: 3, options: ['美女', '帅哥'] }, { name: 'departmentId', widgetType: 4 }, { name: 'createTime', widgetType: 6 }, { name: 'loginid', widgetType: 7, options: ['会员', '访客'] }],
// 要显示按钮 暂只支持确定、保存、取消、提交、重置
showUserButtons: ['确定', '取消']
// showUserButtons: []
}
},
computed: {
......@@ -29,9 +37,17 @@
},
created() {
this.schema = schema
// console.log(this.schema)
this.tableId = '0e26566e953449a7a7500c34be39fd26'
},
methods: {}
methods: {
confirm() {
console.log('确定')
},
cancel() {
console.log('取消')
}
}
}
</script>
<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
This diff is collapsed.
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 @@
</template>
<script>
/**
* 毫末科技的面板组件.
*
* demo地址: factory.haomo-studio.com/vue-element/#/haomo/components/panel
* @author 高天阳 gty@haomo-studio.com
*/
export default {
name: 'HmPanel',
// 继承其他组件
......
src/views/haomo/components/tables/HmComplexTable.md
View file @ 9b999237
......@@ -85,7 +85,8 @@
<div class="app-container calendar-list-container">
<hm-complex-table :schema="schema['HmUser']"
:columns="showUserColumns"
:filters="userFilters"></hm-complex-table>
:filters="userFilters"
:options="userOptions"></hm-complex-table>
</div>
</template>
......@@ -292,15 +293,52 @@
]
}
},
showUserColumns: ['mobile', 'loginid'],
showUserColumns: ['mobile', 'loginid', 'username', 'email'],
userFilters: [
{ placeholder: '过滤手机号', 'mobile': { 'like': '' }},
{ placeholder: '过滤登录Id', 'loginid': { 'like': '3001' }}
{ placeholder: '过滤用户名', 'username': { 'equalTo': '' }}
]
}
},
created() {
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>
......
src/views/haomo/components/tables/index.vue
View file @ 9b999237
......@@ -2,9 +2,8 @@
<div class="app-container calendar-list-container">
<hm-complex-table :schema="schema['HmUser']"
:columns="showUserColumns"
:filters="userFilters"></hm-complex-table>
<hm-complex-table :schema="schema['Department']"></hm-complex-table>
<hm-complex-table :schema="schema['Role']"></hm-complex-table>
:filters="userFilters"
:options="userOptions"></hm-complex-table>
</div>
</template>
......@@ -22,10 +21,10 @@
},
data() {
return {
showUserColumns: ['mobile', 'loginid'],
showUserColumns: ['mobile', 'loginid', 'username', 'email'],
userFilters: [
{ placeholder: '过滤手机号', 'mobile': { 'like': '' }},
{ placeholder: '过滤登录Id', 'loginid': { 'like': '3001' }}
{ placeholder: '过滤用户名', 'username': { 'equalTo': '' }}
]
}
},
......@@ -33,6 +32,43 @@
},
created() {
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: {}
}
......
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>
<el-row type="flex">
<el-col :span="10" class="detail-content" style="margin:0 auto" >
<el-form style="border: 0.5px solid #e6ebf5">
<el-col :span="options.span" class="detail-content" style="margin:0 auto;border: 0.5px solid #e6ebf5" >
<el-row type="flex">
<el-col style="height: 45px;background-color: #00BF8B" ></el-col>
</el-row>
<el-row type="flex" style="margin-top:35px">
<el-row type="flex" style="margin-top:30px">
<el-col style="margin: 0 auto;height: 70px;width:433px;text-align: center;line-height: 70px;font-size: 35px;color:#586C8C;font-weight: bold" >
<img />张家口人民检察院
</el-col>
</el-row>
<el-form-item prop="pass">
<el-input class="style" style="width:433px;margin: 0 auto;margin-top:25px;display: block;" prefix-icon="el-icon-search" auto-complete="off"></el-input>
<el-form :model="hm_form" status-icon :rules="rules2" ref="hm_form" style="width: 433px;margin: 0 auto;">
<el-form-item prop="account">
<el-input class="style" placeholder="请输入账号" v-model="hm_form.account" style="margin-top:25px;display: block;" prefix-icon="el-icon-search" auto-complete="off"></el-input>
</el-form-item>
<el-form-item prop="checkPass">
<el-input type="password" style="width:433px;margin: 0 auto;display: block;border-width: 0px;border-bottom-width: 1px;border-radius: 0px;" prefix-icon="el-icon-search" suffix-icon="el-icon-view" auto-complete="off"></el-input>
<el-form-item prop="pass">
<el-input type="password" placeholder="请输入密码" v-model="hm_form.pass" style="display: block;border-width: 0px;border-bottom-width: 1px;border-radius: 0px;" prefix-icon="el-icon-search" suffix-icon="el-icon-view" auto-complete="off"></el-input>
</el-form-item>
<el-form-item>
<el-button type="success" style="width: 178px;height: 44px ;font-size:16px;background-color: #00BF8B;margin: 0 auto;display: block">提交</el-button>
<el-button type="success" @click="submitForm('hm_form',options)" style="width: 178px;height: 44px ;font-size:16px;background-color: #00BF8B;margin: 0 auto;display: block">提交</el-button>
</el-form-item>
</el-form>
</el-col>
......@@ -38,7 +38,34 @@
}
},
data() {
var account = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入账号'))
} else {
callback()
}
}
var pass = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入密码'))
} else {
callback()
}
}
return {
hm_form: {
account: '',
pass: ''
},
rules2: {
account: [
{ validator: account, trigger: 'blur' }
],
pass: [
{ validator: pass, trigger: 'blur' }
]
}
}
},
computed: {
},
......@@ -47,7 +74,16 @@
created() {
},
methods: {
submitForm(formName, callback) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!' + JSON.stringify(callback))
} else {
console.log('error submit!!')
return false
}
})
}
}
}
</script>
......
src/views/haomo/pages/login/index.vue
View file @ 9b999237
<template>
<div>
<hm-login></hm-login>
<hm-login :options="options"></hm-login>
</div>
</template>
......@@ -21,8 +21,18 @@
filters: {
},
created() {
this.options = {
spx: function(account, pass) {
alert(account + pass)
},
methods: {}
span: 10
}
},
methods: {
test: function() {
alert(4)
}
}
}
</script>
<style scoped>
......
src/views/haomo/schemas/hm_org_schema.js
View file @ 9b999237
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