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

张诺

2 天以前 7619d415522ab3dc3299d6a2a9f5c9964a692d3f

 src/views/production/components/ProductionDialog.vue

@@ -1,4 +1,4 @@
div<template>
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogType === 'add' ? '新增生产加工' : '编辑生产加工'"
@@ -6,60 +6,84 @@
    :close-on-click-modal="false"
    @close="handleClose"
  >
    <el-button type="primary" @click="handlData">选择数据</el-button>
    <ETable
      v-if="tableData.length > 0"
      :columns="columns"
      height="200"
      @cell-edit="handleCellEdit"
      :showOperations="false"
      :tableData="tableData"
      @row-click="handleRowClick"
      :editableColumns="['used']"
    />
    <div class="empty-table">
    <h1>生产明细</h1>
      <el-row :gutter="10" v-if="tableData.length > 0">
      <el-col :span="2">
        <el-button type="primary" @click="addNewRow">
          <el-icon>
            <Plus />
          </el-icon>
          新增
        </el-button>
    <el-row :gutter="10" style="margin-bottom: 10px">
      <el-col :span="3">
        <el-button type="primary" @click="handlData"
          ><el-icon> <Plus /> </el-icon>选择数据</el-button
        >
      </el-col>
      <el-col :span="2">
        <el-button type="danger" @click="clearAllRows">
      <el-col :span="4">
        <el-button
          type="danger"
          @click="removeSelectedData"
          :disabled="tableData.length === 0"
        >
          <el-icon>
            <Delete />
          </el-icon>
          清空
          清空已选
        </el-button>
      </el-col>
      <!-- <el-col :span="2">
        <el-button type="warning" @click="calculateAllCosts">
          <el-icon>
            <Warning />
          </el-icon> 重新计算
        </el-button>
      </el-col> -->
      <el-col :span="17" style="text-align: right; line-height: 32px">
        <el-text type="info" size="small">
          已选择 {{ tableData.length }} 项数据
          <span v-if="tableData.length > 0">
            ，总使用量: {{ totalUsedQuantity.toFixed(2) }}
          </span>
        </el-text>
      </el-col>
    </el-row>
    <ProductionDetailsTable
     v-if="tableData.length > 0"
      v-model="detailsTableData"
      :border="false"
      :show-operations="true"
      :auto-calculate="true"
      @input-change="handleDetailsChange"
      @delete-row="handleDeleteRow"
    <ETableModify
      :columns="columns"
      :showOperations="false"
      height="200"
      @cell-edit="handleCellEdit"
      :tableData="tableData"
      :showOverflowTooltip="false"
      @row-click="handleRowClick"
      :editableColumns="['usedQuantity']"
      @delete="handleRemoveItem"
    />
      <div style="margin-top: 20px;" v-else>暂无数据，请选择配置数据</div>

    <div class="empty-table">
      <h1>生产明细</h1>
      <el-row :gutter="10">
        <el-col :span="2">
          <el-button type="primary" @click="addNewRow">
            <el-icon>
              <Plus />
            </el-icon>
            新增
          </el-button>
        </el-col>
        <!-- <el-col :span="2">
          <el-button type="danger" @click="clearAllRows">
            <el-icon>
              <Delete />
            </el-icon>
            清空
          </el-button>
        </el-col> -->
      </el-row>
      <ProductionDetailsTable
        v-model="detailsTableData"
        :border="false"
        :show-operations="true"
        :auto-calculate="true"
        @input-change="handleDetailsChange"
        @delete-row="handleDeleteRow"
      />
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          @click="handleClose"
          v-if="dialogType === 'add' || dialogType === 'edit'"
          >取 消</el-button
        >
        <!-- <el-button @click="handleReset" v-if="dialogType === 'edit'"
          >重 置</el-button
        > -->
        <el-button type="primary" :loading="loading" @click="handleSubmit"
          >确 定</el-button
        >
