获取当前数据 上下移动

已于 2024-02-29 10:29:03 修改
阅读量471 收藏 10
点赞数 5
分类专栏： vue 问题 整个页面 文章标签： javascript 前端 vue.js
于 2024-02-29 10:14:42 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_68266812/article/details/136363553
版权

点击按钮  上下移动 当前数据

 

 代码

// 出国境管理  登记备案人员列表
<template>
	<a-row>
		<a-col span="24">
			<a-card :class="style['a-table-wrapper']">
				<!-- 出国境 登记备案人员列表 -->
				<a-table
					:rowKey="records => records.id"
					:columns="columns"
					:loading="tableLoading"
					v-model:data-source="checkInList"
					style="margin-top: 1em"
					:bordered="true"
					@change="onTableChange"
					:scroll="{ x: 2000 }"
					size="small"
					:pagination="tablePagination"
				>
					<!-- 序号 -->
					<template #index="{ index }">
						{{
							(tablePagination.current - 1) *
								tablePagination.pageSize +
							index +
							1
						}}
					</template>
					<template #operation="{ record, index }">
						<!-- 上移 -->
						<a-button
							type="link"
							:disabled="index == 0"
							@click="toUpButtonClick(record, index)"
						>
							{{ getI18n('common', 'Common_Up') }}
						</a-button>
						<!-- 下移 -->
						<a-button
							type="link"
							:disabled="index == checkInList.length - 1"
							@click="toDownButtonClick(record, index)"
						>
							{{ getI18n('common', 'Common_Down') }}
						</a-button>
					</template>
				</a-table>
			</a-card>
		</a-col>
	</a-row>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue' // ,PropType computed watch

import {
	FrontierCheckinListSearchModal,
	FrontierCheckinEditModal,
} from '../components'
import { getI18n } from '@/utils/i18n'
import { getDayText, getButtonPermission } from '@/utils/tool/translateValue'
import { AntdPaginationType } from '@/types/antd'
import { PaginationData, RequestResult } from '@/utils/request/model'
import { CommonConstant } from '@/utils/constant'
import style from './index.module.less'
import {
	GetFrontierCheckInPageParamsModel,
	GetFrontierCheckInPageModel,
} from '@/api/system/frontier-checkIn/model'
import { getFrontierCheckInPageApi } from '@/api/system/frontier-checkIn'
import router from '@/router'

const columns = [
	// 姓名
	{
		title: getI18n('system', 'SYSTEM_Frontier_Name'),
		dataIndex: 'fullName',
		align: 'center',
		width: 150,
		fixed: 'left',
	},
	// 排序
	{
		title: getI18n('system', 'SYSTEM_Adjust_SortNo'),
		dataIndex: 'sort',
		align: 'center',
		slots: { customRender: 'sort' },
		width: '4%',
	},
	// 身份证号
	{
		title: getI18n('system', 'SYSTEM_Frontier_IdCard'),
		dataIndex: 'idcard',
		align: 'center',
		width: 200,
	},
	// 职务职级
	{
		title: getI18n('system', 'SYSTEM_Frontier_Postrank'),
		dataIndex: 'positionRank',
		align: 'center',
		width: 200,
	},
	// 备注
	{
		title: getI18n('system', 'SYSTEM_Frontier_Remarks'),
		dataIndex: 'notes',
		align: 'center',
	},

	// 操作
	{
		title: getI18n('common', 'Common_Action'),
		align: 'center',
		key: 'operation',
		width: 140,
		fixed: 'right',
		slots: { customRender: 'operation' },
	},
]

