获取当前数据 上下移动

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

 

 代码

// 出国境管理  登记备案人员列表
<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.rhkb.cn/news/268174.html

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

相关文章

sql 注入 之sqli-labs/less-6 双注入，双引号报错注入

sql 注入 之sqli-labs/less-6 双注入，双引号报错注入

和第五关类似&#xff0c;只不过闭合符号是双引号 1&#xff0c;查数据库 1"and%20(updatexml(1,concat(0x7e,(select%20database()),0x7e),1))%20-- 2.查表 内容有多行&#xff0c;所以使用limit依次查询 1"and%20(updatexml(1,concat(0x7e,(select%20table_nam…
阅读更多...
【Linux系统化学习】线程概念

【Linux系统化学习】线程概念

目录 线程的概念 线程的引出 什么是线程 理解线程比进程更加的轻量化 线程的优点 现成的缺点 线程异常 线程用途 Linux进程VS线程 线程的简单现象 线程的概念 有关操作系统的书籍或者课本都会这样描述线程&#xff1a; 线程是比进程轻量化的一种执行流线程是进程内部…
阅读更多...
利用小蜜蜂AI智能问答ChatGPT+AI高清绘图生成图文故事案例

利用小蜜蜂AI智能问答ChatGPT+AI高清绘图生成图文故事案例

利用小蜜蜂AI智能问答ChatGPTAI高清绘图生成图文故事案例 这段时间利用小蜜蜂AI网站做了一些编程、绘图以及数据分析方面的案例。再过几个月&#xff0c;我的大孙子就要出生了。我要用小蜜蜂AI智能问答和AI高清绘图为大孙子生成一个1-9的数字图文故事。 小蜜蜂AI网站可以扫如…
阅读更多...
前端打包部署(黑马学习笔记)

前端打包部署(黑马学习笔记)

我们的前端工程开发好了&#xff0c;但是我们需要发布&#xff0c;那么如何发布呢&#xff1f;主要分为2步&#xff1a; 1.前端工程打包 2.通过nginx服务器发布前端工程 前端工程打包 接下来我们先来对前端工程进行打包 我们直接通过VS Code的NPM脚本中提供的build按钮来完…
阅读更多...
【HTML5】浏览器不能显示字体报错Failed to decode downloaded font问题解决

【HTML5】浏览器不能显示字体报错Failed to decode downloaded font问题解决

把网上的项目中字体通过链接保存下来在本地上使用&#xff0c;在本地服务器上运行站点发现&#xff0c;用Chrome浏览器访问的时候&#xff0c;出现错误提示不能正常显示字体&#xff0c;怎么解决呢&#xff0c;看看怎么搞。 文章目录 发现问题提示警告提示错误 字体检查打开文件…
阅读更多...
Redisson限流算法

Redisson限流算法

引入依赖 <dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-starter</artifactId><version>3.12.3</version> </dependency>建议版本使用3.15.5以上 使用 这边写了一个demo示例&#xff0c;定…
阅读更多...
C++ //练习 10.7 下面的程序是否有错误？如果有，请改正。

C++ //练习 10.7 下面的程序是否有错误？如果有，请改正。

C Primer&#xff08;第5版&#xff09; 练习 10.7 练习 10.7 下面的程序是否有错误&#xff1f;如果有&#xff0c;请改正。 (a) vector<int>vec; list<int> lst; int i;while(cin>>i)lst.push_back(i);copy(lst.cbegin(), lst.cend(), vec.begin());(b) …
阅读更多...
Unity（第二十二部）官方的反向动力学一般使用商城的IK插件，这个用的不多

Unity（第二十二部）官方的反向动力学一般使用商城的IK插件，这个用的不多

反向动力学&#xff08;Inverse Kinematic&#xff0c;简称IK&#xff09;是一种通过子节点带动父节点运动的方法。 正向动力学 在骨骼动画中&#xff0c;大多数动画是通过将骨架中的关节角度旋转到预定值来生成的&#xff0c;子关节的位置根据父关节的旋转而改变&#xff0c;这…
阅读更多...
苍穹外卖学习 Day10 Day11 Day12

苍穹外卖学习 Day10 Day11 Day12

前言 用于记录苍穹外卖Day10、Day11、Day12的学习 Day10 订单状态定时处理 来电提醒 客户催单 订单状态定时处理 Spring Task Spring Task是一个任务调度工具&#xff0c;可以按照约定的时间自动执行某个代码逻辑&#xff08;定时自动执行某段Java代码&#xff09; cron表…
阅读更多...
ElasticSearch之suggester API

ElasticSearch之suggester API

写在前面 当我们在使用搜索引擎进行的查询到时候&#xff0c;如果是输入错误的话&#xff0c;搜索引擎会给出一些搜索建议&#xff0c;如下&#xff1a; 在es中也提供了类似的功能&#xff0c;叫做suggester API。 1&#xff1a;原理和种类 原理是将查询的信息分为很多个词…
阅读更多...
Python并发编程：多线程-信号量，Event，定时器

