首页 > 其他分享 >1021

1021

时间：2022-10-21 17:12:04浏览次数：50  
标签：flex 1021 color item gigi date store

vue引用其他文件的数据

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>
​

标签：flex,1021,color,item,gigi,date,store
From： https://www.cnblogs.com/laroux/p/16814104.html

相关文章

  • 前端笔记-HTML 块-20221021
    HTML块元素1.HTML块元素大多数HTML元素被定义为块级元素或内联元素。“块级元素”译为blocklevelelement，“内联元素”译为inlineelement。块级元素特点：块级元......
  • 前端笔记-HTML 列表-20221021
    HTML列表1.定义列表自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以<dl>标签开始。每个自定义列表项以<dt>开始。每个自定义列表项的定义以<dd>......
  • spark scala 安装 window20221021
    1、spark安装http://archive.apache.org/dist/spark/spark-2.2.0/spark-2.2.0-bin-hadoop2.7.tgz 环境变量：  创建SPARK_HOME：D:\spark-2.2.0-bin-hadoop2.7Path......
  • CTO也糊涂的常用术语：功能模块、业务架构、用户需求……[20210217更新]
    功能模块、业务架构、需求分析、用户需求、系统分析、功能设计、详细设计、文档、业务、技术……很多被随口使用的名词，其实是含糊甚至错误的。到底含糊在哪里，错误在哪里，不仅......
  • PAT (Basic Level) Practice 1021 个位数统计 分数 15
    给定一个 k 位整数 N=dk−1​10k−1+⋯+d1​101+d0​ (0≤di​≤9, i=0,⋯,k−1, dk−1​>0)，请编写程序统计每种不同的个位数字出现的次数。例如：给定 N=100311，则......
  • T1021: 打印字符(信息学一本通C++)
    [题目描述]输入一个整数，即字符的ASCII码，保证存在对应的可见字符。输出相对应的字符。[输入]一个整数，即字符的ASCII码，保证存在对应的可见字符。[输出]一行，包含相应的字......
  • PAT Advanced 1021 Deepest Root（25）
    题目描述：Agraphwhichisconnectedandacycliccanbeconsideredatree.Theheightofthetreedependsontheselectedroot.Nowyouaresupposedtofindthe......
  • 1021 ObstacleCourse障碍训练课 优先队列+bfs+转弯
    链接：https://ac.nowcoder.com/acm/contest/26077/1021来源：牛客网题目描述考虑一个NxN(1<=N<=100)的有1个个方格组成的正方形牧场。......
  • [Codeforces_gym_102136] I.Permutations again
    传送门DescriptionGivenasequence\(A_i\)consistingof\(N\)integers.Findthenumberofpairs\((L,R)\)forwhichthesubsegment\({A_L,A_{L + 1},......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99