cashier-web/src/views/finance/supplierBill/index.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-col>
        </el-row>
      </el-card>
    </div>
    <div class="head-container">
      <el-card shadow="never">
        <el-row :gutter="24">
          <el-col :span="8" style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
            <div>账单总金额（全部/本月）</div>
            <div>{{ state.summaryData.amountPayable || 0 }} / {{ state.summaryData.mouthAmountPayable || 0 }}</div>
          </el-col>

          <el-col :span="8" style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
            <div>已付款总金额（全部/本月）</div>
            <div>{{ state.summaryData.actualPaymentAmount || 0 }} / {{ state.summaryData.mouthActualPaymentAmount || 0 }}</div>
          </el-col>
          <el-col :span="8" style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
            <div>未付款总金额（全部/本月）</div>
            <div>{{ state.summaryData.unPaidAmount || 0 }} / {{ state.summaryData.mouthUnPaidAmount || 0 }}</div>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="head-container">
      <el-card shadow="never">
        <el-table v-loading="state.tableData.loading" :data="state.tableData.list">
          <el-table-column prop="name" label="供应商" width="220" />
          <el-table-column prop="amountPayable" label="账单金额" width="200" />
          <el-table-column prop="actualPaymentAmount" label="已付款金额" width="200" />
          <el-table-column prop="unPaidAmount" label="未付款金额" width="200" />
          <el-table-column prop="remark" label="备注" />
          <el-table-column label="操作" width="120">
            <template v-slot="scope">
              <el-button type="primary" size="small" link @click="handleTo(scope.row)">
                账单记录
              </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>
  </div>
</template>

<script setup>
import AuthAPI from "@/api/supplier/index";
const router = useRouter();

const state = reactive({
  query: {
    name: "",
  },
  summaryData: {},
  tableData: {
    list: [],
    page: 1,
    size: 10,
    loading: false,
    total: 0,
  },
});
onMounted(() => {
  getSummary();

  getTableData();
});

async function getSummary() {
  try {
    const res = await AuthAPI.getSummary();
    state.summaryData = res;
  } catch (error) {
    console.log(error);
  }
}
// 获取账单列表
async function getTableData() {
  state.tableData.loading = true;
  try {
    const res = await AuthAPI.getPage({
      page: state.tableData.page,
      size: state.tableData.size,
      key: state.query.name,
    });
    state.tableData.loading = false;
    state.tableData.list = res.records;
    state.tableData.total = res.totalRow * 1;
  } catch (error) {
    console.log(error);
  }
}
function handleTo(row) {
  // router.push({ path: "/finance/supplierBill/billingRecord", query: { id: e.id } });
  router.push({ name: "financeBillingRecord", query: { vendorId: row.vendorId, supplierName: row.name } });

}
// 重置查询
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>