From fedb183d1123ecceed5d0237f44b7df9a8f5700e Mon Sep 17 00:00:00 2001
From: yyb <995253665@qq.com>
Date: 星期三, 18 三月 2026 17:05:40 +0800
Subject: [PATCH] 能耗成本核算
---
src/views/productionManagement/processRoute/index.vue | 1755 +++++++--------------------------------------------------
1 files changed, 227 insertions(+), 1,528 deletions(-)
diff --git a/src/views/productionManagement/processRoute/index.vue b/src/views/productionManagement/processRoute/index.vue
index afdd542..83d789e 100644
--- a/src/views/productionManagement/processRoute/index.vue
+++ b/src/views/productionManagement/processRoute/index.vue
@@ -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();
- // 浜у搧閫夋嫨鍜孊OM鐩稿叧
- 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];
- // 鍏堟煡璇OM鍒楄〃锛堝繀閫夛級
- try {
- const res = await getByModel(product.id);
- // 澶勭悊杩斿洖鐨凚OM鏁版嵁锛氬彲鑳芥槸鏁扮粍銆佸璞℃垨鍖呭惈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("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
- }
- } catch (error) {
- // 濡傛灉鎺ュ彛杩斿洖404鎴栧叾浠栭敊璇紝璇存槑娌℃湁BOM
- proxy.$modal.msgError("璇ヤ骇鍝佹病鏈塀OM锛岃鍏堝垱寤築OM");
- }
- }
- };
-
+ // 鎵瑰噯宸ヨ壓璺嚎
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>
--
Gitblit v1.9.3