zhyc-sheep-ui/src/views/biosafety/disinfect/index.vue

<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <el-form :model="queryParams" ref="queryRef" inline v-show="showSearch" label-width="80px">
      <el-form-item label="消毒日期">
        <!-- 1️⃣ 改为 datetimerange -->
        <el-date-picker v-model="daterangeDatetime" type="daterange" range-separator="-" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm" />
      </el-form-item>

      <el-form-item label="消毒方式" prop="way">
        <el-select v-model="queryParams.way" clearable placeholder="请选择消毒方式" filterable style="width: 200px">
          <el-option v-for="item in disinfect_type" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="药品名称" prop="mediName">
        <el-input v-model="queryParams.mediName" placeholder="请输入药品" clearable />
      </el-form-item>
      <el-form-item label="羊舍" prop="sheepfoldId">
        <el-select v-model="queryParams.sheepfoldId" clearable placeholder="请选择羊舍" filterable style="width: 200px">
          <el-option v-for="b in barns" :key="b.id" :label="b.sheepfoldName" :value="b.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="技术员" prop="technician">
        <el-input v-model="queryParams.technician" placeholder="请输入技术员" clearable />
      </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-button type="primary" plain icon="Plus" @click="handleAdd">新增</el-button>
      <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate">修改</el-button>
      <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete">删除</el-button>
      <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
    </el-row>

    <!-- 列表 -->
    <el-table v-loading="loading" :data="disinfectList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="消毒日期" align="center" prop="datetime" width="180">
        <!-- 2️⃣ 显示格式含时分 -->
        <template #default="scope">
          {{ parseTime(scope.row.datetime, '{y}-{m}-{d}') }}
        </template>
      </el-table-column>
      <el-table-column label="羊舍" align="center" prop="sheepfoldName" />
      <el-table-column label="技术员" align="center" prop="technician" />
      <el-table-column label="消毒方式" align="center" prop="way">
        <template #default="scope">
          <dict-tag :options="disinfect_type" :value="scope.row.way" />
        </template>
      </el-table-column>
      <el-table-column label="比例" align="center" prop="ratio" />
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="备注" align="center" prop="comment" />
      <el-table-column label="操作" align="center" width="200">
        <template #default="scope">
          <el-button link type="primary" @click="handleUpdate(scope.row)">修改</el-button>
          <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize" @pagination="getList" />

    <!-- ==================== 新增弹窗 ==================== -->
    <el-dialog :title="titleAdd" v-model="openAdd" width="60%" top="5vh" append-to-body>
      <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="羊舍" prop="sheepfoldIds">
              <el-select v-model="form.sheepfoldIds" multiple collapse-tags placeholder="请选择羊舍" filterable
                style="width: 100%">
                <el-option v-for="b in barns" :key="b.id" :label="b.sheepfoldName" :value="b.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 3️⃣ type=datetime -->
            <el-form-item label="消毒日期" prop="datetime">
              <el-date-picker v-model="form.date" type="datetime" value-format="YYYY-MM-DD"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="处方">
              <el-select v-model="form.prescriptionId" filterable clearable placeholder="请选择处方"
                @change="handleSelectPrescription">
                <el-option v-for="p in presOptions" :key="p.id" :label="p.label" :value="p.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="技术员" prop="technician">
              <el-input v-model="form.technician" placeholder="请输入技术员姓名" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="消毒方式" prop="way">
              <el-select v-model="form.way" clearable placeholder="请选择消毒方式" filterable>
                <el-option v-for="item in disinfect_type" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="比例">
              <el-input v-model="form.ratio" placeholder="请输入比例" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="药品明细">
          <el-button type="primary" icon="Plus" size="small" @click="handleAddDetail">添加药品</el-button>
          <el-table :data="usageDetails" border stripe style="margin-top: 8px">
            <el-table-column label="药品">
              <template #default="scope">
                <el-select v-model="scope.row.mediId" filterable placeholder="请选择药品">
                  <el-option v-for="m in medicines" :key="m.value" :label="m.label" :value="m.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用量" width="160">
              <template #default="scope">
                <el-input-number v-model="scope.row.dosage" :min="0" :precision="1" />
              </template>
            </el-table-column>
            <el-table-column label="单位" width="120">
              <template #default="scope">
                <el-select v-model="scope.row.unit" placeholder="单位">
                  <el-option v-for="u in units" :key="u.value" :label="u.label" :value="u.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用法" width="120">
              <template #default="scope">
                <el-select v-model="scope.row.usageId" placeholder="用法">
                  <el-option v-for="u in usages" :key="u.value" :label="u.label" :value="u.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="生产厂家">
              <template #default="scope">
                <el-input v-model="scope.row.manufacturer" placeholder="生产厂家" />
              </template>
            </el-table-column>
            <el-table-column label="生产批号">
              <template #default="scope">
                <el-input v-model="scope.row.batchNumber" placeholder="批号" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template #default="scope">
                <el-button link type="danger" icon="Delete" @click="usageDetails.splice(scope.$index, 1)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" v-model="form.comment" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="submitAdd">确 定</el-button>
      </template>
    </el-dialog>

    <!-- ==================== 修改弹窗 ==================== -->
    <el-dialog :title="titleEdit" v-model="openEdit" width="60%" top="5vh" append-to-body>
      <el-form ref="editFormRef" :model="editForm" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="羊舍">
              <span>{{ editForm.sheepfoldName }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!-- 4️⃣ 同样 type=datetime -->
            <el-form-item label="消毒日期" prop="datetime">
              <el-date-picker v-model="editForm.datetime" type="date" value-format="YYYY-MM-DD"
                style="width: 100%" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="技术员">
              <el-input v-model="editForm.technician" placeholder="请输入技术员姓名" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="消毒方式">
              <el-select v-model="editForm.way" clearable placeholder="请选择消毒方式" filterable>
                <el-option v-for="item in disinfect_type" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="比例">
              <el-input v-model="editForm.ratio" placeholder="请输入比例" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="药品明细">
          <el-button type="primary" icon="Plus" size="small" @click="handleAddDetailEdit">添加药品</el-button>
          <el-table :data="editDetails" border stripe style="margin-top: 8px">
            <el-table-column label="药品">
              <template #default="scope">
                <el-select v-model="scope.row.mediId" filterable placeholder="请选择药品">
                  <el-option v-for="m in medicines" :key="m.value" :label="m.label" :value="m.value" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用量" width="160">
              <template #default="scope">
                <el-input-number v-model="scope.row.dosage" :min="0" :precision="1" style="width: 120px;" />
              </template>
            </el-table-column>
            <el-table-column label="单位" width="120">
              <template #default="scope">
                <el-select v-model="scope.row.unit" placeholder="单位">
                  <el-option v-for="u in units" :key="u.value" :label="u.label" :value="u.value+''" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="用法" width="120">
              <template #default="scope">
                <el-select v-model="scope.row.usageId" placeholder="用法">
                  <el-option v-for="u in usages" :key="u.value" :label="u.label" :value="u.value+''" />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="生产厂家">
              <template #default="scope">
                <el-input v-model="scope.row.manufacturer" placeholder="生产厂家" />
              </template>
            </el-table-column>
            <el-table-column label="生产批号">
              <template #default="scope">
                <el-input v-model="scope.row.batchNumber" placeholder="批号" />
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template #default="scope">
                <el-button link type="danger" icon="Delete" @click="editDetails.splice(scope.$index, 1)" />
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>

        <el-form-item label="备注">
          <el-input type="textarea" :rows="3" v-model="editForm.comment" placeholder="请输入备注" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="cancelEdit">取 消</el-button>
        <el-button type="primary" @click="submitEdit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Disinfect">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
import { listDisinfect, getDisinfect, delDisinfect, addDisinfect, updateDisinfect } from '@/api/biosafety/disinfect'
import { listPrescription, getPrescription } from '@/api/biosafety/prescription'
import { listUnit } from '@/api/biosafety/unit'
import { listUsage } from '@/api/biosafety/usage'
import { listMedicine } from '@/api/biosafety/medicine'
import request from '@/utils/request'
import { parseTime } from '@/utils/ruoyi'

const { proxy } = getCurrentInstance()
const { disinfect_type } = proxy.useDict('disinfect_type')

/* ---------- 列表 ---------- */
const loading = ref(true)
const showSearch = ref(true)
const total = ref(0)
const disinfectList = ref([])
const daterangeDatetime = ref([])

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  sheepfoldId: null,
  technician: null
})

