生产订单-来源弹窗多条数据样式问题修正

zhangwencui

8 小时以前 2941df634ce50c9f3ef0d62262079962dfa91780

生产订单-来源弹窗多条数据样式问题修正

 src/views/productionManagement/productionOrder/index.vue

@@ -1,67 +1,66 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm" :inline="true">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="生产订单号:">
          <el-input
            v-model="searchForm.npsNo"
          <el-input v-model="searchForm.npsNo"
            placeholder="请输入"
            clearable
            prefix-icon="Search"
            style="width: 160px"
            @change="handleQuery"
          />
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="产品名称:">
          <el-input
            v-model="searchForm.productName"
          <el-input v-model="searchForm.productName"
            placeholder="请输入"
            clearable
            prefix-icon="Search"
            style="width: 160px"
            @change="handleQuery"
          />
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="规格:">
          <el-input
            v-model="searchForm.model"
          <el-input v-model="searchForm.model"
            placeholder="请输入"
            clearable
            prefix-icon="Search"
            style="width: 160px"
            @change="handleQuery"
          />
                    @change="handleQuery" />
        </el-form-item>
        <el-form-item label="状态:">
          <el-select
            v-model="searchForm.status"
          <el-select v-model="searchForm.status"
            placeholder="请选择"
            style="width: 160px"
            @change="handleQuery"
          >
            <el-option label="待开始" value="1" />
            <el-option label="进行中" value="2" />
            <el-option label="已完成" value="3" />
                     @change="handleQuery">
            <el-option label="待开始"
                       value="1" />
            <el-option label="进行中"
                       value="2" />
            <el-option label="已完成"
                       value="3" />
            <!--            <el-option label="已取消"-->
            <!--                       value="4" />-->
            <el-option label="已结束" value="5" />
            <el-option label="已结束"
                       value="5" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button type="info" @click="handleReset">重置</el-button>
          <el-button type="primary"
                     @click="handleQuery">搜索</el-button>
          <el-button type="info"
                     @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="action-buttons">
        <!-- <el-button type="primary"
                   @click="isShowNewModal = true">新增</el-button> -->
        <el-button type="danger" @click="handleDelete">退回</el-button>
        <el-button type="danger"
                   @click="handleDelete">退回</el-button>
        <el-button @click="handleOut">导出</el-button>
      </div>
    </div>
    <div class="table_list">
      <PIMTable
        rowKey="id"
      <PIMTable rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
@@ -70,36 +69,26 @@
        :isSelection="true"
        :selectable="(row) => !row.endOrder"
        @selection-change="handleSelectionChange"
        @pagination="pagination"
      >
                @pagination="pagination">
        <template #completionStatus="{ row }">
          <el-progress
            :percentage="toProgressPercentage(row?.completionStatus)"
          <el-progress :percentage="toProgressPercentage(row?.completionStatus)"
            :color="progressColor(toProgressPercentage(row?.completionStatus))"
            :status="
              toProgressPercentage(row?.completionStatus) >= 100
                ? 'success'
                : ''
            "
          />
            " />
        </template>
        <template #processRouteStatus="{ row }">
          <div
            v-if="row.processRouteStatus && row.processRouteStatus.length"
            class="process-progress-container"
          >
            <div
              v-for="(item, index) in row.processRouteStatus"
          <div v-if="row.processRouteStatus && row.processRouteStatus.length"
               class="process-progress-container">
            <div v-for="(item, index) in row.processRouteStatus"
              :key="index"
              class="process-step"
            >
                 class="process-step">
              <div class="step-content">
                <div
                  class="step-circle"
                  :class="{ 'is-completed': item.percentage >= 100 }"
                >
                  <span
                    class="step-percentage"
                <div class="step-circle"
                     :class="{ 'is-completed': item.percentage >= 100 }">
                  <span class="step-percentage"
                    :style="{
                      color:
                        item.percentage >= 70
