mz666
/
bocai_supplyChain_pc
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

时间选择优化

Browse Source
cyl/dev
wangxia 4 years ago
parent ba103440c5
commit c86c7983f3
2 changed files with 146 additions and 78 deletions
Show Stats Download Patch File Download Diff File

220
src/components/FirstJob/components/timepicker.vue
Unescape Escape View File

@ -1,5 +1,5 @@
<template>
<div style="display: inline-block">
<div>
<!-- <span @click="showPicker">{{ getLangText(label.datetimePicker) }}</span> -->
<div class="date-picker-bg" v-show="isShow" @click="closePicker"></div>
<div class="date-picker" v-show="isShow">
@ -14,8 +14,8 @@
</div>
<div class="picker-content1 picker-content">
<table>
<thead>
<tr>
<thead style="borderradius: 4px">
<tr style="overflow: hidden">
<th v-for="(item, idx) in weekList" :key="'week' + idx">
{{ getLangText(item) }}
</th>
@ -32,13 +32,21 @@
? ''
: 'gray',
selectDate == monthList[idx - 1][m - 1] ? 'active' : '',
new Date(monthList[idx - 1][m - 1]).getTime() < currentDate ||
getabandonDate(new Date(monthList[idx - 1][m - 1]))
(new Date(monthList[idx - 1][m - 1]).getTime() <
currentDate ||
getabandonDate(new Date(monthList[idx - 1][m - 1]))) &&
isInterview
? 'bggray'
: '',
]"
@click="onSelectDate(monthList[idx - 1][m - 1])"
>
<!-- (new Date(monthList[idx - 1][m - 1]).getTime() <
currentDate ||
getabandonDate(new Date(monthList[idx - 1][m - 1]))) &&
isInterview
? 'bggray'
: '', 控制面试时间的可选择日期范围-->
<div>{{ new Date(monthList[idx - 1][m - 1]).getDate() }}</div>
</td>
</tr>
@ -51,7 +59,7 @@
@click="onSelectHour(n, index)"
:class="[index == clicktime ? 'active' : '']"
>
{{ n }}:<span v-if="index % 2 === 0">00</span><span v-else>30</span>
{{ n }}:<span>{{ index % 2 === 0 ? "00" : "30" }}</span>
</li>
</ul>
<!-- <ul class="minutes-list">
@ -114,6 +122,10 @@ export default {
type: Boolean,
default: true,
},
isInterview: {
type: Boolean,
default: true,
},
},
data: () => ({
label: {
@ -145,18 +157,15 @@ export default {
startDay: 0,
endDay: 0,
weekNum: 0,
selectDate: new Date(new Date().format("yyyy-MM-dd 00:00")).getTime(),
selectDate: "",
monthList: [],
selectHour:
new Date().getHours() > 8 && new Date().getHours() < 18
? new Date().getHours()
: "8",
selectMinute:
new Date().getMinutes() >= 0 && new Date().getMinutes() < 30 ? "0" : "30",
selectHour: "",
selectMinute: "",
// new Date().getMinutes() >= 0 && new Date().getMinutes() < 30 ? "0" : "30",
}),
created() {
console.log(this.selectDate);
console.log(this.selectMinute);
// console.log(this.selectDate);
// console.log(this.selectMinute);
// console.log(this.testDate);
},
watch: {
@ -167,20 +176,44 @@ export default {
this.getMonthDay();
},
isShow() {
const that = this;
if (this.isShow) {
// console.log(this.selectHour);
let ind =
(this.selectHour - 8) * 2 + (this.selectMinute === "0" ? 0 : 1);
this.onSelectHour(this.selectHour, ind);
this.$emit(
"update:datetime",
new Date(
this.selectDate +
this.selectHour * 3600000 +
this.selectMinute * 60000
).format("yyyy-MM-dd hh:mm")
);
this.$nextTick(() => {
this.selectDate = new Date(
new Date(this.datetime || new Date()).format("yyyy-MM-dd 00:00")
).getTime();
this.selectMinute =
new Date(this.datetime || new Date()).getMinutes() < 30
? "0"
: "30";
console.log(this.selectMinute);
this.selectHour =
new Date(this.datetime || new Date()).getHours() > 8 &&
new Date(this.datetime || new Date()).getHours() < 19
? new Date(this.datetime || new Date()).getHours()
: "8";
let ind =
(this.selectHour - 8) * 2 + (this.selectMinute === "0" ? 0 : 1);
that.$emit(
"update:datetime",
new Date(
that.selectDate +
that.selectHour * 3600000 +
that.selectMinute * 60000
).format("yyyy-MM-dd hh:mm")
);
console.log(ind);
this.onSelectHour(this.selectHour, ind);
});
}
// else {
// this.$emit(
// "update:datetime",
// new Date(this.selectDate + this.selectHour * 3600000).format("yyyy-MM-dd hh:00")
// );
// }
},
},
methods: {
@ -226,7 +259,7 @@ export default {
showPicker() {
this.$emit("update:is-show", true);
var time = new Date(this.datetime).getTime();
var time = new Date(this.datetime || new Date()).getTime();
this.year = new Date(time).getFullYear();
this.month = new Date(time).getMonth() + 1;
this.day = new Date(time).getDate();
@ -237,11 +270,11 @@ export default {
},
onConfirmDate(time) {
this.onSelectDate(time);
this.confirmPicker();
// this.confirmPicker();
},
onConfirmHour(n) {
this.onSelectHour(n);
this.confirmPicker();
// this.confirmPicker();
},
closePicker() {
this.$emit("update:is-show", false);
@ -260,24 +293,24 @@ export default {
// : "30";
this.$emit("update:is-show", false);
},
confirmPicker() {
// console.log(this.selectMinute);
// this.$emit(
// "update:datetime",
// new Date(
// this.selectDate +
// this.selectHour * 3600000 +
// this.selectMinute * 60000
// ).format("yyyy-MM-dd hh:mm")
// );
// this.$emit(
// "pickerresult",
// new Date(this.selectDate + this.selectHour * 3600000).format(
// "yyyy-MM-dd hh:00"
// )
// );
this.closePicker();
},
// confirmPicker() {
// console.log(this.selectMinute);
// this.$emit(
// "update:datetime",
// new Date(
// this.selectDate +
// this.selectHour * 3600000 +
// this.selectMinute * 60000
// ).format("yyyy-MM-dd hh:mm")
// );
// this.$emit(
// "pickerresult",
// new Date(this.selectDate + this.selectHour * 3600000).format(
// "yyyy-MM-dd hh:00"
// )
// );
// this.closePicker();
// },
getMonthDay() {
var monthFirst = new Date(this.year + "-" + this.month + "-01 00:00");
var w = monthFirst.getDay();
@ -324,6 +357,8 @@ export default {
);
},
closebox() {
console.log(this.selectDate);
this.$emit("update:is-show", false);
},
// onSelectMinute(n) {
@ -340,25 +375,37 @@ export default {
// );
// },
onSelectDate(time) {
console.log(time);
if (time < this.currentDate || this.getabandonDate(time)) {
return;
// console.log(time);
if (this.isInterview) {
//控制面试时间的可选择日期范围
if (time < this.currentDate || this.getabandonDate(time)) {
return;
} else {
this.selectDate = time;
}
} else {
this.selectDate = time;
}
this.year = new Date(time).getFullYear();
this.month = new Date(time).getMonth() + 1;
this.day = new Date(time).getDate();
console.log(this.selectMinute);
// console.log(this.year, "--------", this.month, "--------", this.day);
this.$emit(
"update:datetime",
new Date(time + this.selectHour * 3600000).format("yyyy-MM-dd hh:00")
new Date(
this.selectDate +
this.selectHour * 3600000 +
+this.selectMinute * 60000
).format("yyyy-MM-dd hh:mm")
);
// let data12 = this.getabandonDate(new Date("2022-03-25").getTime());
// console.dir(this.getabandonDate);
// console.log(data12);
},
getabandonDate(date) {
// 禁用日期的回调
let day = new Date(date).getMonth() + "" + new Date(date).getDate();
let value = this.abandonDate.some((item) => {
let day1 = new Date(item).getMonth() + "" + new Date(item).getDate();
@ -386,7 +433,7 @@ export default {
background-color: white;
position: absolute;
width: 430px;
top: 28px;
top: 37px;
left: 0;
display: block;
padding: 4px;
@ -435,7 +482,9 @@ export default {
height: 200px;
table {
width: 100%;
border-collapse: collapse;
// padding: 4px !important;
margin: 4px 0;
border-collapse: separate;
border-spacing: 0;
font-size: 12px;
line-height: 20px !important;
@ -446,13 +495,19 @@ export default {
padding-bottom: 5px;
tr {
margin-bottom: 5px;
background-color: #fff4e3;
background-color: #ff6a001a;
color: rgba(77, 87, 94);
th {
text-align: center;
font-weight: 600;
font-size: 14px;
line-height: 26px;
&:first-child {
border-radius: 4px 0 0 4px;
}
&:last-child {
border-radius: 0 4px 4px 0;
}
}
}
}
@ -467,13 +522,18 @@ export default {
padding: 0 4px;
font-size: 14px;
cursor: pointer;
// border-radius: 4px;
&:first-child {
border-radius: 4px 0 0 4px;
}
&:last-child {
border-radius: 0 4px 4px 0;
}
div {
border: 1px solid transparent;
position: relative;
width: 30px;
height: 25px;
line-height: 23px;
height: 26px;
line-height: 24px;
border-radius: 4px;
text-align: center;
margin: 0 2px;
@ -487,7 +547,9 @@ export default {
}
td.bggray {
position: relative;
color: #ccc;
cursor: default;
&::after {
content: "";
position: absolute;
@ -501,6 +563,13 @@ export default {
z-index: 9;
}
}
.bggray:first-child::after {
border-radius: 4px 0 0 4px;
}
.bggray:last-of-type::after {
border-radius: 0 4px 4px 0;
}
td:not(.bggray):hover {
div {
border: 1px solid #ff6a00;
@ -525,12 +594,16 @@ export default {
flex-direction: row;
table {
width: calc(100% - 40px);
border-right: 1px solid #eee;
margin-right: 4px;
// border-right: 1px solid #eee;
}
.hour-list {
display: inline-block;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-left: 1px solid #eee;
list-style: none;
padding: 0 2px 0 5px;
padding: 5px 2px 0 4px;
margin: 0;
height: 100%;
overflow-x: hidden;
@ -557,17 +630,24 @@ export default {
li {
padding: 0;
margin: 0;
margin-bottom: 6px;
color: #4d575ecc;
background-color: #ff6a001a;
width: 48%;
border-radius: 4px;
/* font-weight: 600; */
display: flex;
height: 35px !important;
line-height: 25px;
font-size: 18px;
height: 26px !important;
line-height: 26px;
font-size: 14px;
justify-content: center;
align-items: center;
padding: 0 4px;
height: 26px;
cursor: pointer;
span:last-child {
margin-left: 0 !important;
}
}
// li:not(:last-child) {
// border-bottom: solid 1px gainsboro;
@ -580,18 +660,6 @@ export default {
.minutes-list {
width: 60px;
}
.hour-list::-webkit-scrollbar {
background: transparent;
height: 8px;
width: 8px;
border: none;
}
.hour-list::-webkit-scrollbar-thumb {
background: lightgray;
border-radius: 5px;
}
//设置滚动条 end
}
.picker-footer {
@ -627,7 +695,7 @@ export default {
&:active,
&:hover {
border-color: #ff6a00;
background-color: #ff832a;
background-color: #ff6a00;
}
}
}

4
src/utils/request.js
Unescape Escape View File

@ -13,8 +13,8 @@ console.log(baseURL);
axios.defaults.withCredentials = true; //添加这行代码
// console.log(axios);
const service = axios.create({
baseURL: "/api_prod", // url = base url + request url
// baseURL: baseURL, // baseURL: "/api", // url = base url + request url
// baseURL: "/api_prod", // url = base url + request url
baseURL: baseURL, // baseURL: "/api", // url = base url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 10000, // request timeout
crossDomain: true,

Write Preview
Loading…
Cancel
Save