获取当前数据 上下移动

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

 

 代码

// 出国境管理  登记备案人员列表
<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-buttontype="link":disabled="index == 0"@click="toUpButtonClick(record, index)">{{ getI18n('common', 'Common_Up') }}</a-button><!-- 下移 --><a-buttontype="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 watchimport {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() {// 列表loadingconst 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 = trueconst res: RequestResult<PaginationData<GetFrontierCheckInPageModel>> = await getFrontierCheckInPageApi(secrecyListParams).finally(() => {tableLoading.value = false// searchLoading.value = false})checkInList.value = res.data.recordstablePagination.current = res.data.currenttablePagination.pageSize = res.data.sizetablePagination.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-buttontype="link":disabled="index == 0"@click="toUpButtonClick(record, index)">{{ getI18n('common', 'Common_Up') }}</a-button><!-- 下移 --><a-buttontype="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 watchimport {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() {// 列表loadingconst 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 = trueconst res: RequestResult<PaginationData<GetFrontierCheckInPageModel>> = await getFrontierCheckInPageApi(secrecyListParams).finally(() => {tableLoading.value = false// searchLoading.value = false})checkInList.value = res.data.recordstablePagination.current = res.data.currenttablePagination.pageSize = res.data.sizetablePagination.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>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/715134.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

淘宝开放平台获取商家订单数据API接口接入流程

淘宝开放平台获取商家订单数据API接口接入流程

taobao.custom 自定义API操作 接口概述&#xff1a;通过此API可以调用淘宝开放平台的API&#xff0c;通过技术对接&#xff0c;您可以轻松实现无账号调用官方接口。进入测试&#xff01; 公共参数 名称类型必须描述keyString是调用key&#xff08;必须以GET方式拼接在URL中&…
阅读更多...
通过修改host文件来访问GitHub

通过修改host文件来访问GitHub

前言&#xff1a; 由于国内环境的原因&#xff0c;导致我们无法流畅的访问GitHub&#xff0c;。 但是我们可以采取修改host文件来实现流畅访问。 缺点&#xff1a;需要不定时的刷新修改。 操作流程 一、查询IP地址 以下地址可以查询ip地址 http://ip.tool.chinaz.com/ htt…
阅读更多...
pugixml使用

pugixml使用

pugixml 使用pugixml库需要三个文件:pugiconfig.hpp pugixml.cpp pugixml.hpp pugixml.hpp代码添加在最后。 全是代码 写入文件-使用实例&#xff1a; #include "../pugixml/pugixml.hpp"//2024.2.29 add 写入参数值到文件中 void MainFrame::SaveBrg(CString Path) …
阅读更多...
C++从零开始的打怪升级之路(day40)

C++从零开始的打怪升级之路(day40)

这是关于一个普通双非本科大一学生的C的学习记录贴 在此前&#xff0c;我学了一点点C语言还有简单的数据结构&#xff0c;如果有小伙伴想和我一起学习的&#xff0c;可以私信我交流分享学习资料 那么开启正题 今天分享的是关于继承的知识点 1.继承的概念及定义 1.1继承的概…
阅读更多...
JDK时间

JDK时间

Date 全世界的时间&#xff0c;有一个统一的计算标准。 世界标准时间&#xff1a;格林尼治时间/格林威治时间简称GMT&#xff0c;目前时间标准时间已经替换为&#xff1a;原子钟。 中国标准时间&#xff1a;世界时间8 时间换算单位&#xff1a; 一秒等于一千毫秒 一毫秒等于一…
阅读更多...
CDC作业历史记录无法删除问题

CDC作业历史记录无法删除问题

背景 数据库开启CDC功能后&#xff0c;每天会生成大量的历史记录&#xff0c;即使达到参数“每个作业的最大历史记录“的阈值后也不会被删除&#xff0c;导致其它作业的历史记录被删除&#xff0c;无法查看以前的执行情况&#xff0c;非常不方便。 现象 数据库开启CDC后会创建…
阅读更多...
【MATLAB源码-第147期】基于matlab的QPSK调制解调在AWGN信道，瑞利信道，莱斯信道理论与实际误码率对比仿真。

【MATLAB源码-第147期】基于matlab的QPSK调制解调在AWGN信道，瑞利信道，莱斯信道理论与实际误码率对比仿真。

操作环境&#xff1a; MATLAB 2022a 1、算法描述 四相位移键控&#xff08;QPSK&#xff0c;Quadrature Phase Shift Keying&#xff09;是一种重要的数字调制技术&#xff0c;它通过改变信号的相位来传输数据。与其他调制技术相比&#xff0c;QPSK在相同的带宽条件下能够传…
阅读更多...
Linux命名管道

Linux命名管道

Linux匿名管道-CSDN博客 目录 1.原理 2.接口实现 3.模拟日志 Linux匿名管道-CSDN博客 这上面叫的是匿名管道&#xff0c;不要将两者搞混&#xff0c;匿名管道说的是两个有血缘关系的进程相互通信&#xff0c;但是命名管道就是两个没有关系的管道相互通信。 1.原理 和匿名…
阅读更多...
高斯扩散过程

高斯扩散过程

高斯扩散过程是一种数学模型&#xff0c;用于描述某些随机现象的时间演化&#xff0c;其中这些现象的概率密度函数&#xff08;PDF&#xff09;符合高斯分布&#xff0c;也称为正态分布。在物理和工程学领域&#xff0c;此类过程通常被用来描述热扩散、粒子扩散、概率密度演变等…
阅读更多...
springboot/ssm公司资产网站Java企业资产统计管理系统web

springboot/ssm公司资产网站Java企业资产统计管理系统web

springboot/ssm公司资产网站Java企业资产统计管理系统web 基于springboot(可改ssm)vue项目 开发语言&#xff1a;Java 框架&#xff1a;springboot/可改ssm vue JDK版本&#xff1a;JDK1.8&#xff08;或11&#xff09; 服务器&#xff1a;tomcat 数据库&#xff1a;mysq…
阅读更多...
蓝桥杯刷题--python-16

蓝桥杯刷题--python-16

562. 壁画 - AcWing题库 T=int(input()) j=1 while(j<=T): N = int(input()) a=input() s = [0]*(N+1) # 求前戳和 for i in range(1, N + 1): s[i] = int(a[i-1]) + s[i - 1] # 枚举 # 区间 max_ = float(-inf) k = (N + 2 - …
阅读更多...
编译链接实战（25）ThreadSanitizer检测线程安全

编译链接实战（25）ThreadSanitizer检测线程安全

ThreadSanitizer&#xff08;又称为TSan&#xff09;是一个用于C/C的数据竞争检测器。在并发系统中&#xff0c;数据竞争是最常见且最难调试的错误类型之一。当两个线程并发访问同一个变量&#xff0c;并且至少有一个访问是写操作时&#xff0c;就会发生数据竞争。C11标准正式将…
阅读更多...
【电路笔记】--RC网络-RC微分器

【电路笔记】--RC网络-RC微分器

RC微分器 文章目录 RC微分器1、概述2、RC微分器电路3、单脉冲 RC 微分器4、RC 微分器示例5、总结无源 RC 微分器是一个串联 RC 网络，可产生与微分数学过程相对应的输出信号。 1、概述 无源 RC 微分器只不过是与电阻串联的电容，这是一种与频率相关的器件，其电抗与固定电阻串…
阅读更多...
前端实现浏览器打印

前端实现浏览器打印

浏览器的print方法直接调用会打印当前页面的所有元素&#xff0c;使用iframe可以实现局部打印所需要的模块。 组件printView&#xff0c;将传入的信息放入iframe中&#xff0c;调用浏览器的打印功能 <template><div class"print"><iframeid"if…
阅读更多...
马斯克指控OpenAI违背成立协议，要求恢复开源；Automattic否认向AI公司出售用户数据

马斯克指控OpenAI违背成立协议，要求恢复开源；Automattic否认向AI公司出售用户数据

&#x1f989; AI新闻 &#x1f680; 马斯克指控OpenAI违背成立协议&#xff0c;要求恢复开源 摘要&#xff1a;马斯克近日在旧金山高等法院对OpenAI及其CEO阿尔特曼提起诉讼&#xff0c;指控他们违反最初促进AI技术造福人类非营利方向的成立协议。马斯克声称&#xff0c;Ope…
阅读更多...
Linux命令-clear命令（清除当前屏幕终端上的任何信息）

Linux命令-clear命令（清除当前屏幕终端上的任何信息）

说明 clear命令 用于清除当前屏幕终端上的任何信息。 语法 clear示例 直接输入clear命令当前终端上的任何信息就可被清除。
阅读更多...
【JavaSE】时间类相关API以及使用

【JavaSE】时间类相关API以及使用

目录 时间类相关API 1.Date类 2.SimpleDateFormat类 3.Calendar类 4.JDK8-时区&#xff0c;时间和格式化 5.JDK8-日历和工具类 时间类相关API 以下内容是通过观看黑马java的常见API视频总结加笔记&#xff0c;其中有JDK7以及以前的时间类&#xff0c;包括&#xff1a;Date&…
阅读更多...
我在代码随想录|写代码Day30 | 贪心算法 | 435. 无重叠区间,763.划分字母区间, 56. 合并区间, 738.单调递增的数字

我在代码随想录|写代码Day30 | 贪心算法 | 435. 无重叠区间,763.划分字母区间, 56. 合并区间, 738.单调递增的数字

&#x1f525;博客介绍&#xff1a; 27dCnc &#x1f3a5;系列专栏&#xff1a; <<数据结构与算法>> << 算法入门>> << C项目>> &#x1f3a5; 当前专栏: <<数据结构与算法>> 专题 : 数据结构帮助小白快速入门算法 &…
阅读更多...
[HackMyVM]靶场 VivifyTech

[HackMyVM]靶场 VivifyTech

kali:192.168.56.104 主机发现 arp-scan -l # arp-scan -l Interface: eth0, type: EN10MB, MAC: 00:0c:29:d2:e0:49, IPv4: 192.168.56.104 Starting arp-scan 1.10.0 with 256 hosts (https://github.com/royhills/arp-scan) 192.168.56.1 0a:00:27:00:00:05 (Unk…
阅读更多...
matlab阶段学习小节1

matlab阶段学习小节1

数组排序 fliplr()实现数组倒序&#xff0c;但不对大小进行排序&#xff0c;只是元素位置掉头。 要想实现大小倒序排列&#xff0c;可以先sort()实现正序排列&#xff0c;再用fliplr倒一下 %数组运算 %矩阵 %xAb的解xb/A;(矩阵) %右除运算A/B&#xff0c;左矩阵为被除数&a…
阅读更多...
最新文章

Copyright @ 2022~2023