web_dist/src/views/yp-inventory/YpPlanDetails.vue

<template>
  <div class="layout_display_flex_y">
    <div class="layout_container">
      <div class="layout_main layout_el-table">
        <el-table :data="ypPlanDetailData.slice(pageSize * (currentPage - 1), pageSize * currentPage)" border stripe highlight-current-row>
          <el-table-column type="index" label="序号" width="60" fixed/>
          <el-table-column prop="remark" label="备注" width="120" fixed/>
          <el-table-column prop="drugName" label="药品名称" width="220" show-overflow-tooltip fixed/>
          <el-table-column prop="specification" label="规格" width="150" show-overflow-tooltip/>
          <el-table-column prop="packRetprice" label="零售价" width="100"/>
          <el-table-column prop="buyPrice" label="购入价" width="100"/>
          <el-table-column prop="amount" label="库存量" width="100" />
          <el-table-column prop="manuName" label="制药厂" width="150" show-overflow-tooltip/>
          <el-table-column prop="amount3" label="3天用量" width="100" />
          <el-table-column prop="amount7" label="7天用量" width="100" />
          <el-table-column prop="amount14" label="14天用量" width="100" />
          <el-table-column prop="amount30" label="30天用量" width="100" />
          <el-table-column prop="amount60" label="60天用量" width="100" />
          <el-table-column prop="days" label="可用天数" width="100" />
          <el-table-column prop="buyAmount" label="采购计划" width="100" />
          <el-table-column prop="unit" label="单位" width="100" />
          <el-table-column prop="buyFee" label="购入金额" width="100" />
          <el-table-column prop="impDate" label="导入时间" width="140" />
        </el-table>
      </div>
      <div>
        <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 15, 20, 25]"
                       :total="ypPlanDetailData.length" layout="total, sizes, prev, pager, next, jumper"
                       style="margin-top: 5px" @size-change="handleSizeChange"
                       @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup name="YpPlanDetails">
import { ref, onMounted, nextTick, watch } from 'vue'

const props = defineProps({
  ypPlanDetails: {
    type: Object,
    default: []
  }
})
const ypPlanDetailData = ref([])
const pageSize = ref(20)
const currentPage = ref(1)
const handleSizeChange = (val) => {
  pageSize.value = val
}
const handleCurrentChange = (val) => {
  currentPage.value = val
}

onMounted(() => {
  nextTick(() => {
    ypPlanDetailData.value = props.ypPlanDetails
  })
})

watch(() => props.ypPlanDetails, () => {
  ypPlanDetailData.value = props.ypPlanDetails
})
</script>