export default defineComponent({
	components: {
		FrontierCheckinListSearchModal,
		FrontierCheckinEditModal,
		// BasicSiderMenu,
	},
	setup() {
		// 列表loading
		const tableLoading = ref<boolean>(false)
		// 列表数据
		const checkInList = ref<GetFrontierCheckInPageModel[]>([])
		// 获取列表参数
		const secrecyListParams = reactive<GetFrontierCheckInPageParamsModel>({
			current: 1,
			size: 10,
		})

		// 列表分页
		const tablePagination = reactive<AntdPaginationType>({
			current: 1,
			pageSize: 10,
			total: 0,
			showSizeChanger: true,
			showQuickJumper: true,
			pageSizeOptions: ['10', '20', '30', '40', '50'],
			showTotal: (total: number) =>
				getI18n('common', 'Common_Table_Total', [total.toString()]),
		})

		// 获取表单列表数据
		const getFrontierCheckInList = async () => {
			tableLoading.value = true
			const res: RequestResult<
				PaginationData<GetFrontierCheckInPageModel>
			> = await getFrontierCheckInPageApi(secrecyListParams).finally(
				() => {
					tableLoading.value = false
					// searchLoading.value = false
				}
			)
			checkInList.value = res.data.records
			tablePagination.current = res.data.current
			tablePagination.pageSize = res.data.size
			tablePagination.total = res.data.total
		}

		onMounted(() => {
			getFrontierCheckInList()
		})

		// 上移
		const toUpButtonClick = async (data, index) => {
			if (index > 0) {
				const itemToMove = checkInList.value[index]
				checkInList.value.splice(index, 1) // 从数组中移除
				checkInList.value.splice(index - 1, 0, itemToMove) // 在前一个位置插入
			}
			console.log(checkInList.value[index - 1].id, '上一条')
			console.log(checkInList.value[index].id, '当前')
		}

		// 下移
		const toDownButtonClick = async (data, index) => {
			if (index < checkInList.value.length - 1) {
				const itemToMove = checkInList.value[index]
				checkInList.value.splice(index, 1) // 从数组中移除
				checkInList.value.splice(index + 1, 0, itemToMove) // 在后一个位置插入
			}
			console.log(checkInList.value[index].id, '当前')
			console.log(checkInList.value[index + 1].id, '下一条')
			// debugger
		}

		return {
			toUpButtonClick,
			toDownButtonClick,

			style,
			columns,
			tablePagination,
			tableLoading,
			checkInList,
			getDayText,
			getI18n,
			getFrontierCheckInList,

			CommonConstant,
			getButtonPermission,

			router,
		}
	},
})
</script>


// 出国境管理  登记备案人员列表
<template>
	<a-row>
		<a-col span="24">
			<a-card :class="style['a-table-wrapper']">
				<!-- 出国境 登记备案人员列表 -->
				<a-table
					:rowKey="records => records.id"
					:columns="columns"
					:loading="tableLoading"
					v-model:data-source="checkInList"
					style="margin-top: 1em"
					:bordered="true"
					@change="onTableChange"
					:scroll="{ x: 2000 }"
					size="small"
					:pagination="tablePagination"
				>
					<!-- 序号 -->
					<template #index="{ index }">
						{{
							(tablePagination.current - 1) *
								tablePagination.pageSize +
							index +
							1
						}}
					</template>
					<template #operation="{ record, index }">
						<!-- 上移 -->
						<a-button
							type="link"
							:disabled="index == 0"
							@click="toUpButtonClick(record, index)"
						>
							{{ getI18n('common', 'Common_Up') }}
						</a-button>
						<!-- 下移 -->
						<a-button
							type="link"
							:disabled="index == checkInList.length - 1"
							@click="toDownButtonClick(record, index)"
						>
							{{ getI18n('common', 'Common_Down') }}
						</a-button>
					</template>
				</a-table>
			</a-card>
		</a-col>
	</a-row>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, onMounted } from 'vue' // ,PropType computed watch

import {
	FrontierCheckinListSearchModal,
	FrontierCheckinEditModal,
} from '../components'
import { getI18n } from '@/utils/i18n'
import { getDayText, getButtonPermission } from '@/utils/tool/translateValue'
import { AntdPaginationType } from '@/types/antd'
import { PaginationData, RequestResult } from '@/utils/request/model'
import { CommonConstant } from '@/utils/constant'
import style from './index.module.less'
import {
	GetFrontierCheckInPageParamsModel,
	GetFrontierCheckInPageModel,
} from '@/api/system/frontier-checkIn/model'
import { getFrontierCheckInPageApi } from '@/api/system/frontier-checkIn'
import router from '@/router'

