参数配置页面开发（未接接口）

zhangwencui

昨天 f3b97d08e13224c6bc1d4f267bdb1a4e0b3690c3

 src/views/productionPlan/productionPlan/index.vue

@@ -18,7 +18,7 @@
                    @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="产品规格:">
          <el-input v-model="searchForm.productSpec"
          <el-input v-model="searchForm.specification"
                    placeholder="请输入"
                    clearable
                    style="width: 160px;"
@@ -102,7 +102,7 @@
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="产品规格">
              <div class="info-display">{{ mergeForm.productSpec || '-' }}</div>
              <div class="info-display">{{ mergeForm.specification || '-' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
@@ -234,19 +234,27 @@
                    placeholder="请输入客户名称" />
        </el-form-item>
        <el-form-item label="产品名称"
                      prop="productName">
          <el-input v-model="form.productName"
                    placeholder="请输入产品名称" />
                      prop="productMaterialId">
          <el-tree-select v-model="form.productMaterialId"
                          placeholder="请选择"
                          clearable
                          :data="productOptions"
                          :render-after-expand="false"
                          filterable
                          @change="handleProductChange"
                          style="width: 100%" />
        </el-form-item>
        <el-form-item label="产品规格"
                      prop="productSpec">
          <el-input v-model="form.productSpec"
                    placeholder="请输入产品规格" />
        </el-form-item>
        <el-form-item label="物料编码"
                      prop="materialCode">
          <el-input v-model="form.materialCode"
                    placeholder="请输入物料编码" />
                      prop="productMaterialSkuId">
          <el-select v-model="form.productMaterialSkuId"
                     @change="handleChangeSpecification"
                     filterable
                     placeholder="请选择">
            <el-option v-for="item in specificationOptions"
                       :key="item.skuId"
                       :label="item.specification"
                       :value="item.skuId" />
          </el-select>
        </el-form-item>
        <el-form-item label="块数"
                      prop="quantity">
@@ -294,8 +302,14 @@
        </el-form-item>
        <el-form-item label="强度"
                      prop="strength">
          <el-input v-model="form.strength"
                    placeholder="请输入强度" />
          <el-select v-model="form.strength"
                     placeholder="请选择强度"
                     style="width: 100%">
            <el-option label="A3.5"
                       value="A3.5" />
            <el-option label="A5.0"
                       value="A5.0" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注 1"
                      prop="remarkOne">
@@ -335,15 +349,33 @@
    productionPlanCombine,
  } from "@/api/productionPlan/productionPlan.js";
  import PIMTable from "./components/PIMTable.vue";
  import {
    modelListPage,
    productTreeList,
    productTreeListQuery,
  } from "@/api/basicData/newProduct.js";

  const { proxy } = getCurrentInstance();

  const tableColumn = ref([
    {
      label: "数据来源",
      width: "100px",
      prop: "dataSourceType",
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          2: "warning",
          1: "primary",
        };
        return typeMap[params] || "info";
      },
      formatData: cell => (cell == 1 ? "钉钉同步" : "手动新增"),
    },
    {
      label: "申请单编号",
      prop: "applyNo",
      width: "150px",
      className: "code-cell",
    },
    {
      label: "客户名称",
@@ -353,19 +385,20 @@
    {
      label: "产品名称",
      prop: "productName",
      width: "100px",
      width: "200px",
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          板材: "primary",
          砌块: "info",
        };
        return typeMap[params] || "info";
        // const typeMap = {
        //   板材: "primary",
        //   砌块: "warning",
        // };
        // return typeMap[params] || "info";
        return "primary";
      },
    },
    {
      label: "产品规格",
      prop: "productSpec",
      prop: "specification",
      width: "150px",
      className: "spec-cell",
    },
