product-inventory-APP-before.git

<template>
  <view class="equipment-management">
    <!-- 页面头部 -->
    <PageHeader title="设备管理" @back="goBack"/>
    
    <!-- 搜索区域 -->
    <view class="search-section" v-if="shouldShowSearch">
      <view class="search-bar">
        <view class="search-input">
          <up-input
            class="search-text"
            :placeholder="searchPlaceholder"
            v-model="queryParams.searchAll"
            @change="search"
            clearable
          />
        </view>
        <view class="filter-button" @click="search">
          <up-icon name="search" size="24" color="#999"></up-icon>
        </view>
      </view>
    </view>
    
    <!-- 标签页 -->
    <view class="tabs-section">
      <u-tabs
        :list="tabs"
        :current="activeTabIndex"
        @change="handleTabChange"
        :scrollable="false"
        lineWidth="30"
        lineColor="#2979ff"
        :activeStyle="{
          color: '#2979ff',
          fontWeight: 'bold'
        }"
      />
    </view>
 
    <!-- 列表区域 -->
    <scroll-view 
      class="list-container"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- 加载状态 -->
      <view v-if="loading" class="loading-container">
        <u-loading-icon text="加载中..." />
      </view>
      
      <!-- 设备列表 -->
      <view v-else-if="!loading && tableData.length > 0" class="ledger-list">
        <view v-for="(item, index) in tableData" :key="item.id || index">
          <view class="ledger-item">
            <view class="item-header">
              <view class="item-left">
                <view class="document-icon">
                  <up-icon name="file-text" size="16" color="#ffffff"></up-icon>
                </view>
                <text class="item-id">{{ item.equipmentNo || '未编号' }}</text>
              </view>
            </view>
            <up-divider></up-divider>
            
            <view class="item-details">
              <!-- 设备列表页面 -->
              <template v-if="activeTab === 'management'">
                <view class="detail-row">
                  <text class="detail-label">设备名称</text>
                  <text class="detail-value">{{ item.equipmentName || '-' }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">耗材</text>
                  <text class="detail-value">{{ (item.consumables !== undefined ? item.consumables : item.isConsumables) ? '是' : '否' }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">总数量</text>
                  <text class="detail-value highlight">{{ item.quantity || 0 }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">已使用数量</text>
                  <text class="detail-value">{{ item.usedNo || 0 }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">规格型号</text>
                  <text class="detail-value">{{ item.specification || '-' }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">采购日期</text>
                  <text class="detail-value">{{ item.purchaseDate || '-' }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">采购价格</text>
                  <text class="detail-value">{{ item.purchasePrice ? `¥${item.purchasePrice}` : '-' }}</text>
                </view>
              </template>
              
              <!-- 设备领用页面 -->
              <template v-else-if="activeTab === 'equipmentRequisition'">
                <view class="detail-row">
                  <text class="detail-label">领用人</text>
                  <text class="detail-value">{{ item.userName || '-' }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">设备名称</text>
                  <text class="detail-value">{{ item.equipmentName || '-' }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">领用数量</text>
                  <text class="detail-value highlight">{{ item.usageQuantity || 0 }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">归还数量</text>
                  <text class="detail-value">{{ item.returnQuantity || 0 }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">使用状态</text>
                  <text class="detail-value" :style="{ color: getStatusColor(item.equipmentStatus) }">
                    {{ getStatusText(item.equipmentStatus) }}
                  </text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">使用开始时间</text>
                  <text class="detail-value">{{ item.usageStartTime || '-' }}</text>
                </view>
                <view class="detail-row">
                  <text class="detail-label">使用结束时间</text>
                  <text class="detail-value">{{ item.usageEndTime || '-' }}</text>
                </view>
                <view class="detail-row" v-if="item.remarks">
                  <text class="detail-label">备注</text>
                  <text class="detail-value">{{ item.remarks }}</text>
                </view>
              </template>
            </view>
            
            <!-- 操作按钮 - 只在设备领用页面显示 -->
            <template v-if="activeTab === 'equipmentRequisition'">
              <up-divider></up-divider>
              <view class="action-buttons">
                <u-button
                  type="info"
                  size="small"
                  class="action-btn"
                  @click.stop="handleView(item)"
                >
                  查看
                </u-button>
                <u-button
                  v-if="shouldShowReturnButton(item)"
                  type="success"
                  size="small"
                  class="action-btn"
                  :disabled="item.equipmentStatus === EQUIPMENT_STATUS.RETURNED"
                  @click.stop="handleReturn(item)"
                >
                  归还
                </u-button>
              </view>
            </template>
          </view>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-else-if="!loading && tableData.length === 0" class="no-data">
        <text>暂无{{ currentTabConfig?.label || '' }}数据</text>
      </view>
    </scroll-view>
    
    <!-- 浮动操作按钮 - 设备领用页面显示领用按钮 -->
    <view 
      v-if="activeTab === 'equipmentRequisition'" 
      class="fab-button" 
      @tap="handleAdd"
    >
      <up-icon name="plus" size="24" color="#ffffff"></up-icon>
    </view>
    
    <!-- 弹窗组件 -->
    <managementDialog
      v-if="activeTab == 'management'"
      v-model:copyForm="copyForm"
      v-model:managementFormDialog="manaDialog"
      :addOrEdit="addOrEdit"
      :form="form"
      @submit="getList"
    />
    <EquipmentRequisition
      v-model="equipmentRequisitionDialog"
      :formData="form"
      :maxQuantity="getMaxQuantity()"
      :addOrEdit="addOrEdit"
      :equipmentStatus="form.equipmentStatus"
      @submit="onEquipmentRequisitionSubmit"
    />
    
    <!-- 查看详情弹窗 -->
    <u-popup
      v-model="dialogTableVisible"
      :title="dialogTableTitle"
      mode="center"
      :closeable="true"
    >
      <view class="dialog-content">
        <u-table
          :data="dialogTableData"
          :columns="dialogTableColumns"
          height="400px"
        />
      </view>
    </u-popup>
  </view>
</template>
 
<script setup>
import { computed, onMounted, reactive, ref, nextTick, toRefs } from "vue";
 
// uviewplus组件导入
import { useToast } from '@/utils/uviewplus'
const { showToast } = useToast()
 
// 组件导入
import PageHeader from "@/components/PageHeader.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";
 
// 设备状态枚举
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 });
 
const state = reactive({
  form: initFormState(),
  title: "",
  copyForm: {},
  addOrEdit: "add",
  loading: false,
  activeTab: "management",
  tableData: [],
  // 分页状态（保留用于API调用，但不显示分页组件）
  pageNum: 1,
  pageSize: 20,
  total: 0,
  // 下拉刷新状态
  refreshing: false,
  // 查询参数
  queryParams: {
    searchAll: "",
  },
});
 
// 使用解构简化访问
const {
  form,
  title,
  copyForm,
  addOrEdit,
  loading,
  activeTab,
  tableData,
  pageNum,
  pageSize,
  total,
  queryParams,
  refreshing,
} = 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 = {
  management: {
    label: "设备列表",
    searchPlaceholder: "设备编号/设备名称/规格型号",
    showSearch: true,
    api: getManagementList,
    columns: [
      { prop: "equipmentNo", label: "设备编号", minWidth: 100 },
      { prop: "equipmentName", label: "设备名称", minWidth: 100 },
      { prop: "consumables", label: "耗材",
        formatter: (row) => {
          const value = row.consumables !== undefined ? row.consumables : row.isConsumables;
          return value ? "是" : "否";
        }, minWidth: 100 },
      { prop: "quantity", label: "总数量", minWidth: 100 },
      { prop: "usedNo", label: "已使用数量", minWidth: 100 },
      { prop: "specification", label: "规格型号", minWidth: 100 },
      { prop: "purchaseDate", label: "采购日期", minWidth: 100 },
      { 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 },
    ],
  },
};
 
// 标签页数据 - u-tabs需要name作为显示文本
const tabs = computed(() => 
  Object.entries(tabsConfig).map(([name, config]) => ({
    name: config.label,  // 使用label作为显示文本
    value: name,         // 保存原始name值
  }))
);
 
// 当前标签页索引 - 使用ref而不是computed，确保响应式更新
const activeTabIndex = ref(0);
 
// 当前标签页配置
const currentTabConfig = computed(() => tabsConfig[activeTab.value]);
 
// 计算属性
const searchPlaceholder = computed(
  () => currentTabConfig.value?.searchPlaceholder || "请输入搜索信息"
);
const shouldShowSearch = computed(
  () => currentTabConfig.value?.showSearch || false
);
 
// 判断是否显示归还按钮
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 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;
  console.log('handleTabChange:', e, 'index:', index, 'tabs:', tabs.value);
  const selectedTab = tabs.value[index];
  if (selectedTab && selectedTab.value !== activeTab.value) {
    activeTab.value = selectedTab.value;
    activeTabIndex.value = index;
    resetState();
    getList();
  }
};
 
 
const resetState = () => {
  form.value = {
    consumables: false,
  };
  addOrEdit.value = "add";
  loading.value = true;
  tableData.value = [];
  pageNum.value = 1;
  pageSize.value = 20;
  total.value = 0;
  queryParams.value.searchAll = "";
  refreshing.value = false;
};
 
const resetQuery = () => {
  queryParams.value.searchAll = "";
  pageNum.value = 1;
  getList();
};
 
const search = () => {
  pageNum.value = 1;
  getList();
};
 
// 处理新增领用
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 onRefresh = async () => {
  refreshing.value = true;
  pageNum.value = 1;
  await getList();
  refreshing.value = false;
};
 
// 获取设备最大可领用数量
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 getList = async () => {
  try {
    if (!refreshing.value) {
      loading.value = true;
    }
    const apiParams = {
      current: pageNum.value,
      pageSize: pageSize.value,
      searchAll: queryParams.value.searchAll,
    };
 
    const response = await currentTabConfig.value.api(apiParams);
    console.log('API响应:', response);
    
    // request工具返回的是 { code, data, msg } 结构
    const { data, code } = response;
 
    if (code !== 200) {
      showToast("获取数据失败：" + (response?.msg || "未知错误"), 'error');
      return;
    }
 
    // data 是 { records: [...], total: 3, ... } 结构
    const records = data?.records || data?.rows || [];
    console.log('解析后的数据:', records);
    
    // 数据字段映射：将 isConsumables 映射为 consumables
    const mappedRecords = records.map(item => ({
      ...item,
      consumables: item.isConsumables !== undefined ? item.isConsumables : item.consumables
    }));
 
    // 如果是下拉刷新，重置数据；否则追加数据（用于上拉加载更多，但当前不实现）
    if (pageNum.value === 1) {
      tableData.value = mappedRecords;
    } else {
      tableData.value = [...tableData.value, ...mappedRecords];
    }
    total.value = data?.total || 0;
    console.log('最终表格数据:', tableData.value);
  } catch (error) {
    console.error('获取数据失败:', error);
    showToast("获取数据失败，请稍后再试", 'error');
  } finally {
    loading.value = false;
  }
};
 
// 组件挂载
onMounted(() => {
  activeTab.value = "management";
  activeTabIndex.value = 0;
  // 不重置搜索条件，直接加载数据
  loading.value = true;
  getList();
});
// 返回上一页
const goBack = () => {
    uni.navigateBack();
};
</script>
 
<style scoped lang="scss">
@import '@/styles/sales-common.scss';
 
.equipment-management {
    min-height: 100vh;
    background: #f8f9fa;
    position: relative;
}
 
.tabs-section {
    background: #ffffff;
    padding: 0 20px;
}
 
.list-container {
    flex: 1;
    height: calc(100vh - 200px);
}
 
.loading-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    color: #999;
}
 
.no-data {
    padding: 40px 0;
    text-align: center;
    color: #999;
    font-size: 14px;
}
</style>