From 6f32ae6d2545c8279032105bf263eb2552fe6a09 Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期二, 06 一月 2026 18:02:37 +0800
Subject: [PATCH] 1.生产工单做流转单2.生产订单工艺路线做排序删除3.生产工单加报工
---
src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue | 864 +++++++++++++++++++++++++++++----------------------------
1 files changed, 444 insertions(+), 420 deletions(-)
diff --git a/src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue b/src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue
index a3adff1..354f9de 100644
--- a/src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue
+++ b/src/views/productionManagement/productionOrder/ProcessRouteItemForm.vue
@@ -1,81 +1,65 @@
<template>
<div>
- <el-dialog
- v-model="isShow"
- title="宸ヨ壓璺嚎椤圭洰"
- width="800px"
- @close="closeModal"
- >
+ <el-dialog v-model="isShow"
+ title="宸ヨ壓璺嚎椤圭洰"
+ width="800px"
+ @close="closeModal">
<div class="operate-button">
- <el-button
- type="primary"
- @click="isShowProductSelectDialog = true"
- class="mb5"
- style="margin-bottom: 10px;"
- >
+ <el-button type="primary"
+ @click="isShowProductSelectDialog = true"
+ class="mb5"
+ style="margin-bottom: 10px;">
閫夋嫨浜у搧
</el-button>
-
- <el-switch
- v-model="isTable"
- inline-prompt
- active-text="琛ㄦ牸"
- inactive-text="鍒楄〃"
- @change="handleViewChange"
- />
+ <el-switch v-model="isTable"
+ inline-prompt
+ active-text="琛ㄦ牸"
+ inactive-text="鍒楄〃"
+ @change="handleViewChange" />
</div>
-
- <el-table
- v-if="isTable"
- ref="multipleTable"
- v-loading="tableLoading"
- border
- :data="routeItems"
- :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 v-if="isTable"
+ ref="multipleTable"
+ v-loading="tableLoading"
+ border
+ :data="routeItems"
+ :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">
<template #default="scope">
{{ scope.$index + 1 }}
</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)"
- >
+ <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 #default="scope"
+ v-else>
<template v-if="item.prop === 'processId'">
- <el-select
- v-model="scope.row[item.prop]"
- style="width: 100%;"
- @mousedown.stop
- >
- <el-option
- v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id"
- />
+ <el-select v-model="scope.row[item.prop]"
+ style="width: 100%;"
+ @mousedown.stop>
+ <el-option v-for="process in processOptions"
+ :key="process.id"
+ :label="process.name"
+ :value="process.id" />
</el-select>
</template>
<template v-else>
@@ -84,194 +68,229 @@
</template>
</el-table-column>
</el-table>
-
<!-- 浣跨敤鏅�歞iv鏇夸唬el-steps -->
- <div
- v-else
- ref="stepsContainer"
- class="mb5 custom-steps"
- style="padding: 10px 0; display: flex; flex-wrap: nowrap; gap: 20px; align-items: flex-start;"
- >
- <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 v-else
+ ref="stepsContainer"
+ class="mb5 custom-steps"
+ style="padding: 10px 0; display: flex; flex-wrap: nowrap; gap: 20px; align-items: flex-start;">
+ <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;"
- >
+ <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
- >
- <el-option
- v-for="process in processOptions"
- :key="process.id"
- :label="process.name"
- :value="process.id"
- />
+ <el-select v-model="item.processId"
+ style="width: 100%;"
+ @mousedown.stop>
+ <el-option v-for="process in processOptions"
+ :key="process.id"
+ :label="process.name"
+ :value="process.id" />
</el-select>
</div>
<template #footer>
<div class="step-card-footer">
- <el-button type="danger" link size="small" @click.stop="removeItemByID(item.id)">鍒犻櫎</el-button>
+ <el-button type="danger"
+ link
+ size="small"
+ @click.stop="removeItemByID(item.id)">鍒犻櫎</el-button>
</div>
</template>
</el-card>
</div>
</div>
</div>
-
<template #footer>
<div class="dialog-footer">
- <el-button type="primary" @click="handleSubmit">纭</el-button>
+ <el-button type="primary"
+ @click="handleSubmit">纭</el-button>
<el-button @click="closeModal">鍙栨秷</el-button>
</div>
</template>
</el-dialog>
-
- <ProductSelectDialog
- v-model="isShowProductSelectDialog"
- @confirm="handelSelectProducts"
- />
+ <ProductSelectDialog v-model="isShowProductSelectDialog"
+ @confirm="handelSelectProducts" />
</div>
</template>
<script setup>
-import { ref, computed, getCurrentInstance, onMounted, onUnmounted, nextTick } from "vue";
-import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
-import { findProductProcessRouteItemList, addOrUpdateProductProcessRouteItem } from "@/api/productionManagement/productProcessRoute.js";
-import { processList } from "@/api/productionManagement/productionProcess.js";
-import Sortable from 'sortablejs';
+ import {
+ ref,
+ computed,
+ getCurrentInstance,
+ onMounted,
+ onUnmounted,
+ nextTick,
+ } from "vue";
+ import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue";
+ import {
+ findProductProcessRouteItemList,
+ addOrUpdateProductProcessRouteItem,
+ deleteRouteItem,
+ } from "@/api/productionManagement/productProcessRoute.js";
+ import { processList } from "@/api/productionManagement/productionProcess.js";
+ import Sortable from "sortablejs";
-const props = defineProps({
- visible: {
- type: Boolean,
- required: true,
- default: false
- },
- record: {
- type: Object,
- required: true,
- default: () => ({})
- }
-});
-
-const emit = defineEmits(['update:visible', 'completed']);
-
-const processOptions = ref([]);
-const tableLoading = ref(false);
-const isShowProductSelectDialog = ref(false);
-const routeItems = ref([]);
-let tableSortable = null;
-let stepsSortable = null;
-const multipleTable = ref(null);
-const stepsContainer = ref(null);
-const isTable = ref(true);
-
-const isShow = computed({
- get() {
- return props.visible;
- },
- set(val) {
- emit('update:visible', val);
- }
-});
-
-const tableColumn = ref([
- { label: "浜у搧鍚嶇О", prop: "productName", width: 180 },
- { label: "瑙勬牸鍚嶇О", prop: "model", width: 150 },
- { label: "鍗曚綅", prop: "unit", width: 80 },
- { label: "宸ュ簭鍚嶇О", prop: "processId", width: 180 },
- {
- dataType: "action",
- label: "鎿嶄綔",
- align: "center",
- fixed: "right",
- width: 100,
- operation: [
- {
- name: "鍒犻櫎",
- type: "danger",
- link: true,
- clickFun: (row) => {
- const idx = routeItems.value.findIndex(item => item.id === row.id);
- if (idx > -1) {
- removeItem(idx)
- }
- }
- }
- ]
- }
-]);
-
-const removeItem = (index) => {
- routeItems.value.splice(index, 1);
- nextTick(() => initSortable());
-};
-
-const removeItemByID = (id) => {
- const idx = routeItems.value.findIndex(item => item.id === id);
- if (idx > -1) {
- routeItems.value.splice(idx, 1);
- nextTick(() => initSortable());
- }
-};
-
-const closeModal = () => {
- isShow.value = false;
-};
-
-const handelSelectProducts = (products) => {
- destroySortable();
-
- const newData = products.map(({ id, ...product }) => ({
- ...product,
- productModelId: id,
- routeId: props.record.id,
- id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
- processId: undefined
- }));
-
- console.log('閫夋嫨浜у搧鍓嶆暟缁�:', routeItems.value);
- routeItems.value.push(...newData);
- routeItems.value = [...routeItems.value];
- console.log('閫夋嫨浜у搧鍚庢暟缁�:', routeItems.value);
-
- // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
- nextTick(() => {
- // 寮哄埗閲嶆柊娓叉煋缁勪欢
- if (proxy?.$forceUpdate) {
- proxy.$forceUpdate();
- }
-
- const temp = [...routeItems.value];
- routeItems.value = [];
- nextTick(() => {
- routeItems.value = temp;
- initSortable();
- });
+ const props = defineProps({
+ visible: {
+ type: Boolean,
+ required: true,
+ default: false,
+ },
+ record: {
+ type: Object,
+ required: true,
+ default: () => ({}),
+ },
});
-};
-const findProcessRouteItems = () => {
- tableLoading.value = true;
- findProductProcessRouteItemList({ orderId: props.record.id })
+ const emit = defineEmits(["update:visible", "completed"]);
+
+ const processOptions = ref([]);
+ const tableLoading = ref(false);
+ const isShowProductSelectDialog = ref(false);
+ const routeItems = ref([]);
+ let tableSortable = null;
+ let stepsSortable = null;
+ const multipleTable = ref(null);
+ const stepsContainer = ref(null);
+ const isTable = ref(true);
+
+ const isShow = computed({
+ get() {
+ return props.visible;
+ },
+ set(val) {
+ emit("update:visible", val);
+ },
+ });
+
+ const tableColumn = ref([
+ { label: "浜у搧鍚嶇О", prop: "productName", width: 180 },
+ { label: "瑙勬牸鍚嶇О", prop: "model", width: 150 },
+ { label: "鍗曚綅", prop: "unit", width: 80 },
+ { label: "宸ュ簭鍚嶇О", prop: "processId", width: 180 },
+ {
+ dataType: "action",
+ label: "鎿嶄綔",
+ align: "center",
+ fixed: "right",
+ width: 100,
+ operation: [
+ {
+ name: "鍒犻櫎",
+ type: "danger",
+ link: true,
+ clickFun: row => {
+ console.log(row.id, "鍒犻櫎");
+
+ const dragSortx = routeItems.value.findIndex(
+ item => item.dragSort === row.dragSort
+ );
+ const idx = routeItems.value.findIndex(item => item.id === row.id);
+ console.log(idx, "idx");
+ if (row.id) {
+ deleteRouteItemByIds({ id: row.id }, idx);
+ } else {
+ removeItem(dragSortx);
+ }
+ },
+ },
+ ],
+ },
+ ]);
+
+ const removeItem = index => {
+ console.log("杞垹闄�", index);
+
+ routeItems.value.splice(index, 1);
+ updateDragSort();
+ nextTick(() => initSortable());
+ };
+
+ const removeItemByID = id => {
+ const idx = routeItems.value.findIndex(item => item.id === id);
+ if (idx > -1) {
+ routeItems.value.splice(idx, 1);
+ updateDragSort();
+ nextTick(() => initSortable());
+ }
+ };
+
+ const deleteRouteItemByIds = (ids, index) => {
+ deleteRouteItem(ids).then(res => {
+ routeItems.value.splice(index, 1);
+ updateDragSort();
+ nextTick(() => initSortable());
+ });
+ };
+
+ const closeModal = () => {
+ isShow.value = false;
+ };
+
+ const updateDragSort = () => {
+ routeItems.value.forEach((item, index) => {
+ item.dragSort = index + 1;
+ });
+ routeItems.value = [...routeItems.value];
+ console.log("鏇存柊鍚庣殑鏁扮粍:", routeItems.value);
+ };
+
+ const handelSelectProducts = products => {
+ destroySortable();
+
+ // 璁＄畻鏂扮殑dragSort鍊艰捣濮嬬偣
+ const maxDragSort =
+ routeItems.value.length > 0
+ ? Math.max(...routeItems.value.map(item => item.dragSort || 0))
+ : 0;
+
+ const newData = products.map(({ id, ...product }, index) => ({
+ ...product,
+ productModelId: id,
+ routeId: props.record.id,
+ // id: `${Date.now()}-${Math.random().toString(36).slice(2)}`,
+ processId: undefined,
+ dragSort: maxDragSort + index + 1,
+ }));
+
+ console.log("閫夋嫨浜у搧鍓嶆暟缁�:", routeItems.value);
+ routeItems.value.push(...newData);
+ updateDragSort();
+ console.log("閫夋嫨浜у搧鍚庢暟缁�:", routeItems.value);
+
+ // 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
+ nextTick(() => {
+ // 寮哄埗閲嶆柊娓叉煋缁勪欢
+ if (proxy?.$forceUpdate) {
+ proxy.$forceUpdate();
+ }
+
+ const temp = [...routeItems.value];
+ routeItems.value = [];
+ nextTick(() => {
+ routeItems.value = temp;
+ initSortable();
+ });
+ });
+ };
+
+ const findProcessRouteItems = () => {
+ tableLoading.value = true;
+ findProductProcessRouteItemList({ orderId: props.record.id })
.then(res => {
tableLoading.value = false;
routeItems.value = res.data.map(item => ({
...item,
- processId: item.processId === 0 ? undefined : item.processId
+ processId: item.processId === 0 ? undefined : item.processId,
}));
// 寤惰繜鍒濆鍖栵紝纭繚DOM瀹屽叏娓叉煋
nextTick(() => {
@@ -282,250 +301,255 @@
tableLoading.value = false;
console.error("鑾峰彇鍒楄〃澶辫触锛�", err);
});
-};
+ };
-const findProcessList = () => {
- processList({})
+ const findProcessList = () => {
+ processList({})
.then(res => {
processOptions.value = res.data;
})
.catch(err => {
console.error("鑾峰彇宸ュ簭澶辫触锛�", err);
});
-};
+ };
-const { proxy } = getCurrentInstance() || {};
+ const { proxy } = getCurrentInstance() || {};
-const handleSubmit = () => {
- const hasEmptyProcess = routeItems.value.some(item => !item.processId);
- if (hasEmptyProcess) {
- proxy?.$modal?.msgError("璇蜂负鎵�鏈夐」鐩�夋嫨宸ュ簭");
- return;
- }
+ const handleSubmit = () => {
+ const hasEmptyProcess = routeItems.value.some(item => !item.processId);
+ if (hasEmptyProcess) {
+ proxy?.$modal?.msgError("璇蜂负鎵�鏈夐」鐩�夋嫨宸ュ簭");
+ return;
+ }
- addOrUpdateProductProcessRouteItem({
- routeId: props.record.id,
- processRouteItem: routeItems.value.map(({ id, ...item }) => item)
- })
+ addOrUpdateProductProcessRouteItem({
+ routeId: props.record.id,
+ processRouteItem: routeItems.value,
+ })
.then(res => {
isShow.value = false;
- emit('completed');
+ emit("completed");
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;
+ const destroySortable = () => {
+ if (tableSortable) {
+ tableSortable.destroy();
+ tableSortable = null;
}
+ if (stepsSortable) {
+ stepsSortable.destroy();
+ stepsSortable = null;
+ }
+ };
- // 淇敼锛氱畝鍖栨嫋鎷介厤缃�
- 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;
+ const initSortable = () => {
+ destroySortable();
- // 浣跨敤鏁扮粍 splice 鏂规硶閲嶆柊鎺掑簭
- const moveItem = routeItems.value.splice(evt.oldIndex, 1)[0];
- routeItems.value.splice(evt.newIndex, 0, moveItem);
- routeItems.value = [...routeItems.value];
+ 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);
+ updateDragSort();
+ 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);
+ updateDragSort();
+ },
+ });
+
+ // 璋冭瘯锛氭墦鍗板鍣ㄥ拰瀹炰緥锛岀‘璁ょ粦瀹氭垚鍔�
+ console.log("姝ラ鏉℃嫋鎷藉鍣�:", stepsList);
+ console.log("Sortable瀹炰緥:", stepsSortable);
+ }
+ };
+
+ const handleViewChange = () => {
+ destroySortable();
+ // 寤惰繜鍒濆鍖栵紝纭繚瑙嗗浘鍒囨崲鍚嶥OM瀹屽叏娓叉煋
+ nextTick(() => {
+ setTimeout(() => initSortable(), 100);
});
+ };
- // 璋冭瘯锛氭墦鍗板鍣ㄥ拰瀹炰緥锛岀‘璁ょ粦瀹氭垚鍔�
- console.log('姝ラ鏉℃嫋鎷藉鍣�:', stepsList);
- console.log('Sortable瀹炰緥:', stepsSortable);
- }
-};
-
-const handleViewChange = () => {
- destroySortable();
- // 寤惰繜鍒濆鍖栵紝纭繚瑙嗗浘鍒囨崲鍚嶥OM瀹屽叏娓叉煋
- nextTick(() => {
- setTimeout(() => initSortable(), 100);
+ onMounted(() => {
+ findProcessRouteItems();
+ findProcessList();
});
-};
-onMounted(() => {
- findProcessRouteItems();
- findProcessList();
-});
+ onUnmounted(() => {
+ destroySortable();
+ });
-onUnmounted(() => {
- destroySortable();
-});
-
-defineExpose({
- closeModal,
- handleSubmit,
- isShow
-});
+ defineExpose({
+ closeModal,
+ handleSubmit,
+ isShow,
+ });
</script>
<style scoped>
-:deep(.sortable-ghost) {
- opacity: 0.6;
- background-color: #f5f7fa !important;
-}
+ :deep(.sortable-ghost) {
+ opacity: 0.6;
+ background-color: #f5f7fa !important;
+ }
-:deep(.el-table__row) {
- transition: background-color 0.2s;
-}
+ :deep(.el-table__row) {
+ transition: background-color 0.2s;
+ }
-:deep(.el-table__row:hover) {
- background-color: #f9fafc !important;
-}
+ :deep(.el-table__row:hover) {
+ background-color: #f9fafc !important;
+ }
-:deep(.el-card__footer){
- padding: 0 !important;
-}
+ :deep(.el-card__footer) {
+ padding: 0 !important;
+ }
-.operate-button {
- display: flex;
- align-items: center;
- justify-content: space-between;
-}
+ .operate-button {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ }
-/* 淇敼锛氳嚜瀹氫箟姝ラ鏉″鍣ㄦ牱寮� */
-.custom-steps {
- display: flex;
- flex-wrap: wrap;
- align-items: flex-start;
- gap: 20px;
- min-height: 100px;
-}
+ /* 淇敼锛氳嚜瀹氫箟姝ラ鏉″鍣ㄦ牱寮� */
+ .custom-steps {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: flex-start;
+ gap: 20px;
+ min-height: 100px;
+ }
-/* 淇敼锛氳嚜瀹氫箟姝ラ椤规牱寮� */
-.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 {
+ 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);
-}
+ /* 鎷栨嫿鎮诞鏍峰紡锛屾彁绀哄彲鎷栨嫿 */
+ .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-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;
-}
+ .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: 240px;
-}
+ .step-card {
+ cursor: move !important;
+ transition: box-shadow 0.2s ease;
+ user-select: none;
+ -webkit-user-select: none;
+ pointer-events: auto;
+ margin: 10px;
+ height: 240px;
+ }
-.step-card:hover {
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
+ .step-card:hover {
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+ }
-.step-content {
- width: 220px;
- user-select: none;
-}
+ .step-content {
+ width: 220px;
+ user-select: none;
+ }
-.step-card-content {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
+ .step-card-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ }
-.step-card-footer {
- display: flex;
- justify-content: flex-end;
- align-items: center;
- padding: 10px;
-}
+ .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;
-}
+ /* 鑷畾涔夊簭鍙锋牱寮忎紭鍖� */
+ .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