中兴实强 1.新增工艺路线的时候产品可以多选 2.绑定工艺路线时，可以删减工序并且每道工序可以多选报工人 3.报工列表展示报工人，非本订单报工人不可报...

gaoluyang

2 天以前 add86852b44af3dfb55c70c4d7b3ea9bb4fca227

 src/views/productionManagement/productionOrder/index.vue

@@ -1,43 +1,49 @@
<template>
  <div class="app-container">
    <div class="search_form">
      <el-form :model="searchForm"
               :inline="true">
        <el-form-item label="客户名称:">
          <el-input v-model="searchForm.customerName"
      <el-form :model="searchForm" :inline="true">
        <el-form-item label="客户名称">
          <el-input
            v-model="searchForm.customerName"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
            :prefix-icon="Search"
                    style="width: 160px;"
                    @change="handleQuery" />
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="合同号:">
          <el-input v-model="searchForm.salesContractNo"
        <el-form-item label="销售合同号">
          <el-input
            v-model="searchForm.salesContractNo"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
            :prefix-icon="Search"
                    style="width: 160px;"
                    @change="handleQuery" />
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="产品名称:">
          <el-input v-model="searchForm.productCategory"
        <el-form-item label="产品名称">
          <el-input
            v-model="searchForm.productCategory"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
            :prefix-icon="Search"
                    style="width: 160px;"
                    @change="handleQuery" />
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item label="规格:">
          <el-input v-model="searchForm.specificationModel"
        <el-form-item label="规格型号">
          <el-input
            v-model="searchForm.specificationModel"
                    placeholder="请输入"
                    clearable
                    prefix-icon="Search"
            :prefix-icon="Search"
                    style="width: 160px;"
                    @change="handleQuery" />
            @change="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"
                     @click="handleQuery">搜索</el-button>
          <el-button type="primary" @click="handleQuery">查询</el-button>
        </el-form-item>
      </el-form>
      <div>
@@ -46,8 +52,10 @@
        <el-button @click="handleOut">导出</el-button>
      </div>
    </div>

    <div class="table_list">
      <PIMTable rowKey="id"
      <PIMTable
        rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
@@ -55,7 +63,8 @@
                :row-class-name="tableRowClassName"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                @pagination="pagination">
        @pagination="pagination"
      >
        <template #completionStatus="{ row }">
          <el-progress
            :percentage="toProgressPercentage(row?.completionStatus)"
@@ -65,56 +74,114 @@
        </template>
      </PIMTable>
    </div>
    <el-dialog v-model="bindRouteDialogVisible"

    <el-dialog
      v-model="bindRouteDialogVisible"
               title="绑定工艺路线"
               width="500px">
      width="700px"
    >
      <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"
            @change="handleBindRouteChange"
          >
            <el-option
              v-for="item in routeOptions"
                       :key="item.id"
                       :label="`${item.processRouteCode || ''}`"
                       :value="item.id" />
              :label="item.processRouteCode || ''"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item v-if="bindProcessList.length" label="报工人员">
          <div class="process-user-list">
            <div
              v-for="(item, index) in bindProcessList"
              :key="item.id || `${item.processId}-${index}`"
              class="process-user-item"
            >
              <div class="process-user-header">
                <div class="process-user-name">
                  {{ item.name || item.processName || item.no || `工序${index + 1}` }}
                </div>
                <el-button
                  type="danger"
                  link
                  class="process-user-remove"
                  @click="removeBindProcessItem(index)"
                >
                  删除
                </el-button>
              </div>
              <el-select
                v-model="bindForm.processUserList[index].userIds"
                class="process-user-select"
                placeholder="请选择报工人员"
                filterable
                clearable
                multiple
                collapse-tags
                collapse-tags-tooltip
                :max-collapse-tags="3"
                @change="handleBindProcessUserChange(index, $event)"
              >
                <el-option
                  v-for="user in userOptions"
                  :key="user.userId"
                  :label="user.nickName"
                  :value="user.userId"
                />
              </el-select>
            </div>
          </div>
        </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>

    <new-product-order v-if="isShowNewModal"
    <new-product-order
      v-if="isShowNewModal"
                         v-model:visible="isShowNewModal"
                         @completed="handleQuery" />
      @completed="handleQuery"
    />
  </div>
