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

<template>
  <div class="layout_display_flex_y">
    <div style="margin-bottom: 6px; background-color: #fff;">
      <el-input v-model="totalFee" class="w-50 m-2" style="width: 240px;font-size: larger" disabled>
        <template #prepend>总费用 </template>
      </el-input>
      <el-input v-model="totalFeeUpdate" class="w-50 m-2" style="width: 240px;font-size: larger; margin-left: 5px" disabled>
        <template #prepend>审核费用 </template>
      </el-input>
      <el-input v-model="content" class="w-50 m-2" style="width: 300px; margin-left: 5px">
        <template #prepend>审核意见 </template>
      </el-input>
      <el-button type="primary" icon="Check" @click="saveYpPlanData" style="margin-left: 5px">审核</el-button>
    </div>
    <div class="layout_container">
      <div class="layout_main layout_el-table">
        <el-table :data="showed_data" @sort-change="sort_charge" border stripe highlight-current-row>
          <el-table-column type="index" label="序号" width="60" fixed/>
          <el-table-column prop="remark" label="备注" width="100" fixed/>
          <el-table-column prop="supplyName" label="药品供应商" width="200" show-overflow-tooltip fixed/>
          <el-table-column prop="drugName" label="药品名称" width="200" show-overflow-tooltip fixed/>
          <el-table-column prop="specification" label="规格" width="150" show-overflow-tooltip/>
          <el-table-column prop="packRetprice1" label="零售价" width="100"/>
          <el-table-column prop="buyPrice1" label="购入价" width="100"/>
          <el-table-column prop="buyAmount" label="采购计划" width="100">
            <template #default="scope">
              <el-input v-model.number="scope.row.buyAmount" size="small" @change="buyAmountCharge(scope.row)" />
            </template>
          </el-table-column>
          <el-table-column prop="buyMoney" label="购入金额" width="100" sortable/>
          <el-table-column prop="unit" label="单位" width="60" />
          <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="impDate" label="导入时间" width="140" />
        </el-table>
      </div>
      <div>
        <el-pagination :current-page="currentPageMx" :page-size="pageSizeMx" :page-sizes="[10, 15, 20, 25]"
                       :total="ypPlanDetailData.length" layout="total, sizes, prev, pager, next, jumper"
                       style="margin-top: 5px" @size-change="handleSizeChangeMx"
                       @current-change="handleCurrentChangeMx">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script setup name="YpPlanDetails">
import { ref, onMounted, nextTick, watch } from 'vue'
import {updateYpPlanAuditData, saveYpPlanDetail} from "@/api/yp-inventory/yp-plan-info.js";
import {ElMessage, ElMessageBox} from "element-plus";

const props = defineProps({
  ypPlanDetails: {
    type: Object,
    default: {}
  },
  formData: {
    type: Object,
    default: {}
  },
  zfy: {
    type: Number,
    default: 0
  }
})
const ypPlanDetailData = ref([])
const totalFee = ref(0)
const totalFeeUpdate = ref(0)
const content = ref('')
const form = ref({})
const emit = defineEmits(['close', 'closeYpPlanDetails'])
const showed_data = ref([])
const pageSizeMx = ref(20)
const currentPageMx = ref(1)
const handleSizeChangeMx = (val) => {
  pageSizeMx.value = val
  showed_data.value = props.ypPlanDetails.slice((currentPageMx.value - 1) * pageSizeMx.value, currentPageMx.value * pageSizeMx.value)
}
const handleCurrentChangeMx = (val) => {
  currentPageMx.value = val
  showed_data.value = props.ypPlanDetails.slice((currentPageMx.value - 1) * pageSizeMx.value, currentPageMx.value * pageSizeMx.value)
}

onMounted( () => {
  nextTick(() => {
    ypPlanDetailData.value = props.ypPlanDetails.sort(sortFun('buyMoney', false))
    form.value = props.formData
    totalFee.value = props.zfy
    totalFeeUpdate.value = props.zfy
    showed_data.value = ypPlanDetailData.value.slice(0, pageSizeMx.value)
  })
})
watch(() => props.ypPlanDetails, () => {
  ypPlanDetailData.value = props.ypPlanDetails
  form.value = props.formData
  totalFee.value = props.zfy
  totalFeeUpdate.value = props.zfy
  showed_data.value = props.ypPlanDetails.slice((currentPageMx.value - 1) * pageSizeMx.value, currentPageMx.value * pageSizeMx.value)
})
// 排序改变事件
const sort_charge = (column) => {
  currentPageMx.value = 1
  if(column.order === null){
    // 默认按照购入价的降序排序
    ypPlanDetailData.value = ypPlanDetailData.value.sort(sortFun('buyFee', false))
  } else {
    ypPlanDetailData.value = ypPlanDetailData.value.sort(sortFun(column.prop, column.order === 'ascending'))
  }
  showed_data.value = ypPlanDetailData.value.slice(0, pageSizeMx.value) // 排序完显示到第一页
}

// 排序通用方法
const sortFun = (attr, rev) => {
  // 第一个参数传入info里面的prop表示排的是哪一列，第二个参数是升还是降排序
  if(rev === undefined){
    rev = 1
  } else {
    rev = (rev) ? 1 : -1
  }
  return function(a, b){
    a = a[attr]
    b = b[attr]
    if(a < b){
      return rev * -1
    }
    if(a > b){
      return rev * 1
    }
    return 0
  }
}

// 根据修改的购入计划（量）计算购入金额
const buyAmountCharge = (row) => {
  let dj = row.buyMoney
  let money = (row.buyAmount * row.buyPrice1).toFixed(2)
  if(money.endsWith(".00")){
    row.buyMoney = money.replace(".00", "")
  } else {
    row.buyMoney = money
  }
  totalFeeUpdate.value = (totalFeeUpdate.value - dj + parseFloat(row.buyMoney)).toFixed(2)
}

// 保存审核内容
const saveYpPlanData = () => {
  ElMessageBox.confirm("确定审核?", {
    cancelButtonText: '取消',
    confirmButtonText: '确定',
    type: 'warning',
    distinguishCancelAndClose: true,
    dangerouslyUseHTMLString: true
  }).then(() => {
    saveYpPlanDetail(ypPlanDetailData.value).then((res) => {
      if (res.cg) {
        ElMessage({
          type: "success",
          message: res.cg,
          duration: 2500,
          showClose: true,
        });
        updateYpPlanAudit()
      }
    })
  })
}

// 保存审核意见等内容
const updateYpPlanAudit = () => {
  form.value.totalFee = totalFeeUpdate.value
  form.value.content = content.value
  updateYpPlanAuditData(form.value)
      .then((res) => {
        if (res.cg) {
          ElMessage({
            type: "success",
            message: res.cg,
            duration: 2500,
            showClose: true,
          });
          emit('closeYpPlanDetails', true)
        }
      })
      .catch(() => {
        ElMessage({
          type: "error",
          message: '药品计划意见审核失败！',
          duration: 2500,
          showClose: true,
        });
      })
}
</script>