yuanqu/ruoyi-ui/src/views/tongj/foodRecord/index.vue

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="140px" class="nghfs">
        <p class="lqw" style="font-weight: 700;font-size: 15px;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;"> 搜索条件</p>
      <el-form-item label="食谱日期" prop="menuFoodTime">
        <el-select v-model="queryParams.menuFoodTime" placeholder="请选择食谱日期" clearable>
          <el-option
            v-for="dict in dict.type.week"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="记录时间" prop="recordTime">
        <el-date-picker clearable
          v-model="queryParams.recordTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="请选择记录时间">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="ntgs" >
    <div style="display: flex;align-items: center; margin-bottom: 10px;">
      <p class="lqw" style="font-weight: 700;font-size: 15px; margin: 0; margin-bottom: 0;"> <img src="../../../assets/images/icon_yq_htgl_btzs.png" alt="" style="width:10px;height: 10px;margin-right: 10px;"> 食谱记录</p>
    <el-row :gutter="10" class="mb8">
      <!-- <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:foodRecord:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['system:foodRecord:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:foodRecord:remove']"
        >删除</el-button>
      </el-col> -->
	  <!-- <el-col :span="1.5">
	    <el-button
	      type="primary"
	      plain
	      icon="el-icon-plus"
	      size="mini"
	      @click="handleAddmr"
	      v-hasPermi="['system:foodRecord:add']"
	    >查看每日食谱</el-button>
	  </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:foodRecord:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
	</div>
	
	<div>
					 <div>
						 <el-row :gutter="20" v-if="foodRecordList.length !=0">
								 <el-col :span="8" v-for="(item,index) in foodRecordList" :key="index" style="margin-bottom: 20px;">
								 								 <div class="foord">
								 									<div class="foorso" style="height: 60px;">
								 										<p ><span style="margin-right: 10px;"></span><dict-tag :options="dict.type.week" :value="item.menuFoodTime" /></p>
								 										<p>{{item.recordTime == null?'暂无数据' : item.recordTime}}</p>
								 									</div>
								 									 <div style="width: 100%;" class="ingsek">
								 									 	<el-carousel :interval="4000"  arrow="hover" height="200px;width:100%;" indicator-position="none" v-if="item.nsjge.length !=0">
								 									 	    <el-carousel-item v-for="(itemt,index) in item.nsjge" :key="index" >
								 									 											<div style="position: relative;" @click="imge(itemt.url)">
								 									 												<img :src="defaultSettings.urls+baseUrl +itemt.url" alt="" style="width: 100%;height: 200px;">
								 									 												<p style="position: absolute;bottom: 0;left: 0;font-weight: 500; height: 24px;background-color: rgba(0,0,0,.5);color: #fff;font-size: 14px;width: 100%;padding-left: 10px;line-height: 24px;margin: 0;">{{itemt.title}}</p>
								 									 											</div>
								 									 	    </el-carousel-item>
								 									 	  </el-carousel>
								 									 									<div v-if="item.nsjge.length ==0" style="height: 200px;" class="egle">
								 									 										<el-empty description="暂无数据"></el-empty>
								 									 									</div>
								 									 </div>
								 									<div style="border-bottom: 1px solid #DADADA;padding-top: 15px;padding-bottom: 15px;" class="foorset">
								 										<div>
								 											<span>午餐：</span><p>{{item.menuFoodDetailLu == null?'暂无数据' : item.menuFoodDetailLu}}</p>
								 										</div>
								 										<div>
								 											<span style="color: #28C529;">晚餐：</span><p>{{item.menuFoodDetailDi == null?'暂无数据' : item.menuFoodDetailDi}}</p>
								 										</div>
								 									</div>
								 									<div style="display: flex;align-items: center;height: 40px;">
								 										<p @click="handleDelete(item)"
								 								v-hasPermi="['system:foodRecord:remove']" style="flex:1;line-height: 40px; text-align: center; border-right: 1px solid #DADADA;color: #FF6969;font-weight: bold;font-size: 14px;">删除</p>
								 										<!-- <p  @click="handleUpdate(item)"
								 								v-hasPermi="['system:menuFood:edit']" style="flex:1;line-height: 40px;text-align: center;color: #5F8BF4;font-weight: bold;font-size: 14px;">修改</p> -->
								 									</div>
								 								 </div>
								 </el-col>
						 </el-row>
						 <div v-if="foodRecordList.length ==0">
						 						 <el-empty description="暂无数据"></el-empty>
						 </div>
					 </div>
	</div>

    
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
	</div>

    <!-- 添加或修改每日食谱记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="食谱日期 周一" prop="menuFoodTime">
          <el-select v-model="form.menuFoodTime" placeholder="请选择食谱日期 周一">
            <el-option
              v-for="dict in dict.type.week"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="食谱早餐详情" prop="menuFoodDetailBk">
          <el-input v-model="form.menuFoodDetailBk" placeholder="请输入食谱早餐详情" />
        </el-form-item>
        <el-form-item label="食谱中餐详情" prop="menuFoodDetailLu">
          <el-input v-model="form.menuFoodDetailLu" placeholder="请输入食谱中餐详情" />
        </el-form-item>
        <el-form-item label="食谱午餐详情" prop="menuFoodDetailDi">
          <el-input v-model="form.menuFoodDetailDi" placeholder="请输入食谱午餐详情" />
        </el-form-item>
        <el-form-item label="食堂名称" prop="canteenName">
          <el-input v-model="form.canteenName" placeholder="请输入食堂名称" />
        </el-form-item>
        <el-form-item label="食堂id" prop="canteenId">
          <el-input v-model="form.canteenId" placeholder="请输入食堂id" />
        </el-form-item>
        <el-form-item label="记录时间" prop="recordTime">
          <el-date-picker clearable
            v-model="form.recordTime"
            type="date"
            value-format="yyyy-MM-dd"
            placeholder="请选择记录时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="创建部门" prop="createDept">
          <el-input v-model="form.createDept" placeholder="请输入创建部门" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
	<el-dialog title="查看图片" :visible.sync="opentp" width="700px" append-to-body>
		<div>
			<img :src="defaultSettings.urls+baseUrl+iges" alt="" style="width: 100%;height: 100%;">
		</div>
	</el-dialog>
	<el-dialog title="每日食谱" :visible.sync="openm" width="780px" append-to-body>
		 <div>
		 	  						 <div class="yaunbei" style="position: relative;">
		 	  							 <div class="yaunbei_one" style="position: relative; z-index: 22;">
		 	  								 <p style="font-size: 29px;color: #FFFFFE;position: absolute;top: 143px;left: 183px;">{{weekst}}</p>
		 	  							 </div>
		 	  							 <div class="yaunbei_two" style="position: relative;margin-top: -140px; ">
		 	  								<div v-for="(item,index) in  menuFoodList" :key="index" style="margin-top: 30px;">
		 	  									<img style="width: 100%;height: 56px;" src="../../../assets/images/pic_bzsp_z1.png" alt="" v-if="item.menuFoodTime == '星期一'">
												<img style="width: 100%;height: 56px;" src="../../../assets/images/pic_bzsp_z2.png" alt="" v-if="item.menuFoodTime == '星期二'">
												<img style="width: 100%;height: 56px;" src="../../../assets/images/pic_bzsp_z3.png" alt="" v-if="item.menuFoodTime == '星期三'">
												<img style="width: 100%;height: 56px;" src="../../../assets/images/pic_bzsp_z4.png" alt="" v-if="item.menuFoodTime == '星期四'">
												<img style="width: 100%;height: 56px;" src="../../../assets/images/pic_bzsp_z5.png" alt="" v-if="item.menuFoodTime == '星期五'">
												<img style="width: 100%;height: 56px;" src="../../../assets/images/pic_bzsp_z6.png" alt="" v-if="item.menuFoodTime == '星期六'">
												<img style="width: 100%;height: 56px;" src="../../../assets/images/pic_bzsp_z7.png" alt="" v-if="item.menuFoodTime == '星期日'">
		 	  								   <div style="display: flex;
		 									   align-items: flex-start;padding: 0 12px; margin-top: 25px;">
		 										   <span style="background: #FFE0AE;
		                                    border-radius: 16px;font-weight: 400;
		 											font-size: 25px;color: #161616;
		 											width: 24%;text-align: center;padding: 3px 0;">午餐</span>
		 										   <p style="margin: 0; margin-left: 20px; 
		 										   font-weight: 400;font-size: 25px;color: #382324;">{{item.menuFoodDetailLu == null?'暂无数据' : item.menuFoodDetailLu}}</p>
		 									   </div>
		 									   <div style="display: flex;
		 									   align-items: flex-start;padding: 0 12px; margin-top: 25px;">
		 									   		<span style="background: #DCF1FF;
		 									        border-radius: 16px;font-weight: 400;
		 									   		font-size: 25px;color: #161616;
		 									   		width: 24%;text-align: center;padding: 3px 0;">晚餐</span>
		 									   		<p style="margin: 0; margin-left: 20px; 
		 									   		font-weight: 400;font-size: 25px;color: #382324;">{{item.menuFoodDetailDi == null?'暂无数据' : item.menuFoodDetailDi}}</p>
		 									   </div>
		 									</div>
											<div style="position: absolute; bottom: -60px; right: 0;">
												<img style="width: 580px;height: 265px;" src="../../../assets/images/pic_bzsp_dbbg.png" alt="">
											</div>
											<img src="../../../assets/images/pic_bzsp_cpbjb_xqbg.png" alt="" style="position: absolute; top: 300px;left: -20px;height: 72%;">
		 	  							 </div>
										 
		 	  						 </div>
									 <!-- <div slot="footer" class="dialog-footer">
									   <el-button @click="cancel">取 消</el-button>
									 </div> -->
		 	  						 
		 	  					 </div>
	</el-dialog>
  </div>
