src/views/equipment/management/index.vue
@@ -30,16 +30,32 @@
      <!-- 操作按钮区 -->
      <el-row :gutter="24" class="table-toolbar">
        <el-button :icon="Plus" type="primary" @click="handleAdd"
          >新建</el-button
        <el-button
          :icon="Plus"
          type="primary"
          v-show="activeTab === 'management'"
          @click="handleAdd"
          >设备新增</el-button
        >
        <el-button :icon="Delete" type="danger" @click="handleDelete"
        <el-button
          :icon="Plus"
          type="primary"
          v-show="activeTab === 'equipmentRequisition'"
          @click="handleAdd"
          >领用</el-button
        >
        <el-button
          :icon="Delete"
          type="danger"
          v-show="activeTab === 'management'"
          @click="handleDelete"
          >删除</el-button
        >
      </el-row>
      <!-- 表格组件 -->
      <div>
        <data-table
          :showOverflowTooltip="false"
          :border="true"
          :columns="columns"
          :loading="loading"
@@ -72,8 +88,7 @@
              </el-tag>
            </template>
            <template v-else>
              <el-tag size="small" type="primary">
              </el-tag>
              <el-tag size="small" type="primary"> </el-tag>
            </template>
          </template>
        </data-table>
@@ -87,7 +102,7 @@
        @pagination="handPagination"
      />
      <managementDialog
      v-if="activeTab == 'management'"
        v-if="activeTab == 'management'"
        v-model:copyForm="copyForm"
        v-model:managementFormDialog="manaDialog"
        :addOrEdit="addOrEdit"
@@ -99,22 +114,24 @@
        v-model="equipmentRequisitionDialog"
        :formData="form"
        :maxQuantity="getMaxQuantity()"
        :addOrEdit="addOrEdit"
        :equipmentStatus="form.equipmentStatus"
        @submit="onEquipmentRequisitionSubmit"
      />
      <UsageRecord
      <!-- <UsageRecord
        v-if="activeTab == 'usageRecord'"
        v-model:copyForm="copyForm"
        v-model:usageRecordDialog="usageRecordDialog"
        :addOrEdit="addOrEdit"
        :form="form"
        @submit="getList"
      />
      /> -->
    </el-card>
  </div>
</template>
<script setup>
import { computed, onMounted, reactive, ref } from "vue";
import { computed, onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import { Delete, Plus } from "@element-plus/icons-vue";
@@ -127,7 +144,10 @@
// API 服务导入
import { useDelete } from "@/hooks/useDelete.js";
import { getManagementList, delEquipment } from "@/api/equipment/management/index.js";
import {
  getManagementList,
  delEquipment,
} from "@/api/equipment/management/index.js";
import { getUsageRecordList } from "@/api/equipment/requisition/index.js";
// 响应式状态管理
@@ -150,7 +170,7 @@
// 查询参数
const queryParams = reactive({
  searchAll: ""
  searchAll: "",
});
// 标签页配置 - 便于后续扩展
@@ -164,60 +184,56 @@
    columns: [
      { prop: "equipmentNo", label: "设备编号", minWidth: 100 },
      { prop: "equipmentName", label: "设备名称", minWidth: 100 },
      { prop: "quantity", label: "数量", minWidth: 100 },
      { prop: "quantity", label: "总数量", minWidth: 100 },
      { prop: "usedNo", 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 },
    ]
    ],
  },
  equipmentRequisition:{
  equipmentRequisition: {
    label: "设备领用",
    searchPlaceholder: "设备编号/设备名称/规格型号",
    showSearch: true,
    api: getUsageRecordList,
    deleteApi: null,
    columns: [
      { prop: "userId", label: "领用人", minWidth: 100 },
      { prop: "equipmentId", label: "设备ID", minWidth: 100 },
      { prop: "userName", label: "领用人", minWidth: 100 },
      { prop: "equipmentNo", label: "设备编号", minWidth: 100 },
      { prop: "equipmentName", label: "设备名称", minWidth: 100 },
      { prop: "usageQuantity", label: "领用数量", minWidth: 100 },
      {
        prop: "equipmentStatus",
        label: "使用状态",
      {
        prop: "equipmentStatus",
        label: "使用状态",
        minWidth: 100,
        formatter: (row) => row.usageStatus == 1 ? "启用" : "禁用"
        formatter: (row) => (row.equipmentStatus == "0" ? "使用中" : "已归还"),
      },
      { 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 },
    ]
  },
  // 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 },
  //   ]
  // },
  // 后续可以在这里添加新的标签页配置
};
@@ -226,7 +242,7 @@
const tabs = reactive(
  Object.entries(tabsConfig).map(([name, config]) => ({
    name,
    label: config.label
    label: config.label,
  }))
);
@@ -234,8 +250,12 @@
const currentTabConfig = computed(() => tabsConfig[activeTab.value]);
// 计算属性
const searchPlaceholder = computed(() => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息");
const shouldShowSearch = computed(() => currentTabConfig.value?.showSearch || false);
const searchPlaceholder = computed(
  () => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息"
);
const shouldShowSearch = computed(
  () => currentTabConfig.value?.showSearch || false
);
const columns = computed(() => currentTabConfig.value?.columns || []);
const selectedCount = computed(() => selectedRows.value.length);
@@ -321,7 +341,6 @@
  selectedRows.value = selection;
};
// 删除处理
const { handleDeleteBatch: handleDelete } = useDelete({
  deleteApi: () => currentTabConfig.value.deleteApi,
@@ -336,7 +355,9 @@
// 获取设备最大可领用数量
const getMaxQuantity = () => {
  if (form.value.equipmentId) {
    const equipment = tableData.value.find(item => item.equipmentId === form.value.equipmentId);
    const equipment = tableData.value.find(
      (item) => item.equipmentId === form.value.equipmentId
    );
    return equipment ? equipment.quantity : null;
  }
  return null;
@@ -344,9 +365,17 @@
// 设备领用弹窗提交处理
const onEquipmentRequisitionSubmit = (formData) => {
  ElMessage.success('设备领用成功');
  console.log("设备领用提交数据:", formData);
  if (formData.equipmentStatus == "1") {
    ElMessage.success("设备归还成功");
  } else {
    ElMessage.success("设备领用成功");
  }
  equipmentRequisitionDialog.value = false;
  getList();
  nextTick(() => {
    form.value = {};
    getList();
  });
};
// 数据获取
@@ -362,7 +391,7 @@
    const { data, code } = await currentTabConfig.value.api(apiParams);
    if (code !== 200) {
      ElMessage.error("获取数据失败:" + (data?.msg || "未知错误"));
      // ElMessage.error("获取数据失败:" + (data?.msg || "未知错误"));
      return;
    }
@@ -401,7 +430,7 @@
  flex-wrap: wrap;
  gap: 10px;
}
.app-container{
.app-container {
  padding: 18px !important;
}
/* 响应式表格 */