@@ -373,46 +406,73 @@
      label: "物料编码",
      prop: "materialCode",
      width: "150px",
      className: "code-cell",
    },
    {
      label: "块数",
      prop: "quantity",
      className: "quantity-cell",
      formatData: cell => (cell ? `${cell}块` : ""),
    },
    {
      label: "方数",
      prop: "volume",
      width: "150px",
      className: "volume-cell",
      formatData: cell => (cell ? `${cell}方` : ""),
    },
    {
      label: "下发状态",
      prop: "status",
      width: "150px",
      className: "status-cell",
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          0: "warning",
          1: "primary",
          2: "info",
        };
        return typeMap[params] || "info";
      },
      formatData: cell => {
        const statusMap = {
          0: "待下发",
          1: "部分下发",
          2: "已下发",
        };
        return statusMap[cell] || "";
      },
    },
    {
      label: "已下发方数",
      prop: "assignedQuantity",
      width: "150px",
      className: "spec-cell",
      formatData: cell => (cell ? `${cell}方` : 0),
    },
    {
      label: "长",
      prop: "length",
      className: "dimension-cell",
      formatData: cell => (cell ? `${cell}mm` : ""),
    },
    {
      label: "宽",
      prop: "width",
      className: "dimension-cell",
      formatData: cell => (cell ? `${cell}mm` : ""),
    },
    {
      label: "高",
      prop: "height",
      className: "dimension-cell",
      formatData: cell => (cell ? `${cell}mm` : ""),
    },
    {
      label: "流水号",
      prop: "serialNo",
      width: "150px",
      className: "code-cell",
    },
    // {
    //   label: "流水号",
    //   prop: "serialNo",
    //   width: "150px",
    //   className: "code-cell",
    // },
    {
      label: "计划开始日期",
      prop: "startDate",
@@ -431,18 +491,15 @@
      label: "强度",
      prop: "strength",
    },
    // {
    //   label: "数据来源",
    //   width: "100px",
    //   prop: "dataSourceType",
    //   formatData: cell => (cell == 1 ? "同步" : "手动"),
    // },

    {
      label: "备注 1",
      width: "150px",
      prop: "remarkOne",
    },
    {
      label: "备注 2",
      width: "150px",
      prop: "remarkTwo",
    },

@@ -457,6 +514,10 @@
          name: "编辑",
          type: "primary",
          link: true,
          showHide: row => {
            return row.status == 0;
            //status，0：待下发，1：部分下发，2：已下发
          },
          clickFun: row => {
            handleEdit(row);
          },
@@ -465,6 +526,9 @@
          name: "删除",
          type: "danger",
          link: true,
          showHide: row => {
            return row.status == 0;
          },
          clickFun: row => {
            handleDelete(row);
          },
