400 lines
13 KiB
Vue
400 lines
13 KiB
Vue
|
<template>
|
|||
|
|
<div class="add-treatment">
|
|||
|
|
<el-container style="height: 100vh; display: flex; flex-direction: column;">
|
|||
|
|
<el-main style="padding: 0; flex: 1; display: flex; flex-direction: column;">
|
|||
|
|
<div class="content-wrapper">
|
|||
|
|
<h2 class="page-title">添加治疗记录</h2>
|
|||
|
|
|
|||
|
|
<div class="treatment-container">
|
|||
|
|
<!-- 羊只信息只读展示 -->
|
|||
|
|
<div class="sheep-info-section">
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<strong>耳号：</strong>{{ sheepInfo.sheepNo || '–' }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<strong>性别：</strong>{{ sheepInfo.gender }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<strong>品种：</strong>{{ sheepInfo.variety || '–' }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<strong>羊只类别：</strong>{{ sheepInfo.sheepType || '–' }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<strong>月龄：</strong>{{ sheepInfo.monthAge ?? '–' }} 月
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="6">
|
|||
|
|
<div class="info-item">
|
|||
|
|
<strong>胎次：</strong>{{ sheepInfo.parity ?? '–' }}
|
|||
|
|
</div>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<el-form ref="treatmentRef" :model="form" :rules="rules" label-width="140px" status-icon
|
|||
|
|
size="large" class="treatment-form">
|
|||
|
|
<!-- 疾病和诊疗信息 -->
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="事件日期" prop="datetime">
|
|||
|
|
<el-date-picker v-model="form.datetime" type="date" placeholder="选择日期"
|
|||
|
|
style="width: 100%;" :disabled="true" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="发病日期" prop="begindate">
|
|||
|
|
<el-date-picker v-model="form.begindate" type="date" placeholder="选择日期"
|
|||
|
|
style="width: 100%;" :disabled="true" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="疾病类型" prop="diseasePName">
|
|||
|
|
<span>{{ form.diseasePName }}</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="疾病子类型" prop="diseaseName">
|
|||
|
|
<span>{{ form.diseaseName }}</span>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="治疗结束日期" prop="enddate">
|
|||
|
|
<el-date-picker v-model="form.enddate" type="date" placeholder="选择日期"
|
|||
|
|
style="width: 100%" :disabled-date="disabledDate" />
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="治疗天数">
|
|||
|
|
<span>{{ treatDay || 0}} 天</span>
|
|||
|
|
<!-- <el-input :value="treatDay" readonly style="width: 100%;" /> -->
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-row :gutter="20">
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="治疗结果" prop="result">
|
|||
|
|
<el-select v-model="form.result" placeholder="请选择治疗结果" style="width: 100%;">
|
|||
|
|
<el-option v-for="item in diag_status" :key="item.value" :label="item.label"
|
|||
|
|
:value="item.value" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
<el-col :span="12">
|
|||
|
|
<el-form-item label="转入羊舍" prop="sheepfoldId">
|
|||
|
|
<el-select v-model="form.sheepfoldId" placeholder="请选择转入羊舍"
|
|||
|
|
style="width: 100%;">
|
|||
|
|
<el-option v-for="item in sheepfolds" :key="item.id" :label="item.name"
|
|||
|
|
:value="item.id" />
|
|||
|
|
</el-select>
|
|||
|
|
</el-form-item>
|
|||
|
|
</el-col>
|
|||
|
|
</el-row>
|
|||
|
|
|
|||
|
|
<el-form-item label="备注" prop="comments">
|
|||
|
|
<el-input type="textarea" :rows="3" v-model="form.comments" placeholder="请输入备注" />
|
|||
|
|
</el-form-item>
|
|||
|
|
|
|||
|
|
<div class="form-footer">
|
|||
|
|
<el-button @click="goBack">取消</el-button>
|
|||
|
|
<el-button type="primary" @click="submitForm">确定</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</el-main>
|
|||
|
|
</el-container>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, onMounted, computed, getCurrentInstance } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
import { useRoute, useRouter } from 'vue-router'
|
|||
|
|
import useTagsViewStore from "@/store/modules/tagsView.js"
|
|||
|
|
import request from '@/utils/request'
|
|||
|
|
import { listDisease } from '@/api/biosafety/disease'
|
|||
|
|
import { getTreatment } from '@/api/biosafety/treatment'
|
|||
|
|
import { listSheepfold_management } from "@/api/fileManagement/sheepfold_management"
|
|||
|
|
import { addDiagnosis } from "@/api/biosafety/diagnosis"
|
|||
|
|
|
|||
|
|
const { proxy } = getCurrentInstance()
|
|||
|
|
const { diag_status } = proxy.useDict( "diag_status")
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
const route = useRoute()
|
|||
|
|
const router = useRouter()
|
|||
|
|
const { tId, sId } = route.query
|
|||
|
|
|
|||
|
|
const sheepInfo = ref({
|
|||
|
|
sheepNo: null,
|
|||
|
|
gender: '',
|
|||
|
|
variety: '',
|
|||
|
|
sheepType: '',
|
|||
|
|
monthAge: null,
|
|||
|
|
parity: null,
|
|||
|
|
breed: '',
|
|||
|
|
lactDay: null,
|
|||
|
|
gestDay: null
|
|||
|
|
})
|
|||
|
|
const sheepfolds = ref([])
|
|||
|
|
|
|||
|
|
function getSheepInfo() {
|
|||
|
|
if (!sId) return
|
|||
|
|
request.get(`/sheep_file/sheep_file/${sId}`).then(response => {
|
|||
|
|
const data = response.data
|
|||
|
|
sheepInfo.value = {
|
|||
|
|
sheepNo: data.bsManageTags,
|
|||
|
|
gender: data.gender,
|
|||
|
|
variety: data.variety,
|
|||
|
|
sheepType: data.name,
|
|||
|
|
monthAge: data.monthAge,
|
|||
|
|
parity: data.parity,
|
|||
|
|
breed: data.breed,
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getTreatmentInfo() {
|
|||
|
|
if (!tId) return
|
|||
|
|
getTreatment(tId).then(response => {
|
|||
|
|
const data = response.data
|
|||
|
|
form.treatId = tId
|
|||
|
|
form.datetime = new Date()
|
|||
|
|
form.begindate = new Date(data.datetime)
|
|||
|
|
form.diseasePName = data.diseasePName
|
|||
|
|
form.diseaseId = data.diseaseId
|
|||
|
|
form.diseasePid = data.diseasePid
|
|||
|
|
form.diseaseName = data.diseaseName
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const parentDiseaseOptions = ref([])
|
|||
|
|
const childDiseaseOptions = ref([])
|
|||
|
|
|
|||
|
|
function getDiseases() {
|
|||
|
|
listDisease().then(response => {
|
|||
|
|
const diseases = proxy.handleTree(response.data, "id", "pid")
|
|||
|
|
parentDiseaseOptions.value = diseases.filter(item => item.pid === 0)
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function handleDiseaseTypeChange(parentId) {
|
|||
|
|
if (!parentId) {
|
|||
|
|
childDiseaseOptions.value = []
|
|||
|
|
form.diseaseName = null
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
listDisease({ pid: parentId }).then(response => {
|
|||
|
|
childDiseaseOptions.value = response.data
|
|||
|
|
form.diseaseName = null
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const form = reactive({
|
|||
|
|
datetime: new Date(),
|
|||
|
|
begindate: null,
|
|||
|
|
eventType: '',
|
|||
|
|
diseasePName: null,
|
|||
|
|
diseaseName: null,
|
|||
|
|
result: '',
|
|||
|
|
enddate: null,
|
|||
|
|
comments: '',
|
|||
|
|
sheepId: sId
|
|||
|
|
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
const rules = {
|
|||
|
|
datetime: { required: true, message: '事件日期不能为空', trigger: 'change' },
|
|||
|
|
enddate: { required: true, message: '治疗日期不能为空', trigger: 'change' },
|
|||
|
|
sheepfoldId: { required: true, message: '转入羊舍不能为空', trigger: 'change' },
|
|||
|
|
result: { required: true, message: '治疗结果不能为空', trigger: 'change' }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const treatDay = computed(() => {
|
|||
|
|
if (!form.begindate || !form.enddate) return ''
|
|||
|
|
const onset = new Date(form.begindate)
|
|||
|
|
const end = new Date(form.enddate)
|
|||
|
|
const diffTime = end.getTime() - onset.getTime()
|
|||
|
|
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
|
|||
|
|
return diffDays
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
function submitForm() {
|
|||
|
|
proxy.$refs.treatmentRef.validate((valid) => {
|
|||
|
|
if (valid) {
|
|||
|
|
const submitData = {
|
|||
|
|
...form,
|
|||
|
|
datetime: form.datetime ? new Date(form.datetime).getTime() : null,
|
|||
|
|
begindate: form.begindate ? new Date(form.begindate).getTime() : null,
|
|||
|
|
endDate: form.endDate ? new Date(form.endDate).getTime() : null,
|
|||
|
|
treatDay: treatDay.value
|
|||
|
|
}
|
|||
|
|
addDiagnosis(submitData).then(response => {
|
|||
|
|
proxy.$modal.msgSuccess("诊断成功")
|
|||
|
|
open.value = false
|
|||
|
|
goBack()
|
|||
|
|
})
|
|||
|
|
} else {
|
|||
|
|
ElMessage.error("请完整填写表单信息！")
|
|||
|
|
return false
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 禁止选择今天以前的日期
|
|||
|
|
const disabledDate = (time) => {
|
|||
|
|
return time.getTime() < Date.now() - 8.64e7 // 8.64e7 = 24*60*60*1000
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const useTagsStore = useTagsViewStore()
|
|||
|
|
const currentTag = router.currentRoute.value
|
|||
|
|
const goBack = () => {
|
|||
|
|
router.go(-1)
|
|||
|
|
useTagsStore.delVisitedView(currentTag)
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
getDiseases()
|
|||
|
|
getTreatmentInfo()
|
|||
|
|
getSheepInfo()
|
|||
|
|
listSheepfold_management().then(res => {
|
|||
|
|
sheepfolds.value = res.rows.map(item => ({ id: item.id, name: item.sheepfoldName }))
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.add-treatment {
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-container {
|
|||
|
|
height: 100%;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-wrapper {
|
|||
|
|
flex: 1;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
padding: 20px;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.page-title {
|
|||
|
|
margin: 0 0 24px;
|
|||
|
|
font-size: 24px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #303133;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.treatment-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
width: 100%;
|
|||
|
|
padding: 20px;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.sheep-info-section {
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
padding: 20px;
|
|||
|
|
border-radius: 8px;
|
|||
|
|
margin-bottom: 32px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item strong {
|
|||
|
|
color: #606266;
|
|||
|
|
font-weight: 500;
|
|||
|
|
margin-right: 8px;
|
|||
|
|
width: 100px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item span {
|
|||
|
|
color: #303133;
|
|||
|
|
flex: 1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.treatment-form {
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 20px;
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-form-item {
|
|||
|
|
margin-bottom: 24px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-input,
|
|||
|
|
.el-textarea,
|
|||
|
|
.el-select {
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-footer {
|
|||
|
|
margin-top: 40px;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-footer .el-button {
|
|||
|
|
padding: 12px 40px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.el-col {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.el-row {
|
|||
|
|
margin-bottom: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item {
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-item strong {
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|