字段配置明细表格上移下移

src/views/manage/components/fieldConfiguration/relevantDetails.vue

@@ -12,14 +12,26 @@
             <el-table-column label="是否是明细" prop="isDetailField" />
             <el-table-column label="MES字段" prop="thirdPartyField" />
             <el-table-column label="名称" prop="mesName" />
-            <el-table-column label="操作" width="155" align="center" v-if="fieldTitle !== '详情'">
+            <el-table-column label="操作" width="135" align="center" v-if="fieldTitle !== '详情'">
                 <template #default="scope">
-                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-                    <el-popconfirm title="确认删除该明细?" @confirm="handleDelete(scope.$index)">
-                        <template #reference>
-                            <el-button size="small" type="danger">删除</el-button>
-                        </template>
-                    </el-popconfirm>
+                    <el-space style="margin-right: 0">
+                        <el-popconfirm title="确认删除该明细?" @confirm="handleDelete(scope.$index)">
+                            <template #reference>
+                                <el-link :underline="false" type="danger">删除</el-link>
+                            </template>
+                        </el-popconfirm>
+                        <el-divider direction="vertical" />
+                        <el-dropdown>
+                            <el-link :underline="false" type="primary">更多</el-link>
+                            <template #dropdown>
+                                <el-dropdown-menu>
+                                    <el-dropdown-item @click="moveUpward(scope.$index, scope.row)">上移</el-dropdown-item>
+                                    <el-dropdown-item @click="moveDown(scope.$index, scope.row)">下移</el-dropdown-item>
+                                    <el-dropdown-item @click="handleEdit(scope.$index, scope.row)">编辑</el-dropdown-item>
+                                </el-dropdown-menu>
+                            </template>
+                        </el-dropdown>
+                    </el-space>
                 </template>
             </el-table-column>
         </el-table>
@@ -30,6 +42,7 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { ElMessage } from 'element-plus';
 import addDetails from './addDetails.vue';
 
 const props = defineProps({
@@ -80,4 +93,38 @@ const handleEditDetails = (Val: any) => {
     addDetailRef.value.dialogVisible = false
 }
 
-</script>
\ No newline at end of file
+// 上移
+const moveUpward = (index: number, row: any) => {
+    if (index > 0) {
+        let upData = props.kingdeeFiledDetailData[index - 1];
+        props.kingdeeFiledDetailData.splice(index - 1, 1);
+        props.kingdeeFiledDetailData.splice(index, 0, upData);
+    } else {
+        ElMessage({
+            message: '已经是第一条，上移失败',
+            type: 'warning'
+        });
+    }
+}
+
+// 下移
+const moveDown = (index: number, row: any) => {
+    if ((index + 1) == props.kingdeeFiledDetailData.length) {
+        ElMessage({
+            message: '已经是最后一条，下移失败',
+            type: 'warning'
+        });
+    } else {
+        let downData = props.kingdeeFiledDetailData[index + 1];
+        props.kingdeeFiledDetailData.splice(index + 1, 1);
+        props.kingdeeFiledDetailData.splice(index, 0, downData);
+    }
+}
+
+</script>
+
+<style>
+.el-space__item {
+    margin-right: 0 !important;
+}
+</style>
\ No newline at end of file