fix: 点击取消时将表单子元素全部销毁

gongchunyi

2 天以前 06d627bc28e77e1a314d8e35914512d63dbab1bd

 src/views/productionPlan/productionPlan/index.vue

@@ -3,36 +3,9 @@
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="客户名称:">
          <el-input v-model="searchForm.customerName"
                    placeholder="请输入"
                    clearable
                    style="width: 160px;"
                    @keyup.enter="handleQuery" />
        </el-form-item>
        <!-- 简化版搜索条件 -->
        <el-form-item label="产品名称:">
          <el-input v-model="searchForm.productName"
                    placeholder="请输入"
                    clearable
                    style="width: 160px;"
                    @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="产品规格:">
          <el-input v-model="searchForm.specification"
                    placeholder="请输入"
                    clearable
                    style="width: 160px;"
                    @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="物料编码:">
          <el-input v-model="searchForm.materialCode"
                    placeholder="请输入"
                    clearable
                    style="width: 160px;"
                    @keyup.enter="handleQuery" />
        </el-form-item>
        <el-form-item label="申请单编号:">
          <el-input v-model="searchForm.applyNo"
                    placeholder="请输入"
                    clearable
                    style="width: 160px;"
@@ -48,6 +21,51 @@
                          style="width: 240px;"
                          @change="handleQuery" />
        </el-form-item>
        <el-form-item label="下发状态:">
          <el-select v-model="searchForm.status"
                     placeholder="请选择状态"
                     clearable
                     filterable
                     style="width: 100px">
            <el-option label="待下发"
                       value="0" />
            <el-option label="部分下发"
                       value="1" />
            <el-option label="已下发"
                       value="2" />
          </el-select>
        </el-form-item>
        <!-- 展开版搜索条件 -->
        <template v-if="searchFormExpanded">
          <el-form-item label="客户名称:">
            <el-input v-model="searchForm.customerName"
                      placeholder="请输入"
                      clearable
                      style="width: 160px;"
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="产品规格:">
            <el-input v-model="searchForm.model"
                      placeholder="请输入"
                      clearable
                      style="width: 160px;"
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="物料编码:">
            <el-input v-model="searchForm.materialCode"
                      placeholder="请输入"
                      clearable
                      style="width: 160px;"
                      @keyup.enter="handleQuery" />
          </el-form-item>
          <el-form-item label="申请单编号:">
            <el-input v-model="searchForm.applyNo"
                      placeholder="请输入"
                      clearable
                      style="width: 160px;"
                      @keyup.enter="handleQuery" />
          </el-form-item>
        </template>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery">搜索</el-button>
@@ -68,6 +86,16 @@
      <div>
      </div>
    </div>
    <div class="search-header">
      <el-button type="text"
                 @click="toggleSearchForm">
        <el-icon>
          <ArrowUp v-if="searchFormExpanded" />
          <ArrowDown v-else />
        </el-icon>
        {{ searchFormExpanded ? '收起搜索条件' : '展开搜索条件' }}
      </el-button>
    </div>
    <div class="table_list">
      <PIMTable rowKey="id"
                :column="tableColumn"
@@ -83,6 +111,7 @@
    </div>
    <!-- 合并下发弹窗 -->
    <el-dialog v-model="isShowNewModal"
               destroy-on-close
               title="合并下发"
               width="600px">
      <el-form :model="mergeForm"
