提交 24cacef7 编写于 作者: chengxiang.li's avatar chengxiang.li

update

上级 cbd17c5d
...@@ -39,17 +39,14 @@ export const getDiseasesList = (params) => { ...@@ -39,17 +39,14 @@ export const getDiseasesList = (params) => {
}; };
// 新增居民 // 新增居民
export const getUploadHistory = data => {
export const getUploadHistory = params => { // 获取上传历史记录
return fetch({ return fetch({
// url: getBaseUrl(`healths/labels/`), headers,
url: 'https://dev-kf.yunqueyi.com/api/ImpPatMapping/init', url: getBaseUrl(`/healths/docImpPat/import/records`),
headers: { method: 'get',
noSysCode: true, params: params,
"Content-Type": 'application/json' description: '获取上传历史记录',
},
method: 'post',
data: data,
description: '新增分组',
}) })
} }
......
<template> <template>
<div class="newly-increased-wrap"> <div class="newly-increased-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">
<p class="top-title">新增居民</p> <el-tabs v-model="activeName2" @tab-click="handleTabClick" class="tab-list">
<el-tabs v-model="activeName2" type="card" @tab-click="handleTabClick" class="tab-list"> <el-tab-pane label="单个录入" name="first" class="single-input">
<el-tab-pane label="单个录入" name="first">单个录入11</el-tab-pane> <el-row class="save-and-add">
<el-tab-pane label="二维码录入" name="second">二维码录入22</el-tab-pane> <el-button type="primary">保存并新增</el-button>
</el-row>
</el-tab-pane>
<el-tab-pane label="二维码录入" name="second">
<div class="qr-code-wrap">
<el-alert
class="top-tips"
title="提醒:选择分组后,会自动生成相应的分组二维码,居民扫码后直接进入该分组(若未选择分组,则自动生成未分组二维码,居民扫码后进入默认未分组)"
type="warning"
show-icon>
</el-alert>
<div class="qr-group">
<p class="label-name">二维码分组:</p>
<el-tag size="small">糖尿病高危分组</el-tag>
<el-tag size="small">高血压分组</el-tag>
<el-tag size="small" class="choose-group">+ 选择分组</el-tag>
</div>
<div class="qr-pic-wrap">
<div class="qr-box">
<div class="pic">
<div class="img" style="width: 200px; height: 200px;"></div>
<el-button icon="el-icon-download" class="qr-download-btn">下载二维码</el-button>
</div>
<p class="time-limit">有效期:2019.5.1-2019.5.30 </p>
<el-button icon="el-icon-refresh" class="refresh-btn" size="small">刷新有效期</el-button>
</div>
</div>
<div class="border-space"></div>
<div class="increased-steps-wrap">
<div class="label-title">居民添加流程</div>
<ul>
<li></li>
</ul>
</div>
</div>
</el-tab-pane>
<el-tab-pane label="批量导入" name="third"> <el-tab-pane label="批量导入" name="third">
<div class="step-guide"></div> <div class="step-guide">
<p class="upload-record">上传历史记录:120</p> <ul class="guide-list">
<el-table <li class="first">
:data="searchData.tableData" <div class="procedure">
class="upload-table" <i class="icon">1</i>
height="100" <p class="text">下载模板</p>
style="width: 100%"> <p class="border"></p>
<el-table-column </div>
header-align="center" <div class="under-info">
align="center" <p class="step-tips">点击下方“下载模板”</p>
prop="date" <el-button type="primary" size="small" @click="handleDownloadDemo">下载模板</el-button>
label="文件名" </div>
width="180"> </li>
</el-table-column> <li class="first second">
<el-table-column <div class="procedure">
header-align="center" <i class="icon">2</i>
align="center" <p class="text">填写居民信息</p>
prop="name" <p class="border"></p>
label="上传时间" </div>
width="180"> <div class="under-info">
</el-table-column> <p class="step-tips">按照模板编辑居民信息</p>
<el-table-column <ul class="fill-tips">
header-align="center" <li>
align="center" <i class="tips-title notice">填写要求:</i>
prop="address" </li>
label="新导入居民数"> <li>
</el-table-column> <i class="tips-title">居民姓名:</i>
<el-table-column <p>当前支持2~15个字符</p>
header-align="center" </li>
align="center" <li>
prop="address" <i class="tips-title">出生年月:</i>
label="更新居民资料数"> <p>"年-月-日",我们将优先识别身份证信息中的出生年月信息,若身份证未填,将识别此处信息。</p>
</el-table-column> </li>
<el-table-column <li>
header-align="center" <i class="tips-title">居住地址:</i>
align="center" <p>≤50字</p>
prop="address" </li>
label="处理状态"> <li>
</el-table-column> <i class="tips-title">电话:</i>
<el-table-column <p>请输入11为手机号码</p>
header-align="center" </li>
align="center" <li>
prop="address" <i class="tips-title">分组与诊断:</i>
label="关闭理由"> <p>多个分组之间,用中文逗号“,”分割</p>
</el-table-column> </li>
</el-table> </ul>
<el-pagination </div>
class="pagination-style" </li>
@size-change="handleSizeChange" <li class="first third">
@current-change="handleCurrentChange" <div class="procedure">
:total="searchData.totalRows" <i class="icon">3</i>
:current-page="1" <p class="text">上传文件</p>
:page-sizes="[10, 30, 50, 100]" </div>
:page-size="searchData.pageSize" <div class="under-info">
layout="total, sizes, prev, pager, next, jumper"> <p class="step-tips">将填写好的居民信息文件在下方进行上传</p>
</el-pagination> <el-upload
class="upload-file"
drag
:action="uploadUrl"
:headers="uploadHeaders"
:file-list="files"
:on-change="changeFile"
:on-error="uploadError"
:on-success="uploadSuccess"
:show-file-list="false"
:multiple="false">
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件,且不超过500kb</div> -->
</el-upload>
</div>
</li>
</ul>
</div>
<div class="component-content screenSet upload-history-wrap">
<p class="septal-line"></p>
<p class="upload-record">上传历史记录:120</p>
<el-table
:data="searchData.tableData"
class="upload-table"
style="width: 100%">
<el-table-column
header-align="center"
align="center"
prop="fileName"
label="文件名"
width="180">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="uploadTime"
label="上传时间"
width="180">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="insertCount"
label="新导入居民数">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="updateCount"
label="更新居民资料数">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="status"
label="处理状态">
</el-table-column>
<el-table-column
header-align="center"
align="center"
prop="address"
label="关闭理由">
</el-table-column>
</el-table>
<el-pagination
class="pagination-style"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:total="searchData.totalCount"
:current-page="1"
:page-sizes="[10, 30, 50, 100]"
:page-size="searchData.pageSize"
layout="total, sizes, prev, pager, next, jumper">
</el-pagination>
</div>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
</template> </template>
...@@ -75,67 +186,28 @@ ...@@ -75,67 +186,28 @@
import { import {
getUploadHistory getUploadHistory
} from "@/utils/patients/patientsapi"; } from "@/utils/patients/patientsapi";
import { getSaasDomain } from '@/utils/index';
export default { export default {
data() { data() {
return { return {
curmbFirst: "居民管理", curmbFirst: "居民管理",
curmbSecond: "新增居民", curmbSecond: "新增居民",
activeName2: 'third', activeName2: 'second',
searchData: { searchData: {
pageNo: 1, // 第几页 pageNo: 1, // 第几页
pageSize: 10, // 每页条数 pageSize: 10, // 每页条数
tableData: [{ tableData: [],
date: '2016-05-02', totalCount: 0,
name: '王小虎', },
address: '上海市普陀区金沙江路 1518 弄'
}, { uploadUrl: `${getSaasDomain('web/patientManages/import')}`,
date: '2016-05-04', uploadHeaders: {
name: '王小虎', token: localStorage.getItem('token')
address: '上海市普陀区金沙江路 1517 弄' },
}, { files: [],
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
},{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
totalRows: 0,
}
} }
}, },
components: { components: {
...@@ -147,30 +219,87 @@ ...@@ -147,30 +219,87 @@
}, },
// 挂载到Dom完成时 // 挂载到Dom完成时
mounted() { mounted() {
commonUtil.resizeHeight(); // commonUtil.resizeHeight();
}, },
methods: { methods: {
goToGetUploadHistory(){ goToGetUploadHistory(){
console.log('go get upload history>>>>>>') console.log('go get upload history>>>>>>')
// let params = { let params = {
// model: {"doctor_id":101281458}, pageNo: this.searchData.pageNo,
// pageNo: 1, pageSize: this.searchData.pageSize,
// pageSize: 15, };
// } getUploadHistory(params).then(res => {
let params = {"token":"8C036BF566E742059AC951DBDA8941CA","model":{"doctor_id":101281458},"pageSize":15,"pageNo":1}; console.log('获取上传历史记录:', res);
getUploadHistory(params).then(data => { if(res.code == "000000"){
console.log('go get upload record: ', data) if(res.data.importRecordsModelList.length > 0){
this.searchData.tableData = res.data.importRecordsModelList;
this.searchData.totalCount = res.data.count;
}
}else{
// 获取失败
this.$message({
message: '接口返回失败,请重新再试',
type: 'warning'
});
}
}) })
}, },
handleTabClick(tab, event) { handleTabClick(tab, event) {
console.log(tab, event); console.log(tab, event);
}, },
handleSizeChange(val){ handleCurrentChange(val) {
this.searchData.pageNo = val;
this.goToGetUploadHistory();
},
handleSizeChange(val) {
this.searchData.pageSize = val;
this.goToGetUploadHistory();
},
handleDownloadDemo(){
window.open('https://file.yunqueyi.com/File/template/居民导入模板.xlsx');
},
changeFile(file, fileList) {
const name = file.name;
const type = name.substring(name.lastIndexOf('.') + 1);
if (type !== 'xls' && type !== 'xlsx') {
this.$message({
message: '上传文件只能是 xls、xlsx格式!',
type: 'warning'
});
fileList.splice(0, 1);
return false;
}
if (fileList.length > 1) {
fileList.splice(0, 1);
}
this.files = [file];
}, },
handleCurrentChange(val){ uploadError(err, file, fileList){
console.log('%c upload Error >>>>>>>>', 'color: red;')
},
uploadSuccess(response, file, fileList) {
console.log('%c upload Success >>>>>>>>', 'color: red;')
// this.loading = false;
// this.visible = false;
// this.tipShow = true;
console.log('response: ', response);
console.log('file: ', file);
console.log('fileList: ', fileList)
// console.log(response, file, fileList);
const { code } = response;
this.code = response.code;
} const codes = ['000000', '400002', '400004'];
if (codes.indexOf(code) > -1) {
this.error = response.data;
} else {
this.error = response.message;
}
},
} }
} }
...@@ -183,12 +312,27 @@ ...@@ -183,12 +312,27 @@
padding: 30px; padding: 30px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
&.upload-history-wrap{
margin-top: 30px;
margin: 0;
padding: 0;
.septal-line{
width: 100%;
height: 1px;
background: #EBEEF5;
}
}
} }
.top-title{ .top-title{
font-size: 20px; font-size: 20px;
padding-bottom: 20px; padding-bottom: 20px;
border-bottom: 1px solid #efefef; border-bottom: 1px solid #efefef;
} }
.single-input{
.save-and-add{
text-align: right;
}
}
} }
</style> </style>
...@@ -197,31 +341,145 @@ ...@@ -197,31 +341,145 @@
.top-title{ .top-title{
border: 0 !important; border: 0 !important;
} }
.upload-record{
width: 100%;
font-size: 20px;
line-height: 28px;
color: #1E2F3D;
background: #fff;
margin: 30px 0 24px;
}
.pagination-style{
text-align: right;
margin-top: 20px;
}
.tab-list{ .tab-list{
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.el-tabs__item{
color: #303133;
font-weight: 600;
letter-spacing: 1px;
}
.el-tabs__active-bar{
background-color: #449284;
}
.el-tabs__content{ .el-tabs__content{
flex: 1; flex: 1;
overflow: hidden; overflow: hidden;
.el-tab-pane{ .el-tab-pane{
width: 100%; width: 100%;
height: 100%; height: 100%;
background: #F0F2F5;
overflow: hidden; overflow: hidden;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.step-guide{ .step-guide{
width: 100%; width: 100%;
height: 200px; background: #fff;
background: pink; .guide-list{
} width: 100%;
.upload-record{ height: 237px;
width: 100%; margin-top: 15px;
font-size: 12px; .first{
line-height: 30px; width: 308px;
// width: 30%;
height: 200px;
float: left;
.procedure{
width: 100%; height: 20px;
.icon{
width: 20px;
height: 20px;
display: inline-block;
background: #449284;
border-radius: 20px;
text-align: center; line-height: 20px;
font-size: 12px; color: #fff;
}
.text{
display: inline-block;
font-size: 14px;
color: #262626;
font-weight: 600;
}
.border{
display: inline-block;
width: 200px;
// width: 70%;
height: 0px;
border-bottom: 1px solid #449284;
vertical-align: middle;
}
&::after{
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
}
.under-info{
padding-left: 25px;
.step-tips{
width: 100%;
font-size: 12px;
color: #595959;
margin: 8px 0 20px;
}
}
}
.second{
width: 380px;
// width: 40%;
.procedure{
.border{
width: 250px;
// width: 70%;
}
}
.under-info{
.fill-tips{
li{
font-size: 12px;
width: 300px;
line-height: 18px;
.tips-title{
display: inline-block;
color: #262626;
font-weight: 600;
&.notice{
color: #449284;
}
}
p{
display: inline;
color: #595959;
}
}
}
}
}
.third{
width: 300px;
// width: 30%;
.el-upload{
width: 260px;
height: 150px;
}
.el-upload-dragger{
width: 260px;
// width: 100%;
height: 150px;
}
}
}
} }
.upload-table{ .upload-table{
flex: 1;
} }
.el-table__body-wrapper{ .el-table__body-wrapper{
&::-webkit-scrollbar &::-webkit-scrollbar
...@@ -238,15 +496,79 @@ ...@@ -238,15 +496,79 @@
} }
} }
} }
} }
.pagination-style{ .qr-code-wrap{
text-align: right; background: #fff;
margin-top: 20px; .qr-group{
width: 100%; height:auto;
overflow: hidden;
margin: 30px 0 40px;
.label-name{
display: inline-block;
font-size: 12px;
color: #8C8C8C;
}
.el-tag{
color: #449284;
background:rgba(236,244,242,1);
border:1px solid rgba(150,195,193,1);
margin-left: 10px;
&.choose-group{
color: #666666;
background:rgba(255,255,255,1);
border:1px dashed rgba(217,217,217,1);
cursor: pointer;
}
}
}
.qr-pic-wrap{
width: 100%; height: auto;
.qr-box{
width: 200px;
margin: 0 auto;
text-align: center;
.pic{
background:rgba(240,242,245,1);
width: 200px; height: auto;
border: 0;
.qr-download-btn{
color: #fff;
background: #449284;
width: 200px;
border: 0;
}
}
.time-limit{
width: 100%;
text-align: center;
color: #8C8C8C;
font-size: 12px;
line-height: 41px;
}
.refresh-btn{
color: #449284;
background:rgba(236,244,242,1);
border:1px solid rgba(150,195,193,1);
}
}
}
.border-space{
width: 100%;
height: 1px;
background: #EBEEF5;
margin-top: 30px;
}
.increased-steps-wrap{
.label-title{
font-size: 20px;
color: #1E2F3D;
line-height: 28px;
margin: 30px 0 24px;
}
}
} }
} }
} }
</style> </style>
Markdown 格式
0% or
您添加了 0 到此讨论。请谨慎行事。
先完成此消息的编辑!
想要评论请 注册