const ids = ref([])
const single = ref(true)
const multiple = ref(true)

function getList() {
  loading.value = true
  const qp = { ...queryParams }
  qp.params = {}
  if (daterangeDatetime.value?.length) {
    qp.params.beginDatetime = daterangeDatetime.value[0]
    qp.params.endDatetime = daterangeDatetime.value[1]
  }
  listDisinfect(qp).then(res => {
    disinfectList.value = res.rows
    total.value = res.total
    loading.value = false
  })
}

function handleSelectionChange(selection) {
  ids.value = selection.map(item => item.id)
  single.value = selection.length !== 1
  multiple.value = !selection.length
}

function handleQuery() {
  queryParams.pageNum = 1
  getList()
}

function resetQuery() {
  daterangeDatetime.value = []
  proxy.resetForm('queryRef')
  handleQuery()
}

/* ---------- 新增弹窗 ---------- */
const openAdd = ref(false)
const titleAdd = ref('新增消毒记录')

// 5️⃣ 默认当前分钟
const nowMinute = () => {
  const d = new Date()
  const Y = d.getFullYear()
  const M = String(d.getMonth() + 1).padStart(2, '0')
  const D = String(d.getDate()).padStart(2, '0')
  const h = String(d.getHours()).padStart(2, '0')
  const m = String(d.getMinutes()).padStart(2, '0')
  return `${Y}-${M}-${D} ${h}:${m}`
}

const form = reactive({
  id: null,
  technician: '',
  datetime: new Date().toISOString().slice(0, 10),
  way: '',
  ratio: '',
  comment: '',
  prescriptionId: null,
  sheepfoldIds: []
})
const usageDetails = ref([])

