昭德-巡检上传开发调整

gaoluyang

2025-12-29 bbdd646b82cb8c84079598b7200b1102fd247b28

 src/pages/management/index.vue

@@ -22,7 +22,7 @@
    </view>
    
    <!-- 标签页 -->
    <view class="tabs-section">
    <!-- <view class="tabs-section">
      <u-tabs
        :list="tabs"
        :current="activeTabIndex"
@@ -35,7 +35,7 @@
          fontWeight: 'bold'
        }"
      />
    </view>
    </view> -->

    <!-- 列表区域 -->
    <scroll-view 
@@ -66,7 +66,7 @@
            
            <view class="item-details">
              <!-- 设备列表页面 -->
              <template v-if="activeTab === 'management'">
              <!-- <template v-if="activeTab === 'management'"> -->
                <view class="detail-row">
                  <text class="detail-label">设备名称</text>
                  <text class="detail-value">{{ item.equipmentName || '-' }}</text>
@@ -95,10 +95,10 @@
                  <text class="detail-label">采购价格</text>
                  <text class="detail-value">{{ item.purchasePrice ? `¥${item.purchasePrice}` : '-' }}</text>
                </view>
              </template>
              <!-- </template> -->
              
              <!-- 设备领用页面 -->
              <template v-else-if="activeTab === 'equipmentRequisition'">
              <!-- <template v-else-if="activeTab === 'equipmentRequisition'">
                <view class="detail-row">
                  <text class="detail-label">领用人</text>
                  <text class="detail-value">{{ item.userName || '-' }}</text>
@@ -133,11 +133,11 @@
                  <text class="detail-label">备注</text>
                  <text class="detail-value">{{ item.remarks }}</text>
                </view>
              </template>
              </template> -->
            </view>
            
            <!-- 操作按钮 - 只在设备领用页面显示 -->
            <template v-if="activeTab === 'equipmentRequisition'">
            <!-- <template v-if="activeTab === 'equipmentRequisition'">
              <up-divider></up-divider>
              <view class="action-buttons">
                <u-button
@@ -159,7 +159,7 @@
                  归还
                </u-button>
              </view>
            </template>
            </template> -->
          </view>
        </view>
      </view>
@@ -171,34 +171,34 @@
    </scroll-view>
    
    <!-- 浮动操作按钮 - 设备领用页面显示领用按钮 -->
    <view 
    <!-- <view 
      v-if="activeTab === 'equipmentRequisition'" 
      class="fab-button" 
      @tap="handleAdd"
    >
      <up-icon name="plus" size="24" color="#ffffff"></up-icon>
    </view>
    </view> -->
    
    <!-- 弹窗组件 -->
    <managementDialog
    <!-- <managementDialog
      v-if="activeTab == 'management'"
      v-model:copyForm="copyForm"
      v-model:managementFormDialog="manaDialog"
      :addOrEdit="addOrEdit"
      :form="form"
      @submit="getList"
    />
    <EquipmentRequisition
    /> -->
    <!-- <EquipmentRequisition
      v-model="equipmentRequisitionDialog"
      :formData="form"
      :maxQuantity="getMaxQuantity()"
      :addOrEdit="addOrEdit"
      :equipmentStatus="form.equipmentStatus"
      @submit="onEquipmentRequisitionSubmit"
    />
    /> -->
    
    <!-- 查看详情弹窗 -->
    <u-popup
    <!-- <u-popup
      v-model="dialogTableVisible"
      :title="dialogTableTitle"
      mode="center"
@@ -211,7 +211,7 @@
          height="400px"
        />
      </view>
    </u-popup>
    </u-popup> -->
  </view>
</template>

@@ -224,14 +224,14 @@

// 组件导入
import PageHeader from "@/components/PageHeader.vue";
import managementDialog from "./mould/managementDialog.vue";
import EquipmentRequisition from "./mould/equipmentRequisitionDialog.vue";
// import managementDialog from "./mould/managementDialog.vue";
// import EquipmentRequisition from "./mould/equipmentRequisitionDialog.vue";

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

// 设备状态枚举
const EQUIPMENT_STATUS = {
@@ -330,40 +330,46 @@
      { prop: "purchasePrice", label: "采购价格", minWidth: 100 },
    ],
  },
  equipmentRequisition: {
    label: "设备领用",
    searchPlaceholder: "设备编号/设备名称/规格型号",
    showSearch: true,
    api: getUsageRecordList,
    columns: [
      { prop: "userName", label: "领用人", minWidth: 100 },
      { 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) => getStatusText(row.equipmentStatus),
        cellStyle: (row) => ({ color: getStatusColor(row.equipmentStatus) }),
      },
      { prop: "usageStartTime", label: "使用开始时间", minWidth: 100 },
      { prop: "usageEndTime", label: "使用结束时间", minWidth: 100 },
      { prop: "remarks", label: "备注", minWidth: 100 },
    ],
  },
  // equipmentRequisition: {
  //   label: "设备领用",
  //   searchPlaceholder: "设备编号/设备名称/规格型号",
  //   showSearch: true,
  //   api: getUsageRecordList,
  //   columns: [
  //     { prop: "userName", label: "领用人", minWidth: 100 },
  //     { 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) => getStatusText(row.equipmentStatus),
  //       cellStyle: (row) => ({ color: getStatusColor(row.equipmentStatus) }),
  //     },
  //     { prop: "usageStartTime", label: "使用开始时间", minWidth: 100 },
  //     { prop: "usageEndTime", label: "使用结束时间", minWidth: 100 },
  //     { prop: "remarks", label: "备注", minWidth: 100 },
  //   ],
  // },
};

