<template>
<div>
<el-row>
<el-col :span="7">
<el-tree
:data="data"
node-key="id"
:expand-on-click-node="false"
@node-click="chooseUnit"
:render-content="renderContent"
>
</el-tree>
</el-col>
<el-col :span="17">
<div class="filter-container">
<div>
<span>  姓名 </span>
<el-input
clearable
style="width: 200px"
class="filter-item"
placeholder="姓名"
v-model.trim="listQuery.name"
></el-input>
<span>  健康分类 </span>
<el-select
size="small"
style="margin-top: 10px; width: 200px"
v-model="listQuery.populationClassification"
filterable
clearable
placeholder="请选择分类"
>
<el-option
v-for="item in RQFLList"
:key="item.code"
:label="item.name"
:value="item.code"
>
</el-option>
</el-select>
<el-button
class="filter-item"
type="primary"
icon="search"
@click="chooseUnitTwo"
style="margin-left: 1%"
>查询</el-button
>
<el-button
class="filter-item"
type="primary"
icon="search"
@click="clearListQuery"
>清空</el-button
>
<!-- <el-button class="filter-item" type="primary" icon="search"
@click="handleFilter">导出名单</el-button> -->
</div>
<!-- <div style="margin: 20px 0;">
<span>选择计划 </span>
<el-select clearable filterable v-model="formQuery.selectPlan" placeholder="选择计划"></el-select>
</div> -->
</div>
<el-table
:key="tableKey"
:data="list"
size="small"
v-loading.body="listLoading"
stripe
border
highlight-current-row
style="width: 100%"
>
<el-table-column type="selection" width="55" />
<el-table-column align="center" label="档案编号" width="180px">
<template slot-scope="scope">
<span>{{ scope.row.fileNumber }}</span>
</template>
</el-table-column>
<el-table-column width="150px" align="center" label="健康分类">
<template slot-scope="scope">
<div v-for="(item, index) in RQFLList" :key="index">
<span v-if="scope.row.populationClassification == item.code">{{
item.name
}}</span>
</div>
</template>
</el-table-column>
<el-table-column align="center" label="姓名" width="65">
<template slot-scope="scope">
<span>{{ scope.row.name }}</span>
</template>
</el-table-column>
<el-table-column width="65" align="center" label="性别">
<template slot-scope="scope">
<span>{{ scope.row.gender }}</span>
</template>
</el-table-column>
<el-table-column width="65" align="center" label="年龄">
<template slot-scope="scope">
<span>{{ scope.row.age }}</span>
</template>
</el-table-column>
<el-table-column width="180px" align="center" label="居住地址">
<template slot-scope="scope" align="center">
<span>{{ scope.row.address }}</span>
</template>
</el-table-column>
<el-table-column width="180px" align="center" label="手机号">
<template slot-scope="scope">
<span>{{ scope.row.telNumber }}</span>
</template>
</el-table-column>
<el-table-column width="200px" align="center" label="身份证号">
<template slot-scope="scope">
<span>{{ scope.row.cardNo }}</span>
</template>
</el-table-column>
<el-table-column width="200px" align="center" label="疾病详情">
<template slot-scope="scope">
<span>{{ scope.row.remarks }}</span>
</template>
</el-table-column>
<el-table-column fixed="right" align="center" label="操作" width="250">
<template slot-scope="scope">
<el-button size="small" type="success" @click="handleUpdate(scope.row)"
>编辑
</el-button>
<el-button size="small" type="primary" @click="gotoArchivesPage(scope.row)"
>档案
</el-button>
<!-- <el-button size="small" type="danger" @click="handleDelete(scope.row)">删除
</el-button> -->
</template>
</el-table-column>
</el-table>
<div v-show="!listLoading" class="pagination-container">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page.sync="listQuery.page"
:page-sizes="[10, 20, 30, 50]"
:page-size="listQuery.limit"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
</div>
</el-col>
</el-row>
<el-dialog title="编辑档案" :visible.sync="dialogFormVisible" width="70%">
<el-form :model="form" :rules="rules" ref="form" label-width="80px">
<el-row>
<el-col :span="2"> </el-col>
<el-col :span="10">
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" style="width: 100%"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="性别">
<el-radio-group v-model="form.gender">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>
<el-radio label="不详"></el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="2"> </el-col>
<el-col :span="10">
<el-form-item label="身份证号" prop="cardNo">
<el-input
v-model="form.cardNo"
@input="updateAge"
style="width: 100%"
></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="年龄">
<el-input disabled v-model="form.age" style="width: 100%"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="2"> </el-col>
<el-col :span="10">
<el-form-item label="地址">
<el-input v-model="form.address" style="width: 100%"></el-input>
</el-form-item>
</el-col>
<el-col :span="10">
<el-form-item label="联系方式" prop="telNumber">
<el-input v-model="form.telNumber" style="width: 100%"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="2"> </el-col>
<el-col :span="10">
<el-form-item label="单位分组" prop="unitCode">
<el-select
v-model="unitList"
filterable
multiple
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="item in ListUnit"
:key="item.id"
:label="item.name"
:value="item.code"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="10">
<!-- <el-form-item label="疾病分组">
<el-select v-model="form.diseaseNo" filterable multiple placeholder="请选择"
style="width:100%">
<el-option v-for="item in diaseaseList" :key="item.diseaseNo" :label="item.diseaseName"
:value="item.diseaseNo">
</el-option>
</el-select>
</el-form-item> -->
<el-form-item label="健康分类">
<el-select
v-model="form.populationClassification"
filterable
placeholder="请选择"
style="width: 100%"
>
<el-option
v-for="(item, index) in RQFLList"
:key="index"
:label="item.name"
:value="item.code"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
<!-- <el-row>
<el-col :span="2"> </el-col>
<el-col :span="10">
<el-form-item label="健康分类">
<el-select v-model="form.populationClassification" filterable placeholder="请选择"
style="width:100%">
<el-option v-for="(item,index) in RQFLList" :key="index" :label="item.name" :value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<el-row>
<el-col :offset="2" :span="20">
<el-form-item label="疾病详情">
<el-input v-model="form.remarks"></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="cancel('form')">取 消</el-button>
<el-button type="primary" @click="update('form')">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
规则验证
<script>
import { getByDetialCode, pageByUnitCode } from '@/api/groupDetial/index.js'
import { DetialGet, queryUnitList } from '@/api/detial'
import { mapState } from 'vuex'
export default {
data () {
const data = []
const idCarfValidity1518 = (rule, value, callback) => {
let passed = false
// 身份证18位号码验证
function validId18 (str) {
if (str.length !== 18) {
return false
}
// 1. 出生日期验证
let re = new RegExp(/^(\d{6})(\d{4})(\d{2})(\d{2})(\d{3})([0-9]|X)$/)
let arrSplit = str.match(re) // 检查生日日期是否正确
if (arrSplit != null) {
if (!YearMonthDayValidate(arrSplit[2], arrSplit[3], arrSplit[4])) {
return false
}
} else {
return false
}
// 2. 校验位验证
let iW = new Array(7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2, 1) // 加权因子
let iSum = 0
for (let i = 0; i < 17; i++) {
let iC = str.charAt(i)
let iVal = parseInt(iC)
iSum += iVal * iW[i]
}
let iJYM = iSum % 11 // 取模
let sJYM = ''
// 获取的模查找对应的校验码字符值
if (iJYM == 0) sJYM = '1'
else if (iJYM == 1) sJYM = '0'
else if (iJYM == 2) sJYM = 'x'
else if (iJYM == 3) sJYM = '9'
else if (iJYM == 4) sJYM = '8'
else if (iJYM == 5) sJYM = '7'
else if (iJYM == 6) sJYM = '6'
else if (iJYM == 7) sJYM = '5'
else if (iJYM == 8) sJYM = '4'
else if (iJYM == 9) sJYM = '3'
else if (iJYM == 10) sJYM = '2'
let cCheck = str.charAt(17).toLowerCase()
if (cCheck != sJYM) {
return false
}
return true
}
// 身份证15位(1984-2004)身份验证
function validId15 (str) {
if (str.length !== 15) {
return false
}
// 1. 出生日期验证
let re = new RegExp(/^(\d{6})(\d{2})(\d{2})(\d{2})(\d{3})$/)
let arrSplit = str.match(re) // 检查生日日期是否正确
if (arrSplit != null) {
if (parseInt(arrSplit[2].substr(1)) > 0) {
arrSplit[2] = '19' + arrSplit[2]
} else {
arrSplit[2] = '20' + arrSplit[2]
}
if (!YearMonthDayValidate(arrSplit[2], arrSplit[3], arrSplit[4])) {
return false
}
} else {
return false
}
return true
}
// 出生日期的年月日验证
function YearMonthDayValidate (year, month, day) {
year = parseInt(year) // 年
month = parseInt(month) // 月
day = parseInt(day) // 日
// 判断年，月,日是否为空
if (isNaN(year) || isNaN(month) || isNaN(day)) {
return false
}
// 判断月是否是在1-12月之间
if (month < 1 || month > 12) {
return false
}
// 返回当月的最后一天
let date = new Date(year, month, 0)
// 判断是否超过天数范围
if (day < 1 || day > date.getDate()) {
return false
}
return true
}
// 1.传入15位或者18位身份证号码，18位号码末位可以为数字或X
let idCard = value
// 2.身份证中的X，必须是大写的
if (value.indexOf('x') !== -1) {
passed = false
}
// 3.判断输入的身份证长度
if (!/(^\d{15}$)|(^\d{17}([0-9]|X)$)/.test(idCard)) {
passed = false
}
// 4.验证前两位城市编码是否正确
let aCity = {
11: '北京',
12: '天津',
13: '河北',
14: '山西',
15: '内蒙古',
21: '辽宁',
22: '吉林',
23: '黑龙江',
31: '上海',
32: '江苏',
33: '浙江',
34: '安徽',
35: '福建',
36: '江西',
37: '山东',
41: '河南',
42: '湖北',
43: '湖南',
44: '广东',
45: '广西',
46: '海南',
50: '重庆',
51: '四川',
52: '贵州',
53: '云南',
54: '西藏',
61: '陕西',
62: '甘肃',
63: '青海',
64: '宁夏',
65: '新疆',
71: '台湾',
81: '香港',
82: '澳门',
91: '国外'
}
if (aCity[parseInt(idCard.substr(0, 2))] == null) {
passed = false
}
// 5.验证出生日期和校验位
if (validId15(idCard) || validId18(idCard)) {
passed = true
} else {
passed = false
}
if (passed) {
callback()
} else {
callback(new Error('身份证校验失败'))
}
}
// 设置手机号的验证规则
const phoneRules = (rule, value, callback) => {
if (!value) {
callback(new Error('请输入联系方式'))
} else {
const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
if (reg.test(value)) {
callback()
} else {
return callback(new Error('请输入正确的电话'))
}
}
}
const unitCode = (rule, value, callback) => {
console.log(value)
if (this.unitList.length == 0) {
callback(new Error('请选择厂区'))
} else {
callback()
}
}
return {
unitList: [],
ListUnit: [],
dialogFormVisible: false,
form: {
diseaseNo: []
},
chooseNode: null,
RQFLList: [],
total: null,
listQuery: {
page: 1,
limit: 10,
detialCode: '',
name: '',
populationClassification: null
},
listLoading: false,
tableKey: 0,
formQuery: {
name: '', // 姓名
selectPlan: '' // 选择计划
},
data: JSON.parse(JSON.stringify(data)),
defaultProps: {
children: 'children',
label: 'label'
},
list: [],
multipleSelection: [],
rules: {
name: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
}
],
cardNo: [
{
required: true,
message: '请输入身份证号',
trigger: 'blur'
},
{
pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
message: '请输入正确的证件号'
},
{
validator: idCarfValidity1518,
trigger: 'blur'
}
],
telNumber: [
{
required: true,
validator: phoneRules,
trigger: 'blur'
}
],
diseaseNo: [
{
required: true,
message: '请选择慢病',
trigger: 'blur'
}
],
unitCode: [
{
required: true,
validator: unitCode,
trigger: 'blur'
}
]
}
}
},
methods: {
cancel (formName) {
this.dialogFormVisible = false
const set = this.$refs
set[formName].resetFields()
},
getDetialUnit () {
DetialGet(65).then((res) => {
console.log(res)
this.RQFLList = res.itemList
})
},
getDetial () {
DetialGet(58).then((res) => {
this.ListUnit = res.itemList
})
},
clearListQuery () {
this.listQuery.name = ''
this.listQuery.populationClassification = null
},
handleFilter () {},
getByDetialCodeAll () {
this.listLoading = true
getByDetialCode().then((res) => {
console.log(res)
if (res.cGroupUnits.length > 0) {
for (let i = 0; i < res.cGroupUnits.length; i++) {
let yiji = {
id: res.cGroupUnits[i].id,
label: res.cGroupUnits[i].unitName,
children: []
}
for (let j = 0; j < res.cGroupUnits[i].dictItemDetials.length; j++) {
let erji = {
id: res.cGroupUnits[i].dictItemDetials[j].code,
label: res.cGroupUnits[i].dictItemDetials[j].name,
num: res.cGroupUnits[i].dictItemDetials[j].num,
children: []
}
// for(let k = 0; k < res.cGroupUnits[i].dictItemDetials[j].chronicArchives.length; k++) {
// let sanji = {
// id: res.cGroupUnits[i].dictItemDetials[j].chronicArchives[k].fileNumber,
// label: res.cGroupUnits[i].dictItemDetials[j].chronicArchives[k].name
// }
// erji.children.push(sanji)
// }
yiji.children.push(erji)
}
this.data.push(yiji)
}
}
this.listLoading = false
})
},
handleNodeClick (data) {
console.log(data)
},
renderContent (h, { node, data, store }) {
console.log(node)
if (node.data.children.length == 0) {
return (
<span
class="custom-tree-node"
style="width: 100%;display: flex;justify-content: space-between;margin-right: 50px;"
>
<span>{node.label}</span>
<span
class="totalNum"
style="background-color:#e4e7ed;border-radius: 35%;margin: auto 0;padding:2px 3px;font-size: small;"
>
{node.data.num}
</span>
</span>
)
} else {
return (
<span
class="custom-tree-node"
style="width: 100%;display: flex;justify-content: space-between;margin-right: 50px;"
>
<span>{node.label}</span>
<span
class="totalNum"
style="background-color:#e4e7ed;border-radius: 35%;margin: auto 0;padding:2px 3px;font-size: small;"
>
{''}
</span>
</span>
)
}
},
async handleUpdate (row) {
console.log(row)
this.form = Object.assign({}, row)
if (row.diseaseNo && row.diseaseNos !== '[]') {
this.form.diseaseNo = JSON.parse(row.diseaseNo)
// this.queryDoctors()
} else {
this.form.diseaseNo = []
// this.queryDoctors()
}
let zc = []
await queryUnitList(row.fileNumber).then((res) => {
this.unitList = this.ListUnit.filter((obj1) =>
res.unitList.some((obj2) => obj1.code == obj2.detialCode)
).map((obj) => obj.code)
})
this.dialogFormVisible = true
this.form.updateUser = this.$store.state.d2admin.user.info.name
},
gotoArchivesPage (row) {
// this.$router.push({ path: '/archivesPage', query: { ...row }})
// 将个人的慢病分组转换为集合形式
// const personalDisease = [];
// const diseaseNoArr = JSON.parse(row.diseaseNo);
// diseaseNoArr.forEach((item) => {
// this.diaseaseList.forEach((d) => {
// if (d.diseaseNo === item) {
// personalDisease.push(d);
// }
// });
// });
// 格式化慢病分组：,并将慢病分组对应的疾病信息一并传入其中
let temp = {
...row,
personalDisease: null,
writeable: true
}
sessionStorage.setItem('fileInfoParams', JSON.stringify(temp))
console.log('row.fileNumber--------', row.fileNumber)
// 是否有写权限
this.$router.push({
name: 'fileInfo',
params: {
...row,
fileNumber: row.fileNumber,
personalDisease: null,
writeable: true
}
})
this.$destroy()
},
handleSizeChange (val) {
this.listQuery.limit = val
this.chooseUnit(this.chooseNode)
},
handleCurrentChange (val) {
this.listQuery.page = val
this.chooseUnit(this.chooseNode)
},
chooseUnit (data) {
console.log(data)
if (data.children.length == 0) {
this.chooseNode = data
this.listLoading = true
this.listQuery.detialCode = data.id
pageByUnitCode(this.listQuery).then((res) => {
console.log(res)
this.list = res.rows
this.total = res.total
this.listLoading = false
})
}
},
chooseUnitTwo () {
if (this.chooseNode == null) {
this.$message({
type: 'error',
message: '请先选择单位！'
})
return
}
if (this.chooseNode.children.length == 0) {
this.listLoading = true
this.listQuery.detialCode = this.chooseNode.id
pageByUnitCode(this.listQuery).then((res) => {
console.log(res)
this.list = res.rows
this.total = res.total
this.listLoading = false
})
}
},
updateAge () {
const cardNo = this.form.cardNo
if (cardNo && cardNo.length === 18) {
// 先检查一下cardNo是否为空
const year = cardNo.substr(6, 4)
const month = cardNo.substr(10, 2)
const day = cardNo.substr(12, 2)
const birthDate = new Date(`${year}-${month}-${day}`)
const now = new Date()
const age = now.getFullYear() - birthDate.getFullYear() - 1
if (
now.getMonth() > birthDate.getMonth() ||
(now.getMonth() === birthDate.getMonth() &&
now.getDate() >= birthDate.getDate())
) {
this.form.age = age + 1
} else {
this.form.age = age
}
} else {
this.form.age = ''
}
}
},
created () {
this.getByDetialCodeAll()
this.getDetialUnit()
this.getDetial()
},
mounted () {},
computed: {
...mapState('chronicdisease', ['diaseaseList'])
}
}
</script>
扫一扫
599
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
