td_official/src/views/materials/overallPlanMaterialSupply/index.vue

<template>
  <div class="overall-plan-material-supply">
    <el-card shadow="always">
      <template #header>
        <el-row :gutter="10" class="mb8">
          <el-form :inline="true">
            <el-form-item v-if="state.masterData.status == 'draft'">
              <el-button type="primary" icon="edit" @click="clickApprovalSheet1()">审批</el-button>
            </el-form-item>
            <el-form-item v-if="state.masterData.status == 'waiting' || state.masterData.status == 'finish'">
              <el-button icon="view" @click="lookApprovalFlow()" type="warning">查看流程</el-button>
            </el-form-item>
            <el-form-item>
              <file-upload
                upload-url="/design/totalsupplyplan/import"
                v-model="file"
                :limit="1"
                :file-type="['xls', 'xlsx']"
                :on-upload-success="handleSuccess"
              >
                <el-button :disabled="state.masterData.status == 'finish'" type="primary" plain icon="upload">导入</el-button>
              </file-upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain icon="Download" @click="handleExport">导出</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="Finished" @click="editApprovalSheet()" type="success" :disabled="state.masterData.status == 'finish'"
                >一键全部保存</el-button
              >
            </el-form-item>
            <!-- <el-form-item>
              <el-button type="primary" @click="toggleExpandAll">{{ isExpandAll ? '一键收起' : '一键展开' }}</el-button>
            </el-form-item> -->
          </el-form>
          <right-toolbar @queryTable="getMasterDataList"></right-toolbar>
        </el-row>
      </template>
    </el-card>

    <!-- 本地数据懒加载表格 -->
    <el-table
      :data="state.tableData"
      v-loading="state.loading.list"
      ref="tableRef"
      stripe
      style="width: 100%; margin-bottom: 20px; height: calc(100vh - 230px)"
      row-key="id"
      border
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :lazy="true"
      :load="loadLocalChildNodes"
      @expand-change="handleExpandChange"
    >
      <el-table-column align="center" prop="num" label="编号" />
      <el-table-column prop="name" label="工程或费用名称" width="180" />
      <el-table-column prop="unit" label="单位" />
      <el-table-column prop="specification" label="规格型号" width="80" />
      <el-table-column prop="quantity" label="数量" width="100" />
      <el-table-column prop="batchNumber" label="批次号" width="200" />

      <!-- 优化的输入框列 -->
      <el-table-column prop="brand" label="品牌">
        <template #default="{ row }">
          <el-input
            v-model.lazy="row.brand"
            :disabled="state.masterData.status != 'draft'"
            v-if="!row.hasChildren"
            placeholder=""
            clearable
            :key="`brand-${row.id}`"
            @change="handleInputChange(row, 'brand')"
          />
        </template>
      </el-table-column>

      <el-table-column prop="texture" label="材质">
        <template #default="{ row }">
          <el-input
            v-model.lazy="row.texture"
            :disabled="state.masterData.status != 'draft'"
            v-if="!row.hasChildren"
            placeholder=""
            clearable
            :key="`texture-${row.id}`"
            @change="handleInputChange(row, 'texture')"
          />
        </template>
      </el-table-column>

      <el-table-column prop="qualityStandard" label="质量标准">
        <template #default="{ row }">
          <!-- <el-input
            :disabled="state.masterData.status != 'draft'"
            v-model.lazy="row.qualityStandard"
            v-if="!row.hasChildren"
            placeholder=""
            clearable
            :key="`qualityStandard-${row.id}`"
            @change="handleInputChange(row, 'qualityStandard')"
          />
        </template>
      </el-table-column>

      <el-table-column prop="partUsed" label="使用部位">
        <template #default="{ row }">
          <!-- <el-input
            :disabled="state.masterData.status != 'draft'"
            v-model.lazy="row.partUsed"
            v-if="!row.hasChildren"
            placeholder=""
            clearable
            :key="`partUsed-${row.id}`"
            @change="handleInputChange(row, 'partUsed')"
          />
        </template>
      </el-table-column>

      <el-table-column prop="deliveryPoints" label="交货地点">
        <template #default="{ row }">
          <!-- <el-input
            :disabled="state.masterData.status != 'draft'"
            v-model.lazy="row.deliveryPoints"
            v-if="!row.hasChildren"
            placeholder=""
            clearable
            :key="`deliveryPoints-${row.id}`"
            @change="handleInputChange(row, 'deliveryPoints')"
          />
        </template>
      </el-table-column>

      <el-table-column label="预计使用日期" width="150">
        <template #default="{ row }">
          <!-- <el-date-picker
            v-model="row.dateService"
            v-if="!row.hasChildren"
            type="date"
            value-format="YYYY-MM-DD"
            :disabled="state.masterData.status != 'draft'"
            placeholder="请选择日期"
            :key="`dateService-${row.id}`"
            @change="handleInputChange(row, 'dateService')"
          />
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
    </el-table>
    <!-- 编辑弹窗 -->
    <el-dialog v-model="visible" title="修改物料信息" :width="800" :close-on-click-modal="false" @close="handleClose">
      <el-form ref="formRef" :model="formData" :rules="formRules" label-width="120px" class="space-y-4">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="批次号" prop="batchNumber">
              <el-input disabled v-model="formData.batchNumber" placeholder="请输入批次号" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="品牌" prop="brand">
              <el-input v-model="formData.brand" placeholder="请输入品牌" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="材质" prop="texture">
              <el-input v-model="formData.texture" placeholder="请输入材质" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质量标准" prop="qualityStandard">
              <el-input v-model="formData.qualityStandard" placeholder="请输入质量标准" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="使用部位" prop="partUsed">
              <el-input v-model="formData.partUsed" placeholder="请输入使用部位" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="交货地点" prop="deliveryPoints">
              <el-input v-model="formData.deliveryPoints" placeholder="请输入交货地点" clearable />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="预计使用日期" prop="dateService">
              <el-date-picker v-model="formData.dateService" type="date" placeholder="选择预计使用日期" format="YYYY-MM-DD" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="formData.remark" placeholder="请输入备注信息" type="textarea" rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="handleSubmit">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="billofQuantities">
