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.
655 lines
18 KiB
655 lines
18 KiB
<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">
|
|
</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
|
|
: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="检测时间"
|
|
style="display: block"
|
|
prop="natTime"
|
|
label-width="150px">
|
|
<el-date-picker class="item_width_2"
|
|
v-model="formData.natTime"
|
|
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="natAddress"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-input class="item_width_1"
|
|
placeholder="请输入检测地点"
|
|
clearable
|
|
v-model="formData.natAddress">
|
|
</el-input>
|
|
</el-form-item>
|
|
|
|
<el-form-item label="检测结果"
|
|
prop="natResult"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-radio-group v-model="formData.natResult">
|
|
|
|
<el-radio :label="'0'">阴性</el-radio>
|
|
<el-radio :label="'1'">阳性</el-radio>
|
|
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
|
|
<el-form-item class="block"
|
|
label-width="150px"
|
|
style="display: block"
|
|
label="添加图片"
|
|
prop="attach">
|
|
|
|
<el-upload :action="uploadUlr"
|
|
list-type="picture-card"
|
|
:limit="limitNum"
|
|
:class="{hide:hideUploadEdit}"
|
|
accept=".jpg,.png,.gif"
|
|
:on-preview="handlePictureCardPreview"
|
|
:on-success="handleFileSuccess"
|
|
:on-remove="handleRemove"
|
|
:before-upload="beforeUpload"
|
|
:on-change="handleEditChange"
|
|
:file-list="fileList">
|
|
<i v-if="formType!=='detail'"
|
|
class="el-icon-plus"></i>
|
|
<div v-if="formType!=='detail'"
|
|
slot="tip"
|
|
class="el-upload__tip">请选择1张图片，只能上传jpg、png、gif格式</div>
|
|
</el-upload>
|
|
|
|
</el-form-item>
|
|
|
|
<el-form-item v-if="false"
|
|
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 v-if="false"
|
|
label="通知内容"
|
|
prop="content"
|
|
label-width="150px"
|
|
style="display: block">
|
|
<el-input class="item_width_1"
|
|
type="textarea"
|
|
maxlength="1000"
|
|
show-word-limit
|
|
:autosize="{ minRows: 5, 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: [],
|
|
pickerOptions: { //控制时间范围
|
|
disabledDate (time) {
|
|
return time.getTime() > (Date.now())
|
|
}
|
|
},
|
|
|
|
btnDisable: false,
|
|
|
|
icNatId: '',
|
|
formData: {
|
|
icNatId: '',
|
|
agencyId: '',//当前网格所属组织Id
|
|
userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值
|
|
userType: 'icresi',//居民端小程序的人：resi;数字社区的居民：icresi;导入的：import;同步的：synchro
|
|
name: '',
|
|
idCard: '',
|
|
mobile: '',
|
|
natTime: '',
|
|
natAddress: '',
|
|
natResult: '',
|
|
isSelChannel: false,
|
|
channel: [],
|
|
content: '',
|
|
|
|
fileName: '',//附件名
|
|
attachmentType: '',//附件类型（（图片 - image、 视频 - video、 语音 - voice、 文档 - doc））
|
|
attachmentUrl: '',//附件地址
|
|
},
|
|
|
|
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.startLoading()
|
|
this.formData.agencyId = this.agencyId
|
|
|
|
this.$refs['ref_form'].resetFields();
|
|
this.isFromResi = false
|
|
this.enterType = '1'
|
|
this.formType = type
|
|
|
|
if (icNatId) {
|
|
this.icNatId = icNatId
|
|
this.formData.icNatId = icNatId
|
|
this.isFromResi = false
|
|
await this.loadFormData()
|
|
}
|
|
|
|
this.endLoading()
|
|
|
|
|
|
},
|
|
|
|
handleChangeEnterType (value) {
|
|
this.formData.name = ''
|
|
this.formData.mobile = ''
|
|
this.formData.idCard = ''
|
|
this.formData.gridId = ''
|
|
this.formData.userId = ''
|
|
|
|
this.$refs['ref_form'].resetFields();
|
|
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.channel = []
|
|
this.formData.content = ''
|
|
this.formData.icNatId = this.icNatId
|
|
if (this.formData.userId) {
|
|
this.isFromResi = true
|
|
} else {
|
|
this.isFromResi = false
|
|
}
|
|
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)
|
|
}
|
|
},
|
|
|
|
handleComfirm () {
|
|
this.$refs['ref_form'].validate((valid, messageObj) => {
|
|
if (!valid) {
|
|
app.util.validateRule(messageObj)
|
|
|
|
} else {
|
|
this.addNat()
|
|
}
|
|
|
|
})
|
|
},
|
|
|
|
async addNat () {
|
|
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.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 = ''
|
|
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: '',
|
|
isSelChannel: false,
|
|
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()
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
dataRule () {
|
|
return {
|
|
name: [
|
|
{ required: true, message: '姓名不能为空', trigger: 'blur' }
|
|
],
|
|
idCard: [
|
|
{ required: true, message: '身份证号不能为空', trigger: 'blur' }
|
|
],
|
|
mobile: [
|
|
{ required: true, message: '手机号不能为空', trigger: 'blur' },
|
|
],
|
|
natTime: [
|
|
{ required: true, message: '检测时间不能为空', trigger: 'blur' },
|
|
],
|
|
|
|
natAddress: [
|
|
{ required: false },
|
|
],
|
|
natResult: [
|
|
{ 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>
|
|
|
|
<style lang='scss'>
|
|
// 隐藏上传按钮
|
|
.hide .el-upload--picture-card {
|
|
display: none;
|
|
}
|
|
// 添加/删除文件时去掉动画过渡
|
|
.el-upload-list__item {
|
|
transition: none !important;
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|