1、新增弹窗表格 2、完善设备管理

zhang_12370

2025-07-23 ba07ace535232e5ea77cf0a89cd1c079895e1441

 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"
@@ -49,33 +65,11 @@
          @edit="handleEdit"
          @viewRow="handleView"
          @selection-change="handleSelectionChange"
          :operations="['edit', 'viewRow']"
          :operationsWidth="200"
          @custom-click="handleCustomButtonClick"
          :operations="getTableOperations()"
          :operationsWidth="getOperationsWidth()"
          :customButtons="getCustomButtons()"
        >
          <!-- 字段名称列的自定义插槽 - 显示为标签 -->
          <template
            v-if="activeTab === 'coalQualityMaintenance'"
            #fieldIds="{ row }"
          >
            <template
              v-if="
                typeof row.fieldIds === 'string' && row.fieldIds.includes(',')
              "
            >
              <el-tag
                v-for="(field, index) in row.fieldIds.split(',')"
                :key="index"
                size="small"
                style="margin-right: 4px; margin-bottom: 2px"
                type="primary"
              >
              </el-tag>
            </template>
            <template v-else>
              <el-tag size="small" type="primary">
              </el-tag>
            </template>
          </template>
        </data-table>
      </div>
      <pagination
@@ -87,7 +81,7 @@
        @pagination="handPagination"
      />
      <managementDialog
      v-if="activeTab == 'management'"
        v-if="activeTab == 'management'"
        v-model:copyForm="copyForm"
        v-model:managementFormDialog="manaDialog"
        :addOrEdit="addOrEdit"
@@ -99,22 +93,33 @@
        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"
      /> -->
      
      <!-- 查看详情弹窗 -->
      <DilogTable
        v-model="dialogTableVisible"
        :title="dialogTableTitle"
        :table-data="dialogTableData"
        :columns="dialogTableColumns"
        width="60%"
      />
    </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";

@@ -123,35 +128,68 @@
import Pagination from "@/components/Pagination";
import managementDialog from "./mould/managementDialog.vue";
import EquipmentRequisition from "./mould/equipmentRequisitionDialog.vue";
import UsageRecord from "./mould/usageRecord.vue";
import DilogTable from "@/components/dialog/DilogTable.vue";

// API 服务导入
import { useDelete } from "@/hooks/useDelete.js";
import { getManagementList, delEquipment } from "@/api/equipment/management/index.js";
import { getUsageRecordList } from "@/api/equipment/requisition/index.js";
import {
  getManagementList,
  delEquipment,
} from "@/api/equipment/management/index.js";
import { getUsageRecordList, getUsageDetailList } from "@/api/equipment/requisition/index.js";

// 响应式状态管理
const form = ref({});
const title = ref("");
const copyForm = ref({});
const addOrEdit = ref("add");
const manaDialog = ref(false);
const equipmentRequisitionDialog = ref(false);
const usageRecordDialog = ref(false);
const loading = ref(false);
const activeTab = ref("management");
const selectedRows = ref([]);
const tableData = ref([]);
// 响应式状态管理 - 使用解构和默认值
const initFormState = () => ({ consumables: false });

// 分页状态
const pageNum = ref(1);
const pageSizes = ref(10);
const total = ref(0);