import { ref, reactive, onMounted, computed, getCurrentInstance, watch, onUnmounted } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import {
  obtainMasterDataList,
  totalsupplyplan,
  totalSupplyplanDetails,
  materialChangeSupplyplan,
  totalSupplyplanBatchEdit
} from '@/api/materials/overallPlanMaterialSupply/index';
import { useUserStoreHook } from '@/store/modules/user';

// 全局状态与实例获取
const userStore = useUserStoreHook();
const currentProject = computed(() => userStore.selectedProject);
const { proxy } = getCurrentInstance();

// 基础状态管理
const visible = ref(false);
const formRef = ref(null);
const tableRef = ref(null);
const file = ref(null);
const isExpandAll = ref(false);
const expandRowKeys = ref([]);
const editDataMap = ref(new Map()); // 用Map存储修改的数据，提高查询效率
const loadingInstance = ref(null);
const fullTreeData = ref([]); // 存储完整树形数据，用于本地懒加载

// 页面核心状态
const state = reactive({
  tableData: [], // 初始只存放根节点
  queryForm: {
    projectId: currentProject.value?.id,
    versions: '',
    sheet: '',
    pageSize: 20,
    pageNum: 1
  },
  loading: {
    versions: false,
    sheets: false,
    list: false
  },
  masterData: {}
});

// 表单数据
const formData = reactive({
  batchNumber: '',
  brand: '',
  compileDate: '',
  dateService: '',
  deliveryPoints: '',
  id: undefined,
  name: '',
  num: '',
  partUsed: '',
  planNumber: '',
  projectId: undefined,
  qualityStandard: '',
  quantity: 0,
  remark: '',
  specification: '',
  status: '',
  texture: '',
  unit: ''
});

// 表单验证规则
const formRules = reactive({
  name: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { max: 100, message: '名称长度不能超过100个字符', trigger: 'blur' }
  ],
  num: [
    { required: true, message: '请输入编号', trigger: 'blur' },
    { max: 50, message: '编号长度不能超过50个字符', trigger: 'blur' }
  ],
  quantity: [
    { required: true, message: '请输入数量', trigger: 'blur' },
    { type: 'number', min: 0, message: '数量不能为负数', trigger: 'blur' }
  ],
  compileDate: [{ required: true, message: '请选择编制日期', trigger: 'change' }]
});

