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

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

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

Write Preview
Loading…
Cancel
Save