qxtj

qinxianzhangyao

2023-11-23 5cfc97edd66731e2ebeea36072ec160a25a7bbf3

 src/views/paiban/beiwanglu/index.vue

@@ -4,7 +4,7 @@
            <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
                label-width="68px">
                <el-form-item label="月份" prop="deptName">
                    <el-date-picker v-model="value1" type="date" placeholder="选择日期">
                    <el-date-picker v-model="value1" type="month" placeholder="选择月" @change="monthChange">
                    </el-date-picker>
                </el-form-item>
                <el-form-item>
@@ -20,55 +20,45 @@
                        <div class="calendar-day">
                            {{ data.day.split("-").slice(2).join("-") }} {{ data.isSelected ? '✔️' : '' }}
                        </div>
                        <div v-for="(item, index) in calendarData" :key="index" class="is-selected"
                        <div v-for="(item, index) in cateringList" :key="index" class="is-selected"
                            @click.stop="addPlan(item)">
                            <span v-if="item.day == data.day && item.timeDetailsList">
                            <span v-if="item.mDate == data.day">
                                <el-tooltip placement="top">
                                    <div slot="content">
                                        <div v-for="items in item.timeDetailsList" :key="items.day">
                                            {{ items.channelName }} :
                                            {{ items.wechatNumber }}个微信号，
                                            计划投放{{ items.planNumber }}，
                                            实际加人
                                            {{ items.realityNumber }}
                                        <div>
                                            {{ item.event }}
                                        </div>
                                    </div>
                                    // 这里写两遍是因为一个是框里展示，一个是悬浮组件内展示的内容
                                    <div v-for="items in item.timeDetailsList" :key="items.day">
                                        {{ items.channelName }} :
                                        {{ items.wechatNumber }}个微信号，
                                        计划投放{{ items.planNumber }}，
                                        实际加人
                                        {{ items.realityNumber }}
                                    <div>
                                        {{ item.mflag == "0" ? "○" : "√" }}
                                        {{ item.title }}

                                    </div>
                                </el-tooltip>
                            </span>
                        </div>

                    </div>
                </template>
            </el-calendar>
        </div>

        <!-- 添加或修改规则+病种对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
            <div style="margin-bottom: 10px;">时间：{{ time }}</div>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" :inline="true">
                <el-form-item label="标题" prop="title">
                    <el-input v-model="form.title" placeholder="请输入标题" style="width:200px" />
                </el-form-item>
                <el-form-item label="事件" prop="event">
                    <el-input v-model="form.event" placeholder="请输入事件" style="width:200px" />
                </el-form-item>

                <el-form-item label="日期类型" prop="dateType">
                    <el-select v-model="form.dateType" style="width: 94%">
                    <el-select v-model="form.dateType" style="width: 100%">
                        <el-option v-for="dict in dict.type.memo_date_type" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="时间点" prop="mTime" v-if="form.dateType == 1">
                    <el-time-picker v-model="form.mTime" :picker-options="{
                        selectableRange: '18:30:00 - 20:30:00'
                    }" placeholder="任意时间点">
                    <el-time-picker v-model="form.mTime" format placeholder="任意时间点" style="width:88%">
                    </el-time-picker>
                </el-form-item>
                <el-form-item label="重复提醒" prop="isRepeat">
@@ -81,8 +71,8 @@
                    <el-input type="number" v-model="form.repeatTime" placeholder="请输入提醒间隔" style="width:200px"
                    oninput="value=value.replace(/[^0-9.]/g,'')" />
                </el-form-item>
                <el-form-item label="备忘状态" prop="mFlag">
                    <el-select v-model="form.mFlag" style="width: 94%">
                <el-form-item label="备忘状态" prop="mflag" v-if="form.id">
                    <el-select v-model="form.mflag" style="width: 94%">
                        <el-option v-for="dict in dict.type.memo_status" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
@@ -93,24 +83,40 @@
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" placeholder="请输入备注" style="width:200px" />
                <el-form-item label="事件" prop="event">
                    <el-input type="textarea" autosize v-model="form.event" placeholder="请输入事件" style="min-width:500px" />
                </el-form-item>
            </el-form>
            <el-button style="margin: 10px 10px" type="primary" plain size="mini" icon="el-icon-plus"
                @click="hableadd">添加</el-button>
            <el-table :data="cateringList" border>
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="序号" align="center" prop="newID" width="55px" />

            <el-button style="margin: 10px 10px" type="primary" plain size="mini" @click="hableadd">确认</el-button>
            <el-button style="margin: 10px 10px" type="primary" plain size="mini" 
                @click="hablecon">重置</el-button>
            <el-table :data="cateringList" style="width: 100%" border>
                <el-table-column label="标题" align="center" prop="title" />
                <el-table-column label="事件" align="center" prop="event" />
                <el-table-column label="日期类型" align="center" prop="dateType" />
                <el-table-column label="时间点" align="center" prop="mTime" />
                <el-table-column label="重复提醒" align="center" prop="isRepeat" width="150px" />
                <el-table-column label="提醒间隔" align="center" prop="repeatTime" width="150px" />
                <el-table-column label="备忘状态" align="center" prop="mFlag" width="150px" />
                <el-table-column label="紧急状态" align="center" prop="stateLevel" width="150px" />
                <el-table-column label="备注" align="center" prop="remark" width="150px" />
                <el-table-column label="事件" align="center" prop="event" width="260px" />
                <el-table-column label="日期类型" align="center" prop="dateType">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.memo_date_type" :value="scope.row.dateType" />
                    </template>
                </el-table-column>
                <el-table-column label="时间点" align="center" prop="mTime" width="160px" />
                <el-table-column label="重复提醒" align="center" prop="isRepeat">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.sys_yes_no" :value="scope.row.isRepeat" />
                    </template>
                </el-table-column>
                <el-table-column label="提醒间隔/分钟" align="center" prop="repeatTime" />
                <el-table-column label="备忘状态" align="center" prop="mflag">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.memo_status" :value="scope.row.mflag" />
                    </template>
                </el-table-column>
                <el-table-column label="紧急状态" align="center" prop="stateLevel">
                    <template slot-scope="scope">
                        <dict-tag :options="dict.type.memo_state_level" :value="scope.row.stateLevel" />
                    </template>
                </el-table-column>
                <!-- <el-table-column label="备注" align="center" prop="remark" width="150px" /> -->
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                    width="80px">
                    <template slot-scope="scope">
