220 lines
		
	
	
		
			9.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
			
		
		
	
	
			220 lines
		
	
	
		
			9.1 KiB
		
	
	
	
		
			Vue
		
	
	
	
<template>
 | 
						|
  <div class="app-container">
 | 
						|
    <div style="width: 100%;">
 | 
						|
      <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
 | 
						|
        <el-tab-pane label="今日菜品留样" name="1"></el-tab-pane>
 | 
						|
        <el-tab-pane label="昨日菜品留样" name="2"></el-tab-pane>
 | 
						|
        <el-tab-pane label="留样历史记录" name="3"></el-tab-pane>
 | 
						|
      </el-tabs>
 | 
						|
    </div> 
 | 
						|
 | 
						|
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
 | 
						|
        <el-form-item label="关键字" prop="searchValue">
 | 
						|
            <el-input v-model="queryParams.searchValue" placeholder="请输入菜品名称,编号" maxlength="20" clearable style="width: 240px"/>
 | 
						|
        </el-form-item>   
 | 
						|
        <el-form-item label="所属食堂" prop="canteenId">
 | 
						|
          <el-select v-model="queryParams.canteenId" placeholder="请选择所属食堂" style="width: 240px;" @change="handleCanteenChange">
 | 
						|
              <el-option v-for="item in canteenOptions"
 | 
						|
                  :key="item.canteenId"
 | 
						|
                  :label="item.canteenName"
 | 
						|
                  :value="item.canteenId"
 | 
						|
              ></el-option>
 | 
						|
          </el-select> 
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="所属档口" prop="stallId">
 | 
						|
          <el-select v-model="queryParams.stallId" placeholder="请选择所属档口" style="width: 240px" >
 | 
						|
              <el-option v-for="item in stallOptions"
 | 
						|
                  :key="item.stallId"
 | 
						|
                  :label="item.stallName"
 | 
						|
                  :value="item.stallId"
 | 
						|
              ></el-option>
 | 
						|
          </el-select> 
 | 
						|
        </el-form-item> 
 | 
						|
        <el-form-item label="重量状态" prop="weightStandard">
 | 
						|
            <el-select v-model="queryParams.weightStandard" style="width: 240px" clearable>  
 | 
						|
                <el-option label="重量已达标" value="1"></el-option>   
 | 
						|
                <el-option label="重量未达标" value="2"></el-option>   
 | 
						|
            </el-select>   
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="时长状态" prop="durationStandard">
 | 
						|
            <el-select v-model="queryParams.durationStandard" style="width: 240px" clearable>  
 | 
						|
                <el-option label="留样时长已达标" value="1"></el-option>   
 | 
						|
                <el-option label="留样时长未达标" value="2"></el-option>   
 | 
						|
            </el-select>   
 | 
						|
        </el-form-item>
 | 
						|
        <el-form-item label="存放状态" prop="saveStatus">
 | 
						|
            <el-select v-model="queryParams.saveStatus" style="width: 240px" clearable> 
 | 
						|
                <el-option label="未入柜" value="1"></el-option>
 | 
						|
                <el-option label="在柜" value="2"></el-option>   
 | 
						|
                <el-option label="离柜" value="3"></el-option>   
 | 
						|
                <el-option label="超时自动离柜" value="4"></el-option>   
 | 
						|
            </el-select>   
 | 
						|
        </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>
 | 
						|
 | 
						|
    <el-row :gutter="10" class="mb8"> 
 | 
						|
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
 | 
						|
    </el-row>
 | 
						|
 | 
						|
    <el-table v-loading="loading" :data="tableListData" height="800">
 | 
						|
      <el-table-column label="序号" align="center" width="80" type="index">
 | 
						|
        <template slot-scope="scope">
 | 
						|
          <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
 | 
						|
        </template>
 | 
						|
      </el-table-column>
 | 
						|
      <el-table-column label="日期" align="center" prop="sampleSaveTime" :show-overflow-tooltip="true"  width="150"/>
 | 
						|
      <el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true"  />
 | 
						|
      <el-table-column label="关联食堂" align="center" prop="canteenName" :show-overflow-tooltip="true"  />
 | 
						|
      <el-table-column label="档口名称" align="center" prop="stallName" :show-overflow-tooltip="true" />
 | 
						|
      <el-table-column label="餐次" align="center" prop="mealtimeType" :show-overflow-tooltip="true">
 | 
						|
        <template slot-scope="scope">
 | 
						|
          <span v-if="scope.row.mealtimeType==1">早餐</span>
 | 
						|
          <span v-if="scope.row.mealtimeType==2">午餐</span> 
 | 
						|
          <span v-if="scope.row.mealtimeType==3">下午茶</span> 
 | 
						|
          <span v-if="scope.row.mealtimeType==4">晚餐</span> 
 | 
						|
          <span v-if="scope.row.mealtimeType==5">夜宵</span> 
 | 
						|
        </template>
 | 
						|
      </el-table-column>
 | 
						|
      <el-table-column label="菜品编号" align="center" prop="dishesId" :show-overflow-tooltip="true"  />
 | 
						|
      <el-table-column label="菜品名称" align="center" prop="dishesName" :show-overflow-tooltip="true" />
 | 
						|
      <el-table-column label="留样重量(g)" align="center" prop="sampleWeight" :show-overflow-tooltip="true" />
 | 
						|
      <el-table-column label="所在留样柜" align="center" prop="deviceName" :show-overflow-tooltip="true"  />  
 | 
						|
      <el-table-column label="留样人" align="center" prop="staffName" :show-overflow-tooltip="true"  />  
 | 
						|
      <el-table-column label="样品图片" align="center" prop="imageUrl" :show-overflow-tooltip="true">
 | 
						|
        <template slot-scope="scope">
 | 
						|
            <img :src="scope.row.imageUrl" v-if="scope.row.imageUrl" alt="" style="width: 80px;height: 40px;" @click="openImg(scope.row)">
 | 
						|
            <span v-else>无</span>
 | 
						|
        </template>
 | 
						|
      </el-table-column>
 | 
						|
      <el-table-column label="入柜时间" align="center" prop="enterCabinetTime" :show-overflow-tooltip="true"  />  
 | 
						|
      <el-table-column label="离柜时间" align="center" prop="leaveCabinetTime" :show-overflow-tooltip="true"  />  
 | 
						|
      <el-table-column label="存放状态" align="center" prop="saveStatusName" :show-overflow-tooltip="true"  />  
 | 
						|
      <el-table-column label="违规状态" align="center" prop="illegalStatusName" :show-overflow-tooltip="true" width="200"/>  
 | 
						|
    </el-table> 
 | 
						|
    <pagination
 | 
						|
      v-show="total>0"
 | 
						|
      :total="total"
 | 
						|
      :page.sync="queryParams.pageNum"
 | 
						|
      :limit.sync="queryParams.pageSize"
 | 
						|
      @pagination="getList"
 | 
						|
    />
 | 
						|
 | 
						|
    <el-dialog :visible.sync="dialogVisible" width="700px">
 | 
						|
        <img style="width: 100%;height: 100%;" :src="dialogImageUrl" alt="">
 | 
						|
    </el-dialog>
 | 
						|
  </div>
 | 
						|
