标本出入库页面

src/views/system/Inner/iker.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <el-input v-model="searchQuery" placeholder="输入申请人、标本名称或编号" style="width: 300px; margin-bottom: 20px" @input="handleSearch" />
+    <el-table :data="filteredData" border>
+      <el-table-column prop="applicant" label="申请人" />
+      <el-table-column prop="requestTime" label="申请时间" />
+      <el-table-column prop="specimenName" label="标本名称" />
+      <el-table-column prop="specimenNumber" label="标本编号" />
+      <el-table-column prop="purpose" label="用途" />
+      <el-table-column prop="status" label="审核状态" />
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <el-button type="primary" @click="handleReview(row)">审核</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <el-dialog v-model="showDialog" title="审核出库申请">
+      <p>申请人: {{ selectedRecord?.applicant }}</p>
+      <p>标本名称: {{ selectedRecord?.specimenName }}</p>
+      <p>标本编号: {{ selectedRecord?.specimenNumber }}</p>
+      <p>用途: {{ selectedRecord?.purpose }}</p>
+      <el-input v-model="rejectReason" placeholder="驳回原因（可选）" style="margin-top: 20px" />
+      <template #footer>
+        <el-button @click="showDialog = false">取消</el-button>
+        <el-button type="danger" @click="handleReject">驳回</el-button>
+        <el-button type="primary" @click="handleApprove">通过</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const data = ref([
+  { id: 1, applicant: '用户A', requestTime: '2023-10-01', specimenName: '标本1', specimenNumber: '001', purpose: '实验', status: '待审核' },
+  { id: 2, applicant: '用户B', requestTime: '2023-10-02', specimenName: '标本2', specimenNumber: '002', purpose: '研究', status: '待审核' },
+]);
+
+const searchQuery = ref('');
+const showDialog = ref(false);
+const selectedRecord = ref(null);
+const rejectReason = ref('');
+
+const filteredData = computed(() => {
+  return data.value.filter(item =>
+    item.applicant.includes(searchQuery.value) ||
+    item.specimenName.includes(searchQuery.value) ||
+    item.specimenNumber.includes(searchQuery.value)
+  );
+});
+
+const handleReview = (row) => {
+  selectedRecord.value = row;
+  showDialog.value = true;
+};
+
+const handleApprove = () => {
+  selectedRecord.value.status = '已通过';
+  showDialog.value = false;
+};
+
+const handleReject = () => {
+  selectedRecord.value.status = '已驳回';
+  console.log('驳回原因:', rejectReason.value);
+  showDialog.value = false;
+};
+</script>

