cashier-web/src/views/finance/supplierBill/billingRecord.vue

<template>
  <div class="app-container">
    <div class="head-container">
      <el-card shadow="never">
        <el-alert title="当前列表仅作为数据记录，不产生任何实际交易。" type="warning" show-icon :closable="false"
          style="margin-bottom: 15px;" />
        <el-row :gutter="20">
          <el-col :span="4">
            <el-input v-model="state.query.name" clearable placeholder="请输入耗材名称" style="width: 100%" class="filter-item"
              @keyup.enter="getTableData" />
          </el-col>

          <el-col :span="16">
            <el-button type="primary" @click="getTableData">查询</el-button>
            <el-button type="primary" @click="handlePayment('all')" plain>批量付款</el-button>
            <el-text tag="b" size="large" style="margin-left: 15px;">供应商：{{ state.supplierName }}</el-text>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="head-container">
      <el-card shadow="never">
        <el-table @selection-change="handleSelectionChange" v-loading="state.tableData.loading"
          :data="state.tableData.list">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="80" />
          <el-table-column label="耗材信息">
            <template v-slot="scope">
              <div>{{ scope.row.conName }}</div>
              <div>单价：{{ scope.row.purchasePrice }}</div>
              <div>入库数量：{{ scope.row.inOutNumber }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="amountPayable" label="账单金额" width="120" />
          <el-table-column prop="actualPaymentAmount" label="已付款金额" width="120" />
          <el-table-column prop="unPaidAmount" label="未付款金额" width="120" />
          <el-table-column prop="createTime" label="创建时间" width="120" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column label="操作" width="200">
            <template v-slot="scope">
              <el-button type="primary" size="small" link @click="handlePayment(scope.row)">
                付款
              </el-button>
              <el-button type="primary" size="small" link @click="handleRecord(scope.row.id)">
                付款记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

    </div>
    <div class="head-container">
      <el-pagination v-model:current-page="state.tableData.page" v-model:page-size="state.tableData.size"
        :total="state.tableData.total" :page-sizes="[10, 20, 30, 50, 100]"
        layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
    </div>
    <payment ref="refPayment" @refresh="getTableData"></payment>
  </div>
</template>

<script setup>
import AuthAPI from "@/api/supplier/index";
import payment from "./components/payment.vue";
import { ElMessage } from "element-plus";

const route = useRoute();
const router = useRouter();

const state = reactive({
  query: {
    name: "",
    vendorId: null,
  },
  tableData: {
    list: [],
    page: 1,
    size: 10,
    loading: false,
    total: 0,
  },
  supplierName: '',
  flowIdList: [],
  allAmount: 0
});
onMounted(() => {
  if (route.query.vendorId) {
    state.query.vendorId = route.query.vendorId
  }
  if (route.query.supplierName) {
    state.supplierName = route.query.supplierName
  }
  getTableData();
});
// 获取账单记录列表
async function getTableData() {
  state.tableData.loading = true;
  try {
    const res = await AuthAPI.getRecordList({
      page: state.tableData.page,
      size: state.tableData.size,
      key: state.query.name,
      vendorId: state.query.vendorId,
    });
    state.tableData.loading = false;
    state.tableData.list = res.records;
    state.tableData.total = res.totalRow * 1;
  } catch (error) {
    console.log(error);
  }
}
const refPayment = ref();
function handlePayment(item) {
  if (item != 'all') {
    state.flowIdList = [item.id]
    state.allAmount = item.unPaidAmount
  } else {
    if( state.flowIdList.length <= 0 ){
      ElMessage({ type: "error", message: "请选择付款耗材" });
      return;
    } 
  }

  refPayment.value.open({ flowIdList: state.flowIdList, supplierName: state.supplierName,allAmount:state.allAmount });
}
function handleSelectionChange(e) {
  state.flowIdList = []
  state.allAmount = 0
  e.map(item => {
    state.flowIdList.push(item.id)
    state.allAmount += item.unPaidAmount
  })
}
// 付款记录
function handleRecord(id) {
  router.push({ name: "financePaymentRecord", query: { id: id, supplierName: state.supplierName } });

}

// 重置查询
function resetHandle() {
  state.query.name = "";
  getTableData();
}
// 分页回调
function paginationChange(e) {
  state.tableData.page = e;
  getTableData();
}

</script>

<style scoped lang="scss">
.head-container {
  margin-bottom: 20px;
}

.shop_info {
  display: flex;

  .info {
    flex: 1;
    padding-left: 4px;
  }
}

.el-link {
  min-height: 23px;
  margin: 0 5px;
}
</style>