You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
467 lines
13 KiB
467 lines
13 KiB
<template> |
|
<basic-container> |
|
<avue-crud :option="option" :table-loading="loading" :data="data" :page.sync="page" ref="crud" v-model="form" |
|
:permission="permissionList" :before-open="beforeOpen" :before-close="beforeClose" @row-del="rowDel" |
|
@row-update="rowUpdate" @row-save="rowSave" @search-change="searchChange" @search-reset="searchReset" |
|
@selection-change="selectionChange" @current-change="currentChange" @size-change="sizeChange" |
|
@refresh-change="refreshChange" @on-load="onLoad" @tree-load="treeLoad"> |
|
<template slot-scope="{row}" slot="status"> |
|
<el-tag :type="row.status == 1 ? 'success' : row.status == 2 ? 'warning' : row.status == 3 ? 'danger' : 'info'">{{ row.status == 1 ? '已报道' : row.status == 2 ? '未报道' : row.status == 3 ? '已拉黑' : '已取消' }}</el-tag> |
|
</template> |
|
<template slot-scope="{row}" slot="menu"> |
|
<el-button @click="handleRegister" :disabled="row.status == 1 ? true : row.status == 4 ? true : false">{{row.status == 3 ? '取消拉黑' : '预约报道'}}</el-button> |
|
</template> |
|
</avue-crud> |
|
<el-drawer |
|
:visible.sync="isRegister" |
|
:append-to-body="true" |
|
:direction="direction" |
|
:with-header="false" |
|
class="my-info-dialog" |
|
custom-class="register_box"> |
|
<div class="title_box"> |
|
<div class="title_txt"> |
|
<div class="txt">预约人报道信息</div> |
|
<div class="img_box" @click="closeDraw"> |
|
<img src="~@/assets/image/close.png" alt=""> |
|
</div> |
|
</div> |
|
<div class="sub_txt">通过身份证、医保卡刷卡识别报道</div> |
|
</div> |
|
<div class="tip_box"> |
|
<img v-show="regData.status == 1" src="~@/assets/image/succ.png" alt=""> |
|
<img v-show="regData.status == 2" src="~@/assets/image/fail.png" alt=""> |
|
<img v-show="regData.status == 3" src="~@/assets/image/warn.png" alt=""> |
|
<div class="tip_txt" :class="regData.status == 2 ? 'fail_txt' : regData.status == 3 ? 'warn_txt' : ''">{{regData.status == 1 ? '报道成功' : '报道失败'}}</div> |
|
</div> |
|
<div class="tips_txt" v-show="regData.status == 2">无此人员预约检测项目，请预约后按时间报道</div> |
|
<div class="tips_txt tips_warn" v-show="regData.status == 3">报到时间与预约时间不符，请按预约时间报道</div> |
|
<div class="account_mess"> |
|
<div class="mess_tit">账号信息</div> |
|
<div class="mess_box"> |
|
<div class="left_box" :class="regData.status == 2 ? 'fail_box' : regData.status == 3 ? 'warn_box' : ''"> |
|
<div class="acc_text">姓名</div> |
|
<div class="acc_txt">{{regData.name}}</div> |
|
</div> |
|
<div class="right_box" :class="regData.status == 2 ? 'fail_right' : regData.status == 3 ? 'warn_right' : ''"> |
|
<div class="acc_box"> |
|
<div class="acc_text">身份证号</div> |
|
<div class="acc_txt">{{regData.cardId}}</div> |
|
</div> |
|
<div class="acc_box"> |
|
<div class="acc_text">联系方式</div> |
|
<div class="acc_txt">{{regData.phone}}</div> |
|
</div> |
|
<div class="img_box"> |
|
<img v-show="regData.status == 1" src="~@/assets/image/succ_img.png" alt=""> |
|
<img v-show="regData.status == 2" src="~@/assets/image/fail_img.png" alt=""> |
|
<img v-show="regData.status == 3" src="~@/assets/image/warn_img.png" alt=""> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="account_mess"> |
|
<div class="mess_tit">体检信息</div> |
|
<div class="mess_box reg_box"> |
|
<div class="left_box"> |
|
<div class="acc_text">体检项目</div> |
|
<div class="acc_txt">{{regData.project}}</div> |
|
</div> |
|
<div class="right_box"> |
|
<div class="acc_box"> |
|
<div class="acc_text">预约时间</div> |
|
<div class="acc_txt" :class="regData.status == 3 ? 'acc_warn' : ''">{{regData.time}}</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="btn"> |
|
签到并打印 |
|
</div> |
|
</el-drawer> |
|
</basic-container> |
|
</template> |
|
|
|
<script> |
|
import { |
|
getLazyList, |
|
remove, |
|
update, |
|
add, |
|
getDept, |
|
getDeptTree |
|
} from "@/api/system/dept"; |
|
import { mapGetters } from "vuex"; |
|
import website from '@/config/website'; |
|
|
|
export default { |
|
data() { |
|
return { |
|
form: {}, |
|
selectionList: [], |
|
query: {}, |
|
loading: true, |
|
parentId: 0, |
|
direction:'rtl', |
|
page: { |
|
pageSize: 10, |
|
currentPage: 1, |
|
total: 0, |
|
}, |
|
isRegister:false, |
|
option: { |
|
height: 'auto', |
|
calcHeight: 30, |
|
tip: false, |
|
searchShow: true, |
|
searchMenuSpan: 6, |
|
border: true, |
|
index: true, |
|
viewBtn: false, |
|
viewBtnIcon:'none', |
|
editBtn:false, |
|
delBtn:false, |
|
addBtn:false, |
|
selection: true, |
|
saveBtn:false, |
|
updateBtn:false, |
|
cancelBtn:false, |
|
dialogType: 'drawer', |
|
border:false,stripe:true, |
|
dialogClickModal: false, |
|
column: [ |
|
{ |
|
label: "体检人姓名", |
|
prop: "name", |
|
}, |
|
{ |
|
label: "身份证号码", |
|
prop: "releaseCard", |
|
searchLabelWidth:100, |
|
search:true |
|
}, |
|
{ |
|
label: "联系方式", |
|
prop: "phone", |
|
}, |
|
{ |
|
label: "预约时间", |
|
prop: "releaseTime", |
|
type: "date", |
|
format: "yyyy-MM-dd", |
|
valueFormat: "yyyy-MM-dd", |
|
search: true, |
|
searchValue:'2022-02-09', |
|
searchClearable:false |
|
}, |
|
{ |
|
label: "预约项目", |
|
prop: "releaseProject", |
|
type: "select", |
|
hide: true, |
|
dicData:[ |
|
{ |
|
label:'全部', |
|
value:0 |
|
}, |
|
{ |
|
label:'视力', |
|
value:1 |
|
}, |
|
{ |
|
label:'听力', |
|
value:2 |
|
}, |
|
{ |
|
label:'四肢', |
|
value:3 |
|
} |
|
], |
|
search: true, |
|
viewDisplay:false, |
|
searchValue:0 |
|
}, |
|
{ |
|
label:'预约项目', |
|
prop:"releasePro", |
|
|
|
}, |
|
{ |
|
label: "状态", |
|
prop: "status", |
|
slot: true, |
|
viewDisplay:false, |
|
}, |
|
] |
|
}, |
|
data: [], |
|
regData:{ |
|
status:3, |
|
name:'/', |
|
cardId:'/', |
|
phone:'/', |
|
project:'/', |
|
time:'/' |
|
} |
|
}; |
|
}, |
|
computed: { |
|
|
|
}, |
|
created() { |
|
}, |
|
methods: { |
|
handleRegister(){ |
|
this.isRegister = true |
|
}, |
|
beforeOpen(done, type) { |
|
// if (["add", "edit"].includes(type)) { |
|
// this.initData(); |
|
// } |
|
// if (["edit", "view"].includes(type)) { |
|
// getDept(this.form.id).then(res => { |
|
// this.form = res.data.data; |
|
// }); |
|
// } |
|
done(); |
|
}, |
|
beforeClose(done) { |
|
// this.parentId = ""; |
|
// const column = this.findObject(this.option.column, "parentId"); |
|
// // column.value = ""; |
|
// column.addDisabled = false; |
|
done(); |
|
}, |
|
closeDraw(){ |
|
this.isRegister = false |
|
}, |
|
currentChange(currentPage) { |
|
this.page.currentPage = currentPage; |
|
}, |
|
sizeChange(pageSize) { |
|
this.page.pageSize = pageSize; |
|
}, |
|
refreshChange() { |
|
this.onLoad(this.page, this.query); |
|
}, |
|
onLoad(page, params = {}) { |
|
this.loading = true; |
|
// getLazyList(this.parentId, Object.assign(params, this.query)).then(res => { |
|
// this.data = res.data.data; |
|
// |
|
// this.selectionClear(); |
|
// }); |
|
this.data = [ |
|
{name:'张三',releaseCard:321236195812020314,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:1}, |
|
{name:'李四',releaseCard:321236195812020313,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:2}, |
|
{name:'王五',releaseCard:321236195812012314,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:3}, |
|
{name:'刘敏',releaseCard:321236195812012314,phone:13254651235,releaseTime:'2023-02-07',releasePro:'视力 听力',status:4}, |
|
] |
|
this.loading = false; |
|
this.page.total = 4; |
|
}, |
|
} |
|
}; |
|
</script> |
|
|
|
<style lang="scss" scoped> |
|
</style> |
|
<style lang="scss"> |
|
.el-drawer__wrapper{ |
|
.register_box{ |
|
width: 45% !important; |
|
padding: 0 40px; |
|
|
|
.title_box{ |
|
// padding: 0 40px; |
|
margin-top: 40px; |
|
.title_txt{ |
|
display: flex; |
|
height: 30px; |
|
align-items: center; |
|
justify-content: space-between; |
|
|
|
.txt{ |
|
font-weight: bold; |
|
color: #333333; |
|
line-height: 16px; |
|
font-size: 20px; |
|
|
|
} |
|
.img_box{ |
|
img{ |
|
width: 30px; |
|
height: 30px; |
|
} |
|
} |
|
} |
|
.sub_txt{ |
|
font-size: 14px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #999999; |
|
line-height: 16px; |
|
} |
|
} |
|
.tip_box{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
margin:60px 0 20px 0; |
|
|
|
.img{ |
|
width: 30px; |
|
height: 30px; |
|
} |
|
.tip_txt{ |
|
font-size: 24px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #00B578; |
|
margin-left: 10px; |
|
} |
|
|
|
.fail_txt{ |
|
color: #F93A4A; |
|
} |
|
.warn_txt{ |
|
color: #FF6010; |
|
} |
|
} |
|
.tips_txt{ |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 14px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #F93A4A; |
|
} |
|
.tips_warn{ |
|
color: #FF6010; |
|
} |
|
.fail_tip{ |
|
color: #FF6010; |
|
} |
|
|
|
.account_mess{ |
|
.mess_tit{ |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #333333; |
|
margin:40px 0 20px 0; |
|
} |
|
.mess_box{ |
|
width: 100%; |
|
height: 123px; |
|
background: #F5F6FA; |
|
border-radius: 8px; |
|
display: flex; |
|
justify-content: space-between; |
|
align-items: center; |
|
|
|
.left_box{ |
|
width: 25%; |
|
margin-left: 30px; |
|
.acc_text{ |
|
font-size: 14px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #999999; |
|
margin-bottom:14px; |
|
} |
|
|
|
.acc_txt{ |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #00B578; |
|
} |
|
} |
|
.fail_box{ |
|
.acc_txt{ |
|
color: #333333; |
|
} |
|
} |
|
.warn_box{ |
|
.acc_txt{ |
|
color: #333333; |
|
} |
|
} |
|
.right_box{ |
|
display: flex; |
|
width: 75%; |
|
align-items: center; |
|
justify-content: space-between; |
|
.acc_box{ |
|
.acc_text{ |
|
font-size: 14px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #999999; |
|
margin-bottom:14px; |
|
} |
|
|
|
.acc_txt{ |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Bold, Microsoft YaHei; |
|
font-weight: bold; |
|
color: #00B578; |
|
} |
|
} |
|
} |
|
.fail_right{ |
|
.acc_box{ |
|
.acc_txt{ |
|
color: #333333; |
|
} |
|
} |
|
} |
|
.warn_right{ |
|
.acc_box{ |
|
.acc_txt{ |
|
color: #333333; |
|
} |
|
} |
|
} |
|
} |
|
.reg_box{ |
|
justify-content: start; |
|
.left_box{ |
|
.acc_txt{ |
|
color: #333333; |
|
} |
|
} |
|
.right_box{ |
|
.acc_box{ |
|
.acc_txt{ |
|
color: #333333; |
|
} |
|
.acc_warn{ |
|
color: #FF6010; |
|
} |
|
} |
|
} |
|
|
|
} |
|
} |
|
|
|
.btn{ |
|
width: 151px; |
|
height: 50px; |
|
background: #1677FF; |
|
border-radius: 2px 2px 2px 2px; |
|
margin: 0 auto; |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
font-size: 16px; |
|
font-family: Microsoft YaHei-Regular, Microsoft YaHei; |
|
font-weight: 400; |
|
color: #FFFFFF; |
|
margin-top: 50px; |
|
} |
|
} |
|
} |
|
</style>
|
|
|