/**
 * 本地数据懒加载实现：从完整数据中筛选子节点
 */
const loadLocalChildNodes = (row, treeNode, resolve) => {
  // 避免重复加载
  if (row.children && row.children.length > 0) {
    resolve(row.children);
    return;
  }

  // 显示加载状态
  loadingInstance.value = ElLoading.service({
    target: tableRef.value.$el,
    text: '加载中...',
    background: 'rgba(255, 255, 255, 0.8)'
  });

  try {
    // 从完整数据中筛选当前行的子节点（假设父ID对应子节点的pid）
    const childNodes = fullTreeData.value.filter((node) => node.pid === row.sid);

    // 标记子节点是否有子节点
    const formattedChildren = childNodes.map((node) => ({
      ...node,
      hasChildren: fullTreeData.value.some((child) => child.pid === node.sid)
    }));

    // 缓存子节点到当前行
    row.children = formattedChildren;
    resolve(formattedChildren);
  } catch (error) {
    resolve([]);
  } finally {
    loadingInstance.value?.close();
  }
};

/**
 * 处理展开状态变化
 */
const handleExpandChange = (row, expanded) => {
  if (expanded) {
    if (!expandRowKeys.value.includes(row.id)) {
      expandRowKeys.value.push(row.id);
    }
  } else {
    expandRowKeys.value = expandRowKeys.value.filter((id) => id !== row.id);
  }
};

/**
 * 一键展开/收起
 */
const toggleExpandAll = async () => {
  isExpandAll.value = !isExpandAll.value;

  if (isExpandAll.value) {
    loadingInstance.value = ElLoading.service({
      target: tableRef.value.$el,
      text: '正在加载...',
      background: 'rgba(255, 255, 255, 0.8)'
    });

    try {
      // 递归加载所有层级子节点
      const loadAllChildren = (nodes) => {
        nodes.forEach((node) => {
          const children = fullTreeData.value.filter((child) => child.pid === node.sid);
          const formattedChildren = children.map((child) => ({
            ...child,
            hasChildren: fullTreeData.value.some((c) => c.pid === child.sid)
          }));
          node.children = formattedChildren;
          if (formattedChildren.length > 0) {
            loadAllChildren(formattedChildren);
          }
        });
      };

      loadAllChildren(state.tableData);
      // 展开所有节点
      state.tableData.forEach((row) => {
        tableRef.value.toggleRowExpansion(row, true);
      });
      ElMessage.success('所有节点已展开');
    } catch (error) {
      ElMessage.error(`一键展开失败：${error.message}`);
    } finally {
      loadingInstance.value?.close();
    }
  } else {
    // 收起所有节点
    state.tableData.forEach((row) => {
      tableRef.value.toggleRowExpansion(row, false);
    });
    expandRowKeys.value = [];
  }
};

/**
 * 处理输入框变化（优化性能）
 */
const handleInputChange = (row, field) => {
  // 只记录修改过的数据，避免全量对比
  if (!editDataMap.value.has(row.id)) {
    editDataMap.value.set(row.id, { ...row });
  }
  const storedData = editDataMap.value.get(row.id);
  storedData[field] = row[field];
  editDataMap.value.set(row.id, storedData);
};
/**
 * 获取主数据列表（核心优化：拆分根节点和完整数据）
 */
async function getMasterDataList() {
  try {
    state.loading.list = true;
    // 获取主数据
    const masterDataRes = await obtainMasterDataList({
      projectId: currentProject.value?.id
    });
    const { data: masterData } = masterDataRes;

    if (!masterData[0]?.id) {
      state.tableData = [];
      fullTreeData.value = [];
      return;
    }
    state.masterData = masterData[0];
    // 获取完整供应计划数据
    const supplyPlanRes = await totalsupplyplan({ id: masterData[0].id, projectId: currentProject.value?.id });
    const allData = supplyPlanRes.rows || [];
    // 存储完整数据到本地
    fullTreeData.value = [...allData];
    // 初始只加载根节点（pid为空或0的节点）
    const rootNodes = allData.filter((item) => !item.pid || item.pid == 0);
    // 标记根节点是否有子节点
    state.tableData = rootNodes.map((node) => ({
      ...node,
      hasChildren: allData.some((child) => child.pid === node.sid)
    }));
    // 初始化可编辑数据映射
    editDataMap.value.clear();
    allData.forEach((item) => {
      if (!item.hasChildren) {
        // 只关注叶子节点
        editDataMap.value.set(item.id, { ...item });
      }
    });
  } catch (error) {
    state.tableData = [];
    fullTreeData.value = [];
  } finally {
    state.loading.list = false;
  }
}

