From 8e9796a5deb805268ef8b8f60486f1c2ea9b2467 Mon Sep 17 00:00:00 2001
From: spring <2396852758@qq.com>
Date: 星期四, 15 一月 2026 13:49:23 +0800
Subject: [PATCH] fix: 修改全局表格居中，工艺路线项目新增功能修改
---
src/views/productionManagement/processRoute/processRouteItem/index.vue | 718 ++++++++++++++++++-------------------------------------
src/assets/styles/element-ui.scss | 20 +
2 files changed, 254 insertions(+), 484 deletions(-)
diff --git a/src/assets/styles/element-ui.scss b/src/assets/styles/element-ui.scss
index 8c741af..6ca79ca 100644
--- a/src/assets/styles/element-ui.scss
+++ b/src/assets/styles/element-ui.scss
@@ -152,3 +152,23 @@
.el-dropdown .el-dropdown-link {
color: var(--el-color-primary) !important;
}
+
+// 鍏ㄥ眬璁剧疆 el-table 琛ㄥご鍜屽崟鍏冩牸灞呬腑
+.el-table {
+ th {
+ text-align: center !important;
+ }
+ td {
+ text-align: center !important;
+ }
+ .el-table__header-wrapper {
+ th {
+ text-align: center !important;
+ }
+ }
+ .el-table__body-wrapper {
+ td {
+ text-align: center !important;
+ }
+ }
+}
diff --git a/src/views/productionManagement/processRoute/processRouteItem/index.vue b/src/views/productionManagement/processRoute/processRouteItem/index.vue
index bbce4ef..7e32396 100644
--- a/src/views/productionManagement/processRoute/processRouteItem/index.vue
+++ b/src/views/productionManagement/processRoute/processRouteItem/index.vue
@@ -2,232 +2,135 @@
<div class="app-container">
<PageHeader content="宸ヨ壓璺嚎椤圭洰">
<template #right-button>
- <el-button
- type="primary"
- @click="isShowProcessSelectDialog = true"
- >
- 閫夋嫨宸ュ簭
- </el-button>
- <el-button type="primary" @click="handleSubmit">纭</el-button>
- <el-switch
- v-model="isTable"
- inline-prompt
- active-text="琛ㄦ牸"
- inactive-text="鍒楄〃"
- @change="handleViewChange"
- style="margin-left: 10px;"
- />
+ <el-button type="primary" @click="handleAdd">鏂板</el-button>
</template>
</PageHeader>
+
<el-table
- v-if="isTable"
- ref="multipleTable"
v-loading="tableLoading"
border
- :data="routeItems"
+ :data="tableData"
:header-cell-style="{ background: '#F0F1F5', color: '#333333' }"
row-key="id"
tooltip-effect="dark"
class="lims-table"
- style="cursor: move;"
>
- <el-table-column align="center" label="搴忓彿" width="60">
+ <el-table-column align="center" label="搴忓彿" width="60" type="index" />
+ <el-table-column label="宸ュ簭鍚嶇О" prop="processId" width="200">
<template #default="scope">
- {{ scope.$index + 1 }}
+ {{ getProcessName(scope.row.processId) || '-' }}
</template>
</el-table-column>
-
- <el-table-column
- v-for="(item, index) in tableColumn"
- :key="index"
- :label="item.label"
- :width="item.width"
- show-overflow-tooltip
- >
- <template #default="scope" v-if="item.dataType === 'action'">
- <el-button
- v-for="(op, opIndex) in item.operation"
- :key="opIndex"
- :type="op.type"
- :link="op.link"
- size="small"
- @click.stop="op.clickFun(scope.row)"
- >
- {{ op.name }}
- </el-button>
- </template>
-
- <template #default="scope" v-else>
- <template v-if="item.prop === 'processId'">
- {{ getProcessName(scope.row.processId) || '-' }}
- </template>
- <template v-else>
- {{ scope.row[item.prop] || '-' }}
- </template>
+ <el-table-column label="浜у搧鍚嶇О" prop="productName" min-width="160" />
+ <el-table-column label="瑙勬牸鍚嶇О" prop="model" min-width="140" />
+ <el-table-column label="鍗曚綅" prop="unit" width="100" />
+ <el-table-column label="鎿嶄綔" align="center" fixed="right" width="150">
+ <template #default="scope">
+ <el-button type="primary" link size="small" @click="handleEdit(scope.row)">缂栬緫</el-button>
+ <el-button type="danger" link size="small" @click="handleDelete(scope.row)">鍒犻櫎</el-button>
</template>
</el-table-column>
</el-table>
- <!-- 浣跨敤鏅�歞iv鏇夸唬el-steps -->
- <div
- v-else
- ref="stepsContainer"
- class="mb5 custom-steps"
- >
- <div
- v-for="(item, index) in routeItems"
- :key="item.id"
- class="custom-step draggable-step"
- :data-id="item.id"
- style="cursor: move; flex: 0 0 auto; min-width: 220px;"
- >
- <div class="step-content">
- <div class="step-number">{{ index + 1 }}</div>
- <el-card
- :header="item.productName"
- class="step-card"
- style="cursor: move;"
- >
- <div class="step-card-content">
- <p>{{ item.model }}</p>
- <p>{{ item.unit }}</p>
- <el-select
- v-model="item.processId"
- style="width: 100%;"
- @mousedown.stop
- :disabled="true"
- >
- <el-option
- v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id"
- />
- </el-select>
- <el-button
- type="primary"
- size="small"
- style="margin-top: 8px; width: 100%;"
- @click.stop="handleSelectProductForRow(item)"
- >
- 閫夋嫨浜у搧
- </el-button>
- </div>
- <template #footer>
- <div class="step-card-footer">
- <el-button type="danger" link size="small" @click.stop="removeItemByID(item.id)">鍒犻櫎</el-button>
- </div>
- </template>
- </el-card>
- </div>
- </div>
- </div>
-
- <!-- 宸ュ簭閫夋嫨瀵硅瘽妗� -->
+ <!-- 鏂板/缂栬緫寮圭獥 -->
<el-dialog
- v-model="isShowProcessSelectDialog"
- title="閫夋嫨宸ュ簭"
- width="400px"
+ v-model="dialogVisible"
+ :title="operationType === 'add' ? '鏂板宸ヨ壓璺嚎椤圭洰' : '缂栬緫宸ヨ壓璺嚎椤圭洰'"
+ width="500px"
+ @close="closeDialog"
>
- <el-select
- v-model="selectedProcessId"
- placeholder="璇烽�夋嫨宸ュ簭锛堝彲澶氶�夛級"
- style="width: 100%"
- multiple
- collapse-tags
- collapse-tags-tooltip
+ <el-form
+ ref="formRef"
+ :model="form"
+ :rules="rules"
+ label-width="120px"
>
- <el-option
- v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id"
- />
- </el-select>
+ <el-form-item label="宸ュ簭" prop="processId">
+ <el-select
+ v-model="form.processId"
+ placeholder="璇烽�夋嫨宸ュ簭"
+ clearable
+ style="width: 100%"
+ >
+ <el-option
+ v-for="process in processOptions"
+ :key="process.id"
+ :label="process.name"
+ :value="process.id"
+ />
+ </el-select>
+ </el-form-item>
+
+ <el-form-item label="浜у搧鍚嶇О" prop="productModelId">
+ <el-button type="primary" @click="showProductSelectDialog = true">
+ {{ form.productName && form.model
+ ? `${form.productName} - ${form.model}`
+ : '閫夋嫨浜у搧' }}
+ </el-button>
+ </el-form-item>
+
+ <el-form-item label="鍗曚綅" prop="unit">
+ <el-input
+ v-model="form.unit"
+ :placeholder="form.productModelId ? '鏍规嵁閫夋嫨鐨勪骇鍝佽嚜鍔ㄥ甫鍑�' : '璇峰厛閫夋嫨浜у搧'"
+ clearable
+ :disabled="true"
+ />
+ </el-form-item>
+ </el-form>
+
<template #footer>
- <el-button @click="isShowProcessSelectDialog = false">鍙栨秷</el-button>
- <el-button type="primary" @click="handleSelectProcess">纭畾</el-button>
+ <el-button @click="closeDialog">鍙栨秷</el-button>
+ <el-button type="primary" @click="handleSubmit" :loading="submitLoading">纭畾</el-button>
</template>
</el-dialog>
<!-- 浜у搧閫夋嫨瀵硅瘽妗� -->
<ProductSelectDialog
- v-model="isShowProductSelectDialog"
- @confirm="handleSelectProductForCurrentRow"
+ v-model="showProductSelectDialog"
+ @confirm="handleProductSelect"
single
/>
</div>
</template>
<script setup>
-import { ref, computed, getCurrentInstance, onMounted, onUnmounted, nextTick } from "vue";
+import { ref, computed, getCurrentInstance, onMounted } from "vue";
import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
import { findProcessRouteItemList, addOrUpdateProcessRouteItem } from "@/api/productionManagement/processRouteItem.js";
import { processList } from "@/api/productionManagement/productionProcess.js";
-import Sortable from 'sortablejs';
-import { useRoute, useRouter } from 'vue-router'
-
-const processOptions = ref([]);
-const tableLoading = ref(false);
-const isShowProductSelectDialog = ref(false);
-const isShowProcessSelectDialog = ref(false);
-const selectedProcessId = ref([]);
-const currentSelectRow = ref(null);
-const routeItems = ref([]);
-let tableSortable = null;
-let stepsSortable = null;
-const multipleTable = ref(null);
-const stepsContainer = ref(null);
-const isTable = ref(true);
+import { useRoute } from 'vue-router'
+import { ElMessageBox } from 'element-plus'
const route = useRoute()
-const router = useRouter()
-const routeId = computed({
- get() {
- return route.query.id;
- },
+const { proxy } = getCurrentInstance() || {};
- set(val) {
- emit('update:router', val)
- }
+const routeId = computed(() => route.query.id);
+
+const tableLoading = ref(false);
+const tableData = ref([]);
+const dialogVisible = ref(false);
+const operationType = ref('add'); // add | edit
+const formRef = ref(null);
+const submitLoading = ref(false);
+
+const processOptions = ref([]);
+const showProductSelectDialog = ref(false);
+
+const form = ref({
+ id: undefined,
+ routeId: routeId.value,
+ processId: undefined,
+ productModelId: undefined,
+ productName: "",
+ model: "",
+ unit: "",
});
-
-const tableColumn = ref([
-{ label: "宸ュ簭鍚嶇О", prop: "processId", width: 200 },
- { label: "浜у搧鍚嶇О", prop: "productName"},
- { label: "瑙勬牸鍚嶇О", prop: "model" },
- { label: "鍗曚綅", prop: "unit" },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 180,
- operation: [
- {
- name: "閫夋嫨浜у搧",
- type: "primary",
- link: true,
- clickFun: (row) => {
- currentSelectRow.value = row;
- isShowProductSelectDialog.value = true;
- }
- },
- {
- name: "鍒犻櫎",
- type: "danger",
- link: true,
- clickFun: (row) => {
- const idx = routeItems.value.findIndex(item => item.id === row.id);
- if (idx > -1) {
- removeItem(idx)
- }
- }
- }
- ]
- }
-]);
+const rules = {
+ processId: [{ required: true, message: '璇烽�夋嫨宸ュ簭', trigger: 'change' }],
+ productModelId: [{ required: true, message: '璇烽�夋嫨浜у搧', trigger: 'change' }],
+};
// 鏍规嵁宸ュ簭ID鑾峰彇宸ュ簭鍚嶇О
const getProcessName = (processId) => {
@@ -236,326 +139,173 @@
return process ? process.name : '';
};
-const removeItem = (index) => {
- routeItems.value.splice(index, 1);
- nextTick(() => initSortable());
+// 鑾峰彇鍒楄〃
+const getList = () => {
+ tableLoading.value = true;
+ findProcessRouteItemList({ routeId: routeId.value })
+ .then(res => {
+ tableData.value = res.data || [];
+ tableLoading.value = false;
+ })
+ .catch(err => {
+ tableLoading.value = false;
+ console.error("鑾峰彇鍒楄〃澶辫触锛�", err);
+ proxy?.$modal?.msgError("鑾峰彇鍒楄〃澶辫触");
+ });
};
-const removeItemByID = (id) => {
- const idx = routeItems.value.findIndex(item => item.id === id);
- if (idx > -1) {
- routeItems.value.splice(idx, 1);
- nextTick(() => initSortable());
+// 鑾峰彇宸ュ簭鍒楄〃
+const getProcessList = () => {
+ processList({})
+ .then(res => {
+ processOptions.value = res.data || [];
+ })
+ .catch(err => {
+ console.error("鑾峰彇宸ュ簭澶辫触锛�", err);
+ });
+};
+
+// 鏂板
+const handleAdd = () => {
+ operationType.value = 'add';
+ resetForm();
+ dialogVisible.value = true;
+};
+
+// 缂栬緫
+const handleEdit = (row) => {
+ operationType.value = 'edit';
+ form.value = {
+ id: row.id,
+ routeId: routeId.value,
+ processId: row.processId,
+ productModelId: row.productModelId,
+ productName: row.productName || "",
+ model: row.model || "",
+ unit: row.unit || "",
+ };
+ dialogVisible.value = true;
+};
+
+// 鍒犻櫎
+const handleDelete = (row) => {
+ ElMessageBox.confirm('纭鍒犻櫎璇ュ伐鑹鸿矾绾块」鐩紵', '鎻愮ず', {
+ confirmButtonText: '纭',
+ cancelButtonText: '鍙栨秷',
+ type: 'warning'
+ })
+ .then(() => {
+ // 璋冪敤鍒犻櫎鎺ュ彛锛屼紶鍗曚釜瀵硅薄锛堝寘鍚玦d锛�
+ addOrUpdateProcessRouteItem({
+ id: row.id,
+ routeId: routeId.value,
+ })
+ .then(() => {
+ proxy?.$modal?.msgSuccess('鍒犻櫎鎴愬姛');
+ getList();
+ })
+ .catch(() => {
+ proxy?.$modal?.msgError('鍒犻櫎澶辫触');
+ });
+ })
+ .catch(() => {});
+};
+
+// 浜у搧閫夋嫨
+const handleProductSelect = (products) => {
+ if (products && products.length > 0) {
+ const product = products[0];
+ form.value.productModelId = product.id;
+ form.value.productName = product.productName;
+ form.value.model = product.model;
+ form.value.unit = product.unit || "";
+ showProductSelectDialog.value = false;
+ // 瑙﹀彂琛ㄥ崟楠岃瘉
+ formRef.value?.validateField('productModelId');
}
};
-// 閫夋嫨宸ュ簭 - 鏂板澶氭潯璁板綍
-const handleSelectProcess = () => {
- if (!selectedProcessId.value || selectedProcessId.value.length === 0) {
- proxy?.$modal?.msgWarning("璇烽�夋嫨宸ュ簭");
- return;
- }
-
- // 涓烘瘡涓�変腑鐨勫伐搴忓垱寤轰竴鏉¤褰�
- const newItems = selectedProcessId.value.map(processId => ({
- processId: processId,
+// 鎻愪氦
+const handleSubmit = () => {
+ formRef.value.validate((valid) => {
+ if (valid) {
+ submitLoading.value = true;
+
+ // 鏋勫缓鎻愪氦鏁版嵁瀵硅薄锛堝崟涓璞″舰寮忥級
+ const submitData = {
+ routeId: routeId.value,
+ processId: form.value.processId,
+ productModelId: form.value.productModelId,
+ };
+
+ if (operationType.value === 'add') {
+ // 鏂板锛氫紶鍗曚釜瀵硅薄
+ addOrUpdateProcessRouteItem(submitData)
+ .then(() => {
+ proxy?.$modal?.msgSuccess('鏂板鎴愬姛');
+ closeDialog();
+ getList();
+ })
+ .catch(() => {
+ proxy?.$modal?.msgError('鏂板澶辫触');
+ })
+ .finally(() => {
+ submitLoading.value = false;
+ });
+ } else {
+ // 缂栬緫锛氫紶鍗曚釜瀵硅薄锛屽寘鍚玦d
+ addOrUpdateProcessRouteItem({
+ ...submitData,
+ id: form.value.id,
+ })
+ .then(() => {
+ proxy?.$modal?.msgSuccess('淇敼鎴愬姛');
+ closeDialog();
+ getList();
+ })
+ .catch(() => {
+ proxy?.$modal?.msgError('淇敼澶辫触');
+ })
+ .finally(() => {
+ submitLoading.value = false;
+ });
+ }
+ }
+ });
+};
+
+// 閲嶇疆琛ㄥ崟
+const resetForm = () => {
+ form.value = {
+ id: undefined,
+ routeId: routeId.value,
+ processId: undefined,
+ productModelId: undefined,
productName: "",
model: "",
unit: "",
- productModelId: undefined,
- routeId: routeId.value,
- id: `${Date.now()}-${Math.random().toString(36).slice(2)}-${processId}`,
- }));
-
- routeItems.value.push(...newItems);
-
- // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
- nextTick(() => {
- initSortable();
- });
-
- isShowProcessSelectDialog.value = false;
- selectedProcessId.value = [];
+ };
+ formRef.value?.resetFields();
};
-// 涓烘寚瀹氳閫夋嫨浜у搧
-const handleSelectProductForRow = (row) => {
- currentSelectRow.value = row;
- isShowProductSelectDialog.value = true;
-};
-
-// 澶勭悊褰撳墠琛岀殑浜у搧閫夋嫨
-const handleSelectProductForCurrentRow = (products) => {
- if (products && products.length > 0 && currentSelectRow.value) {
- const product = products[0];
- // 鏇存柊褰撳墠琛岀殑浜у搧淇℃伅
- currentSelectRow.value.productName = product.productName;
- currentSelectRow.value.model = product.model;
- currentSelectRow.value.unit = product.unit || "";
- currentSelectRow.value.productModelId = product.id;
- isShowProductSelectDialog.value = false;
- currentSelectRow.value = null;
- }
-};
-
-const findProcessRouteItems = () => {
- tableLoading.value = true;
- findProcessRouteItemList({ routeId: routeId.value })
- .then(res => {
- tableLoading.value = false;
- routeItems.value = res.data.map(item => ({
- ...item,
- processId: item.processId === 0 ? undefined : item.processId
- }));
- // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
- nextTick(() => {
- setTimeout(() => initSortable(), 100);
- });
- })
- .catch(err => {
- tableLoading.value = false;
- console.error("鑾峰彇鍒楄〃澶辫触锛�", err);
- });
-};
-
-const findProcessList = () => {
- processList({})
- .then(res => {
- processOptions.value = res.data;
- })
- .catch(err => {
- console.error("鑾峰彇宸ュ簭澶辫触锛�", err);
- });
-};
-
-const { proxy } = getCurrentInstance() || {};
-
-const handleSubmit = () => {
- const hasEmptyProcess = routeItems.value.some(item => !item.processId);
- if (hasEmptyProcess) {
- proxy?.$modal?.msgError("璇蜂负鎵�鏈夐」鐩�夋嫨宸ュ簭");
- return;
- }
-
- addOrUpdateProcessRouteItem({
- routeId: routeId.value,
- processRouteItem: routeItems.value.map(({ id, ...item }) => item)
- })
- .then(res => {
- router.push({
- path: '/productionManagement/processRoute',
- })
- proxy?.$modal?.msgSuccess("鎻愪氦鎴愬姛");
- })
- .catch(err => {
- proxy?.$modal?.msgError(`鎻愪氦澶辫触锛�${err.msg || "缃戠粶寮傚父"}`);
- });
-};
-
-const destroySortable = () => {
- if (tableSortable) {
- tableSortable.destroy();
- tableSortable = null;
- }
- if (stepsSortable) {
- stepsSortable.destroy();
- stepsSortable = null;
- }
-};
-
-const initSortable = () => {
- destroySortable();
-
- if (isTable.value) {
- if (!multipleTable.value) return;
- const tbody = multipleTable.value.$el.querySelector('.el-table__body tbody') ||
- multipleTable.value.$el.querySelector('.el-table__body-wrapper > table > tbody');
- if (!tbody) return;
-
- tableSortable = new Sortable(tbody, {
- animation: 150,
- ghostClass: 'sortable-ghost',
- handle: '.el-table__row',
- filter: '.el-button, .el-select',
- onEnd: (evt) => {
- if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;
-
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭锛屼笌琛ㄦ牸妯″紡淇濇寔涓�鑷�
- const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
- routeItems.value.splice(evt.newIndex, 0, moveItem);
- routeItems.value = [...routeItems.value];
- console.log('鎺掑簭鍚庢暟缁�:', routeItems.value);
- }
- });
- } else {
- if (!stepsContainer.value) return;
-
- // 淇敼锛氱洿鎺ヤ娇鐢╯tepsContainer.value浣滀负鎷栨嫿瀹瑰櫒
- const stepsList = stepsContainer.value;
- if (!stepsList) {
- console.warn('鏈壘鍒版楠ゆ潯鎷栨嫿瀹瑰櫒');
- return;
- }
-
- // 淇敼锛氱畝鍖栨嫋鎷介厤缃�
- stepsSortable = new Sortable(stepsList, {
- animation: 150,
- ghostClass: 'sortable-ghost',
- draggable: '.draggable-step', // 鍙嫋鎷藉厓绱�
- handle: '.draggable-step, .step-card', // 鎷栨嫿鎵嬫焺
- filter: '.el-button, .el-select, .el-input', // 杩囨护鎸夐挳/閫夋嫨鍣�
- forceFallback: true,
- fallbackClass: 'sortable-fallback',
- preventOnFilter: true,
- scroll: true,
- scrollSensitivity: 30,
- scrollSpeed: 10,
- bubbleScroll: true,
- onEnd: (evt) => {
- if (evt.oldIndex === evt.newIndex || !routeItems.value[evt.oldIndex]) return;
-
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭
- const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
- routeItems.value.splice(evt.newIndex, 0, moveItem);
- routeItems.value = [...routeItems.value];
- }
- });
-
- // 璋冭瘯锛氭墦鍗板鍣ㄥ拰瀹炰緥锛岀‘璁ょ粦瀹氭垚鍔�
- console.log('姝ラ鏉℃嫋鎷藉鍣�:', stepsList);
- console.log('Sortable瀹炰緥:', stepsSortable);
- }
-};
-
-const handleViewChange = () => {
- destroySortable();
- // 寤惰繜鍒濆鍖栵紝纭繚瑙嗗浘鍒囨崲鍚嶥OM瀹屽叏娓叉煋
- nextTick(() => {
- setTimeout(() => initSortable(), 100);
- });
+// 鍏抽棴寮圭獥
+const closeDialog = () => {
+ dialogVisible.value = false;
+ resetForm();
};
onMounted(() => {
- findProcessRouteItems();
- findProcessList();
-});
-
-onUnmounted(() => {
- destroySortable();
-});
-
-defineExpose({
- handleSubmit,
+ getList();
+ getProcessList();
});
</script>
<style scoped>
-:deep(.sortable-ghost) {
- opacity: 0.6;
- background-color: #f5f7fa !important;
-}
-
:deep(.el-table__row) {
transition: background-color 0.2s;
}
:deep(.el-table__row:hover) {
background-color: #f9fafc !important;
-}
-
-:deep(.el-card__footer){
- padding: 0 !important;
-}
-
-
-/* 淇敼锛氳嚜瀹氫箟姝ラ鏉″鍣ㄦ牱寮� */
-.custom-steps {
- min-height: 100px;
- padding: 10px 0;
- display: flex;
- flex-wrap: wrap;
- gap: 20px;
- align-items: flex-start;
-}
-
-/* 淇敼锛氳嚜瀹氫箟姝ラ椤规牱寮� */
-.custom-step {
- cursor: move !important;
- padding: 8px;
- position: relative;
- transition: all 0.2s ease;
- flex: 0 0 auto;
- min-width: 220px;
- touch-action: none;
-}
-
-/* 鎷栨嫿鎮诞鏍峰紡锛屾彁绀哄彲鎷栨嫿 */
-.custom-step:hover {
- background-color: rgba(64, 158, 255, 0.05);
- transform: translateY(-2px);
-}
-
-.sortable-ghost {
- opacity: 0.4;
- background-color: #f5f7fa !important;
- border: 2px dashed #409eff;
- margin: 10px;
- transform: scale(1.02);
-}
-
-.sortable-fallback {
- opacity: 0.9;
- background-color: #f5f7fa;
- border: 1px solid #409eff;
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
- transform: rotate(2deg);
- margin: 10px;
-}
-
-.step-card {
- cursor: move !important;
- transition: box-shadow 0.2s ease;
- user-select: none;
- -webkit-user-select: none;
- pointer-events: auto;
- margin: 10px;
- height: 260px;
-}
-
-.step-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-
-.step-content {
- width: 245px;
- user-select: none;
-}
-
-.step-card-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 140px;
-}
-
-.step-card-footer {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 10px;
-}
-
-/* 鑷畾涔夊簭鍙锋牱寮忎紭鍖� */
-.step-number {
- font-weight: bold;
- text-align: center;
- width: 36px;
- height: 36px;
- line-height: 36px;
- margin: 0 auto 10px;
- background: #409eff;
- color: #fff;
- border-radius: 50%;
- font-size: 14px;
}
</style>
--
Gitblit v1.9.3