Vue_New/src/xt_pages/charging/charging_collect.vue

<template>
  <div class="main-contain">
    <div class="position"></div>
    <div class="app-container">
      <div style="display: flex;justify-content: space-around;">
        <div > <el-input v-model="input" placeholder="请输入内容"></el-input></div>
        <div>
          日期查询:
          <el-date-picker
            v-model="value1"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <div>
          费用类型:
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div><el-button type="primary">查询</el-button></div>
      </div>
      <div style="margin:10px 0;">
        <el-table border :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
          <el-table-column prop="index" label="序号" width="">
          </el-table-column>
          <el-table-column prop="name" label="患者姓名" width="">
          </el-table-column>
          <el-table-column prop="HD" label="费用类别">
          </el-table-column>
          <el-table-column prop="HDF" label="透析模式">
          </el-table-column>
          <el-table-column prop="HD+HP" label="总次数">
          </el-table-column>
          <el-table-column prop="address" label="操作" width="300">
            <template slot-scope="scope">
              <el-button type="primary" @click="mingx_click(scope.row)" >详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="text-align: right;">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[100, 200, 300, 400]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="400">
        </el-pagination>
      </div>
    </div>

    <el-dialog
      title="汇总详情"
      :visible.sync="collect_show"
      width="80%"
      >
      <div>
        <div style="display: flex;justify-content: space-around;">
          <div> 
            <el-autocomplete
              class="inline-input"
              v-model="state1"
              :fetch-suggestions="querySearch"
              placeholder="请输入内容"
              @select="handleSelect"
            ></el-autocomplete>
          </div>
          <div>
            日期查询:
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 300px;">
            </el-date-picker>
          </div>
          <div>
            费用类型:
            <el-select v-model="value" placeholder="请选择" style="width: 100px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div>
            透析模式:
            <el-select v-model="value" placeholder="请选择" style="width: 100px;">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
          <div><el-button type="primary">查询</el-button></div>
        </div>
        <div style="margin: 10px 0;">
          <el-table border :data="tableData" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
            <el-table-column prop="index" label="序号" width="">
            </el-table-column>
            <el-table-column prop="name" label="患者姓名" width="">
            </el-table-column>
            <el-table-column prop="HD" label="费用发生时间">
            </el-table-column>
            <el-table-column prop="HD" label="费用类别">
            </el-table-column>
            <el-table-column prop="HDF" label="透析类型">
            </el-table-column>
            <el-table-column prop="HD+HP" label="费用次数">
            </el-table-column>
            <el-table-column prop="address" label="创建人">
            </el-table-column>
            <el-table-column prop="address" label="备注">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default{
    data(){
      return{
        value:0,
        value1:'',
        input:'',
        currentPage:1,
        state1:'',
        collect_show:false,
        options:[{value:0,label:'全部'},{value:1,label:'充值'},{value:2,label:'扣费'}],
        tableData: [{ index: 1, name: '小米', HD: 1, HDF: 1, 'HD+HP': 1, 'qita': 1 ,examine:false}],
      }
    },
    methods:{
      mingx_click(){
        this.collect_show = true
      },
      querySearch(){

      },
      handleSelect(){

      },
      handleSizeChange(){

      },
      handleCurrentChange(){

      },
    }
  }
</script>