update view
This commit is contained in:
parent
ec4c9bce63
commit
a6a5b85570
BIN
src/assets/imgs/china_regions-3.3.zip
Normal file
BIN
src/assets/imgs/china_regions-3.3.zip
Normal file
Binary file not shown.
13
src/components/CityPicker.vue
Normal file
13
src/components/CityPicker.vue
Normal file
@ -0,0 +1,13 @@
|
||||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CityPicker"
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -1,15 +1,188 @@
|
||||
<template>
|
||||
<h1>
|
||||
hello
|
||||
</h1>
|
||||
<div id="user-list">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="searchModel" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-select v-model="searchModel.first_to_tibet" placeholder="评估结构">
|
||||
<el-option label="没有高反" value="0"></el-option>
|
||||
<el-option label="轻度高反" value="1"></el-option>
|
||||
<el-option label="中毒高反" value="2"></el-option>
|
||||
<el-option label="高度高反" value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="searchModel.name" placeholder="姓名"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="info" @click="onSearch">查询</el-button>
|
||||
</el-form-item>
|
||||
<div class="float-right">
|
||||
<el-form-item>
|
||||
<el-select v-model="searchModel.first_to_tibet" placeholder="排序方式">
|
||||
<el-option label="评估时间排序" value=""></el-option>
|
||||
<el-option label="评估总分排序" value="1"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="dialogExportVisible=true">导出</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="data-list">
|
||||
<el-table
|
||||
:data="userList"
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="自评时间"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column prop="realname" label="姓名"/>
|
||||
<el-table-column prop="head" label="头痛症状"/>
|
||||
<el-table-column prop="head" label="胃肠道症状"/>
|
||||
<el-table-column prop="head" label="疲劳或虚弱"/>
|
||||
<el-table-column prop="head" label="头晕或眩晕"/>
|
||||
<el-table-column prop="head" label="总分"/>
|
||||
<el-table-column prop="head" label="评估结果"/>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="data-page text-right">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="currentPage"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, prev, pager, next,sizes, jumper"
|
||||
:total="totalCount">
|
||||
</el-pagination>
|
||||
</div>
|
||||
<el-dialog title="收货地址" :visible.sync="dialogExportVisible">
|
||||
<el-form name="dialog" :model="exportModel">
|
||||
<el-form-item label="导出数据">
|
||||
<el-radio-group v-model="exportModel.dataCount">
|
||||
<el-radio label="当前筛选数据(200条)" value="current"></el-radio>
|
||||
<el-radio label="所有数据(12000条)" value="all"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="导出字段">
|
||||
<el-checkbox-group v-model="exportModel.fields_basic">
|
||||
<el-checkbox border label="自评时间" name="type"></el-checkbox>
|
||||
<el-checkbox border label="姓名" name="type"></el-checkbox>
|
||||
<el-checkbox border label="头痛症状" name="type"></el-checkbox>
|
||||
<el-checkbox border label="胃肠道症状" name="type"></el-checkbox>
|
||||
<el-checkbox border label="劳累或疲劳" name="type"></el-checkbox>
|
||||
<el-checkbox border label="头晕或眩晕" name="type"></el-checkbox>
|
||||
<el-checkbox border label="总分" name="type"></el-checkbox>
|
||||
<el-checkbox border label="评估结果" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="可选字段">
|
||||
<el-checkbox-group v-model="exportModel.fields_basic">
|
||||
<el-checkbox border label="性别" name="type"></el-checkbox>
|
||||
<el-checkbox border label="年龄" name="type"></el-checkbox>
|
||||
<el-checkbox border label="身高" name="type"></el-checkbox>
|
||||
<el-checkbox border label="体重" name="type"></el-checkbox>
|
||||
<el-checkbox border label="久居地" name="type"></el-checkbox>
|
||||
<el-checkbox border label="抽烟量" name="type"></el-checkbox>
|
||||
<el-checkbox border label="饮酒量" name="type"></el-checkbox>
|
||||
<el-checkbox border label="首次进藏" name="type"></el-checkbox>
|
||||
<el-checkbox border label="既往病历" name="type"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="导出格式">
|
||||
<el-radio-group v-model="exportModel.format">
|
||||
<el-radio label="CSV" value="csv"></el-radio>
|
||||
<el-radio label="Excel" value="excel"></el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
var userObj = {
|
||||
date: '2019-06-18',
|
||||
open_id: '123123',
|
||||
realname: '张三',
|
||||
head: '无头痛症状'
|
||||
}
|
||||
|
||||
export default {
|
||||
name: "history"
|
||||
name: "test_record",
|
||||
data() {
|
||||
return {
|
||||
dialogExportVisible: false,
|
||||
cities: [],
|
||||
exportModel: {
|
||||
dataCount: 'current',
|
||||
fields_basic: '',
|
||||
fields_optional: '',
|
||||
format: 'csv'
|
||||
},
|
||||
searchModel: {
|
||||
first_to_tibet: '',
|
||||
province: '',
|
||||
city: ''
|
||||
},
|
||||
userList: Array(5).fill(userObj),
|
||||
currentPage: 1,
|
||||
totalCount: 401
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleProvinceChange(provinceId) {
|
||||
},
|
||||
onSearch() {
|
||||
|
||||
},
|
||||
handleSizeChange() {
|
||||
|
||||
},
|
||||
handleCurrentChange() {
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
.select-sex {
|
||||
input {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-head-name {
|
||||
height: 80px;
|
||||
&:after {
|
||||
content: ' ';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
img {
|
||||
float: left;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info {
|
||||
float: left;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-top: 10px;
|
||||
padding-left: 10px;
|
||||
p {
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,4 @@
|
||||
<template>
|
||||
|
||||
<div id="user-list">
|
||||
<div class="search-bar">
|
||||
<el-form :inline="true" :model="searchModel" class="demo-form-inline">
|
||||
@ -11,12 +10,28 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="searchModel.first_to_tibet" placeholder="活动区域">
|
||||
<el-select class="select-sex" v-model="searchModel.first_to_tibet">
|
||||
<el-option label="性别" value=""></el-option>
|
||||
<el-option label="男" value="1"></el-option>
|
||||
<el-option label="女" value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="searchModel.province" @change="handleProvinceChange">
|
||||
<el-option label="省份" value=""></el-option>
|
||||
<el-option v-for="c in provinces" :key="c.code" :label="c.name" :value="c.code"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-select v-model="searchModel.city">
|
||||
<template v-if="cities.length > 0">
|
||||
<el-option v-for="c in cities" :key="c.code" :label="c.name" :value="c.code"></el-option>
|
||||
</template>
|
||||
<el-option v-else label="asdfasd城市" value=""></el-option>
|
||||
|
||||
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-input v-model="searchModel.name" placeholder="姓名/微信号"></el-input>
|
||||
</el-form-item>
|
||||
@ -33,9 +48,13 @@
|
||||
label="微信"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<img src="../../assets/imgs/avatar.jpg" width="30px" alt="">
|
||||
<span style="margin-left: 10px">{{ scope.row.nickname }}</span>
|
||||
<span style="margin-left: 10px">{{ scope.row.open_id }}</span>
|
||||
<div class="user-head-name">
|
||||
<img src="../../assets/imgs/avatar.jpg" alt="">
|
||||
<div class="info">
|
||||
<p>昵称:{{ scope.row.nickname }}</p>
|
||||
<p>OpenId:{{ scope.row.open_id }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
@ -74,13 +93,13 @@
|
||||
prop="is_first_to_tibet"
|
||||
label="首次进藏">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
<el-table-column width="280"
|
||||
prop="medical_history_data"
|
||||
label="既往病史">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="data-page">
|
||||
<div class="data-page text-right">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
@ -96,43 +115,89 @@
|
||||
|
||||
<script>
|
||||
var userObj = {
|
||||
nickname:'张三',
|
||||
open_id:'123123',
|
||||
realname:'123123',
|
||||
gender:1,
|
||||
age:12,
|
||||
height:176,
|
||||
weight:106,
|
||||
address:'北京',
|
||||
smoke:'北京',
|
||||
drink:'北京',
|
||||
is_first_to_tibet:1,
|
||||
medical_history:1,
|
||||
medical_history_data:'反流性食道炎、慢性胃炎、胃溃疡、慢性胰腺炎、肠易激惹综合征、结肠炎',
|
||||
nickname: '张三',
|
||||
open_id: '123123',
|
||||
realname: '123123',
|
||||
gender: 1,
|
||||
age: 12,
|
||||
height: 176,
|
||||
weight: 106,
|
||||
address: '北京',
|
||||
smoke: '北京',
|
||||
drink: '北京',
|
||||
is_first_to_tibet: 1,
|
||||
medical_history: 1,
|
||||
medical_history_data: '反流性食道炎、慢性胃炎、胃溃疡、慢性胰腺炎、肠易激惹综合征、结肠炎',
|
||||
}
|
||||
import cities from '../../utils/distpicker';
|
||||
export default {
|
||||
name: "Index",
|
||||
data(){
|
||||
data() {
|
||||
return {
|
||||
searchModel:{
|
||||
first_to_tibet:''
|
||||
provinces:cities,
|
||||
cities:[],
|
||||
searchModel: {
|
||||
first_to_tibet: '',
|
||||
province:'',
|
||||
city:''
|
||||
},
|
||||
userList:Array(5).fill(userObj),
|
||||
currentPage:1,
|
||||
totalCount:401
|
||||
userList: Array(5).fill(userObj),
|
||||
currentPage: 1,
|
||||
totalCount: 401
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
onSearch(){
|
||||
methods: {
|
||||
handleProvinceChange(provinceId){
|
||||
for(var i = 0;i < cities.length;i++){
|
||||
if(provinceId && provinceId == cities[i].code){
|
||||
this.cities = cities[i].children;
|
||||
break;
|
||||
}
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
|
||||
},
|
||||
handleSizeChange(){
|
||||
handleSizeChange() {
|
||||
|
||||
},
|
||||
handleCurrentChange(){
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style scoped lang="less">
|
||||
.select-sex {
|
||||
input {
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-head-name {
|
||||
height:80px;
|
||||
&:after{
|
||||
content:' ';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
img {
|
||||
float:left;
|
||||
width: 80px;
|
||||
height:80px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.info {
|
||||
float:left;
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
padding-top:10px;
|
||||
padding-left:10px;
|
||||
p{
|
||||
height:30px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
2
src/utils/distpicker.js
Normal file
2
src/utils/distpicker.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user