pharmacy.admin/src/views/reportManagement/expenditure/index.vue

<template>
  <div class="wrap app-container">
  	<div class="tools">
  		<span class="text-df">结转日期：</span>
	  	<el-date-picker
        :clearable="false"
	      v-model="date"
	      size="mini"
	      type="datetimerange"
        value-format="yyyy-MM-dd HH:mm:ss"
        :default-time="['00:00:00', '23:59:59']"
	      range-separator="至"
	      start-placeholder="开始日期"
	      end-placeholder="结束日期">
	    </el-date-picker>
      <el-button icon="el-icon-search" size="mini" type="primary" @click="search()">搜索</el-button>
      <el-button icon="el-icon-refresh" size="mini" @click="clear()">清空</el-button>
	    <el-button size="mini" type="primary" @click="exportExcel">导出</el-button>
      <!--<el-button size="mini" type="primary" @click="print">打印</el-button>-->
	  	</div>
    <div class="content">
    	<el-table :data="tableData" class="exptable" size="mini" style="width: 100%" :row-class-name="tableRowClassName">
        <el-table-column label="出入库方式" prop="name"></el-table-column>
        <el-table-column label="饮片">
          <el-table-column label="进价金额" prop="ypurchasePrice"></el-table-column>
          <el-table-column label="零售金额" prop="yretailPrice"></el-table-column>
        </el-table-column>
        <el-table-column label="颗粒剂">
          <el-table-column label="进价金额" prop="kpurchasePrice"></el-table-column>
          <el-table-column label="零售金额" prop="kretailPrice"></el-table-column>
        </el-table-column>
        <el-table-column label="膏方">
          <el-table-column label="进价金额" prop="gpurchasePrice"></el-table-column>
          <el-table-column label="零售金额" prop="gretailPrice"></el-table-column>
        </el-table-column>
        <el-table-column label="合计">
          <el-table-column label="进价金额" prop="countp"></el-table-column>
          <el-table-column label="零售金额" prop="countr"></el-table-column>
        </el-table-column>
      </el-table>
      <!-- <div class="page">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="10"
          layout="total, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div> -->
    </div>
  </div>
</template>

<script>
import { getReport, reportExport } from '@/api/inventory/inventory'
import dayjs                       from 'dayjs'

export default {
  data() {
    return {
    	date: [],
      page: 1,
      currentPage: 1,
      total: 0,
    	tableData: []
    }
  },
  mounted() {
    this.clear()
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === this.tableData.length - 1) {
        return 'warning-row';
      }
      return '';
    },
    getDataList () {
      if (!this.date || !this.date.length) {
        return this.$message.warning('请选择结转日期')
      }
      var form = {
        pharmacyId: localStorage.getItem('pharmacyId'),
        pageNum: this.page,
        pageSize: 10
      }
      if (this.date && this.date.length) {
        form.startTime = this.date[0]
        form.endTime = this.date[1]
      }
      getReport(form).then(res => {
        if (res.code == 200) {
          this.tableData = res.data
        }
      })
    },
  	search () {
      this.page = 1
      this.getDataList()
    },
    clear() {
      this.date = [
        dayjs().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
        dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss')
      ];
      this.search();
    },
  	exportExcel () {
      if (!this.date || !this.date.length) {
        return this.$message.warning('请选择结转日期')
      }
      var startTime = ''
      var endTime = ''
      if (this.date && this.date.length) {
        startTime = this.date[0]
        endTime = this.date[1]
      }
      reportExport({
        pharmacyId: localStorage.getItem('pharmacyId'),
        startTime: startTime,
        endTime : endTime
      }).then(res => {
        this.$message.success(`导出 ${res.name} 成功`);
      })
    },
    handleCurrentChange(val) {
      this.page = val
      this.getDataList()
    },
  	print () {}
  },
};
</script>

<style>
.exptable .warning-row {
  background: #F5F7FA;
}
</style>
<style scoped lang="scss">
.wrap {
  .text-df {
  	font-size: 14px;
  }
  .content {
    padding-top: 0;
  }
  .page {
    text-align: center;
    margin-top: 20px;
  }
  .tools {
    margin-bottom: 20px;
    .el-date-editor {
      width: 320px;
      margin-right: 10px;
    }
  }
}
</style>