// 标签页数据 - u-tabs需要name作为显示文本
const tabs = computed(() => 
  Object.entries(tabsConfig).map(([name, config]) => ({
    name: config.label,  // 使用label作为显示文本
    value: name,         // 保存原始name值
  }))
);
// const tabs = computed(() => 
//   Object.entries(tabsConfig).map(([name, config]) => ({
//     name: config.label,  // 使用label作为显示文本
//     value: name,         // 保存原始name值
//   }))
// );
const tabs = computed(() => [
  {
    name: tabsConfig.management.label,
    value: 'management'
  }
]);

// 当前标签页索引 - 使用ref而不是computed，确保响应式更新
const activeTabIndex = ref(0);
@@ -380,68 +386,68 @@
);

// 判断是否显示归还按钮
const shouldShowReturnButton = (item) => {
  if (activeTab.value !== 'equipmentRequisition') {
    return false;
  }
  // 如果设备状态是已归还，不显示归还按钮
  if (item.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
    return false;
  }
  // 其他状态都显示归还按钮（使用中、部分归还、或者没有状态）
  return true;
};
// const shouldShowReturnButton = (item) => {
//   if (activeTab.value !== 'equipmentRequisition') {
//     return false;
//   }
//   // 如果设备状态是已归还，不显示归还按钮
//   if (item.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
//     return false;
//   }
//   // 其他状态都显示归还按钮（使用中、部分归还、或者没有状态）
//   return true;
// };

// 动态获取自定义按钮配置（保留用于其他用途）
const getCustomButtons = () => {
  const buttons = [];
  
  // 在设备领用页面添加归还按钮
  if (activeTab.value === 'equipmentRequisition') {
    buttons.push({
      name: 'return',
      label: '归还',
      type: 'success',
      size: 'small',
      link: true,
      show: (row) => shouldShowReturnButton(row),
      disabled: (row) => row.equipmentStatus === EQUIPMENT_STATUS.RETURNED,
    });
  }
  
  return buttons;
};
// const getCustomButtons = () => {
//   const buttons = [];
//   
//   // 在设备领用页面添加归还按钮
//   if (activeTab.value === 'equipmentRequisition') {
//     buttons.push({
//       name: 'return',
//       label: '归还',
//       type: 'success',
//       size: 'small',
//       link: true,
//       show: (row) => shouldShowReturnButton(row),
//       disabled: (row) => row.equipmentStatus === EQUIPMENT_STATUS.RETURNED,
//     });
//   }
//   
//   return buttons;
// };

// 处理自定义按钮点击事件
const handleCustomButtonClick = ({ buttonName, row }) => {
  switch (buttonName) {
    case 'return':
      handleReturn(row);
      break;
    // 可以在这里添加更多自定义按钮的处理逻辑
    default:
      console.warn(`未处理的自定义按钮: ${buttonName}`);
  }
};
const handleReturn = (row) => {
  // 检查设备状态
  if (row.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
    showToast('该设备已归还完成，无需再次归还', 'warning');
    return;
  }
  
  if (row.equipmentStatus !== EQUIPMENT_STATUS.USING && row.equipmentStatus !== EQUIPMENT_STATUS.PARTIAL_RETURN) {
    showToast('该设备当前状态不支持归还操作', 'warning');
    return;
  }
  
  form.value = { ...row };
  addOrEdit.value = "return"; // 设置为归还模式
  title.value = `归还设备 - ${row.equipmentName || ''}`;
  copyForm.value = { ...row };
  equipmentRequisitionDialog.value = true;
  console.log("归还设备：", row);
};
// const handleCustomButtonClick = ({ buttonName, row }) => {
//   switch (buttonName) {
//     case 'return':
//       handleReturn(row);
//       break;
//     // 可以在这里添加更多自定义按钮的处理逻辑
//     default:
//       console.warn(`未处理的自定义按钮: ${buttonName}`);
//   }
// };
// const handleReturn = (row) => {
//   // 检查设备状态
//   if (row.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
//     showToast('该设备已归还完成，无需再次归还', 'warning');
//     return;
//   }
//   
//   if (row.equipmentStatus !== EQUIPMENT_STATUS.USING && row.equipmentStatus !== EQUIPMENT_STATUS.PARTIAL_RETURN) {
//     showToast('该设备当前状态不支持归还操作', 'warning');
//     return;
//   }
//   
//   form.value = { ...row };
//   addOrEdit.value = "return"; // 设置为归还模式
//   title.value = `归还设备 - ${row.equipmentName || ''}`;
//   copyForm.value = { ...row };
//   equipmentRequisitionDialog.value = true;
//   console.log("归还设备：", row);
// };
// 标签页切换处理 - u-tabs的@change事件传递的是对象 { index: number }
const handleTabChange = (e) => {
  const index = typeof e === 'object' && e.index !== undefined ? e.index : e;
@@ -482,63 +488,63 @@
};

