elizebeth/src/xt_pages/DepositManagement/DepositSearch.vue

<template>
<!-- 押金查询-->
  <div class="main-contain">
    <div class="position">
      <bread-crumb :crumbs="crumbs"></bread-crumb>
    </div>
    <div class="app-container">
      <div
        style="
          justify-content: flex-start;
          margin: 0px 0 12px 0;
          display: flex;
          align-items: center;
        "
      >
        <div>
<!--          <el-input-->
<!--            size="small"-->
<!--            style="width: 200px; margin-left: 10px"-->
<!--            class="filter-item"-->
<!--            placeholder="请输入患者名称"-->
<!--            v-model.trim="keyword"-->
<!--          />-->
          <el-select v-model.trim="keyword" clearable filterable placeholder="请输入患者名称" @select="handleSelect" ><!--@change="updateconfig1(h1)"-->
            <el-option
              v-for="item in users"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <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>{{ scope.row.his_patient_name ? scope.row.his_patient_name : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="可用金额" align="center">
          <template slot-scope="scope">
            <span>{{ scope.row.deposit ? scope.row.deposit : "" }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="450px">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="primary"
              @click="toDetails(scope.row, scope.row.$index)"
            >
              流水详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 50, 100, 200, 500, 1000]"
        :page-size="10"
        background
        align="right"
        style="margin-top: 20px"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import BreadCrumb from "@/xt_pages/components/bread-crumb";
import {
  gethisuser,
  getuserlist
}from "@/api/deposit";
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      crumbs: [
        { path: false, name: "押金管理" },
        { path: "/DepositManagement/DepositSearch", name: "押金查询" },
      ],
      tableData: [],
      total: 0,
      page: 1,
      limit: 10,
      keyword:'',
      users:[],//可用患者列表
    };
  },
  created(){
    this.init()
    this.getuser()
  },

  methods: {
    // 初始化数据
    init() {
      //分页
      var params = {
        keyword: this.keyword,
        page: this.page,
        limit: this.limit,
      };
      getuserlist(params).then((res) =>{
        if (res.data.state == 1){
          this.total = res.data.data.total;
          this.tableData = res.data.data.list;
        }
      })
    },

    //获取患者列表
    getuser(){
      var params = {};
      gethisuser(params).then((res) =>{
        if (res.data.state == 1){
          this.users = res.data.data.list;
        }
        console.log("this.users",this.users)
      })
    },

    // 查询操作
    search() {
      var params = {
        keyword: this.keyword,
        page: this.page,
        limit: this.limit,
      };
      getuserlist(params).then((res) =>{
        if (res.data.state == 1){
          this.total = res.data.data.total;
          this.tableData = res.data.data.list;
        }
      })
    },

    // 页表操作
    handleSizeChange(val) {
      this.limit = val;
      this.init();
    },
    handleCurrentChange(val) {
      this.page = val;
      this.init();
    },
    handleSelect(item){
      this.keyword = item.id
    },
    updateconfig(){
      console.log("keyword",this.keyword)
    },

    // 流水详情
    toDetails(data,val) {
      console.log("data",data)
      console.log("data",val)
      this.$router.push({ path: "/DepositManagement/DepositDetails",query:{key:data}});
    },
  },
};
</script>
<style>
</style>