@@ -70,377 +94,406 @@
    v-model="innerVisible"
    width="1000"
    title="选择配置数据"
    center
    append-to-body
  >
    <div style="margin-bottom: 10px">
      <el-alert
        v-if="tableData.length > 0"
        :title="`当前已选择 ${tableData.length} 条数据`"
        type="info"
        :closable="false"
        show-icon
      />
    </div>
    <ETable
      :showIndex="false"
      :showOverflowTooltip="false"
      @selection-change="handleSelectionChange"
      :showOperations="false"
      :columns="formalDatabaseDataColumns"
      ref="etableRef"
      :columns="formalDatabaseColumns"
      :tableData="formalDatabaseData"
      :defaultSelectedIds="selectedIds"
      :rowKey="'id'"
      height="400"
      @cell-edit="handleCellEdit"
      :show-selection="true"
    />
    <el-row :gutter="24">
      <el-col :span="2" :offset="22">
        <el-button type="primary" @click="handleSelectData">确定</el-button>
    <el-row :gutter="24" style="margin-top: 15px">
      <el-col :span="12">
        <el-text type="info">
          已选择 {{ formalDatabaseSelectedData.length }} 条数据
        </el-text>
      </el-col>
      <el-col :span="12" style="text-align: right">
        <el-button @click="innerVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="handleSelectData"
          :disabled="formalDatabaseSelectedData.length === 0"
        >
          确定添加
        </el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch } from "vue";
import ETable from "@/components/Table/EtableModify.vue";
import { ref, reactive, watch, onMounted, nextTick, computed } from "vue";
import ETable from "@/components/Table/ETable.vue";
import ETableModify from "@/components/Table/EtableModify.vue";
import ProductionDetailsTable from "./ProductionDetailsTable.vue";
import { ElMessage } from "element-plus";
import { ElMessage, ElMessageBox, ElAlert, ElText } from "element-plus";
import { Delete, Warning, Plus } from "@element-plus/icons-vue";
import {
  getOfficialAll,
  addOrEditPM,
  deleteProductionInventory,
} from "@/api/production/index.js";
import { validateFormData, validateNumber, deepClone, createDefaultProductionRow } from "@/utils/production";
import { useCoalData } from "./useCoalData";
import useUserStore from "@/store/modules/user";

// Props 和 Emits
const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  type: {
    type: String,
    default: "add", // 'add' 或 'edit'
  },
  rowData: {
    type: Object,
    default: () => ({}),
  },
  visible: { type: Boolean, default: false },
  type: { type: String, default: "add" },
  rowData: { type: Object, default: () => ({}) },
});
const dialogVisible = defineModel("visible", {
  type: Boolean,
  default: false,
});
const emit = defineEmits(["update:visible", "success"]);

const dialogVisible = defineModel("visible", { type: Boolean, default: false });
const emit = defineEmits(["update:visible", "success", "update:productionAndProcessing"]);

// 用户信息和煤种数据
const userStore = useUserStore();
const { getCoalNameById } = useCoalData();
let userInfo;

// 对话框状态
const innerVisible = ref(false);
const dialogType = ref("add");
const loading = ref(false);
const formRef = ref(null);
const etableRef = ref(null);