/**
 * 获取详情
 */
async function totalSupplyplanDetail(id) {
  try {
    const result = await totalSupplyplanDetails(id);
    if (result?.code === 200) {
      const detailData = result.data || {};

      // 清空表单并赋值
      Object.keys(formData).forEach((key) => {
        formData[key] = undefined;
      });

      // 处理日期格式
      const formatDate = (date) => {
        if (!date) return '';
        const d = typeof date === 'string' ? new Date(date) : date;
        return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
      };

      Object.assign(formData, {
        ...detailData,
        compileDate: formatDate(detailData.compileDate),
        dateService: formatDate(detailData.dateService)
      });
    } else {
      ElMessage.error(`获取详情失败: ${result?.msg || '未知错误'}`);
    }
  } catch (err) {
    ElMessage.error(`接口请求失败: ${err.message}`);
    console.error('详情接口错误:', err);
  } finally {
    state.loading.list = false;
  }
}

/**
 * 一键保存修改
 */
const editApprovalSheet = async () => {
  state.loading.list = true;
  try {
    // 只提交修改过的数据（从Map中获取）
    const modifiedData = Array.from(editDataMap.value.values());
    if (modifiedData.length === 0) {
      ElMessage.info('没有数据需要修改');
      return;
    }

    await totalSupplyplanBatchEdit(modifiedData);
    ElMessage.success('修改成功');
    getMasterDataList(); // 重新加载数据
  } catch (error) {
    ElMessage.error(`保存失败：${error.message}`);
  } finally {
    state.loading.list = false;
  }
};

/**
 * 提交表单
 */
const handleSubmit = async () => {
  try {
    await formRef.value.validate();
    await materialChangeSupplyplan(formData);
    ElMessage.success('修改成功');
    handleClose();
    getMasterDataList();
  } catch (error) {
    console.error('表单验证失败:', error);
  }
};

/**
 * 导出数据
 */
const handleExport = async () => {
  proxy?.download('/design/totalsupplyplan/export', { projectId: currentProject.value?.id }, `物资供应总计划.xlsx`, true);
};

/**
 * 关闭弹窗
 */
const handleClose = () => {
  visible.value = false;
  formRef.value?.resetFields();
  Object.keys(formData).forEach((key) => {
    formData[key] = undefined;
  });
};

/**
 * 审批
 */
function clickApprovalSheet1() {
  proxy.$tab.closePage(proxy.$route);
  proxy.$router.push({
    path: `/approval/overallPlanMaterialSupply/indexEdit`,
    query: { id: state.masterData.id, type: 'update' }
  });
}

/**
 * 查看流程
 */
function lookApprovalFlow() {
  proxy.$router.push({
    path: `/approval/overallPlanMaterialSupply/indexEdit`,
    query: { id: state.masterData.id, type: 'view' }
  });
}

/**
 * 监听项目变化
 */
const listeningProject = watch(
  () => currentProject.value?.id,
  (nid) => {
    if (nid) getMasterDataList();
  }
);

// 导入成功处理
const handleSuccess = () => {
  ElMessage.success('导入成功');
  getMasterDataList();
};

// 生命周期
onMounted(() => {
  if (currentProject.value?.id) {
    getMasterDataList();
  }
});

onUnmounted(() => {
  listeningProject();
  loadingInstance.value?.close();
});
</script>

<style>
.overall-plan-material-supply {
  padding: 20px;
}

.space-y-4 > .el-row {
  margin-bottom: 16px;
}

.space-y-4 > .el-row:last-child {
  margin-bottom: 0;
}
</style>