@@ -472,24 +536,25 @@
        {
          name: "下发",
          type: "text",
          disabled: row => {
          showHide: row => {
            // 计算剩余方数
            const remainingVolume =
              (row.volume || 0) - (row.assignedQuantity || 0);
            // 如果剩余方数小于等于0，禁止选择
            return remainingVolume <= 0;
            return remainingVolume > 0;
          },
          clickFun: row => {
            // 单独下发操作
            // 设置表单数据
            mergeForm.ids = [row.id];
            mergeForm.materialCode = row.materialCode;
            mergeForm.productName = row.productName || "";
            mergeForm.productSpec = row.productSpec || "";
            mergeForm.specification = row.specification || "";
            mergeForm.length = row.length || 0;
            mergeForm.width = row.width || 0;
            mergeForm.height = row.height || 0;
            mergeForm.totalAssignedQuantity =
              Number(row.volume) - Number(row.assignedQuantity) || 0;
              (Number(row.volume) - Number(row.assignedQuantity)).toFixed(4) || 0;
            mergeForm.planCompleteTime = row.planCompleteTime || "";
            sumAssignedQuantity.value = mergeForm.totalAssignedQuantity;
            // 打开弹窗
@@ -526,7 +591,7 @@
  const mergeForm = reactive({
    materialCode: "",
    productName: "",
    productSpec: "",
    specification: "",
    length: 0,
    width: 0,
    height: 0,
@@ -557,13 +622,17 @@
  // 新增/编辑相关
  const dialogVisible = ref(false);
  const operationType = ref("add"); // add | edit
  const productOptions = ref([]);
  const specificationOptions = ref([]);
  const formRef = ref(null);
  const form = reactive({
    id: undefined,
    applyNo: "",
    customerName: "",
    productMaterialId: undefined,
    productMaterialSkuId: undefined,
    productName: "",
    productSpec: "",
    specification: "",
    materialCode: "",
    quantity: 0,
    volume: 0,
@@ -581,10 +650,12 @@
    customerName: [
      { required: true, message: "请输入客户名称", trigger: "blur" },
    ],
    productName: [{ required: true, message: "请输入产品名称", trigger: "blur" }],
    productSpec: [{ required: true, message: "请输入产品规格", trigger: "blur" }],
    materialCode: [
      { required: true, message: "请输入物料编码", trigger: "blur" },
    productMaterialSkuId: [
      { required: true, message: "请选择产品规格", trigger: "change" },
    ],
    volume: [{ required: true, message: "请输入方数", trigger: "blur" }],
    productMaterialId: [
      { required: true, message: "请选择产品", trigger: "change" },
    ],
  });

@@ -609,6 +680,67 @@
  const onBlur = value => {
    // 限制四位小数
    mergeForm.totalAssignedQuantity = Number(value.toFixed(4));
  };

  const fetchProductOptions = () => {
    return productTreeList({ type: 2 }).then(res => {
      productOptions.value = convertIdToValue(res.data);
      return res;
    });
  };

  const convertIdToValue = data => {
    return data.map(item => {
      const newItem = {
        value: `config_${item.configId}`, // 使用config_前缀确保唯一性
        label: item.configName,
        disabled: item.materialList.length === 0,
      };
      if (item.materialList && item.materialList.length > 0) {
        newItem.children = item.materialList.map(material => ({
          value: material.id, // 使用material的id作为value
          label: material.materialName, // 使用materialName作为label
        }));
      }

      return newItem;
    });
  };

  const handleProductChange = value => {
    form.productMaterialSkuId = undefined;
    fetchSpecificationOptions(value);
  };

  const fetchSpecificationOptions = materialId => {
    specificationOptions.value = [];
    if (materialId) {
      modelListPage({ materialId: materialId, size: -1, current: -1 }).then(
        res => {
          specificationOptions.value = res.data.records;
        }
      );
    }
  };

  const handleChangeSpecification = value => {
    form.materialCode = undefined;
    const selectedModel = specificationOptions.value.find(
      item => item.skuId === value
    );
    if (selectedModel) {
      form.materialCode = selectedModel.materialCode;
      // 解析规格字符串获取长宽高
      const specification = selectedModel.specification;
      if (specification) {
        const dimensions = specification.match(/^(\d+)\*(\d+)\*(\d+)$/);
        if (dimensions && dimensions.length === 4) {
          form.length = parseInt(dimensions[1]);
          form.width = parseInt(dimensions[2]);
          form.height = parseInt(dimensions[3]);
        }
      }
    }
  };

  // 生成模拟进度详情数据
@@ -686,7 +818,7 @@
    searchForm: {
      customerName: "",
      productName: "",
      productSpec: "",
      specification: "",
      materialCode: "",
      applyNo: "",
      dateRange: [],
@@ -706,7 +838,7 @@
    Object.assign(searchForm.value, {
      customerName: "",
      productName: "",
      productSpec: "",
      specification: "",
      materialCode: "",
      applyNo: "",
      dateRange: [],
@@ -732,8 +864,9 @@
          totalAssignedQuantity: 0,
        };
      }
      summary[category].totalAssignedQuantity +=
        Number(row.volume) - Number(row.assignedQuantity);
      summary[category].totalAssignedQuantity += (
        Number(row.volume) - Number(row.assignedQuantity)
      ).toFixed(4);
    });

    // 转换为数组格式
@@ -794,7 +927,9 @@
  // 拉取数据按钮操作
  const getLoadProdData = () => {
    loadProdData()
      .then(res => {})
      .then(res => {
        getList();
      })
      .catch(() => {});
  };
  const sumAssignedQuantity = ref(0);
@@ -811,7 +946,7 @@
        sum +
        (row.volume == null
          ? 0
          : Number(row.volume) - Number(row.assignedQuantity))
          : (Number(row.volume) - Number(row.assignedQuantity)).toFixed(4))
      );
    }, 0);
    sumAssignedQuantity.value = totalAssignedQuantity;
@@ -820,12 +955,13 @@
    const firstRow = selectedRows.value[0];
    mergeForm.materialCode = selectedserialNo.value;
    mergeForm.productName = firstRow.productName || "";
    mergeForm.productSpec = firstRow.productSpec || "";
    mergeForm.specification = firstRow.specification || "";
    mergeForm.length = firstRow.length || 0;
    mergeForm.width = firstRow.width || 0;
    mergeForm.height = firstRow.height || 0;
    mergeForm.totalAssignedQuantity = totalAssignedQuantity;
    mergeForm.planCompleteTime = firstRow.planCompleteTime || "";
    mergeForm.ids = selectedRows.value.map(row => row.id);

    // 打开弹窗
    isShowNewModal.value = true;
@@ -833,6 +969,10 @@

  // 处理合并下发提交
  const handleMergeSubmit = () => {
    if (mergeForm.totalAssignedQuantity === 0) {
      ElMessage.warning("请输入生产方数");
      return;
    }
    console.log(sumAssignedQuantity.value, "sumAssignedQuantity");
    // 计算当前选中行的总方数
    const totalVolume = selectedRows.value.reduce((sum, row) => {
@@ -845,16 +985,17 @@
      return;
    }

    mergeForm.ids = selectedRows.value.map(row => row.id);
    console.log(mergeForm, "mergeForm");
    productionPlanCombine(mergeForm)
      .then(res => {
        if (res.code === 200) {
          ElMessage.success("合并下发成功");
          ElMessage.success("下发成功");
          getList();
          isShowNewModal.value = false;
          // 可以选择刷新列表或其他操作
          getList();
        } else {
          ElMessage.error(res.message || "合并下发失败");
          ElMessage.error(res.message || "下发失败");
        }
      })
      .catch(err => {
@@ -948,7 +1089,9 @@
      applyNo: "",
      customerName: "",
      productName: "",
      productSpec: "",
      productMaterialId: undefined,
      productMaterialSkuId: undefined,
      specification: "",
      materialCode: "",
      quantity: 0,
      volume: 0,
@@ -962,6 +1105,7 @@
      remarkTwo: "",
    });
    dialogVisible.value = true;
    fetchProductOptions();
  };

  // 编辑
@@ -972,7 +1116,9 @@
      applyNo: row.applyNo || "",
      customerName: row.customerName || "",
      productName: row.productName || "",
      productSpec: row.productSpec || "",
      productMaterialId: row.productMaterialId || undefined,
      productMaterialSkuId: row.productMaterialSkuId || undefined,
      specification: row.specification || "",
      materialCode: row.materialCode || "",
      quantity: row.quantity || 0,
      volume: row.volume || 0,
@@ -986,6 +1132,8 @@
      remarkTwo: row.remarkTwo || "",
    });
    dialogVisible.value = true;
    fetchProductOptions();
    fetchSpecificationOptions(row.productMaterialId);
  };

  // 删除
@@ -1013,8 +1161,16 @@
  const handleSubmit = () => {
    formRef.value.validate(valid => {
      if (valid) {
        if (form.volume === 0) {
          proxy.$modal.msgError("方数不能为0");
          return;
        }
        if (form.v === "add") {
          payload.id = null;
        }
        const payload = { ...form };
        if (operationType.value === "add") {
          payload.id = null;
          productionPlanAdd(payload)
            .then(() => {
              proxy.$modal.msgSuccess(
@@ -1100,7 +1256,6 @@
        color: #ffffff;
        border-bottom: none;
        padding: 16px 0;
        font-size: 14px;
        letter-spacing: 0.5px;
      }
    }
@@ -1123,7 +1278,6 @@
          border-bottom: 1px solid #f0f0f0;
          padding: 14px 0;
          color: #303133;
          font-size: 13px;
        }
      }

@@ -1142,7 +1296,6 @@
        font-weight: 600;
        color: #409eff;
        font-family: "Courier New", monospace;
        font-size: 14px;
        text-shadow: 0 1px 2px rgba(64, 158, 255, 0.2);
      }

@@ -1167,7 +1320,6 @@
      // 日期字段样式
      .date-cell {
        color: #909399;
        font-size: 12px;
        font-style: italic;
      }