提交 4ad6c051 编写于 作者: chengxiang.li's avatar chengxiang.li

update

上级 8b69f016
<template> <template>
<div class="lable-list-wrap"> <div class="label-list-wrap label-detail-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb> <bread-crumb
:curmbFirst="curmbFirst"
:curmbSecond="curmbSecond"
:curmbThird="curmbThird"
:jumPathThird="jumPathThird">
</bread-crumb>
<div class="component-content screenSet" id="screenSet"> <div class="component-content screenSet" id="screenSet">
<p class="top-title">分组详情</p> <div class="label-name">
<el-row :gutter="30" class="lable-name-row"> <p class="title">分组名称:</p>
<el-col :span="6"> <p class="name">允小雀</p>
<el-input v-model="labelName" placeholder="请输入分组名称" size="small"></el-input> <p class="modify">修改</p>
</el-col> <el-button type="danger" plain size="small" class="delete-label">删除分组</el-button>
<el-col :span="6"> </div>
<el-button type="primary" size="small" class="create-new-lable">查询</el-button> <div class="label-member">
<el-button type="default" size="small" class="create-new-lable">重置</el-button> <p class="title">分组成员:</p>
</el-col> <p class="member-number">888人</p>
<el-col :span="6" class="right"> <div class="right">
<el-button type="primary" size="small" class="create-new-lable">新建分组</el-button> <el-button type="primary" size="small" class="create-new-label">添加居民</el-button>
</el-col> <el-button type="default" size="small" class="create-new-label">批量删除</el-button>
</el-row> </div>
</div>
<el-table
ref="multipleTable"
:data="tableData"
tooltip-effect="dark"
style="width: 100%"
@selection-change="handleSelectionChange">
<el-table-column
type="selection"
width="55">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="性别"
width="120">
</el-table-column>
<el-table-column
prop="name"
label="年龄"
width="120">
</el-table-column>
<el-table-column
prop="dd"
label="诊断"
>
</el-table-column>
<el-table-column
prop="name"
width="120">
操作
</el-table-column>
</el-table>
</div> </div>
</div> </div>
</template> </template>
...@@ -29,7 +70,40 @@ ...@@ -29,7 +70,40 @@
return { return {
curmbFirst: "居民管理", curmbFirst: "居民管理",
curmbSecond: "分组管理", curmbSecond: "分组管理",
curmbThird: '分组详情',
jumPathThird: '/patients-manage/labels-manage/labels-list',
labelName: '', labelName: '',
tableData: [{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄',
dd:'第三方说带飞的身份多少发生大幅度沙发上的说带飞说带飞的身份我跟如果如果'
}, {
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-08',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-06',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-07',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}],
} }
}, },
components: { components: {
...@@ -39,11 +113,61 @@ ...@@ -39,11 +113,61 @@
mounted: function() { mounted: function() {
commonUtil.resizeHeight(); commonUtil.resizeHeight();
}, },
methods: {
handleSelectionChange(){
console.log('handleSelectionChange>>>>')
},
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.label-detail-wrap{
.screenSet{
background: #fff;
padding: 30px;
display: flex;
flex-direction: column;
}
.label-name{
width: 100%; height: 45px;
border-bottom: 1px solid #efefef;
font-size: 14px;
line-height: 32px;
color: #606266;
p{
display: inline-block;
&.name{
color: #93969c;
padding: 0 15px;
}
&.modify{
color: #449284;
cursor: pointer;
}
}
.delete-label{
float: right;
}
}
.label-member{
width: 100%; height: 65px;
font-size: 14px;
color: #606266;
p{
display: inline-block;
line-height: 65px;
&.member-number{
padding: 0 15px;
color: #449284;
}
}
.right{
float: right;
padding-top: 16px;
}
}
}
</style> </style>
<template> <template>
<div class="lable-list-wrap"> <div class="label-list-wrap">
<bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb> <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond" ></bread-crumb>
<div class="component-content screenSet" id="screenSet"> <div class="component-content screenSet" id="screenSet">
<p class="top-title">分组管理</p> <p class="top-title">分组管理</p>
<el-row :gutter="30" class="lable-name-row"> <el-row :gutter="30" class="label-name-row">
<el-col :span="6"> <el-col :span="6">
<el-input v-model="labelName" placeholder="请输入分组名称" size="small"></el-input> <el-input v-model="labelName" placeholder="请输入分组名称" size="small"></el-input>
</el-col> </el-col>
<el-col :span="6"> <el-col :span="6">
<el-button type="primary" size="small" class="create-new-lable">查询</el-button> <el-button type="primary" size="small" class="create-new-label">查询</el-button>
<el-button type="default" size="small" class="create-new-lable">重置</el-button> <el-button type="default" size="small" class="create-new-label">重置</el-button>
</el-col> </el-col>
<el-col :span="6" class="right"> <el-col :span="6" class="right">
<el-button type="primary" size="small" class="create-new-lable">新建分组</el-button> <el-button type="primary" size="small" class="create-new-label">新建分组</el-button>
</el-col> </el-col>
</el-row> </el-row>
<p class="total-lable">共:75个分组</p> <p class="total-label">共:75个分组</p>
<div class="lable-list"> <div class="label-list">
<el-tag class="each-label" @click="goToDetail">高新区(34人)</el-tag> <el-tag class="each-label" @click="goToDetail">高新区(34人)</el-tag>
<el-tag class="each-label">高血压(64人)</el-tag> <el-tag class="each-label">高血压(64人)</el-tag>
<el-tag class="each-label">权力的游戏(34人)</el-tag> <el-tag class="each-label">权力的游戏(34人)</el-tag>
...@@ -45,11 +45,18 @@ ...@@ -45,11 +45,18 @@
components: { components: {
BreadCrumb, BreadCrumb,
}, },
created(){
// 获取分组列表
this.getLabelList();
},
// 挂载到Dom完成时 // 挂载到Dom完成时
mounted: function() { mounted: function() {
commonUtil.resizeHeight(); commonUtil.resizeHeight();
}, },
methods: { methods: {
getLabelList(){
console.log('获取分组列表...');
},
goToDetail(){ goToDetail(){
this.$router.push({path: '/patients-manage/labels-manage/labels-detail'}) this.$router.push({path: '/patients-manage/labels-manage/labels-detail'})
} }
...@@ -58,7 +65,7 @@ ...@@ -58,7 +65,7 @@
</script> </script>
<style lang="less" > <style lang="less" >
.lable-list-wrap{ .label-list-wrap{
.screenSet{ .screenSet{
background: #fff; background: #fff;
padding: 30px; padding: 30px;
...@@ -70,19 +77,19 @@ ...@@ -70,19 +77,19 @@
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
} }
.lable-name-row{ .label-name-row{
margin-top: 10px; margin-top: 10px;
.right{ .right{
float: right; float: right;
.create-new-lable{ .create-new-label{
float: right; float: right;
} }
} }
} }
.total-lable{ .total-label{
font-size: 12px; padding: 30px 0 10px; font-size: 12px; padding: 30px 0 10px;
} }
.lable-list{ .label-list{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #fff; background: #fff;
......
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册