123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <link rel="stylesheet" href="../../../css/element.css">
- <link rel="stylesheet" href="./css/tabChange.css">
- </head>
- <body>
- <div id="app">
- <template>
- <div class="nav">
- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px;" class="tabNav">
- <el-radio-button label="top">频繁就医</el-radio-button>
- <el-radio-button label="right">超高费用</el-radio-button>
- <el-radio-button label="bottom">重复检查检验</el-radio-button>
- <el-radio-button label="left">用药分析</el-radio-button>
- </el-radio-group>
- </div>
- <!-- <el-tabs :tab-position="tabPosition" style="height: 200px;"> -->
- <!-- <el-tab-pane label="用户管理">用户管理</el-tab-pane>
- <el-tab-pane label="配置管理">配置管理</el-tab-pane>
- <el-tab-pane label="角色管理">角色管理</el-tab-pane>
- <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane> -->
- <!-- </el-tabs> -->
- </template>
- <div class="main">
- <div class="tab1" v-if='showCancel'>
- <span>一周内就医次数>=3次</span>
- <template>
- <el-table :data="tableData" border style="width: 100%">
- <el-table-column prop="name" label="姓名" width="120">
- </el-table-column>
- <el-table-column prop="province" label="就医次数" width="120">
- </el-table-column>
- <el-table-column prop="address" label="身份证" width="400">
- </el-table-column>
- <el-table-column prop="city" label="性别" width="120">
- </el-table-column>
- <el-table-column prop="zip" label="年龄" width="120">
- </el-table-column>
- <el-table-column prop="address" label="家庭住址" width="400">
- </el-table-column>
- <el-table-column fixed="right" label="操作" width="100">
- <template slot-scope="scope">
- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
- <el-button type="text" size="small">编辑</el-button>
- </template>
- </el-table-column>
- </el-table>
- <span class="total">总计:1200条</span>
- </template>
- </div>
- <div class="tab2">
- <template>
- <span>就诊类型:</span><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>
- <span>机构等级</span>
-
- </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>
- <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>
- </template>
-
-
- <br>
- <span>一周内就医次数>=3次</span>
- <template>
- <el-table :data="tableData" border style="width: 100%">
- <el-table-column prop="name" label="姓名" width="120">
- </el-table-column>
- <el-table-column prop="province" label="就医次数" width="120">
- </el-table-column>
- <el-table-column prop="address" label="身份证" width="400">
- </el-table-column>
- <el-table-column prop="city" label="性别" width="120">
- </el-table-column>
- <el-table-column prop="zip" label="年龄" width="120">
- </el-table-column>
- <el-table-column prop="address" label="家庭住址" width="400">
- </el-table-column>
- <el-table-column fixed="right" label="操作" width="100">
- <template slot-scope="scope">
- <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
- <el-button type="text" size="small">编辑</el-button>
- </template>
- </el-table-column>
- </el-table>
- <span class="total">总计:1200条</span>
- </template>
- </div>
- </div>
- </div>
- </div>
- <script src="../../../js/vue.js"></script>
- <script src="../../../js/jquery.min.js?v=2.1.4"></script>
- <script src="../../../js/element.js"></script>
- <script>
- new Vue({
- el: "#app",
- data() {
- return {
- tabPosition: 'top',
- showCancel: false,
- tableData: [{
- 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-04',
- name: '王小虎',
- province: '上海',
- city: '普陀区',
- address: '上海市普陀区金沙江路 1518 弄',
- zip: 200333
- }, {
- date: '2016-05-04',
- name: '王小虎',
- province: '上海',
- city: '普陀区',
- address: '上海市普陀区金沙江路 1518 弄',
- zip: 200333
- }, {
- date: '2016-05-04',
- name: '王小虎',
- province: '上海',
- city: '普陀区',
- address: '上海市普陀区金沙江路 1518 弄',
- zip: 200333
- },],
- options: [{
- value: '选项1',
- label: '门急诊'
- }, {
- value: '选项2',
- label: '住院'
- }],
- value: '门急诊'
- };
- },
- methods: {
- handleClick(row) {
- console.log(row);
- }
- },
- })
- </script>
- </body>
- </html>
|