Merge branch 'dev_NEW_pro' of http://114.132.189.42:9002/r/product-inventor...

chenhj

2026-04-30 743becb90e6f5e50d1331cad3b35253ed7fd693c

Merge branch 'dev_NEW_pro' of http://114.132.189.42:9002/r/product-inventory-management into dev_NEW_pro

 src/api/basicData/productProcess.js

@@ -1,10 +1,10 @@
import request from '@/utils/request'
import request from "@/utils/request";

// å·¥åºåˆ—表分页查询
export function productProcessListPage(query) {
  return request({
    url: '/productProcess/listPage',
    method: 'get',
    params: query
  })
    url: "/technologyOperation/listPage",
    method: "get",
    params: query,
  });
}

 src/api/productionManagement/productionProcess.js

@@ -4,7 +4,7 @@
// åˆ†é¡µæŸ¥è¯¢
export function listPage(query) {
  return request({
    url: "/productProcess/listPage",
    url: "/technologyOperation/listPage",
    method: "get",
    params: query,
  });
@@ -53,7 +53,7 @@
// å¯¼å…¥æ•°æ®
export function importData(data) {
  return request({
    url: "/productProcess/importData",
    url: "/technologyOperation/importData",
    method: "post",
    data: data,
  });
@@ -62,7 +62,7 @@
// ä¸‹è½½æ¨¡æ¿
export function downloadTemplate() {
  return request({
    url: "/productProcess/downloadTemplate",
    url: "/technologyOperation/downloadTemplate",
    method: "post",
    responseType: "blob",
  });

 src/router/index.js

@@ -106,6 +106,19 @@
    name: "DeviceInfo",
    meta: { title: "设备信息", icon: "monitor" },
  },
  {
    path: "/productionTraceability",
    component: Layout,
    hidden: true,
    children: [
      {
        path: "index",
        component: () => import("@/views/productionManagement/productionTraceability/index.vue"),
        name: "ProductionTraceability",
        meta: { title: "生产追溯", activeMenu: "/productionManagement/productionOrder" },
      },
    ],
  },
  // æ·»åŠ é¡¹ç›®è¯¦æƒ…页面路由配置
  {
    path: "/oaSystem/projectManagement/projectDetail",

 src/views/basicData/product/index.vue

@@ -2,41 +2,34 @@
  <div class="app-container product-view">
    <div class="left">
      <div>
        <el-input
          v-model="search"
          style="width: 210px"
          placeholder="输入关键字进行搜索"
          @change="searchFilter"
          @clear="searchFilter"
          clearable
          prefix-icon="Search"
        />
        <el-button
          v-if="false"
          type="primary"
          @click="openProDia('addOne')"
          style="margin-left: 10px"
          >新增产品大类</el-button
        >
        <el-input v-model="search"
                  style="width: 210px"
                  placeholder="输入关键字进行搜索"
                  @change="searchFilter"
                  @clear="searchFilter"
                  clearable
                  prefix-icon="Search" />
        <el-button v-if="false"
                   type="primary"
                   @click="openProDia('addOne')"
                   style="margin-left: 10px">新增产品大类</el-button>
      </div>
      <div ref="containerRef">
        <el-tree
          ref="tree"
          v-loading="treeLoad"
          :data="list"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          @node-expand="handleNodeExpand"
          @node-collapse="handleNodeCollapse"
          :key="treeKey"
          :default-expanded-keys="expandedKeys"
          :filter-node-method="filterNode"
          :props="{ children: 'children', label: 'label' }"
          highlight-current
          node-key="id"
          class="product-tree-scroll"
          style="height: calc(100vh - 190px); overflow-y: auto"
        >
        <el-tree ref="tree"
                 v-loading="treeLoad"
                 :data="list"
                 @node-click="handleNodeClick"
                 :expand-on-click-node="false"
                 @node-expand="handleNodeExpand"
                 @node-collapse="handleNodeCollapse"
                 :key="treeKey"
                 :default-expanded-keys="expandedKeys"
                 :filter-node-method="filterNode"
                 :props="{ children: 'children', label: 'label' }"
                 highlight-current
                 node-key="id"
                 class="product-tree-scroll"
                 style="height: calc(100vh - 190px); overflow-y: auto">
          <template #default="{ node, data }">
            <div class="custom-tree-node">
              <span class="tree-node-content">
@@ -47,25 +40,23 @@
                <span class="tree-node-label">{{ data.label }}</span>
              </span>
              <div>
                <el-button
                  type="primary"
                  link
                  :disabled="isTopLevelNode(data, node)"
                  @click="openProDia('edit', data)"
                >
                <el-button type="primary"
                           link
                           :disabled="isTopLevelNode(data, node)"
                           @click="openProDia('edit', data)">
                  ç¼–辑
                </el-button>
                <el-button type="primary" link @click="openProDia('add', data)">
                <el-button type="primary"
                           link
                           @click="openProDia('add', data)">
                  æ·»åŠ äº§å“
                </el-button>
                <el-button
                  v-if="!node.childNodes.length"
                  style="margin-left: 4px"
                  type="danger"
                  link
                  :disabled="isTopLevelNode(data, node)"
                  @click="remove(node, data)"
                >
                <el-button v-if="!node.childNodes.length"
                           style="margin-left: 4px"
                           type="danger"
                           link
                           :disabled="isTopLevelNode(data, node)"
                           @click="remove(node, data)">
                  åˆ é™¤
                </el-button>
              </div>
@@ -75,103 +66,109 @@
      </div>
    </div>
    <div class="right">
      <div style="margin-bottom: 10px" v-if="isShowButton">
        <el-button type="primary" @click="openModelDia('add')">
      <div style="margin-bottom: 10px"
           v-if="isShowButton">
        <el-button type="primary"
                   @click="openModelDia('add')">
          æ–°å¢žè§„格型号
        </el-button>
        <ImportExcel :product-id="currentId" @uploadSuccess="getModelList" />
        <el-button
          type="danger"
          @click="handleDelete"
          style="margin-left: 10px"
          plain
        >
        <ImportExcel :product-id="currentId"
                     @uploadSuccess="getModelList" />
        <el-button type="danger"
                   @click="handleDelete"
                   style="margin-left: 10px"
                   plain>
          åˆ é™¤
        </el-button>
      </div>
      <PIMTable
        rowKey="id"
        :column="tableColumn"
        :tableData="tableData"
        :page="page"
        :isSelection="true"
        @selection-change="handleSelectionChange"
        :tableLoading="tableLoading"
        @pagination="pagination"
      ></PIMTable>
      <PIMTable rowKey="id"
                :column="tableColumn"
                :tableData="tableData"
                :page="page"
                :isSelection="true"
                @selection-change="handleSelectionChange"
                :tableLoading="tableLoading"
                @pagination="pagination"></PIMTable>
    </div>
    <el-dialog v-model="productDia" title="产品" width="400px" @keydown.enter.prevent>
      <el-form
        :model="form"
        label-width="140px"
        label-position="top"
        :rules="rules"
        ref="formRef"
      >
    <el-dialog v-model="productDia"
               title="产品"
               width="400px"
               @keydown.enter.prevent>
      <el-form :model="form"
               label-width="140px"
               label-position="top"
               :rules="rules"
               ref="formRef">
        <el-row :gutter="30">
          <el-col :span="24">
            <el-form-item label="产品名称：" prop="productName">
              <el-input
                v-model="form.productName"
                placeholder="请输入产品名称"
                maxlength="20"
                show-word-limit
                clearable
                @keydown.enter.prevent
              />
            <el-form-item label="产品名称："
                          prop="productName">
              <el-input v-model="form.productName"
                        placeholder="请输入产品名称"
                        maxlength="20"
                        show-word-limit
                        clearable
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button type="primary"
                     @click="submitForm">确认</el-button>
          <el-button @click="closeProDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog
      v-model="modelDia"
      title="规格型号"
      width="400px"
      @close="closeModelDia"
      @keydown.enter.prevent
    >
      <el-form
        :model="modelForm"
        label-width="140px"
        label-position="top"
        :rules="modelRules"
        ref="modelFormRef"
      >
    <el-dialog v-model="modelDia"
               title="规格型号"
               width="400px"
               @close="closeModelDia"
               @keydown.enter.prevent>
      <el-form :model="modelForm"
               label-width="140px"
               label-position="top"
               :rules="modelRules"
               ref="modelFormRef">
        <el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="产品编号："
                            prop="productCode">
                <el-input v-model="modelForm.productCode"
                          placeholder="请输入产品编号"
                          clearable
                          @keydown.enter.prevent />
              </el-form-item>
            </el-col>
          </el-row>
          <el-col :span="24">
            <el-form-item label="规格型号：" prop="model">
              <el-input
                v-model="modelForm.model"
                placeholder="请输入规格型号"
                clearable
                @keydown.enter.prevent
              />
            <el-form-item label="规格型号："
                          prop="model">
              <el-input v-model="modelForm.model"
                        placeholder="请输入规格型号"
                        clearable
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="单位：" prop="unit">
              <el-input
                v-model="modelForm.unit"
                placeholder="请输入单位"
                clearable
                @keydown.enter.prevent
              />
            <el-form-item label="单位："
                          prop="unit">
              <el-input v-model="modelForm.unit"
                        placeholder="请输入单位"
                        clearable
                        @keydown.enter.prevent />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitModelForm">确认</el-button>
          <el-button type="primary"
                     @click="submitModelForm">确认</el-button>
          <el-button @click="closeModelDia">取消</el-button>
        </div>
      </template>
@@ -180,473 +177,480 @@
</template>

<script setup>
import { nextTick, ref } from "vue";
import { ElMessageBox } from "element-plus";
import {
  addOrEditProduct,
  addOrEditProductModel,
  delProduct,
  delProductModel,
  modelListPage,
  productTreeList,
} from "@/api/basicData/product.js";
import ImportExcel from "./ImportExcel/index.vue";
  import { nextTick, ref } from "vue";
  import { ElMessageBox } from "element-plus";
  import {
    addOrEditProduct,
    addOrEditProductModel,
    delProduct,
    delProductModel,
    modelListPage,
    productTreeList,
  } from "@/api/basicData/product.js";
  import ImportExcel from "./ImportExcel/index.vue";

const { proxy } = getCurrentInstance();
const tree = ref(null);
const containerRef = ref(null);
const treeKey = ref(0);
const expandedKeySet = new Set();
const EXPANDED_STORAGE_KEY = "basicData_product_tree_expanded_keys_v2";
  const { proxy } = getCurrentInstance();
  const tree = ref(null);
  const containerRef = ref(null);
  const treeKey = ref(0);
  const expandedKeySet = new Set();
  const EXPANDED_STORAGE_KEY = "basicData_product_tree_expanded_keys_v2";

const loadExpandedKeys = () => {
  if (typeof window === "undefined") {
    return [];
  }
  try {
    const saved = localStorage.getItem(EXPANDED_STORAGE_KEY);
    return saved ? JSON.parse(saved) : [];
  } catch (error) {
    console.error(error);
    return [];
  }
};

const saveExpandedKeys = () => {
  if (typeof window === "undefined") {
    return;
  }
  localStorage.setItem(
    EXPANDED_STORAGE_KEY,
    JSON.stringify(Array.from(expandedKeySet))
  );
};

loadExpandedKeys().forEach((key) => expandedKeySet.add(key));

const syncExpandedKeysFromTree = () => {
  const keys = [];
  const walk = (nodes) => {
    (nodes || []).forEach((item) => {
      if (item.expanded && item.data?.id !== undefined) {
        keys.push(item.data.id);
      }
      if (item.childNodes && item.childNodes.length) {
        walk(item.childNodes);
      }
    });
  };

  walk(tree.value?.root?.childNodes);
  expandedKeySet.clear();
  keys.forEach((key) => expandedKeySet.add(key));
  expandedKeys.value = keys;
  saveExpandedKeys();
};

const normalizeExpandedKeys = (treeData) => {
  const parentMap = new Map();
  const walk = (nodes, parentId = null) => {
    (nodes || []).forEach((item) => {
      parentMap.set(item.id, parentId);
      if (item.children && item.children.length) {
        walk(item.children, item.id);
      }
    });
  };

  walk(treeData);

  const normalizedKeys = Array.from(expandedKeySet).filter((key) => {
    if (!parentMap.has(key)) {
      return false;
  const loadExpandedKeys = () => {
    if (typeof window === "undefined") {
      return [];
    }
    let currentId = key;
    while (parentMap.has(currentId)) {
      const parentId = parentMap.get(currentId);
      if (!parentId) {
        return true;
      }
      if (!expandedKeySet.has(parentId)) {
    try {
      const saved = localStorage.getItem(EXPANDED_STORAGE_KEY);
      return saved ? JSON.parse(saved) : [];
    } catch (error) {
      console.error(error);
      return [];
    }
  };

  const saveExpandedKeys = () => {
    if (typeof window === "undefined") {
      return;
    }
    localStorage.setItem(
      EXPANDED_STORAGE_KEY,
      JSON.stringify(Array.from(expandedKeySet))
    );
  };

  loadExpandedKeys().forEach(key => expandedKeySet.add(key));

  const syncExpandedKeysFromTree = () => {
    const keys = [];
    const walk = nodes => {
      (nodes || []).forEach(item => {
        if (item.expanded && item.data?.id !== undefined) {
          keys.push(item.data.id);
        }
        if (item.childNodes && item.childNodes.length) {
          walk(item.childNodes);
        }
      });
    };

    walk(tree.value?.root?.childNodes);
    expandedKeySet.clear();
    keys.forEach(key => expandedKeySet.add(key));
    expandedKeys.value = keys;
    saveExpandedKeys();
  };

  const normalizeExpandedKeys = treeData => {
    const parentMap = new Map();
    const walk = (nodes, parentId = null) => {
      (nodes || []).forEach(item => {
        parentMap.set(item.id, parentId);
        if (item.children && item.children.length) {
          walk(item.children, item.id);
        }
      });
    };

    walk(treeData);

    const normalizedKeys = Array.from(expandedKeySet).filter(key => {
      if (!parentMap.has(key)) {
        return false;
      }
      currentId = parentId;
    }
    return true;
  });

  if (normalizedKeys.length !== expandedKeySet.size) {
    expandedKeySet.clear();
    normalizedKeys.forEach((key) => expandedKeySet.add(key));
    saveExpandedKeys();
  }
};

const productDia = ref(false);
const modelDia = ref(false);
const modelOperationType = ref("");
const search = ref("");
const currentId = ref("");
const currentParentId = ref("");
const operationType = ref("");
const treeLoad = ref(false);
const list = ref([]);
const expandedKeys = ref([]);
const tableColumn = ref([
  {
    label: "规格型号",
    prop: "model",
  },
  {
    label: "单位",
    prop: "unit",
  },
  {
    dataType: "action",
    label: "操作",
    align: "center",
    operation: [
      {
        name: "编辑",
        type: "text",
        clickFun: (row) => {
          openModelDia("edit", row);
        },
      },
    ],
  },
]);
const tableData = ref([]);
const tableLoading = ref(false);
const isShowButton = ref(false);
const selectedRows = ref([]);
const page = reactive({
  current: 1,
  size: 10,
  total: 0,
});
const data = reactive({
  form: {
    productName: "",
  },
  rules: {
    productName: [
      { required: true, message: "请输入", trigger: "blur" },
      { max: 20, message: "产品名称不能超过20个字符", trigger: "blur" },
    ],
  },
  modelForm: {
    model: "",
    unit: "",
  },
  modelRules: {
    model: [{ required: true, message: "请输入", trigger: "blur" }],
    unit: [{ required: true, message: "请输入", trigger: "blur" }],
  },
});
const { form, rules, modelForm, modelRules } = toRefs(data);
// æŸ¥è¯¢äº§å“æ ‘
const getProductTreeList = () => {
  treeLoad.value = true;
  productTreeList()
    .then((res) => {
      list.value = res || [];
      normalizeExpandedKeys(list.value);
      expandedKeys.value = Array.from(expandedKeySet);
      treeKey.value += 1;
      nextTick(() => {
        tree.value?.setDefaultExpandedKeys?.(expandedKeys.value);
      });
    })
    .catch((err) => {
      console.error(err);
    })
    .finally(() => {
      treeLoad.value = false;
    });
};
const handleNodeExpand = (data) => {
  nextTick(syncExpandedKeysFromTree);
};
const handleNodeCollapse = (data, node) => {
  node?.eachNode?.((item) => {
    item.collapse();
  });
  nextTick(syncExpandedKeysFromTree);
};
// è¿‡æ»¤äº§å“æ ‘
const searchFilter = () => {
  proxy.$refs.tree.filter(search.value);
};
const isTopLevelNode = (data, node) => {
  if (node?.level !== undefined) {
    return node.level === 1;
  }
  return [null, undefined, "", 0, "0"].includes(data?.parentId);
};
// æ‰“开产品弹框
const openProDia = (type, data) => {
  if (data && type === "edit" && isTopLevelNode(data)) {
    proxy.$modal.msgWarning("一级节点不能编辑或删除");
    return;
  }
  operationType.value = type;
  productDia.value = true;
  form.value.productName = "";
  if (type === "edit") {
    form.value.productName = data.productName;
  }
};
// æ‰“开规格型号弹框
const openModelDia = (type, data) => {
  modelOperationType.value = type;
  modelDia.value = true;
  modelForm.value.model = "";
  modelForm.value.model = "";
  modelForm.value.id = "";
  if (type === "edit") {
    modelForm.value = { ...data };
  }
};
// æäº¤äº§å“åç§°ä¿®æ”¹
const submitForm = () => {
  proxy.$refs.formRef.validate((valid) => {
    if (valid) {
      if (operationType.value === "add") {
        form.value.parentId = currentId.value;
        form.value.id = "";
      } else if (operationType.value === "addOne") {
        form.value.id = "";
        form.value.parentId = "";
      } else {
        form.value.id = currentId.value;
        form.value.parentId = "";
      let currentId = key;
      while (parentMap.has(currentId)) {
        const parentId = parentMap.get(currentId);
        if (!parentId) {
          return true;
        }
        if (!expandedKeySet.has(parentId)) {
          return false;
        }
        currentId = parentId;
      }
      addOrEditProduct(form.value).then((res) => {
        proxy.$modal.msgSuccess("提交成功");
        closeProDia();
        getProductTreeList();
      });
    }
  });
};
// å…³é—­äº§å“å¼¹æ¡†
const closeProDia = () => {
  proxy.$refs.formRef.resetFields();
  productDia.value = false;
};
      return true;
    });

// åˆ é™¤äº§å“
const remove = (node, data) => {
  if (isTopLevelNode(data, node)) {
    proxy.$modal.msgWarning("一级节点不能编辑或删除");
    return;
  }
  let ids = [];
  ids.push(data.id);
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableLoading.value = true;
      delProduct(ids)
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
    if (normalizedKeys.length !== expandedKeySet.size) {
      expandedKeySet.clear();
      normalizedKeys.forEach(key => expandedKeySet.add(key));
      saveExpandedKeys();
    }
  };

  const productDia = ref(false);
  const modelDia = ref(false);
  const modelOperationType = ref("");
  const search = ref("");
  const currentId = ref("");
  const currentParentId = ref("");
  const operationType = ref("");
  const treeLoad = ref(false);
  const list = ref([]);
  const expandedKeys = ref([]);
  const tableColumn = ref([
    {
      label: "产品编号",
      prop: "productCode",
    },
    {
      label: "规格型号",
      prop: "model",
    },
    {
      label: "单位",
      prop: "unit",
    },
    {
      dataType: "action",
      label: "操作",
      align: "center",
      operation: [
        {
          name: "编辑",
          type: "text",
          clickFun: row => {
            openModelDia("edit", row);
          },
        },
      ],
    },
  ]);
  const tableData = ref([]);
  const tableLoading = ref(false);
  const isShowButton = ref(false);
  const selectedRows = ref([]);
  const page = reactive({
    current: 1,
    size: 10,
    total: 0,
  });
  const data = reactive({
    form: {
      productName: "",
    },
    rules: {
      productName: [
        { required: true, message: "请输入", trigger: "blur" },
        { max: 20, message: "产品名称不能超过20个字符", trigger: "blur" },
      ],
    },
    modelForm: {
      model: "",
      unit: "",
      productCode: "",
    },
    modelRules: {
      model: [{ required: true, message: "请输入", trigger: "blur" }],
      unit: [{ required: true, message: "请输入", trigger: "blur" }],
      productCode: [{ required: true, message: "请输入", trigger: "blur" }],
    },
  });
  const { form, rules, modelForm, modelRules } = toRefs(data);
  // æŸ¥è¯¢äº§å“æ ‘
  const getProductTreeList = () => {
    treeLoad.value = true;
    productTreeList()
      .then(res => {
        list.value = res || [];
        normalizeExpandedKeys(list.value);
        expandedKeys.value = Array.from(expandedKeySet);
        treeKey.value += 1;
        nextTick(() => {
          tree.value?.setDefaultExpandedKeys?.(expandedKeys.value);
        });
      })
      .catch(err => {
        console.error(err);
      })
      .finally(() => {
        treeLoad.value = false;
      });
  };
  const handleNodeExpand = data => {
    nextTick(syncExpandedKeysFromTree);
  };
  const handleNodeCollapse = (data, node) => {
    node?.eachNode?.(item => {
      item.collapse();
    });
    nextTick(syncExpandedKeysFromTree);
  };
  // è¿‡æ»¤äº§å“æ ‘
  const searchFilter = () => {
    proxy.$refs.tree.filter(search.value);
  };
  const isTopLevelNode = (data, node) => {
    if (node?.level !== undefined) {
      return node.level === 1;
    }
    return [null, undefined, "", 0, "0"].includes(data?.parentId);
  };
  // æ‰“开产品弹框
  const openProDia = (type, data) => {
    if (data && type === "edit" && isTopLevelNode(data)) {
      proxy.$modal.msgWarning("一级节点不能编辑或删除");
      return;
    }
    operationType.value = type;
    productDia.value = true;
    form.value.productName = "";
    if (type === "edit") {
      form.value.productName = data.productName;
    }
  };
  // æ‰“开规格型号弹框
  const openModelDia = (type, data) => {
    modelOperationType.value = type;
    modelDia.value = true;
    modelForm.value.model = "";
    modelForm.value.unit = "";
    modelForm.value.productCode = "";
    modelForm.value.id = "";
    if (type === "edit") {
      modelForm.value = { ...data };
    }
  };
  // æäº¤äº§å“åç§°ä¿®æ”¹
  const submitForm = () => {
    proxy.$refs.formRef.validate(valid => {
      if (valid) {
        if (operationType.value === "add") {
          form.value.parentId = currentId.value;
          form.value.id = "";
        } else if (operationType.value === "addOne") {
          form.value.id = "";
          form.value.parentId = "";
        } else {
          form.value.id = currentId.value;
          form.value.parentId = "";
        }
        addOrEditProduct(form.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeProDia();
          getProductTreeList();
        })
        .finally(() => {
          tableLoading.value = false;
        });
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
      }
    });
};
// é€‰æ‹©äº§å“
const handleNodeClick = (val, node, el) => {
  // åˆ¤æ–­æ˜¯å¦ä¸ºå¶å­èŠ‚点
  isShowButton.value = !(val.children && val.children.length > 0);
  // åªæœ‰å¶å­èŠ‚点才执行以下逻辑
  currentId.value = val.id;
  currentParentId.value = val.parentId;
  getModelList();
};
  };
  // å…³é—­äº§å“å¼¹æ¡†
  const closeProDia = () => {
    proxy.$refs.formRef.resetFields();
    productDia.value = false;
  };

// æäº¤è§„格型号修改
const submitModelForm = () => {
  proxy.$refs.modelFormRef.validate((valid) => {
    if (valid) {
      modelForm.value.productId = currentId.value;
      addOrEditProductModel(modelForm.value).then((res) => {
        proxy.$modal.msgSuccess("提交成功");
        closeModelDia();
        getModelList();
      });
  // åˆ é™¤äº§å“
  const remove = (node, data) => {
    if (isTopLevelNode(data, node)) {
      proxy.$modal.msgWarning("一级节点不能编辑或删除");
      return;
    }
  });
};
// å…³é—­åž‹å·å¼¹æ¡†
const closeModelDia = () => {
  proxy.$refs.modelFormRef.resetFields();
  modelDia.value = false;
};
// è¡¨æ ¼é€‰æ‹©æ•°æ®
const handleSelectionChange = (selection) => {
  selectedRows.value = selection;
};

// æŸ¥è¯¢è§„格型号
const pagination = (obj) => {
  page.current = obj.page;
  page.size = obj.limit;
  getModelList();
};
const getModelList = () => {
  tableLoading.value = true;
  modelListPage({
    id: currentId.value,
    current: page.current,
    size: page.size,
  }).then((res) => {
    console.log("res", res);
    tableData.value = res.records;
    page.total = res.total;
    tableLoading.value = false;
  });
};
// åˆ é™¤è§„格型号
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
    return;
  }
  ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
    confirmButtonText: "确认",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      tableLoading.value = true;
      delProductModel(ids)
        .then((res) => {
          proxy.$modal.msgSuccess("删除成功");
          getModelList();
        })
        .finally(() => {
          tableLoading.value = false;
        });
    let ids = [];
    ids.push(data.id);
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
    .catch(() => {
      proxy.$modal.msg("已取消");
      .then(() => {
        tableLoading.value = true;
        delProduct(ids)
          .then(res => {
            proxy.$modal.msgSuccess("删除成功");
            getProductTreeList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // é€‰æ‹©äº§å“
  const handleNodeClick = (val, node, el) => {
    // åˆ¤æ–­æ˜¯å¦ä¸ºå¶å­èŠ‚点
    isShowButton.value = !(val.children && val.children.length > 0);
    // åªæœ‰å¶å­èŠ‚点才执行以下逻辑
    currentId.value = val.id;
    currentParentId.value = val.parentId;
    getModelList();
  };

  // æäº¤è§„格型号修改
  const submitModelForm = () => {
    proxy.$refs.modelFormRef.validate(valid => {
      if (valid) {
        modelForm.value.productId = currentId.value;
        addOrEditProductModel(modelForm.value).then(res => {
          proxy.$modal.msgSuccess("提交成功");
          closeModelDia();
          getModelList();
        });
      }
    });
};
// è°ƒç”¨tree过滤方法 ä¸­æ–‡è‹±è¿‡æ»¤
const filterNode = (value, data, node) => {
  if (!value) {
    //如果数据为空，则返回true,显示所有的数据项
    return true;
  }
  // æŸ¥è¯¢åˆ—表是否有匹配数据，将值小写，匹配英文数据
  let val = value.toLowerCase();
  return chooseNode(val, data, node); // è°ƒç”¨è¿‡æ»¤äºŒå±‚方法
};
// è¿‡æ»¤çˆ¶èŠ‚点 / å­èŠ‚点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
const chooseNode = (value, data, node) => {
  if (data.label.indexOf(value) !== -1) {
    return true;
  }
  const level = node.level;
  // å¦‚果传入的节点本身就是一级节点就不用校验了
  if (level === 1) {
    return false;
  }
  // å…ˆå–当前节点的父节点
  let parentData = node.parent;
  // éåŽ†å½“前节点的父节点
  let index = 0;
  while (index < level - 1) {
    // å¦‚果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
    if (parentData.data.label.indexOf(value) !== -1) {
  };
  // å…³é—­åž‹å·å¼¹æ¡†
  const closeModelDia = () => {
    proxy.$refs.modelFormRef.resetFields();
    modelDia.value = false;
  };
  // è¡¨æ ¼é€‰æ‹©æ•°æ®
  const handleSelectionChange = selection => {
    selectedRows.value = selection;
  };

  // æŸ¥è¯¢è§„格型号
  const pagination = obj => {
    page.current = obj.page;
    page.size = obj.limit;
    getModelList();
  };
  const getModelList = () => {
    tableLoading.value = true;
    modelListPage({
      id: currentId.value,
      current: page.current,
      size: page.size,
    }).then(res => {
      console.log("res", res);
      tableData.value = res.records;
      page.total = res.total;
      tableLoading.value = false;
    });
  };
  // åˆ é™¤è§„格型号
  const handleDelete = () => {
    let ids = [];
    if (selectedRows.value.length > 0) {
      ids = selectedRows.value.map(item => item.id);
    } else {
      proxy.$modal.msgWarning("请选择数据");
      return;
    }
    ElMessageBox.confirm("选中的内容将被删除，是否确认删除？", "删除提示", {
      confirmButtonText: "确认",
      cancelButtonText: "取消",
      type: "warning",
    })
      .then(() => {
        tableLoading.value = true;
        delProductModel(ids)
          .then(res => {
            proxy.$modal.msgSuccess("删除成功");
            getModelList();
          })
          .finally(() => {
            tableLoading.value = false;
          });
      })
      .catch(() => {
        proxy.$modal.msg("已取消");
      });
  };
  // è°ƒç”¨tree过滤方法 ä¸­æ–‡è‹±è¿‡æ»¤
  const filterNode = (value, data, node) => {
    if (!value) {
      //如果数据为空，则返回true,显示所有的数据项
      return true;
    }
    // å¦åˆ™çš„话再往上一层做匹配
    parentData = parentData.parent;
    index++;
  }
  // æ²¡åŒ¹é…åˆ°è¿”回false
  return false;
};
getProductTreeList();
    // æŸ¥è¯¢åˆ—表是否有匹配数据，将值小写，匹配英文数据
    let val = value.toLowerCase();
    return chooseNode(val, data, node); // è°ƒç”¨è¿‡æ»¤äºŒå±‚方法
  };
  // è¿‡æ»¤çˆ¶èŠ‚点 / å­èŠ‚点 (如果输入的参数是父节点且能匹配，则返回该节点以及其下的所有子节点；如果参数是子节点，则返回该节点的父节点。name是中文字符，enName是英文字符.
  const chooseNode = (value, data, node) => {
    if (data.label.indexOf(value) !== -1) {
      return true;
    }
    const level = node.level;
    // å¦‚果传入的节点本身就是一级节点就不用校验了
    if (level === 1) {
      return false;
    }
    // å…ˆå–当前节点的父节点
    let parentData = node.parent;
    // éåŽ†å½“前节点的父节点
    let index = 0;
    while (index < level - 1) {
      // å¦‚果匹配到直接返回，此处name值是中文字符，enName是英文字符。判断匹配中英文过滤
      if (parentData.data.label.indexOf(value) !== -1) {
        return true;
      }
      // å¦åˆ™çš„话再往上一层做匹配
      parentData = parentData.parent;
      index++;
    }
    // æ²¡åŒ¹é…åˆ°è¿”回false
    return false;
  };
  getProductTreeList();
</script>

<style scoped>
.product-view {
  display: flex;
}
.left {
  width: 450px;
  min-width: 450px;
  padding: 16px;
  background: #ffffff;
}
.right {
  flex: 1;
  min-width: 0;
  padding: 16px;
  margin-left: 20px;
  background: #ffffff;
}
.custom-tree-node {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.tree-node-content {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  height: 100%;
  overflow: hidden;
}
.tree-node-content .orange-icon {
  flex-shrink: 0;
}
.tree-node-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.orange-icon {
  color: orange;
  font-size: 18px;
  margin-right: 8px; /* å›¾æ ‡ä¸Žæ–‡å­—之间加点间距 */
}
.product-tree-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c0c4cc #f5f7fa;
}
.product-tree-scroll::-webkit-scrollbar {
  width: 8px;
}
.product-tree-scroll::-webkit-scrollbar-track {
  background: #f5f7fa;
  border-radius: 4px;
}
.product-tree-scroll::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}
.product-tree-scroll::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
  .product-view {
    display: flex;
  }
  .left {
    width: 450px;
    min-width: 450px;
    padding: 16px;
    background: #ffffff;
  }
  .right {
    flex: 1;
    min-width: 0;
    padding: 16px;
    margin-left: 20px;
    background: #ffffff;
  }
  .custom-tree-node {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .tree-node-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    height: 100%;
    overflow: hidden;
  }
  .tree-node-content .orange-icon {
    flex-shrink: 0;
  }
  .tree-node-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .orange-icon {
    color: orange;
    font-size: 18px;
    margin-right: 8px; /* å›¾æ ‡ä¸Žæ–‡å­—之间加点间距 */
  }
  .product-tree-scroll {
    scrollbar-width: thin;
    scrollbar-color: #c0c4cc #f5f7fa;
  }
  .product-tree-scroll::-webkit-scrollbar {
    width: 8px;
  }
  .product-tree-scroll::-webkit-scrollbar-track {
    background: #f5f7fa;
    border-radius: 4px;
  }
  .product-tree-scroll::-webkit-scrollbar-thumb {
    background: #c0c4cc;
    border-radius: 4px;
  }
  .product-tree-scroll::-webkit-scrollbar-thumb:hover {
    background: #909399;
  }
</style>

 src/views/productionManagement/productionOrder/index.vue

@@ -384,6 +384,21 @@
            handlePrint(row);
          },
        },
        {
          name: "生产追溯",
          type: "text",
          color: "#409eff",
          clickFun: row => {
            router.push({
              path: "/productionTraceability/index",
              query: {
                npsNo: row.npsNo,
                productName: row.productName,
                model: row.model,
              },
            });
          },
        },
      ],
    },
  ]);

 src/views/productionManagement/productionTraceability/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,831 @@
<template>
  <div class="app-container">
    <el-card style="height:82vh;overflow:auto;">
      <template #header>
        <div class="card-header">
          <el-form :inline="true"
                   :model="searchForm"
                   class="search-form">
            <el-form-item label="生产订单号">
              <el-select v-model="selectedNpsNo"
                         filterable
                         remote
                         reserve-keyword
                         placeholder="请输入生产订单号"
                         :loading="npsNoLoading"
                         :remote-method="handleNpsNoSearch"
                         @change="handleSearch"
                         style="width: 400px;">
                <el-option v-for="option in npsNoOptions"
                           :key="option.id"
                           :label="option.npsNo + '-' + option.productName + '-' + option.model"
                           :value="option.id" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="handleBack">返回</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <!-- åŸºç¡€ä¿¡æ¯ -->
      <div v-if="rowData.productionOrderDto"
           class="detail-section">
        <h3 class="section-title">基础信息</h3>
        <el-descriptions :column="3"
                         border>
          <el-descriptions-item label="生产订单号">{{ rowData.productionOrderDto?.npsNo || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品名称">{{ rowData.productionOrderDto?.productName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="产品规格">{{ rowData.productionOrderDto?.model || '-' }}</el-descriptions-item>
          <el-descriptions-item label="物料编码">{{ rowData.productionOrderDto?.materialCode || '-' }}</el-descriptions-item>
          <el-descriptions-item label="计划数量">{{ rowData.productionOrderDto?.quantity || 0 }} <span class="unit">{{ rowData.productionOrderDto?.unit || '-' }}</span></el-descriptions-item>
          <el-descriptions-item label="当前状态">
            <el-tag :type="getStatusType(rowData.productionOrderDto?.status)">
              {{ getStatusText(rowData.productionOrderDto?.status) }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="客户名称">{{ rowData.productionOrderDto?.customerName || '-' }}</el-descriptions-item>
          <el-descriptions-item label="开始日期">{{ rowData.productionOrderDto?.startTime || '-' }}</el-descriptions-item>
          <el-descriptions-item label="完成进度">
            <el-progress :percentage="rowData.productionOrderDto?.completionStatus"
                         :color="customColors(rowData.productionOrderDto?.completionStatus)"
                         :status="rowData.productionOrderDto?.completionStatus === 100 ? 'success' : ''"
                         style="width: 120px;" />
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-empty v-else
                description="请搜索生产订单号" />
      <!-- ç”Ÿäº§æŠ¥å·¥è®°å½• -->
      <div v-if="rowData.productionRecords && rowData.productionRecords.length > 0"
           class="progress-container">
        <div class="progress-section">
          <h3 class="section-title">工单信息</h3>
          <div class="order-item">
            <el-table :data="rowData.productionRecords"
                      border
                      style="width: 100%">
              <el-table-column prop="productNo"
                               label="工单编号"
                               align="center">
              </el-table-column>
              <el-table-column prop="productName"
                               label="产品名称"
                               align="center" />
              <el-table-column prop="model"
                               label="规格"
                               align="center" />
              <el-table-column prop="processName"
                               label="工序名称"
                               align="center" />
              <el-table-column prop="requiredQuantity"
                               label="需求数量"
                               align="center" />
              <el-table-column prop="completedQuantity"
                               label="完成数量"
                               align="center" />
              <el-table-column label="详情"
                               align="center"
                               width="200">
                <template #default="{ row }">
                  <el-link @click="handleClickStep(row)"
                           type="primary">报工记录</el-link>
                  <el-link @click="handleClickQuality(row)"
                           style="margin-left:20px"
                           type="primary">质检信息</el-link>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-empty v-else-if="rowData.productionOrderDto"
                description="暂无报工记录" />
    </el-card>
    <!-- ç”Ÿäº§æŠ¥å·¥è¯¦æƒ…弹窗 -->
    <el-dialog v-model="detailDialogVisible"
               title="生产报工详情"
               width="1000px"
               :close-on-click-modal="false"
               custom-class="custom-dialog">
      <div class="detail-container">
        <!-- åŸºç¡€ä¿¡æ¯ -->
        <div class="detail-section">
          <h3 class="section-title">基础信息</h3>
          <el-descriptions :column="3"
                           border>
            <el-descriptions-item label="生产工单号">{{ detailData.npsNo || '-' }}</el-descriptions-item>
            <el-descriptions-item label="班组">
              <el-tag :type="detailData.schedule === '白班' ? 'primary' : 'warning'">{{ detailData.schedule || '-' }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="产品编码">{{ detailData.materialCode || '-' }}</el-descriptions-item>
            <el-descriptions-item label="产品名称">{{ detailData.productName || '-' }}</el-descriptions-item>
            <el-descriptions-item label="规格">{{ detailData.model || '-' }}</el-descriptions-item>
            <el-descriptions-item label="合格数量"><span class="num2">{{ detailData.qualifiedQuantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="不合格数量"><span class="num3">{{ detailData.unqualifiedQuantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="总数量"><span class="num1">{{ detailData.quantity || 0 }}</span> <span class="unit">{{ detailData.unit || '-' }}</span></el-descriptions-item>
            <el-descriptions-item label="开始时间">{{ detailData.reportingTime || '-' }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <div class="detail-section">
          <h3 class="section-title">报工明细</h3>
          <el-table :data="[detailData]"
                    border
                    style="width: 100%">
            <el-table-column label="报工单号"
                             prop="productNo"
                             align="center" />
            <el-table-column label="产出数量"
                             prop="qualifiedQuantity"
                             align="center" />
            <el-table-column label="报废数量"
                             prop="unqualifiedQuantity"
                             align="center" />
            <el-table-column label="创建时间"
                             prop="reportingTime"
                             align="center" />
            <el-table-column label="操作"
                             align="center"
                             width="200">
              <template #default="{ row }">
                <el-button type="primary"
                           link
                           @click="showInput(row.id)">查看投入</el-button>
                <el-button type="primary"
                           link
                           @click="showParamDetail(row.productionOperationParamList)">参数详情</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- æŠ•å…¥æ¨¡æ€æ¡† -->
    <input-modal v-if="isShowInput"
                 v-model:visible="isShowInput"
                 :production-product-main-id="isShowingId" />
    <!-- å‚数详情弹窗 -->
    <el-dialog v-model="paramDetailVisible"
               title="参数详情"
               width="600px">
      <div v-if="currentParams && currentParams.length > 0"
           class="param-detail-list">
        <el-descriptions :column="1"
                         border>
          <el-descriptions-item v-for="param in currentParams"
                                :key="param.id"
                                :label="param.paramName">
            {{ param.inputValue }}
            <span v-if="param.unit && param.unit !== '/'"
                  class="unit-text">({{ param.unit }})</span>
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <el-empty v-else
                description="暂无参数数据" />
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paramDetailVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- è´¨æ£€ä¿¡æ¯å¼¹çª— -->
    <el-dialog v-model="qualityDialogVisible"
               title="质检详情"
               width="1000px"
               :close-on-click-modal="false"
               custom-class="custom-dialog">
      <div class="detail-container">
        <div v-for="(record, index) in qualityRecords"
             :key="record.id"
             class="quality-record-block">
          <div class="detail-section">
            <h3 class="section-title">检测记录 {{ index + 1 }} - {{ record.checkTime }}</h3>
            <el-descriptions :column="3"
                             border>
              <el-descriptions-item label="检测日期">{{ record.checkTime || '-' }}</el-descriptions-item>
              <el-descriptions-item label="生产工单号">{{ record.workOrderNo || '-' }}</el-descriptions-item>
              <el-descriptions-item label="工序">{{ record.process || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检验员">{{ record.checkName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="产品名称">{{ record.productName || '-' }}</el-descriptions-item>
              <el-descriptions-item label="规格型号">{{ record.model || '-' }}</el-descriptions-item>
              <el-descriptions-item label="数量">{{ record.quantity || 0 }} {{ record.unit || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检测单位">{{ record.checkCompany || '-' }}</el-descriptions-item>
              <el-descriptions-item label="检测结果">
                <el-tag :type="record.checkResult === '合格' ? 'success' : 'danger'">
                  {{ record.checkResult || '-' }}
                </el-tag>
              </el-descriptions-item>
            </el-descriptions>
            <h4 class="sub-section-title">检验指标列表</h4>
            <el-table :data="record.inspectItems"
                      border
                      style="width: 100%">
              <el-table-column label="序号"
                               type="index"
                               width="60"
                               align="center" />
              <el-table-column label="指标"
                               prop="itemName"
                               align="center" />
              <el-table-column label="单位"
                               prop="unit"
                               align="center" />
              <el-table-column label="标准值"
                               prop="standardValue"
                               align="center" />
              <el-table-column label="内控值"
                               prop="controlValue"
                               align="center" />
              <el-table-column label="实际值"
                               prop="actualValue"
                               align="center" />
            </el-table>
          </div>
          <!-- <div class="detail-section">

          </div> -->
          <el-divider v-if="index < qualityRecords.length - 1" />
        </div>
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="qualityDialogVisible = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
  import { ref, reactive, onMounted } from "vue";
  import { useRoute, useRouter } from "vue-router";
  import { ElMessage } from "element-plus";
  import InputModal from "@/views/productionManagement/productionReporting/Input.vue";

  const route = useRoute();
  const router = useRouter();

  // æœç´¢ç›¸å…³
  const searchForm = reactive({
    npsNo: "",
  });
  const selectedNpsNo = ref(null);
  const npsNoLoading = ref(false);
  const npsNoOptions = ref([
    {
      id: 1,
      npsNo: "PO20240301001",
      productName: "精密液压缸",
      model: "HG-100/50-500",
      materialCode: "MAT-2024-001",
      quantity: 500,
      unit: "件",
      status: 1,
      customerName: "重工机械有限公司",
      startTime: "2024-03-01",
      completionStatus: 65,
    },
    {
      id: 2,
      npsNo: "PO20240301002",
      productName: "工业伺服电机",
      model: "SV-400W-3000",
      materialCode: "MAT-2024-002",
      quantity: 200,
      unit: "台",
      status: 2,
      customerName: "自动化设备科技公司",
      startTime: "2024-03-02",
      completionStatus: 100,
    },
    {
      id: 3,
      npsNo: "PO20240301003",
      productName: "高压密封圈",
      model: "SR-80-5",
      materialCode: "MAT-2024-003",
      quantity: 5000,
      unit: "个",
      status: 0,
      customerName: "密封系统配件厂",
      startTime: "2024-03-05",
      completionStatus: 0,
    },
  ]);

  // è¯¦æƒ…数据
  const rowData = reactive({
    productionOrderDto: null,
    productionRecords: [],
  });

  // æŠ¥å·¥è¯¦æƒ…弹窗
  const detailDialogVisible = ref(false);
  const detailData = ref({});

  // æŠ•å…¥æ¨¡æ€æ¡†
  const isShowInput = ref(false);
  const isShowingId = ref(0);
  const showInput = id => {
    isShowInput.value = true;
    isShowingId.value = id;
  };

  // å‚数详情弹窗
  const paramDetailVisible = ref(false);
  const currentParams = ref([]);
  const showParamDetail = params => {
    currentParams.value = params || [];
    paramDetailVisible.value = true;
  };

  // è´¨æ£€ä¿¡æ¯å¼¹çª—
  const qualityDialogVisible = ref(false);
  const qualityRecords = ref([]);

  // çŠ¶æ€å¤„理
  const getStatusType = status => {
    const typeMap = { 0: "info", 1: "primary", 2: "success" };
    return typeMap[status] || "info";
  };
  const getStatusText = status => {
    const statusMap = { 0: "未开始", 1: "生产中", 2: "已完成" };
    return statusMap[status] || "未知";
  };
  const customColors = percentage => {
    if (percentage < 30) return "#f56c6c";
    if (percentage < 70) return "#e6a23c";
    return "#67c23a";
  };

  // æ¨¡æ‹Ÿæœç´¢æ–¹æ³•
  const handleNpsNoSearch = query => {
    if (query) {
      npsNoLoading.value = true;
      setTimeout(() => {
        npsNoLoading.value = false;
      }, 300);
    }
  };

  const handleSearch = id => {
    const selected = npsNoOptions.value.find(item => item.id === id);
    if (selected) {
      rowData.productionOrderDto = selected;
      rowData.productionRecords = [
        {
          id: 1001,
          productNo: "MO-2024-001-01",
          productName: selected.productName,
          model: selected.model,
          processName: "毛坯加工",
          requiredQuantity: selected.quantity,
          completedQuantity: Math.floor(selected.quantity * 0.4),
          qualifiedQuantity: Math.floor(selected.quantity * 0.4) - 2,
          unqualifiedQuantity: 2,
          reportingTime: "2024-03-01 10:00:00",
          schedule: "白班",
          postName: "张三",
          unit: selected.unit,
        },
        {
          id: 1002,
          productNo: "MO-2024-001-02",
          productName: selected.productName,
          model: selected.model,
          processName: "精加工",
          requiredQuantity: Math.floor(selected.quantity * 0.4),
          completedQuantity: Math.floor(selected.quantity * 0.25),
          qualifiedQuantity: Math.floor(selected.quantity * 0.25),
          unqualifiedQuantity: 0,
          reportingTime: "2024-03-01 16:00:00",
          schedule: "白班",
          postName: "李四",
          unit: selected.unit,
        },
      ];
    }
  };

  const handleBack = () => {
    router.back();
  };

  const handleClickStep = row => {
    detailData.value = {
      id: row.id || Math.floor(Math.random() * 1000),
      productNo: row.productNo,
      npsNo: rowData.productionOrderDto.npsNo,
      schedule: row.schedule,
      postName: row.postName,
      materialCode: rowData.productionOrderDto.materialCode,
      productName: row.productName,
      model: row.model,
      qualifiedQuantity: row.qualifiedQuantity,
      unqualifiedQuantity: row.unqualifiedQuantity || 0,
      quantity: row.completedQuantity,
      unit: row.unit,
      reportingTime: row.reportingTime,
      productionOperationParamList: [
        { id: 1, paramName: "主轴转速", inputValue: "2400", unit: "rpm" },
        { id: 2, paramName: "进给速度", inputValue: "120", unit: "mm/min" },
        { id: 3, paramName: "切削深度", inputValue: "0.5", unit: "mm" },
        { id: 4, paramName: "冷却液压力", inputValue: "0.6", unit: "Mpa" },
      ],
    };
    detailDialogVisible.value = true;
  };

  const handleClickQuality = row => {
    qualityRecords.value = [
      {
        id: 2001,
        checkTime: "2024-03-01 11:30:00",
        workOrderNo: row.productNo,
        process: row.processName,
        checkName: "质量部-王建国",
        productName: row.productName,
        model: row.model,
        unit: row.unit,
        quantity: row.completedQuantity,
        checkCompany: "内部实验室",
        checkResult: "合格",
        inspectItems: [
          {
            id: 1,
            itemName: "外径尺寸",
            unit: "mm",
            standardValue: "100.00±0.05",
            controlValue: "100.00±0.03",
            actualValue: "100.01",
            result: "合格",
          },
          {
            id: 2,
            itemName: "内径尺寸",
            unit: "mm",
            standardValue: "50.00+0.02/-0",
            controlValue: "50.00+0.01/-0",
            actualValue: "50.01",
            result: "合格",
          },
          {
            id: 3,
            itemName: "表面粗糙度",
            unit: "Ra",
            standardValue: "≤1.6",
            controlValue: "≤1.2",
            actualValue: "0.8",
            result: "合格",
          },
        ],
      },
      {
        id: 2001,
        checkTime: "2024-03-01 11:30:00",
        workOrderNo: row.productNo,
        process: row.processName,
        checkName: "质量部-王建国",
        productName: row.productName,
        model: row.model,
        unit: row.unit,
        quantity: row.completedQuantity,
        checkCompany: "内部实验室",
        checkResult: "合格",
        inspectItems: [
          {
            id: 1,
            itemName: "外径尺寸",
            unit: "mm",
            standardValue: "100.00±0.05",
            controlValue: "100.00±0.03",
            actualValue: "100.01",
            result: "合格",
          },
          {
            id: 2,
            itemName: "内径尺寸",
            unit: "mm",
            standardValue: "50.00+0.02/-0",
            controlValue: "50.00+0.01/-0",
            actualValue: "50.01",
            result: "合格",
          },
          {
            id: 3,
            itemName: "表面粗糙度",
            unit: "Ra",
            standardValue: "≤1.6",
            controlValue: "≤1.2",
            actualValue: "0.8",
            result: "合格",
          },
        ],
      },
    ];
    qualityDialogVisible.value = true;
  };

  onMounted(() => {
    if (route.query.npsNo) {
      const npsNo = route.query.npsNo;
      const found = npsNoOptions.value.find(item => item.npsNo === npsNo);
      if (found) {
        selectedNpsNo.value = found.id;
        handleSearch(found.id);
      } else {
        // å¦‚果没找到，创建一个临时的
        const mockItem = {
          id: Date.now(),
          npsNo: npsNo,
          productName: route.query.productName || "精密液压缸",
          model: route.query.model || "HG-100/50-500",
          materialCode: "MAT-2024-MOCK",
          quantity: 100,
          unit: "件",
          status: 1,
          customerName: "模拟客户",
          startTime: "2024-03-01",
          completionStatus: 50,
        };
        npsNoOptions.value.push(mockItem);
        selectedNpsNo.value = mockItem.id;
        handleSearch(mockItem.id);
      }
    }
  });
</script>

<style scoped>
  .app-container {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
  }

  .search-form {
    width: 100%;
  }

  .search-form .el-form-item {
    margin-right: 10px;
  }

  .detail-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
  }

  .detail-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1a1a1a;
    border-bottom: 2px solid #409eff;
    padding-bottom: 10px;
    display: flex;
    align-items: center;
  }

  .section-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
  }

  .sub-section-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #303133;
    display: flex;
    align-items: center;
  }

  .sub-section-title::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 12px;
    background-color: #67c23a;
    margin-right: 8px;
    border-radius: 2px;
  }

  .unit {
    font-size: 12px;
    color: #909399;
    margin-left: 4px;
  }

  :deep(.el-descriptions) {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-descriptions__row:nth-child(odd)) {
    background-color: #f9f9f9;
  }

  :deep(.el-descriptions__label) {
    font-weight: 500;
    color: #606266;
    background-color: #f5f7fa;
  }

  :deep(.el-descriptions__content) {
    color: #303133;
    font-weight: 500;
  }

  .progress-container {
    display: flex;
    gap: 24px;
  }

  .progress-section {
    margin-bottom: 24px;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 24px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
    flex: 1;
    transition: all 0.3s ease;
    width: 100%;
  }

  .progress-section:hover {
    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.12);
  }

  .order-item {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table) {
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  }

  :deep(.el-table th) {
    background-color: #f5f7fa !important;
    font-weight: 600;
    color: #606266;
  }

  :deep(.el-progress-bar__inner) {
    border-radius: 10px;
  }

  :deep(.el-tag) {
    border-radius: 12px;
    padding: 2px 10px;
  }

  /* å¼¹çª—样式 */
  .detail-container {
    max-height: 600px;
    overflow-y: auto;
    padding: 0 16px;
  }

  .process-item {
    margin-bottom: 24px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 8px;
    border: 1px solid #ebeef5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .process-header {
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f2f5;
  }

  .process-title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #1a1a1a;
    display: flex;
    align-items: center;
  }

  .process-title::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 16px;
    background-color: #409eff;
    margin-right: 8px;
    border-radius: 2px;
  }

  .process-info {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #606266;
  }

  .process-label {
    padding: 4px 12px;
    background-color: #ecf5ff;
    border-radius: 4px;
    color: #409eff;
    font-weight: 500;
  }

  .process-details {
    margin-bottom: 20px;
  }

  .num1 {
    color: #1107cc;
    font-weight: 600;
  }

  .num2 {
    color: #0fcf25;
    font-weight: 600;
  }

  .num3 {
    color: #d31818;
    font-weight: 600;
  }

  .dialog-footer {
    text-align: center;
    padding: 20px;
    border-top: 1px solid #ebeef5;
  }

  .dialog-footer .el-button {
    min-width: 100px;
    padding: 8px 20px;
  }

  /* è‡ªå®šä¹‰å¯¹è¯æ¡†æ ·å¼ */
  :deep(.custom-dialog) {
    border-radius: 12px;
    overflow: hidden;
  }

  :deep(.custom-dialog .el-dialog__header) {
    background-color: #f5f7fa;
    padding: 20px;
    border-bottom: 1px solid #ebeef5;
  }

  :deep(.custom-dialog .el-dialog__title) {
    font-size: 18px;
    font-weight: 600;
    color: #1a1a1a;
  }

  :deep(.custom-dialog .el-dialog__body) {
    padding: 20px;
  }

  .unit-text {
    margin-left: 5px;
    color: #909399;
    font-size: 12px;
  }

  .param-detail-list {
    padding: 10px;
  }
</style>