优化文件上传组件及表格显示

张诺

41 分钟以前 7c86b549b27bd54f6bd5de81c13f8242f91c87ff

 src/views/production/index.vue

@@ -1,226 +1,201 @@
<template>
  <div class="production-container">
        <el-form :inline="true" :model="queryParams" class="search-form" style="width: 100%">
          <el-form-item label="搜索">
            <el-input v-model="queryParams.searchAll" placeholder="请输入关键词" clearable />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleSearch">查询</el-button>
            <el-button @click="handleReset">重置</el-button>
          </el-form-item>
        </el-form>
    <!-- 搜索表单 -->
    <el-form :inline="true" :model="queryParams" class="search-form">
      <el-form-item label="搜索">
        <el-input
          v-model="queryParams.searchAll"
          placeholder="请输入关键词"
          clearable
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 主要内容区域 -->
    <el-card>
      <el-button type="success" :icon="Plus" @click="handleAddBatch">新增加工</el-button>
      <el-button type="danger" :icon="Delete">删除</el-button>
      <el-button type="info" :icon="Download">导出</el-button>
      <ETable :loading="loading" :table-data="tableData" :columns="columns" @selection-change="handleSelectionChange"
        @edit="handleEdit" @view-detail="handleViewDetail" :show-selection="true" :border="true" :maxHeight="480" />
      <!-- 操作按钮 -->
      <div class="toolbar">
        <el-button type="success" :icon="Plus" @click="openDialog('add')">
          新增加工
        </el-button>
        <el-button type="danger" :icon="Delete" :disabled="!selectedRows.length">
          删除
        </el-button>
      </div>

      <!-- 数据表格 -->
      <ETable
        :loading="loading"
        :table-data="tableData"
        :columns="columns"
        @selection-change="handleSelectionChange"
        @edit="row => openDialog('edit', row)"
        :show-selection="true"
        :border="true"
        :maxHeight="480"
      >
        <template #coal="{ row }">
          <div class="coal-tags">
            <el-tag v-for="coal in parseCoalArray(row.coal)" :key="coal" size="small">
              {{ coal }}
            </el-tag>
            <span v-if="!row.coal">--</span>
          </div>
        </template>
      </ETable>

      <!-- 分页组件 -->
      <Pagination
        :total="total"
        :page="queryParams.current"
        :limit="queryParams.size"
        :show-total="true"
        @pagination="handlePageChange"
        :layout="'total, prev, pager, next, jumper'"
      ></Pagination>
      />
    </el-card>
    <ProductionDialog v-model:visible="dialogVisible"  ref="childRef" :type="dialogType"
      @success="handleDialogSuccess" />

    <!-- 生产对话框 -->
    <ProductionDialog
      v-model:visible="dialogVisible"
      ref="dialogRef"
      :type="dialogType"
      @success="handleDialogSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Delete, Download, List } from "@element-plus/icons-vue";
import { Plus, Delete } from "@element-plus/icons-vue";
import ProductionDialog from "./components/ProductionDialog.vue";
import ETable from "@/components/Table/ETable.vue";
import Pagination from "@/components/Pagination/index.vue";
import { getProductionMasterList } from "@/api/production";
const childRef = ref(null);

