1.基于Bootstrap的栅格布局
<div id="home" style="margin-top: 60px;">
<div class="col-md-6 col-md-offset-3">
<el-calendar>
<template slot="dateCell" slot-scope="{date, data}">
<div style="width: 100%; height: 100%" @click="dialogVisible = true">
<p :class="data.isSelected ? 'is-selected' : ''">
{{ data.day.split('-')[2] }}
</p>
</div>
</template>
</el-calendar>
</div>
<el-dialog
title="新增事件"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose">
<div class="row">
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-4 control-label bk-lh30 pt0">工作日期</label>
<div class="col-sm-8">
<el-date-picker v-model="addDate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-4 control-label bk-lh30 pt0">工作类别</label>
<div class="col-sm-8">
<el-select v-model="addJobType" style="width: 100%">
<el-option
v-for="item in jobTypeData"
:label="item.key"
:value="item.key">
</el-option>
</el-select>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-4 control-label bk-lh30 pt0">客户名称</label>
<div class="col-sm-8">
<el-select v-model="searchCustomer" placeholder="请选择客户" style="width: 100%">
<el-option
v-for="item in customerData"
:label="item.bk_username"
:value="item.bk_username">
</el-option>
</el-select>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-4 control-label bk-lh30 pt0">开始时间</label>
<div class="col-sm-8">
<el-time-select v-model="addStartTime"
:picker-options="{start: '08:00',step: '00:30',end: '23:30'}"></el-time-select>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-4 control-label bk-lh30 pt0">事件状态</label>
<div class="col-sm-8">
<el-select v-model="addStatus" style="width: 100%">
<el-option
v-for="item in statusData"
:label="item.key"
:value="item.key">
</el-option>
</el-select>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-4 control-label bk-lh30 pt0">项目名称</label>
<div class="col-sm-8">
<el-select v-model="addProjectName" style="width: 100%">
<el-option
v-for="item in projectData"
:label="item.key"
:value="item.title">
</el-option>
</el-select>
</div>
</div>
</form>
</div>
<div class="col-md-4">
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-4 control-label bk-lh30 pt0">结束时间</label>
<div class="col-sm-8">
<el-time-select v-model="addEndTime"
:picker-options="{start: '08:00',step: '00:30',end: '23:30'}"></el-time-select>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="control-label col-sm-4 bk-lh30 pt0">地点</label>
<div class="col-sm-8">
<el-select v-model="addAddress" style="width: 100%">
<el-option
v-for="item in addressData"
:label="item.key"
:value="item.key">
</el-option>
</el-select>
</div>
</div>
</form>
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="control-label col-sm-4 bk-lh30 pt0">事件性质</label>
<div class="col-sm-8">
<el-select v-model="addEventType" style="width: 100%">
<el-option
v-for="item in eventTypeData"
:label="item.key"
:value="item.key">
</el-option>
</el-select>
</div>
</div>
</form>
</div>
<div class="col-md-8">
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-2 control-label bk-lh30 pt0">事件标题：</label>
<div class="col-sm-10">
<el-select v-model="addEventTitle" placeholder="请选择" style="width: 100%">
<el-option v-for="item in eventTitleData" :label="item.key"
:value="item.title"></el-option>
</el-select>
</div>
</div>
</form>
</div>
<div class="col-md-8">
<form class="form-horizontal">
<div class="form-group clearfix ">
<label class="col-sm-2 control-label bk-lh30 pt0">工作内容：</label>
<div class="col-sm-10">
<el-input v-model="addJobContent" type="textarea"
:autosize="{ minRows: 2, maxRows: 4}"></el-input>
</div>
</div>
</form>
</div>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
<script type="text/javascript">
new Vue({
el: '#home',
data: {
dialogVisible: false,
addDate: new Date(),
addJobType: '项目工作',
addStatus: '计划中',
addProjectName: '',
addAddress: '广州公司',
addEventTitle: '',
searchCustomer: '',
addEventType: '计划任务',
addJobContent: '',
addStartTime: '09:00',
addEndTime: '18:00',
projectData: [],
eventTitleData: [],
jobTypeData: [
{
"key": "项目工作"
},
{
"key": "售前工作"
},
{
"key": "讲师授课"
},
{
"key": "知识准备"
},
{
"key": "团队管理"
},
{
"key": "年假调休"
},
{
"key": "产品研发"
},
{
"key": "客户拜访"
},
{
"key": "其他工作"
}
],
eventTypeData: [
{
"key": "计划任务"
},
{
"key": "项目事件"
},
{
"key": "其他工作"
}
],
addressData: [
{
"key": "广州公司"
},
{
"key": "深圳公司"
},
{
"key": "北京公司"
},
{
"key": "上海公司"
},
{
"key": "客户处"
},
{
"key": "其他"
}
],
statusData: [
{
"key": "计划中"
},
{
"key": "执行未完成"
},
{
"key": "已完成"
}
],
customerData: []
},
mounted() {
this.init()
},
methods: {
init() {
},
handleClose(done) {
this.dialogVisible = false
}
}
})
</script>
<style>
.is-selected {
color: red;
}
.el-dialog__header {
background: #3498DB;
}
.el-dialog__title {
color: white;
}
.el-icon-close:before {
color: white;
}
.el-dialog__footer {
text-align: center;
}
</style>
2.基于Element的栅格布局
<div id="home" style="margin-top: 60px;">
<el-row>
<el-col :span="10" :offset="7">
<el-calendar>
<template slot="dateCell" slot-scope="{date, data}">
<div style="width: 100%; height: 100%" @click="dialogVisible = true">
<p :class="data.isSelected ? 'is-selected' : ''">{{ data.day.split('-')[2] }}</p>
</div>
</template>
</el-calendar>
</el-col>
</el-row>
<el-dialog title="新增事件" :visible.sync="dialogVisible" width="60%" :before-close="handleClose">
<el-row :gutter="40">
<el-col :span="8">
<el-form label-width="100px">
<el-form-item label="工作日期">
<el-date-picker v-model="addDate" type="date" format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width: 100%">
</el-date-picker>
</el-form-item>
<el-form-item label="工作类别">
<el-select v-model="addJobType" style="width: 100%">
<el-option v-for="item in jobTypeData" :label="item.key" :value="item.key"></el-option>
</el-select>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="searchCustomer" placeholder="请选择客户" style="width: 100%">
<el-option v-for="item in customerData" :label="item.bk_username" :value="item.bk_username"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="8">
<el-form label-width="100px">
<el-form-item label="开始时间">
<el-time-select v-model="addStartTime" :picker-options="{start: '08:00',step: '00:30',end: '23:30'}" style="width: 100%"></el-time-select>
</el-form-item>
<el-form-item label="事件状态">
<el-select v-model="addStatus" style="width: 100%">
<el-option v-for="item in statusData" :label="item.key" :value="item.key"></el-option>
</el-select>
</el-form-item>
<el-form-item label="项目名称">
<el-select v-model="addProjectName" style="width: 100%">
<el-option v-for="item in projectData" :label="item.key" :value="item.title"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="8">
<el-form label-width="100px">
<el-form-item label="结束时间">
<el-time-select v-model="addEndTime" :picker-options="{start: '08:00',step: '00:30',end: '23:30'}" style="width: 100%"></el-time-select>
</el-form-item>
<el-form-item label="地点">
<el-select v-model="addAddress" style="width: 100%">
<el-option v-for="item in addressData" :label="item.key" :value="item.key"></el-option>
</el-select>
</el-form-item>
<el-form-item label="事件性质">
<el-select v-model="addEventType" style="width: 100%">
<el-option v-for="item in eventTypeData" :label="item.key" :value="item.key"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="16">
<el-form label-width="100px">
<el-form-item label="事件标题">
<el-select v-model="addEventTitle" placeholder="请选择" style="width: 100%">
<el-option v-for="item in eventTitleData" :label="item.key" :value="item.title"></el-option>
</el-select>
</el-form-item>
</el-form>
</el-col>
<el-col :span="16">
<el-form label-width="100px">
<el-form-item label="工作内容">
<el-input v-model="addJobContent" type="textarea" :autosize="{ minRows: 2, maxRows: 4}"></el-input>
</el-form-item>
</el-form>
</el-col>
</el-row>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
<script type="text/javascript">
new Vue({
el: '#home',
data: {
dialogVisible: false,
addDate: new Date(),
addJobType: '项目工作',
addStatus: '计划中',
addProjectName: '',
addAddress: '广州公司',
addEventTitle: '',
searchCustomer: '',
addEventType: '计划任务',
addJobContent: '',
addStartTime: '09:00',
addEndTime: '18:00',
projectData: [],
eventTitleData: [],
jobTypeData: [
{
"key": "项目工作"
},
{
"key": "售前工作"
},
{
"key": "讲师授课"
},
{
"key": "知识准备"
},
{
"key": "团队管理"
},
{
"key": "年假调休"
},
{
"key": "产品研发"
},
{
"key": "客户拜访"
},
{
"key": "其他工作"
}
],
eventTypeData: [
{
"key": "计划任务"
},
{
"key": "项目事件"
},
{
"key": "其他工作"
}
],
addressData: [
{
"key": "广州公司"
},
{
"key": "深圳公司"
},
{
"key": "北京公司"
},
{
"key": "上海公司"
},
{
"key": "客户处"
},
{
"key": "其他"
}
],
statusData: [
{
"key": "计划中"
},
{
"key": "执行未完成"
},
{
"key": "已完成"
}
],
customerData: []
},
mounted() {
this.init()
},
methods: {
init() {
},
handleClose(done) {
this.dialogVisible = false
}
}
})
</script>
<style>
.is-selected {
color: red;
}
.el-dialog__header {
background: #3498DB;
}
.el-dialog__title {
color: white;
}
.el-icon-close:before {
color: white;
}
.el-dialog__footer {
text-align: center;
}
</style>
3.实现效果