</template>

<script setup>
  import { onMounted, ref } from "vue";
import { defineAsyncComponent, getCurrentInstance, onMounted, reactive, ref, toRefs } from "vue";
  import { ElMessageBox } from "element-plus";
import { Search } from "@element-plus/icons-vue";
  import dayjs from "dayjs";
  import { useRouter } from "vue-router";
  import {
    productOrderListPage,
    listProcessRoute,
    bindingRoute,
    listProcessBom, delProductOrder,
  delProductOrder,
  listProcessRoute,
  productOrderListPage,
  } from "@/api/productionManagement/productionOrder.js";
  import { listMain as getOrderProcessRouteMain } from "@/api/productionManagement/productProcessRoute.js";
  import {fileDel} from "@/api/financialManagement/revenueManagement.js";
import { processList } from "@/api/productionManagement/productionProcess.js";
import { userListNoPageByTenantId } from "@/api/system/user.js";
  import PIMTable from "@/components/PIMTable/PIMTable.vue";

  const NewProductOrder = defineAsyncComponent(() => import("@/views/productionManagement/productionOrder/New.vue"));

  const { proxy } = getCurrentInstance();

  const router = useRouter();
  const isShowNewModal = ref(false);

@@ -122,32 +189,32 @@
    {
      label: "生产订单号",
      prop: "npsNo",
      width: '120px',
    width: "120px",
    },
    {
      label: "销售合同号",
      prop: "salesContractNo",
      width: '150px',
    width: "150px",
    },
    {
      label: "客户名称",
      prop: "customerName",
      width: '200px',
    width: "200px",
    },
    {
      label: "产品名称",
      prop: "productCategory",
      width: '120px',
    width: "120px",
    },
    {
      label: "规格",
    label: "规格型号",
      prop: "specificationModel",
      width: '120px',
    width: "120px",
    },
    {
      label: "工艺路线编号",
      prop: "processRouteCode",
      width: '200px',
    width: "200px",
    },
    {
      label: "需求数量",
@@ -214,6 +281,7 @@
      ],
    },
  ]);

  const tableData = ref([]);
  const tableLoading = ref(false);
  const page = reactive({
@@ -236,13 +304,11 @@

  const toProgressPercentage = val => {
    const n = Number(val);
    if (!Number.isFinite(n)) return 0;
    if (n <= 0) return 0;
  if (!Number.isFinite(n) || n <= 0) return 0;
    if (n >= 100) return 100;
    return Math.round(n);
  };

  // 30/50/80/100 分段颜色：红/橙/蓝/绿
  const progressColor = percentage => {
    const p = toProgressPercentage(percentage);
    if (p < 30) return "#f56c6c";
@@ -251,49 +317,124 @@
    return "#67c23a";
  };

  // 添加表行类名方法
  const tableRowClassName = ({ row }) => {
    if (!row.deliveryDate) return '';
    if (row.isFh) return '';
  if (!row.deliveryDate || row.isFh) return "";

    const diff = row.deliveryDaysDiff;
    if (diff === 15) {
      return 'yellow';
    } else if (diff === 10) {
      return 'pink';
    } else if (diff === 2) {
      return 'purple';
    } else if (diff < 2) {
      return 'red';
    }
  if (diff === 15) return "yellow";
  if (diff === 10) return "pink";
  if (diff === 2) return "purple";
  if (diff < 2) return "red";
  return "";
  };

  // 绑定工艺路线弹框
  const bindRouteDialogVisible = ref(false);
  const bindRouteLoading = ref(false);
  const bindRouteSaving = ref(false);
  const routeOptions = ref([]);
const bindProcessList = ref([]);
const userOptions = ref([]);
const userLoading = ref(false);
  const bindForm = reactive({
    orderId: null,
  productModelId: null,
    routeId: null,
  processUserList: [],
  });

const resetBindProcessUsers = () => {
  bindProcessList.value = [];
  bindForm.processUserList = [];
};

const ensureUserOptions = () => {
  if (userOptions.value.length || userLoading.value) return;

  userLoading.value = true;
  userListNoPageByTenantId()
    .then(res => {
      userOptions.value = res.data || [];
    })
    .finally(() => {
      userLoading.value = false;
    });
};

const createBindProcessUserList = list =>
  list.map(item => ({
    processId: item.id,
    processName: item.name || item.processName || item.no || "",
    userIds: [],
    userNames: "",
  }));

const buildBindProcessRouteItems = () =>
  bindProcessList.value.map((item, index) => {
    const processUser = bindForm.processUserList[index] || {};
    return {
      productOrderId: bindForm.orderId,
      productRouteId: bindForm.routeId,
      processId: item.id,
      productModelId: bindForm.productModelId,
      dragSort: item.dragSort ?? index + 1,
      isQuality: item.isQuality ?? false,
      reportUserIds: Array.isArray(processUser.userIds) ? processUser.userIds.join(",") : "",
    };
  });

const fetchBindProcessList = async routeId => {
  if (!routeId) {
    resetBindProcessUsers();
    return;
  }

  try {
    const res = await processList({ routeId });
    bindProcessList.value = res.data || [];
    bindForm.processUserList = createBindProcessUserList(bindProcessList.value);
    ensureUserOptions();
  } catch (error) {
    console.error("获取工序列表失败", error);
    proxy.$modal.msgError("获取工序列表失败");
    resetBindProcessUsers();
  }
};

const handleBindRouteChange = routeId => {
  fetchBindProcessList(routeId);
};

const handleBindProcessUserChange = (index, userIds) => {
  const selectedUsers = userOptions.value.filter(user => Array.isArray(userIds) && userIds.includes(user.userId));
  bindForm.processUserList[index].userNames = selectedUsers.map(user => user.nickName).join(",");
};

const removeBindProcessItem = index => {
  bindProcessList.value.splice(index, 1);
  bindForm.processUserList.splice(index, 1);
};

  const openBindRouteDialog = async row => {
    bindForm.orderId = row.id;
  bindForm.productModelId = row.productModelId ?? null;
    bindForm.routeId = null;
  bindForm.processUserList = [];
    bindRouteDialogVisible.value = true;
    routeOptions.value = [];
  resetBindProcessUsers();

    if (!row.productModelId) {
      proxy.$modal.msgWarning("当前订单缺少产品型号，无法查询工艺路线");
      bindRouteDialogVisible.value = false;
      return;
    }

    bindRouteLoading.value = true;
    try {
      const res = await listProcessRoute({ productModelId: row.productModelId });
      routeOptions.value = res.data || [];
    } catch (e) {
      console.error("获取工艺路线列表失败：", e);
  } catch (error) {
    console.error("获取工艺路线列表失败", error);
      proxy.$modal.msgError("获取工艺路线列表失败");
    } finally {
      bindRouteLoading.value = false;
@@ -305,56 +446,59 @@
      proxy.$modal.msgWarning("请选择工艺路线");
      return;
    }
  if (!bindForm.processUserList.length) {
    proxy.$modal.msgWarning("当前工艺路线下没有工序");
    return;
  }
  if (bindForm.processUserList.some(item => !Array.isArray(item.userIds) || item.userIds.length === 0)) {
    proxy.$modal.msgWarning("请为每道工序选择报工人员");
    return;
  }

    bindRouteSaving.value = true;
    try {
      await bindingRoute({
        id: bindForm.orderId,
        routeId: bindForm.routeId,
      processRouteItems: buildBindProcessRouteItems(),
      processUserList: bindForm.processUserList.map(item => ({
        ...item,
        userIds: item.userIds.join(","),
      })),
      });
      proxy.$modal.msgSuccess("绑定成功");
      bindRouteDialogVisible.value = false;
      getList();
    } catch (e) {
      console.error("绑定工艺路线失败：", e);
  } catch (error) {
    console.error("绑定工艺路线失败", error);
      proxy.$modal.msgError("绑定工艺路线失败");
    } finally {
      bindRouteSaving.value = false;
    }
  };

  // 查询列表
  /** 搜索按钮操作 */
  const handleQuery = () => {
    page.current = 1;
    getList();
  };

  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getList();
  };
  const changeDaterange = value => {
    if (value) {
      searchForm.value.entryDateStart = value[0];
      searchForm.value.entryDateEnd = value[1];
    } else {
      searchForm.value.entryDateStart = undefined;
      searchForm.value.entryDateEnd = undefined;
    }
    handleQuery();
  };

  const getList = () => {
    tableLoading.value = true;
    // 构造一个新的对象，不包含entryDate字段
    const params = { ...searchForm.value, ...page };
    params.entryDate = undefined;

    productOrderListPage(params)
      .then(res => {
        tableLoading.value = false;
        tableData.value = res.data.records;
        page.total = res.data.total;
      })
      .catch(() => {
    .finally(() => {
        tableLoading.value = false;
      });
  };
@@ -363,26 +507,27 @@
    const orderId = row.id;
    try {
      const res = await getOrderProcessRouteMain(orderId);
      const data = res.data || {};
      if (!data || !data.id) {
    const detail = res.data || {};
    if (!detail.id) {
        proxy.$modal.msgWarning("未找到关联的工艺路线");
        return;
      }

      router.push({
        path: "/productionManagement/processRouteItem",
        query: {
          id: data.id,
          processRouteCode: data.processRouteCode || "",
          productName: data.productName || "",
          model: data.model || "",
          bomNo: data.bomNo || "",
          description: data.description || "",
        id: detail.id,
        processRouteCode: detail.processRouteCode || "",
        productName: detail.productName || "",
        model: detail.model || "",
        bomNo: detail.bomNo || "",
        description: detail.description || "",
          orderId,
          type: "order",
        },
      });
    } catch (e) {
      console.error("获取工艺路线主信息失败：", e);
  } catch (error) {
    console.error("获取工艺路线信息失败", error);
      proxy.$modal.msgError("获取工艺路线信息失败");
    }
  };
@@ -401,36 +546,34 @@
    });
  };

  // 表格选择数据
  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);
    } else {
  if (!selectedRows.value.length) {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "导出", {

  const ids = selectedRows.value.map(item => item.id);
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      delProductOrder(ids).then((res) => {
  })
    .then(() => delProductOrder(ids))
    .then(() => {
        proxy.$modal.msgSuccess("删除成功");
        getList();
      });
    }).catch(() => {
      proxy.$modal.msg("已取消");
    })
    .catch(() => {
      proxy.$modal.msg("已取消删除");
    });
  };

  // 导出
  const handleOut = () => {
    ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "导出", {
  ElMessageBox.confirm("选中的内容将被导出，是否确认导出？", "提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
@@ -439,11 +582,9 @@
        proxy.download("/productOrder/export", {...searchForm.value}, "生产订单.xlsx");
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      proxy.$modal.msg("已取消导出");
      });
  };

  const handleConfirmRoute = () => {};

  onMounted(() => {
    getList();
@@ -455,19 +596,69 @@
  align-items: start;
}

::v-deep .yellow {
  background-color: #FAF0DE;
:deep(.yellow) {
  background-color: #faf0de;
}

::v-deep .pink {
  background-color: #FAE1DE;
:deep(.pink) {
  background-color: #fae1de;
}

::v-deep .red {
:deep(.red) {
  background-color: #f80202;
}

::v-deep .purple{
  background-color: #F4DEFA;
:deep(.purple) {
  background-color: #f4defa;
}

.process-user-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 14px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid #e8eef5;
}

.process-user-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #edf2f7;
}

.process-user-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.process-user-name {
  color: #1f2d3d;
  font-weight: 500;
  line-height: 1.4;
}

.process-user-remove {
  flex-shrink: 0;
  padding: 0;
}

.process-user-select {
  width: 100%;
}

@media (max-width: 768px) {
  .process-user-item {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}
</style>