oa-system/src/components/OP/mealrecord.vue

<template>
    <div class="mealrecord-all">
        <el-dialog class="mealrecord-dialog" width="800px" title="餐食信息" :visible.sync="mealrecordVisible"  :close-on-click-modal="false">
            <el-form :model="mealrecordfrom" :rules="mealrecordfromrules" ref="mealrecordfrom" label-width="100px"
                class="demo-ruleForm">
                <el-form-item label="日期" prop="date">
                    <el-date-picker type="date" placeholder="选择日期" v-model="mealrecordfrom.date"
                        style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="类型" prop="type">
                    <el-select @change="typechange" style="width: 100%;" clearable v-model="mealrecordfrom.type" placeholder="餐类型">
                        <el-option v-for="item in mealType" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="开始时间" prop="startTime">
                    <el-time-picker format="HH:mm" value-format="HH:mm" placeholder="选择时间" v-model="mealrecordfrom.startTime"
                        style="width: 100%;"></el-time-picker>
                </el-form-item>
                <el-form-item label="结束时间">
                    <el-time-picker format="HH:mm" value-format="HH:mm" placeholder="选择时间" v-model="mealrecordfrom.endTime"
                        style="width: 100%;"></el-time-picker>
                </el-form-item>
                <el-form-item label="餐厅名称" prop="name">
                    <el-input style="width: 100%;" v-model="mealrecordfrom.name"></el-input>
                </el-form-item>
                <el-form-item label="餐厅电话" prop="tel">
                    <el-input style="width: 100%;" v-model="mealrecordfrom.tel"></el-input>
                </el-form-item>
                <el-form-item style="width: 100%;" label="餐厅地址" prop="address">
                    <el-input style="width: 100%;" v-model="mealrecordfrom.address"></el-input>
                </el-form-item>
                <el-form-item style="width: 100%;" label="备注">
                    <el-input style="width: 100%;" type="textarea" v-model="mealrecordfrom.remark"></el-input>
                  </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="RestaurantOp('mealrecordfrom')">保 存</el-button>
                <el-button @click="mealrecordVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <div class="mealrecord-head">
            <div class="mealrecord-head-li">
                <el-select @change="groupDatachange" style="width:200px" filterable v-model="diId" placeholder="请选择团组">
                    <el-option v-for="item in groupData" :key="item.id" :label="item.groupName" :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="mealrecord-head-li">
                <el-button @click="addmealrecord" type="primary">新 增</el-button>
            </div>
        </div>
        <div class="mealrecord-table">
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column prop="date" label="日期" width="180">
                </el-table-column>
                <el-table-column prop="startTime" label="开始时间" width="80">
                </el-table-column>
                <el-table-column prop="endTime" label="结束时间" width="80">
                </el-table-column>
                <el-table-column prop="type" label="类型" width="80">
                </el-table-column>
                <el-table-column prop="name" label="餐厅名称" width="200">
                </el-table-column>
                <el-table-column prop="tel" label="餐厅联系电话" width="100">
                </el-table-column>
                <el-table-column prop="address" label="餐厅地址" width="250">
                </el-table-column>
                <el-table-column prop="createUserName" label="录入人" width="80">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column prop="createUserName" label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="redactclick(scope.$index, scope.row)"
                            type="primary">编辑</el-button>
                        <el-button size="mini" @click="deleteclick(scope.$index, scope.row)"
                            type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            token:'',
            userid:'',
            groupData:[],
            mealType:[],
            diId:'',
            mealId:'',
            tableData:[],
            mealrecordVisible:false,
            mealrecordfrom:{
                id:0,
                date:'',
                startTime:'',
                endTime:'',
                type:'',
                name:'',
                tel:'',
                address:'',
                remark:'',
                currUserId:'',
                status:'',
            },
            mealrecordfromrules: {
                date: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
                startTime: [
                    {  required: true, message: '请选择时间', trigger: 'blur' }
                ],
                endTime: [
                    {  required: true, message: '请选择时间', trigger: 'blur' }
                ],
                type: [
                    {  required: true, message: '请选择类型', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '请填写', trigger: 'blur' }
                ],
                tel: [
                    { required: true, message: '请填写', trigger: 'blur' }
                ],
                address: [
                    { required: true, message: '请填写', trigger: 'blur' }
                ],
            }
        }
    },
    methods:{
        //处理日期
        dateday(val) {
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1).toString();
            var d = date.getDate() >= 10 ? date.getDate() : '0' + (date.getDate()).toString();
            return y + '-' + m + '-' + d
        },
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var hh = date.getHours();
            hh = hh < 10 ? ('0' + hh) : hh;
            var mm = date.getMinutes();
            mm = mm < 10 ? ('0' + mm) : mm;
            let time = hh+':'+mm
            return time
        },
        //获取基础数据
        RestaurantInit() {
            var that = this
            var url = "/api/Groups/RestaurantInit"
            this.$axios({
                method: 'get',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
            }).then(function (res) {
                if (res.data.code == 200) {
                    var restaurantInit=res.data.data;
                    that.groupData=restaurantInit.groupData;
                    if (that.diId=='') {
                        that.diId=that.groupData[0].id
                    }
                    that.mealType=restaurantInit.mealType;
                    that.RestaurantItem();
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //获取表格
        RestaurantItem() {
            var restaurantItem=[];
            this.tableData=[];
            var that = this
            var url = "/api/Groups/RestaurantItem"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    portType:1,
                    groupId:that.diId,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    restaurantItem=res.data.data;
                    that.tableData=restaurantItem;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //新增
        addmealrecord(){
            this.mealrecordVisible=true;
            this.mealrecordfrom={
                id:0,
                date:'',
                startTime:'',
                endTime:'',
                type:'',
                name:'',
                tel:'',
                address:'',
                remark:'',
                currUserId:'',
                status:'',
            }
        },
        //类型切换
        typechange(val){
            console.log(val);
            this.mealrecordfrom.startTime="";
            for (let y = 0; y < this.mealType.length; y++) {
                if (this.mealType[y].id==val) {
                    this.mealrecordfrom.startTime=this.mealType[y].defaultStartTime;               
                }
            }
        },
        //餐食保存api
        RestaurantOp(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    
                    var status
                    if (this.mealrecordfrom.id == 0) {
                        status = 1
                    } else {
                        status = 2
                    }
                    var that = this
                    var url = "/api/Groups/RestaurantOp"
                    this.$axios({
                        method: 'post',
                        url: url,
                        headers: {
                            Authorization: 'Bearer ' + that.token
                        },
                        data: {
                            id: that.mealrecordfrom.id,
                            groupId: that.diId,
                            date: that.dateday(that.mealrecordfrom.date),
                            startTime: that.mealrecordfrom.startTime,
                            endTime:  that.mealrecordfrom.endTime,
                            type: that.mealrecordfrom.type,
                            name: that.mealrecordfrom.name,
                            tel: that.mealrecordfrom.tel,
                            address: that.mealrecordfrom.address,
                            remark: that.mealrecordfrom.remark,
                            currUserId: that.userid,
                            status: status,
                        }
                    }).then(function (res) {
                        if (res.data.code == 200) {
                            that.$message({
                                message: res.data.msg,
                                type: 'success',
                            });
                            that.mealrecordVisible = false;
                            that.RestaurantItem();
                        } else {
                            that.$message.error(res.data.msg);
                        }
                    })
                } else {
                    return false;
                }
            });

        },
        //团组切换
        groupDatachange(val){
            this.RestaurantItem();
        },
        
        //编辑
        redactclick(index,row){
            var that = this
            var url = "/api/Groups/RestaurantInfo"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data:{
                    portType:1,
                    id:row.id,
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    var restaurantInfo=res.data.data;
                    that.mealrecordfrom.id=restaurantInfo.id;
                    that.mealrecordfrom.date=new Date(restaurantInfo.date);
                    that.mealrecordfrom.startTime=restaurantInfo.startTime;
                    that.mealrecordfrom.endTime=restaurantInfo.endTime;
                    that.mealrecordfrom.type=restaurantInfo.type;
                    that.mealrecordfrom.name=restaurantInfo.name;
                    that.mealrecordfrom.tel=restaurantInfo.tel;
                    that.mealrecordfrom.address=restaurantInfo.address;
                    that.mealrecordfrom.remark=restaurantInfo.remark;
                    that.mealrecordVisible=true;
                    
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //删除
        deleteclick(index,row){
            this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var that = this
                var url = "/api/Groups/RestaurantDel"
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer ' + that.token
                    },
                    data:{
                        portType:1,
                        id:row.id,
                        deleteUserId:that.userid,
                    }
                }).then(function (res) {
                    if (res.data.code == 200) {
                        that.$message({
                            message: res.data.msg,
                            type: 'success',
                        });
                        that.RestaurantItem();
                    } else {
                        that.$message.error(res.data.msg);
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '操作已取消！'
                });
            });
            
        }
    },
    mounted(){
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userid = JSON.parse(localStorage.getItem('userinif')).userInfo.userId;
        this.RestaurantInit();
    }
}
</script>
<style>
.mealrecord-all {
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 830px;
}
.mealrecord-head{
    display: flex;
    justify-content: space-between;
}
.mealrecord-table{
    margin-top: 15px;
}
.mealrecord-dialog .el-form-item{
    width: 48%;
}
.mealrecord-dialog .el-form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
</style>