// 表格列配置
const columns = [
  { prop: "category", label: "煤种", minWidth: 150 },
  { prop: "unit", label: "单位", minWidth: 120 },
  { prop: "productionVolume", label: "生产数量", minWidth: 150 },
  { prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' },
  { prop: "productionQuantity", label: "生产数量", minWidth: 120 },
  { prop: "laborCost", label: "人工成本", minWidth: 150 },
  { prop: "materialCost", label: "原料成本", minWidth: 120 },
  { prop: "equipmentCost", label: "设备费用", minWidth: 143 },
  { prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 },
  { prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143 },
  { prop: "totalCost", label: "总成本", minWidth: 150 },
  { prop: "totalPrice", label: "总售价", minWidth: 150 },
  { prop: "profit", label: "利润", minWidth: 100 },
  { prop: "reviewer", label: "复记人", minWidth: 120 },
  { prop: "date", label: "日期", minWidth: 150 },
  { prop: "producer", label: "生产人", minWidth: 150 },
];

// 搜索表单数据

// 表格数据
// 响应式数据
const tableData = ref([]);
const loading = ref(false);
const total = ref(0);

const queryParams = reactive({
  searchAll:"",
  current: 1,
  size: 10, // 固定每页10条
});
const handlePageChange = ({ page }) => {
  console.log("分页变化:", { page });
  queryParams.current = page;
  getList();
};
// 选中的行数据
const selectedRows = ref([]);

// 弹窗相关
const dialogVisible = ref(false);
const dialogType = ref("add");
const currentRow = ref(null);
const dialogRef = ref(null);

// 生产明细对话框控制
const detailDialogVisible = ref(false);
const currentDetailRow = ref(null);
// 查询参数
const queryParams = reactive({
  searchAll: "",
  current: 1,
  size: 10,
});

// 获取表格数据
// 获取表格数据
const getList = async () => {
  loading.value = true;
  try {
    const res = await getProductionMasterList({...queryParams});
    // 构建正确的分页参数
    const params = {
      searchAll: queryParams.searchAll,
      // 尝试多种常见的分页参数格式
      current: queryParams.current,
      size: queryParams.size,
      page: queryParams.current,
      pageSize: queryParams.size,
      pageNum: queryParams.current,
      limit: queryParams.size,
      offset: (queryParams.current - 1) * queryParams.size
    };
    
    console.log('发送分页参数:', params);
    console.log(`第${queryParams.current}页应该显示第${(queryParams.current - 1) * queryParams.size + 1}-${queryParams.current * queryParams.size}条数据`);
    
    const res = await getProductionMasterList(params);
    tableData.value = res.data.records || [];
    total.value = res.data.total || 0;
    
    console.log('接收到的数据:', {
      当前页: queryParams.current,
      返回条数: tableData.value.length,
      总条数: total.value
    });
  } catch (error) {
    ElMessage.error("获取数据失败");
    console.error('API错误:', error);
  } finally {
    loading.value = false;
  }
};

// 处理表格选择变化
// 搜索和重置
const handleSearch = () => {
  queryParams.current = 1;
  getList();
};

const handleReset = () => {
  queryParams.searchAll = "";
  handleSearch();
};

// 分页处理
const handlePageChange = ({ page }) => {
  queryParams.current = page;
  getList();
};

// 表格选择处理
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// 搜索方法
const handleSearch = () => {
  pagination.currentPage = 1;
  getList();
};

// 重置搜索
const handleReset = () => {
  handleSearch();
};

// 新增加工
const handleAddBatch = () => {
  dialogType.value = "add";
// 打开对话框 - 统一处理新增和编辑
const openDialog = (type, row = null) => {
  dialogType.value = type;
  dialogVisible.value = true;
  childRef.value.Initialization();
};

// 编辑
const handleEdit = (row) => {
  currentRow.value = row;
  dialogType.value = "edit";
  dialogVisible.value = true;
};

// 打开生产明细对话框
const handleViewDetail = (row) => {
  currentDetailRow.value = row;
  detailDialogVisible.value = true;
};

// 处理弹窗提交
const handleDialogSuccess = async (formData) => {
  try {
    if (dialogType.value === "add") {
      await addProduction(formData);
      ElMessage.success("新增成功");
    } else {
      await updateProduction({
        ...formData,
        id: currentRow.value.id,
      });
      ElMessage.success("更新成功");
    }
    getList();
  } catch (error) {
    ElMessage.error(dialogType.value === "add" ? "新增失败" : "更新失败");
  
  if (type === 'add') {
    dialogRef.value?.Initialization();
  } else if (type === 'edit' && row) {
    dialogRef.value?.editInitialization({ ...row });
  }
};

// 处理生产明细弹窗提交
const handleDetailDialogSuccess = async (formData) => {
  try {
    ElMessage.success("保存成功");
    getList();
  } catch (error) {
    ElMessage.error("保存失败");
  }
};

// 删除
const handleDelete = (row) => {
  ElMessageBox.confirm("确认删除该记录吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      try {
        await deleteProduction(row.id);
        ElMessage.success("删除成功");
        getList();
      } catch (error) {
        console.error("删除失败:", error);
        ElMessage.error("删除失败");
      }
    })
    .catch(() => {
      ElMessage.info("已取消删除");
    });
};

// 导出
const handleExport = async (row) => {
  try {
    const res = await exportProduction({ id: row.id });
    const blob = new Blob([res], { type: "application/vnd.ms-excel" });
    const fileName = `生产加工记录_${new Date().getTime()}.xlsx`;
    if ("download" in document.createElement("a")) {
      const elink = document.createElement("a");
      elink.download = fileName;
      elink.style.display = "none";
      elink.href = URL.createObjectURL(blob);
      document.body.appendChild(elink);
      elink.click();
      URL.revokeObjectURL(elink.href);
      document.body.removeChild(elink);
    } else {
      navigator.msSaveBlob(blob, fileName);
    }
  } catch (error) {
    ElMessage.error("导出失败");
  }
};

// 处理每页显示数量变化
const handleSizeChange = (val) => {
  pagination.size = val;
// 对话框成功回调
const handleDialogSuccess = () => {
  getList();
  ElMessage.success("操作成功");
};

// 处理页码变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val;
  getList();
// 解析煤种数组 - 简化逻辑
const parseCoalArray = (coalString) => {
  if (!coalString) return [];
  
  if (Array.isArray(coalString)) return coalString;
  
  return String(coalString)
    .replace(/^\[|\]$/g, '')
    .split(',')
    .map(item => item.trim())
    .filter(Boolean);
};

// 组件挂载时加载数据
onMounted(() => {
  getList();
});
onMounted(getList);
</script>

<style scoped lang="scss">
@@ -241,7 +216,7 @@
    width: 20%;
  }
}
.search-form{
.search-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
@@ -255,4 +230,18 @@
    margin-left: 10px;
  }
}
.coal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  
  .el-tag {
    margin-right: 4px;
    margin-bottom: 4px;
    
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>