@@ -123,15 +129,18 @@
                    </template>
                </el-table-column>
            </el-table>
            <div slot="footer" class="dialog-footer">
            <!-- <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
            </div> -->
        </el-dialog>

    </div>
</template>
<script>
import { memo, listByUserAndDate, listByDate, eictmemo, delememo } from "@/api/mall/memo"
let moment = require("moment");
import { getInfo } from "@/api/login";
export default {
    dicts: [
        "memo_state_level",
@@ -149,41 +158,109 @@

            },
            title: "",
            value1: '',
            value1: new Date(),
            time: '',
            open: false,
            value: new Date(),
            calendarData: [],
            form: {
                mTime: new Date(2016, 9, 10, 18, 40),
                mTime: new Date(),
            },
            userId: "",
            userName: "",
            value2: "",
            cateringList: [],
            // 表单校验
            rules: {
                title: [
                    { required: true, message: "标题不能为空", trigger: "change" },
                    { required: true, message: "标题不能为空", trigger: "blur" },
                ],
            },
        }
    },
    mounted() {
        let prevBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(1)"
        );
        prevBtn.addEventListener("click", e => {
            this.timestampToTime(this.value)
            this.timeScher()
        });

        //点击下一个月
        let nextBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(3)"
        );
        nextBtn.addEventListener("click", () => {
            this.timestampToTime(this.value)
            this.timeScher()
        });

        //点击今天
        let todayBtn = document.querySelector(
            ".el-calendar__button-group .el-button-group>button:nth-child(2)"
        );
        todayBtn.addEventListener("click", () => {
            this.timestampToTime(this.value)
            this.timeScher()
        });
    },

    created() {
        this.getList();
    },
    methods: {
        getList() {
            getInfo().then(res => {
                this.userName = res.user.nickName
                this.userId = res.user.userId;
                this.timestampToTime(this.form.mTime)
                this.monthdon()
            })
        },

        // 月份日期查
        monthdon() {
            let data = {
                userId: this.userId,
                mDate: this.time
            }
            listByUserAndDate(data).then(res => {
                this.cateringList = res.data
            })
        },
        // 改变月份
    monthChange(val) {
        // 这里是监听时间变化 => @change="monthChange"，然后传入日历组件
        this.value = val;
        // 时间切换的时候，顺便调个接口查询当月数据
        this.editDetail();
    },
    methods: {
        editDetail() {

        },
        // 搜索
        handleQuery() {

            this.timestampToTime(this.value1)
            this.timeScher()
        },
        // 月查询
        timeScher() {
            let data = {
                userId: this.userId,
                mDate: this.value2,
            }
            listByDate(data).then(res => {
                this.cateringList = res.data
            })
        },
        // 点击事件
        addPlan(val) {
            this.open = true
            this.title = "新增日计划"
            if (val.mDate) {
                this.time = val.mDate
            } else {
            this.timestampToTime(val)
            }
            this.monthdon()
        },
        // 时间转化
        timestampToTime(timestamp) {
            var date = new Date(timestamp);
            var y = date.getFullYear();
@@ -197,22 +274,63 @@
            var second = date.getSeconds();
            second = second < 10 ? ('0' + second) : second;
            this.time = y + '-' + m + '-' + d;
            this.form.mTime = y + '-' + m + '-' + d + " " + h + ':' + minute + ':' + second;
            this.value2 = y + '-' + m;
        },
        // 添加
        hableadd() {
            this.cateringList.push(this.form)
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        this.timestampToTime(this.form.mTime)
                        this.form.mDate = this.time
                        this.form.userId = this.userId
                        this.form.userName = this.userName
                        eictmemo(this.form).then(res => {
                            if (res.code == 200) {
                                this.$modal.msgSuccess("修改成功");
            this.form = {}
                                this.monthdon()
                            }
                        })
                    } else {
                        this.timestampToTime(this.form.mTime)
                        this.form.mDate = this.time
                        this.form.userId = this.userId
                        this.form.userName = this.userName
                        memo(this.form).then(res => {
                            if (res.code == 200) {
                                this.$modal.msgSuccess("新增成功");
                                this.form = {}
                                this.monthdon()
                            }
                        })
                    }
                }
            });
        },
        cancel() {
            this.open = false
        },
        hablecon() {
            this.form = {}
        },
        submitForm() {

        },
        handleDelete1(row) {
            this.cateringList.splice(row, 1)
        handleUpdate(row) {
            this.form = row
            this.title = "修改日计划"
        },
      

        handleDelete1(row) {
            let id = row.id
            delememo(id).then(res => {
                if (res.code == 200) {
                    this.$modal.msgSuccess("删除成功");
                    this.monthdon()
                }
            })
        },
    }
}
</script>
@@ -242,4 +360,24 @@
input[type='number'] {
    -moz-appearance: textfield;
}

.main-cd .is-selected .el-tooltip {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

.el-calendar-table .el-calendar-day {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 8px;
    height: 92px;
    position: relative;

    text-align: justify;

    overflow: hidden;
}
</style>