Skip to content

V
VueElementTemplate
Commit 78b1fb5c authored by 杨柠瑞's avatar 杨柠瑞
Browse files
Options

coidng

parents 8eb0a7e9 43fcb0e0
Expand all Show whitespace changes
Inline Side-by-side
Showing with 311 additions and 133 deletions
package.json
View file @ 78b1fb5c
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
"element-ui": "2.0.8", "element-ui": "2.0.8",
"file-saver": "1.3.3", "file-saver": "1.3.3",
"font-awesome": "4.7.0", "font-awesome": "4.7.0",
"fullcalendar": "^3.9.0",
"jquery": "^3.3.1",
"js-cookie": "2.2.0", "js-cookie": "2.2.0",
"jsonlint": "1.6.2", "jsonlint": "1.6.2",
"jszip": "3.1.5", "jszip": "3.1.5",
......
src/views/haomo/components/calendar/HmFullCalendar.vue
View file @ 78b1fb5c
<template> <template>
<div class="calender"> <div class="showcalender">
<i class="el-icon-date" @click="dialogTableVisible = true"></i> <div id='calendar'></div>
<el-dialog :visible.sync="dialogTableVisible" style="line-hight:16px;">
<full-calendar
:events="fcEvents"
lang="zh"
@change-month="changeMonth"
@event-click="eventClick"
@day-click="dayClick"
></full-calendar>
</el-dialog>
</div> </div>
</template> </template>
<script> <script>
import fullCalendar from 'vue-fullcalendar' import $ from 'jquery'
import request from '@/utils/request' import 'fullcalendar'
import _ from 'lodash'
import moment from 'moment'
export default { export default {
name: 'calender', name: 'calender',
// 继承其他组件 // 继承其他组件
extends: {}, extends: {},
// 使用其它组件 // 使用其它组件
components: { components: {
'full-calendar': fullCalendar
}, },
props: { props: {
schema: {
type: Object,
required: true
},
demoEvents: {
type: Object,
required: false
}
},
zh: {
weekNames: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
titleFormat: 'yyyy年MM月'
}, },
data() { data() {
return { return {
fcEvents: [],
dialogTableVisible: false
} }
}, },
computed: { computed: {
...@@ -52,35 +26,14 @@ ...@@ -52,35 +26,14 @@
filters: { filters: {
}, },
created() { created() {
this.getList() $(function() {
}, $('#calendar').fullCalendar({
methods: { defaultView: 'month'
getList() {
const self = this
request(self.schema.modelUnderscorePlural).then(resp => {
console.log(resp.data)
_.each(resp.data, function(item, index) {
const test = {}
test.title = item[self.demoEvents.title]
if (item[self.demoEvents.end] == null) {
item[self.demoEvents.end] = item[self.demoEvents.start]
}
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)
}) })
}, },
'changeMonth'(start, end, current) { methods: {
console.log('changeMonth', start.format(), end.format(), current.format())
},
'eventClick'(event, jsEvent, pos) {
console.log('eventClick', event, jsEvent, pos)
},
'dayClick'(day, jsEvent) {
console.log('dayClick', day, jsEvent)
}
} }
} }
</script> </script>
......
src/views/haomo/components/calendar/index.vue
View file @ 78b1fb5c
<template> <template>
<div class="app-container calendar-list-container"> <div class="app-container calendar-list-container">
<hm-full-calendar :schema="schema['HmUser']" :demoEvents="demoEvents"></hm-full-calendar> <hm-full-calendar></hm-full-calendar>
</div> </div>
</template> </template>
<script> <script>
import HmFullCalendar from './HmFullCalendar.vue' import HmFullCalendar from './HmFullCalendar.vue'
import schema from '../../schemas/hm_org_schema'
export default { export default {
name: 'HmFullCalendar', name: 'HmFullCalendar',
// 继承其他组件 // 继承其他组件
...@@ -23,13 +21,7 @@ ...@@ -23,13 +21,7 @@
}, },
created() { created() {
this.schema = schema
// 传入对应的字段
this.demoEvents = {
title: 'username',
start: 'createTime',
end: 'lastUpdateTime'
}
}, },
methods: {} methods: {}
} }
......
src/views/haomo/components/forms/index.vue
View file @ 78b1fb5c
<template> <template>
<!--:refers="judgeRefers"-->
<div> <div>
<hm-complex-form :schema="schema['HmUser']" <hm-complex-form :schema="schema['HmUser']"
:columns="showUserColumns" :columns="showUserColumns"
:buttons="showUserButtons" :buttons="showUserButtons"
:layout="layout" :layout="layout"
:tips="tips" :tips="tips"
:refers="userRefers"> :refers="userRefers"
:foreignFormFields="foreignFormFields"
:relates="userRelates">
</hm-complex-form> </hm-complex-form>
</div> </div>
</template> </template>
...@@ -72,38 +73,51 @@ ...@@ -72,38 +73,51 @@
// 8文件 // 8文件
{ name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址 { name: '选择头像', codeCamel: 'avatar', widgetType: 8, url: '/api/upload' } // url是后台接口地址
], ],
// CcSubject示例
showUserColumns2: [ showUserColumns2: [
// 1普通input { name: '题目', codeCamel: 'subject' },
{ name: '用户名称', codeCamel: 'username', widgetType: 1 }, { name: '题目类型', codeCamel: 'subjectType', default: 3 },
{ name: '部门ID', codeCamel: 'departmentId', widgetType: 1 }, { name: 'A选项', codeCamel: 'description0', code: 'description', serialNumber: 'A', widgetType: 1, isForeign: true },
{ name: '部门名称', codeCamel: 'departmentName', widgetType: 1 }, { name: 'B选项', codeCamel: 'description1', code: 'description', serialNumber: 'B', widgetType: 1, isForeign: true },
{ name: '密码', codeCamel: 'password', widgetType: 1 }, { name: '正确选项', codeCamel: 'correct', widgetType: 1, isForeign: true, partProp: true },
{ name: '电话', codeCamel: 'mobile', widgetType: 1 }, { name: '试题详解', codeCamel: 'commentary', widgetType: 1 }
{ name: '电子邮件', codeCamel: 'email', widgetType: 1 },
{ name: '新建时间', codeCamel: 'createTime', widgetType: 1 },
{ name: '登陆id', codeCamel: 'loginid', widgetType: 1 }
], ],
userIncludes: { // schema['CcMenuResource'] + userRelates + showUserColumns3 理论学习示例
'hm_user': { showUserColumns3: [
includes: ['user_id'] { name: '标题', codeCamel: 'title', widgetType: 1 },
} { name: '封面图片', codeCamel: 'thumbnail', widgetType: 8 },
}, { name: '视频', codeCamel: 'videoName', widgetType: 8 },
// 主查外 { name: '简介', codeCamel: 'lntroduction', widgetType: 1 },
{ name: '内容', codeCamel: 'content', widgetType: 4 },
{ name: '发布人', codeCamel: 'publisher', widgetType: 1 }
],
// schema['CcSubject']+foreignFormFields+userRefers+showUserColumns2 判断题示例
// 第一个值为外键字段(codeCamel)
foreignFormFields: ['ccSubjectId', 'description', 'correct', 'serialNumber'],
// 主查外表 外键字段
userRefers: { userRefers: {
'cc_shift': { 'cc_option': {
includes: ['applicant_id'] includes: ['ccSubjectId']
} }
}, },
// userIncludes: {
// 'hm_user': {
// includes: ['user_id']
// }
// },
// 要显示按钮 // 要显示按钮
showUserButtons: [ showUserButtons: [
{ text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData }, { text: '确定', type: 1, method: this.method1, beforeSubmit: this.processData },
{ text: '重置', type: 2, method: this.method2 }, { text: '重置', type: 2, method: this.method2 },
{ text: '生成', method: this.method4 }, { text: '生成', method: this.method4 },
// { text: '预览', method: this.method5 },
// { text: '预览2', method: this.method5 },
{ text: '取消', type: 3, method: this.method3 } { text: '取消', type: 3, method: this.method3 }
], ],
// showUserButtons: [] // showUserButtons: []
// 布局方式 // 布局方式
layout: { left: 4, middle: 16, right: 4 }, layout: { left: 2, middle: 20, right: 2 },
// 自定义提示消息 // 自定义提示消息
tips: { tips: {
hidde: false, // 是否显示提示，默认false显示 hidde: false, // 是否显示提示，默认false显示
...@@ -128,16 +142,22 @@ ...@@ -128,16 +142,22 @@
autosize: { minRows: 3, maxRows: 5 }, autosize: { minRows: 3, maxRows: 5 },
rows: 3 rows: 3
}, },
quillEdito: { style: { width: '65%' }} quillEditor: { style: { width: '65%' }}
}, },
// 'cc_option': {
// includes: ['ccSubjectId'] // 关联表 本表即页面显示的要创建的表'CcMenuResource' 中间表'cc_menu_resource_associations'
// } // 间接关联表'cc_secondary_menu_dictionaries'
judgeRefers: { // 主查外 userRelates: [
'cc_hm_user': { // 间接关联表
includes: ['applicantId'] { indirectTable: 'cc_secondary_menu_dictionaries', // 下划线复数
} // 过滤查询的条件
filters: { 'cc_secondary_menu_dictionary': { 'name': { equalTo: '理论学习' }}}
},
// 中间表
{ relateTable: 'cc_menu_resource_associations',
relateKeys: ['resourceId', 'menuId'] // 中间表与主表(本表)字段 与间接关联表对应字段
} }
]
} }
}, },
computed: { computed: {
...@@ -169,7 +189,12 @@ ...@@ -169,7 +189,12 @@
method3() { method3() {
console.log('method3') console.log('method3')
}, },
method4() { method4(formModel) {
console.log(formModel)
console.log('method4')
},
method5(formModel) {
console.log(formModel)
console.log('method4') console.log('method4')
} }
} }
......
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