src/views/system/Inner/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <el-input v-model="searchQuery" placeholder="输入名称、编号或存放位置" style="width: 300px; margin-bottom: 20px" @input="handleSearch" />
+    <el-table :data="filteredData" border>
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="number" label="编号" />
+      <el-table-column prop="location" label="存放位置" />
+      <el-table-column label="图片">
+        <template #default="{ row }">
+          <el-image :src="row.image" style="width: 50px; height: 50px" />
+        </template>
+      </el-table-column>
+      <el-table-column prop="returnBy" label="退还人" />
+      <el-table-column prop="returnTime" label="退还时间" />
+      <el-table-column prop="receiver" label="点收人" />
+      <el-table-column prop="note" label="备注" />
+      <el-table-column prop="status" label="标本情况" />
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <el-button type="primary" @click="handleReturn(row)">入库</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const data = ref([
+  { id: 1, name: '标本1', number: '001', location: 'A1', image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.r6v8jNnunKolS8G2Yt1PGAHaE7?rs=1&pid=ImgDetMain', returnBy: '用户A', returnTime: '2023-10-01', receiver: '管理员', note: '完好', status: '正常' },
+  { id: 2, name: '标本2', number: '002', location: 'B2', image: 'https://img.redocn.com/sheying/20180223/sanyechonghuashibiaoben_9213393.jpg', returnBy: '用户B', returnTime: '2023-10-02', receiver: '管理员', note: '轻微损坏', status: '需修复' },
+]);
+
+const searchQuery = ref('');
+
+const filteredData = computed(() => {
+  return data.value.filter(item =>
+    item.name.includes(searchQuery.value) ||
+    item.number.includes(searchQuery.value) ||
+    item.location.includes(searchQuery.value)
+  );
+});
+
+const handleReturn = (row) => {
+  console.log('入库标本:', row);
+};
+</script>

src/views/system/Out/iker.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <!-- 搜索栏 -->
+    <el-input
+      v-model="searchQuery"
+      placeholder="输入申请人、标本名称或编号"
+      style="width: 300px; margin-bottom: 20px"
+      @input="handleSearch"
+    />
+
+    <!-- 出库申请列表 -->
+    <el-table :data="filteredData" border>
+      <el-table-column prop="applicant" label="申请人" />
+      <el-table-column prop="requestTime" label="申请时间" />
+      <el-table-column prop="specimenName" label="标本名称" />
+      <el-table-column prop="specimenNumber" label="标本编号" />
+      <el-table-column prop="purpose" label="用途" />
+      <el-table-column prop="status" label="审核状态" />
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <el-button type="primary" @click="handleReview(row)">审核</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <!-- 审核弹窗 -->
+    <el-dialog v-model="showDialog" title="审核出库申请">
+      <p>申请人: {{ selectedRecord?.applicant }}</p>
+      <p>标本名称: {{ selectedRecord?.specimenName }}</p>
+      <p>标本编号: {{ selectedRecord?.specimenNumber }}</p>
+      <p>用途: {{ selectedRecord?.purpose }}</p>
+      <el-input
+        v-if="isRejecting"
+        v-model="rejectReason"
+        placeholder="请输入驳回原因"
+        style="margin-top: 20px"
+      />
+      <template #footer>
+        <el-button @click="showDialog = false">取消</el-button>
+        <el-button type="danger" @click="handleReject">驳回</el-button>
+        <el-button type="primary" @click="handleApprove">通过</el-button>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+// 模拟数据
+const data = ref([
+  {
+    id: 1,
+    applicant: '用户A',
+    requestTime: '2025-01-01',
+    specimenName: '标本1',
+    specimenNumber: '001',
+    purpose: '实验',
+    status: '待审核',
+  },
+  {
+    id: 2,
+    applicant: '用户B',
+    requestTime: '2025-01-01',
+    specimenName: '标本2',
+    specimenNumber: '002',
+    purpose: '研究',
+    status: '待审核',
+  },
+]);
+
+// 搜索关键字
+const searchQuery = ref('');
+
+// 过滤后的数据
+const filteredData = computed(() => {
+  return data.value.filter(
+    (item) =>
+      item.applicant.includes(searchQuery.value) ||
+      item.specimenName.includes(searchQuery.value) ||
+      item.specimenNumber.includes(searchQuery.value)
+  );
+});
+
+// 审核弹窗相关状态
+const showDialog = ref(false);
+const selectedRecord = ref(null);
+const rejectReason = ref('');
+const isRejecting = ref(false);
+
+// 打开审核弹窗
+const handleReview = (row) => {
+  selectedRecord.value = row;
+  showDialog.value = true;
+  isRejecting.value = false; // 重置驳回状态
+  rejectReason.value = ''; // 清空驳回原因
+};
+
+// 通过审核
+const handleApprove = () => {
+  selectedRecord.value.status = '已通过';
+  showDialog.value = false;
+  console.log('通过申请:', selectedRecord.value);
+};
+
+// 驳回审核
+const handleReject = () => {
+  if (!isRejecting.value) {
+    isRejecting.value = true; // 显示驳回原因输入框
+    return;
+  }
+  if (!rejectReason.value) {
+    alert('请输入驳回原因');
+    return;
+  }
+  selectedRecord.value.status = '已驳回';
+  console.log('驳回原因:', rejectReason.value);
+  showDialog.value = false;
+};
+</script>

src/views/system/Out/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <el-input v-model="searchQuery" placeholder="输入名称、编号或存放位置" style="width: 300px; margin-bottom: 20px" @input="handleSearch" />
+    <el-table :data="filteredData" border>
+      <el-table-column prop="name" label="名称" />
+      <el-table-column prop="number" label="编号" />
+      <el-table-column prop="location" label="存放位置" />
+      <el-table-column label="图片">
+        <template #default="{ row }">
+          <el-image :src="row.image" style="width: 50px; height: 50px" />
+        </template>
+      </el-table-column>
+      <el-table-column label="操作">
+        <template #default="{ row }">
+          <el-button type="primary" @click="handleOutbound(row)">出库</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+
+const data = ref([
+  { id: 1, name: '动物标本-001', number: '001', location: ' A1-0001', image: 'https://tse4-mm.cn.bing.net/th/id/OIP-C.r6v8jNnunKolS8G2Yt1PGAHaE7?rs=1&pid=ImgDetMain' },
+  { id: 2, name: '化石标本-001', number: '001', location: ' B2-0001', image: 'https://img.redocn.com/sheying/20180223/sanyechonghuashibiaoben_9213393.jpg' },
+]);
+
+const searchQuery = ref('');
+
+const filteredData = computed(() => {
+  return data.value.filter(item =>
+    item.name.includes(searchQuery.value) ||
+    item.number.includes(searchQuery.value) ||
+    item.location.includes(searchQuery.value)
+  );
+});
+
+const handleOutbound = (row) => {
+  console.log('出库标本:', row);
+};
+</script>