Vue_New/src/xt_pages/DepositManagement/Template/RechargeSummary.vue

<template>
  <div class="main-contain">
    <div class="app-container">
      <div
        style="
          justify-content: flex-start;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div style="display: flex">
          <div style="width: 250px">
            <el-input
              size="small"
              style="width: 200px; margin-left: 10px"
              class="filter-item"
              placeholder="请输入编号/患者名称"
              v-model.trim="keywords"
            />
          </div>

          <div style="width: 465px">
            <span>日期查询：</span>
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
          <el-button
            size="small"
            class="filter-item"
            type="primary"
            icon="el-icon-search"
            @click="search"
            >查询</el-button
          >
        </div>
      </div>

      <el-table
        :header-cell-style="{
          backgroundColor: 'rgb(245, 247, 250)',
          color: '#606266',
        }"
        :data="tableData"
        border
      >
        <el-table-column type="index" label="序号" align="center" width="200">
        </el-table-column>
        
        <el-table-column label="患者名称" align="center">
          <template slot-scope="scope">
            <span></span>
          </template>
        </el-table-column>

        <el-table-column label="充值金额" align="center">
          <template slot-scope="scope">
            <span></span>
          </template>
        </el-table-column>
        <el-table-column label="押金余额" align="center">
          <template slot-scope="scope">
            <span></span>
          </template>
        </el-table-column>
        
      </el-table>

      <div>
          充值金额合计：<span></span>
      </div>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "押金查询" },
      ],
      tableData: [{}, {}],
      total: 0,
      page: 1,
      limit: 10,
      keywords: "",
      value1:""
    };
  },

  methods: {
    // 初始化数据
    init() {},

    // 查询操作
    search() {},

    // 删除
    toDelete() {},

    // 审核
    examine() {},

    // 打印凭证
    print(){}
  },
};
</script>
<style>
</style>