</template>

<script>
import { listFoodRecord, getFoodRecord, delFoodRecord, addFoodRecord, updateFoodRecord } from "@/api/system/foodRecord";
import {
		listMenuFood,
		getMenuFood,
		delMenuFood,
		addMenuFood,
		updateMenuFood
	} from "@/api/system/menuFood";
const defaultSettings = require("@/settings.js");
export default {
  name: "FoodRecord",
  dicts: ['week'],
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
	  baseUrl: process.env.VUE_APP_BASE_API,
	  defaultSettings:defaultSettings,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 每日食谱记录表格数据
      foodRecordList: [],
      // 弹出层标题
      title: "",
	  menuFoodList:[],
      // 是否显示弹出层
      open: false,
	  opentp:false,
	  openm:false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        menuFoodTime: null,
        menuFoodDetailBk: null,
        menuFoodDetailLu: null,
        menuFoodDetailDi: null,
        recordTime: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },
	  iges:''
    };
  },
  created() {
    this.getList();
  },
  methods: {
	  imge(row){
	  	console.log(row)
	  	this.iges = row
	  	this.opentp = true
	  	
	  },
    /** 查询每日食谱记录列表 */
    getList() {
      this.loading = true;
      listFoodRecord(this.queryParams).then(response => {
        this.foodRecordList = response.rows;
		this.foodRecordList.filter(rou=>{
			rou.nsjge = []
			if(rou.menuFoodDetailLuPhoto !=null){
				if(rou.menuFoodDetailLuPhoto !=''){
					rou.menuFoodDetailLuPhoto = rou.menuFoodDetailLuPhoto.split(',')
					rou.menuFoodDetailLuPhoto.filter(rout=>{
						let nhfe={title:'中餐',url:rout}
						rou.nsjge.push(nhfe)
					})
					
				}
			}
			if(rou.menuFoodDetailDiPhoto !=null){
				if(rou.menuFoodDetailDiPhoto !=''){
					rou.menuFoodDetailDiPhoto = rou.menuFoodDetailDiPhoto.split(',')
					rou.menuFoodDetailDiPhoto.filter(routt=>{
						let nhfe={title:'晚餐',url:routt}
						rou.nsjge.push(nhfe)
					})
				}
			}
		})
        this.total = response.total;
        this.loading = false;
      });
    },
	getListm() {
		this.loading = true;
		let nsgs={'pageNum': 1,'pageSize': 7,'isUse':'Y'}
		listMenuFood(nsgs).then(response => {
			// this.menuFoodList = response.rows;
			let ilseli =['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
			let ilselif =['星期一','星期二','星期三','星期四','星期五','星期六','星期日']
			let njgw = []
				response.rows.filter(rou=>{
					rou.menuFoodTime = rou.menuFoodTime.replace(/\s*/g,'');
					for(var i=0;i< ilseli.length;i++ ){
						if(rou.menuFoodTime == ilseli[i]){
							ilseli.splice(i,1)
						}
					}
				})
				if(response.rows.length < 7){
				for(var h=0;h< ilseli.length;h++ ){
					let nhg={'menuFoodTime':ilseli[h],'menuFoodDetailDi':'暂无数据','menuFoodDetailLu':'暂无数据'}
				    response.rows.push(nhg)
				}
				 response.rows.filter(roug=>{
					 if(roug.menuFoodTime == '星期一'){
						ilselif[0] = roug
					 }
					 if(roug.menuFoodTime == '星期二'){
					 	ilselif[1] =roug
					 }
					 if(roug.menuFoodTime == '星期三'){
					 	ilselif[2] = roug
					 }
					 if(roug.menuFoodTime == '星期四'){
					 	ilselif[3] = roug
					 }
					 if(roug.menuFoodTime == '星期五'){
					 	ilselif[4] = roug 
					 }
					 if(roug.menuFoodTime == '星期六'){
					 	ilselif[5] = roug
					 }
					 if(roug.menuFoodTime == '星期日'){
					 	ilselif[6] = roug
					 }
					 
				 })
				 this.menuFoodList = ilselif
			}
			this.total = response.total;
			this.loading = false;
		});
	},
	getWeek (day) {
	         var today = new Date();
	         var targetday_milliseconds=today.getTime() + 1000*60*60*24*day;
	         today.setTime(targetday_milliseconds);
	         var tYear = today.getFullYear();
	         var tMonth = today.getMonth();
	         var tDate = today.getDate();
	         tMonth = this.doHandleMonth(tMonth + 1);
	         tDate =  this.doHandleMonth(tDate);
	         return tMonth+"/"+tDate;
	     },
	     doHandleMonth(month){
	        var m = month;
	        if(month.toString().length == 1){
	           m = "0" + month;
	        }
	        return m;
	     },
		 handleAddmr(){
			this.openm = true 
		 },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        menuFoodRecordId: null,
        menuFoodTime: null,
        menuFoodType: null,
        menuFoodDetailBk: null,
        menuFoodDetailLu: null,
        menuFoodDetailDi: null,
        canteenName: null,
        canteenId: null,
        recordTime: null,
        createDept: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.menuFoodRecordId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加每日食谱记录";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const menuFoodRecordId = row.menuFoodRecordId || this.ids
      getFoodRecord(menuFoodRecordId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改每日食谱记录";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.menuFoodRecordId != null) {
            updateFoodRecord(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addFoodRecord(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const menuFoodRecordIds = row.menuFoodRecordId || this.ids;
      this.$modal.confirm('是否确认删除数据项？').then(function() {
        return delFoodRecord(menuFoodRecordIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/foodRecord/export', {
        ...this.queryParams
      }, `foodRecord_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style lang="scss">
	.egle{
		.el-empty{
			height: 180px;
		}
		.el-empty__image svg{
			height: 140px;
		}
	}
	.ingsek{
	 .el-carousel__container{
		 height: 200px;
	 }	
	}
	.nhgrls {
		.el-dialog__body {
			padding: 0;
		}
	}

	.hyr {
		span {
			text-decoration: underline;
		}
	}
</style>
<style scoped lang="scss">
	.ingq {
		p {
			margin: 0;
		}
	}

	.iuer {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.ite {
			display: flex;
			justify-content: space-between;
			align-items: center;

			p {
				margin: 0;
				font-size: 15px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #AAAAAA;
				padding: 4px 12px;
				background: #F7F8FA;
				border-radius: 4px;
				margin-right: 20px;
			}

			.actt {
				background: #E6EBFF;
				border: 1px solid #5974E0;
				border-radius: 4px;
				color: #5974E0;
			}

		}
	}

	.lqw {
		padding: 0 10px;
		margin: 0;
		margin-bottom: 20px;
	}

	.nhgel {
		height: 170px;
		background-color: #313b61;
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}

	.app-container {
		background-color: #f3f4f6;
		padding-top: 10px;

	}

	.ntgs {
		position: relative;
		background-color: #fff;
		padding: 5px;
		// border-radius: 5px;
		padding-top: 10px;
		padding: 10px 20px;
		padding-left: 10px;

		.pagination-container {
			height: 50px;
		}
	}

	.nghfs {
		position: relative;
		background-color: #fff;
		padding-top: 18px !important;
		padding: 5px;
		// border-radius: 5px;
		// margin-bottom: 20px;
	}

	.ksf {
		img {
			width: 100%;
			height: 100%;
		}
	}
	.foord{
		background: #FFFFFF;
		box-shadow: 0px 0px 10px 0px #CDCDCD;
		border-radius: 4px;
		.foorso{
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #DADADA;
			padding: 0 10px;
			
			p{
				display: flex;
				font-weight: 800;
				font-size: 16px;
				color: #161616;
				align-items: center;
				span{
					width: 8px;
					height: 8px;
					background: #4775EA;
					border-radius: 50%;
				}
			}
		}
		.foorset{
			div{
				display: flex;
				align-items: flex-start;
				justify-content: flex-start;
				padding: 0 10px;
				span{
					width: 22%;
					font-weight: bold;
					font-size: 14px;
					color: #FE5A0E;
				}
				p{
					flex:1;
					margin-top: 0;
					font-weight: bold;
					font-size: 14px;
					color: #606266;
				}
			}
		}
	}
	.nghfs{
	position: relative;
		background-color: #fff;
		padding-top: 18px !important;
		padding: 5px;
		// border-radius: 5px;
		// margin-bottom: 20px;
	}
	.ksf{
		img{
			width:100%;
			height: 100%;
		}
	}
	.yaunbei{
		background: url('../../../assets/images/pic_bzsp_ymbg.png') no-repeat;
		background-size: 100% 100%;
		padding-bottom: 90px;
	}
	.yaunbei_one{
		height: 290px;
		width: 550px;
		background: url('../../../assets/images/pic_bzsp_btbg.png') no-repeat;
		background-size: 549px 290px;
		margin-left: 50%;
		transform: translateX(-50%);
	}
	.yaunbei_two{
		width: 650px;
		padding: 150px 65px 180px 65px;
		background: url('../../../assets/images/pic_bzsp_cpbjb_bg.png') no-repeat;
		background-size: 649px 100%;
		margin-left: 50%;
		transform: translateX(-50%);
	}
</style>