|
@@ -0,0 +1,228 @@
|
|
|
+<template>
|
|
|
+ <div class="selectDay">
|
|
|
+ <div
|
|
|
+ v-show="type != 3"
|
|
|
+ style="
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ border-style: solid;
|
|
|
+ border-color: #f5f7fa;
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-for="(item, index) in timeSelect[type]"
|
|
|
+ :key="index"
|
|
|
+ style="margin: 3px"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="hover-style"
|
|
|
+ style="
|
|
|
+ border-radius: 5px;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 12px;
|
|
|
+ cursor: pointer;
|
|
|
+ "
|
|
|
+ @click="clickCalendar(index)"
|
|
|
+ >
|
|
|
+ <div>{{ item }}</div>
|
|
|
+ <div
|
|
|
+ v-if="collectClickCalendar.indexOf(index) > -1"
|
|
|
+ style="
|
|
|
+ width: 4px;
|
|
|
+ height: 4px;
|
|
|
+ border-radius: 50%;
|
|
|
+ background-color: red;
|
|
|
+ position: relative;
|
|
|
+ left: calc(50% - 2px);
|
|
|
+ "
|
|
|
+ ></div>
|
|
|
+ <div v-else style="width: 4px; height: 4px"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div v-show="type == 3">
|
|
|
+ <el-date-picker
|
|
|
+ clearable
|
|
|
+ size="small"
|
|
|
+ style="margin-top: 10px; width: 200px"
|
|
|
+ v-model="collectClickDay"
|
|
|
+ type="dates"
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
+ placeholder="选择提醒时间设置"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { scrollTo } from "@/utils/scroll-to";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "SelectDay",
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // type: 3,
|
|
|
+ updateForm: {},
|
|
|
+ // collectClickDay: [],
|
|
|
+ // collectClickCalendar: [],
|
|
|
+ timeSelect: [
|
|
|
+ ,
|
|
|
+ ["周天", "周一", "周二", "周三", "周四", "周五", "周六"],
|
|
|
+ [
|
|
|
+ "01",
|
|
|
+ "02",
|
|
|
+ "03",
|
|
|
+ "04",
|
|
|
+ "05",
|
|
|
+ "06",
|
|
|
+ "07",
|
|
|
+ "08",
|
|
|
+ "09",
|
|
|
+ "10",
|
|
|
+ "11",
|
|
|
+ "12",
|
|
|
+ "13",
|
|
|
+ "14",
|
|
|
+ "15",
|
|
|
+ "16",
|
|
|
+ "17",
|
|
|
+ "18",
|
|
|
+ "19",
|
|
|
+ "20",
|
|
|
+ "21",
|
|
|
+ "22",
|
|
|
+ "23",
|
|
|
+ "24",
|
|
|
+ "25",
|
|
|
+ "26",
|
|
|
+ "27",
|
|
|
+ "28",
|
|
|
+ "29",
|
|
|
+ "30",
|
|
|
+ "31",
|
|
|
+ ],
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ // total: {
|
|
|
+ // required: true,
|
|
|
+ // type: Number
|
|
|
+ // },
|
|
|
+ // page: {
|
|
|
+ // type: Number,
|
|
|
+ // default: 1
|
|
|
+ // },
|
|
|
+ // limit: {
|
|
|
+ // type: Number,
|
|
|
+ // default: 10
|
|
|
+ // },
|
|
|
+ type: {
|
|
|
+ required: true,
|
|
|
+ type: Number
|
|
|
+ },
|
|
|
+ pageSizes: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return [10, 20, 30, 50];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ day: {
|
|
|
+ type: Array,
|
|
|
+ required: true,
|
|
|
+ default() {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ },
|
|
|
+ cycle:{
|
|
|
+ type: Array,
|
|
|
+ required: true,
|
|
|
+ default() {
|
|
|
+ return [];
|
|
|
+ },
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ currentPage: {
|
|
|
+ get() {
|
|
|
+ return this.page;
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ this.$emit("update:page", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ pageSize: {
|
|
|
+ get() {
|
|
|
+ return this.limit;
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ this.$emit("update:limit", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ collectClickDay:{
|
|
|
+ get() {
|
|
|
+ return this.day;
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ if(val == null ){
|
|
|
+ val = []
|
|
|
+ }
|
|
|
+ console.log(val)
|
|
|
+ this.$emit("update:day", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+
|
|
|
+ collectClickCalendar: {
|
|
|
+ get() {
|
|
|
+ if(this.cycle == null ){
|
|
|
+ this.cycle = []
|
|
|
+ }
|
|
|
+ return this.cycle;
|
|
|
+ },
|
|
|
+ set(val) {
|
|
|
+ if( val == null ){
|
|
|
+ val = []
|
|
|
+ }
|
|
|
+ console.log(val)
|
|
|
+ this.$emit("update:cycle", val);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ clickCalendar(index) {
|
|
|
+ if (this.collectClickCalendar.indexOf(index) === -1) {
|
|
|
+ this.collectClickCalendar.push(index);
|
|
|
+ } else if (this.collectClickCalendar.indexOf(index) > -1) {
|
|
|
+ const temp = this.collectClickCalendar.findIndex((ele) => {
|
|
|
+ return ele == index;
|
|
|
+ });
|
|
|
+ this.collectClickCalendar.splice(temp, 1);
|
|
|
+ }
|
|
|
+ this.collectClickCalendar = [...this.collectClickCalendar]
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.$emit("pagination", { page: this.currentPage, limit: val });
|
|
|
+ if (this.autoScroll) {
|
|
|
+ scrollTo(0, 800);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.$emit("pagination", { page: val, limit: this.pageSize });
|
|
|
+ if (this.autoScroll) {
|
|
|
+ scrollTo(0, 800);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.pagination-container {
|
|
|
+ background: #fff;
|
|
|
+ padding: 32px 16px;
|
|
|
+}
|
|
|
+.pagination-container.hidden {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+</style>
|