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

zhang_12370

2025-07-23 ba07ace535232e5ea77cf0a89cd1c079895e1441

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

 src/api/equipment/requisition/index.js

@@ -21,3 +21,12 @@
    data
  })
}

// /equipmentUsageDetail/list?usageId=3
// è®¾å¤‡é¢†ç”¨å½’还记录查询
export function getUsageDetailList(usageId) {
  return request({
    url: `/equipmentUsageDetail/list?usageId=${usageId}`,
    method: 'get'
  })
}

 src/components/dialog/DilogTable.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,112 @@
<template>
  <el-dialog
    v-model="visible"
    :title="title"
    :width="width"
    :destroy-on-close="true"
    @close="handleClose"
    class="dialog-table"
  >
    <ETable
      :columns="columns"
      :table-data="tableData"
      :loading="loading"
      :show-selection="false"
      :show-operations="false"
    />
  </el-dialog>
</template>

<script setup>
import { computed } from 'vue'
import ETable from '@/components/Table/ETable.vue'

const props = defineProps({
  // å¼¹çª—控制
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: '数据表格'
  },
  width: {
    type: String,
    default: '80%'
  },
  
  // è¡¨æ ¼æ•°æ®
  tableData: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['update:modelValue'])

// å¼¹çª—显示控制
const visible = computed({
  get: () => props.modelValue,
  set: (value) => emit('update:modelValue', value)
})

// å…³é—­å¼¹çª—
const handleClose = () => {
  emit('update:modelValue', false)
}
</script>

<style lang="scss" scoped>
.dialog-table {
  :deep(.el-dialog) {
    background-color: #f8f9fa;
  }
  
  :deep(.el-dialog__header) {
    background-color: #f1f3f4;
    border-bottom: 1px solid #e4e7ed;
    padding: 20px 24px 16px;
    
    .el-dialog__title {
      color: #303133;
      font-weight: 600;
    }
  }
  
  :deep(.el-dialog__body) {
    background-color: #f8f9fa;
    padding: 20px 24px;
    
    .el-table {
      background-color: #ffffff;
      border-radius: 6px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
    }
    
    .el-table th.el-table__cell {
      background-color: #fafbfc;
      color: #606266;
      font-weight: 600;
      border-bottom: 1px solid #ebeef5;
    }
    
    .el-table td.el-table__cell {
      background-color: #ffffff;
      border-bottom: 1px solid #f5f7fa;
    }
    
    .el-table__row:hover > td {
      background-color: #f8f9fa !important;
    }
  }
}
</style>

 src/views/equipment/management/index.vue

@@ -65,32 +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
@@ -126,6 +105,15 @@
        :form="form"
        @submit="getList"
      /> -->
      
      <!-- æŸ¥çœ‹è¯¦æƒ…弹窗 -->
      <DilogTable
        v-model="dialogTableVisible"
        :title="dialogTableTitle"
        :table-data="dialogTableData"
        :columns="dialogTableColumns"
        width="60%"
      />
    </el-card>
  </div>
</template>
@@ -140,7 +128,7 @@
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";
@@ -148,30 +136,60 @@
  getManagementList,
  delEquipment,
} from "@/api/equipment/management/index.js";
import { getUsageRecordList } from "@/api/equipment/requisition/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 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: "",
  },
// åˆ†é¡µçŠ¶æ€
const pageNum = ref(1);
const pageSizes = ref(10);
const total = ref(0);

  pagination: {
    pageNum: 1,
    pageSize: 10,
    total: 0,
  },
// æŸ¥è¯¢å‚æ•°
const queryParams = reactive({
  queryParams: {
  searchAll: "",
  },
});

// ä½¿ç”¨è§£æž„简化访问
const {
  form,
  title,
  copyForm,
  addOrEdit,
  loading,
  activeTab,
  selectedRows,
  tableData,
  dialogs,
  detailTable,
  pagination,
  queryParams,
} = toRefs(state);

// æ ‡ç­¾é¡µé…ç½® - ä¾¿äºŽåŽç»­æ‰©å±•
const tabsConfig = {
@@ -204,12 +222,16 @@
      { prop: "equipmentNo", label: "设备编号", minWidth: 100 },
      { prop: "equipmentName", label: "设备名称", minWidth: 100 },
      { prop: "usageQuantity", label: "领用数量", minWidth: 100 },
      {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 },
@@ -261,6 +283,61 @@
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;
@@ -323,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 };
  if (activeTab.value === "equipmentRequisition") {
    equipmentRequisitionDialog.value = true;
  } else if (activeTab.value === "usageRecord") {
    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 === "usageRecord") {
    usageRecordDialog.value = true;
  } else {
    manaDialog.value = true;
@@ -371,8 +508,7 @@

// è®¾å¤‡é¢†ç”¨å¼¹çª—提交处理
const onEquipmentRequisitionSubmit = (formData) => {
  console.log("设备领用提交数据：", formData);
  if (formData.equipmentStatus == 1) {
  if (formData.equipmentStatus == 2) {
    ElMessage.success("设备归还成功");
  } else {
    ElMessage.success("设备领用成功");