添加生产管理接口及优化表格字段

张诺

23 小时以前 7619d415522ab3dc3299d6a2a9f5c9964a692d3f

 src/views/production/index.vue

@@ -22,59 +22,64 @@
        <el-button type="success" :icon="Plus" @click="openDialog('add')">
          新增加工
        </el-button>
        <el-button type="danger" :icon="Delete" :disabled="!selectedRows.length">
        <el-button type="danger" :icon="Delete" :disabled="!selectedRows.length" @click="() => deleteSelected(delPM)">
          删除
        </el-button>
      </div>

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

      <!-- 分页组件 -->
      </ETable>      <!-- 分页组件 -->
      <Pagination
        :layout="'total, prev, pager, next, jumper'"
        :total="total"
        :page="queryParams.current"
        v-model:page="queryParams.current"
        :limit="queryParams.size"
        @pagination="handlePageChange"
      />
    </el-card>

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

<script setup>
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { onMounted } from "vue";
import { ElMessage } 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";
import { getProductionMasterList, delPM } from "@/api/production";
import { parseCoalArray } from "@/utils/production";
import { useTableData } from "./components/useTableData.js";
import { useDialog } from "./components/useDialog.js";
import { useCoalData } from "./components/useCoalData.js";

// 表格列配置
const columns = [
@@ -87,115 +92,53 @@
  { prop: "producer", label: "生产人", minWidth: 150 },
];

// 响应式数据
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 {
  tableData,
  loading,
  total,
  selectedRows,
  queryParams,
  getList,
  handleSearch,
  handleReset,
  handlePageChange,
  handleSelectionChange,
  deleteSelected
} = useTableData(getProductionMasterList, { pageSize: 10 });

// 查询参数
const queryParams = reactive({
  searchAll: "",
  current: 1,
  size: 10,
});
// 使用对话框组合式函数
const {
  dialogVisible,
  dialogType,
  dialogRef,
  openDialog,
  handleDialogSuccess: onDialogSuccess
} = useDialog();

// 获取表格数据
// 获取表格数据
const getList = async () => {
  loading.value = true;
  try {
    // 构建正确的分页参数
    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 { getCoalNameById, getCoalData } = useCoalData();

// 搜索和重置
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 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 handleProductionAndProcessing = (row, rows) => {
  const index = tableData.value.findIndex(item => item.id === rows.id);
  if (index !== -1) {
    tableData.value[index] = { ...tableData.value[index], ...row };
  }
};

// 对话框成功回调
const handleDialogSuccess = () => {
  getList();
  ElMessage.success("操作成功");
  onDialogSuccess(() => {
    getList();
    ElMessage.success("操作成功");
  });
};

// 解析煤种数组 - 简化逻辑
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(async () => {
  await getCoalData(); // 预加载煤种数据
  getList();
});
</script>

<style scoped lang="scss">