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

张诺

2 天以前 0f4dc4ea8a7de1ffdf34a640c79c29d55b79321c

 src/views/production/index.vue

@@ -1,275 +1,258 @@
<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>

    <div class="operation-bar">
      <el-button type="primary" @click="handleAdd">新增配项</el-button>
      <el-button type="success" @click="handleAddBatch">新增加工</el-button>
      <el-button type="warning">修改</el-button>
      <el-button type="danger">删除</el-button>
      <el-button type="info">导出</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>
        </template>
      </el-table-column>
    </el-table>

    <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"
      />
    </div>

    <!-- 弹窗组件 -->
    <ProductionDialog-dialog
      v-model:visible="dialogVisible"
      :type="dialogType"
      :row-data="currentRow"
      @success="handleDialogSuccess"
    />
        <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-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" />
      <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" />
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getProductionList, addProduction, updateProduction, deleteProduction, exportProduction } from '@/api/production'
import ProductionDialog from './components/ProductionDialog.vue'
import { ref, reactive, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Plus, Delete, Download, List } 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: "laborCost", label: "人工成本", minWidth: 150 },
  { prop: "materialCost", label: "原料成本", minWidth: 120 },
  { prop: "equipmentCost", 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 },
];

// 搜索表单数据
const searchForm = reactive({
  keyword: '',
  addUser: ''
})

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

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

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

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

// 生产明细对话框控制
const detailDialogVisible = ref(false);
const currentDetailRow = ref(null);

// 获取表格数据
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
      }
    }
    

    tableData.value = res.data.list
    pagination.total = res.data.total
    const res = await getProductionMasterList({...queryParams});
    tableData.value = res.data.records || [];
    total.value = res.data.total || 0;
  } catch (error) {
    ElMessage.error('获取数据失败')
    ElMessage.error("获取数据失败");
  } finally {
    loading.value = false
    loading.value = false;
  }
}
};

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

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

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

// 新增配项
const handleAdd = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
}
  handleSearch();
};

// 新增加工
const handleAddBatch = () => {
  dialogType.value = 'add'
  dialogVisible.value = true
}
  dialogType.value = "add";
  dialogVisible.value = true;
  childRef.value.Initialization();
};

// 编辑
const handleEdit = (row) => {
  currentRow.value = row
  dialogType.value = 'edit'
  dialogVisible.value = true
}
  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('新增成功')
    if (dialogType.value === "add") {
      await addProduction(formData);
      ElMessage.success("新增成功");
    } else {
      await updateProduction({
        ...formData,
        id: currentRow.value.id
      })
      ElMessage.success('更新成功')
        id: currentRow.value.id,
      });
      ElMessage.success("更新成功");
    }
    getList()
    getList();
  } catch (error) {
    ElMessage.error(dialogType.value === 'add' ? '新增失败' : '更新失败')
    ElMessage.error(dialogType.value === "add" ? "新增失败" : "更新失败");
  }
}
};

// 处理生产明细弹窗提交
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('已取消删除')
  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)
    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)
      navigator.msSaveBlob(blob, fileName);
    }
  } catch (error) {
    ElMessage.error('导出失败')
    ElMessage.error("导出失败");
  }
}
};

// 处理每页显示数量变化
const handleSizeChange = (val) => {
  pagination.pageSize = val
  getList()
}
  pagination.size = val;
  getList();
};

// 处理页码变化
const handleCurrentChange = (val) => {
  pagination.currentPage = val
  getList()
}
  pagination.currentPage = val;
  getList();
};

// 组件挂载时加载数据
onMounted(() => {
  getList()
})
  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> 
</style>