完善 设备领用 用户归还完毕不显示归还按钮

张诺

2025-07-24 9f880b5f6d08ad418ba11f4280505c7a41ec3807

 src/views/equipment/management/index.vue

@@ -49,18 +49,33 @@
          type="danger"
          v-show="activeTab === 'management'"
          @click="handleDelete"
          >删除</el-button
          :disabled="selectedCount === 0"
          >删除 {{ selectedCount > 0 ? `(${selectedCount})` : '' }}</el-button
        >
      </el-row>
       <!-- 表格组件 -->
      <div>
      <div class="table-container">
        <!-- 加载状态 -->
        <el-skeleton v-if="loading" animated>
          <template #template>
            <el-skeleton-item variant="h1" style="width: 40%" />
            <div style="padding: 14px;">
              <el-skeleton-item variant="text" />
              <el-skeleton-item variant="text" />
              <el-skeleton-item variant="text" />
            </div>
          </template>
        </el-skeleton>
        
        <!-- 数据表格 -->
        <data-table
          v-else
          :showOverflowTooltip="false"
          :border="true"
          :columns="columns"
          :loading="loading"
          style="width: 100%; height: calc(100vh - 29em)"
          :show-selection="true"
          :show-selection="activeTab === 'management'"
          :table-data="tableData"
          @edit="handleEdit"
          @viewRow="handleView"
@@ -70,12 +85,27 @@
          :operationsWidth="getOperationsWidth()"
          :customButtons="getCustomButtons()"
        >
          <!-- 空状态插槽 -->
          <template #empty>
            <el-empty 
              :description="`暂无${currentTabConfig?.label || ''}数据`"
              :image-size="120"
            >
              <template #description>
                <p>暂无{{ currentTabConfig?.label || '' }}数据</p>
                <p v-if="queryParams.searchAll" class="text-secondary">
                  尝试调整搜索条件或 
                  <el-button type="primary" link @click="resetQuery">清空搜索</el-button>
                </p>
              </template>
            </el-empty>
          </template>
        </data-table>
      </div>
      <pagination
        v-if="total > 0"
        :layout="'total, prev, pager, next, jumper'"
        :limit="pageSizes"
        :limit="pageSize"
        :page="pageNum"
        :total="total"
        @pagination="handPagination"
@@ -119,7 +149,7 @@
</template>

<script setup>
import { computed, onMounted, reactive, ref, nextTick } from "vue";
import { computed, onMounted, reactive, ref, nextTick, toRefs } from "vue";
import { ElMessage } from "element-plus";
import { Delete, Plus } from "@element-plus/icons-vue";

@@ -138,6 +168,33 @@
} from "@/api/equipment/management/index.js";
import { getUsageRecordList, getUsageDetailList } from "@/api/equipment/requisition/index.js";

// 设备状态枚举
const EQUIPMENT_STATUS = {
  USING: 1,           // 使用中
  PARTIAL_RETURN: 2,  // 部分归还
  RETURNED: 3         // 已归还
};

// 获取状态文本
const getStatusText = (status) => {
  switch(status) {
    case EQUIPMENT_STATUS.USING: return "使用中";
    case EQUIPMENT_STATUS.PARTIAL_RETURN: return "部分归还";
    case EQUIPMENT_STATUS.RETURNED: return "已归还";
    default: return "未知状态";
  }
};

// 获取状态颜色
const getStatusColor = (status) => {
  switch(status) {
    case EQUIPMENT_STATUS.USING: return '#409eff';        // 蓝色
    case EQUIPMENT_STATUS.PARTIAL_RETURN: return '#e6a23c'; // 橙色
    case EQUIPMENT_STATUS.RETURNED: return '#67c23a';     // 绿色
    default: return '#909399';                             // 灰色
  }
};

// 响应式状态管理 - 使用解构和默认值
const initFormState = () => ({ consumables: false });

@@ -150,25 +207,10 @@
  activeTab: "management",
  selectedRows: [],
  tableData: [],
  // 弹窗状态
  dialogs: {
    management: false,
    equipmentRequisition: false,
    usageRecord: false,
    detailTable: false,
  },
  // 详情表格状态
  detailTable: {
    data: [],
    columns: [],
    title: "",
  },
  // 分页状态
  pagination: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
  pageNum: 1,
  pageSize: 10,
  total: 0,
  // 查询参数
  queryParams: {
    searchAll: "",
@@ -185,11 +227,20 @@
  activeTab,
  selectedRows,
  tableData,
  dialogs,
  detailTable,
  pagination,
  pageNum,
  pageSize,
  total,
  queryParams,
} = toRefs(state);

// 添加缺失的响应式变量
const manaDialog = ref(false);
const equipmentRequisitionDialog = ref(false);
const usageRecordDialog = ref(false);
const dialogTableVisible = ref(false);
const dialogTableTitle = ref('');
const dialogTableData = ref([]);
const dialogTableColumns = ref([]);