// 查询参数
const queryParams = reactive({
  searchAll: ""
const state = reactive({
  form: initFormState(),
  title: "",
  copyForm: {},
  addOrEdit: "add",
  loading: false,
  activeTab: "management",
  selectedRows: [],
  tableData: [],
  // 弹窗状态
  dialogs: {
    management: false,
    equipmentRequisition: false,
    usageRecord: false,
    detailTable: false,
  },
  // 详情表格状态
  detailTable: {
    data: [],
    columns: [],
    title: "",
  },
  // 分页状态
  pagination: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
  // 查询参数
  queryParams: {
    searchAll: "",
  },
});

// 使用解构简化访问
const {
  form,
  title,
  copyForm,
  addOrEdit,
  loading,
  activeTab,
  selectedRows,
  tableData,
  dialogs,
  detailTable,
  pagination,
  queryParams,
} = toRefs(state);

// 标签页配置 - 便于后续扩展
const tabsConfig = {
@@ -164,60 +202,62 @@
    columns: [
      { prop: "equipmentNo", label: "设备编号", minWidth: 100 },
      { prop: "equipmentName", label: "设备名称", minWidth: 100 },
      { prop: "quantity", label: "数量", minWidth: 100 },
      { prop: "consumables", label: "耗材",
        formatter: (row) => (row.consumables ? "是" : "否"), 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: "使用状态", 
        minWidth: 100,
        formatter: (row) => row.usageStatus == 1 ? "启用" : "禁用"
      {prop: "returnQuantity" , label: "归还数量", minWidth: 100,
        formatter: (row) => row.returnQuantity || 0
      },
      {
        prop: "equipmentStatus",
        label: "使用状态",
        minWidth: 100,
        formatter: (row) => (row.equipmentStatus == 1 ? "使用中" : "已归还"),
      },
      
      { 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 +266,7 @@
const tabs = reactive(
  Object.entries(tabsConfig).map(([name, config]) => ({
    name,
    label: config.label
    label: config.label,
  }))
);

@@ -234,11 +274,70 @@
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);

// 动态获取表格操作配置
const getTableOperations = () => {
  if (activeTab.value === 'equipmentRequisition') {
    return [ 'viewRow']; // 设备领用页面只显示编辑和查看
  }
  return ['edit', 'viewRow']; // 默认操作
};

// 动态获取操作列宽度
const getOperationsWidth = () => {
  if (activeTab.value === 'equipmentRequisition') {
    return 250; // 为归还按钮预留更多空间
  }
  return 200; // 默认宽度
};

// 动态获取自定义按钮配置
const getCustomButtons = () => {
  const buttons = [];
  
  // 在设备领用页面添加归还按钮
  if (activeTab.value === 'equipmentRequisition') {
    buttons.push({
      name: 'return',
      label: '归还',
      type: 'success',
      size: 'small',
      link: true,
      show: (row) => row.equipmentStatus == 1 || row.equipmentStatus == 2, // 只有使用中的设备才显示归还按钮
      disabled: (row) => false,
    });
  }
  
  return buttons;
};

// 处理自定义按钮点击事件
const handleCustomButtonClick = ({ buttonName, row }) => {
  switch (buttonName) {
    case 'return':
      handleReturn(row);
      break;
    // 可以在这里添加更多自定义按钮的处理逻辑
    default:
      console.warn(`未处理的自定义按钮: ${buttonName}`);
  }
};
const handleReturn = (row) => {
  form.value = { ...row };
  addOrEdit.value = "return"; // 设置为归还模式
  title.value = `归还设备`;
  copyForm.value = { ...row };
  equipmentRequisitionDialog.value = true;
  console.log("归还设备：", row);
};
// 事件处理函数
const handleTabClick = (tab) => {
  activeTab.value = tab.props.name;
@@ -247,7 +346,9 @@
};

const resetState = () => {
  form.value = {};
  form.value = {
    consumables: false,
  };
  addOrEdit.value = "add";
  loading.value = true;
  tableData.value = [];
@@ -270,7 +371,9 @@

const handleAdd = () => {
  addOrEdit.value = "add";
  form.value = {};
  form.value = {
    consumables: false,
  };
  title.value = `新增${currentTabConfig.value.label}`;
  // 通用的
  copyForm.value = {};
@@ -297,14 +400,74 @@
  }
};

const handleView = (row) => {
const handleView = async (row) => {
  // 针对设备管理页面：直接打开编辑弹窗查看
  if (activeTab.value === 'management') {
    form.value = { ...row };
    addOrEdit.value = "viewRow";
    title.value = `查看${currentTabConfig.value.label}`;
    copyForm.value = { ...row };
    manaDialog.value = true;
    return;
  }
  
  // 针对设备领用页面：打开详情记录表格
  if (activeTab.value === 'equipmentRequisition') {
    try {
      dialogTableTitle.value = `${row.equipmentName || '设备'} - 操作记录详情`;
      
      // 显示加载状态
      dialogTableVisible.value = true;
      dialogTableData.value = [];
      
      // 调用详情接口获取数据
      const { data, code } = await getUsageDetailList(row.id);
      
      if (code === 200 && data) {
        console.log('设备操作记录:', data);
        
        // 处理数组数据，直接显示操作记录列表
        if (Array.isArray(data.records)) {
          dialogTableData.value = data.records;
          dialogTableColumns.value = [
            { prop: 'equipmentNo', label: '设备编号', minWidth: 100 },
            { prop: 'equipmentName', label: '设备名称', minWidth: 120 },
            { prop: 'specification', label: '规格型号', minWidth: 100 },
            { 
              prop: 'operationType', 
              label: '操作类型', 
              minWidth: 80,
              formatter: (row) => row.operationType === 1 ? '领用' : '归还'
            },
            { prop: 'quantity', label: '操作数量', minWidth: 80 },
            { prop: 'operator', label: '操作人', minWidth: 80 },
            { prop: 'remark', label: '备注', minWidth: 150, showOverflowTooltip: true },
            { prop: 'createTime', label: '操作时间', minWidth: 150 }
          ];
        } else {
          ElMessage.warning('暂无操作记录');
          dialogTableVisible.value = false;
        }
      } else {
        ElMessage.error('获取详情数据失败');
        dialogTableVisible.value = false;
      }
      
    } catch (error) {
      console.error('获取详情失败:', error);
      ElMessage.error('获取详情数据失败');
      dialogTableVisible.value = false;
    }
    return;
  }
  
  // 其他页面的默认处理
  form.value = { ...row };
  addOrEdit.value = "viewRow";
  title.value = `查看${currentTabConfig.value.label}`;
  copyForm.value = { ...row };
  if (activeTab.value === "equipmentRequisition") {
    equipmentRequisitionDialog.value = true;
  } else if (activeTab.value === "usageRecord") {
  
  if (activeTab.value === "usageRecord") {
    usageRecordDialog.value = true;
  } else {
    manaDialog.value = true;
@@ -321,7 +484,6 @@
  selectedRows.value = selection;
};


// 删除处理
const { handleDeleteBatch: handleDelete } = useDelete({
  deleteApi: () => currentTabConfig.value.deleteApi,
@@ -336,7 +498,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 +508,16 @@

// 设备领用弹窗提交处理
const onEquipmentRequisitionSubmit = (formData) => {
  ElMessage.success('设备领用成功');
  if (formData.equipmentStatus == 2) {
    ElMessage.success("设备归还成功");
  } else {
    ElMessage.success("设备领用成功");
  }
  equipmentRequisitionDialog.value = false;
  getList();
  nextTick(() => {
    form.value = {};
    getList();
  });
};

// 数据获取
@@ -362,7 +533,7 @@
    const { data, code } = await currentTabConfig.value.api(apiParams);

    if (code !== 200) {
      ElMessage.error("获取数据失败：" + (data?.msg || "未知错误"));
      // ElMessage.error("获取数据失败：" + (data?.msg || "未知错误"));
      return;
    }

@@ -401,7 +572,7 @@
  flex-wrap: wrap;
  gap: 10px;
}
.app-container{
.app-container {
  padding: 18px !important;
}
/* 响应式表格 */