// 数据状态
const tableData = ref([]);
const detailsTableData = ref([]);
const formalDatabaseData = ref([]);
const formalDatabaseSelectedData = ref([]);
const selectedIds = ref([]);
const currentRow = ref(null);
const copyForm = ref(null);
// 表格列配置
const columns = [
  { label: "煤种", prop: "category" },
  { label: "热值", prop: "Calorific" },
  { label: "库存数量", prop: "stock" },
  { label: "本次使用数量", prop: "used" },
];
const detailsTableData = ref([
  { label: "煤种", prop: "coal", minwidth: 120 },
  { label: "库存数量", prop: "inventoryQuantity", minwidth: 100 },
  {
    coalType: "",
    calorificValue: "",
    productionQuantity: "",
    laborCost: "",
    energyCost: "",
    equipmentDepreciation: "",
    purchasePrice: "",
    totalCost: "",
    label: "使用数量",
    prop: "usedQuantity",
    editable: true,
    minwidth: 120,
    editType: "number",
  },
];

const formalDatabaseColumns = ref([
  { prop: "supplierName", label: "供应商名称", minwidth: 150 },
  { prop: "coal", label: "煤种类型", minwidth: 60 },
  { prop: "inventoryQuantity", label: "库存数量", minwidth: 80 },
  { prop: "unit", label: "单位", minwidth: 20 },
  { prop: "priceExcludingTax", label: "单价（不含税）", minwidth: 80 },
  { prop: "createTime", label: "登记日期", width: 200 },
]);
// 工具函数
const debugIdMatching = () => {
  if (formalDatabaseData.value.length > 0 && selectedIds.value.length > 0) {
    const matchedRows = formalDatabaseData.value.filter((row) =>
      selectedIds.value.includes(row.id)
    );
  }
};

const handleRowClick = (row) => {
  currentRow.value = row;
};
const formalDatabaseDataColumns = ref([
  { prop: "name", label: "供应商名称", width: 150 },
  { prop: "type", label: "煤种类型", width: 120 },
  { prop: "unit", label: "单位", width: 100 },
  { prop: "number", label: "采购数量", width: 100 },
  { prop: "money", label: "单价（含税）", width: 120 },
  { prop: "money1", label: "总价（含税）", width: 120 },
  { prop: "money2", label: "税率", width: 80 },
  { prop: "money3", label: "不含税单价", width: 120 },
  { prop: "createUser", label: "登记人", width: 100 },
  { prop: "createTime", label: "登记日期", width: 150 },
]);
// 表单数据
const formData = reactive({
  category: "",
  unit: "",
  productionVolume: 0,
  laborCost: 0,
  materialCost: 0,
  equipmentCost: 0,
  totalCost: 0,
  totalPrice: 0,
  profit: 0,
  reviewer: "",
  date: "",
});
const handlData = () => {

// 获取配置数据
const handlData = async () => {
  innerVisible.value = true;
  let res = await getOfficialAll();
  if (res.code === 200) {
    formalDatabaseData.value = res.data;
    const existingOfficialIds = tableData.value
      .map((item) => item.officialId)
      .filter((id) => id);
    selectedIds.value = existingOfficialIds;
    debugIdMatching();
    nextTick(() => {
      setTimeout(() => {
        if (etableRef.value && existingOfficialIds.length > 0) {
          etableRef.value.setDefaultSelection();
        }
      }, 100);
    });
  } else {
    ElMessage.error("获取配置数据失败");
  }
};
const formalDatabaseData = ref([]);
const formalDatabaseSelectedData = ref([]);
formalDatabaseData.value = [
  {
    id: 1,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 120,
    money: 500,
    money1: 200,
    money2: 200,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 2,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 100,
    money: 600,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 3,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 300,
    money: 789,
    money1: 400,
    money2: 400,
    money3: 400,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 4,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 256,
    money: 800,
    money1: 420,
    money2: 420,
    money3: 420,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 5,
    name: "供应商C",
    type: "无烟煤",
    unit: "吨",
    number: 256,
    money: 700,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 6,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 120,
    money: 500,
    money1: 200,
    money2: 200,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 7,
    name: "供应商A",
    type: "动力煤",
    unit: "吨",
    number: 100,
    money: 600,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 8,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 300,
    money: 789,
    money1: 400,
    money2: 400,
    money3: 400,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 9,
    name: "供应商B",
    type: "焦煤",
    unit: "吨",
    number: 256,
    money: 800,
    money1: 420,
    money2: 420,
    money3: 420,
    money4: "低位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
  {
    id: 10,
    name: "供应商C",
    type: "无烟煤",
    unit: "吨",
    number: 256,
    money: 700,
    money1: 300,
    money2: 300,
    money3: 300,
    money4: "高位",
    createUser: "admin",
    createTime: "2025-06-01",
  },
];
// 手动设置表格选中状态
const setTableSelection = (ids) => {
  if (!etableRef.value || !Array.isArray(ids) || ids.length === 0) {
    return;
  }

// 表单验证规则
const rules = {
  category: [{ required: true, message: "请选择煤种", trigger: "change" }],
  nextTick(() => {
    setTimeout(() => {
      try {
        etableRef.value.clearSelection();
        const rowsToSelect = formalDatabaseData.value.filter((row) =>
          ids.includes(row.id)
        );
        if (rowsToSelect.length > 0) {
          etableRef.value.setRowsSelection(rowsToSelect, true);
        }
      } catch (error) {
      }
    }, 150);
  });
};

// 初始化
// 初始化和编辑初始化
const Initialization = () => {
  console.log("初始化数据");
  tableData.value = [];
  detailsTableData.value = [];
  copyForm.value = null;
  dialogType.value = "add";
};

const editInitialization = (data) => {
  copyForm.value = deepClone(data);
  tableData.value = data.productionInventoryList || [];
  detailsTableData.value = data.productionList || [];
  dialogType.value = "edit";
  const existingOfficialIds = tableData.value
    .map((item) => item.officialId)
    .filter((id) => id);
  selectedIds.value = existingOfficialIds;
};
// 监听对话框状态，在打开时设置选中状态
watch(innerVisible, (newVal) => {
  if (newVal && selectedIds.value.length > 0) {
    setTimeout(() => setTableSelection(selectedIds.value), 200);
  }
  // 对话框关闭时清空选择状态
  if (!newVal) {
    formalDatabaseSelectedData.value = [];
  }
});

defineExpose({
  Initialization
  Initialization,
  editInitialization,
});
const handleSelectData = (row) => {
  tableData.value = [];
  if (!innerVisible.value) return;
  // 获取选中的数据
  const selectedData = formalDatabaseSelectedData.value;
  if (selectedData.length === 0) {
    ElMessage.warning("请至少选择一条数据");
    return;
  }
  // 将选中的数据根据需要筛选到表格中
  let addedCount = 0;
  let duplicateCount = 0;
  selectedData.forEach((item) => {
    const existingItem = tableData.value.find(
      (row) => row.id === item.id
    );
    if (!existingItem) {
      tableData.value.push({
        id: item.id,
        category: item.type,
        Calorific: item.money4,
        stock: item.number,
        used: 0, // 初始使用数量为0
      });
    }
    const newItem = {
      ...item, // 复制所有原始数据
      officialId: item.id, // 保存原始的id作为officialId
      usedQuantity: 0, // 初始使用数量为0
      // 可以根据需要添加其他字段
    };
    tableData.value.push(newItem);
    addedCount++;
  });

  // 更新selectedIds，确保包含所有当前tableData中的officialId
  const allOfficialIds = tableData.value
    .map((item) => item.officialId)
    .filter((id) => id);
  selectedIds.value = allOfficialIds;

  // 关闭选择对话框
  innerVisible.value = false;

  // 显示结果消息
  let message = "";
  if (addedCount > 0) {
    message += `成功添加 ${addedCount} 条数据`;
  }
  if (duplicateCount > 0) {
    message += (message ? "，" : "") + `跳过 ${duplicateCount} 条重复数据`;
  }
  if (message) {
    ElMessage.success(message);
  } else {
    ElMessage.info("没有新数据被添加");
  }
};
const handleSelectionChange = (selection) => {
  formalDatabaseSelectedData.value = selection;
};
const reset = () => {
  // formRef
  formRef.value?.resetFields();
};

const selectChange = (value) => {};

// 提交表单
// 提交表单 - 使用工具函数验证
const handleSubmit = async () => {
  console.log(detailsTableData.value);
  // dialogVisible.value = false;
};
  // 验证生产明细数据
  const detailsValidation = validateFormData(detailsTableData.value, [
    "coal",
    "productionQuantity", 
    "laborCost",
    "energyConsumptionCost",
    "equipmentDepreciation",
    "purchasePrice"
  ]);
  
  if (!detailsValidation.isValid) {
    ElMessage.warning(detailsValidation.message);
    return;
  }

  // 验证库存使用数据
  if (tableData.value.length === 0) {
    ElMessage.warning("请添加生产加工数据");
    return;
  }

  for (let i = 0; i < tableData.value.length; i++) {
    const element = tableData.value[i];
    if (element.usedQuantity == 0 || element.usedQuantity === null) {
      ElMessage.warning(`请填写使用数量: ${element.coal}`);
      return;
    }
  }

  try {
    const data = {
      ...copyForm.value,
      productionList: detailsTableData.value,
      productionInventoryList: tableData.value,
    };
    const res = await addOrEditPM(data);
    if (res.code === 200) {
      dialogVisible.value = false;
      emit("success");
    } else {
      ElMessage.error("提交失败");
    }
  } catch (error) {
    ElMessage.error("提交失败，请重试");
  }
};
// 关闭弹窗
const handleClose = () => {
  dialogVisible.value = false;
  formRef.value?.resetFields();
  Object.assign(formData, {
    category: "",
    unit: "",
    productionVolume: 0,
    laborCost: 0,
    materialCost: 0,
    equipmentCost: 0,
    totalCost: 0,
    totalPrice: 0,
    profit: 0,
    reviewer: "",
    date: "",
  });
};

// 添加单元格编辑处理函数
// 使用数量验证 - 使用工具函数
const handleCellEdit = (row, prop, value) => {
  if (prop === "used" && Number(value) > Number(row.stock)) {
    ElMessage.warning("使用数量不能大于库存数量！");
    row.used = row.stock;
  if (prop === "usedQuantity") {
    const validation = validateNumber(value, 0, Number(row.inventoryQuantity));
    
    if (!validation.isValid) {
      ElMessage.warning(validation.message);
      row.usedQuantity = validation.value;
      return;
    }
    
    row.usedQuantity = validation.value;
  }
};

// 处理生产明细表格的操作
// 处理生产明细表格的操作 - 使用工具函数
const addNewRow = () => {
  detailsTableData.value.push({
    coalType: "",
    calorificValue: "",
    productionQuantity: "",
    laborCost: "",
    energyCost: "",
    equipmentDepreciation: "",
    purchasePrice: "",
    totalCost: "",
  });
  const newRow = createDefaultProductionRow(userInfo);
  detailsTableData.value.push(newRow);
};

const clearAllRows = () => {
  detailsTableData.value = [];
  ElMessage.success("已清空所有数据");
// 重置数据 - 使用深拷贝
const handleReset = () => {
  if (copyForm.value) {
    tableData.value = deepClone(copyForm.value.productionInventoryList) || [];
    detailsTableData.value = deepClone(copyForm.value.productionList) || [];
  }
};

const calculateAllCosts = () => {
  detailsTableData.value.forEach((row) => {
    const laborCost = parseFloat(row.laborCost) || 0;
    const energyCost = parseFloat(row.energyCost) || 0;
    const equipmentDepreciation = parseFloat(row.equipmentDepreciation) || 0;
    const purchasePrice = parseFloat(row.purchasePrice) || 0;
// 获取用户信息
onMounted(async () => {
  try {
    userInfo = await userStore.getInfo();
  } catch (error) {
    ElMessage.error("获取用户信息失败，请重试");
  }
});

    row.totalCost = (
      laborCost +
      energyCost +
      equipmentDepreciation +
      purchasePrice
    ).toFixed(2);
  });
  ElMessage.success("重新计算完成");
};

// 简化的事件处理函数
const handleDetailsChange = (data) => {
  console.log("生产明细数据变化:", data);
};

const handleDeleteRow = (index) => {
  ElMessage.success(`已删除第 ${index + 1} 行数据`);
};

// 删除单个已选数据项
const handleRemoveItem = (row) => {
  const index = tableData.value.findIndex(
    (item) => item.officialId === row.officialId
  );
  if (index > -1) {
    tableData.value.splice(index, 1);

    // 更新selectedIds
    const updatedOfficialIds = tableData.value
      .map((item) => item.officialId)
      .filter((id) => id);
    selectedIds.value = updatedOfficialIds;
    ElMessage.success("已删除选中项");
  }
};

// 清空所有已选数据
const removeSelectedData = () => {
  if (tableData.value.length === 0) {
    ElMessage.warning("没有可清空的数据");
    return;
  }
  ElMessageBox.confirm("确认清空所有已选择的数据吗？", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      if (dialogType.value === "edit") {
        let res = await deleteProductionInventory({
          productionInventoryList: tableData.value,
        });
        emit("update:productionAndProcessing", tableData.value, copyForm.value);
      }
      // [Vue warn]: Component emitted event "update:productionAndProcessing" but it is neither declared in the emits option nor as an "onUpdate:productionAndProcessing" prop.

      formalDatabaseSelectedData.value = [];
      tableData.value = [];
      selectedIds.value = [];
      ElMessage.success("已清空所有数据");
    })
    .catch(() => {});
};

// 计算总使用量
const totalUsedQuantity = computed(() => {
  return tableData.value.reduce((total, item) => {
    const usedQty = Number(item.usedQuantity) || 0;
    return total + usedQty;
  }, 0);
});
</script>

<style scoped lang="scss">
@@ -454,7 +507,7 @@
.el-row > .el-col > h1 {
  font-weight: bolder;
}
.empty-table > .el-row{
.empty-table > .el-row {
  margin-bottom: 12px;
}
</style>