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

张诺

4 天以前 7c86b549b27bd54f6bd5de81c13f8242f91c87ff

 src/views/production/index.vue

@@ -1,274 +1,247 @@
<template>
  <div class="production-container">
    <div class="search-bar">
      <el-input v-model="searchForm.keyword" placeholder="请输入关键词" clearable />
      <el-input v-model="searchForm.addUser" placeholder="请输入人" clearable />
      <el-button type="primary" @click="handleSearch">查询</el-button>
      <el-button @click="handleReset">重置</el-button>
    </div>
    <!-- 搜索表单 -->
    <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>

    <div class="operation-bar">
      <!-- <el-button type="primary" @click="handleAdd">新增配项</el-button> -->
      <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>
    </div>
    <!-- 主要内容区域 -->
    <el-card>
      <!-- 操作按钮 -->
      <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>

    <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="sequence" label="序号" width="80" />
      <el-table-column prop="category" label="煤种" width="120" />
      <el-table-column prop="unit" label="单位" width="100" />
      <el-table-column prop="productionVolume" label="生产数量" width="120" />
      <el-table-column prop="laborCost" label="人工成本" width="120" />
      <el-table-column prop="materialCost" label="原料成本" width="120" />
      <el-table-column prop="equipmentCost" label="设备费用" width="120" />
      <el-table-column prop="totalCost" label="总成本" width="120" />
      <el-table-column prop="totalPrice" label="总成本" width="120" />
      <el-table-column prop="profit" label="利润" width="100" />
      <el-table-column prop="reviewer" label="复记人" width="120" />
      <el-table-column prop="date" label="日期" width="120" />
      <el-table-column label="操作" fixed="right" width="220">
        <template #default="scope">
          <el-button type="primary" link @click="handleEdit(scope.row)">登记</el-button>
          <el-button type="success" link @click="handleEdit(scope.row)">编辑</el-button>
          <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
          <el-button type="warning" link @click="handleExport(scope.row)">导出</el-button>
      <!-- 数据表格 -->
      <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>
      </el-table-column>
    </el-table>
      </ETable>

    <div class="pagination">
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.pageSize"
        :page-sizes="[10, 20, 30, 50]"
        :total="pagination.total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      <!-- 分页组件 -->
      <Pagination
        :total="total"
        :page="queryParams.current"
        :limit="queryParams.size"
        @pagination="handlePageChange"
      />
    </div>
    </el-card>

    <!-- 弹窗组件 -->
    <!-- 生产对话框 -->
    <ProductionDialog
      v-model:visible="dialogVisible"
      ref="dialogRef"
      :type="dialogType"
      :row-data="currentRow"
      @success="handleDialogSuccess"
    />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Delete, Download } from "@element-plus/icons-vue";
import ProductionDialog from './components/ProductionDialog.vue'
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
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 searchForm = reactive({
  keyword: '',
  addUser: ''
})
// 表格列配置
const columns = [
  { prop: "coal", label: "煤种", minWidth: 150, slot: 'coal' },
  { prop: "productionQuantity", label: "生产数量", minWidth: 120 },
  { prop: "laborCost", label: "人工成本", minWidth: 150 },
  { prop: "energyConsumptionCost", label: "能耗成本", minWidth: 120 },
  { prop: "equipmentDepreciation", label: "设备折旧", minWidth: 143 },
  { prop: "totalCost", label: "总成本", minWidth: 150 },
  { prop: "producer", label: "生产人", minWidth: 150 },
];

// 表格数据
const tableData = ref([])
const loading = ref(false)
// 响应式数据
const tableData = ref([]);
const loading = ref(false);
const total = ref(0);
const selectedRows = ref([]);
const dialogVisible = ref(false);
const dialogType = ref("add");
const dialogRef = ref(null);

// 分页数据
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 选中的行数据
const selectedRows = ref([])

// 弹窗相关
const dialogVisible = ref(false)
const dialogType = ref('add')
const currentRow = ref(null)
// 查询参数
const queryParams = reactive({
  searchAll: "",
  current: 1,
  size: 10,
});

// 获取表格数据
// 获取表格数据
const getList = async () => {
  loading.value = true
  loading.value = true;
  try {
    // 构建正确的分页参数
    const params = {
      ...searchForm,
      pageNum: pagination.currentPage,
      pageSize: pagination.pageSize
    }
    // const res = await getProductionList(params)
    // 假数据
    const res = {
      data: {
        list: [{
          sequence: 1,
          category: '煤种',
          unit: '单位',
          productionVolume: '生产数量',
          laborCost: '人工成本',
          materialCost: '原料成本',
          equipmentCost: '设备费用',
          totalCost: '总成本',
          totalPrice: '总成本',
          profit: '利润',
          reviewer: '复记人',
          date: '日期'
        }],
        total: 0
      }
    }
      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
    };
    

    tableData.value = res.data.list
    pagination.total = res.data.total
    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('获取数据失败')
    ElMessage.error("获取数据失败");
    console.error('API错误:', error);
  } finally {
    loading.value = false
    loading.value = false;
  }
}
};

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

// 搜索方法
// 搜索和重置
const handleSearch = () => {
  pagination.currentPage = 1
  getList()
}
  queryParams.current = 1;
  getList();
};

// 重置搜索
const handleReset = () => {
  searchForm.keyword = ''
  searchForm.addUser = ''
  handleSearch()
}
  queryParams.searchAll = "";
  handleSearch();
};

// 新增配项
const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
}
// 分页处理
const handlePageChange = ({ page }) => {
  queryParams.current = page;
  getList();
};

// 新增加工
const handleAddBatch = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
}
// 表格选择处理
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// 编辑
const handleEdit = (row) => {
  currentRow.value = row
  dialogType.value = 'edit'
  dialogVisible.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' ? '新增失败' : '更新失败')
// 打开对话框 - 统一处理新增和编辑
const openDialog = (type, row = null) => {
  dialogType.value = type;
  dialogVisible.value = true;
  
  if (type === 'add') {
    dialogRef.value?.Initialization();
  } else if (type === 'edit' && row) {
    dialogRef.value?.editInitialization({ ...row });
  }
}
};

// 删除
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 handleDialogSuccess = () => {
  getList();
  ElMessage.success("操作成功");
};

// 导出
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.pageSize = val
  getList()
}

// 处理页码变化
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>
<style scoped lang="scss">
.production-container {
  padding: 20px;

  .el-card:nth-child(1) {
    margin-bottom: 20px;
  }
}

.search-bar {
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.operation-bar {
  .el-input {
    width: 20%;
  }
}
.search-form {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  display: flex;
  gap: 10px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  .el-form-item {
    margin-right: 10px;
  }

  .el-button {
    margin-left: 10px;
  }
}
</style> 
.coal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  
  .el-tag {
    margin-right: 4px;
    margin-bottom: 4px;
    
    &:last-child {
      margin-right: 0;
    }
  }
}
</style>