product-inventory-management.git

			@@ -1,1573 +1,272 @@
			<template>
			<div class="app-container">
			<div class="route-header">
			<div class="add-route-btn"
			@click="handleAddRoute">
			<el-icon>
			<Plus />
			</el-icon>
			<span>新增工艺路线</span>
			</div>
			<div class="search_form">
			<el-form :model="searchForm"
			:inline="true">
			<el-form-item label="规格名称:">
			<el-input v-model="searchForm.model"
			placeholder="请输入"
			clearable
			prefix-icon="Search"
			style="width: 200px;"
			@change="handleQuery" />
			</el-form-item>
			<el-form-item>
			<el-button type="primary"
			@click="handleQuery">搜索</el-button>
			</el-form-item>
			</el-form>
			</div>
			<div class="route-card-list">
			<div v-for="route in routeList"
			:key="route.id"
			class="route-card">
			<div class="card-header">
			<div class="route-info">
			<span class="route-name"><el-icon style="margin-right: 8px;line-height: 30px;">
			<ScaleToOriginal />
			</el-icon>{{ route.routeName }}<el-tag style="margin-left: 8px"
			:type="route.status == 1 ? 'warning' : 'success'">{{ route.status == 1 ? '草稿' : '批准' }}</el-tag></span>
			<span class="route-code">{{ route.routeCode }}</span>
			</div>
			<div class="route-actions">
			<el-button v-if="route.status === '1'"
			link
			type="success"
			@click="handleApproveRoute(route)">
			<el-icon>
			<Check />
			</el-icon>
			批准
			</el-button>
			<el-button v-if="route.status === '2'"
			link
			type="warning"
			@click="handleRevokeApproveRoute(route)">
			<el-icon>
			<Close />
			</el-icon>
			撤销批准
			</el-button>
			<el-button link
			type="primary"
			@click="handleEditRoute(route)">
			<el-icon>
			<Edit />
			</el-icon>
			编辑
			</el-button>
			<el-button link
			type="danger"
			@click="handleDeleteRoute(route)">
			<el-icon>
			<Delete />
			</el-icon>
			删除
			</el-button>
			</div>
			</div>
			<div class="card-body">
			<div class="route-meta">
			<span class="meta-item">
			<el-icon>
			<Box />
			</el-icon>
			<span class="meta-label">产品:</span>
			<span class="meta-value">{{ route.productName }} - {{ route.productModelName }}</span>
			</span>
			<span class="meta-item">
			<el-icon>
			<Document />
			</el-icon>
			<span class="meta-label">BOM:</span>
			<span class="meta-value">{{ route.bomId \|\| '-' }}</span>
			</span>
			<span class="meta-item">
			<el-icon>
			<Document />
			</el-icon>
			<span class="meta-label">路线描述:</span>
			<span class="meta-value">{{ route.routeDesc \|\| '暂无描述' }}</span>
			</span>
			</div>
			<div class="expand-btn-wrapper">
			<el-button class="expand-btn"
			:class="{ expanded: route.expanded }"
			type="primary"
			text
			@click="toggleExpand(route)">
			<span class="btn-text">{{ route.expanded ? '收起工序路线' : '展开工序路线' }}</span>
			<el-icon class="expand-icon">
			<component :is="route.expanded ? 'ArrowUp' : 'ArrowDown'" />
			</el-icon>
			</el-button>
			</div>
			</div>
			<div v-if="route.expanded"
			class="process-route">
			<div class="process-flow">
			<div v-for="(process, index) in route.processList"
			:key="process.id"
			class="process-flow-item"
			draggable="true"
			@dragstart="handleDragStart($event, index, route.id)"
			@dragover="handleDragOver($event)"
			@drop="handleDrop($event, index, route.id)"
			@dragend="handleDragEnd">
			<div class="process-node"
			:class="{ expanded: process.expanded }">
			<div class="process-node-header">
			<div class="process-number">{{ index + 1 }}</div>
			<div class="process-actions">
			<el-button link
			type="danger"
			@click="handleDeleteProcess(route.id, process)">
			<el-icon>
			<Delete />
			</el-icon>
			</el-button>
			</div>
			</div>
			<div class="process-node-body">
			<div class="process-code">{{ process.processCode }}</div>
			<div class="process-name">{{ process.processName }}</div>
			<div class="process-desc">{{ process.processDesc \|\| '暂无描述' }}</div>
			</div>
			<div class="process-node-footer">
			<!-- <el-tag size="small"
			:type="process.status === '1' ? 'success' : 'info'">
			{{ process.status === '1' ? '启用' : '停用' }}
			</el-tag> -->
			<el-button type="primary"
			link
			size="small"
			@click="toggleProcessParams(process)">
			{{ process.expanded ? '收起参数' : '展开参数' }}
			({{ process.paramList?.length \|\| 0 }})
			</el-button>
			</div>
			<div v-if="process.expanded"
			class="process-params-section">
			<div class="params-header">
			<span>参数列表</span>
			<el-button type="primary"
			link
			size="small"
			@click="handleAddParam(route.id, process)">
			<el-icon>
			<Plus />
			</el-icon>新增
			</el-button>
			</div>
			<div class="params-list">
			<div v-for="param in process.paramList"
			:key="param.id"
			class="param-item">
			<div class="param-info">
			<span class="param-code">{{ param.parameterCode }}</span>
			<span class="param-name">{{ param.parameterName }}</span>
			<!-- <el-tag size="small"
			style="margin-right: 20px;"
			:type="getParamTypeTag(param.parameterType)">
			{{ param.parameterType }}
			</el-tag> -->
			<span class="param-value">标准值：{{ param.standardValue }} {{ param.unit }}</span>
			</div>
			<div class="param-actions">
			<el-button link
			type="primary"
			size="small"
			@click="handleEditParam(route.id, process, param)">
			编辑
			</el-button>
			<el-button link
			type="danger"
			size="small"
			@click="handleDeleteParam(route.id, process, param)">
			删除
			</el-button>
			</div>
			</div>
			<el-empty v-if="!process.paramList \|\| process.paramList.length === 0"
			description="暂无参数"
			:image-size="50" />
			</div>
			</div>
			</div>
			<div v-if="index < route.processList.length - 1"
			class="flow-arrow">
			<el-icon>
			<Right />
			</el-icon>
			</div>
			</div>
			<div class="add-process-node"
			@click="handleSelectProcess(route, index)">
			<el-icon>
			<Plus />
			</el-icon>
			<span>新增工序</span>
			</div>
			</div>
			<el-empty v-if="!route.processList \|\| route.processList.length === 0"
			description="暂无工序"
			:image-size="80" />
			</div>
			<div class="table_list">
			<div style="text-align: right"
			class="mb10">
			<el-button type="primary"
			@click="showNewModal">新增工艺路线</el-button>
			<el-button type="danger"
			@click="handleDelete"
			:disabled="selectedRows.length === 0"
			plain>删除工艺路线</el-button>
			</div>
			<PIMTable rowKey="id"
			:column="tableColumn"
			:tableData="tableData"
			:page="page"
			:isSelection="true"
			@selection-change="handleSelectionChange"
			:tableLoading="tableLoading"
			@pagination="pagination"
			:total="page.total" />
			</div>
			<!-- 工艺路线新增/编辑对话框 -->
			<el-dialog v-model="routeDialogVisible"
			:title="isRouteEdit ? '编辑工艺路线' : '新增工艺路线'"
			width="500px">
			<el-form :model="routeForm"
			:rules="routeRules"
			ref="routeFormRef"
			label-width="120px">
			<el-form-item label="产品名称"
			prop="productModelId">
			<el-button type="primary"
			@click="showProductSelectDialog = true">
			{{ routeForm.productName && routeForm.productModelName
			? `${routeForm.productName} - ${routeForm.productModelName}`
			: '选择产品' }}
			</el-button>
			</el-form-item>
			<el-form-item label="BOM"
			prop="bomId">
			<el-select v-model="routeForm.bomId"
			placeholder="请选择BOM"
			clearable
			:disabled="!routeForm.productModelId \|\| bomOptions.length === 0"
			style="width: 100%">
			<el-option v-for="item in bomOptions"
			:key="item.id"
			:label="item.bomNo \|\| `BOM-${item.id}`"
			:value="item.id" />
			</el-select>
			</el-form-item>
			<el-form-item label="路线编码"
			prop="routeCode">
			<el-input v-model="routeForm.routeCode"
			placeholder="请输入路线编码" />
			</el-form-item>
			<el-form-item label="路线名称"
			prop="routeName">
			<el-input v-model="routeForm.routeName"
			placeholder="请输入路线名称" />
			</el-form-item>
			<el-form-item label="路线描述"
			prop="routeDesc">
			<el-input v-model="routeForm.routeDesc"
			type="textarea"
			:rows="3"
			placeholder="请输入路线描述" />
			</el-form-item>
			<!-- <el-form-item label="状态"
			prop="status">
			<el-radio-group v-model="routeForm.status">
			<el-radio label="1">启用</el-radio>
			<el-radio label="0">停用</el-radio>
			</el-radio-group>
			</el-form-item> -->
			</el-form>
			<template #footer>
			<span class="dialog-footer">
			<el-button @click="routeDialogVisible = false">取消</el-button>
			<el-button type="primary"
			@click="handleRouteSubmit">确定</el-button>
			</span>
			</template>
			</el-dialog>
			<!-- 产品选择弹窗 -->
			<ProductSelectDialog v-model="showProductSelectDialog"
			@confirm="handleProductSelect"
			single />
			<!-- 工序新增/编辑对话框 -->
			<el-dialog v-model="processDialogVisible"
			:title="isProcessEdit ? '编辑工序' : '新增工序'"
			width="500px">
			<el-form :model="processForm"
			:rules="processRules"
			ref="processFormRef"
			label-width="120px">
			<el-form-item label="工序编码"
			prop="processCode">
			<el-input v-model="processForm.processCode"
			placeholder="请输入工序编码" />
			</el-form-item>
			<el-form-item label="工序名称"
			prop="processName">
			<el-input v-model="processForm.processName"
			placeholder="请输入工序名称" />
			</el-form-item>
			<el-form-item label="工序描述"
			prop="processDesc">
			<el-input v-model="processForm.processDesc"
			type="textarea"
			:rows="3"
			placeholder="请输入工序描述" />
			</el-form-item>
			<el-form-item label="状态"
			prop="status">
			<el-radio-group v-model="processForm.status">
			<el-radio label="1">启用</el-radio>
			<el-radio label="0">停用</el-radio>
			</el-radio-group>
			</el-form-item>
			</el-form>
			<template #footer>
			<span class="dialog-footer">
			<el-button @click="processDialogVisible = false">取消</el-button>
			<el-button type="primary"
			@click="handleProcessSubmit">确定</el-button>
			</span>
			</template>
			</el-dialog>
			<!-- 选择工序对话框 -->
			<el-dialog v-model="selectProcessDialogVisible"
			title="选择工序"
			width="1000px">
			<div class="process-select-container">
			<!-- 左侧工序列表 -->
			<div class="process-list-area">
			<div class="area-title">可选工序</div>
			<div class="search-box">
			<el-input v-model="processSearchKeyword"
			placeholder="请输入工序名称搜索"
			clearable
			size="small"
			@input="handleProcessSearch">
			<template #prefix>
			<el-icon>
			<Search />
			</el-icon>
			</template>
			</el-input>
			</div>
			<el-table :data="filteredProcessList"
			height="360"
			border
			highlight-current-row
			@current-change="handleProcessSelect">
			<el-table-column prop="processCode"
			label="工序编号"
			width="100" />
			<el-table-column prop="processName"
			label="工序名称" />
			<el-table-column prop="processDesc"
			label="工序描述" />
			<el-table-column prop="status"
			label="状态"
			width="80">
			<template #default="scope">
			<el-tag size="small"
			:type="scope.row.status === '1' ? 'success' : 'info'">
			{{ scope.row.status === '1' ? '启用' : '停用' }}
			</el-tag>
			</template>
			</el-table-column>
			</el-table>
			</div>
			<!-- 右侧工序详情 -->
			<div class="process-detail-area">
			<div class="area-title">工序详情</div>
			<el-form v-if="selectedProcessItem"
			:model="selectedProcessItem"
			label-width="100px"
			class="process-detail-form">
			<el-form-item label="工序编号">
			<span class="detail-text">{{ selectedProcessItem.processCode }}</span>
			</el-form-item>
			<el-form-item label="工序名称">
			<span class="detail-text">{{ selectedProcessItem.processName }}</span>
			</el-form-item>
			<el-form-item label="工序描述">
			<span class="detail-text">{{ selectedProcessItem.processDesc \|\| '-' }}</span>
			</el-form-item>
			<el-form-item label="状态">
			<el-tag size="small"
			:type="selectedProcessItem.status === '1' ? 'success' : 'info'">
			{{ selectedProcessItem.status === '1' ? '启用' : '停用' }}
			</el-tag>
			</el-form-item>
			<el-form-item label="参数数量">
			<span class="detail-text">{{ selectedProcessItem.paramCount \|\| 0 }}个</span>
			</el-form-item>
			</el-form>
			<el-empty v-else
			description="请从左侧选择工序" />
			</div>
			</div>
			<template #footer>
			<span class="dialog-footer">
			<el-button @click="selectProcessDialogVisible = false">取消</el-button>
			<el-button type="primary"
			:disabled="!selectedProcessItem"
			@click="handleProcessSelectSubmit">确定</el-button>
			</span>
			</template>
			</el-dialog>
			<!-- 参数新增/编辑对话框 -->
			<el-dialog v-model="paramDialogVisible"
			:title="isParamEdit ? '编辑参数' : '新增参数'"
			width="500px">
			<el-form :model="paramForm"
			:rules="paramRules"
			ref="paramFormRef"
			label-width="120px">
			<el-form-item label="参数编号"
			prop="parameterCode">
			<el-input v-model="paramForm.parameterCode"
			placeholder="请输入参数编号" />
			</el-form-item>
			<el-form-item label="参数名称"
			prop="parameterName">
			<el-input v-model="paramForm.parameterName"
			placeholder="请输入参数名称" />
			</el-form-item>
			<el-form-item label="参数模式"
			prop="parameterType2">
			<el-select v-model="paramForm.parameterType2"
			placeholder="请选择参数模式">
			<el-option label="单值"
			value="1" />
			<el-option label="区间"
			value="2" />
			</el-select>
			</el-form-item>
			<el-form-item label="参数类型"
			prop="parameterType">
			<el-select v-model="paramForm.parameterType"
			@change="handleParamTypeChange"
			placeholder="请选择参数类型">
			<el-option label="数值格式"
			value="数值格式" />
			<el-option label="文本格式"
			value="文本格式" />
			<el-option label="下拉选项"
			value="下拉选项" />
			<el-option label="时间格式"
			value="时间格式" />
			</el-select>
			</el-form-item>
			<el-form-item v-if="paramForm.parameterType === '下拉选项'"
			label="数据字典"
			prop="parameterFormat">
			<el-select v-model="paramForm.parameterFormat"
			placeholder="请选择数据字典">
			<el-option v-for="item in dictTypes"
			:key="item.dictType"
			:label="item.dictName"
			:value="item.dictType" />
			</el-select>
			</el-form-item>
			<el-form-item v-else-if="paramForm.parameterType === '时间格式'"
			label="时间格式"
			prop="parameterFormat">
			<el-select v-model="paramForm.parameterFormat"
			placeholder="请选择时间格式">
			<el-option label="YYYY-MM-DD HH:mm:ss"
			value="YYYY-MM-DD HH:mm:ss" />
			<el-option label="YYYY-MM-DD"
			value="YYYY-MM-DD" />
			</el-select>
			</el-form-item>
			<el-form-item v-else
			label="参数格式"
			prop="parameterFormat">
			<el-input v-model="paramForm.parameterFormat"
			placeholder="请输入参数格式" />
			</el-form-item>
			<el-form-item label="标准值"
			prop="standardValue">
			<el-input v-model="paramForm.standardValue"
			placeholder="请输入标准值" />
			</el-form-item>
			<el-form-item label="单位"
			prop="unit">
			<el-input v-model="paramForm.unit"
			placeholder="请输入单位" />
			</el-form-item>
			</el-form>
			<template #footer>
			<span class="dialog-footer">
			<el-button @click="paramDialogVisible = false">取消</el-button>
			<el-button type="primary"
			@click="handleParamSubmit">确定</el-button>
			</span>
			</template>
			</el-dialog>
			<new-process v-if="isShowNewModal"
			v-model:visible="isShowNewModal"
			@completed="getList" />
			<edit-process v-if="isShowEditModal"
			v-model:visible="isShowEditModal"
			:record="record"
			@completed="getList" />
			<route-item-form v-if="isShowItemModal"
			v-model:visible="isShowItemModal"
			:record="record"
			@completed="getList" />
			</div>
			</template>

			<script setup>
			import { ref, reactive, getCurrentInstance } from "vue";
			import { ElMessage, ElMessageBox } from "element-plus";
			import { onMounted, ref, reactive, toRefs, getCurrentInstance } from "vue";
			import NewProcess from "@/views/productionManagement/processRoute/New.vue";
			import EditProcess from "@/views/productionManagement/processRoute/Edit.vue";
			import RouteItemForm from "@/views/productionManagement/processRoute/ItemsForm.vue";
			import {
			Plus,
			Edit,
			Delete,
			ArrowUp,
			ArrowDown,
			Right,
			Search,
			Check,
			Close,
			Box,
			Document,
			} from "@element-plus/icons-vue";
			import { listType } from "@/api/system/dict/type";
			import { getByModel } from "@/api/productionManagement/productBom.js";
			import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
			listPage,
			del,
			update,
			} from "@/api/productionManagement/processRoute.js";
			import { useRouter } from "vue-router";
			import { ElMessageBox, ElMessage } from "element-plus";

			// 工艺路线列表
			const routeList = ref([]);
			const dictTypes = ref([]);

			// 获取全局实例
			const router = useRouter();
			const data = reactive({
			searchForm: {
			model: "",
			},
			});
			const { searchForm } = toRefs(data);
			const tableColumn = ref([
			{
			label: "工艺路线编号",
			prop: "processRouteCode",
			},
			{
			label: "产品名称",
			prop: "productName",
			},
			{
			label: "规格名称",
			prop: "model",
			},
			{
			label: "BOM编号",
			prop: "bomNo",
			},
			{
			label: "描述",
			prop: "description",
			},
			{
			dataType: "action",
			label: "操作",
			align: "center",
			fixed: "right",
			width: 280,
			operation: [
			{
			name: "编辑",
			type: "text",
			clickFun: row => {
			showEditModal(row);
			},
			},
			{
			name: "路线项目",
			type: "text",
			clickFun: row => {
			showItemModal(row);
			},
			},
			{
			name: "批准",
			type: "primary",
			text: true,
			showHide: row => {
			return !row.status;
			},
			clickFun: row => {
			handleApproveRoute(row);
			},
			},
			{
			name: "取消批准",
			type: "warning",
			text: true,
			showHide: row => {
			return row.status;
			},
			clickFun: row => {
			handleRevokeApproveRoute(row);
			},
			},
			],
			},
			]);
			const tableData = ref([]);
			const selectedRows = ref([]);
			const tableLoading = ref(false);
			const isShowNewModal = ref(false);
			const isShowEditModal = ref(false);
			const isShowItemModal = ref(false);
			const record = ref({});
			const page = reactive({
			current: 1,
			size: 100,
			total: 0,
			});
			const { proxy } = getCurrentInstance();

			// 产品选择和BOM相关
			const showProductSelectDialog = ref(false);
			const bomOptions = ref([]);

			// 工艺路线对话框
			const routeDialogVisible = ref(false);
			const isRouteEdit = ref(false);
			const routeFormRef = ref(null);
			const routeForm = reactive({
			id: null,
			productModelId: null,
			productName: "",
			productModelName: "",
			bomId: null,
			routeCode: "",
			routeName: "",
			routeDesc: "",
			status: "1",
			});
			const routeRules = {
			productModelId: [
			{ required: true, message: "请选择产品", trigger: "change" },
			],
			bomId: [{ required: true, message: "请选择BOM", trigger: "change" }],
			routeCode: [{ required: true, message: "请输入路线编码", trigger: "blur" }],
			routeName: [{ required: true, message: "请输入路线名称", trigger: "blur" }],
			// 查询列表
			/** 搜索按钮操作 */
			const handleQuery = () => {
			page.current = 1;
			getList();
			};

			// 工序对话框
			const processDialogVisible = ref(false);
			const isProcessEdit = ref(false);
			const processFormRef = ref(null);
			const currentRouteId = ref(null);
			const processForm = reactive({
			id: null,
			processCode: "",
			processName: "",
			processDesc: "",
			status: "1",
			});
			const processRules = {
			processCode: [{ required: true, message: "请输入工序编码", trigger: "blur" }],
			processName: [{ required: true, message: "请输入工序名称", trigger: "blur" }],
			const pagination = obj => {
			page.current = obj.page;
			page.size = obj.limit;
			getList();
			};
			const getList = () => {
			tableLoading.value = true;
			const params = { ...searchForm.value, ...page };
			params.entryDate = undefined;
			listPage(params)
			.then(res => {
			tableLoading.value = false;
			tableData.value = res.data.records.map(item => ({
			...item,
			}));
			page.total = res.data.total;
			})
			.catch(err => {
			tableLoading.value = false;
			});
			};
			// 表格选择数据
			const handleSelectionChange = selection => {
			selectedRows.value = selection;
			};

			// 选择工序对话框
			const selectProcessDialogVisible = ref(false);
			const availableProcessList = ref([]);
			const filteredProcessList = ref([]);
			const selectedProcessItem = ref(null);
			const processSearchKeyword = ref("");
			const currentRouteIndex = ref(null);

			// 参数对话框
			const paramDialogVisible = ref(false);
			const isParamEdit = ref(false);
			const paramFormRef = ref(null);
			const currentProcessId = ref(null);
			const paramForm = reactive({
			id: null,
			parameterCode: "",
			parameterName: "",
			parameterType2: "1",
			parameterType: "",
			parameterFormat: "",
			standardValue: "",
			unit: "",
			});
			const paramRules = {
			parameterCode: [
			{ required: true, message: "请输入参数编号", trigger: "blur" },
			],
			parameterName: [
			{ required: true, message: "请输入参数名称", trigger: "blur" },
			],
			parameterType: [
			{ required: true, message: "请选择参数类型", trigger: "change" },
			],
			// 打开新增弹框
			const showNewModal = () => {
			isShowNewModal.value = true;
			};

			// 拖拽相关
			const draggedItem = ref(null);
			const draggedRouteId = ref(null);
			const showEditModal = row => {
			isShowEditModal.value = true;
			record.value = row;
			};

			// 获取工艺路线列表
			const getRouteList = () => {
			routeList.value = [
			{
			id: 1,
			productModelId: 1,
			productName: "标准砌块",
			productModelName: "3.5型",
			bomId: 1,
			routeCode: "ROUTE001",
			routeName: "标准砌块生产线",
			routeDesc: "标准砌块生产流程",
			status: "1",
			expanded: false,
			processList: [
			{
			id: 1,
			processCode: "PROC001",
			processName: "原料配比",
			processDesc: "原材料配比工序",
			status: "1",
			expanded: false,
			paramList: [
			{
			id: 1,
			parameterCode: "P001",
			parameterName: "水泥比例",
			parameterType2: "1",
			parameterType: "数值格式",
			parameterFormat: "",
			standardValue: "30",
			unit: "%",
			},
			{
			id: 2,
			parameterCode: "P002",
			parameterName: "砂比例",
			parameterType2: "1",
			parameterType: "数值格式",
			parameterFormat: "",
			standardValue: "60",
			unit: "%",
			},
			],
			},
			{
			id: 2,
			processCode: "PROC002",
			processName: "搅拌混合",
			processDesc: "搅拌混合工序",
			status: "1",
			expanded: false,
			paramList: [
			{
			id: 3,
			parameterCode: "P003",
			parameterName: "搅拌时间",
			parameterType2: "1",
			parameterType: "数值格式",
			parameterFormat: "",
			standardValue: "5",
			unit: "分钟",
			},
			],
			},
			{
			id: 3,
			processCode: "PROC003",
			processName: "浇筑成型",
			processDesc: "浇筑成型工序",
			status: "1",
			expanded: false,
			paramList: [],
			},
			],
			const showItemModal = row => {
			router.push({
			path: "/productionManagement/processRouteItem",
			query: {
			id: row.id,
			processRouteCode: row.processRouteCode \|\| "",
			productName: row.productName \|\| "",
			model: row.model \|\| "",
			bomNo: row.bomNo \|\| "",
			bomId: row.bomId \|\| null,
			description: row.description \|\| "",
			type: "route",
			},
			{
			id: 2,
			productModelId: 2,
			productName: "板材",
			productModelName: "5.0型",
			bomId: 2,
			routeCode: "ROUTE002",
			routeName: "板材生产线",
			routeDesc: "板材生产流程",
			status: "1",
			expanded: false,
			processList: [
			{
			id: 4,
			processCode: "PROC004",
			processName: "切割加工",
			processDesc: "切割加工工序",
			status: "1",
			expanded: false,
			paramList: [
			{
			id: 4,
			parameterCode: "P004",
			parameterName: "切割尺寸",
			parameterType2: "1",
			parameterType: "文本格式",
			parameterFormat: "",
			standardValue: "600x200x100",
			unit: "mm",
			},
			],
			},
			],
			},
			];
			};

			// 展开/收起工艺路线
			const toggleExpand = route => {
			route.expanded = !route.expanded;
			};

			// 展开/收起工序参数
			const toggleProcessParams = process => {
			process.expanded = !process.expanded;
			};

			// 工艺路线操作
			const handleAddRoute = () => {
			isRouteEdit.value = false;
			routeForm.id = null;
			routeForm.productModelId = null;
			routeForm.productName = "";
			routeForm.productModelName = "";
			routeForm.bomId = null;
			routeForm.routeCode = "";
			routeForm.routeName = "";
			routeForm.routeDesc = "";
			routeForm.status = "1";
			bomOptions.value = [];
			routeDialogVisible.value = true;
			};

			const handleEditRoute = route => {
			isRouteEdit.value = true;
			routeForm.id = route.id;
			routeForm.productModelId = route.productModelId;
			routeForm.productName = route.productName;
			routeForm.productModelName = route.productModelName;
			routeForm.bomId = route.bomId;
			routeForm.routeCode = route.routeCode;
			routeForm.routeName = route.routeName;
			routeForm.routeDesc = route.routeDesc;
			routeForm.status = route.status;
			routeDialogVisible.value = true;
			};

			const handleDeleteRoute = route => {
			ElMessageBox.confirm("确定要删除该工艺路线吗？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			}).then(() => {
			ElMessage.success("删除成功");
			getRouteList();
			});
			};

			const handleRouteSubmit = () => {
			routeFormRef.value.validate(valid => {
			if (valid) {
			ElMessage.success(isRouteEdit.value ? "编辑成功" : "新增成功");
			routeDialogVisible.value = false;
			getRouteList();
			}
			});
			};
			// 删除
			function handleDelete() {
			const ids = selectedRows.value.map(item => item.id);
			proxy.$modal
			.confirm("是否确认删除已勾选的数据项？")
			.then(function () {
			return del(ids);
			})
			.then(() => {
			getList();
			proxy.$modal.msgSuccess("删除成功");
			})
			.catch(() => {});
			}

			// 产品选择处理
			const handleProductSelect = async products => {
			if (products && products.length > 0) {
			const product = products[0];
			// 先查询BOM列表（必选）
			try {
			const res = await getByModel(product.id);
			// 处理返回的BOM数据：可能是数组、对象或包含data字段
			let bomList = [];
			if (Array.isArray(res)) {
			bomList = res;
			} else if (res && res.data) {
			bomList = Array.isArray(res.data) ? res.data : [res.data];
			} else if (res && typeof res === "object") {
			bomList = [res];
			}

			if (bomList.length > 0) {
			routeForm.productModelId = product.id;
			routeForm.productName = product.productName;
			routeForm.productModelName = product.model;
			routeForm.bomId = undefined; // 重置BOM选择
			bomOptions.value = bomList;
			showProductSelectDialog.value = false;
			// 触发表单验证更新
			proxy.$refs["routeFormRef"]?.validateField("productModelId");
			} else {
			proxy.$modal.msgError("该产品没有BOM，请先创建BOM");
			}
			} catch (error) {
			// 如果接口返回404或其他错误，说明没有BOM
			proxy.$modal.msgError("该产品没有BOM，请先创建BOM");
			}
			}
			};

			// 批准工艺路线
			const handleApproveRoute = route => {
			ElMessageBox.confirm("确定要批准该工艺路线吗？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "info",
			}).then(() => {
			route.status = "2";
			ElMessage.success("批准成功");
			// 调用修改接口，只修改status字段为批准状态
			update({ id: route.id, status: true })
			.then(res => {
			ElMessage.success("批准成功");
			getList();
			})
			.catch(err => {
			ElMessage.error("批准失败");
			});
			});
			};

			// 取消批准工艺路线
			const handleRevokeApproveRoute = route => {
			ElMessageBox.confirm("确定要撤销批准该工艺路线吗？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			}).then(() => {
			route.status = "1";
			ElMessage.success("撤销批准成功");
			// 调用修改接口，只修改status字段为草稿状态
			update({ id: route.id, status: false })
			.then(res => {
			ElMessage.success("撤销批准成功");
			getList();
			})
			.catch(err => {
			ElMessage.error("撤销批准失败");
			});
			});
			};

			// 工序操作
			const handleSelectProcess = (route, index) => {
			currentRouteId.value = route.id;
			currentRouteIndex.value = index;
			// 获取可选工序列表（假数据）
			availableProcessList.value = [
			{
			id: 1,
			processCode: "PROC001",
			processName: "原料配比",
			processDesc: "原材料配比工序",
			status: "1",
			paramCount: 3,
			},
			{
			id: 2,
			processCode: "PROC002",
			processName: "搅拌混合",
			processDesc: "搅拌混合工序",
			status: "1",
			paramCount: 2,
			},
			{
			id: 3,
			processCode: "PROC003",
			processName: "浇筑成型",
			processDesc: "浇筑成型工序",
			status: "1",
			paramCount: 4,
			},
			{
			id: 4,
			processCode: "PROC004",
			processName: "蒸压养护",
			processDesc: "蒸压养护工序",
			status: "0",
			paramCount: 2,
			},
			{
			id: 5,
			processCode: "PROC005",
			processName: "切割加工",
			processDesc: "切割加工工序",
			status: "1",
			paramCount: 3,
			},
			];
			filteredProcessList.value = availableProcessList.value;
			processSearchKeyword.value = "";
			selectedProcessItem.value = null;
			selectProcessDialogVisible.value = true;
			};

			const handleEditProcess = (routeId, process) => {
			currentRouteId.value = routeId;
			isProcessEdit.value = true;
			processForm.id = process.id;
			processForm.processCode = process.processCode;
			processForm.processName = process.processName;
			processForm.processDesc = process.processDesc;
			processForm.status = process.status;
			processDialogVisible.value = true;
			};

			const handleDeleteProcess = (routeId, process) => {
			ElMessageBox.confirm("确定要删除该工序吗？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			}).then(() => {
			ElMessage.success("删除成功");
			getRouteList();
			});
			};

			const handleProcessSubmit = () => {
			processFormRef.value.validate(valid => {
			if (valid) {
			ElMessage.success(isProcessEdit.value ? "编辑成功" : "新增成功");
			processDialogVisible.value = false;
			getRouteList();
			}
			});
			};

			// 选择工序相关方法
			const handleProcessSearch = () => {
			const keyword = processSearchKeyword.value.trim().toLowerCase();
			if (!keyword) {
			filteredProcessList.value = availableProcessList.value;
			} else {
			filteredProcessList.value = availableProcessList.value.filter(item =>
			item.processName.toLowerCase().includes(keyword)
			);
			}
			};

			const handleProcessSelect = row => {
			selectedProcessItem.value = row;
			};

			const handleProcessSelectSubmit = () => {
			if (!selectedProcessItem.value) {
			ElMessage.warning("请先选择一个工序");
			return;
			}

			// 检查工序是否已存在
			const route = routeList.value[currentRouteIndex.value];
			const exists = route.processList.some(
			p => p.id === selectedProcessItem.value.id
			);
			if (exists) {
			ElMessage.warning("该工序已存在于工艺路线中");
			return;
			}

			// 添加工序到工艺路线
			const newProcess = {
			id: Date.now(),
			processCode: selectedProcessItem.value.processCode,
			processName: selectedProcessItem.value.processName,
			processDesc: selectedProcessItem.value.processDesc,
			status: selectedProcessItem.value.status,
			paramList: [],
			expanded: false,
			};

			route.processList.push(newProcess);
			ElMessage.success("添加工序成功");
			selectProcessDialogVisible.value = false;
			};

			// 参数操作
			const handleAddParam = (routeId, process) => {
			currentRouteId.value = routeId;
			currentProcessId.value = process.id;
			isParamEdit.value = false;
			paramForm.id = null;
			paramForm.parameterCode = "";
			paramForm.parameterName = "";
			paramForm.parameterType2 = "1";
			paramForm.parameterType = "";
			paramForm.parameterFormat = "";
			paramForm.standardValue = "";
			paramForm.unit = "";
			paramDialogVisible.value = true;
			};

			const handleEditParam = (routeId, process, param) => {
			currentRouteId.value = routeId;
			currentProcessId.value = process.id;
			isParamEdit.value = true;
			paramForm.id = param.id;
			paramForm.parameterCode = param.parameterCode;
			paramForm.parameterName = param.parameterName;
			paramForm.parameterType2 = param.parameterType2 \|\| "1";
			paramForm.parameterType = param.parameterType;
			paramForm.parameterFormat = param.parameterFormat;
			paramForm.standardValue = param.standardValue;
			paramForm.unit = param.unit;
			paramDialogVisible.value = true;
			};

			const handleDeleteParam = (routeId, process, param) => {
			ElMessageBox.confirm("确定要删除该参数吗？", "提示", {
			confirmButtonText: "确定",
			cancelButtonText: "取消",
			type: "warning",
			}).then(() => {
			ElMessage.success("删除成功");
			getRouteList();
			});
			};

			const handleParamSubmit = () => {
			paramFormRef.value.validate(valid => {
			if (valid) {
			ElMessage.success(isParamEdit.value ? "编辑成功" : "新增成功");
			paramDialogVisible.value = false;
			getRouteList();
			}
			});
			};

			const handleParamTypeChange = () => {
			if (paramForm.parameterType === "数值格式") {
			paramForm.parameterFormat = "#.0000";
			} else if (paramForm.parameterType === "时间格式") {
			paramForm.parameterFormat = "YYYY-MM-DD HH:mm:ss";
			} else {
			paramForm.parameterFormat = "";
			}
			};

			const getParamTypeTag = type => {
			const typeMap = {
			数值格式: "primary",
			文本格式: "info",
			下拉选项: "warning",
			时间格式: "success",
			};
			return typeMap[type] \|\| "default";
			};

			// 拖拽排序
			const handleDragStart = (event, index, routeId) => {
			draggedItem.value = index;
			draggedRouteId.value = routeId;
			event.dataTransfer.effectAllowed = "move";
			};

			const handleDragOver = event => {
			event.preventDefault();
			event.dataTransfer.dropEffect = "move";
			};

			const handleDrop = (event, dropIndex, routeId) => {
			event.preventDefault();
			if (draggedItem.value === null \|\| draggedItem.value === dropIndex) return;

			const route = routeList.value.find(r => r.id === routeId);
			if (route && route.processList) {
			const draggedProcess = route.processList[draggedItem.value];
			route.processList.splice(draggedItem.value, 1);
			route.processList.splice(dropIndex, 0, draggedProcess);
			ElMessage.success("排序成功");
			}
			};

			const handleDragEnd = () => {
			draggedItem.value = null;
			draggedRouteId.value = null;
			};

			// 获取数据字典
			const getDictTypes = () => {
			listType({ pageNum: 1, pageSize: 1000 }).then(res => {
			dictTypes.value = res.rows \|\| [];
			});
			};

			getRouteList();
			getDictTypes();
			onMounted(() => {
			getList();
			});
			</script>

			<style scoped lang="scss">
			.app-container {
			padding: 20px;
			background-color: #f0f2f5;
			min-height: calc(100vh - 84px);
			}

			.route-header {
			margin-bottom: 20px;

			.add-route-btn {
			width: 100%;
			display: inline-flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-width: 120px;
			height: 100px;
			border: 2px dashed #dcdfe6;
			border-radius: 12px;
			background: #fafafa;
			cursor: pointer;
			transition: all 0.3s ease;
			color: #909399;
			padding: 0 20px;

			.el-icon {
			font-size: 24px;
			margin-bottom: 8px;
			}

			span {
			font-size: 13px;
			}

			&:hover {
			border-color: #409eff;
			background: #ecf5ff;
			color: #409eff;
			}
			}
			}

			.route-card-list {
			display: flex;
			flex-direction: column;
			gap: 20px;
			}

			.route-card {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			overflow: hidden;

			.card-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px 40px;
			border-bottom: 1px solid #ebeef5;
			background: #f8f9fa;

			.route-info {
			display: flex;
			// flex-direction: column;
			// justify-content: center;
			// items-align: center;
			gap: 4px;

			.route-code {
			font-size: 12px;
			color: #909399;
			font-family: "Courier New", monospace;
			line-height: 30px;
			}

			.route-name {
			font-size: 18px;
			font-weight: 600;
			color: #303133;
			display: flex;
			align-items: center;
			}
			}

			.route-actions {
			display: flex;
			gap: 8px;

			// .el-button {
			// color: #409eff;
			// }
			}
			}

			.card-body {
			padding: 16px 40px;

			.route-desc {
			font-size: 14px;
			color: #606266;
			margin-bottom: 12px;
			}

			.route-meta {
			display: flex;
			gap: 24px;
			margin-bottom: 12px;
			padding: 10px 14px;
			background: linear-gradient(135deg, #f5f7fa 0%, #e8ecf1 100%);
			border-radius: 8px;
			border-left: 3px solid #409eff;

			.meta-item {
			display: flex;
			align-items: center;
			gap: 6px;
			font-size: 13px;
			margin-right: 40px;

			.el-icon {
			font-size: 14px;
			color: #409eff;
			}

			.meta-label {
			color: #909399;
			font-weight: 500;
			}

			.meta-value {
			color: #303133;
			font-weight: 600;
			}
			}
			}

			.expand-btn-wrapper {
			display: flex;
			justify-content: center;
			margin-top: 8px;

			.expand-btn {
			padding: 8px 20px;
			border-radius: 20px;
			background: linear-gradient(135deg, #ecf5ff 0%, #d9ecff 100%);
			border: 1px solid #b3d8ff;
			transition: all 0.3s ease;

			.btn-text {
			font-size: 13px;
			font-weight: 500;
			color: #409eff;
			margin-right: 6px;
			}

			.expand-icon {
			font-size: 14px;
			color: #409eff;
			transition: transform 0.3s ease;
			}

			&:hover {
			background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
			border-color: #409eff;
			box-shadow: 0 4px 12px rgba(64, 158, 255, 0.3);

			.btn-text,
			.expand-icon {
			color: #fff;
			}
			}

			&.expanded {
			background: linear-gradient(135deg, #f0f9eb 0%, #e1f3d8 100%);
			border-color: #a5d69a;

			.btn-text,
			.expand-icon {
			color: #67c23a;
			}

			&:hover {
			background: linear-gradient(135deg, #67c23a 0%, #85ce61 100%);
			border-color: #67c23a;
			box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3);

			.btn-text,
			.expand-icon {
			color: #fff;
			}
			}
			}
			}
			}
			}

			.process-route {
			padding: 0 20px 20px;
			background: #f5f7fa;
			border-top: 1px solid #ebeef5;

			.process-flow {
			display: flex;
			align-items: flex-start;
			gap: 8px;
			padding: 20px 0;
			overflow-x: auto;
			overflow-y: hidden;

			.process-flow-item {
			display: flex;
			align-items: center;
			gap: 8px;

			.process-node {
			background: #fff;
			border-radius: 12px;
			padding: 16px;
			border: 2px solid #ebeef5;
			cursor: move;
			transition: all 0.3s ease;
			// min-width: 180px;
			// max-width: 220px;
			width: 300px;

			&.expanded {
			width: 400px;
			}

			&:hover {
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
			transform: translateY(-2px);
			border-color: #409eff;
			}

			&:active {
			cursor: grabbing;
			}

			.process-node-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 12px;

			.process-number {
			width: 28px;
			height: 28px;
			border-radius: 50%;
			background: #409eff;
			color: #ffffff;
			font-size: 12px;
			font-weight: 600;
			display: flex;
			align-items: center;
			justify-content: center;
			}

			.process-actions {
			display: flex;
			gap: 4px;
			}
			}

			.process-node-body {
			text-align: center;
			margin-bottom: 12px;

			.process-code {
			font-size: 11px;
			color: #909399;
			font-family: "Courier New", monospace;
			margin-bottom: 4px;
			}

			.process-name {
			font-size: 15px;
			font-weight: 600;
			color: #303133;
			margin-bottom: 6px;
			}

			.process-desc {
			font-size: 12px;
			color: #606266;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			}
			}

			.process-node-footer {
			display: flex;
			justify-content: flex-end;
			align-items: center;
			padding-top: 10px;
			border-top: 1px solid #ebeef5;
			}

			.process-params-section {
			margin-top: 12px;
			padding-top: 12px;
			border-top: 1px solid #ebeef5;

			.params-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 8px;
			font-size: 13px;
			font-weight: 600;
			color: #303133;
			}

			.params-list {
			display: flex;
			flex-direction: column;
			gap: 6px;
			max-height: 200px;
			overflow-y: auto;

			.param-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 6px 8px;
			background: #fafafa;
			border-radius: 4px;
			border-left: 2px solid #409eff;
			font-size: 12px;

			.param-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 6px;
			flex: 1;
			min-width: 0;

			.param-code {
			font-size: 11px;
			color: #e6a23c;
			font-family: "Courier New", monospace;
			margin-right: 20px;
			}

			.param-name {
			font-size: 12px;
			color: #303133;
			font-weight: 500;
			margin-right: 20px;
			}

			.param-value {
			font-size: 11px;
			color: #606266;
			}
			}

			.param-actions {
			display: flex;
			gap: 4px;
			flex-shrink: 0;
			}
			}
			}
			}
			}

			.flow-arrow {
			display: flex;
			align-items: center;
			color: #c0c4cc;
			font-size: 24px;
			padding: 0 4px;

			.el-icon {
			font-size: 20px;
			}
			}
			}

			.add-process-node {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			min-width: 100px;
			height: 175px;
			border: 2px dashed #dcdfe6;
			border-radius: 12px;
			background: #fafafa;
			cursor: pointer;
			transition: all 0.3s ease;
			color: #909399;
			// margin-left: 10px;

			.el-icon {
			font-size: 24px;
			margin-bottom: 8px;
			}

			span {
			font-size: 13px;
			}

			&:hover {
			border-color: #409eff;
			background: #ecf5ff;
			color: #409eff;
			}
			}
			}
			}
			}

			// 拖拽时的样式
			.process-flow-item.dragging {
			opacity: 0.5;
			transform: scale(0.98);
			}

			// 选择工序对话框样式
			.process-select-container {
			display: flex;
			gap: 20px;
			height: 450px;

			.process-list-area {
			flex: 1;
			display: flex;
			flex-direction: column;

			.area-title {
			font-size: 14px;
			font-weight: 600;
			color: #303133;
			margin-bottom: 12px;
			padding-bottom: 8px;
			border-bottom: 1px solid #ebeef5;
			}

			.search-box {
			margin-bottom: 12px;

			.el-input {
			width: 100%;
			}
			}
			}

			.process-detail-area {
			width: 380px;
			display: flex;
			flex-direction: column;
			background: #f5f7fa;
			border-radius: 8px;
			padding: 16px;

			.area-title {
			font-size: 14px;
			font-weight: 600;
			color: #303133;
			margin-bottom: 16px;
			padding-bottom: 8px;
			border-bottom: 1px solid #ebeef5;
			}

			.process-detail-form {
			.el-form-item {
			margin-bottom: 12px;

			.el-form-item__label {
			color: #606266;
			font-weight: 500;
			}
			}

			.detail-text {
			color: #303133;
			font-weight: 500;
			}
			}
			}
			}
			</style>
			<style scoped></style>