</template>
 | 
						|
 | 
						|
<script> 
 | 
						|
import { systemAreaTreeApi,getCanteenByAreaApi,getStallByCanteenApi } from "@/api/base/stall";
 | 
						|
import { getKitchenSampleRecordListApi } from "@/api/kitchen/foodSafety"; 
 | 
						|
export default {
 | 
						|
  name: "",
 | 
						|
  dicts: [],
 | 
						|
  data() {
 | 
						|
    return {
 | 
						|
      // 遮罩层
 | 
						|
      loading: false,
 | 
						|
      // 选中数组
 | 
						|
      ids: [],
 | 
						|
      // 非单个禁用
 | 
						|
      single: true,
 | 
						|
      // 非多个禁用
 | 
						|
      multiple: true,
 | 
						|
      // 显示搜索条件
 | 
						|
      showSearch: true,
 | 
						|
      // 总条数
 | 
						|
      total: 0,
 | 
						|
      //表格数据
 | 
						|
      tableListData: [],
 | 
						|
      // 弹出层标题
 | 
						|
      title: "",
 | 
						|
      // 是否显示弹出层
 | 
						|
      open: false, 
 | 
						|
      canteenOptions:[],//查询-食堂下拉选
 | 
						|
      stallOptions:[],//查询-档口下拉选
 | 
						|
      // 查询参数
 | 
						|
      queryParams: {
 | 
						|
        pageNum: 1,
 | 
						|
        pageSize: 10, //     
 | 
						|
        searchValue: undefined,
 | 
						|
        canteenId: undefined, 
 | 
						|
        stallId: undefined, 
 | 
						|
        weightStandard: undefined, 
 | 
						|
        durationStandard: undefined, 
 | 
						|
        saveStatus: undefined
 | 
						|
      },
 | 
						|
      activeName:"1", 
 | 
						|
      dialogVisible:false,//图片弹窗
 | 
						|
      dialogImageUrl:"",//图片弹窗  
 | 
						|
    };
 | 
						|
  },
 | 
						|
  created() { 
 | 
						|
    this.getCanteenList();
 | 
						|
    this.getList();
 | 
						|
  },
 | 
						|
  methods: {
 | 
						|
      getCanteenList( ){
 | 
						|
        let param= {canteenType: 1}
 | 
						|
        getCanteenByAreaApi(param).then((response) => {
 | 
						|
          this.canteenOptions=response.rows||[] 
 | 
						|
          this.stallOptions = []
 | 
						|
          this.$set(this.queryParams,"stallId",null)
 | 
						|
        });
 | 
						|
      },
 | 
						|
      handleCanteenChange(e){ 
 | 
						|
        let param= {
 | 
						|
          canteenId:e
 | 
						|
        }
 | 
						|
        getStallByCanteenApi(param).then((response) => {
 | 
						|
          this.stallOptions=response.rows||[]
 | 
						|
          this.$set(this.queryParams,"stallId",null)
 | 
						|
        });
 | 
						|
      },
 | 
						|
      /** 搜索按钮操作 */
 | 
						|
      handleQuery() {
 | 
						|
          this.queryParams.pageNum = 1;
 | 
						|
          this.getList();
 | 
						|
      },
 | 
						|
      /** 重置按钮操作 */
 | 
						|
      resetQuery() { 
 | 
						|
          this.queryParams={
 | 
						|
            pageNum: 1,
 | 
						|
            pageSize: 10,  
 | 
						|
            searchValue: undefined,
 | 
						|
            canteenId: undefined, 
 | 
						|
            stallId: undefined, 
 | 
						|
            weightStandard: undefined, 
 | 
						|
            durationStandard: undefined, 
 | 
						|
            saveStatus: undefined
 | 
						|
          }
 | 
						|
          this.resetForm("queryForm");
 | 
						|
          this.handleQuery();
 | 
						|
      },
 | 
						|
      handleTabClick(tab, event) { 
 | 
						|
            console.log(tab.name,tab.label)
 | 
						|
            this.handleQuery()
 | 
						|
      },
 | 
						|
      /** 查询列表 */
 | 
						|
      getList() {
 | 
						|
          this.loading = true;
 | 
						|
          let param = this.queryParams
 | 
						|
          param.searchType = this.activeName;
 | 
						|
          getKitchenSampleRecordListApi(param).then(response => {
 | 
						|
              this.tableListData = response.rows;
 | 
						|
              this.total = Number(response.total);
 | 
						|
              this.loading = false;
 | 
						|
          });
 | 
						|
      },
 | 
						|
      openImg(row) {
 | 
						|
        this.dialogImageUrl = row.imageUrl;
 | 
						|
        this.dialogVisible = true;
 | 
						|
      },
 | 
						|
  }
 | 
						|
};
 | 
						|
</script>
 |