// 标签页配置 - 便于后续扩展
const tabsConfig = {
@@ -229,37 +280,14 @@
        prop: "equipmentStatus",
        label: "使用状态",
        minWidth: 100,
        formatter: (row) => (row.equipmentStatus == 1 ? "使用中" : "已归还"),
        formatter: (row) => getStatusText(row.equipmentStatus),
        cellStyle: (row) => ({ color: getStatusColor(row.equipmentStatus) }),
      },
      
      { prop: "usageStartTime", label: "使用开始时间", minWidth: 100 },
      { prop: "usageEndTime", label: "使用结束时间", minWidth: 100 },
      { prop: "remarks", label: "备注", minWidth: 100 },
    ],
  },
  // usageRecord:{
  //   label: "领用记录",
  //   searchPlaceholder: "设备编号/设备名称/规格型号",
  //   showSearch: true,
  //   api: getManagementList,
  //   deleteApi: delEquipment,
  //   columns: [
  //     { prop: "equipmentId", label: "设备编号", minWidth: 100 },
  //     { prop: "equipmentName", label: "设备名称", minWidth: 100 },
  //     { prop: "quantity", label: "数量", minWidth: 100 },
  //     { prop: "specification", label: "规格型号", minWidth: 100 },
  //     {
  //       prop: "usageStatus",
  //       label: "使用状态",
  //       minWidth: 100,
  //       formatter: (row) => row.usageStatus == 1 ? "启用" : "禁用"
  //     },
  //     { prop: "purchaseDate", label: "采购日期", minWidth: 100 },
  //     { prop: "purchasePrice", label: "采购价格", minWidth: 100 },
  //   ]
  // },

  // 后续可以在这里添加新的标签页配置
};

// 标签页数据
@@ -311,8 +339,8 @@
      type: 'success',
      size: 'small',
      link: true,
      show: (row) => row.equipmentStatus == 1 || row.equipmentStatus == 2, // 只有使用中的设备才显示归还按钮
      disabled: (row) => false,
      show: (row) => row.equipmentStatus === EQUIPMENT_STATUS.USING || row.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN,
      disabled: (row) => row.equipmentStatus === EQUIPMENT_STATUS.RETURNED,
    });
  }
  
@@ -331,9 +359,20 @@
  }
};
const handleReturn = (row) => {
  // 检查设备状态
  if (row.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
    ElMessage.warning('该设备已归还完成，无需再次归还');
    return;
  }
  
  if (row.equipmentStatus !== EQUIPMENT_STATUS.USING && row.equipmentStatus !== EQUIPMENT_STATUS.PARTIAL_RETURN) {
    ElMessage.warning('该设备当前状态不支持归还操作');
    return;
  }
  
  form.value = { ...row };
  addOrEdit.value = "return"; // 设置为归还模式
  title.value = `归还设备`;
  title.value = `归还设备 - ${row.equipmentName || ''}`;
  copyForm.value = { ...row };
  equipmentRequisitionDialog.value = true;
  console.log("归还设备：", row);
@@ -353,13 +392,13 @@
  loading.value = true;
  tableData.value = [];
  pageNum.value = 1;
  pageSizes.value = 10;
  pageSize.value = 10;
  total.value = 0;
  queryParams.searchAll = "";
  queryParams.value.searchAll = "";
};

const resetQuery = () => {
  queryParams.searchAll = "";
  queryParams.value.searchAll = "";
  pageNum.value = 1;
  getList();
};
@@ -476,7 +515,7 @@

const handPagination = (val) => {
  pageNum.value = val.page;
  pageSizes.value = val.limit;
  pageSize.value = val.limit;
  getList();
};

@@ -489,8 +528,8 @@
  deleteApi: () => currentTabConfig.value.deleteApi,
  selectedRows: selectedRows,
  getList: () => getList(),
  tableData: tableData,
  total: total,
  tableData,
  total,
  confirmText: "确认删除选中的数据吗？",
  successText: "删除成功",
});
@@ -508,10 +547,14 @@

// 设备领用弹窗提交处理
const onEquipmentRequisitionSubmit = (formData) => {
  if (formData.equipmentStatus == 2) {
    ElMessage.success("设备归还成功");
  } else {
  if (formData.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
    ElMessage.success("设备已完全归还");
  } else if (formData.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN) {
    ElMessage.success("设备部分归还成功");
  } else if (formData.equipmentStatus === EQUIPMENT_STATUS.USING) {
    ElMessage.success("设备领用成功");
  } else {
    ElMessage.success("操作成功");
  }
  equipmentRequisitionDialog.value = false;
  nextTick(() => {
@@ -526,8 +569,8 @@
    loading.value = true;
    const apiParams = {
      current: pageNum.value,
      pageSize: pageSizes.value,
      searchAll: queryParams.searchAll,
      pageSize: pageSize.value,
      searchAll: queryParams.value.searchAll,
    };

    const { data, code } = await currentTabConfig.value.api(apiParams);
@@ -603,4 +646,33 @@
.main-container {
  background: red !important;
}

/* 设备状态样式 */
.status-using {
  color: #409eff;
  font-weight: 500;
}

.status-partial-return {
  color: #e6a23c;
  font-weight: 500;
}

.status-returned {
  color: #67c23a;
  font-weight: 500;
}

.status-unknown {
  color: #909399;
  font-weight: 500;
}

/* 状态标签样式 */
:deep(.el-table .cell .status-tag) {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
}
</style>