修改2.0

src/views/biosafety/medicine/index.vue

@@ -12,7 +12,7 @@
           <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
       </el-form-item>
-      <el-form-item label="使用方法" prop="medicType">
+      <el-form-item label="使用方法" prop="usageId">
         <el-select v-model="queryParams.usageId" placeholder="请选择药品使用方法" clearable style="width: 180px">
           <el-option v-for="item in usageOptions" :key="item.value" :label="item.label" :value="item.value" />
         </el-select>
@@ -25,8 +25,7 @@
 
     <el-row :gutter="10" class="mb8">
       <el-col :span="1.5">
-        <el-button type="primary" plain icon="Plus" @click="handleAdd"
-          v-hasPermi="['system:medicine:add']">新增</el-button>
+        <el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['system:medicine:add']">新增</el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"
@@ -36,15 +35,15 @@
         <el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"
           v-hasPermi="['system:medicine:remove']">删除</el-button>
       </el-col>
-      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" />
     </el-row>
 
     <el-table v-loading="loading" :data="medicineList" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center" />
       <el-table-column label="药品编号" align="center" prop="medica" />
       <el-table-column label="药品名称" align="center" prop="name" />
-      <el-table-column label="药品类型" align="center" prop="medicType" :formatter="formatType"></el-table-column>
-      <el-table-column label="使用方法" align="center" prop="usage" :formatter="formatUsage"></el-table-column>
+      <el-table-column label="药品类型" align="center" prop="medicType" :formatter="formatType" />
+      <el-table-column label="使用方法" align="center" prop="usageId" :formatter="formatUsage" />
       <el-table-column label="备注" align="center" prop="comment" />
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template #default="scope">
@@ -57,7 +56,7 @@
     </el-table>
 
     <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
-      v-model:limit="queryParams.pageSize" @pagination="getList" />
+                v-model:limit="queryParams.pageSize" @pagination="getList" />
 
     <!-- 添加或修改药品对话框 -->
     <el-dialog :title="title" v-model="open" width="500px" append-to-body>
@@ -73,13 +72,11 @@
             <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-        <el-form-item label="使用方法" prop="medicType">
+        <el-form-item label="使用方法" prop="usageId">
           <el-select v-model="form.usageId" placeholder="请选择药品使用方法">
             <el-option v-for="item in usageOptions" :key="item.value" :label="item.label" :value="item.value" />
           </el-select>
         </el-form-item>
-
-
         <el-form-item label="备注" prop="comment">
           <el-input v-model="form.comment" placeholder="请输入备注" :rows="3" type="textarea" />
         </el-form-item>
@@ -96,8 +93,9 @@
 
 <script setup name="Medicine">
 import { listMedicine, getMedicine, delMedicine, addMedicine, updateMedicine } from "@/api/biosafety/medicine"
-import {listType} from "@/api/biosafety/type"
-import {listUsage} from "@/api/biosafety/usage"
+import { listType } from "@/api/biosafety/type"
+import { listUsage } from "@/api/biosafety/usage"
+import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
 
 const { proxy } = getCurrentInstance()
 
@@ -121,59 +119,41 @@ const data = reactive({
     medicType: null,
     usageId: null,
   },
-  rules: {
-  }
+  rules: {}
 })
 
 const { queryParams, form, rules } = toRefs(data)
-// 定义药品类型
-const typeOptions = ref()
-// 定义药品使用方法
-const usageOptions = ref()
-
 
+// ✅ 默认为空数组，避免 undefined
+const typeOptions = ref([])
+const usageOptions = ref([])
 
 /* 查询药品类型 */
 function getTypeOptions() {
   listType().then(response => {
-    typeOptions.value = response.rows.map(item => ({
+    typeOptions.value = response.rows?.map(item => ({
       value: item.id,
       label: item.name
-    }))
+    })) || []
   })
 }
+
 /* 查询药品使用方法 */
 function getUsageOptions() {
   listUsage().then(response => {
-    usageOptions.value = response.rows.map(item => ({
+    usageOptions.value = response.rows?.map(item => ({
       value: item.id,
       label: item.name
-
-    }))
+    })) || []
   })
 }
-const formatType = (row) => {
-  let result = ''
-  for (const item of typeOptions.value) {
-    if (item.value === row.medicType) {
-      result = item.label
-      break
-    }
-  }
-  return result
-}
 
-const formatUsage = (row) => {
-  let result = ''
-  for (const item of usageOptions.value) {
-    if (item.value === row.usageId) {
-      result = item.label
-      break
-    }
-  }
-  return result
-}
+/* ✅ 安全的 formatter */
+const formatType = (row) =>
+  (typeOptions.value || []).find(item => item.value === row.medicType)?.label ?? row.medicType
 
+const formatUsage = (row) =>
+  (usageOptions.value || []).find(item => item.value === row.usageId)?.label ?? row.usageId
 
 /** 查询药品列表 */
 function getList() {
@@ -184,52 +164,39 @@ function getList() {
     loading.value = false
   })
 }
-// 取消按钮
+
 function cancel() {
   open.value = false
   reset()
 }
 
-// 表单重置
 function reset() {
-  form.value = {
-    id: null,
-    medica: null,
-    name: null,
-    medicType: null,
-    usage: null,
-    comment: null
-  }
+  form.value = { id: null, medica: null, name: null, medicType: null, usageId: null, comment: null }
   proxy.resetForm("medicineRef")
 }
 
-/** 搜索按钮操作 */
 function handleQuery() {
   queryParams.value.pageNum = 1
   getList()
 }
 
-/** 重置按钮操作 */
 function resetQuery() {
   proxy.resetForm("queryRef")
   handleQuery()
 }
 
-// 多选框选中数据
 function handleSelectionChange(selection) {
   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
@@ -240,18 +207,17 @@ function handleUpdate(row) {
   })
 }
 
-/** 提交按钮 */
 function submitForm() {
   proxy.$refs["medicineRef"].validate(valid => {
     if (valid) {
       if (form.value.id != null) {
-        updateMedicine(form.value).then(response => {
+        updateMedicine(form.value).then(() => {
           proxy.$modal.msgSuccess("修改成功")
           open.value = false
           getList()
         })
       } else {
-        addMedicine(form.value).then(response => {
+        addMedicine(form.value).then(() => {
           proxy.$modal.msgSuccess("新增成功")
           open.value = false
           getList()
@@ -261,25 +227,21 @@ function submitForm() {
   })
 }
 
-/** 删除按钮操作 */
 function handleDelete(row) {
   const _ids = row.id || ids.value
-  proxy.$modal.confirm('是否确认删除药品编号为"' + _ids + '"的数据项？').then(function () {
-    return delMedicine(_ids)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => { })
+  proxy.$modal.confirm('是否确认删除药品编号为"' + _ids + '"的数据项？')
+    .then(() => delMedicine(_ids))
+    .then(() => {
+      getList()
+      proxy.$modal.msgSuccess("删除成功")
+    })
 }
 
-/** 导出按钮操作 */
 function handleExport() {
-  proxy.download('system/medicine/export', {
-    ...queryParams.value
-  }, `medicine_${new Date().getTime()}.xlsx`)
+  proxy.download('system/medicine/export', { ...queryParams.value }, `medicine_${new Date().getTime()}.xlsx`)
 }
 
 getList()
 getTypeOptions()
 getUsageOptions()
-</script>
+</script>