spring
2026-01-15 fade849e256547c42ddfd221f4237e07bdc6f1cd
src/views/productionManagement/processRoute/processRouteItem/index.vue
@@ -4,9 +4,9 @@
      <template #right-button>
        <el-button
            type="primary"
            @click="isShowProductSelectDialog = true"
            @click="isShowProcessSelectDialog = true"
        >
          选择产品
          选择工序
        </el-button>
        <el-button type="primary" @click="handleSubmit">确认</el-button>
        <el-switch
@@ -59,18 +59,7 @@
        <template #default="scope" v-else>
          <template v-if="item.prop === 'processId'">
            <el-select
                v-model="scope.row[item.prop]"
                style="width: 100%;"
                @mousedown.stop
            >
              <el-option
                  v-for="process in processOptions"
                  :key="process.id"
                  :label="process.name"
                  :value="process.id"
              />
            </el-select>
            {{ getProcessName(scope.row.processId) || '-' }}
          </template>
          <template v-else>
            {{ scope.row[item.prop] || '-' }}
@@ -106,6 +95,7 @@
                  v-model="item.processId"
                  style="width: 100%;"
                  @mousedown.stop
                  :disabled="true"
              >
                <el-option
                    v-for="process in processOptions"
@@ -114,6 +104,14 @@
                    :value="process.id"
                />
              </el-select>
              <el-button
                  type="primary"
                  size="small"
                  style="margin-top: 8px; width: 100%;"
                  @click.stop="handleSelectProductForRow(item)"
              >
                选择产品
              </el-button>
            </div>
            <template #footer>
              <div class="step-card-footer">
@@ -125,9 +123,38 @@
      </div>
    </div>
    <!-- 工序选择对话框 -->
    <el-dialog
        v-model="isShowProcessSelectDialog"
        title="选择工序"
        width="400px"
    >
      <el-select
          v-model="selectedProcessId"
          placeholder="请选择工序(可多选)"
          style="width: 100%"
          multiple
          collapse-tags
          collapse-tags-tooltip
      >
        <el-option
            v-for="process in processOptions"
            :key="process.id"
            :label="process.name"
            :value="process.id"
        />
      </el-select>
      <template #footer>
        <el-button @click="isShowProcessSelectDialog = false">取消</el-button>
        <el-button type="primary" @click="handleSelectProcess">确定</el-button>
      </template>
    </el-dialog>
    <!-- 产品选择对话框 -->
    <ProductSelectDialog
        v-model="isShowProductSelectDialog"
        @confirm="handelSelectProducts"
        @confirm="handleSelectProductForCurrentRow"
        single
    />
  </div>
</template>
@@ -143,6 +170,9 @@
const processOptions = ref([]);
const tableLoading = ref(false);
const isShowProductSelectDialog = ref(false);
const isShowProcessSelectDialog = ref(false);
const selectedProcessId = ref([]);
const currentSelectRow = ref(null);
const routeItems = ref([]);
let tableSortable = null;
let stepsSortable = null;
@@ -164,17 +194,26 @@
const tableColumn = ref([
{ label: "工序名称", prop: "processId", width: 200 },
  { label: "产品名称", prop: "productName"},
  { label: "规格名称", prop: "model" },
  { label: "单位", prop: "unit" },
  { label: "工序名称", prop: "processId", width: 200 },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    fixed: "right",
    width: 100,
    width: 180,
    operation: [
      {
        name: "选择产品",
        type: "primary",
        link: true,
        clickFun: (row) => {
          currentSelectRow.value = row;
          isShowProductSelectDialog.value = true;
        }
      },
      {
        name: "删除",
        type: "danger",
@@ -190,6 +229,13 @@
  }
]);
// 根据工序ID获取工序名称
const getProcessName = (processId) => {
  if (!processId) return '';
  const process = processOptions.value.find(p => p.id === processId);
  return process ? process.name : '';
};
const removeItem = (index) => {
  routeItems.value.splice(index, 1);
  nextTick(() => initSortable());
@@ -203,36 +249,53 @@
  }
};
const handelSelectProducts = (products) => {
  destroySortable();
  const newData = products.map(({ id, ...product }) => ({
    ...product,
    productModelId: id,
// 选择工序 - 新增多条记录
const handleSelectProcess = () => {
  if (!selectedProcessId.value || selectedProcessId.value.length === 0) {
    proxy?.$modal?.msgWarning("请选择工序");
    return;
  }
  // 为每个选中的工序创建一条记录
  const newItems = selectedProcessId.value.map(processId => ({
    processId: processId,
    productName: "",
    model: "",
    unit: "",
    productModelId: undefined,
    routeId: routeId.value,
    id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
    processId: undefined
    id: `${Date.now()}-${Math.random().toString(36).slice(2)}-${processId}`,
  }));
  console.log('选择产品前数组:', routeItems.value);
  routeItems.value.push(...newData);
  routeItems.value = [...routeItems.value];
  console.log('选择产品后数组:', routeItems.value);
  routeItems.value.push(...newItems);
  // 延迟初始化,确保DOM完全渲染
  nextTick(() => {
    // 强制重新渲染组件
    if (proxy?.$forceUpdate) {
      proxy.$forceUpdate();
    }
    const temp = [...routeItems.value];
    routeItems.value = [];
    nextTick(() => {
      routeItems.value = temp;
      initSortable();
    });
    initSortable();
  });
  isShowProcessSelectDialog.value = false;
  selectedProcessId.value = [];
};
// 为指定行选择产品
const handleSelectProductForRow = (row) => {
  currentSelectRow.value = row;
  isShowProductSelectDialog.value = true;
};
// 处理当前行的产品选择
const handleSelectProductForCurrentRow = (products) => {
  if (products && products.length > 0 && currentSelectRow.value) {
    const product = products[0];
    // 更新当前行的产品信息
    currentSelectRow.value.productName = product.productName;
    currentSelectRow.value.model = product.model;
    currentSelectRow.value.unit = product.unit || "";
    currentSelectRow.value.productModelId = product.id;
    isShowProductSelectDialog.value = false;
    currentSelectRow.value = null;
  }
};
const findProcessRouteItems = () => {