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

gongchunyi

3 天以前 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.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;"
@@ -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"
@@ -117,6 +146,21 @@
                          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"
                           :min="0"
@@ -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"
@@ -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,
@@ -490,6 +539,11 @@
    {
      label: "强度",
      prop: "strength",
      formatData: cell => {
        if (!cell) return "";
        const strengthItem = block_strength.value.find(item => item.id === cell);
        return strengthItem ? strengthItem.label : cell;
      },
    },

    {
@@ -546,6 +600,7 @@
          clickFun: row => {
            // 单独下发操作
            // 设置表单数据
            strengthError.value = "";
            mergeForm.ids = [row.id];
            mergeForm.materialCode = row.materialCode;
            mergeForm.productName = row.productName || "";
@@ -556,6 +611,7 @@
            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;
@@ -597,6 +653,7 @@
    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: "",
@@ -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,
      },
    ],
  });

@@ -709,6 +782,26 @@

  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);
  };

@@ -821,8 +914,14 @@
      applyNo: "",
      dateRange: [],
    },
    searchFormExpanded: false,
  });
  const { searchForm } = toRefs(data);
  const { searchForm, searchFormExpanded } = toRefs(data);

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

  // 查询列表
  /** 搜索按钮操作 */
@@ -931,6 +1030,9 @@
      .catch(() => {});
  };
  const sumAssignedQuantity = ref(0);
  // 响应式数据
  const strengthError = ref("");

  // 处理合并下发按钮点击
  const handleMerge = () => {
    if (selectedRows.value.length === 0) {
@@ -938,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 (
@@ -950,15 +1072,15 @@
    sumAssignedQuantity.value = totalAssignedQuantity;
    console.log(totalAssignedQuantity);
    // 设置表单数据
    const firstRow = selectedRows.value[0];
    mergeForm.materialCode = selectedserialNo.value;
    mergeForm.productName = firstRow.productName || "";
    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);

    // 打开弹窗
@@ -969,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");
@@ -984,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("下发成功");
@@ -1215,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;
@@ -1230,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;
@@ -1237,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) {