const columns = [
	// 姓名
	{
		title: getI18n('system', 'SYSTEM_Frontier_Name'),
		dataIndex: 'fullName',
		align: 'center',
		width: 150,
		fixed: 'left',
	},
	// 排序
	{
		title: getI18n('system', 'SYSTEM_Adjust_SortNo'),
		dataIndex: 'sort',
		align: 'center',
		slots: { customRender: 'sort' },
		width: '4%',
	},
	// 身份证号
	{
		title: getI18n('system', 'SYSTEM_Frontier_IdCard'),
		dataIndex: 'idcard',
		align: 'center',
		width: 200,
	},
	// 职务职级
	{
		title: getI18n('system', 'SYSTEM_Frontier_Postrank'),
		dataIndex: 'positionRank',
		align: 'center',
		width: 200,
	},
	// 备注
	{
		title: getI18n('system', 'SYSTEM_Frontier_Remarks'),
		dataIndex: 'notes',
		align: 'center',
	},

	// 操作
	{
		title: getI18n('common', 'Common_Action'),
		align: 'center',
		key: 'operation',
		width: 140,
		fixed: 'right',
		slots: { customRender: 'operation' },
	},
]

export default defineComponent({
	components: {
		FrontierCheckinListSearchModal,
		FrontierCheckinEditModal,
		// BasicSiderMenu,
	},
	setup() {
		// 列表loading
		const tableLoading = ref<boolean>(false)
		// 列表数据
		const checkInList = ref<GetFrontierCheckInPageModel[]>([])
		// 获取列表参数
		const secrecyListParams = reactive<GetFrontierCheckInPageParamsModel>({
			current: 1,
			size: 10,
		})

		// 列表分页
		const tablePagination = reactive<AntdPaginationType>({
			current: 1,
			pageSize: 10,
			total: 0,
			showSizeChanger: true,
			showQuickJumper: true,
			pageSizeOptions: ['10', '20', '30', '40', '50'],
			showTotal: (total: number) =>
				getI18n('common', 'Common_Table_Total', [total.toString()]),
		})

		// 获取表单列表数据
		const getFrontierCheckInList = async () => {
			tableLoading.value = true
			const res: RequestResult<
				PaginationData<GetFrontierCheckInPageModel>
			> = await getFrontierCheckInPageApi(secrecyListParams).finally(
				() => {
					tableLoading.value = false
					// searchLoading.value = false
				}
			)
			checkInList.value = res.data.records
			tablePagination.current = res.data.current
			tablePagination.pageSize = res.data.size
			tablePagination.total = res.data.total
		}

		onMounted(() => {
			getFrontierCheckInList()
		})

		// // 上移
		// const toUpButtonClick = async (data, index) => {
		// 	if (index > 0) {
		// 		const itemToMove = checkInList.value[index]
		// 		checkInList.value.splice(index, 1) // 从数组中移除
		// 		checkInList.value.splice(index - 1, 0, itemToMove) // 在前一个位置插入
		// 	}
		// 	console.log(checkInList.value[index - 1].id, '上一条')
		// 	console.log(checkInList.value[index].id, '当前')
		// }

		// // 下移
		// const toDownButtonClick = async (data, index) => {
		// 	if (index < checkInList.value.length - 1) {
		// 		const itemToMove = checkInList.value[index]
		// 		checkInList.value.splice(index, 1) // 从数组中移除
		// 		checkInList.value.splice(index + 1, 0, itemToMove) // 在后一个位置插入
		// 	}
		// 	console.log(checkInList.value[index].id, '当前')
		// 	console.log(checkInList.value[index + 1].id, '下一条')
		// 	// debugger
		// }

		// 假设你有一个用于保存数据的API接口，其URL为'https://example.com/save-data'  
const apiUrl = 'https://example.com/save-data';  
  
  // 用于发送POST请求的函数  
  const postData = async (data) => {  
	try {  
	  const response = await fetch(apiUrl, {  
		method: 'POST',  
		headers: {  
		  'Content-Type': 'application/json',  
		},  
		body: JSON.stringify(data),  
	  });  
	
	  if (!response.ok) {  
		throw new Error(`HTTP error! status: ${response.status}`);  
	  }  
	
	  return response.json();  
	} catch (error) {  
	  console.error('Error:', error);  
	}  
  };  
	
  // 上移  
  const toUpButtonClick = async (data, index) => {  
	if (index > 0) {  
	  const itemToMove = checkInList.value[index];  
	  checkInList.value.splice(index, 1); // 从数组中移除  
	  checkInList.value.splice(index - 1, 0, itemToMove); // 在前一个位置插入  
	
	  // 调用接口保存数据  
	  await postData({  
		action: 'moveUp',  
		data: itemToMove,  
	  });  
	}  
	
	console.log(checkInList.value[index - 1].id, '上一条');  
	console.log(checkInList.value[index].id, '当前');  
  };  
	
  // 下移  
  const toDownButtonClick = async (data, index) => {  
	if (index < checkInList.value.length - 1) {  
	  const itemToMove = checkInList.value[index];  
	  checkInList.value.splice(index, 1); // 从数组中移除  
	  checkInList.value.splice(index + 1, 0, itemToMove); // 在后一个位置插入  
	
	  // 调用接口保存数据  
	  await postData({  
		action: 'moveDown',  
		data: itemToMove,  
	  });  
	}  
	
	console.log(checkInList.value[index].id, '当前');  
	console.log(checkInList.value[index + 1].id, '下一条');  
  };
		return {
			toUpButtonClick,
			toDownButtonClick,

			style,
			columns,
			tablePagination,
			tableLoading,
			checkInList,
			getDayText,
			getI18n,
			getFrontierCheckInList,

			CommonConstant,
			getButtonPermission,

			router,
		}
	},
})
</script>

