获取当前数据 上下移动

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

 

 代码

// 出国境管理  登记备案人员列表
<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…
阅读更多...
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.原理 和匿名…
阅读更多...
编译链接实战（25）ThreadSanitizer检测线程安全

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

ThreadSanitizer&#xff08;又称为TSan&#xff09;是一个用于C/C的数据竞争检测器。在并发系统中&#xff0c;数据竞争是最常见且最难调试的错误类型之一。当两个线程并发访问同一个变量&#xff0c;并且至少有一个访问是写操作时&#xff0c;就会发生数据竞争。C11标准正式将…
阅读更多...
马斯克指控OpenAI违背成立协议，要求恢复开源；Automattic否认向AI公司出售用户数据

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

&#x1f989; AI新闻 &#x1f680; 马斯克指控OpenAI违背成立协议&#xff0c;要求恢复开源 摘要&#xff1a;马斯克近日在旧金山高等法院对OpenAI及其CEO阿尔特曼提起诉讼&#xff0c;指控他们违反最初促进AI技术造福人类非营利方向的成立协议。马斯克声称&#xff0c;Ope…
阅读更多...
【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…
阅读更多...
多态——细致讲解

多态——细致讲解

&#x1f536;多态基础概念  &#x1f536;概念   &#x1f531;多态性   &#x1f531;多态——重新(覆盖)  &#x1f536;示例   &#x1f536;基本使用方法   &#x1f536;特例    &#x1f531;协变    &#x1f531;析构函数重写  &#x1f531;多态原理…
阅读更多...
redis实战笔记汇总

redis实战笔记汇总

文章目录 1 NoSQL入门概述1.1 能干嘛&#xff1f;1.2 传统RDBMS VS NOSQL1.3 NoSQL数据库的四大分类1.4 分布式数据库CAP原理 BASE原则1.5 分布式集群简介1.6 淘宝商品信息的存储方案 2 Redis入门概述2.1 是什么&#xff1f;2.2 能干嘛&#xff1f;2.3 怎么玩&#xff1f;核心…
阅读更多...
46、WEB攻防——通用漏洞PHP反序列化原生类漏洞绕过公私有属性

46、WEB攻防——通用漏洞PHP反序列化原生类漏洞绕过公私有属性

文章目录 几种常用的魔术方法1、__destruct()2、__tostring()3、__call()4、__get()5、__set()6、__sleep()7、__wakeup()8、__isset()9、__unset()9、__invoke() 三种变量属性极客2019 PHPphp原生类 几种常用的魔术方法 1、__destruct() 当删除一个对象或对象操作终止时被调…
阅读更多...
像用Excel一样用Python：pandasGUI

像用Excel一样用Python：pandasGUI

文章目录 启动数据导入绘图 启动 众所周知&#xff0c;pandas是Python中著名的数据挖掘模块&#xff0c;以处理表格数据著称&#xff0c;并且具备一定的可视化能力。而pandasGUI则为pandas打造了一个友好的交互窗口&#xff0c;有了这个&#xff0c;就可以像使用Excel一样使用…
阅读更多...
【Spring Boot 3】的安全防线：整合 【Spring Security 6】

【Spring Boot 3】的安全防线：整合 【Spring Security 6】

简介 Spring Security 是 Spring 家族中的一个安全管理框架。相比与另外一个安全框架Shiro&#xff0c;它提供了更丰富的功能&#xff0c;社区资源也比Shiro丰富。 一般来说中大型的项目都是使用SpringSecurity 来做安全框架。小项目有Shiro的比较多&#xff0c;因为相比与Sp…
阅读更多...
Linux线程【互斥与同步】

Linux线程【互斥与同步】

目录 1.资源共享问题 1.1多线程并发访问 1.2临界区和临界资源 1.3互斥锁 2.多线程抢票 2.1并发抢票 2.2 引发问题 3.线程互斥 3.1互斥锁相关操作 3.1.1互斥锁创建与销毁 3.1.2、加锁操作 3.1.3 解锁操作 3.2.解决抢票问题 3.2.1互斥锁细节 3.3互斥…
阅读更多...
github用法详解

github用法详解

本文是一篇面向全体小白的文章，图文兼备。为了让小白们知道如何使用GitHub，我努力将本文写得通俗易懂，尽量让刚刚上网的小白也能明白。所以各位程序员们都可以滑走了～ 啥是GitHub？ 百度百科会告诉你， GitHub是一个面向开源及私有软件项目的托管平台，因为只支持Git作为…
阅读更多...
Topaz Gigapixel AI：让每一张照片都焕发新生mac/win版

Topaz Gigapixel AI：让每一张照片都焕发新生mac/win版

Topaz Gigapixel AI 是一款革命性的图像增强软件&#xff0c;它利用先进的人工智能技术&#xff0c;能够显著提升图像的分辨率和质量。无论是摄影爱好者还是专业摄影师&#xff0c;这款软件都能帮助他们将模糊的、低分辨率的照片转化为清晰、细腻的高分辨率图像。 Topaz Gigap…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023