Python并发编程：多线程-信号量，Event，定时器

一 信号量 信号量也是一把锁&#xff0c;可以指定信号量为5&#xff0c;对比互斥锁同一时间只能有一个任务抢到锁去执行&#xff0c;信号量同一时间可以有5个任务拿到锁去执行&#xff0c;如果说互斥锁是合租房屋的人去抢一个厕所&#xff0c;那么信号量就相当于一群路人争抢公…
阅读更多...
基于springboot+vue的在线考试系统（源码+论文）

基于springboot+vue的在线考试系统（源码+论文）

文章目录 目录 文章目录 前言 一、功能设计 二、功能页面 三、论文 前言 现在我国关于在线考试系统的发展以及专注于对无纸化考试的完善程度普遍不高&#xff0c;关于对考试的模式还大部分还停留在纸介质使用的基础上&#xff0c;这种教学模式已不能解决现在的时代所产生的考试…
阅读更多...
前端【技术类】资源学习网站整理（那些年的小网站）

前端【技术类】资源学习网站整理（那些年的小网站）

学习网站整理 值得分享的视频博主&#xff1a;学习网站链接 百度首页的资源收藏里的截图&#xff08;排列顺序没有任何意义&#xff0c;随性而已~&#xff09;&#xff0c;可根据我标注的关键词百度搜索到这些网站呀&#xff0c;本篇末尾会一一列出来&#xff0c;供大家学习呀 …
阅读更多...
3.3日学习打卡----初学Redis（一）

3.3日学习打卡----初学Redis（一）

3.3日学习打卡 目录&#xff1a; 3.3日学习打卡NoSQL为什么要用NoSQL什么是NoSQL?NoSQL的四大分类关系型数据库和非关系型数据及其区别NoSQL经典应用 RedisRedis是什么?Linux下安装RedisDocker下安装Redis基本知识 NoSQL 为什么要用NoSQL 单机Mysql的美好年代 在90年代&…
阅读更多...
探讨苹果 Vision Pro 的 AI 数字人形象问题

探讨苹果 Vision Pro 的 AI 数字人形象问题

Personas 的设计模糊性&#xff1a; 部分人认为这种模糊设计可能是出于安全考虑&#x1f6e1;️。安全角度&#xff1a;Personas 代表着你的 AI 数字形象&#xff0c;在创建时&#xff0c;它相当于你的 AVP&#xff08;生物识别扫描器的存在增加了冒充的难度&#xff09;。如果…
阅读更多...
力扣1892 页面推荐Ⅱ

力扣1892 页面推荐Ⅱ

力扣1892&#xff0c;页面推荐Ⅱ&#xff0c;为一个社交媒体网站实施一个页面推荐系统。如果页面被user_id的 至少一个朋友喜欢 &#xff0c;而 不被user_id喜欢 &#xff0c;你的系统将 推荐 一个页面到user_id。 目录 题目描述 解题思路 完整代码 优化 题目描述 表&…
阅读更多...
python笔记_程序流程控制

python笔记_程序流程控制

A&#xff0c;顺序控制 程序从上到下逐行执行 python定义变量时&#xff0c;会合法地向前引用 age 1 age2 age 1 age2 age 1 age 1 ——>错误&#xff0c;age应在age2之前 B&#xff0c;分支控制 1&#xff0c;单分支if 语法 if 条件表达式 &#xff1a; 代码块 说明…
阅读更多...
雾锁王国服务器配置怎么选择？阿里云和腾讯云

雾锁王国服务器配置怎么选择？阿里云和腾讯云

雾锁王国/Enshrouded服务器CPU内存配置如何选择&#xff1f;阿里云服务器网aliyunfuwuqi.com建议选择8核32G配置&#xff0c;支持4人玩家畅玩&#xff0c;自带10M公网带宽&#xff0c;1个月90元&#xff0c;3个月271元&#xff0c;幻兽帕鲁服务器申请页面 https://t.aliyun.com…
阅读更多...
Unity UGUI之Scrollbar基本了解

Unity UGUI之Scrollbar基本了解

Unity的Scrollbar组件是用于在UI中创建滚动条的组件之一。滚动条通常与其他可滚动的UI元素&#xff08;如滚动视图或列表&#xff09;一起使用&#xff0c;以便用户可以在内容超出可见区域时滚动内容。 以下是Scrollbar的基本信息和用法: 1、创建 在Unity的Hierarchy视图中右…
阅读更多...
Springboot+vue的考勤管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

Springboot+vue的考勤管理系统（有报告）。Javaee项目，springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的考勤管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 采用M&#xff08;model&#xff09;V&#xff08;view&#xff09;C&#xff08;controller&#xff09;三层…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023