elizebeth/src/xt_pages/DepositManagement/DepositRefund.vue

<template>
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div style="width: 100%">
        <div class="Top">
          <div>退款列表</div>
          <div class="btn_list">
            <el-button size="small" type="primary" @click="to_add">
              新增
            </el-button>
            <el-button size="small" type="primary" @click="pass_exam">
              审核通过
            </el-button>
            <el-button size="small" type="warning" @click="reject_exam">
              审核拒绝
            </el-button>
          </div>
        </div>
        <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="margin-right: 30px">
              退款类型：
              <el-select v-model="value" placeholder="请选择">
                <el-option
                  v-for="item in [1, 2]"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>

            <div style="margin-right: 30px">
              审核状态：
              <el-select v-model="status" placeholder="请选择">
                <el-option
                  v-for="item in [1, 2]"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                </el-option>
              </el-select>
            </div>

            <div style="width: 465px">
              <span>日期查询：</span>
              <el-date-picker
                v-model="date"
                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
          ref="multipleTable"
          :header-cell-style="{
            backgroundColor: 'rgb(245, 247, 250)',
            color: '#606266',
          }"
          :data="tableData"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" width="55"> </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-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-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" width="350px">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="primary"
                icon="el-icon-edit-outline"
                @click="edit(scope.row, scope.row.$index)"
              >
              </el-button>
              <el-button
                size="small"
                type="danger"
                icon="el-icon-delete"
                @click="toDelete(scope.row, scope.row.$index)"
              >
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div>充值金额合计：<span></span></div>
      </div>

      <el-dialog
        title="申请退款"
        :visible.sync="dialogVisible"
        width="30%"
        :show-close="close"
      >
        <refundAdd></refundAdd>
        <span slot="footer" class="dialog-footer">
          <el-button @click="pass">审核通过</el-button>
          <el-button type="primary" @click="Submit">保 存</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import refundAdd from "./Template/refundAdd.vue";
export default {
  components: {
    BreadCrumb,
    refundAdd,
  },
  data() {
    return {
      status: "",
      value: "",
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "充值详情" },
      ],
      tableData: [{}, {}],
      total: 0,
      page: 1,
      limit: 10,
      keywords: "",
      dialogVisible: false,
      close: false,
      date:""
    };
  },

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

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

    // 新增
    to_add() {
      this.dialogVisible = true;
    },

    // 编辑
    edit(){},

    // 删除
    toDelete(){},

    // 审核通过
    pass_exam() {},

    // 审核拒绝
    reject_exam() {},

    // 提交
    Submit() {},

    // 退款申请审核
    pass(){},

    // 列表选择
    handleSelectionChange(){}
  },
};
</script>
<style scoped>
.Top {
  width: 100%;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #e5e5e5;
  margin-bottom: 10px;
}
.btn_list {
  display: flex;
}
</style>>