@@ -102,7 +131,7 @@
        <el-row :gutter="20">
          <el-col :span="10">
            <el-form-item label="产品规格">
              <div class="info-display">{{ mergeForm.specification || '-' }}</div>
              <div class="info-display">{{ mergeForm.model || '-' }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="10">
@@ -116,6 +145,21 @@
                          type="date"
                          value-format="YYYY-MM-DD"
                          style="width: 100%" />
        </el-form-item>
        <el-form-item label="强度"
                      v-if="mergeForm.productName === '砌块'">
          <div v-if="strengthError"
               class="strength-error"
               style="color: red; margin-bottom: 8px;">{{ strengthError }}</div>
          <el-select v-model="mergeForm.strength"
                     placeholder="请选择强度"
                     style="width: 100%"
                     required>
            <el-option v-for="item in block_strength"
                       :key="item.id"
                       :label="item.label"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="生产方数">
          <el-input-number v-model="mergeForm.totalAssignedQuantity"
@@ -139,6 +183,7 @@
    </el-dialog>
    <!-- 追踪进度弹窗 -->
    <el-dialog v-model="showTrackProgressDialog"
               destroy-on-close
               :title="`追踪进度 - ${trackProgressForm.materialCode || ''}`"
               width="600px">
      <el-form :model="trackProgressForm"
@@ -217,6 +262,7 @@
                  @close="handleImportClose" />
    <!-- 新增/编辑弹窗 -->
    <el-dialog v-model="dialogVisible"
               destroy-on-close
               :title="operationType === 'add' ? '新增生产计划' : '编辑生产计划'"
               width="600px">
      <el-form ref="formRef"
@@ -251,9 +297,9 @@
                     filterable
                     placeholder="请选择">
            <el-option v-for="item in specificationOptions"
                       :key="item.skuId"
                       :label="item.specification"
                       :value="item.skuId" />
                       :key="item.id"
                       :label="item.model"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="块数"
@@ -301,14 +347,15 @@
                          placeholder="请选择计划结束日期" />
        </el-form-item>
        <el-form-item label="强度"
                      prop="strength">
                      prop="strength"
                      v-if="form.productName === '砌块'">
          <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-option v-for="item in block_strength"
                       :key="item.id"
                       :label="item.label"
                       :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item label="备注 1"
@@ -334,11 +381,13 @@
</template>

<script setup>
  import { onMounted, ref, reactive, getCurrentInstance } from "vue";
  import { onMounted, ref, reactive, getCurrentInstance, toRefs } from "vue";
  import { ElMessage } from "element-plus";
  import { ArrowUp, ArrowDown } from "@element-plus/icons-vue";
  import dayjs from "dayjs";
  import ImportDialog from "@/components/Dialog/ImportDialog.vue";
  import { getToken } from "@/utils/auth";
  import { useDict } from "@/utils/dict";
  import {
    productionPlanListPage,
    loadProdData,
@@ -376,7 +425,6 @@
      label: "申请单编号",
      prop: "applyNo",
      width: "150px",
      className: "code-cell",
    },
    {
      label: "客户名称",
@@ -389,16 +437,17 @@
      width: "200px",
      dataType: "tag",
      formatType: params => {
        const typeMap = {
          板材: "primary",
          砌块: "warning",
        };
        return typeMap[params] || "info";
        // const typeMap = {
        //   板材: "primary",
        //   砌块: "warning",
        // };
        // return typeMap[params] || "info";
        return "primary";
      },
    },
    {
      label: "产品规格",
      prop: "specification",
      prop: "model",
      width: "150px",
      className: "spec-cell",
    },
@@ -406,12 +455,10 @@
      label: "物料编码",
      prop: "materialCode",
      width: "150px",
      className: "code-cell",
    },
    {
      label: "块数",
      prop: "quantity",
      className: "quantity-cell",
      formatData: cell => (cell ? `${cell}块` : ""),
    },
    {
@@ -492,14 +539,21 @@
    {
      label: "强度",
      prop: "strength",
      formatData: cell => {
        if (!cell) return "";
        const strengthItem = block_strength.value.find(item => item.id === cell);
        return strengthItem ? strengthItem.label : cell;
      },
    },

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

@@ -546,16 +600,18 @@
          clickFun: row => {
            // 单独下发操作
            // 设置表单数据
            strengthError.value = "";
            mergeForm.ids = [row.id];
            mergeForm.materialCode = row.materialCode;
            mergeForm.productName = row.productName || "";
            mergeForm.specification = row.specification || "";
            mergeForm.model = row.model || "";
            mergeForm.length = row.length || 0;
            mergeForm.width = row.width || 0;
            mergeForm.height = row.height || 0;
            mergeForm.totalAssignedQuantity =
              (Number(row.volume) - Number(row.assignedQuantity)).toFixed(4) || 0;
            mergeForm.planCompleteTime = row.planCompleteTime || "";
            mergeForm.strength = row.strength || "";
            sumAssignedQuantity.value = mergeForm.totalAssignedQuantity;
            // 打开弹窗
            isShowNewModal.value = true;
@@ -591,12 +647,13 @@
  const mergeForm = reactive({
    materialCode: "",
    productName: "",
    specification: "",
    model: "",
    length: 0,
    width: 0,
    height: 0,
    totalAssignedQuantity: 0,
    planCompleteTime: "",
    strength: "",
  });

  // 追踪进度弹窗控制
@@ -625,6 +682,8 @@
  const productOptions = ref([]);
  const specificationOptions = ref([]);
  const formRef = ref(null);
  // 获取强度字典
  const { block_strength } = useDict("block_strength");
  const form = reactive({
    id: undefined,
    applyNo: "",
@@ -632,7 +691,7 @@
    productMaterialId: undefined,
    productMaterialSkuId: undefined,
    productName: "",
    specification: "",
    model: "",
    materialCode: "",
    quantity: 0,
    volume: 0,
@@ -641,6 +700,7 @@
    height: 0,
    startDate: "",
    endDate: "",
    status: "",
    strength: "",
    remarkOne: "",
    remarkTwo: "",
@@ -656,6 +716,19 @@
    volume: [{ required: true, message: "请输入方数", trigger: "blur" }],
    productMaterialId: [
      { required: true, message: "请选择产品", trigger: "change" },
    ],
    strength: [
      {
        validator: (rule, value, callback) => {
          if (form.productName === "砌块" && !value) {
            callback(new Error("砌块产品的强度为必填项"));
          } else {
            callback();
          }
        },
        trigger: ["blur", "change"],
        required: false,
      },
    ],
  });

@@ -699,7 +772,7 @@
      if (item.materialList && item.materialList.length > 0) {
        newItem.children = item.materialList.map(material => ({
          value: material.id, // 使用material的id作为value
          label: material.materialName, // 使用materialName作为label
          label: material.productName, // 使用materialName作为label
        }));
      }

@@ -709,31 +782,49 @@

  const handleProductChange = value => {
    form.productMaterialSkuId = undefined;
    // 查找选中的产品名称
    const findProductName = (options, value) => {
      for (const option of options) {
        if (option.value === value) {
          return option.label;
        }
        if (option.children) {
          const found = findProductName(option.children, value);
          if (found) {
            return found;
          }
        }
      }
      return "";
    };
    form.productName = findProductName(productOptions.value, value);
    // 触发强度字段验证
    if (formRef.value) {
      formRef.value.validateField("strength");
    }
    fetchSpecificationOptions(value);
  };

  const fetchSpecificationOptions = materialId => {
  const fetchSpecificationOptions = productId => {
    specificationOptions.value = [];
    if (materialId) {
      modelListPage({ materialId: materialId, size: -1, current: -1 }).then(
        res => {
          specificationOptions.value = res.data.records;
        }
      );
    if (productId) {
      modelListPage({ productId: productId, 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
      item => item.id === value
    );
    if (selectedModel) {
      form.materialCode = selectedModel.materialCode;
      // 解析规格字符串获取长宽高
      const specification = selectedModel.specification;
      if (specification) {
        const dimensions = specification.match(/^(\d+)\*(\d+)\*(\d+)$/);
      const model = selectedModel.model;
      if (model) {
        const dimensions = model.match(/^(\d+)\*(\d+)\*(\d+)$/);
        if (dimensions && dimensions.length === 4) {
          form.length = parseInt(dimensions[1]);
          form.width = parseInt(dimensions[2]);
@@ -818,13 +909,19 @@
    searchForm: {
      customerName: "",
      productName: "",
      specification: "",
      model: "",
      materialCode: "",
      applyNo: "",
      dateRange: [],
    },
    searchFormExpanded: false,
  });
  const { searchForm } = toRefs(data);
  const { searchForm, searchFormExpanded } = toRefs(data);

  // 切换搜索表单展开/收起状态
  const toggleSearchForm = () => {
    data.searchFormExpanded = !data.searchFormExpanded;
  };

  // 查询列表
  /** 搜索按钮操作 */
@@ -838,7 +935,7 @@
    Object.assign(searchForm.value, {
      customerName: "",
      productName: "",
      specification: "",
      model: "",
      materialCode: "",
      applyNo: "",
      dateRange: [],
@@ -933,6 +1030,9 @@
      .catch(() => {});
  };
  const sumAssignedQuantity = ref(0);
  // 响应式数据
  const strengthError = ref("");

  // 处理合并下发按钮点击
  const handleMerge = () => {
    if (selectedRows.value.length === 0) {
@@ -940,6 +1040,26 @@
      return;
    }
    console.log(selectedRows.value);
    // 检查强度一致性
    const firstRow = selectedRows.value[0];
    const productName = firstRow.productName || "";
    let strengthConsistent = true;
    let firstStrength = firstRow.strength || "";
    strengthError.value = "";

    if (productName === "砌块") {
      for (const row of selectedRows.value) {
        if (row.strength !== firstStrength) {
          strengthConsistent = false;
          break;
        }
      }

      if (!strengthConsistent) {
        strengthError.value = "选择的砌块强度不一致，请重新选择";
      }
    }

    // 计算总制造数量
    const totalAssignedQuantity = selectedRows.value.reduce((sum, row) => {
      return (
@@ -952,15 +1072,15 @@
    sumAssignedQuantity.value = totalAssignedQuantity;
    console.log(totalAssignedQuantity);
    // 设置表单数据
    const firstRow = selectedRows.value[0];
    mergeForm.materialCode = selectedserialNo.value;
    mergeForm.productName = firstRow.productName || "";
    mergeForm.specification = firstRow.specification || "";
    mergeForm.productName = productName;
    mergeForm.model = firstRow.model || "";
    mergeForm.length = firstRow.length || 0;
    mergeForm.width = firstRow.width || 0;
    mergeForm.height = firstRow.height || 0;
    mergeForm.totalAssignedQuantity = totalAssignedQuantity;
    mergeForm.planCompleteTime = firstRow.planCompleteTime || "";
    mergeForm.strength = firstStrength;
    mergeForm.ids = selectedRows.value.map(row => row.id);

    // 打开弹窗
@@ -971,6 +1091,11 @@
  const handleMergeSubmit = () => {
    if (mergeForm.totalAssignedQuantity === 0) {
      ElMessage.warning("请输入生产方数");
      return;
    }
    // 验证砌块产品的强度
    if (mergeForm.productName === "砌块" && !mergeForm.strength) {
      ElMessage.error("砌块产品的强度为必填项");
      return;
    }
    console.log(sumAssignedQuantity.value, "sumAssignedQuantity");
@@ -986,7 +1111,14 @@
    }

    console.log(mergeForm, "mergeForm");
    productionPlanCombine(mergeForm)
    const strengthItem = block_strength.value.find(
      item => item.id === mergeForm.strength
    );
    const payload = {
      ...mergeForm,
      strength: strengthItem ? strengthItem.label : mergeForm.strength,
    };
    productionPlanCombine(payload)
      .then(res => {
        if (res.code === 200) {
          ElMessage.success("下发成功");
@@ -1091,7 +1223,7 @@
      productName: "",
      productMaterialId: undefined,
      productMaterialSkuId: undefined,
      specification: "",
      model: "",
      materialCode: "",
      quantity: 0,
      volume: 0,
@@ -1118,7 +1250,7 @@
      productName: row.productName || "",
      productMaterialId: row.productMaterialId || undefined,
      productMaterialSkuId: row.productMaterialSkuId || undefined,
      specification: row.specification || "",
      model: row.model || "",
      materialCode: row.materialCode || "",
      quantity: row.quantity || 0,
      volume: row.volume || 0,
@@ -1217,10 +1349,7 @@
  }

  .search_form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    // margin-bottom: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 6px;
@@ -1232,6 +1361,36 @@
    }
  }

  .search-header {
    display: flex;
    justify-content: center;
    align-items: center;
    // margin-bottom: 5px;
    // padding-bottom: 5px;
    position: relative;
    bottom: 35px;
    // border-bottom: 1px solid #ebeef5;
  }

  .search-title {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
  }

  .search-header .el-button {
    color: #606266;
    transition: all 0.3s ease;
  }

  .search-header .el-button:hover {
    color: #409eff;
  }

  .search-header .el-icon {
    margin-right: 4px;
  }

  .table_list {
    // margin-bottom: 24px;
    background-color: #ffffff;
@@ -1239,6 +1398,7 @@
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
    overflow: hidden;
    height: calc(100vh - 250px);
    margin-top: 0px !important;
  }

  :deep(.el-table) {