阿金要当大魔王~~
关注
  • 5
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
图片提取数据
09-23
键盘w up, s down, a left, d right 或上下左右键，微调鼠标选点位置，detail display放大显示当前选点的细节； 键盘t键操作矫正，n键表示确认矫正结果进入下一步骤，b键表示取消矫正重新选梯形顶点 第三步坐标系...
html+表格行上下移动位置,jQuery实现表格行上移下移和置顶
weixin_36214932的博客
06-03 1067
HTML页面上是一个简单的数据表格，我们在数据行中分别放置“上移”，“下移”和“置顶”三个链接，并且分别定义三个class属性，我们来通过jQuery实现这些操作。HTML5获取地理位置定位信息2015-04-25上移 下移 置顶CSS+Cookie实现的固定页脚广告条置顶...jQuery我们需要预先把jQuery库文件载入，然后分别绑定上移、下移和置顶三个操作的click事件。以“上移”为例，...
Easyui Treegrid 上下移动实现
火神化身的博客
09-01 6283
最近项目用到easyui的treegrid，也在网上找了下没有有效的行上下移的方法，于是自己琢磨出来给大家分享下 首先是项目框架 点击下移之后 当然上移也是可以的，下面看看代码 function move(o) {//将此方法加入上下移的按钮事件即可 var n = $("#lineNodes").treegrid("getSelected");if(n==null){alert
table的数据行tr上下移动
Ghost
03-14 4631
原文链接：http://www.cnblogs.com/taochen/articles/2344891.html 昨天帮别人解决一个前端页面表格里的数据行上下移动的前端效果，直奔google找了几个demo，发现demo是实现了效果，但是代码很多，最后还是决定自己用jquery写个吧， 首先将前端效果分析出编程逻辑，上下移动就是将数据行互换位置，互换为之前判断是否置顶或则最后一个，翻
easyui框架下table，每行实现上下移动
俗人程序员的博客
06-14 1152
easyui框架的控件功能做得很好，用得最多的是table，很多时候我们需要对每行的数据进行上下移动的排序，这里主要通过js函数来实现，请往下看。//上移 function danganconf_scan_upload_maintable1_up()//上移 { var obj_node = $('#danganconf_scan_upload_maintable1').datagrid(...
elementui + vue2实现表格行的上下移动
szzlh123456789的博客
01-18 511
【代码】elementui + vue2实现表格行的上下移动。
C# Winform 对用BindingList（List）作为数据源绑定的datagridview进行上下行移动操作
H_King_H的博客
11-09 4731
C# Winform 对用BindingList（List）作为数据源绑定的datagridview进行上下行移动操作
vue+elementui穿梭框+上下移动功能
热门推荐
weixin_42618492的博客
10-31 1万+
elementUI组件样式： 需要的样式：增加上移、下移功能 下面就看一下的我实现方法（希望大家有更好的方法） 1.首先在底部内容区增加需要的功能按钮，如：上移，下移，确定，取消【这里是为了数据操作之后，确定之后再进行相爱一步操作】，还有就是右侧列表元素被用户选中 / 取消选中时触发的监听事件【right-check-change】 2.数据roleData【所有角色】，...
C#开发学习笔记:C#中实现两个GridControl之间的数据拖拽以及同一个GridControl中的数据行上下移动
JustWantToFly的博客
09-27 1857
C#中实现两个GridControl之间的数据拖拽以及同一个GridControl中的数据行上下移动
treelist上下节点上下移动
guanqinghe的专栏
07-13 2058
c#参考资料treelist上下节点上下移动
Android_获取进程的上下行流量
12-31
Android_获取进程的上下行流量。
基于C++数据结构双向循环链表实现的贪吃蛇【100010175】
12-26
蛇的移动：取得上下左右键的ASCII码的键值，通过switch语句响应相应的键值对，实现蛇的方向获取 闪烁问题：通过局部打印空格与蛇身节点的移动，来实现局部更新可避免全局绘制造成的闪烁问题，也能提高性能 获取实体...
遗传算法越野小车unity5.5
01-28
按下 再生世界 按钮清除当前跑道数据和小车基因数据，生成新的跑道和初代小车。 再生设置可以设置跑道的长度，弯曲度，弯曲度为最小时跑道没有上下坡可以进行小车赛跑。 参考网站 http://boxcar2d.com
VBA常用技巧
12-21
技巧174 获得当前文件夹的名称 12 技巧175 创建和删除文件夹 12 技巧176 重命名文件或文件夹 12 技巧177 复制指定的文件 12 技巧178 删除指定的文件 12 技巧179 搜索特定的文件 12 技巧180 使用WSH处理文件 12 180-1...
TypeScript中的函数类型注解：精确定义行为与意图
逐星的博客
05-11 317
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
使用 js 类封装项目中音频播放功能的工具方法utils
qq_40868156的博客
05-07 204
封装音频播放功能的工具方法，js，es6，前端，工程化
ts函数？
最新发布
FENGZXCjjjjj的博客
05-11 131
只要参数类型是匹配的，那么就认为它是有效的函数类型，而不在乎参数名是否正确。第二部分是返回值类型。对于返回值，我们在函数和返回值类型之前使用( =>)符号，使之清晰明了。如之前提到的，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。函数的类型只是由参数类型和返回值组成的。函数中使用的捕获变量不会体现在类型里。实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
vue3引入element-plus完整步骤
zzx262625的博客
05-06 437
如果你的项目需要在低版本浏览器上运行，你可能需要使用一些转换工具（如Babel、ESBuild）和polyfill来确保兼容性。在你的Vue项目中配置一个编译器（如Vue CLI、Vite等），然后运行你的项目。你可以尝试在你的组件中使用一些Element Plus的组件来确保它们正常工作。使用npm（或cnpm，如果你在中国并且希望使用淘宝的npm镜像）来安装Element Plus。这样，你就可以在你的Vue组件中使用Element Plus的图标了。在你的Vue 3项目的入口文件（通常是。
qtableweidget 上下移动
05-15
在某些情况下，我们需要在qtablewidget中实现上下移动数据的功能。 要实现这个功能，我们可以借助qtablewidget的drap and drop功能。具体步骤如下： 1. 将qtablewidget中要上下移动的数据设为可以拖拽的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值