诊疗记录

src/views/biosafety/diagnosis/index.vue

@@ -1,112 +1,70 @@
 <template>
   <div class="app-container">
-    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+    <!-- 查询区域 -->
-      <el-form-item label="羊只id" prop="sheepId">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="80px">
-        <el-input
+      <el-form-item label="羊只" prop="sheepId">
-          v-model="queryParams.sheepId"
+        <el-input v-model="queryParams.sheepNo" placeholder="请输入羊只耳号" clearable />
-          placeholder="请输入羊只id"
-          clearable
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
+
       <el-form-item label="时间日期" style="width: 308px">
-        <el-date-picker
+        <el-date-picker v-model="daterangeDatetime" value-format="YYYY-MM-DD" type="daterange" range-separator="-"
-          v-model="daterangeDatetime"
+          start-placeholder="开始日期" end-placeholder="结束日期" />
-          value-format="YYYY-MM-DD"
-          type="daterange"
-          range-separator="-"
-          start-placeholder="开始日期"
-          end-placeholder="结束日期"
-        ></el-date-picker>
       </el-form-item>
+
       <el-form-item label="疾病类型" prop="diseasePid">
-        <el-input
+        <el-select v-model="queryParams.diseasePid" clearable placeholder="请选择疾病类型" style="width: 120px;" filterable
-          v-model="queryParams.diseasePid"
+          @change="handleDiseaseTypeChange">
-          placeholder="请输入疾病类型"
+          <el-option v-for="d in pDiseaseOptions" :key="d.id" :label="d.name" :value="d.id" />
-          clearable
+        </el-select>
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
+
       <el-form-item label="子疾病" prop="diseaseId">
-        <el-input
+        <el-select v-model="queryParams.diseaseId" :disabled="!queryParams.diseasePid" clearable placeholder="请选择疾病类型"
-          v-model="queryParams.diseaseId"
+          style="width: 120px;" filterable>
-          placeholder="请输入子疾病"
+          <el-option v-for="d in cDiseaseOptions" :key="d.id" :label="d.name" :value="d.id" />
-          clearable
+        </el-select>
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
+
       <el-form-item label="诊疗结果" prop="result">
-        <el-input
+        <el-select v-model="queryParams.result" clearable placeholder="请选择诊疗结果" style="width: 120px;">
-          v-model="queryParams.result"
+          <el-option v-for="r in diag_result" :key="r.value" :label="r.label" :value="r.value" />
-          placeholder="请输入诊疗结果"
+        </el-select>
-          clearable
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
+
       <el-form-item label="治疗天数" prop="treatDay">
-        <el-input
+        <el-input v-model="queryParams.treatDay" placeholder="请输入治疗天数" clearable />
-          v-model="queryParams.treatDay"
-          placeholder="请输入治疗天数"
-          clearable
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
-      <el-form-item label="羊舍id" prop="sheepfoldId">
+
-        <el-input
+      <el-form-item label="羊舍" prop="sheepfoldId">
-          v-model="queryParams.sheepfoldId"
+        <el-select v-model="queryParams.sheepfoldId" clearable placeholder="请选择羊舍" style="width: 120px;" filterable>
-          placeholder="请输入羊舍id"
+          <el-option v-for="s in sheepfoldOptions" :key="s.value" :label="s.label" :value="s.value" />
-          clearable
+        </el-select>
-          @keyup.enter="handleQuery"
-        />
       </el-form-item>
+
       <el-form-item>
         <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
         <el-button icon="Refresh" @click="resetQuery">重置</el-button>
       </el-form-item>
     </el-form>
 
+    <!-- 按钮区域 -->
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button
+        <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
-          type="primary"
+          v-hasPermi="['diagnosis:diagnosis:edit']">修改</el-button>
-          plain
-          icon="Plus"
-          @click="handleAdd"
-          v-hasPermi="['diagnosis:diagnosis:add']"
-        >新增</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
-          type="success"
+          v-hasPermi="['diagnosis:diagnosis:remove']">删除</el-button>
-          plain
-          icon="Edit"
-          :disabled="single"
-          @click="handleUpdate"
-          v-hasPermi="['diagnosis:diagnosis:edit']"
-        >修改</el-button>
       </el-col>
       <el-col :span="1.5">