@@ -107,63 +96,52 @@
                            ? '#67c23a'
                            : '#f56c6c'
                          : '#000',
                    }"
                    >{{ item.percentage }}%</span
                  >
                    }">{{ item.percentage }}%</span>
                </div>
                <div class="step-name">{{ item.name }}</div>
              </div>
              <div
                v-if="index < row.processRouteStatus.length - 1"
                class="step-line"
              ></div>
              <div v-if="index < row.processRouteStatus.length - 1"
                   class="step-line"></div>
            </div>
          </div>
          <span v-else>-</span>
        </template>
      </PIMTable>
    </div>
    <el-dialog
      v-model="bindRouteDialogVisible"
    <el-dialog v-model="bindRouteDialogVisible"
      title="绑定工艺路线"
      width="500px"
    >
               width="500px">
      <el-form label-width="90px">
        <el-form-item label="工艺路线">
          <el-select
            v-model="bindForm.routeId"
          <el-select v-model="bindForm.routeId"
            placeholder="请选择工艺路线"
            style="width: 100%"
            :loading="bindRouteLoading"
          >
            <el-option
              v-for="item in routeOptions"
                     :loading="bindRouteLoading">
            <el-option v-for="item in routeOptions"
              :key="item.id"
              :label="`${item.processRouteCode || ''}`"
              :value="item.id"
            />
                       :value="item.id" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button
            type="primary"
          <el-button type="primary"
            :loading="bindRouteSaving"
            @click="handleBindRouteConfirm"
            >确 认</el-button
          >
                     @click="handleBindRouteConfirm">确 认</el-button>
          <el-button @click="bindRouteDialogVisible = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 来源数据弹窗 -->
    <el-dialog
      v-model="sourceDataDialogVisible"
    <el-dialog v-model="sourceDataDialogVisible"
      title="来源数据"
      width="1200px"
    >
      <div v-if="sourceRowData" class="applyno-summary1">
               top="5vh"
               class="source-data-dialog"
               append-to-body>
      <div v-if="sourceRowData"
           class="applyno-summary1">
        <div class="summary-item">
          <span class="summary-label">产品名称：</span>
          <span class="summary-value">
@@ -183,11 +161,9 @@
      </div>
      <div class="source-table-container">
        <div class="source-data-cards-container">
          <div
            v-for="(item, index) in sourceTableData"
          <div v-for="(item, index) in sourceTableData"
            :key="index"
            class="source-data-card"
          >
               class="source-data-card">
            <div class="card-body">
              <div class="info-grid">
                <div class="info-item">
@@ -197,9 +173,7 @@
                <div class="info-item">
                  <div class="info-label">数据来源</div>
                  <div class="info-value">
                    <el-tag
                      :type="item.source === '销售' ? 'primary' : 'warning'"
                    >
                    <el-tag :type="item.source === '销售' ? 'primary' : 'warning'">
                      {{ item.source || "未知" }}
                    </el-tag>
                  </div>
@@ -244,33 +218,23 @@
        </div>
      </div>
    </el-dialog>
    <MaterialLedgerDialog
      v-model="materialDialogVisible"
    <MaterialLedgerDialog v-model="materialDialogVisible"
      :order-row="currentMaterialOrder"
      @saved="getList"
    />
    <MaterialDetailDialog
      v-model="materialDetailDialogVisible"
                          @saved="getList" />
    <MaterialDetailDialog v-model="materialDetailDialogVisible"
      :order-row="currentMaterialDetailOrder"
      @confirmed="getList"
    />
    <MaterialSupplementDialog
      v-model="materialSupplementDialogVisible"
                          @confirmed="getList" />
    <MaterialSupplementDialog v-model="materialSupplementDialogVisible"
      :order-row="currentMaterialSupplementOrder"
      @saved="getList"
    />
    <new-product-order
      v-if="isShowNewModal"
                              @saved="getList" />
    <new-product-order v-if="isShowNewModal"
      v-model:visible="isShowNewModal"
      @completed="handleQuery"
    />
                       @completed="handleQuery" />
    <!-- 打印领料单组件 -->
    <div class="print-requisition-wrapper">
      <PrintMaterialRequisition
        ref="printRef"
      <PrintMaterialRequisition ref="printRef"
        :order-row="printOrderRow"
        :material-list="printMaterialList"
      />
                                :material-list="printMaterialList" />
    </div>
  </div>
