Skip to content

周志凯 / bussiness-platform

Go to a project
Commit e25190df by zhouzk
Options

styles: element

1 parent 2b28f767
Inline Side-by-side
Showing 4 changed files with 178 additions and 8 deletions
src/components/Conditions/DateOptions.vue
<template> <template>
<div> <div class="date-options-container">
<!-- 两种形式 0:select 1:button --> <!-- 两种形式 0:select 1:button -->
<template v-if="showType === 0"> <template v-if="showType === 0">
<!-- select --> <!-- select -->
...@@ -9,39 +9,69 @@ ...@@ -9,39 +9,69 @@
:key="item.value" :key="item.value"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
> />
</el-option>
</el-select> </el-select>
</template> </template>
<template v-else> <template v-else>
<!-- button --> <!-- button -->
<div class="date-btn-wrapper">
<span
class="date-btn-item"
:class="{ active: dateType === item.value }"
v-for="item in dateList"
:key="item.value"
@click="onDateChange(item.value)"
>
<span class="date-btn">{{ item.label }}</span>
</span>
</div>
</template> </template>
<div class="date-option-wrapper">
<el-date-picker <el-date-picker
class="date-option-item"
v-show="dateType === 'day'" v-show="dateType === 'day'"
v-model="dayVal" v-model="dayVal"
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
:picker-options="pickerOptions"
/> />
<el-date-picker <el-date-picker
class="date-option-item"
v-show="dateType === 'week'" v-show="dateType === 'week'"
v-model="weekVal" v-model="weekVal"
type="week" type="week"
format="yyyy 第 WW 周" format="yyyy 第 WW 周"
placeholder="选择周" placeholder="选择周"
:picker-options="pickerOptions"
/> />
<el-date-picker <el-date-picker
class="date-option-item"
v-show="dateType === 'month'" v-show="dateType === 'month'"
v-model="monthVal" v-model="monthVal"
type="month" type="month"
placeholder="选择月" placeholder="选择月"
:picker-options="pickerOptions"
/> />
<el-date-picker <el-date-picker
class="date-option-item"
v-show="dateType === 'year'" v-show="dateType === 'year'"
v-model="yearVal" v-model="yearVal"
type="year" type="year"
placeholder="选择年" placeholder="选择年"
:picker-options="pickerOptions"
/>
<el-date-picker
class="date-option-item"
v-show="dateType === 'custom'"
v-model="customTimeVal"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:picker-options="pickerOptions"
/> />
</div> </div>
</div>
</template> </template>
<script> <script>
...@@ -49,6 +79,7 @@ const list = ['day', 'week', 'month', 'year'].map(item => ({ ...@@ -49,6 +79,7 @@ const list = ['day', 'week', 'month', 'year'].map(item => ({
label: item, label: item,
value: item value: item
})) }))
export default { export default {
name: 'DateOptions', name: 'DateOptions',
props: { props: {
...@@ -67,10 +98,16 @@ export default { ...@@ -67,10 +98,16 @@ export default {
}, },
data() { data() {
return { return {
pickerOptions: {
disabledDate(time) {
return time.getTime() > Date.now()
}
},
dayVal: '', dayVal: '',
weekVal: '', weekVal: '',
monthVal: '', monthVal: '',
yearVal: '' yearVal: '',
customTimeVal: ''
} }
}, },
computed: { computed: {
...@@ -82,6 +119,74 @@ export default { ...@@ -82,6 +119,74 @@ export default {
this.$emit('update:defaultsDate', val) this.$emit('update:defaultsDate', val)
} }
} }
},
created() {
// 初始化时间 日周月年自定义
this.dayVal = new Date()
this.weekVal = new Date()
this.monthVal = new Date()
this.yearVal = new Date()
this.customTimeVal = new Date()
},
methods: {
onDateChange(val) {
this.dateType = val
}
} }
} }
</script> </script>
<style lang="scss" scoped>
.date-options-container {
display: inline-block;
position: relative;
&::after {
content: '';
display: table;
clear: both;
}
}
.date-btn-wrapper {
display: inline-block;
&::after {
content: '';
display: table;
clear: both;
}
}
.date-btn-item {
float: left;
font-size: 14px;
line-height: 1;
padding: 8px 24px;
border: 1px solid #e5e5e5;
margin-right: 36px;
color: #777;
cursor: pointer;
box-sizing: border-box;
&:last-child {
margin-right: 0;
}
&.active {
padding: 8px 24px;
background: #4bbeff;
color: #fff;
border: none;
box-shadow: 0 0 10px -2px #666;
}
}
.date-option-wrapper {
float: right;
padding-left: 36px;
}
.date-option-item {
vertical-align: middle;
line-height: 30px;
}
</style>
src/layouts/BasicLayout.vue
...@@ -19,8 +19,15 @@ ...@@ -19,8 +19,15 @@
</span> </span>
</div> </div>
<div v-show="!collapsed" class="collapsed-content"> <div v-show="!collapsed" class="collapsed-content">
<date-options :defaults-date.sync="dateType" /> <date-options :show-type="1" :defaults-date.sync="dateType" />
collapsed content <div class="operate-wrapper">
<el-button class="operate-btn" type="primary" @click="onConfirm"
>确 定</el-button
>
<el-button class="operate-btn reset-btn" @click="onConfirm"
>取 消</el-button
>
</div>
</div> </div>
</div> </div>
<div class="content" :style="{ marginTop: collapsed ? '72px' : '132px' }"> <div class="content" :style="{ marginTop: collapsed ? '72px' : '132px' }">
...@@ -42,6 +49,11 @@ export default { ...@@ -42,6 +49,11 @@ export default {
collapsed: false, collapsed: false,
dateType: 'day' dateType: 'day'
} }
},
methods: {
onConfirm() {
console.log('dateType::', this.dateType)
}
} }
} }
</script> </script>
...@@ -69,7 +81,6 @@ export default { ...@@ -69,7 +81,6 @@ export default {
top: $headerHeight; top: $headerHeight;
z-index: 2; z-index: 2;
background: #fff; background: #fff;
text-align: center;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
.content-title { .content-title {
font-size: 20px; font-size: 20px;
...@@ -95,6 +106,7 @@ export default { ...@@ -95,6 +106,7 @@ export default {
} }
.condition-top { .condition-top {
text-align: center;
line-height: 60px; line-height: 60px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
} }
...@@ -102,8 +114,17 @@ export default { ...@@ -102,8 +114,17 @@ export default {
.collapsed-content { .collapsed-content {
background: #fff; background: #fff;
height: 58px; height: 58px;
line-height: 58px; // line-height: 58px;
padding: 13px 200px 15px 66px;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1);
box-sizing: border-box;
}
.operate-wrapper {
float: right;
.operate-btn + .operate-btn {
margin-left: 10px;
}
} }
} }
</style> </style>
src/layouts/components/FixedMenu/index.vue
...@@ -18,6 +18,7 @@ ...@@ -18,6 +18,7 @@
class="test" class="test"
:style="{ :style="{
opacity: visible ? 1 : 0, opacity: visible ? 1 : 0,
zIndex: visible ? 1 : -9999,
top: currItemPostion.y, top: currItemPostion.y,
left: currItemPostion.x left: currItemPostion.x
}" }"
......
src/styles/element-ui.scss
...@@ -5,9 +5,52 @@ ...@@ -5,9 +5,52 @@
line-height: 28px; line-height: 28px;
border-radius: 2px; border-radius: 2px;
padding-left: 12px; padding-left: 12px;
border-radius: 2px;
} }
.el-input__icon { .el-input__icon {
line-height: 28px; line-height: 28px;
} }
} }
.date-option-item{
.el-input__inner {
height: 32px;
line-height: 32px;
border-radius: 2px;
}
.el-input__icon {
line-height: 32px;
}
}
.el-button {
font-size: 14px;
padding: 8px 17px;
font-weight: 400;
border-color: #e5e5e5;
color: #666;
border-radius: 2px;
}
.reset-btn {
&:hover,
&:focus {
color: #409eff;
border-color: #c6e2ff;
background-color: #fff;
}
}
.el-button--primary {
background: #0069ff;
border: none;
color: #fff;
&:hover,
&:active,
&.is-active {
background-color: #014fbe;
}
}
Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!