123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281 |
- <template>
- <div class="page_checkAll">
- <div class="cell clearfix">
- <el-form :inline="true" :model="listQuery">
- <el-form-item label>
- <el-input v-model.trim="listQuery.search" placeholder="姓名/透析号" style="width:150px"></el-input>
- <el-button type="primary" @click="onSearch" icon="el-icon-search">搜索</el-button>
- </el-form-item>
- </el-form>
- <el-select v-model="value" placeholder="请选择" style="width:120px;margin-right:20px">
- <el-option
- v-for="item in options"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- ></el-option>
- </el-select>
- <label class="title">
- <span class="name">日期查询</span> :
- </label>
- <el-date-picker
- v-model="listQuery.start_time"
- prefix-icon="el-icon-date"
- @change="changeTime"
- :editable="false"
- style="width: 196px;"
- type="date"
- placeholder="选择日期时间"
- align="right"
- format="yyyy-MM-dd"
- value-format="yyyy-MM-dd"
- ></el-date-picker>
- <span class>-</span>
- <el-date-picker
- v-model="listQuery.end_time"
- prefix-icon="el-icon-date"
- @change="changeEndTime"
- :editable="false"
- style="width: 196px;"
- type="date"
- placeholder="选择日期时间"
- align="right"
- format="yyyy-MM-dd"
- value-format="yyyy-MM-dd"
- ></el-date-picker>
- </div>
- <el-container>
- <div style="width:150px">
- <div class="tableTitle">患者列表</div>
- <el-table :data="tableData" border style="width: 100%;" height="500">
- <el-table-column prop="date" label="日期" width="70"></el-table-column>
- <el-table-column prop="name" label="姓名" width="80"></el-table-column>
- </el-table>
- </div>
- <div style="padding-left:10px;flex:1">
- <div class="tableTitle">统计表</div>
- <el-table :data="tableData1" style="width: 100%" border>
- <el-table-column fixed prop="date" label="日期"></el-table-column>
- <el-table-column prop="name" label="姓名"></el-table-column>
- <el-table-column prop="province" label="省份"></el-table-column>
- <el-table-column prop="city" label="市区"></el-table-column>
- <el-table-column prop="address" label="地址"></el-table-column>
- <el-table-column prop="zip" label="邮编"></el-table-column>
- </el-table>
-
- <el-pagination
- align="right"
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="listQuery.page"
- :page-sizes="[10, 20, 50, 100]"
- :page-size="10"
- background
- style="margin-top:20px;"
- layout="total, sizes, prev, pager, next, jumper"
- :total="total"
- ></el-pagination>
- </div>
- </el-container>
- </div>
- </template>
-
-
- <script>
- export default {
- data() {
- return {
- listQuery: {
- start_time: "",
- end_time: "",
- page: 1,
- limit: 10
- },
- options: [
- {
- value: "选项1",
- label: "黄金糕"
- },
- {
- value: "选项2",
- label: "双皮奶"
- },
- {
- value: "选项3",
- label: "蚵仔煎"
- },
- {
- value: "选项4",
- label: "龙须面"
- },
- {
- value: "选项5",
- label: "北京烤鸭"
- }
- ],
- value: "请选项",
- tableData: [
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- },
- {
- date: "2016",
- name: "王小虎"
- }
- ],
- tableData1: [
- {
- date: "2016-05-03",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-02",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-04",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-01",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-08",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-06",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-07",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-08",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-06",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- },
- {
- date: "2016-05-07",
- name: "王小虎",
- province: "上海",
- city: "普陀区",
- address: "上海市普陀区金沙江路 1518 弄",
- zip: 200333
- }
- ]
- };
- },
- methods: {
- changeTime() {},
- changeEndTime(val) {
- var time =
- this.getTimestamp(val) - this.getTimestamp(this.listQuery.start_time);
- if (time < 0) {
- this.$message.error("结束时间不能小于开始时间");
- this.listQuery.end_time = "";
- } else {
- }
- }
- }
- };
- </script>
-
- <style lang="scss" scoped>
- .tableTitle {
- font-size: 16px;
- color: #000;
- font-weight: bold;
- margin-bottom: 10px;
- }
- </style>
- <style lang="scss">
- .page_checkAll {
- .cell {
- text-align: center;
- }
- }
- </style>
|