// 处理新增领用
const handleAdd = () => {
  console.log('handleAdd 被调用', 'activeTab:', activeTab.value, 'activeTabIndex:', activeTabIndex.value);
  addOrEdit.value = "add";
  form.value = {};
  title.value = `新增${currentTabConfig.value?.label || '设备领用'}`;
  copyForm.value = {};
  console.log('准备打开弹窗，equipmentRequisitionDialog当前值:', equipmentRequisitionDialog.value);
  equipmentRequisitionDialog.value = true;
  console.log('弹窗已打开，equipmentRequisitionDialog新值:', equipmentRequisitionDialog.value);
};
// const handleAdd = () => {
//   console.log('handleAdd 被调用', 'activeTab:', activeTab.value, 'activeTabIndex:', activeTabIndex.value);
//   addOrEdit.value = "add";
//   form.value = {};
//   title.value = `新增${currentTabConfig.value?.label || '设备领用'}`;
//   copyForm.value = {};
//   console.log('准备打开弹窗，equipmentRequisitionDialog当前值:', equipmentRequisitionDialog.value);
//   equipmentRequisitionDialog.value = true;
//   console.log('弹窗已打开，equipmentRequisitionDialog新值:', equipmentRequisitionDialog.value);
// };

const handleView = async (row) => {
  // 只处理设备领用页面的查看功能
  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) {
        // 处理数组数据，直接显示操作记录列表
        if (Array.isArray(data)) {
          dialogTableData.value = data;
          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 {
          showToast('暂无操作记录', 'warning');
        }
      } else {
        showToast('获取详情数据失败', 'error');
        dialogTableVisible.value = false;
      }
      
    } catch (error) {
      console.error('获取详情失败:', error);
      showToast('获取详情数据失败', 'error');
      dialogTableVisible.value = false;
    }
  }
};
// const handleView = async (row) => {
//   // 只处理设备领用页面的查看功能
//   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) {
//         // 处理数组数据，直接显示操作记录列表
//         if (Array.isArray(data)) {
//           dialogTableData.value = data;
//           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 {
//           showToast('暂无操作记录', 'warning');
//         }
//       } else {
//         showToast('获取详情数据失败', 'error');
//         dialogTableVisible.value = false;
//       }
//       
//     } catch (error) {
//       console.error('获取详情失败:', error);
//       showToast('获取详情数据失败', 'error');
//       dialogTableVisible.value = false;
//     }
//   }
// };

// 下拉刷新
const onRefresh = async () => {
@@ -549,32 +555,32 @@
};

// 获取设备最大可领用数量
const getMaxQuantity = () => {
  if (form.value.equipmentId) {
    const equipment = tableData.value.find(
      (item) => item.equipmentId === form.value.equipmentId
    );
    return equipment ? equipment.quantity : null;
  }
  return null;
};
// const getMaxQuantity = () => {
//   if (form.value.equipmentId) {
//     const equipment = tableData.value.find(
//       (item) => item.equipmentId === form.value.equipmentId
//     );
//     return equipment ? equipment.quantity : null;
//   }
//   return null;
// };

// 设备领用弹窗提交处理
const onEquipmentRequisitionSubmit = (formData) => {
  if (formData.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
    showToast("设备已完全归还", 'success');
  } else if (formData.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN) {
  } else if (formData.equipmentStatus === EQUIPMENT_STATUS.USING) {
    showToast("设备领用成功", 'success');
  } else {
    showToast("操作成功", 'success');
  }
  equipmentRequisitionDialog.value = false;
  nextTick(() => {
    form.value = {};
    getList();
  });
};
// const onEquipmentRequisitionSubmit = (formData) => {
//   if (formData.equipmentStatus === EQUIPMENT_STATUS.RETURNED) {
//     showToast("设备已完全归还", 'success');
//   } else if (formData.equipmentStatus === EQUIPMENT_STATUS.PARTIAL_RETURN) {
//   } else if (formData.equipmentStatus === EQUIPMENT_STATUS.USING) {
//     showToast("设备领用成功", 'success');
//   } else {
//     showToast("操作成功", 'success');
//   }
//   equipmentRequisitionDialog.value = false;
//   nextTick(() => {
//     form.value = {};
//     getList();
//   });
// };

// 数据获取
const getList = async () => {