老产品前端代码
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.

723 lines
21 KiB

<template>
3 years ago
<div class="epidemic-form">
<div class="dialog-h-content scroll-h">
<el-form ref="ref_form"
:inline="true"
:model="formData"
:rules="dataRule"
3 years ago
:disabled="formType==='detail'"
class="form">
3 years ago
<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>
3 years ago
<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>
3 years ago
<el-form-item v-if="formType==='add'"
label="居民"
prop="userId"
style="display: block"
label-width="150px">
<el-select class="item_width_2"
3 years ago
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="手机号"
3 years ago
prop="mobile"
label-width="150px"
style="display: block">
<el-input class="item_width_2"
placeholder="请输入手机号"
clearable
:disabled="isFromResi"
3 years ago
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"
3 years ago
prop="natTime"
label-width="150px">
<el-date-picker class="item_width_2"
3 years ago
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="检测地点"
3 years ago
prop="natAddress"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
placeholder="请输入检测地点"
clearable
3 years ago
v-model="formData.natAddress">
</el-input>
</el-form-item>
<el-form-item label="检测结果"
3 years ago
prop="natResult"
label-width="150px"
style="display: block">
3 years ago
<el-radio-group v-model="formData.natResult">
3 years ago
<el-radio :label="'0'">阴性</el-radio>
<el-radio :label="'1'">阳性</el-radio>
</el-radio-group>
</el-form-item>
3 years ago
<el-form-item label="采样时间"
style="display: block"
prop="sampleTime"
label-width="150px">
<el-date-picker class="item_width_2"
v-model="formData.sampleTime"
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>
3 years ago
<el-form-item v-if=" formType!=='detail' || (formType=='detail'&&fileList.length>0)"
class="block"
label-width="150px"
style="display: block"
3 years ago
label="添加图片"
prop="attach">
3 years ago
<el-upload :headers="$getElUploadHeaders()"
:action="uploadUlr"
3 years ago
list-type="picture-card"
:limit="limitNum"
:class="{hide:hideUploadEdit}"
accept=".jpg,.png,.gif"
:on-preview="handlePictureCardPreview"
:on-success="handleFileSuccess"
3 years ago
:on-remove="handleRemove"
:before-upload="beforeUpload"
3 years ago
:on-change="handleEditChange"
:file-list="fileList">
3 years ago
<i v-if="formType!=='detail'"
class="el-icon-plus"></i>
<div v-if="formType!=='detail'"
slot="tip"
3 years ago
class="el-upload__tip">请选择1张图片只能上传jpgpnggif格式</div>
</el-upload>
3 years ago
</el-form-item>
3 years ago
<div v-if=" formType!=='detail'">
<el-form-item label="通知渠道"
prop="isSelChannel"
label-width="150px"
style="display: block">
<el-checkbox v-model="formData.isSelChannel"
@change="handleChannelChange"
key="0"
label="0">小程序通知</el-checkbox>
<!-- <el-checkbox-group v-model="formData.channel">
3 years ago
<el-checkbox key="0"
label="0">小程序通知</el-checkbox>
3 years ago
<el-checkbox key="1"
label="1">短信通知</el-checkbox>
3 years ago
</el-checkbox-group> -->
3 years ago
</el-form-item>
<el-form-item v-if="formData.isSelChannel"
label="通知内容"
prop="content"
label-width="150px"
style="display: block">
<el-input class="item_width_1"
type="textarea"
maxlength="500"
show-word-limit
:autosize="{ minRows: 5, maxRows: 10 }"
clearable
placeholder="请输入通知内容"
v-model="formData.content"></el-input>
</el-form-item>
</div>
</el-form>
</div>
3 years ago
<div class="form_div_btn">
<el-button size="small"
@click="handleCancle"> </el-button>
3 years ago
<el-button v-if="formType != 'detail'"
size="small"
type="primary"
:disabled="btnDisable"
@click="handleComfirm"> </el-button>
</div>
3 years ago
<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详情
3 years ago
hideUploadEdit: false, // 隐藏'上传按钮'
limitNum: 1,
enterType: '1',//录入方式1 手动输入 2 选择居民
isFromResi: false,//是否从已有居民信息中选择
gridList: [],
personList: [],
pickerOptions: { //控制时间范围
disabledDate (time) {
return time.getTime() > (Date.now())
}
},
btnDisable: false,
3 years ago
icNatId: '',
formData: {
3 years ago
icNatId: '',
agencyId: '',//当前网格所属组织Id
userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值
userType: 'icresi',//居民端小程序的人:resi;数字社区的居民:icresi;导入的:import;同步的:synchro
name: '',
idCard: '',
3 years ago
mobile: '',
natTime: '',
natAddress: '',
natResult: '',
3 years ago
sampleTime: '',
3 years ago
isSelChannel: false,
3 years ago
channel: [],
content: '',
fileName: '',//附件名
attachmentType: '',//附件类型((图片 - image、 视频 - video、 语音 - voice、 文档 - doc))
attachmentUrl: '',//附件地址
},
fileList: [],
uploadUlr: window.SITE_CONFIG['apiURL'] + '/oss/file/uploadvariedfile',
dialogImageUrl: '',
dialogVisible: false,
3 years ago
imgLoading: false,
}
},
components: {},
async mounted () {
const { user } = this.$store.state
this.agencyId = user.agencyId
//获取网格下拉框数据
await this.loadGrid()
},
methods: {
3 years ago
handleChannelChange (val) {
this.formData.content = ''
},
3 years ago
async initForm (type, icNatId) {
3 years ago
this.startLoading()
3 years ago
this.formData.agencyId = this.agencyId
this.$refs['ref_form'].resetFields();
this.isFromResi = false
this.enterType = '1'
this.formType = type
3 years ago
if (icNatId) {
this.icNatId = icNatId
this.formData.icNatId = icNatId
this.isFromResi = false
await this.loadFormData()
}
3 years ago
3 years ago
this.endLoading()
},
handleChangeEnterType (value) {
this.formData.name = ''
3 years ago
this.formData.mobile = ''
this.formData.idCard = ''
this.formData.gridId = ''
3 years ago
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) {
3 years ago
this.formData.userId = personItem.demandUserId
this.formData.name = personItem.demandUserName
3 years ago
this.formData.mobile = personItem.demandUserMobile
this.formData.idCard = personItem.idCard
},
async loadFormData () {
3 years ago
// const url = 'http://yapi.elinkservice.cn/mock/245/epmetuser/icNat/detail'
const url = '/epmetuser/icNat/detail'
let params = {
3 years ago
icNatId: this.icNatId,
}
const { data, code, msg } = await requestPost(url, params)
if (code === 0) {
this.formData = data
3 years ago
this.formData.channel = []
this.formData.content = ''
// if (data.channel && data.channel.length > 0) {
// this.$set(this.formData, 'isSelChannel', true)
// // this.formData.isSelChannel = true
// } else {
// this.$set(this.formData, 'isSelChannel', false)
// // this.formData.isSelChannel = false
// this.formData.channel = []
// this.formData.content = ''
// }
3 years ago
console.log(this.formData.isSelChannel)
3 years ago
this.formData.icNatId = this.icNatId
3 years ago
if (this.formData.userId) {
this.isFromResi = true
} else {
this.isFromResi = false
}
3 years ago
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)
}
3 years ago
this.hideUploadEdit = this.fileList.length >= this.limitNum;
} else {
this.$message.error(msg)
}
},
3 years ago
handleComfirm () {
this.$refs['ref_form'].validate((valid, messageObj) => {
if (!valid) {
app.util.validateRule(messageObj)
3 years ago
} else {
this.addNat()
}
3 years ago
3 years ago
})
},
3 years ago
async addNat () {
3 years ago
const regPhone = /^1(3|4|5|6|7|8|9)\d{9}$/; //手机号码
3 years ago
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)$)|(^[a-zA-Z0-9]{8,9}$)/; //证件号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X
3 years ago
if (regCard.test(this.formData.idCard) === false) {
this.btnDisable = false
this.$message({
type: 'warning',
message: '请输入正确的证件号码'
3 years ago
})
return false;
}
3 years ago
// debugger
let tempResult = false
if (this.formData.sampleTime) {
tempResult = true
} else {
if (!this.formData.natTime || !this.formData.natResult) {
this.$message({
type: 'warning',
message: '采样结果为空时,核酸检测时间和检测结果不能为空'
})
return false;
} if (!this.formData.natTime && !this.formData.natResult) {
this.$message({
type: 'warning',
message: '采样结果和核酸检测时间、结果不能同时为空'
})
return false;
}
}
// if (!tempResult) {
// this.$message({
// type: 'warning',
// message: '核酸检测时间、结果和采样时间不能同时为空'
// })
// return false;
// }
3 years ago
if (this.formData.isSelChannel) {
if (!this.formData.content) {
this.$message({
type: 'warning',
message: '请填写通知内容'
})
return false;
} else {
this.formData.channel = ['0']
}
} else {
this.formData.channel = []
3 years ago
this.formData.content = ''
3 years ago
}
this.btnDisable = true
setTimeout(() => {
this.btnDisable = false
}, 5000)
let url = ''
if (this.formType === 'add') {
3 years ago
url = '/epmetuser/icNat/add'
// url = "http://yapi.elinkservice.cn/mock/102/epmetuser/icNat/add"
this.formData.icNatId = ''
} else {
3 years ago
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
3 years ago
} else {
this.btnDisable = false
this.$message.error(msg)
}
},
handleCancle () {
this.resetData()
this.$emit('dialogCancle')
},
3 years ago
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]
3 years ago
// const isLt1M = (file.size / 1024 / 1024) < 5
if (extension !== 'jpg'
&& extension !== 'png'
&& extension !== 'gif'
) {
this.$message.error('只能上传jpg、png、gif文件!')
return false
3 years ago
} else {
this.btnDisable = true
}
3 years ago
// if (!isLt1M) {
// this.$message.error('上传文件大小不能超过 5MB!')
// }
3 years ago
// return isLt1M
},
handleFileSuccess (res, file) {
if (res.code === 0 && res.msg === 'success') {
const array = file.name.split('.')
const fileType = array[array.length - 1]
3 years ago
this.formData.fileName = file.name
this.formData.attachmentUrl = res.data.url
this.formData.attachmentType = 'image'
file.attachmentFormat = fileType
3 years ago
file.attachmentSize = file.size
3 years ago
} else {
this.$message.error(res.msg)
}
this.btnDisable = false
},
resetData () {
3 years ago
this.icNatId = ''
this.fileList = []
this.hideUploadEdit = false
this.formData = {
3 years ago
icNatId: '',
agencyId: '',//当前网格所属组织Id
userId: '',//居民端小程序的用户id、数字社区的icResiUserId、其他情况无值
userType: 'icresi',//居民端小程序的人:resi;数字社区的居民:icresi;导入的:import;同步的:synchro
name: '',
idCard: '',
3 years ago
mobile: '',
natTime: '',
natAddress: '',
natResult: '',
3 years ago
sampleTime: '',
3 years ago
isSelChannel: false,
3 years ago
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: [
3 years ago
{ required: true, message: '姓名不能为空', trigger: 'change' }
],
idCard: [
3 years ago
{ required: true, message: '证件号不能为空', trigger: 'change' }
],
3 years ago
mobile: [
3 years ago
{ required: true, message: '手机号不能为空', trigger: 'change' },
],
3 years ago
// natTime: [
// { required: true, message: '检测时间不能为空', trigger: 'change' },
// ],
3 years ago
natAddress: [
{ required: false },
],
3 years ago
// natResult: [
// { required: true, message: '检测结果不能为空', trigger: 'change' },
// ],
3 years ago
3 years ago
isSelChannel: [
{ required: false },
],
3 years ago
channel: [
{ required: false },
],
3 years ago
content: [
{ required: false },
],
}
},
},
props: {
// serviceList: {
// type: Array,
// default: []
// },
}
}
</script>
<style lang="scss" scoped >
@import "@/assets/scss/modules/management/epidemic.scss";
</style>
3 years ago
<style lang='scss'>
// 隐藏上传按钮
.hide .el-upload--picture-card {
display: none;
}
// 添加/删除文件时去掉动画过渡
.el-upload-list__item {
transition: none !important;
}
</style>