-        <el-button
+        <el-button type="warning" plain icon="Download" @click="handleExport"
-          type="danger"
+          v-hasPermi="['diagnosis:diagnosis:export']">导出</el-button>
-          plain
-          icon="Delete"
-          :disabled="multiple"
-          @click="handleDelete"
-          v-hasPermi="['diagnosis:diagnosis:remove']"
-        >删除</el-button>
       </el-col>
-      <el-col :span="1.5">
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
-        <el-button
-          type="warning"
-          plain
-          icon="Download"
-          @click="handleExport"
-          v-hasPermi="['diagnosis:diagnosis:export']"
-        >导出</el-button>
-      </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
+    <!-- 列表 -->
     <el-table v-loading="loading" :data="diagnosisList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="耳号" align="center" prop="sheepNo" />
@@ -116,107 +74,144 @@
         </template>
       </el-table-column>
       <el-table-column label="羊只类别" align="center" prop="sheepType" />
-      <el-table-column label="性别" align="center" prop="gender" />
+      <el-table-column label="性别" align="center" prop="gender">
+        <template #default="scope"><dict-tag :options="sheep_gender" :value="scope.row.gender" /></template>
+      </el-table-column>
       <el-table-column label="胎次" align="center" prop="parity" />
-      <el-table-column label="疾病类型" align="center" prop="diseasePid" />
+      <el-table-column label="疾病类型" align="center" prop="diseasePName" />
-      <el-table-column label="子疾病" align="center" prop="diseaseId" />
+      <el-table-column label="子疾病" align="center" prop="diseaseName" />
-      <el-table-column label="诊疗结果" align="center" prop="result" />
+      <el-table-column label="诊疗结果" align="center" prop="result">
-      <el-table-column label="开始时间" align="center" prop="begindate" width="180">
+        <template #default="scope"><dict-tag :options="diag_result" :value="scope.row.result" /></template>
+      </el-table-column>
+      <el-table-column label="开始时间" align="center" prop="begindate">
         <template #default="scope">
           <span>{{ parseTime(scope.row.begindate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="结束时间" align="center" prop="enddate" width="180">
+      <el-table-column label="结束时间" align="center" prop="enddate">
         <template #default="scope">
           <span>{{ parseTime(scope.row.enddate, '{y}-{m}-{d}') }}</span>
         </template>
       </el-table-column>
       <el-table-column label="治疗天数" align="center" prop="treatDay" />
-      <el-table-column label="羊舍id" align="center" prop="sheepfoldId" />
+      <el-table-column label="羊舍" align="center" prop="sheepfold" width="100px" />
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100px">
         <template #default="scope">
-          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['diagnosis:diagnosis:edit']">修改</el-button>
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
-          
+            v-hasPermi="['diagnosis:diagnosis:edit']">修改</el-button>
-          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['diagnosis:diagnosis:remove']">删除</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)"
+            v-hasPermi="['diagnosis:diagnosis:remove']">删除</el-button>
         </template>
       </el-table-column>
     </el-table>
 
-    <pagination
+    <!-- 分页 -->
-      v-show="total>0"
+    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-      :total="total"
+      v-model:limit="queryParams.pageSize" @pagination="getList" />
-      v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
 
-    <!-- 添加或修改诊疗结果对话框 -->
+    <el-dialog :title="title" v-model="open" width="45%" append-to-body>
-    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="diagnosisRef" :model="form" :rules="rules" label-width="90px">
-      <el-form ref="diagnosisRef" :model="form" :rules="rules" label-width="80px">
+
-        <el-form-item label="羊只id" prop="sheepId">
+        <!-- 只读信息 -->
-          <el-input v-model="form.sheepId" placeholder="请输入羊只id" />
+        <el-row :gutter="20" class="info-block">
+          <el-col :span="12">
+            <el-form-item label="羊只耳号">
+              <span class="readonly-text">{{ form.sheepNo }}</span>
             </el-form-item>
-        <el-form-item label="时间日期" prop="datetime">
+          </el-col>
-          <el-date-picker clearable
+          <el-col :span="12">
-            v-model="form.datetime"
+            <el-form-item label="时间日期">
-            type="date"
+              <span class="readonly-text">{{ form.datetime }}</span>
-            value-format="YYYY-MM-DD"
-            placeholder="请选择时间日期">
-          </el-date-picker>
             </el-form-item>
-        <el-form-item label="性别" prop="gender">
+          </el-col>
-          <el-input v-model="form.gender" placeholder="请输入性别" />
+
+          <el-col :span="8">
+            <el-form-item label="性别">
+              <span class="readonly-text"> <dict-tag :options="sheep_gender"
+                    :value="form.gender" /></span>
             </el-form-item>
-        <el-form-item label="胎次" prop="parity">
+          </el-col>
-          <el-input v-model="form.parity" placeholder="请输入胎次" />
+          <el-col :span="8">
+            <el-form-item label="胎次">
+              <span class="readonly-text">{{ form.parity }}</span>
             </el-form-item>
-        <el-form-item label="疾病类型" prop="diseasePid">
+          </el-col>
-          <el-input v-model="form.diseasePid" placeholder="请输入疾病类型" />
+          <el-col :span="8">
+            <el-form-item label="月龄">
+              <span class="readonly-text">{{ form.monthAge }}</span>
             </el-form-item>
-        <el-form-item label="子疾病" prop="diseaseId">
+          </el-col>
-          <el-input v-model="form.diseaseId" placeholder="请输入子疾病" />
+
+          <el-col :span="12">
+            <el-form-item label="疾病类型">
+              <span class="readonly-text">{{ form.diseasePName }}</span>
             </el-form-item>
-        <el-form-item label="诊疗结果" prop="result">
+          </el-col>
-          <el-input v-model="form.result" placeholder="请输入诊疗结果" />
+          <el-col :span="12">
+            <el-form-item label="子疾病">
+              <span class="readonly-text">{{ form.diseaseName }}</span>
             </el-form-item>
-        <el-form-item label="开始时间" prop="begindate">
+          </el-col>
-          <el-date-picker clearable
+        </el-row>
-            v-model="form.begindate"
+
-            type="date"
+        <el-row :gutter="20">
-            value-format="YYYY-MM-DD"
+          <el-col :span="12">
-            placeholder="请选择开始时间">
+            <el-form-item label="开始时间">
-          </el-date-picker>
+              <span class="readonly-text">{{ form.begindate }}</span>
             </el-form-item>
+          </el-col>
+          <el-col :span="12">
             <el-form-item label="结束时间" prop="enddate">
-          <el-date-picker clearable
+              <el-date-picker v-model="form.enddate" type="date" value-format="YYYY-MM-DD" style="width: 100%" />
-            v-model="form.enddate"
-            type="date"
-            value-format="YYYY-MM-DD"
-            placeholder="请选择结束时间">
-          </el-date-picker>
             </el-form-item>
-        <el-form-item label="治疗天数" prop="treatDay">
+          </el-col>
-          <el-input v-model="form.treatDay" placeholder="请输入治疗天数" />
+          <el-col :span="12">
+            <el-form-item label="治疗天数">
+              <span class="readonly-text">{{ form.treatDay }} 天</span>
             </el-form-item>
-        <el-form-item label="羊舍id" prop="sheepfoldId">
+          </el-col>
-          <el-input v-model="form.sheepfoldId" placeholder="请输入羊舍id" />
+          <el-col :span="24">
+            <el-form-item label="诊疗结果">
+              <el-select v-model="form.result" clearable placeholder="请选择诊疗结果">
+                <el-option v-for="r in diag_result" :key="r.value" :label="r.label" :value="r.value" />
+              </el-select>
             </el-form-item>
+          </el-col>
+          <el-col :span="24">
+            <el-form-item label="羊舍">
+              <el-select v-model="form.sheepfoldId" clearable placeholder="请选择羊舍" filterable>
+                <el-option v-for="s in sheepfoldOptions" :key="s.value" :label="s.label" :value="s.value" />
+              </el-select>
+            </el-form-item>
+          </el-col>
+
+          <el-col :span="24">
+            <el-form-item label="备注" prop="remark">
+              <el-input v-model="form.remark" type="textarea" :rows="3" placeholder="请输入备注信息" />
+            </el-form-item>
+          </el-col>
+        </el-row>
       </el-form>
+
       <template #footer>
         <div class="dialog-footer">
-          <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="cancel">取 消</el-button>
+          <el-button type="primary" @click="submitForm">确 定</el-button>
         </div>
       </template>
     </el-dialog>
   </div>
 </template>
-
 <script setup name="Diagnosis">
-import { listDiagnosis, getDiagnosis, delDiagnosis, addDiagnosis, updateDiagnosis } from "@/api/biosafety/diagnosis"
+import { listDiagnosis, getDiagnosis, delDiagnosis, updateDiagnosis } from '@/api/biosafety/diagnosis'
+import { listSheepfold_management } from "@/api/fileManagement/sheepfold_management"
+import { getCurrentInstance, onMounted, reactive, ref, toRefs, watch } from 'vue'
+import { listDisease } from '@/api/biosafety/disease'
 
 const { proxy } = getCurrentInstance()
+const { sheep_gender, diag_result } = proxy.useDict("sheep_gender", "diag_result")
 
+/* 列表数据 */
 const diagnosisList = ref([])
 const open = ref(false)
 const loading = ref(true)
@@ -225,50 +220,86 @@ const ids = ref([])
 const single = ref(true)
 const multiple = ref(true)
 const total = ref(0)
-const title = ref("")
+const title = ref('')
 const daterangeDatetime = ref([])
 
+/* 下拉数据源 */
+const sheepfoldOptions = ref([])
+
 const data = reactive({
   form: {},
   queryParams: {
     pageNum: 1,
     pageSize: 10,
-    sheepId: null,
+    sheepNo: null,
     datetime: null,
     diseasePid: null,
     diseaseId: null,
     result: null,
     treatDay: null,
-    sheepfoldId: null,
+    sheepfoldId: null
   },
   rules: {
+    enddate: [
+      {
+        validator: (rule, value, callback) => {
+          if (!value) {
+            callback(new Error('请选择结束时间'))
+          } else if (new Date(value) < new Date(form.value.begindate)) {
+            callback(new Error('结束时间不能早于开始时间'))
+          } else {
+            callback()
+          }
+        },
+        trigger: 'change'
+      }
+    ]
   }
 })
 
 const { queryParams, form, rules } = toRefs(data)
 
-/** 查询诊疗结果列表 */
+const pDiseaseOptions = ref([])
+const cDiseaseOptions = ref([])
+
+/* 疾病下拉 */
+function getDiseases() {
+  listDisease().then(response => {
+    const diseases = proxy.handleTree(response.data, "id", "pid")
+    pDiseaseOptions.value = diseases.filter(item => item.pid === 0)
+  })
+}
+
+function handleDiseaseTypeChange(parentId) {
+  if (!parentId) {
+    cDiseaseOptions.value = []
+    return
+  }
+  listDisease({ pid: parentId }).then(response => {
+    cDiseaseOptions.value = response.data
+  })
+}
+
+/* 查询列表 */
 function getList() {
   loading.value = true
   queryParams.value.params = {}
-  if (null != daterangeDatetime && '' != daterangeDatetime) {
+  if (daterangeDatetime.value && daterangeDatetime.value.length) {
-    queryParams.value.params["beginDatetime"] = daterangeDatetime.value[0]
+    queryParams.value.params.beginDatetime = daterangeDatetime.value[0]
-    queryParams.value.params["endDatetime"] = daterangeDatetime.value[1]
+    queryParams.value.params.endDatetime = daterangeDatetime.value[1]
   }
-  listDiagnosis(queryParams.value).then(response => {
+  listDiagnosis(queryParams.value).then((response) => {
     diagnosisList.value = response.rows
     total.value = response.total
     loading.value = false
   })
 }
 
-// 取消按钮
+/* 取消/重置 */
 function cancel() {
   open.value = false
   reset()
 }
-
-// 表单重置
 function reset() {
   form.value = {
     id: null,
@@ -280,93 +311,108 @@ function reset() {
     parity: null,
     diseasePid: null,
     diseaseId: null,
-    result: null,
+    result: '',
     begindate: null,
     enddate: null,
     treatDay: null,
-    sheepfoldId: null,
+    sheepfoldId: null
-    createBy: null,
-    createTime: null
   }
-  proxy.resetForm("diagnosisRef")
+  proxy.resetForm('diagnosisRef')
 }
 
-/** 搜索按钮操作 */
+/* 搜索 / 重置 */
 function handleQuery() {
   queryParams.value.pageNum = 1
   getList()
 }
-
-/** 重置按钮操作 */
 function resetQuery() {
   daterangeDatetime.value = []
-  proxy.resetForm("queryRef")
+  proxy.resetForm('queryRef')
   handleQuery()
 }
 
-// 多选框选中数据
+/* 多选 */
 function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.id)
+  ids.value = selection.map((item) => item.id)
-  single.value = selection.length != 1
+  single.value = selection.length !== 1
   multiple.value = !selection.length
 }
 
-/** 新增按钮操作 */
+/* 修改 */
-function handleAdd() {
-  reset()
-  open.value = true
-  title.value = "添加诊疗结果"
-}
-
-/** 修改按钮操作 */
 function handleUpdate(row) {
   reset()
   const _id = row.id || ids.value
-  getDiagnosis(_id).then(response => {
+  getDiagnosis(_id).then((response) => {
     form.value = response.data
     open.value = true
-    title.value = "修改诊疗结果"
+    title.value = '修改诊疗结果'
   })
 }
 
-/** 提交按钮 */
+/* 提交 */
 function submitForm() {
-  proxy.$refs["diagnosisRef"].validate(valid => {
+  proxy.$refs.diagnosisRef.validate((valid) => {
     if (valid) {
-      if (form.value.id != null) {
+      updateDiagnosis(form.value).then(() => {
-        updateDiagnosis(form.value).then(response => {
+        proxy.$modal.msgSuccess('修改成功')
-          proxy.$modal.msgSuccess("修改成功")
         open.value = false
         getList()
       })
-      } else {
-        addDiagnosis(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
-      }
     }
   })
 }
 
-/** 删除按钮操作 */
+/* 删除 */
 function handleDelete(row) {
   const _ids = row.id || ids.value
-  proxy.$modal.confirm('是否确认删除诊疗结果编号为"' + _ids + '"的数据项？').then(function() {
+  proxy
-    return delDiagnosis(_ids)
+    .$modal.confirm('是否确认删除诊疗结果编号为"' + _ids + '"的数据项？')
-  }).then(() => {
+    .then(() => delDiagnosis(_ids))
+    .then(() => {
       getList()
-    proxy.$modal.msgSuccess("删除成功")
+      proxy.$modal.msgSuccess('删除成功')
-  }).catch(() => {})
+    })
+    .catch(() => { })
 }
 
-/** 导出按钮操作 */
+/* 导出 */
 function handleExport() {
-  proxy.download('diagnosis/diagnosis/export', {
+  proxy.download(
-    ...queryParams.value
+    'diagnosis/diagnosis/export',
-  }, `diagnosis_${new Date().getTime()}.xlsx`)
+    { ...queryParams.value },
+    `diagnosis_${new Date().getTime()}.xlsx`
+  )
 }
 
+/* 🔥 监听 enddate 变化，自动计算治疗天数 */
+watch(() => form.value.enddate, (newVal) => {
+  if (newVal && form.value.begindate) {
+    const start = new Date(form.value.begindate)
+    const end = new Date(newVal)
+    const diffTime = Math.abs(end - start)
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+    form.value.treatDay = diffDays
+  } else {
+    form.value.treatDay = 0
+  }
+})
+
+/* 🔥 可选：监听 begindate 变化，重新计算天数 */
+watch(() => form.value.begindate, () => {
+  if (form.value.enddate) {
+    const start = new Date(form.value.begindate)
+    const end = new Date(form.value.enddate)
+    const diffTime = Math.abs(end - start)
+    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+    form.value.treatDay = diffDays
+  }
+})
+
+onMounted(() => {
   getList()
+  getDiseases()
+  listSheepfold_management().then(res => {
+    sheepfoldOptions.value = res.rows.map(item => ({ value: item.id, label: item.sheepfoldName }))
+  })
+})
 </script>