export const return1={
"rtn_code": "0000",
"rtn_message": "",
"trx_name": null,
"device_id": "",
"function_id": "",
"tasks": [
{
"planDuration": "09:30-10:00",
"actDuration": null,
"status": "Going",
"task_id": "S169T020220916D29093",
"title": "1.起班表单确认2.查看Slow wip状况",
"content": "-",
"task_type": null,
"description": null,
"comments": []
},使用
import {return1} from "@/views/web/zh/mock/biaozhun_return";
vm.datas = return1.tasks不需要给赋值checked
<div class="bottom">
<div class="kuai" v-for="(data,index) in datas">
<div class="top">
<img src="../../../assets/images/biaozhun/组件 46 – 6.svg" alt=""
v-if="index==activeIndex">
<img src="../../../assets/images/biaozhun/组件 46 – 6(3).svg" alt=""
v-else>
<span>{{ data.planDuration }}</span>
</div>
<div class="neirong" @click="chooseone(index,data)" :class="{ 'through': index==activeIndex }">
{{ data.title }}
</div>
</div>
</div>
.through {
background-color: #4B80F2 !important;
color: #FFFFFF;
}并不好用，只适合单选，多选还是给每个item赋值checked好用
空值判断
！！常常用来做类型判断，在第一步!（变量）之后再做逻辑取反运算，在js中新手常常会写这样臃肿的代码： 判断变量a为非空，未定义或者非空串才能执行方法体的内容
var a;
if(a!=null&&typeof(a)!=undefined&&a!=''){
//a有内容才执行的代码
}实际上我们只需要写一个判断表达：
if(!!a){
//a有内容才执行的代码...
}就能和上面达到同样的效果。a是有实际含义的变量才执行方法，否则变量null，undefined和”空串都不会执行以下代码。
js筛选数组
试过map不行，map返回的是单个属性
const vm = this;
const choosetask= vm.datas.filter(item=>{
debugger
return item.checked == true;
})
文字超长省略
span {
//margin-left: 0.5rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-o-text-overflow: ellipsis;
max-width: 200px;
}vue外层div上有点击事件，内层div也有点击事件，想要实现点 内层div，不触发外层点击事件（综合一下记录）
<view class="tab-bar-line" v-for="(item, index) in list" :key="item.id">
<view class="content" @click="goDetail(item.id)">
<image :src="item.img" style="width: 150rpx; height: 150rpx; border-radius: 75rpx;"></image>
<view class="desc">
<view class="" @click.stop="buyGoods(item.id)">
<text class="fr cu-tag bg-gradual-orange margin-bottom-xs text-xs">⽀付</text>
<view class="clear"></view>
</view>
</view>
</view>
</view>
click.stop就是外层包内层，内层写了.stop不会触发到外层的，只触发内层
vue-hash-calendar
<!--
参数说明：
:visible.sync 是否显示
format="YY-MM-DD" 确认日期时，回调事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，当前时间 hh 时 mm 分”
:showTodayButton="false" 是否显示返回今日按钮
:disabledWeekView="true"
:disabled-date="disabledDate" 禁用的日期
pickerType="date" 选择器类型 datetime：日期+时间 date：日期 time：时间
:defaultDatetime="time" 指定默认时间。中国标准时间
-->
<template>
<div class="train_time">
<vue-hash-calendar
:scrollChangeDate="false"
:visible.sync="time_show"
format="YY/MM/DD"
:showTodayButton="true"
:disabledWeekView="false"
:isShowAction="false"
:isShowWeekView="true"
:markDate="dates"
markType="dot+circle"
pickerType="date"
:defaultDatetime="time"
@click="dateChange">
<div slot="day" slot-scope="scope">
<div v-if="scope.extendAttr.isToday">今</div>
<div v-else>{{scope.date.day}}</div>
</div>
</vue-hash-calendar>
</div>
</template>
<script>
export default {
props: {
dates: { //必传， 且为字符串
required: true,
type: String
},
},
data() {
return {
dates: [],
time_show: true,
// time: new Date(),//只接受中国标准时间
time: new Date(),//只接受中国标准时间
}
},
mounted() {
debugger
if (localStorage.getItem('time')) {
this.time = this.formatterDate(localStorage.getItem('time'))
} else {
this.time = new Date();
}
},
methods: {
// // 禁用的日期
// disabledDate(date) {
// let timestamp = date.getTime()
// let oneDay = 24 * 60 * 60 * 1000
// if (timestamp < new Date().getTime() - oneDay) {
// return true
// }
// return false
// },
//dateChange: 是父组件指定的传数据绑定的函数，date:子组件给父组件传递的数据
dateChange(date) {
this.$emit('dateChange', date);
},
//日期转中国标准时间
formatterDate(date) {
let result = new Date(date);
return result;
}
},
}
</script>
<style scoped lang="scss">
::v-deep .train_time {
background: #f4f4f4;
}
::v-deep .calendar_item { /*初始化背景可能会是透明的bug*/
background: #F4F3F8 !important;
}
::v-deep .calendar_title_date { /*初始化背景可能会是透明的bug*/
background: #F4F3F8 !important;
}
</style>
<template>
<div class="register-page-wrapper">
<div class="page-title">
<web-page-title :title="pageTitle"></web-page-title>
</div>
<div class="content">
<!-- <week-date-picker :dates="dates" ref="ch" @success="hhhh"></week-date-picker>-->
<trainTime @dateChange="dateChange" :dates="markdates"></trainTime>
<div class="xing">
<div
class="xingcheng"
v-for="(item, index) in tasks"
@click="todetail(item)"
>
<img :src="getimg(item)" alt=""/>
<div class="right">
<div class="title">{{ item.content }}</div>
<div class="bottom">
<div class="head">
<img :src="item.header" alt=""/>
<span>{{ item.userName }}</span>
</div>
<div class="date">{{ item.planStartTime }}</div>
<div class="wai">
<div
class="avatar"
v-for="(item2, index2) in tasks[index].avatarList"
>
<van-image width="20px" height="20px" round :src="item2"/>
</div>
</div>
<van-button type="danger" size="mini" @click.stop="dele(item)"
>删除
</van-button
>
</div>
</div>
</div>
</div>
</div>
<van-overlay :show="show">
<div class="wrapper" @click="stopshow">
<div class="block">
<div class="ass" @click="toricheng">
<span>日程</span>
<div class="round">
<van-image
style="color: #0a8be5"
:src="require('../../../assets/images/组 41.svg')"
></van-image>
</div>
</div>
<div class="ass" @click="torenwu">
<span>任务</span>
<div class="round">
<van-image
:src="require('../../../assets/images/组 42.svg')"
></van-image>
</div>
</div>
</div>
</div>
</van-overlay>
<div class="addTask">
<van-image
@click="tocreate"
:src="require('../../../assets/images/shouye/组件 61 – 7.svg')"
/>
</div>
</div>
</template>
<script>
import store from "@/store";
import http from "@/utils/http";
import {
showFullScreenLoading,
tryHideFullScreenLoading,
} from "@/utils/loading";
import moment from "moment";
import {Toast} from "vant";
import WeekDatePicker from "@/components/common/weekDatePicker";
export default {
name: "zh13",
components: {WeekDatePicker},
data() {
return {
time_show: false,//选择日期弹出
time: new Date().format("yyyy/MM/dd"),//默认时间 当天
week: '',//星期
show: false,
showAllMonth: true,
pageTitle: "estone",
tasks: [],
date: new Date().format("yyyy/MM/dd"),
markdates: [],
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31),
};
},
mounted() {
// 查询当前用户有行程的日期
this.gethasxingcheng()
// 查询行程list
},
// watch: {
// 'this.$refs.ch.currentMonth'(){
// alert(8888)
// }
// },
methods: {
// 日期改变触发
dateChange(date) {
console.log("改变日期")
this.time = date;//得到日期年月日
this.week = this.get_week(date);//根据日期计算星期
this.time_show = false;//隐藏弹窗
this.gettaskList();
},
//获取星期
get_week(time) {
let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let myDate = new Date(Date.parse(time.replace(/-/g, "/")));
let val = weekDay[myDate.getDay()];
return val;
},
/**
* moment日期格式化;
* YYYY-MM-DD HH:mm:ss
* 年-月-日 时:分:秒
* moment(timeStamp).format('YYYY-MM-DD HH:mm:ss')
*/
moment(timeStamp) {
//转换成13位毫秒级的时间戳;
timeStamp = String(timeStamp).length < 11 ? timeStamp * 1000 : timeStamp;
var dateObj = new Date(timeStamp),
year = dateObj.getFullYear(),
month = zeroFill(dateObj.getMonth() + 1),
date = zeroFill(dateObj.getDate()),
hours = zeroFill(dateObj.getHours()),
minutes = zeroFill(dateObj.getMinutes()),
seconds = zeroFill(dateObj.getSeconds()),
milliSeconds = dateObj.getMilliseconds();
return {
format: (str) => {
return str.replace(/YYYY/g, year)
.replace(/MM/g, month)
.replace(/DD/g, date)
.replace(/HH/g, hours)
.replace(/mm/g, minutes)
.replace(/ss/g, seconds);
}
}
},
hhhh() {
this.gettaskList()
},
torenwu() {
this.$router.push("/web/register/zh1");
},
tocreate() {
this.show = true;
store.commit("gigi/set_currentdo", "创建行程");
store.commit("gigi/set_title", "");
store.commit("gigi/set_starttime", "");
store.commit("gigi/set_endtime", "");
store.commit("gigi/set_youxian", "");
store.commit("gigi/SET_shixiao", "");
store.commit("gigi/set_choosepeople", "");
debugger;
store.commit("gigi/set_currenttaskId", "");
},
todetail(item) {
console.log(item);
store.commit("gigi/set_currentdo", "查看行程");
// store.commit("gigi/set_xingcheng",item)
store.commit("gigi/set_title", item.content);
store.commit("gigi/set_starttime", item.planStartTime);
store.commit("gigi/set_endtime", item.planEndTime);
store.commit("gigi/set_youxian", this.getspan(item.priority));
store.commit("gigi/SET_shixiao", item.alarmBeforeTime);
store.commit("gigi/set_choosepeople", item.executors);
debugger;
store.commit("gigi/set_currenttaskId", item.taskId);
this.$router.push("/web/register/zh23");
},
toricheng() {
store.commit("gigi/set_currentdo", "新建日程");
this.$router.push("/web/register/zh23");
},
stopshow() {
this.show = false;
},
showpopup() {
this.show = true;
},
getimg(item) {
if (item.priority == 1) {
return require("../../../assets/images/shouye/矩形 74.svg");
}
if (item.priority == 2) {
return require("../../../assets/images/shouye/矩形 74(3).svg");
}
if (item.priority == 3) {
return require("../../../assets/images/shouye/矩形 74(1).svg");
}
if (item.priority == 4) {
return require("../../../assets/images/shouye/矩形 74(2).svg");
}
},
dele(item) {
console.log(item);
const param = {
task_id: item.taskId,
user_id: store.state.gigi.currentUser.userId,
};
http.post("/Schedule/UxDelTaskSchedule", param).then((res) => {
if (res.data.rtn_code === "0000") {
this.$toast.success({
message: "删除行程成功",
position: "middle",
icon: "checked",
});
this.gettaskList();
} else {
this.$toast(res.data.rtn_message);
}
});
},
getspan(item) {
if (item == 1) {
return "暂缓";
}
if (item == 2) {
return "正常";
}
if (item == 3) {
return "一般";
}
if (item == 4) {
return "紧急";
}
},
gethasxingcheng() {
const param ={
"user_id": store.state.gigi.currentUser.userId
}
http.post("/Schedule/QxTaskScheduleDate",param).then(res=>{
this.markdates=res.data.result_list.map(item=>{
return {
color: 'red', date: [item]
}
})
})
},
gettaskList() {
debugger
/* // 查询行程list
const year =this.date.split("/")[0]
; // 年
const month = this.date.split("/")[1]
// const day = date.getDate() // 日
let nowStartTime = `${year}/${month}/01`;
const nextMonth = Number(month);
// 获取到下个月的第一天
debugger;
const nextMonthFirstDay = new Date(year, nextMonth, 1);
// 一天时间的毫秒数
const oneDay = 1000 * 60 * 60 * 24;
// 当月最后一天
let endTime = moment(nextMonthFirstDay - oneDay).format("YYYY/MM/DD");*/
const data = {
// "month": "2022/09/01",
startTime: this.time,
userId: store.state.gigi.currentUser.userId,
};
http.post("/Schedule/QxMyTaskSchedule", data).then((res) => {
this.tasks = res.data.result_list;
});
},
}
,
}
;
</script>
<style scoped lang="scss">
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.block {
width: 120px;
height: 120px;
font-size: 14px;
position: fixed;
right: 0px;
display: flex;
flex-direction: column;
//background-color: #fff;
color: #4b80f2;
.ass {
margin-top: 10px;
display: flex;
align-items: center;
span {
color: #ffffff;
}
.round {
margin-left: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #4b80f2;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.through {
background-color: #4b80f2 !important;
color: #ffffff;
}
.showAllMonth {
background: blue;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
.xing {
.xingcheng {
height: 74px;
background: #ffffff;
width: 100%;
display: flex;
align-items: center;
.right {
margin-left: 31px;
.title {
font-size: 14px;
font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
font-weight: 500;
color: #1e3058;
}
.bottom {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
.head {
display: flex;
align-items: center;
img {
height: 20px;
width: 20px;
border-radius: 50%;
}
span {
font-size: 14px;
font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
font-weight: 500;
color: #1e3058;
}
}
.date {
font-size: 12px;
font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
font-weight: 400;
color: #91909f;
margin-left: 24px;
}
.wai {
flex-wrap: wrap;
align-content: flex-start;
//width: 230px;
display: flex;
justify-content: center;
align-items: center;
.avatar {
width: 10px;
height: 20px;
display: flex;
justify-content: center;
align-items: center;
&:last-child {
width: auto;
}
}
}
}
}
}
}
}
.addTask {
position: fixed;
bottom: 60px;
right: 0;
}
.page-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 1.81rem;
display: flex;
box-shadow: 0rem 0rem 0.3rem 0rem rgba(0, 4, 85, 0.06);
.bot {
display: grid;
align-items: center;
//justify-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr;
.box {
flex-direction: column;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
padding-top: 7px;
.imgs {
width: 17px;
height: 17px;
}
}
}
.fbtn {
flex: 1;
width: 0;
text-align: center;
line-height: 1.31rem;
font-size: 0.4rem;
&.back {
background-color: #d60000;
color: #ffffff;
}
&.agree {
background-color: #4b80f2;
color: #ffffff;
}
&.wait {
background-color: #eeeeee;
color: #084498;
}
&.cancel {
background-color: #ffffff;
font-weight: 700;
}
}
}
</style>
怎么自定义标题
<!--
参数说明：
:visible.sync 是否显示
format="YY-MM-DD" 确认日期时，回调事件返回的日期格式。如“YY/MM/DD hh:mm” 、“YY 年 MM 月第 DD 天，当前时间 hh 时 mm 分”
:showTodayButton="false" 是否显示返回今日按钮
:disabledWeekView="true"
:disabled-date="disabledDate" 禁用的日期
pickerType="date" 选择器类型 datetime：日期+时间 date：日期 time：时间
:defaultDatetime="time" 指定默认时间。中国标准时间
-->
<template>
<div class="train_time">
<vue-hash-calendar
:scrollChangeDate="true"
:visible.sync="time_show"
format="YY/MM/DD"
:showTodayButton="false"
:disabledWeekView="false"
:isShowWeekView="true"
:isShowAction="false"
:markDate="dates"
markType="dot+circle"
pickerType="date"
:defaultDatetime="time"
@change="ssss"
@click="dateChange">
<div slot="day" slot-scope="scope">
<div v-if="scope.extendAttr.isToday">今</div>
<div v-else>{{ scope.date.day }}</div>
</div>
</vue-hash-calendar>
</div>
</template>
<script>
export default {
props: {
dates: { //必传， 且为字符串
required: true,
type: String
},
},
data() {
return {
dates: [],
time_show: true,
// time: new Date(),//只接受中国标准时间
time: new Date(),//只接受中国标准时间
}
},
mounted() {
debugger
if (localStorage.getItem('time')) {
this.time = this.formatterDate(localStorage.getItem('time'))
} else {
this.time = new Date();
}
},
methods: {
ssss(date) {
this.$emit('dateChange2', date);
},
// // 禁用的日期
// disabledDate(date) {
// let timestamp = date.getTime()
// let oneDay = 24 * 60 * 60 * 1000
// if (timestamp < new Date().getTime() - oneDay) {
// return true
// }
// return false
// },
//dateChange: 是父组件指定的传数据绑定的函数，date:子组件给父组件传递的数据
dateChange(date) {
this.$emit('dateChange', date);
},
//日期转中国标准时间
formatterDate(date) {
let result = new Date(date);
return result;
}
},
}
</script>
<style scoped lang="scss">
::v-deep .train_time {
background: #F4F3F8
}
::v-deep .calendar_week {
background: #F4F3F8
}
::v-deep .calendar_group_li {
background: #F4F3F8
}
::v-deep .calendar_item { /*初始化背景可能会是透明的bug*/
background: #F4F3F8 !important;
}
::v-deep .calendar_title_date { /*初始化背景可能会是透明的bug*/
background: #F4F3F8 !important;
}
</style>
<template>
<div class="register-page-wrapper">
<div class="page-title">
<web-page-title :title="pageTitle"></web-page-title>
</div>
<div class="content">
<div class="top">
<span class="month">{{month}}月</span>
<span class="year">{{year}}年</span>
</div>
<!-- <week-date-picker :dates="dates" ref="ch" @success="hhhh"></week-date-picker>-->
<trainTime @dateChange="dateChange" @dateChange2="dateChange2" :dates="markdates"></trainTime>
<div class="xing">
<div
class="xingcheng"
v-for="(item, index) in tasks"
@click="todetail(item)"
>
<img :src="getimg(item)" alt=""/>
<div class="right">
<div class="title">{{ item.content }}</div>
<div class="bottom">
<div class="head">
<van-image width="20px" height="20px " round :src="item.header" alt=""/>
</div>
<div class="date">{{ item.planStartTime }}</div>
<!-- <div class="wai">-->
<!-- <div class="avatar"-->
<!-- v-for="(item2, index2) in tasks[index].avatarList"-->
<!-- >-->
<!-- <van-image width="20px" height="20px" round :src="item2"/>-->
<!-- </div>-->
<!-- </div>-->
<div class="touxiang">
<div class="chong" v-for="(item2, index2) in tasks[index].avatarList">
<van-image round width="20px" height="20px" :src="item2"/>
</div>
</div>
<van-button type="danger" class="delete" size="mini" @click.stop="dele(item)"
>删除
</van-button
>
</div>
</div>
</div>
</div>
</div>
<van-overlay :show="show">
<div class="wrapper" @click="stopshow">
<div class="block">
<div class="ass" @click="toricheng">
<span>日程</span>
<div class="round">
<van-image
style="color: #0a8be5"
:src="require('../../../assets/images/组 41.svg')"
></van-image>
</div>
</div>
<div class="ass" @click="torenwu">
<span>任务</span>
<div class="round">
<van-image
:src="require('../../../assets/images/组 42.svg')"
></van-image>
</div>
</div>
</div>
</div>
</van-overlay>
<div class="addTask">
<van-image
@click="tocreate"
:src="require('../../../assets/images/shouye/组件 61 – 7.svg')"
/>
</div>
</div>
</template>
<script>
import store from "@/store";
import http from "@/utils/http";
import {
showFullScreenLoading,
tryHideFullScreenLoading,
} from "@/utils/loading";
import moment from "moment";
import {Dialog, Toast} from "vant";
import WeekDatePicker from "@/components/common/weekDatePicker";
export default {
name: "zh13",
components: {WeekDatePicker},
data() {
return {
time_show: false,//选择日期弹出
time: "",//默认时间 当天
week: '',//星期
show: false,
showAllMonth: true,
month: "",
year: "",
pageTitle: "estone",
tasks: [],
date: new Date().format("yyyy/MM/dd"),
markdates: [],
minDate: new Date(2010, 0, 1),
maxDate: new Date(2010, 0, 31),
};
},
mounted() {
// 查询当前用户有行程的日期
this.gethasxingcheng()
// 查询行程list
const data = {
// "month": "2022/09/01",
startTime: this.time,
userId: store.state.gigi.currentUser.userId,
};
http.post("/Schedule/QxMyTaskSchedule", data).then((res) => {
this.tasks = res.data.result_list;
});
},
// watch: {
// 'time'(){
// alert(8888)
// }
// },
methods: {
// 日期改变触发
dateChange(date) {
console.log("改变日期")
this.time = date;//得到日期年月日
this.week = this.get_week(date);//根据日期计算星期
this.time_show = false;//隐藏弹窗
this.gettaskList();
},
dateChange2(date) {
// alert("改变日期2")
this.time = date;//得到日期年月日
console.log(this.time);
this.year=this.time.split("/")[0]
this.month=this.time.split("/")[1]
},
//获取星期
get_week(time) {
let weekDay = ["星期天", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"];
let myDate = new Date(Date.parse(time.replace(/-/g, "/")));
let val = weekDay[myDate.getDay()];
return val;
},
/**
* moment日期格式化;
* YYYY-MM-DD HH:mm:ss
* 年-月-日 时:分:秒
* moment(timeStamp).format('YYYY-MM-DD HH:mm:ss')
*/
moment(timeStamp) {
//转换成13位毫秒级的时间戳;
timeStamp = String(timeStamp).length < 11 ? timeStamp * 1000 : timeStamp;
var dateObj = new Date(timeStamp),
year = dateObj.getFullYear(),
month = zeroFill(dateObj.getMonth() + 1),
date = zeroFill(dateObj.getDate()),
hours = zeroFill(dateObj.getHours()),
minutes = zeroFill(dateObj.getMinutes()),
seconds = zeroFill(dateObj.getSeconds()),
milliSeconds = dateObj.getMilliseconds();
return {
format: (str) => {
return str.replace(/YYYY/g, year)
.replace(/MM/g, month)
.replace(/DD/g, date)
.replace(/HH/g, hours)
.replace(/mm/g, minutes)
.replace(/ss/g, seconds);
}
}
},
hhhh() {
this.gettaskList()
},
torenwu() {
this.$router.push("/web/register/zh1");
},
tocreate() {
this.show = true;
store.commit("gigi/set_currentdo", "创建行程");
store.commit("gigi/set_title", "");
store.commit("gigi/set_starttime", "");
store.commit("gigi/set_endtime", "");
store.commit("gigi/set_youxian", "");
store.commit("gigi/SET_shixiao", "");
store.commit("gigi/set_choosepeople", "");
debugger;
store.commit("gigi/set_currenttaskId", "");
},
todetail(item) {
console.log(item);
store.commit("gigi/set_currentdo", "查看行程");
// store.commit("gigi/set_xingcheng",item)
store.commit("gigi/set_title", item.content);
store.commit("gigi/set_starttime", item.planStartTime);
store.commit("gigi/set_endtime", item.planEndTime);
store.commit("gigi/set_youxian", this.getspan(item.priority));
store.commit("gigi/SET_shixiao", item.alarmBeforeTime);
store.commit("gigi/set_choosepeople", item.executors);
debugger;
store.commit("gigi/set_currenttaskId", item.taskId);
this.$router.push("/web/register/zh23");
},
toricheng() {
store.commit("gigi/set_currentdo", "新建日程");
this.$router.push("/web/register/zh23");
},
stopshow() {
this.show = false;
},
showpopup() {
this.show = true;
},
getimg(item) {
if (item.priority == 1) {
return require("../../../assets/images/shouye/矩形 74.svg");
}
if (item.priority == 2) {
return require("../../../assets/images/shouye/矩形 74(3).svg");
}
if (item.priority == 3) {
return require("../../../assets/images/shouye/矩形 74(1).svg");
}
if (item.priority == 4) {
return require("../../../assets/images/shouye/矩形 74(2).svg");
}
},
dele(item) {
console.log(item);
Dialog.confirm({
title: "",
width: "200px",
message: "确认删除？",
})
.then(() => {
const param = {
task_id: item.taskId,
user_id: store.state.gigi.currentUser.userId,
};
http.post("/Schedule/UxDelTaskSchedule", param).then((res) => {
if (res.data.rtn_code === "0000") {
this.$toast.success({
message: "删除行程成功",
position: "middle",
icon: "checked",
});
this.gettaskList();
} else {
this.$toast(res.data.rtn_message);
}
});
})
},
getspan(item) {
if (item == 1) {
return "暂缓";
}
if (item == 2) {
return "正常";
}
if (item == 3) {
return "一般";
}
if (item == 4) {
return "紧急";
}
},
gethasxingcheng() {
const param = {
"user_id": store.state.gigi.currentUser.userId
}
http.post("/Schedule/QxTaskScheduleDate", param).then(res => {
this.markdates = res.data.result_list.map(item => {
return {
color: 'red', date: [item]
}
})
})
},
gettaskList() {
debugger
/* // 查询行程list
const year =this.date.split("/")[0]
; // 年
const month = this.date.split("/")[1]
// const day = date.getDate() // 日
let nowStartTime = `${year}/${month}/01`;
const nextMonth = Number(month);
// 获取到下个月的第一天
debugger;
const nextMonthFirstDay = new Date(year, nextMonth, 1);
// 一天时间的毫秒数
const oneDay = 1000 * 60 * 60 * 24;
// 当月最后一天
let endTime = moment(nextMonthFirstDay - oneDay).format("YYYY/MM/DD");*/
const data = {
// "month": "2022/09/01",
startTime: this.time,
userId: store.state.gigi.currentUser.userId,
};
http.post("/Schedule/QxMyTaskSchedule", data).then((res) => {
this.tasks = res.data.result_list;
});
},
}
,
}
;
</script>
<style scoped lang="scss">
.wrapper {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.block {
width: 120px;
height: 120px;
font-size: 14px;
position: fixed;
right: 0px;
display: flex;
flex-direction: column;
//background-color: #fff;
color: #4b80f2;
.ass {
margin-top: 10px;
display: flex;
align-items: center;
span {
color: #ffffff;
}
.round {
margin-left: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
background: #4b80f2;
display: flex;
justify-content: center;
align-items: center;
}
}
}
.through {
background-color: #4b80f2 !important;
color: #ffffff;
}
.showAllMonth {
background: blue;
border-radius: 50%;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.content {
display: flex;
justify-content: center;
flex-direction: column;
.top{
height: 50px;
.year{
font-size: 12px;
font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
font-weight: 400;
color: #000000;
margin-left: 12px;
}
.month{
font-size: 20px;
font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
font-weight: 400;
color: #000000;
margin-left: 19px;
}
}
.xing {
.xingcheng {
height: 74px;
background: #ffffff;
width: 100%;
display: flex;
align-items: center;
.right {
margin-left: 31px;
.title {
font-size: 14px;
font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
font-weight: 500;
color: #1e3058;
}
.bottom {
display: flex;
align-items: center;
justify-content: flex-start;
margin-top: 14px;
width: 320px;
position: relative;
.head {
display: flex;
align-items: center;
img {
height: 20px;
width: 20px;
border-radius: 50%;
}
span {
font-size: 14px;
font-family: HarmonyOS Sans SC-Medium, HarmonyOS Sans SC;
font-weight: 500;
color: #1e3058;
}
}
.date {
font-size: 12px;
font-family: HarmonyOS Sans SC-Regular, HarmonyOS Sans SC;
font-weight: 400;
color: #91909f;
margin-left: 24px;
}
.touxiang {
flex-wrap: wrap;
align-content: flex-start;
// width: 130px;
display: flex;
justify-content: center;
align-items: center;
margin-left: 50px;
.chong {
width: 10px;
height: 20px;
line-height: 20px;
&:last-child {
width: auto;
}
}
}
.delete {
position: absolute;
right: 0px;
}
}
}
}
}
}
.addTask {
position: fixed;
bottom: 60px;
right: 0;
}
.page-footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 1.81rem;
display: flex;
box-shadow: 0rem 0rem 0.3rem 0rem rgba(0, 4, 85, 0.06);
.bot {
display: grid;
align-items: center;
//justify-items: center;
grid-template-columns: 1fr 1fr 1fr 1fr;
.box {
flex-direction: column;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 11px;
padding-top: 7px;
.imgs {
width: 17px;
height: 17px;
}
}
}
.fbtn {
flex: 1;
width: 0;
text-align: center;
line-height: 1.31rem;
font-size: 0.4rem;
&.back {
background-color: #d60000;
color: #ffffff;
}
&.agree {
background-color: #4b80f2;
color: #ffffff;
}
&.wait {
background-color: #eeeeee;
color: #084498;
}
&.cancel {
background-color: #ffffff;
font-weight: 700;
}
}
}
</style>
原文地址：http://www.cnblogs.com/laroux/p/16814104.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
