jiangyy
3 years ago
20 changed files with 3406 additions and 158 deletions
@ -0,0 +1,742 @@ |
|||
<template> |
|||
<div class="epidemic-form"> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-tabs v-model="activeName" |
|||
type="card" |
|||
class="main_tab" |
|||
@tab-click="handleClick"> |
|||
<el-tab-pane label="逐个添加" |
|||
name="first"> |
|||
<el-form ref="ref_form1" |
|||
:inline="true" |
|||
:model="formData1" |
|||
:rules="dataRule1" |
|||
class="form"> |
|||
|
|||
<el-form-item label="姓名" |
|||
prop="name" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
placeholder="请输入姓名" |
|||
clearable |
|||
v-model="formData1.name"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号" |
|||
prop="mobile" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
placeholder="请输入手机号" |
|||
clearable |
|||
v-model="formData1.mobile"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="身份证号" |
|||
prop="idCard" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
placeholder="请输入身份证号" |
|||
clearable |
|||
v-model="formData1.idCard"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:autosize="{ minRows: 2, maxRows: 5 }" |
|||
clearable |
|||
placeholder="请输入通知备注" |
|||
v-model="formData1.remark"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知渠道" |
|||
prop="channel" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-checkbox v-model="formData1.isSelChannel" |
|||
key="0" |
|||
label="0">小程序通知</el-checkbox> |
|||
<!-- <el-checkbox-group v-model="formData1.channel"> |
|||
<el-checkbox key="1" |
|||
label="1">小程序通知</el-checkbox> |
|||
<el-checkbox key="2" |
|||
label="2">短信通知</el-checkbox> |
|||
|
|||
</el-checkbox-group> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知内容" |
|||
prop="content" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:autosize="{ minRows: 4, maxRows: 10 }" |
|||
clearable |
|||
placeholder="请输入通知内容" |
|||
v-model="formData1.content"></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
</el-tab-pane> |
|||
<el-tab-pane label="批量添加" |
|||
name="second"> |
|||
|
|||
<div class="div-mult-table"> |
|||
<el-form :inline="true" |
|||
:model="formDataSearch" |
|||
ref="ref_formSearch" |
|||
:label-width="'90px'"> |
|||
<el-form-item label="所属网格" |
|||
label-width="80px"> |
|||
<el-select class="item_width_3" |
|||
v-model.trim="formDataSearch.gridId" |
|||
placeholder="请选择" |
|||
size="mini" |
|||
clearable> |
|||
<el-option v-for="item in gridList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="疫苗接种次数小于" |
|||
label-width="150px"> |
|||
<el-input-number class="item_width_3" |
|||
v-model="formDataSearch.vaccineCount" |
|||
size="mini" |
|||
:min="0" |
|||
:max="20" |
|||
label="疫苗接种次数小于"></el-input-number> |
|||
</el-form-item> |
|||
<el-button style="margin-left:30px" |
|||
size="mini" |
|||
class="diy-button--search" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
size="mini" |
|||
class="diy-button--reset" |
|||
@click="resetSearch">重置</el-button> |
|||
</el-form> |
|||
<el-table ref="ref_table" |
|||
class="table" |
|||
size="mini" |
|||
:data="tableData" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
:reserve-selection="true" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
@select="handleSelectTable" |
|||
@select-all="handleSelAll" |
|||
style="width: 100%"> |
|||
<el-table-column type="selection" |
|||
width="55"></el-table-column> |
|||
<el-table-column label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="50"></el-table-column> |
|||
|
|||
<el-table-column prop="name" |
|||
header-align="center" |
|||
align="center" |
|||
label="姓名" |
|||
width="90"> |
|||
</el-table-column> |
|||
<el-table-column prop="mobile" |
|||
header-align="center" |
|||
align="center" |
|||
label="手机号" |
|||
width="110"> |
|||
</el-table-column> |
|||
<el-table-column prop="idCard" |
|||
header-align="center" |
|||
align="center" |
|||
label="身份证" |
|||
min-width="170"> |
|||
</el-table-column> |
|||
<el-table-column prop="vaccineCount" |
|||
header-align="center" |
|||
align="center" |
|||
label="疫苗接种次数" |
|||
min-width="100"> |
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
<div class="div-mult-form"> |
|||
|
|||
<!-- <div class="div_person"> |
|||
<div class="person_title">已选居民</div> |
|||
<div v-if="selectionAll.length>0"> |
|||
<el-tag class="tag_item" |
|||
v-for="(tag,index) in selectionAll" |
|||
:key="index" |
|||
:disable-transitions="false" |
|||
@close="handleCloseTag(tag,index)" |
|||
closable> |
|||
{{tag.name}} |
|||
</el-tag> |
|||
</div> |
|||
<div v-else |
|||
class="tag_tip">请从列表中选择居民</div> |
|||
</div> --> |
|||
<el-form :inline="true" |
|||
:model="formData2" |
|||
ref="ref_form2" |
|||
:label-width="'90px'"> |
|||
<el-form-item label="已选择人数" |
|||
label-width="100px" |
|||
style="display: block"> |
|||
<span> {{selectionAll.length}}</span> |
|||
</el-form-item> |
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="100px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:autosize="{ minRows: 2, maxRows: 5 }" |
|||
clearable |
|||
placeholder="请输入通知备注" |
|||
v-model="formData2.remark"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知渠道" |
|||
prop="channel" |
|||
label-width="100px" |
|||
style="display: block"> |
|||
<el-checkbox v-model="formData2.isSelChannel" |
|||
key="0" |
|||
label="0">小程序通知</el-checkbox> |
|||
<!-- <el-checkbox-group v-model="formData2.channel"> |
|||
<el-checkbox key="0" |
|||
label="0">小程序通知</el-checkbox> |
|||
<el-checkbox key="1" |
|||
label="1">短信通知</el-checkbox> |
|||
|
|||
</el-checkbox-group> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知内容" |
|||
prop="content" |
|||
label-width="100px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:autosize="{ minRows: 4, maxRows: 10 }" |
|||
clearable |
|||
placeholder="请输入通知内容" |
|||
v-model="formData2.content"></el-input> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
</el-tab-pane> |
|||
</el-tabs> |
|||
|
|||
</div> |
|||
|
|||
<div class="form_div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
|
|||
activeName: "first", |
|||
|
|||
gridList: [], |
|||
|
|||
btnDisable: false, |
|||
|
|||
formDataSearch: { |
|||
gridId: '', |
|||
vaccineCount: undefined, |
|||
}, |
|||
|
|||
formData1: { |
|||
attentionType: 1, |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
remark: '', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
|
|||
}, |
|||
|
|||
formData2: { |
|||
attentionType: 1, |
|||
remark: '', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
}, |
|||
tableData: [], |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 1, |
|||
tableLoading: false, |
|||
|
|||
selectionAll: [],//选中的人员 |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
async mounted () { |
|||
const { user } = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
//获取网格下拉框数据 |
|||
await this.loadGrid() |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initForm () { |
|||
|
|||
this.$refs['ref_form1'].resetFields(); |
|||
this.$refs['ref_form2'].resetFields(); |
|||
|
|||
await this.loadTable() |
|||
|
|||
}, |
|||
|
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
|
|||
async loadTable () { |
|||
this.tableLoading = true |
|||
|
|||
const url = "/epmetuser/epidemicPrevention/page" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/epidemicPrevention/page" |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
...this.formDataSearch |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total |
|||
data.list.forEach(element => { |
|||
element.isSel = false |
|||
}); |
|||
this.tableData = data.list |
|||
|
|||
this.analysisTableSelection() |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
this.tableLoading = false |
|||
}, |
|||
|
|||
handleSelectTable (selection, row) { |
|||
|
|||
row.isSel = !row.isSel |
|||
|
|||
if (row.isSel) { |
|||
this.selectionAll.push(row) |
|||
} else { |
|||
for (let i = 0; i < this.selectionAll.length; i++) { |
|||
let item = this.selectionAll[i] |
|||
if (item.idCard === row.idCard) { |
|||
this.selectionAll.splice(i, 1) |
|||
break |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleSelAll (selection) { |
|||
let selFlag = selection.length > 0//全选选中 还是 全选不选中 |
|||
for (let i = 0; i < this.tableData.length; i++) { |
|||
let tableItem = this.tableData[i] |
|||
tableItem.isSel = selFlag |
|||
let isHasItem = false |
|||
for (let j = 0; j < this.selectionAll.length; j++) { |
|||
let selectionItem = this.selectionAll[j] |
|||
if (selectionItem.idCard === tableItem.idCard) { |
|||
isHasItem = true |
|||
if (!selFlag) { |
|||
this.selectionAll.splice(j, 1) |
|||
break |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
if (!isHasItem && selFlag) { |
|||
this.selectionAll.push(tableItem) |
|||
} |
|||
|
|||
} |
|||
|
|||
}, |
|||
|
|||
//删除标签 |
|||
handleCloseTag (tag, index) { |
|||
for (let i = 0; i < this.tableData.length; i++) { |
|||
|
|||
let tableItem = this.tableData[i] |
|||
if (tag.idCard === tableItem.idCard) {//如果表中存在这个数据 |
|||
tableItem.isSel = false |
|||
this.$refs.ref_table.toggleRowSelection(tableItem); |
|||
break |
|||
} |
|||
|
|||
} |
|||
|
|||
for (let i = 0; i < this.selectionAll.length; i++) { |
|||
let item = this.selectionAll[i] |
|||
if (item.idCard === tag.idCard) { |
|||
this.selectionAll.splice(i, 1) |
|||
break |
|||
} |
|||
|
|||
} |
|||
}, |
|||
|
|||
//回显列表选中的行 |
|||
analysisTableSelection () { |
|||
this.$nextTick(() => { |
|||
this.tableData.forEach(tableItem => { |
|||
|
|||
|
|||
for (let j = 0; j < this.selectionAll.length; j++) { |
|||
let selectionItem = this.selectionAll[j] |
|||
|
|||
if (selectionItem.idCard === tableItem.idCard) { |
|||
tableItem.isSel = true |
|||
break |
|||
|
|||
} |
|||
} |
|||
if (tableItem.isSel) { |
|||
this.$refs.ref_table.toggleRowSelection(tableItem); |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
handleClick () { |
|||
|
|||
}, |
|||
|
|||
async loadGrid () { |
|||
const url = "/gov/org/customergrid/gridoption" |
|||
|
|||
let params = { |
|||
agencyId: this.agencyId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.gridList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
handleComfirm () { |
|||
|
|||
if (this.activeName === 'first') { |
|||
this.$refs['ref_form1'].validate((valid, messageObj) => { |
|||
if (!valid) { |
|||
app.util.validateRule(messageObj) |
|||
|
|||
} else { |
|||
this.handleVero() |
|||
} |
|||
|
|||
}) |
|||
|
|||
} else { |
|||
this.handleVero() |
|||
} |
|||
|
|||
}, |
|||
|
|||
async handleVero () { |
|||
let list = [] |
|||
if (this.activeName === 'first') { |
|||
list.push(this.formData1) |
|||
|
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码 |
|||
if (regPhone.test(this.formData1.mobile) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的手机号码' |
|||
}) |
|||
return false; |
|||
} |
|||
const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X |
|||
if (regCard.test(this.formData1.idCard) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的身份证号码' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
if (this.formData1.isSelChannel) { |
|||
if (!this.formData1.content) { |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请填写通知内容' |
|||
}) |
|||
return false; |
|||
} else { |
|||
this.formData1.channel = ['0'] |
|||
} |
|||
|
|||
} else { |
|||
this.formData1.channel = [] |
|||
} |
|||
|
|||
} else { |
|||
|
|||
if (this.selectionAll.length === 0) { |
|||
this.$message.info('请选择批量添加的人员') |
|||
return false |
|||
} |
|||
|
|||
if (this.formData2.isSelChannel) { |
|||
if (!this.formData2.content) { |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请填写通知内容' |
|||
}) |
|||
return false; |
|||
} else { |
|||
this.formData2.channel = ['0'] |
|||
} |
|||
|
|||
} else { |
|||
this.formData2.channel = [] |
|||
} |
|||
|
|||
this.selectionAll.forEach(element => { |
|||
let obj = { |
|||
name: element.name, |
|||
idCard: element.idCard, |
|||
mobile: element.mobile, |
|||
|
|||
...this.formData2 |
|||
} |
|||
|
|||
list.push(obj) |
|||
}); |
|||
|
|||
} |
|||
console.log(list) |
|||
|
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 5000) |
|||
let url = '/epmetuser/icEpidemicSpecialAttention/vaccination-add' |
|||
// url = "http://yapi.elinkservice.cn/mock/245/gov/project/memoConcern/save" |
|||
|
|||
let params = { |
|||
list: list |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
this.btnDisable = false |
|||
|
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
|
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
resetSearch () { |
|||
this.formDataSearch = { |
|||
gridId: '', |
|||
vaccineCount: undefined, |
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
destroyed () { |
|||
console.log(11111111) |
|||
}, |
|||
|
|||
resetData () { |
|||
|
|||
this.formData1 = { |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
remark: '', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
attentionType: 1, |
|||
} |
|||
|
|||
this.formData2 = { |
|||
attentionType: 1, |
|||
remark: '', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
} |
|||
this.formDataSearch = { |
|||
gridId: '', |
|||
vaccineCount: undefined, |
|||
} |
|||
|
|||
this.selectionAll = []//选中的人员 |
|||
|
|||
|
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return 300 |
|||
|
|||
}, |
|||
...mapGetters(['clientHeight', 'iframeHeight']), |
|||
|
|||
dataRule1 () { |
|||
|
|||
return { |
|||
name: [ |
|||
{ required: true, message: '姓名不能为空', trigger: 'blur' } |
|||
], |
|||
idCard: [ |
|||
{ required: true, message: '身份证号不能为空', trigger: 'blur' } |
|||
], |
|||
mobile: [ |
|||
{ required: true, message: '手机号不能为空', trigger: 'blur' }, |
|||
], |
|||
|
|||
|
|||
|
|||
|
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
|
|||
|
|||
// serviceList: { |
|||
// type: Array, |
|||
// default: [] |
|||
// }, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,300 @@ |
|||
<template> |
|||
<div class="epidemic-form"> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form ref="ref_form1" |
|||
:inline="true" |
|||
:model="formData" |
|||
:disabled="formType==='detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item label="姓名" |
|||
prop="name" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.name}}</span> |
|||
<!-- <el-input class="item_width_2" |
|||
placeholder="请输入姓名" |
|||
clearable |
|||
|
|||
v-model="formData.name"> |
|||
</el-input> --> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号" |
|||
prop="mobile" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.mobile}}</span> |
|||
<!-- <el-input class="item_width_2" |
|||
placeholder="请输入手机号" |
|||
clearable |
|||
v-model="formData.mobile"> |
|||
</el-input> --> |
|||
</el-form-item> |
|||
<el-form-item label="身份证号" |
|||
prop="idCard" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<span>{{formData.idCard}}</span> |
|||
<!-- <el-input class="item_width_2" |
|||
placeholder="请输入身份证号" |
|||
clearable |
|||
v-model="formData.idCard"> |
|||
</el-input> --> |
|||
</el-form-item> |
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
:disabled="formType==='detail'" |
|||
maxlength="500" |
|||
show-word-limit |
|||
:autosize="{ minRows: 2, maxRows: 5 }" |
|||
clearable |
|||
placeholder="请输入通知备注" |
|||
v-model="formData.remark"></el-input> |
|||
</el-form-item> |
|||
<div v-if=" formType!=='detail'"> |
|||
<el-form-item label="通知渠道" |
|||
prop="channel" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-checkbox v-model="formData.isSelChannel" |
|||
key="0" |
|||
label="0">小程序通知</el-checkbox> |
|||
<!-- <el-checkbox-group v-model="formData.channel"> |
|||
<el-checkbox key="0" |
|||
label="0">小程序通知</el-checkbox> |
|||
<el-checkbox key="1" |
|||
label="1">短信通知</el-checkbox> |
|||
|
|||
</el-checkbox-group> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知内容" |
|||
prop="content" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:autosize="{ minRows: 4, maxRows: 10 }" |
|||
clearable |
|||
placeholder="请输入通知内容" |
|||
v-model="formData.content"></el-input> |
|||
</el-form-item> |
|||
</div> |
|||
</el-form> |
|||
|
|||
</div> |
|||
|
|||
<div class="form_div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button v-if="formType!=='detail'" |
|||
size="small" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
|
|||
formType: "edit", |
|||
|
|||
gridList: [], |
|||
|
|||
btnDisable: false, |
|||
|
|||
formData: { |
|||
attentionType: 1, |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
remark: '', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
}, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
async mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initForm (formType, row) { |
|||
this.formType = formType |
|||
this.$refs['ref_form1'].resetFields(); |
|||
row.channel = [] |
|||
row.content = '' |
|||
row.isSelChannel = false |
|||
this.formData = JSON.parse(JSON.stringify(row)) |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleComfirm () { |
|||
if (this.formData.isSelChannel) { |
|||
if (!this.formData.content) { |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请填写通知内容' |
|||
}) |
|||
return false; |
|||
} else { |
|||
this.formData.channel = ['0'] |
|||
} |
|||
|
|||
} else { |
|||
this.formData.channel = [] |
|||
} |
|||
|
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 5000) |
|||
let url = '/epmetuser/icEpidemicSpecialAttention/vaccination-update' |
|||
|
|||
// url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icEpidemicSpecialAttention/vaccination-update" |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
this.btnDisable = false |
|||
|
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
|
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
resetData () { |
|||
this.veroId = '' |
|||
|
|||
this.formData = { |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
remark: '', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
|
|||
} |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return 200 |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']), |
|||
dataRule () { |
|||
return { |
|||
name: [ |
|||
{ required: true, message: '姓名不能为空', trigger: 'blur' } |
|||
], |
|||
idCard: [ |
|||
{ required: true, message: '身份证号不能为空', trigger: 'blur' } |
|||
], |
|||
mobile: [ |
|||
{ required: true, message: '手机号不能为空', trigger: 'blur' }, |
|||
], |
|||
|
|||
|
|||
|
|||
channel: [ |
|||
{ required: false }, |
|||
], |
|||
content: [ |
|||
{ required: false }, |
|||
], |
|||
|
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
|
|||
|
|||
// serviceList: { |
|||
// type: Array, |
|||
// default: [] |
|||
// }, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,775 @@ |
|||
<template> |
|||
<div class="div_main"> |
|||
<div class="div_search"> |
|||
<el-form :inline="true" |
|||
:model="formData" |
|||
ref="ref_searchform" |
|||
:label-width="'90px'"> |
|||
<div> |
|||
|
|||
<el-form-item label="姓名" |
|||
prop="name"> |
|||
<el-input v-model="formData.name" |
|||
size="small" |
|||
class="list_item_width_1" |
|||
clearable |
|||
placeholder="请输入姓名"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
<el-form-item label="手机号" |
|||
prop="mobile"> |
|||
<el-input v-model="formData.mobile" |
|||
size="small" |
|||
class="list_item_width_1" |
|||
clearable |
|||
placeholder="请输入手机号"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="身份证" |
|||
prop="mobile"> |
|||
<el-input v-model="formData.idCard" |
|||
size="small" |
|||
class="list_item_width_1" |
|||
clearable |
|||
placeholder="请输入身份证"> |
|||
</el-input> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item label="接种针次" |
|||
prop="vaccinationCount"> |
|||
<el-select class="list_item_width_1" |
|||
v-model.trim="formData.vaccinationCount" |
|||
placeholder="请选择" |
|||
clearable> |
|||
<el-option v-for="item in natNumList" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-button style="margin-left:30px" |
|||
size="small" |
|||
class="diy-button--search" |
|||
@click="handleSearch">查询</el-button> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--reset" |
|||
@click="resetSearch">重置</el-button> |
|||
</div> |
|||
</el-form> |
|||
</div> |
|||
<div class="div_table"> |
|||
<div class="div_btn"> |
|||
<el-button class="diy-button--add" |
|||
size="small" |
|||
@click="handleAdd">新增</el-button> |
|||
|
|||
<el-button style="float:left" |
|||
class="diy-button--export" |
|||
size="small" |
|||
@click="handleExportModule">下载模板</el-button> |
|||
<el-upload ref="upload" |
|||
:multiple='false' |
|||
:show-file-list='false' |
|||
:before-upload="beforeUpload" |
|||
action="" |
|||
accept=".xlsx" |
|||
:limit="1" |
|||
:on-exceed="handleExceed" |
|||
:http-request="uploadFile"> |
|||
<el-button style="margin-left:10px" |
|||
size="small" |
|||
class="diy-button--delete">导入</el-button> |
|||
</el-upload> |
|||
|
|||
<el-button style="float:left;margin-left:10px" |
|||
class="diy-button--reset" |
|||
size="small" |
|||
@click="handleExport">导出</el-button> |
|||
|
|||
<el-button style="margin-left:15px" |
|||
class="diy-button--more" |
|||
size="small" |
|||
@click="handleSendNotice">发送通知</el-button> |
|||
<el-button style="margin-left:15px" |
|||
class="diy-button--more" |
|||
size="small" |
|||
@click="handleDelete">取消关注</el-button> |
|||
</div> |
|||
|
|||
<el-table ref="ref_table" |
|||
class="table" |
|||
:data="tableData" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
@select="handleSelectTable" |
|||
@select-all="handleSelAll" |
|||
style="width: 100%"> |
|||
<el-table-column type="selection" |
|||
width="55"></el-table-column> |
|||
<el-table-column label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="50"></el-table-column> |
|||
|
|||
<el-table-column prop="name" |
|||
header-align="center" |
|||
align="center" |
|||
label="姓名" |
|||
width="90"> |
|||
</el-table-column> |
|||
<el-table-column prop="mobile" |
|||
header-align="center" |
|||
align="center" |
|||
label="手机号" |
|||
width="110"> |
|||
</el-table-column> |
|||
<el-table-column prop="idCard" |
|||
header-align="center" |
|||
align="center" |
|||
label="身份证" |
|||
min-width="170"> |
|||
</el-table-column> |
|||
<el-table-column prop="vaccinationCount" |
|||
header-align="center" |
|||
align="center" |
|||
label="接种针次" |
|||
width="100"> |
|||
</el-table-column> |
|||
<el-table-column prop="remark" |
|||
header-align="center" |
|||
align="center" |
|||
show-overflow-tooltip |
|||
label="备注" |
|||
min-width="230"> |
|||
</el-table-column> |
|||
<el-table-column prop="lastInformTime" |
|||
header-align="center" |
|||
align="center" |
|||
show-overflow-tooltip |
|||
label="最后一次通知时间" |
|||
min-width="120"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column label="操作" |
|||
fixed="right" |
|||
width="140" |
|||
header-align="center" |
|||
align="center" |
|||
class="operate"> |
|||
<template slot-scope="scope"> |
|||
|
|||
<el-button type="text" |
|||
class="div-table-button--detail" |
|||
size="small" |
|||
@click="handleDetail(scope.row)">查看</el-button> |
|||
<el-button type="text" |
|||
class="div-table-button--edit" |
|||
size="small" |
|||
@click="handleEdit(scope.row)">修改</el-button> |
|||
|
|||
<el-popover popper-class="btn-popper" |
|||
placement="bottom" |
|||
style="margin-left:10px" |
|||
width="20" |
|||
trigger="click"> |
|||
<div class="more-btn"> |
|||
<el-button type="text" |
|||
class="div-table-button--detail--noline" |
|||
size="small" |
|||
@click="handleNoticeList(scope.row)">通知记录</el-button> |
|||
</div> |
|||
|
|||
<div class="more-btn"> |
|||
<el-button type="text" |
|||
class="div-table-button--detail--noline" |
|||
size="small" |
|||
@click="handleVisiteList(scope.row) ">随访记录</el-button> |
|||
</div> |
|||
|
|||
<el-button type="text" |
|||
size="small" |
|||
class="div-table-button--more" |
|||
slot="reference">更多<i class="el-icon-caret-bottom"></i></el-button> |
|||
</el-popover> |
|||
|
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
|
|||
</div> |
|||
|
|||
<!-- 新增弹出框 --> |
|||
<el-dialog :visible.sync="addFormShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
title="新增" |
|||
width="1050px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<nat-focus-add ref="ref_form_add" |
|||
@dialogCancle="diaClose" |
|||
@dialogOk="addFormOk"></nat-focus-add> |
|||
</el-dialog> |
|||
<!-- 修改弹出框 --> |
|||
<el-dialog :visible.sync="editFormShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
title="修改" |
|||
width="1050px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<nat-focus-edit ref="ref_form_edit" |
|||
@dialogCancle="diaClose" |
|||
@dialogOk="addFormOk"></nat-focus-edit> |
|||
</el-dialog> |
|||
<!-- 发送通知弹出框 --> |
|||
<el-dialog :visible.sync="sendNoticeFormShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
title="发送通知" |
|||
width="1050px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<nf-send-notice ref="ref_sendnotice" |
|||
@dialogCancle="diaClose"></nf-send-notice> |
|||
</el-dialog> |
|||
<!-- 通知记录弹出框 --> |
|||
<el-dialog :visible.sync="noticeListFormShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
title="通知记录" |
|||
width="1050px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<nf-notice-list ref="ref_noticelist" |
|||
@dialogCancle="diaClose"></nf-notice-list> |
|||
</el-dialog> |
|||
<!-- 随访记录弹出框 --> |
|||
<el-dialog :visible.sync="visiteListFormShow" |
|||
:close-on-click-modal="false" |
|||
:close-on-press-escape="false" |
|||
title="随访记录" |
|||
width="1050px" |
|||
top="5vh" |
|||
class="dialog-h" |
|||
@closed="diaClose"> |
|||
<nf-visite-list ref="ref_visitelist" |
|||
@dialogCancle="diaClose"></nf-visite-list> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import natFocusAdd from './natFocusAdd' |
|||
import natFocusEdit from './natFocusEdit' |
|||
import nfNoticeList from './nfNoticeList' |
|||
import nfSendNotice from './nfSendNotice' |
|||
import nfVisiteList from './nfVisiteList' |
|||
|
|||
import { requestPost } from "@/js/dai/request"; |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
loading: false, |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 1, |
|||
tableLoading: false, |
|||
|
|||
selection: [], |
|||
|
|||
agencyId: '', |
|||
|
|||
formData: { |
|||
attentionType: 1,//关注类型，核酸检测：2，疫苗接种：1 |
|||
name: '', |
|||
mobile: '', |
|||
idCard: '', |
|||
vaccinationCount: '', |
|||
}, |
|||
natNumList: [], |
|||
|
|||
tableData: [], |
|||
selectionAll: [], |
|||
|
|||
//form相关 |
|||
addFormShow: false, |
|||
editFormShow: false, |
|||
sendNoticeFormShow: false, |
|||
noticeListFormShow: false, |
|||
visiteListFormShow: false, |
|||
|
|||
|
|||
} |
|||
}, |
|||
components: { |
|||
natFocusAdd, natFocusEdit, nfNoticeList, nfSendNotice, nfVisiteList |
|||
}, |
|||
async created () { |
|||
|
|||
}, |
|||
activated () { |
|||
this.$refs['ref_table'].doLayout() |
|||
}, |
|||
async mounted () { |
|||
for (let i = 0; i < 11; i++) { |
|||
let obj = { |
|||
value: i + '', |
|||
label: i + '次' |
|||
} |
|||
this.natNumList.push(obj) |
|||
} |
|||
|
|||
await this.loadTable() |
|||
}, |
|||
|
|||
methods: { |
|||
handleSearch () { |
|||
this.loadTable() |
|||
}, |
|||
|
|||
async loadTable () { |
|||
this.tableLoading = true |
|||
|
|||
const url = "/epmetuser/icEpidemicSpecialAttention/list" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icEpidemicSpecialAttention/list" |
|||
let params = { |
|||
pageSize: this.pageSize, |
|||
pageNo: this.pageNo, |
|||
...this.formData |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.tableData = data.list |
|||
|
|||
this.analysisTableSelection() |
|||
|
|||
// this.tableData.forEach(item => { |
|||
// if (item.time) { |
|||
// let timeArray = item.time.split(' ') |
|||
// item.time = timeArray[0] |
|||
// } |
|||
|
|||
// }); |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
this.tableLoading = false |
|||
}, |
|||
|
|||
handleSelectTable (selection, row) { |
|||
|
|||
row.isSel = !row.isSel |
|||
|
|||
if (row.isSel) { |
|||
this.selectionAll.push(row) |
|||
} else { |
|||
for (let i = 0; i < this.selectionAll.length; i++) { |
|||
let item = this.selectionAll[i] |
|||
if (item.idCard === row.idCard) { |
|||
this.selectionAll.splice(i, 1) |
|||
break |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleSelAll (selection) { |
|||
let selFlag = selection.length > 0//全选选中 还是 全选不选中 |
|||
for (let i = 0; i < this.tableData.length; i++) { |
|||
let tableItem = this.tableData[i] |
|||
tableItem.isSel = selFlag |
|||
let isHasItem = false |
|||
for (let j = 0; j < this.selectionAll.length; j++) { |
|||
let selectionItem = this.selectionAll[j] |
|||
if (selectionItem.idCard === tableItem.idCard) { |
|||
isHasItem = true |
|||
if (!selFlag) { |
|||
this.selectionAll.splice(j, 1) |
|||
break |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
if (!isHasItem && selFlag) { |
|||
this.selectionAll.push(tableItem) |
|||
} |
|||
} |
|||
|
|||
}, |
|||
|
|||
|
|||
//回显列表选中的行 |
|||
analysisTableSelection () { |
|||
this.$nextTick(() => { |
|||
this.tableData.forEach(tableItem => { |
|||
|
|||
|
|||
for (let j = 0; j < this.selectionAll.length; j++) { |
|||
let selectionItem = this.selectionAll[j] |
|||
|
|||
if (selectionItem.idCard === tableItem.idCard) { |
|||
tableItem.isSel = true |
|||
break |
|||
|
|||
} |
|||
} |
|||
if (tableItem.isSel) { |
|||
this.$refs.ref_table.toggleRowSelection(tableItem); |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
|
|||
}, |
|||
|
|||
diaClose () { |
|||
this.addFormShow = false |
|||
this.editFormShow = false |
|||
this.sendNoticeFormShow = false |
|||
this.noticeListFormShow = false |
|||
this.visiteListFormShow = false |
|||
|
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.addFormShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form_add.initForm(null, this.agencyId) |
|||
}) |
|||
}, |
|||
|
|||
handleEdit (row) { |
|||
this.editFormShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form_edit.initForm('edit', row) |
|||
}) |
|||
}, |
|||
|
|||
handleDetail (row) { |
|||
this.editFormShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_form_edit.initForm('detail', row) |
|||
}) |
|||
}, |
|||
|
|||
handleSendNotice () { |
|||
if (this.selectionAll.length === 0) { |
|||
this.$message.info('请选择要通知的人员') |
|||
return false |
|||
} |
|||
this.sendNoticeFormShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_sendnotice.initForm(this.selectionAll) |
|||
}) |
|||
|
|||
}, |
|||
|
|||
handleNoticeList (row) { |
|||
this.noticeListFormShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_noticelist.initTable(row.idCard) |
|||
}) |
|||
|
|||
}, |
|||
handleVisiteList (row) { |
|||
|
|||
this.visiteListFormShow = true |
|||
this.$nextTick(() => { |
|||
this.$refs.ref_visitelist.initTable(row) |
|||
|
|||
}) |
|||
|
|||
}, |
|||
|
|||
|
|||
addFormOk () { |
|||
this.addFormShow = false |
|||
this.editFormShow = false |
|||
this.loadTable() |
|||
|
|||
}, |
|||
|
|||
async handleDelete (row) { |
|||
if (this.selectionAll.length === 0) { |
|||
this.$message.info('请选择要取消关注的名单') |
|||
return false |
|||
} |
|||
this.$confirm("确认取消关注选择的名单?", "提示", { |
|||
confirmButtonText: "确定", |
|||
cancelButtonText: "取消", |
|||
type: "warning" |
|||
}) |
|||
.then(() => { |
|||
this.deleteFocus(row) |
|||
}) |
|||
.catch(err => { |
|||
if (err == "cancel") { |
|||
|
|||
} |
|||
|
|||
}); |
|||
}, |
|||
|
|||
async deleteFocus (row) { |
|||
const url = "/epmetuser/icEpidemicSpecialAttention/cancel-attention" |
|||
// const url = "http://yapi.elinkservice.cn/mock/245/gov/org/placepatrolteam/del" |
|||
let idCards = [] |
|||
|
|||
this.selectionAll.forEach(element => { |
|||
idCards.push(element.idCard) |
|||
}); |
|||
let params = { |
|||
attentionType: 1, |
|||
idCards: idCards |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: "success", |
|||
message: "操作成功" |
|||
}); |
|||
|
|||
this.loadTable() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
//重置搜索条件 |
|||
resetSearch () { |
|||
this.formData = { |
|||
attentionType: 1,//关注类型，核酸检测：2，疫苗接种：1 |
|||
name: '', |
|||
mobile: '', |
|||
idCard: '', |
|||
vaccinationCount: '', |
|||
} |
|||
|
|||
this.pageNo = 1 |
|||
// this.loadTable() |
|||
}, |
|||
|
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let title = '疫苗接种关注名单' |
|||
|
|||
const url = "/epmetuser/icEpidemicSpecialAttention/vaccination-export" |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
this.formData, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xlsx') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleExportModule () { |
|||
let title = '疫苗接种关注名单模板' |
|||
|
|||
const url = "/gov/org/house/exporttemplate" |
|||
let params = {} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xlsx') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
}, |
|||
|
|||
|
|||
// 上传文件之前的钩子 |
|||
beforeUpload (file) { |
|||
|
|||
const array = file.name.split('.') |
|||
const extension = array[array.length - 1] |
|||
// const isLt1M = (file.size / 1024 / 1024) < 5 |
|||
if (extension !== 'xlsx') { |
|||
this.$message.error('只能上传xlsx文件！') |
|||
return false |
|||
} else { |
|||
this.files = file; |
|||
this.fileName = file.name; |
|||
return true |
|||
} |
|||
|
|||
}, |
|||
// 上传文件个数超过定义的数量 |
|||
handleExceed (files, fileList) { |
|||
this.$message.warning(`当前限制选择 1 个文件，请删除后继续上传`) |
|||
}, |
|||
|
|||
async uploadFile () { |
|||
if (this.fileName == "") { |
|||
this.$message.warning('请选择要上传的文件！') |
|||
return false |
|||
} |
|||
|
|||
this.$message({ |
|||
showClose: true, |
|||
message: '导入中，请到系统管理-导入记录中查看进度', |
|||
duration: 0 |
|||
}) |
|||
|
|||
//清空上传列表 |
|||
this.$refs['upload'].clearFiles() |
|||
|
|||
var url = '/epmetuser/icEpidemicSpecialAttention/vaccination-import' |
|||
|
|||
let fileFormData = new FormData(); |
|||
fileFormData.append('file', this.files);//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
fileFormData.append('attentionType', '1');//filename是键，file是值，就是要传的文件，test.zip是要传的文件名 |
|||
|
|||
window.app.ajax.post2(url, fileFormData, |
|||
(data, rspMsg) => { |
|||
|
|||
if (data.code === 0 && data.msg == 'success') { |
|||
// this.$message.success('导入成功') |
|||
} else { |
|||
// this.$message({ |
|||
// showClose: true, |
|||
// message: rspMsg, |
|||
// duration: 0, |
|||
// type: "error" |
|||
// }) |
|||
// this.$message.error(rspMsg) |
|||
} |
|||
|
|||
// this.loadTable() |
|||
|
|||
}, |
|||
(rspMsg, data) => { |
|||
|
|||
}, { headers: { 'Content-Type': 'multipart/form-data' } }) |
|||
|
|||
|
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return this.$store.state.inIframe ? this.clientHeight - 360 + this.iframeHeight : this.clientHeight - 360 |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']) |
|||
}, |
|||
watch: { |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
</style> |
|||
|
|||
|
|||
|
|||
@ -0,0 +1,171 @@ |
|||
<template> |
|||
<div class="dialog-h-content scroll-h "> |
|||
<div class="div_dialog_table"> |
|||
|
|||
<el-table class="table" |
|||
:data="tableData" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
style="width: 100%"> |
|||
<el-table-column label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="50"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="createdTime" |
|||
header-align="center" |
|||
align="center" |
|||
label="通知时间" |
|||
width="150"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="channel" |
|||
header-align="center" |
|||
align="center" |
|||
label="渠道" |
|||
width="180"> |
|||
|
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="content" |
|||
header-align="center" |
|||
align="center" |
|||
label="内容" |
|||
min-width="380"> |
|||
|
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
tableLoading: false, |
|||
total: 0, |
|||
idCard: '', |
|||
tableData: [], |
|||
pageSize: 20, |
|||
pageNo: 1, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initTable (idCard) { |
|||
this.idCard = idCard |
|||
await this.loadTable() |
|||
|
|||
}, |
|||
|
|||
//加载form |
|||
async loadTable () { |
|||
this.tableLoading = true |
|||
// const url = "/epmetuser/icNotice/page" |
|||
const url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNotice/page" |
|||
let params = { |
|||
idCard: this.idCard, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
origin: '1' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
this.tableLoading = false |
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.tableData = data.list |
|||
|
|||
// data.list.forEach(item => { |
|||
// item.isEdit = false |
|||
// item.isNew = false |
|||
// let arrayInspectors = item.inspectors.split(',') |
|||
// item.inspectorArray = [...arrayInspectors] |
|||
|
|||
// let arrayReviewTime = item.reviewTime.split(' ') |
|||
// item.reviewTime = arrayReviewTime[0] |
|||
// }); |
|||
|
|||
// this.tableData = [...data.list] |
|||
|
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
|
|||
return (this.clientHeight - 460) |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight']) |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
</style> |
|||
@ -0,0 +1,240 @@ |
|||
<template> |
|||
<div class="epidemic-form"> |
|||
<div class="dialog-h-content scroll-h"> |
|||
|
|||
<el-form ref="ref_form1" |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="dataRule" |
|||
class="form"> |
|||
|
|||
<el-form-item label="通知渠道" |
|||
prop="channel" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-checkbox v-model="formData.isSelChannel" |
|||
key="0" |
|||
label="0">小程序通知</el-checkbox> |
|||
<!-- <el-checkbox-group v-model="formData.channel"> |
|||
<el-checkbox key="1" |
|||
label="1">小程序通知</el-checkbox> |
|||
<el-checkbox key="2" |
|||
label="2">短信通知</el-checkbox> |
|||
|
|||
</el-checkbox-group> --> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知内容" |
|||
prop="content" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:autosize="{ minRows: 10, maxRows: 15 }" |
|||
clearable |
|||
placeholder="请输入通知内容" |
|||
v-model="formData.content"></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
</div> |
|||
|
|||
<div class="form_div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
|
|||
activeName: "second", |
|||
|
|||
gridList: [], |
|||
|
|||
btnDisable: false, |
|||
|
|||
formData: { |
|||
origin: '1', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
userList: [], |
|||
|
|||
|
|||
}, |
|||
selectionAll: [] |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
async mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initForm (selectionAll) { |
|||
|
|||
this.$refs['ref_form1'].resetFields(); |
|||
this.formData.userList = selectionAll |
|||
|
|||
}, |
|||
|
|||
|
|||
async handleComfirm () { |
|||
|
|||
|
|||
if (this.formData.isSelChannel) { |
|||
if (!this.formData.content) { |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请填写通知内容' |
|||
}) |
|||
return false; |
|||
} else { |
|||
this.formData.channel = ['0'] |
|||
} |
|||
|
|||
} else { |
|||
this.formData.channel = [] |
|||
} |
|||
|
|||
console.log(this.formData) |
|||
return false |
|||
|
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 5000) |
|||
|
|||
let url = '' |
|||
|
|||
url = '/epmetuser/icNotice/batchnotice' |
|||
// url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNotice/batchnotice" |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
this.btnDisable = false |
|||
|
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
|
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
|
|||
|
|||
resetData () { |
|||
|
|||
|
|||
this.formData = { |
|||
name: '', |
|||
idCard: '', |
|||
phone: '', |
|||
remark: '', |
|||
isSelChannel: false, |
|||
channel: [], |
|||
content: '', |
|||
|
|||
} |
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return 200 |
|||
|
|||
}, |
|||
|
|||
...mapGetters(['clientHeight', 'iframeHeight']), |
|||
dataRule () { |
|||
return { |
|||
channel: [ |
|||
{ required: true, message: '通知渠道不能为空', trigger: 'blur' } |
|||
], |
|||
content: [ |
|||
{ required: true, message: '通知内容不能为空', trigger: 'blur' } |
|||
] |
|||
} |
|||
}, |
|||
|
|||
}, |
|||
props: { |
|||
|
|||
|
|||
|
|||
// serviceList: { |
|||
// type: Array, |
|||
// default: [] |
|||
// }, |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
</style> |
|||
|
|||
|
|||
@ -0,0 +1,324 @@ |
|||
<template> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<div class="div_dialog_table"> |
|||
<el-button size="small" |
|||
class="diy-button--add" |
|||
@click="handleAdd">新增</el-button> |
|||
<el-button size="small" |
|||
class="diy-button--reset" |
|||
@click="handleExport">导出</el-button> |
|||
|
|||
<el-table class="table" |
|||
:data="tableData" |
|||
border |
|||
:height="tableHeight" |
|||
v-loading="tableLoading" |
|||
:header-cell-style="{background:'#2195FE',color:'#FFFFFF'}" |
|||
style="width: 100%"> |
|||
<el-table-column label="序号" |
|||
header-align="center" |
|||
align="center" |
|||
type="index" |
|||
width="50"> |
|||
</el-table-column> |
|||
|
|||
<el-table-column prop="visitTime" |
|||
header-align="center" |
|||
align="center" |
|||
label="随访时间" |
|||
width="150"> |
|||
|
|||
</el-table-column> |
|||
<el-table-column prop="content" |
|||
header-align="center" |
|||
align="center" |
|||
label="随访内容" |
|||
min-width="280"> |
|||
|
|||
</el-table-column> |
|||
|
|||
</el-table> |
|||
<div> |
|||
<el-pagination @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" |
|||
:current-page.sync="pageNo" |
|||
:page-sizes="[20, 50, 100, 200]" |
|||
:page-size="pageSize" |
|||
layout="sizes, prev, pager, next, total" |
|||
:total="total"> |
|||
</el-pagination> |
|||
</div> |
|||
</div> |
|||
<el-dialog :visible.sync="dialogVisible" |
|||
width="850px" |
|||
top="5vh" |
|||
title="新增" |
|||
append-to-body |
|||
@closed="handleCancle"> |
|||
<div class="epidemic-form"> |
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="dataRule" |
|||
class="form"> |
|||
|
|||
<el-form-item label="随访时间" |
|||
style="display: block" |
|||
prop="visitTime" |
|||
label-width="150px"> |
|||
<el-date-picker class="item_width_2" |
|||
v-model="formData.visitTime" |
|||
format="yyyy-MM-dd HH:mm" |
|||
value-format="yyyy-MM-dd HH:mm" |
|||
type="datetime" |
|||
:picker-options="pickerOptions" |
|||
clearable |
|||
placeholder="选择时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="随访内容" |
|||
prop="content" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:autosize="{ minRows: 4, maxRows: 10 }" |
|||
clearable |
|||
placeholder="请输入随访内容" |
|||
v-model="formData.content"></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
|
|||
<div class="form_div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button size="small" |
|||
type="primary" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
</div> |
|||
</el-dialog> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { mapGetters } from 'vuex' |
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
tableLoading: false, |
|||
|
|||
tableData: [], |
|||
total: 0, |
|||
pageSize: 20, |
|||
pageNo: 1, |
|||
|
|||
pickerOptions: { //控制时间范围 |
|||
disabledDate (time) { |
|||
return time.getTime() > (Date.now()) |
|||
} |
|||
}, |
|||
|
|||
formData: { |
|||
visitTime: '',//随访时间 |
|||
content: '',//内容 |
|||
idCard: '', |
|||
name: '', |
|||
mobile: '', |
|||
origin: '1' |
|||
}, |
|||
|
|||
dialogVisible: false, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
mounted () { |
|||
|
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initTable (row) { |
|||
|
|||
this.formData.idCard = row.idCard |
|||
this.formData.name = row.name |
|||
this.formData.mobile = row.mobile |
|||
|
|||
await this.loadTable() |
|||
|
|||
}, |
|||
|
|||
//加载form |
|||
async loadTable () { |
|||
|
|||
this.tableLoading = true |
|||
const url = '/epmetuser/followup/page' |
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/followup/page' |
|||
let params = { |
|||
name: this.formData.name, |
|||
idCard: this.formData.idCard, |
|||
pageNo: this.pageNo, |
|||
pageSize: this.pageSize, |
|||
origin: '1' |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
this.tableLoading = false |
|||
if (code === 0) { |
|||
this.total = data.total |
|||
this.tableData = data.list |
|||
this.tableData.forEach(element => { |
|||
element.visitTime = element.visitTime.slice(0, element.visitTime.length - 3) |
|||
}); |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
handleAdd () { |
|||
this.dialogVisible = true |
|||
}, |
|||
|
|||
|
|||
async handleComfirm () { |
|||
this.formData.visitTime = this.formData.visitTime + ':00' |
|||
let url = "/epmetuser/followup/save" |
|||
// let url = "http://yapi.elinkservice.cn/mock/245/epmetuser/followup/save" |
|||
|
|||
const { data, code, msg } = await requestPost(url, this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.loadTable() |
|||
this.handleCancle() |
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.dialogVisible = false |
|||
|
|||
}, |
|||
|
|||
//导出表格 |
|||
async handleExport () { |
|||
let today = new Date() |
|||
|
|||
|
|||
console.log(today.getMonth() + 1, today.getDate()) |
|||
let title = this.formData.name + (today.getMonth() + 1) + '月' + today.getDate() + '日' + '随访记录' |
|||
|
|||
const url = "/epmetuser/followup/export" |
|||
let params = { |
|||
idCard: this.formData.idCard, |
|||
name: this.formData.name, |
|||
|
|||
} |
|||
|
|||
app.ajax.exportFilePost( |
|||
url, |
|||
params, |
|||
(data, rspMsg) => { |
|||
|
|||
this.download(data, title + '.xlsx') |
|||
}, |
|||
(rspMsg, data) => { |
|||
this.$message.error(rspMsg); |
|||
} |
|||
); |
|||
|
|||
}, |
|||
|
|||
// 下载文件 |
|||
download (data, fileName) { |
|||
if (!data) { |
|||
return |
|||
} |
|||
|
|||
var csvData = new Blob([data]) |
|||
|
|||
if (window.navigator && window.navigator.msSaveOrOpenBlob) { |
|||
window.navigator.msSaveOrOpenBlob(csvData, fileName); |
|||
} |
|||
// for Non-IE (chrome, firefox etc.) |
|||
else { |
|||
var a = document.createElement('a'); |
|||
document.body.appendChild(a); |
|||
a.style = 'display: none'; |
|||
var url = window.URL.createObjectURL(csvData); |
|||
a.href = url; |
|||
a.download = fileName; |
|||
a.click(); |
|||
a.remove(); |
|||
window.URL.revokeObjectURL(url); |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleSizeChange (val) { |
|||
this.pageSize = val |
|||
this.pageNo = 1 |
|||
this.loadTable() |
|||
}, |
|||
handleCurrentChange (val) { |
|||
this.pageNo = val |
|||
this.loadTable() |
|||
}, |
|||
|
|||
|
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
}, |
|||
computed: { |
|||
tableHeight () { |
|||
return (this.clientHeight - 360) |
|||
}, |
|||
|
|||
...mapGetters(['clientHeight']), |
|||
dataRule () { |
|||
return { |
|||
visitTime: [ |
|||
{ required: true, message: '随访时间不能为空', trigger: 'blur' } |
|||
], |
|||
content: [ |
|||
{ required: true, message: '随访内容不能为空', trigger: 'blur' } |
|||
], |
|||
} |
|||
} |
|||
|
|||
|
|||
}, |
|||
props: { |
|||
|
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
</style> |
|||
@ -0,0 +1,618 @@ |
|||
<template> |
|||
<div class="epidemic-form"> |
|||
<div class="dialog-h-content scroll-h"> |
|||
<el-form ref="ref_form" |
|||
:inline="true" |
|||
:model="formData" |
|||
:rules="dataRule" |
|||
:disabled="formType==='detail'" |
|||
class="form"> |
|||
|
|||
<el-form-item v-if="formType==='add'" |
|||
label="录入方式" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-radio-group v-model="enterType" |
|||
@change="handleChangeEnterType"> |
|||
|
|||
<el-radio :label="'1'">手动输入</el-radio> |
|||
<el-radio :label="'2'">选择居民</el-radio> |
|||
|
|||
</el-radio-group> |
|||
|
|||
</el-form-item> |
|||
|
|||
<el-form-item v-if="formType==='add'" |
|||
label="所属网格" |
|||
style="display: block" |
|||
label-width="150px"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="formData.gridId" |
|||
placeholder="请选择" |
|||
:disabled="!isFromResi" |
|||
clearable> |
|||
<el-option v-for="item in gridList" |
|||
@click.native="handleSelGrid(item.value)" |
|||
:key="item.value" |
|||
:label="item.label" |
|||
:value="item.value"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item v-if="formType==='add'" |
|||
label="居民" |
|||
prop="userId" |
|||
style="display: block" |
|||
label-width="150px"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="formData.userId" |
|||
placeholder="请选择" |
|||
filterable |
|||
:disabled="!isFromResi" |
|||
clearable> |
|||
<el-option v-for="item in personList" |
|||
@click.native="handleSelPerson(item)" |
|||
:key="item.demandUserId" |
|||
:label="item.demandUserName" |
|||
:value="item.demandUserId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="姓名" |
|||
prop="name" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
placeholder="请输入姓名" |
|||
clearable |
|||
:disabled="isFromResi" |
|||
v-model="formData.name" style="margin-right:10px;"> |
|||
</el-input> |
|||
<el-checkbox v-model="heSuanCheck">添加到核酸检测关注名单</el-checkbox> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="手机号" |
|||
prop="mobile" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
placeholder="请输入手机号" |
|||
clearable |
|||
:disabled="isFromResi" |
|||
v-model="formData.mobile"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item label="身份证号" |
|||
prop="idCard" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
placeholder="请输入身份证号" |
|||
clearable |
|||
:disabled="isFromResi" |
|||
v-model="formData.idCard"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="现居地" |
|||
prop="presentAddress" |
|||
style="display: block" |
|||
label-width="150px"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="formData.presentAddress" |
|||
placeholder="请选择" |
|||
:disabled="isFromResi" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="item in personList" |
|||
@click.native="handleSelPerson(item)" |
|||
:key="item.demandUserId" |
|||
:label="item.demandUserName" |
|||
:value="item.demandUserId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
<el-form-item label="详细地址" |
|||
prop="detailAddress" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_2" |
|||
placeholder="请输入详细地址" |
|||
clearable |
|||
:disabled="isFromResi" |
|||
v-model="formData.detailAddress"> |
|||
</el-input> |
|||
</el-form-item> |
|||
<el-form-item |
|||
label="来自地区" |
|||
prop="sourceAddress" |
|||
style="display: block" |
|||
label-width="150px"> |
|||
<el-select class="item_width_2" |
|||
v-model.trim="formData.sourceAddress" |
|||
placeholder="请选择" |
|||
filterable |
|||
clearable> |
|||
<el-option v-for="item in personList" |
|||
@click.native="handleSelPerson(item)" |
|||
:key="item.demandUserId" |
|||
:label="item.demandUserName" |
|||
:value="item.demandUserId"> |
|||
</el-option> |
|||
</el-select> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="来到本地时间" |
|||
style="display: block" |
|||
prop="arriveDate" |
|||
label-width="150px"> |
|||
<el-date-picker class="item_width_2" |
|||
v-model="formData.arriveDate" |
|||
format="yyyy-MM-dd HH:mm" |
|||
value-format="yyyy-MM-dd HH:mm" |
|||
type="datetime" |
|||
clearable |
|||
placeholder="选择时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="离开本地时间" |
|||
style="display: block" |
|||
prop="leaveDate" |
|||
label-width="150px"> |
|||
<el-date-picker class="item_width_2" |
|||
v-model="formData.leaveDate" |
|||
format="yyyy-MM-dd HH:mm" |
|||
value-format="yyyy-MM-dd HH:mm" |
|||
type="datetime" |
|||
clearable |
|||
placeholder="选择时间"> |
|||
</el-date-picker> |
|||
</el-form-item> |
|||
<el-form-item label="备注" |
|||
prop="remark" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:autosize="{ minRows: 4, maxRows: 10 }" |
|||
clearable |
|||
placeholder="请输入内容" |
|||
v-model="formData.remark"></el-input> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知渠道" |
|||
prop="channel" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-checkbox-group v-model="formData.channel"> |
|||
<el-checkbox key="0" |
|||
label="0">小程序通知</el-checkbox> |
|||
<!-- <el-checkbox key="1" |
|||
label="1">短信通知</el-checkbox> --> |
|||
|
|||
</el-checkbox-group> |
|||
</el-form-item> |
|||
|
|||
<el-form-item label="通知内容" |
|||
prop="content" |
|||
label-width="150px" |
|||
style="display: block"> |
|||
<el-input class="item_width_1" |
|||
type="textarea" |
|||
maxlength="1000" |
|||
show-word-limit |
|||
:autosize="{ minRows: 4, maxRows: 10 }" |
|||
clearable |
|||
placeholder="请输入通知内容" |
|||
v-model="formData.content"></el-input> |
|||
</el-form-item> |
|||
|
|||
</el-form> |
|||
</div> |
|||
|
|||
<div class="form_div_btn"> |
|||
<el-button size="small" |
|||
@click="handleCancle">取 消</el-button> |
|||
<el-button v-if="formType != 'detail'" |
|||
size="small" |
|||
type="primary" |
|||
:disabled="btnDisable" |
|||
@click="handleComfirm">确 定</el-button> |
|||
</div> |
|||
|
|||
<el-dialog :visible.sync="dialogVisible" |
|||
width="550px" |
|||
top="5vh" |
|||
append-to-body> |
|||
<img width="100%" |
|||
:src="dialogImageUrl" |
|||
alt=""> |
|||
</el-dialog> |
|||
|
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
import { Loading } from 'element-ui' // 引入Loading服务 |
|||
import { requestPost } from '@/js/dai/request' |
|||
import { dateFormats } from '@/utils/index' |
|||
|
|||
|
|||
let loading // 加载动画 |
|||
export default { |
|||
data () { |
|||
return { |
|||
formType: 'add', //表单操作类型 add新增，edit编辑，detail详情 |
|||
hideUploadEdit: false, // 隐藏'上传按钮' |
|||
limitNum: 1, |
|||
enterType: '1',//录入方式1 手动输入 2 选择居民 |
|||
isFromResi: false,//是否从已有居民信息中选择 |
|||
|
|||
gridList: [], |
|||
personList: [], |
|||
|
|||
btnDisable: false, |
|||
|
|||
icNatId: '', |
|||
formData: { |
|||
gridId: '', |
|||
agencyId: '',//当前网格所属组织Id |
|||
userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值 |
|||
userType: 'icresi',//居民端小程序的人：resi;数字社区的居民：icresi;导入的：import;同步的：synchro |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
heSuanCheck: false, |
|||
presentAddress: '', |
|||
presentAddressCode: '', |
|||
detailAddress: '', |
|||
sourceAddressCode: '', |
|||
sourceAddress: '', |
|||
arriveDate: '', |
|||
remark: '', |
|||
leaveDate: '', |
|||
userType: '', |
|||
content: '', |
|||
channel: [] |
|||
|
|||
}, |
|||
dataRule: { |
|||
name: [ |
|||
{ required: true, message: '姓名不能为空', trigger: 'blur' } |
|||
], |
|||
idCard: [ |
|||
{ required: true, message: '身份证号不能为空', trigger: 'blur' } |
|||
], |
|||
mobile: [ |
|||
{ required: true, message: '手机号不能为空', trigger: 'blur' }, |
|||
], |
|||
presentAddress: [ |
|||
{ required: true, message: '现居地不能为空', trigger: 'blur' }, |
|||
], |
|||
detailAddress: [ |
|||
{ required: true, message: '详细地址不能为空', trigger: 'blur' }, |
|||
], |
|||
sourceAddress: [ |
|||
{ required: true, message: '来自地区不能为空', trigger: 'blur' }, |
|||
], |
|||
arriveDate: [ |
|||
{ required: true, message: '来到本地时间不能为空', trigger: 'blur' }, |
|||
] |
|||
}, |
|||
|
|||
fileList: [], |
|||
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile', |
|||
dialogImageUrl: '', |
|||
dialogVisible: false, |
|||
|
|||
} |
|||
}, |
|||
components: {}, |
|||
async mounted () { |
|||
const { user } = this.$store.state |
|||
this.agencyId = user.agencyId |
|||
//获取网格下拉框数据 |
|||
await this.loadGrid() |
|||
}, |
|||
|
|||
methods: { |
|||
|
|||
async initForm (type, icNatId) { |
|||
|
|||
this.formData.agencyId = this.agencyId |
|||
|
|||
this.$refs['ref_form'].resetFields(); |
|||
|
|||
this.formType = type |
|||
|
|||
if (icNatId) { |
|||
this.icNatId = icNatId |
|||
this.formData.icNatId = icNatId |
|||
this.isFromResi = false |
|||
await this.loadFormData() |
|||
} |
|||
|
|||
|
|||
}, |
|||
|
|||
handleChangeEnterType (value) { |
|||
this.formData.name = '' |
|||
this.formData.mobile = '' |
|||
this.formData.idCard = '' |
|||
this.formData.gridId = '' |
|||
this.formData.userId = '' |
|||
if (value === '2') { |
|||
this.isFromResi = true |
|||
} else { |
|||
this.isFromResi = false |
|||
} |
|||
|
|||
}, |
|||
|
|||
async loadGrid () { |
|||
const url = "/gov/org/customergrid/gridoption" |
|||
|
|||
let params = { |
|||
agencyId: this.agencyId |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.gridList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
async handleSelGrid (value) { |
|||
|
|||
const url = "/epmetuser/icresiuser/demandusers" |
|||
|
|||
let params = { |
|||
agencyId: this.agencyId, |
|||
gridId: value |
|||
} |
|||
|
|||
const { data, code, msg } = await requestPost(url, params) |
|||
|
|||
if (code === 0) { |
|||
this.personList = data |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
async handleSelPerson (personItem) { |
|||
this.formData.userId = personItem.demandUserId |
|||
this.formData.name = personItem.demandUserName |
|||
this.formData.mobile = personItem.demandUserMobile |
|||
this.formData.idCard = personItem.idCard |
|||
}, |
|||
|
|||
async loadFormData () { |
|||
|
|||
// const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/detail' |
|||
const url = '/epmetuser/icNat/detail' |
|||
let params = { |
|||
icNatId: this.icNatId, |
|||
} |
|||
const { data, code, msg } = await requestPost(url, params) |
|||
if (code === 0) { |
|||
this.formData = data |
|||
this.formData.icNatId = this.icNatId |
|||
this.fileList = [] |
|||
if (data.fileName) { |
|||
let obj = { |
|||
name: data.fileName, |
|||
type: data.attachmentType, |
|||
url: data.attachmentUrl, |
|||
} |
|||
// data.attachmentList.forEach(element => { |
|||
// element.name = element.fileName |
|||
// element.type = element.attachmentType |
|||
// element.size = element.attachmentSize |
|||
// }); |
|||
this.fileList.push(obj) |
|||
|
|||
} |
|||
|
|||
this.hideUploadEdit = this.fileList.length >= this.limitNum; |
|||
|
|||
} else { |
|||
this.$message.error(msg) |
|||
} |
|||
}, |
|||
|
|||
|
|||
async handleComfirm () { |
|||
|
|||
|
|||
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码 |
|||
if (regPhone.test(this.formData.mobile) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的手机号码' |
|||
}) |
|||
return false; |
|||
} |
|||
const regCard = /(^\d{15}$)|(^\d{17}(\d|X)$)/; //身份证号码为15位或者18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X |
|||
if (regCard.test(this.formData.idCard) === false) { |
|||
this.btnDisable = false |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请输入正确的身份证号码' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
if (this.formData.channel.length > 0 && !this.formData.content) { |
|||
this.$message({ |
|||
type: 'warning', |
|||
message: '请填写通知内容' |
|||
}) |
|||
return false; |
|||
} |
|||
|
|||
this.btnDisable = true |
|||
setTimeout(() => { |
|||
this.btnDisable = false |
|||
}, 5000) |
|||
|
|||
let url = '' |
|||
if (this.formType === 'add') { |
|||
url = '/epmetuser/icNat/add' |
|||
// url = "http://yapi.elinkservice.cn/mock/102/epmetuser/icNat/add" |
|||
this.formData.icNatId = '' |
|||
|
|||
} else { |
|||
url = '/epmetuser/icNat/edit' |
|||
// url = "http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/edit" |
|||
} |
|||
|
|||
|
|||
const { data, code, msg } = await requestPost(url, this.formData) |
|||
|
|||
if (code === 0) { |
|||
this.$message({ |
|||
type: 'success', |
|||
message: '操作成功' |
|||
}) |
|||
this.resetData() |
|||
this.$emit('dialogOk') |
|||
this.btnDisable = false |
|||
|
|||
} else { |
|||
this.btnDisable = false |
|||
this.$message.error(msg) |
|||
} |
|||
|
|||
}, |
|||
|
|||
handleCancle () { |
|||
this.resetData() |
|||
this.$emit('dialogCancle') |
|||
|
|||
}, |
|||
|
|||
handleRemove (file, fileList) { |
|||
this.hideUploadEdit = fileList.length >= this.limitNum; |
|||
this.formData.fileName = '' |
|||
this.formData.attachmentUrl = '' |
|||
this.formData.attachmentType = '' |
|||
this.fileList = [] |
|||
|
|||
}, |
|||
handlePictureCardPreview (file) { |
|||
this.dialogImageUrl = file.url; |
|||
this.dialogVisible = true; |
|||
}, |
|||
|
|||
handleEditChange (file, fileList) { |
|||
this.hideUploadEdit = fileList.length >= this.limitNum; |
|||
|
|||
}, |
|||
|
|||
beforeUpload (file) { |
|||
const array = file.name.split('.') |
|||
const extension = array[array.length - 1] |
|||
// const isLt1M = (file.size / 1024 / 1024) < 5 |
|||
if (extension !== 'jpg' |
|||
&& extension !== 'png' |
|||
&& extension !== 'gif' |
|||
) { |
|||
this.$message.error('只能上传jpg、png、gif文件！') |
|||
return false |
|||
} |
|||
// if (!isLt1M) { |
|||
// this.$message.error('上传文件大小不能超过 5MB!') |
|||
// } |
|||
// return isLt1M |
|||
|
|||
}, |
|||
|
|||
handleFileSuccess (res, file) { |
|||
|
|||
if (res.code === 0 && res.msg === 'success') { |
|||
const array = file.name.split('.') |
|||
const fileType = array[array.length - 1] |
|||
|
|||
this.formData.fileName = file.name |
|||
this.formData.attachmentUrl = res.data.url |
|||
this.formData.attachmentType = 'image' |
|||
|
|||
file.attachmentFormat = fileType |
|||
file.attachmentSize = file.size |
|||
|
|||
} else this.$message.error(res.msg) |
|||
}, |
|||
|
|||
resetData () { |
|||
this.icNatId = '' |
|||
this.fileList = [] |
|||
this.hideUploadEdit = false |
|||
|
|||
this.formData = { |
|||
icNatId: '', |
|||
agencyId: '',//当前网格所属组织Id |
|||
userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值 |
|||
userType: 'icresi',//居民端小程序的人：resi;数字社区的居民：icresi;导入的：import;同步的：synchro |
|||
name: '', |
|||
idCard: '', |
|||
mobile: '', |
|||
natTime: '', |
|||
natAddress: '', |
|||
natResult: '', |
|||
channel: [], |
|||
content: '', |
|||
|
|||
fileName: '',//附件名 |
|||
attachmentType: '',//附件类型（（图片 - image、 视频 - video、 语音 - voice、 文档 - doc）） |
|||
attachmentUrl: '',//附件地址 |
|||
|
|||
} |
|||
}, |
|||
// 开启加载动画 |
|||
startLoading () { |
|||
loading = Loading.service({ |
|||
lock: true, // 是否锁定 |
|||
text: '正在加载……', // 加载中需要显示的文字 |
|||
background: 'rgba(0,0,0,.7)' // 背景颜色 |
|||
}) |
|||
}, |
|||
// 结束加载动画 |
|||
endLoading () { |
|||
// clearTimeout(timer); |
|||
if (loading) { |
|||
loading.close() |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
|
|||
<style lang="scss" scoped > |
|||
@import "@/assets/scss/modules/management/epidemic.scss"; |
|||
</style> |
|||
|
|||
<style lang='scss'> |
|||
// 隐藏上传按钮 |
|||
.hide .el-upload--picture-card { |
|||
display: none; |
|||
} |
|||
// 添加/删除文件时去掉动画过渡 |
|||
.el-upload-list__item { |
|||
transition: none !important; |
|||
} |
|||
</style> |
|||
|
|||
|
|||
|
|||
Loading…
Reference in new issue