merchant-web-master/src/views/comprehensive/Lcinquiry/index.vue

<template>
  <!-- <div style="padding: 10px;background-color:#F2F3F5"> -->
  <div style="background-color:#F2F3F5">
    <div class="history">
      <div style="background-color:#Fff;padding:20px 20px 0 20px">
          <!-- 顶部搜索 -->
          <div class="toolbar">
            <el-form ref="formInline" :inline="true" :model="formInline">
              <el-form-item label="日期">
                <el-date-picker
                  v-model="formInline.dates"
                  type="daterange"
                   style="width:220px"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
              <el-form-item label-width="0">
                <el-button   @click="search"  style="background-color: #3F9B6A;color: #fff;">查询</el-button>
                <el-button  @click="clear" class="buttonHover"
            style="color: #606266;border: 1px solid #dddfe5;background-color: #fff;">重置</el-button>
              </el-form-item>
            </el-form>
          </div>
      </div>
        <!-- 表格 -->
        <div class="content_table" style="padding: 15px 0px 10px 0px;background-color:#F2F3F5">
             <div style="background-color: #fff;padding: 10px;margin-bottom: 20px;">
          <div class="table">
            <el-table
              :data="tableData"
             :header-cell-style="{fontSize: '14px',color:'#0009',fontWeight: 'normal',backgroundColor:'#F2F3F5'}"
            >
              <el-table-column prop="id" label="序号">
                <template slot-scope="scope">
                  {{scope.$index+1}}
                </template>
               </el-table-column>
              <el-table-column label="库存类型"  prop="cl">
<template slot-scope="scope">
              商品库存
                </template>
              </el-table-column>
              <el-table-column prop="productName" label="商品名称">
              </el-table-column>
              <el-table-column prop="nowNum" label="现存数量" />
              <el-table-column prop="variationType" label="变动类型">
                <template slot-scope="scope">
                              {{scope.row.variationType==1?'增加':'减少'}}
                                </template>
                           </el-table-column>
              <el-table-column prop="variationNum" label="变动数量" />
              <!-- <el-table-column prop="btime" label="变动时间" />
              <el-table-column prop="by" label="变动原因" />
              <el-table-column prop="bp" label="操作人员" /> -->
            </el-table>
          </div>
          <!-- 分页 -->
          <div class="fenye">
			<div style="line-height:200%">共{{total}}条</div>
            <el-pagination class="pagination" :hide-on-single-page="flag" background  :current-page="formInline.pageNumber+1"
             layout="prev, pager,next" :total="total "
              @current-change="handleCurrentChange" />
          </div>
       </div>
        </div>
      </div>
  </div>
</template>
<script>
  import {cereShopProductInventoryLog} from '@/api/psRanking'
export default {
  data() {
    return {
      total: 0,
      pageSize: 10,
      currentPage: 1,
      formInline: {
		  dates:[],
		startTime:'',
		endTime:'',
		pageNumber:0,
        pageSize: 10
      },
       tableData: [],
	flag:false,
    }
  },
  mounted() {
    this.getAll()
  },
  methods: {
async getAll(){
const Orderlist = await cereShopProductInventoryLog(this.formInline)
this.tableData = Orderlist.data.content
this.total = this.tableData.length
},
async search(){
	if(this.formInline.dates.length!=0){
		this.formInline.startTime = this.formInline.dates[0]
		this.formInline.endTime = this.formInline.dates[1]
	}
  const Orderlist = await cereShopProductInventoryLog(this.formInline)
  this.tableData = Orderlist.data.content
  this.total = this.tableData.length
},
  clear(){
     this.formInline= {
     		  dates:[],
     		startTime:'',
     		endTime:'',
     		pageNumber:0,
       pageSize: 10
     }
     this.getAll()
  },
        handleCurrentChange(val) {
          this.formInline.pageNumber = val -1 
		  this.getAll()
        },
        handleSizeChange(val) {
         this.formInline.pageSize = val
        },
    },
 }
</script>
<style lang='scss' scoped>
.history{
  padding: 0px;
  padding-left: 10px;
  min-height: calc(100vh - 50px - 20px);
}
 ::v-deep .el-form-item__label{
        font-weight: normal;
         font-size: 14px;
       }
       ::v-deep .btn .el-button:focus,
        .el-button:hover {
          border: 1px solid #3F9B6A;
        }
        ::v-deep .el-button {
           border: 1px solid #3F9B6A;
         }
          ::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
           background-color: #3F9B6A;
         }
</style>
<style scoped>
.history /deep/ .el-table .cell.el-tooltip img {
  max-height: 100px;
}
  .fenye {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    position: relative;
  }
  .pagination {
    text-align: right;
    line-height: 20px;
  }
 .toolbar{
   .el-form-item{
     margin-bottom:0px;
   }
 }
</style>
<style>
.el-tooltip__popper {
  max-width: 50%;
}
</style>