</template>
@@ -327,7 +291,7 @@
const processColumnWidth = computed(() => {
  if (!tableData.value || tableData.value.length === 0) return "200px";
  const maxProcesses = Math.max(
    ...tableData.value.map((row) => row.processRouteStatus?.length || 0)
      ...tableData.value.map(row => row.processRouteStatus?.length || 0)
  );
  if (maxProcesses === 0) return "100px";
  // 每个工序圆圈 36px + 线条 30px = 66px，额外加 60px 边距和文字空间
@@ -346,7 +310,7 @@
    prop: "status",
    width: "150px",
    dataType: "tag",
    formatData: (val) =>
      formatData: val =>
      val === 1
        ? "待开始"
        : val === 2
@@ -356,7 +320,7 @@
        : val === 5
        ? "已结束"
        : "已取消",
    formatType: (val) =>
      formatType: val =>
      val === 1
        ? "primary"
        : val === 2
@@ -407,19 +371,19 @@
  {
    label: "开始日期",
    prop: "startTime",
    formatData: (val) => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
    width: 120,
  },
  {
    label: "结束日期",
    prop: "endTime",
    formatData: (val) => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
    width: 120,
  },
  {
    label: "计划完成时间",
    prop: "planCompleteTime",
    formatData: (val) => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
      formatData: val => (val ? dayjs(val).format("YYYY-MM-DD") : ""),
    width: 120,
  },
  {
@@ -432,31 +396,31 @@
      {
        name: "工艺路线",
        type: "text",
        showHide: (row) => row.processRouteCode,
        clickFun: (row) => {
          showHide: row => row.processRouteCode,
          clickFun: row => {
          showRouteItemModal(row);
        },
      },
      {
        name: "绑定工艺路线",
        type: "text",
        showHide: (row) => !row.processRouteCode && !row.endOrder,
        clickFun: (row) => {
          showHide: row => !row.processRouteCode && !row.endOrder,
          clickFun: row => {
          openBindRouteDialog(row, "add");
        },
      },
      {
        name: "更换工艺路线",
        type: "text",
        showHide: (row) => row.processRouteCode && !row.endOrder,
        clickFun: (row) => {
          showHide: row => row.processRouteCode && !row.endOrder,
          clickFun: row => {
          openBindRouteDialog(row, "change");
        },
      },
      {
        name: "来源",
        type: "text",
        clickFun: (row) => {
          clickFun: row => {
          showSourceData(row);
        },
      },
@@ -464,8 +428,8 @@
        name: "领料",
        type: "text",
        color: "#5EC7AB",
        showHide: (row) => !row.endOrder && !row.returned,
        clickFun: (row) => {
          showHide: row => !row.endOrder && !row.returned,
          clickFun: row => {
          openMaterialDialog(row);
        },
      },
@@ -473,8 +437,8 @@
        name: "补料",
        type: "text",
        color: "#5EC7AB",
        showHide: (row) => !row.endOrder && !row.returned,
        clickFun: (row) => {
          showHide: row => !row.endOrder && !row.returned,
          clickFun: row => {
          openMaterialSupplementDialog(row);
        },
      },
@@ -482,7 +446,7 @@
        name: "领料详情",
        type: "text",
        color: "#5EC7AB",
        clickFun: (row) => {
          clickFun: row => {
          openMaterialDetailDialog(row);
        },
      },
@@ -490,8 +454,8 @@
        name: "打印领料单",
        type: "text",
        color: "#5EC7AB",
        showHide: (row) => !row.endOrder,
        clickFun: (row) => {
          showHide: row => !row.endOrder,
          clickFun: row => {
          handlePrint(row);
        },
      },
@@ -499,7 +463,7 @@
        name: "生产追溯",
        type: "text",
        color: "#409eff",
        clickFun: (row) => {
          clickFun: row => {
          router.push({
            path: "/productionManagement/productionTraceability",
            query: {
@@ -514,8 +478,8 @@
        name: "结束订单",
        type: "text",
        color: "red",
        showHide: (row) => !row.endOrder,
        clickFun: (row) => {
          showHide: row => !row.endOrder,
          clickFun: row => {
          handleEndOrder(row);
        },
      },
@@ -544,7 +508,7 @@
});
const { searchForm } = toRefs(data);

const toProgressPercentage = (val) => {
  const toProgressPercentage = val => {
  const n = Number(val);
  if (!Number.isFinite(n)) return 0;
  if (n <= 0) return 0;
@@ -553,7 +517,7 @@
};

// 30/50/80/100 分段颜色：红/橙/蓝/绿
const progressColor = (percentage) => {
  const progressColor = percentage => {
  const p = toProgressPercentage(percentage);
  if (p < 30) return "#f56c6c";
  if (p < 50) return "#e6a23c";
@@ -597,7 +561,7 @@
// 打印相关
const printOrderRow = ref(null);
const printMaterialList = ref([]);
const handlePrint = async (row) => {
  const handlePrint = async row => {
  printOrderRow.value = row;
  proxy.$modal.loading("正在获取领料数据...");
  try {
@@ -674,17 +638,17 @@
  }
};

const openMaterialDialog = (row) => {
  const openMaterialDialog = row => {
  currentMaterialOrder.value = row;
  materialDialogVisible.value = true;
};

const openMaterialDetailDialog = async (row) => {
  const openMaterialDetailDialog = async row => {
  currentMaterialDetailOrder.value = row;
  materialDetailDialogVisible.value = true;
};

const openMaterialSupplementDialog = (row) => {
  const openMaterialSupplementDialog = row => {
  currentMaterialSupplementOrder.value = row;
  materialSupplementDialogVisible.value = true;
};
@@ -709,12 +673,12 @@
  page.current = 1;
  getList();
};
const pagination = (obj) => {
  const pagination = obj => {
  page.current = obj.page;
  page.size = obj.limit;
  getList();
};
const changeDaterange = (value) => {
  const changeDaterange = value => {
  if (value) {
    searchForm.value.entryDateStart = value[0];
    searchForm.value.entryDateEnd = value[1];
@@ -730,10 +694,10 @@
  const params = { ...searchForm.value, ...page };
  params.entryDate = undefined;
  productOrderListPage(params)
    .then(async (res) => {
      .then(async res => {
      const records = res.data.records || [];
      // 为每个订单查询对应的工序进度数据
      const processPromises = records.map(async (item) => {
        const processPromises = records.map(async item => {
        if (item.npsNo) {
          try {
            const workOrderRes = await productWorkOrderPage({
@@ -743,7 +707,7 @@
            const workOrders = workOrderRes.data.records || [];
            // 按照工序顺序排序（如果有顺序字段，假设为 orderNum 或按返回顺序）
            // 转换为 processRouteStatus 格式
            const processRouteStatus = workOrders.map((wo) => ({
              const processRouteStatus = workOrders.map(wo => ({
              name: wo.operationName || "未知工序",
              percentage: wo.completionStatus > 100 ? 100 : wo.completionStatus,
            }));
@@ -765,7 +729,7 @@
    });
};

const showRouteItemModal = async (row) => {
  const showRouteItemModal = async row => {
  const orderId = row.id;
  try {
    const res = await getOrderProcessRouteMain(orderId);
@@ -797,7 +761,7 @@
  }
};

const showProductStructure = (row) => {
  const showProductStructure = row => {
  router.push({
    path: "/productionManagement/productStructureDetail",
    query: {
@@ -812,12 +776,12 @@
};

// 查看来源生产计划数据
const showSourceData = (row) => {
  const showSourceData = row => {
  // 存储点击来源按钮时传递的row参数
  sourceRowData.value = row;
  // 调用API获取来源数据
  getProductOrderSource(row.id)
    .then((res) => {
      .then(res => {
      if (res.code === 200) {
        // 直接存储返回的扁平化数据
        sourceTableData.value = res.data || [];
@@ -828,21 +792,21 @@
        proxy.$modal.msgError(res.msg || "获取来源数据失败");
      }
    })
    .catch((err) => {
      .catch(err => {
      proxy.$modal.msgError("获取来源数据失败");
      console.error(err);
    });
};

// 表格选择数据
const handleSelectionChange = (selection) => {
  const handleSelectionChange = selection => {
  selectedRows.value = selection;
};

const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map((item) => item.id);
      ids = selectedRows.value.map(item => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
@@ -854,7 +818,7 @@
  })
    .then(() => {
      console.log(ids, "ids");
      delProductOrder(ids).then((res) => {
        delProductOrder(ids).then(res => {
        proxy.$modal.msgSuccess("退回成功");
        getList();
      });
@@ -884,7 +848,7 @@
};

// 结束订单
const handleEndOrder = (row) => {
  const handleEndOrder = row => {
  ElMessageBox.confirm(`是否确认结束订单：${row.npsNo}？`, "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
@@ -1008,13 +972,19 @@

.source-table-container {
  margin-top: 20px;
    flex: 1;
    min-height: 0;
    max-height: 500px;
    overflow: auto;
}

.source-data-cards-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 500px;
    flex: 1;
    min-height: 0;
    max-height: none;
  overflow-y: auto;
  padding: 10px;
  background-color: #f5f7fa;
@@ -1084,4 +1054,20 @@
    }
  }
}

  .source-data-dialog {
    .el-dialog {
      display: flex;
      flex-direction: column;
      max-height: 90vh;
    }

    .el-dialog__body {
      flex: 1;
      min-height: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
  }
</style>