function resetAdd() {
  Object.assign(form, {
    id: null,
    technician: '',
    datetime: new Date().toISOString().slice(0, 10),
    way: '',
    ratio: '',
    comment: '',
    prescriptionId: null,
    sheepfoldIds: []
  })
  usageDetails.value = []
}

function handleAdd() {
  resetAdd()
  openAdd.value = true
}

function cancelAdd() {
  openAdd.value = false
}

function submitAdd() {
  proxy.$refs.formRef.validate(valid => {
    if (!valid) return
    const data = {
      ...form,
      datetime: new Date(form.datetime).getTime(),
      usageDetails: usageDetails.value
    }
    addDisinfect(data).then(() => {
      proxy.$modal.msgSuccess('新增成功')
      openAdd.value = false
      getList()
    })
  })
}

/* ---------- 修改弹窗 ---------- */
const openEdit = ref(false)
const titleEdit = ref('修改消毒记录')
const editForm = reactive({
  id: null,
  technician: '',
  datetime: nowMinute(),
  way: '',
  ratio: '',
  comment: '',
  prescriptionId: null,
  sheepfoldIds: []
})
const editDetails = ref([])

function resetEdit() {
  Object.assign(editForm, {
    id: null,
    technician: '',
    datetime: nowMinute(),
    way: '',
    ratio: '',
    comment: '',
    prescriptionId: null,
    sheepfoldIds: []
  })
  editDetails.value = []
}

function handleUpdate(row) {
  resetEdit()
  const id = row.id || ids.value[0]
  getDisinfect(id).then(res => {
    // 后端返回的是时间戳，转成 YYYY-MM-DD HH:mm 字符串方便 el-date-picker 回显
    editForm.datetime = parseTime(res.data.datetime, '{y}-{m}-{d} {h}:{i}')
    Object.assign(editForm, res.data)
    editDetails.value = res.data.usageDetails || []
    openEdit.value = true
  })
}

function cancelEdit() {
  openEdit.value = false
}

function submitEdit() {
  proxy.$refs.editFormRef.validate(valid => {
    if (!valid) return
    const data = {
      ...editForm,
      datetime: new Date(editForm.datetime).getTime(),
      usageDetails: editDetails.value
    }
    updateDisinfect(data).then(() => {
      proxy.$modal.msgSuccess('修改成功')
      openEdit.value = false
      getList()
    })
  })
}

/* ---------- 功能 ---------- */
function handleDelete(row) {
  const _ids = row.id || ids.value
  proxy.$modal.confirm('是否确认删除选中的数据？').then(() => delDisinfect(_ids)).then(() => {
    getList()
    proxy.$modal.msgSuccess('删除成功')
  })
}

function handleExport() {
  proxy.download('biosafety/disinfect/export', { ...queryParams }, `disinfect_${Date.now()}.xlsx`)
}

/* ---------- 下拉数据 ---------- */
const barns = ref([])
const presOptions = ref([])
const units = ref([])
const usages = ref([])
const medicines = ref([])

/* 校验规则 */
const rules = {
  sheepfoldIds: [{ required: true, message: '请选择羊舍', trigger: 'change' }],
  technician: [{ required: true, message: '请输入技术员', trigger: 'blur' }],
  way: [{ required: true, message: '请选择消毒方式', trigger: 'change' }],
  datetime: [{ required: true, message: '请选择日期', trigger: 'change' }]
}

/* 处方选择事件 */
function handleSelectPrescription(id) {
  if (!id) return
  getPrescription(id).then(res => {
    usageDetails.value = res.data?.swPresDetailList?.map(i => ({
      mediId: i.mediId,
      dosage: i.dosage,
      unit: i.unitId,
      usageId: i.usageId
    })) || []
  })
}
function handleSelectPrescriptionEdit(id) {
  if (!id) return
  getPrescription(id).then(res => {
    editDetails.value = res.data?.swPresDetailList?.map(i => ({
      mediId: i.mediId,
      dosage: i.dosage,
      unit: i.unitId,
      usageId: i.usageId
    })) || []
  })
}

/* 明细添加行 */
function handleAddDetail() {
  usageDetails.value.push({ mediId: null, dosage: 0, unit: null, usageId: null, manufacturer: null, batchNumber: null })
}
function handleAddDetailEdit() {
  editDetails.value.push({ mediId: null, dosage: 0, unit: null, usageId: null, manufacturer: null, batchNumber: null })
}

/* ---------- 初始加载 ---------- */
onMounted(() => {
  getList()
  /* 本地羊舍下拉 */
  request({ url: '/sheepfold_management/sheepfold_management/list', method: 'get' }).then(res => {
    barns.value = res.rows
  })
  listPrescription({ status: 1, persType: 1 }).then(res => {
    presOptions.value = res.rows.map(item => ({ id: item.id, label: item.name }))
  })
  listUnit().then(res => {
    units.value = res.rows.map(item => ({ value: item.id, label: item.name }))
  })
  listUsage().then(res => {
    usages.value = res.rows.map(item => ({ value: item.id, label: item.name }))
  })
  listMedicine().then(res => {
    medicines.value = res.rows.map(item => ({ value: item.id, label: item.name }))
  })
})
</script>