|
|
@@ -0,0 +1,131 @@
|
|
|
+<template>
|
|
|
+ <div class="cord-header">
|
|
|
+ <div v-if="title" class="left" />
|
|
|
+ <el-tooltip v-if="title" :content="$t(title)" placement="top-start">
|
|
|
+ <div class="title text-ellipsis">{{ $t(title) }}</div>
|
|
|
+ </el-tooltip>
|
|
|
+
|
|
|
+ <el-radio-group
|
|
|
+ v-model="tabPosition"
|
|
|
+ style="margin-right: 20px"
|
|
|
+ @input="changeTab"
|
|
|
+ >
|
|
|
+ <el-radio-button
|
|
|
+ v-for="item in shortcutDate"
|
|
|
+ :key="item.label"
|
|
|
+ :label="item.value"
|
|
|
+ >{{ $t(item.label) }}</el-radio-button
|
|
|
+ >
|
|
|
+ </el-radio-group>
|
|
|
+
|
|
|
+ <el-date-picker
|
|
|
+ v-model="daterange"
|
|
|
+ :clearable="false"
|
|
|
+ type="daterange"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ :range-separator="$t('至')"
|
|
|
+ :start-placeholder="$t('开始日期')"
|
|
|
+ :end-placeholder="$t('结束日期')"
|
|
|
+ :picker-options="pickerOptions"
|
|
|
+ @change="pickerChange"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: "header",
|
|
|
+ props: {
|
|
|
+ title: String,
|
|
|
+ subTitle: String,
|
|
|
+ shortcutDate: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [
|
|
|
+ {
|
|
|
+ label: "近7日",
|
|
|
+ value: "近七日",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "近1个月",
|
|
|
+ value: "近一月",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: "近半年",
|
|
|
+ value: "近半年",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ returnWhere: Function,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ daterange: ["", ""],
|
|
|
+ tabPosition: "近七日",
|
|
|
+ pickerOptions: {
|
|
|
+ disabledDate(time) {
|
|
|
+ return time.getTime() > Date.now();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ changeTab() {
|
|
|
+ this.daterange = ["", ""];
|
|
|
+ this.$emit("returnWhere", {
|
|
|
+ type: this.tabPosition,
|
|
|
+ });
|
|
|
+ },
|
|
|
+ pickerChange(e) {
|
|
|
+ this.tabPosition = "";
|
|
|
+ this.$emit("returnWhere", {
|
|
|
+ begindate: e[0],
|
|
|
+ enddate: e[1],
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.cord-header {
|
|
|
+ display: flex;
|
|
|
+ height: 32px;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.cord-header div {
|
|
|
+ flex-shrink: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.left {
|
|
|
+ width: 6px;
|
|
|
+ height: 26px;
|
|
|
+ background: #3874f6;
|
|
|
+ margin-right: 22px;
|
|
|
+}
|
|
|
+
|
|
|
+.title {
|
|
|
+ flex: 1;
|
|
|
+ width: 0;
|
|
|
+ font-family: Microsoft YaHei, Microsoft YaHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #333333;
|
|
|
+ padding-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.text-ellipsis {
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -o-text-overflow: ellipsis;
|
|
|
+}
|
|
|
+/deep/ .el-date-editor {
|
|
|
+ width: 220px;
|
|
|
+}
|
|
|
+/deep/ .el-date-editor .el-range__close-icon {
|
|
|
+ width: 0 !important;
|
|
|
+}
|
|
|
+</style>
|
