el-form el-table 前端排序+校验+行编辑

一、页面 

<template><div class="bg" v-if="formData.mouldData?.length == 0">当前暂无模板,点击<view class="add" @click="addMould">立即创建</view></div><div v-else><el-col :xs="24"><ContentWrap><el-form class="-mb-15px" :inline="true" label-width="68px"><el-form-item label="版本" prop="defKey"><el-select v-model="versionType" @change="handleSelectChange" style="width: 120px"><el-optionv-for="version in versionArray":key="version.versionNumber":label="version.state == 1? 'V' + version.versionNumber + '.0(启用)': 'V' + version.versionNumber + '.0'":value="version.versionNumber"/></el-select></el-form-item>
<!--          {{versionType}}--><el-form-item><el-buttontype="primary"plainv-if="showUpgradeMouldButton"@click="upgradeMould(versionType)">升级</el-button></el-form-item></el-form></ContentWrap></el-col><el-col style="margin-bottom: 1vh" v-if="viewStats == '编辑'"><el-button type="primary" plain @click="handleAddClick">新增</el-button><el-button type="primary" plain @click="upRow"> ↑</el-button><el-button type="primary" plain @click="downOrder"> ↓</el-button></el-col><ContentWrap><el-form ref="formRef" :model="formData" :rules="formRules" :inline-message="true"><el-table:data="formData.mouldData"borderstripehighlight-current-row:row-class-name="tableRowClassName":cell-style="{ 'text-align': 'center' }"@row-click="handleRowClick":header-cell-style="{background: '#b7babd',color: '#1e1f22',height: '35px','text-align': 'center'}"style="width: 100%;max-height:45vh;overflow-y: auto"max-height="600"><el-table-column label="序号" label-width="100px" type="index" /><el-table-column label="等级名称"><template #header>等级名称</template><template #default="scope"><el-form-itemsize="small":prop="'mouldData.[' + scope.$index + '].evaluationProject'":rules="formRules.evaluationProject"style="margin-top: 15px"v-show="scope.row.show"><el-input v-model="scope.row.evaluationProject" size="large" @input="handleInput(scope.row)"/></el-form-item><span v-show="!scope.row.show">{{ scope.row.evaluationProject }}</span></template></el-table-column><el-table-column label="操作" width="150px" v-if="viewStats == '编辑'"><template #default="scope"><el-buttonv-if="scope.row.rowState == 0"linktype="primary"@click="handleOpenFormClick(scope.$index, scope.row, '保存')">确认</el-button><el-buttonv-if="scope.row.rowState == 0"linktype="primary"@click="handleOpenFormClick(scope.$index, scope.row, '取消')">取消</el-button><el-buttonv-if="scope.row.rowState != 0"type="primary"link@click="handleOpenFormClick(scope.$index, scope.row, '编辑')">编辑</el-button><el-buttonv-if="scope.row.rowState != 0"linktype="primary"@click="handleOpenFormClick(scope.$index, scope.row, '删除')">删除</el-button></template></el-table-column></el-table></el-form></ContentWrap></div><div class="footer" v-if="viewStats == '编辑'"><el-button type="primary" @click="handleCancle">取消</el-button><el-button @click="saveData">保存</el-button><el-button @click="saveDataRelease">保存并发布</el-button></div>
</template>

二、js

<script setup lang="ts">
import * as templateAPi from '@/api/.......'
import {reactive, ref} from "vue";const formData = ref({ mouldData: [] }) // 模板数据
const versionArray = ref([]) // 版本数据
const versionType = ref('') // 选中的版本号
const versionState = ref('') // 选中的版本号的状态
const viewStats = ref('')
const rowIndex = ref(0) // 选中的行
const message = useMessage() // 消息弹窗
const showUpgradeMouldButton = ref(false) // 是否显示升级模板按钮
const isFirst = ref(false) // 是否第一次进入
const formRef = ref()
const init = async () => {formData.value.mouldData = []versionArray.value = []let versionList = await templateAPi.getVersionList()versionArray.value = versionListlet data = await templateAPi.getTemplateList(versionType.value)if (data) {formData.value.mouldData = dataisFirst.value = false// const state = mouldData.value[0]['state']const state = formData.value.mouldData[0]?.stateswitch (state) {case '0':viewStats.value = '编辑'showUpgradeMouldButton.value = falsebreakcase '1':viewStats.value = '查看'showUpgradeMouldButton.value = true // 可升级breakcase '3':viewStats.value = '查看'showUpgradeMouldButton.value = falsebreakdefault:viewStats.value = '查看'showUpgradeMouldButton.value = falsebreak}}
}const formRules = reactive({evaluationProject: [{ required: true, message: '等级名称不能为空', trigger: ['blur']}],
})onMounted(async () => {versionArray.value = []let versionList = await templateAPi.getVersionList()versionArray.value = versionListversionType.value = versionArray.value[0]['versionNumber']await init()
})const getVersonList = async () => {versionArray.value = []let versionList = await templateAPi.getVersionList()versionArray.value = versionList// 过滤出版本号最新的一个let maxObject = nulllet maxVersion = -InfinityversionList.forEach((obj) => {const versionNumber = parseInt(obj.versionNumber)if (obj.state == '1' && versionNumber > maxVersion) {maxVersion = versionNumbermaxObject = obj}})versionType.value = maxObject?.versionNumberversionState.value = maxObject?.state
}const handleSelectChange = (value) => {console.log('value', value)init()
}
const addMould = () => {isFirst.value = trueviewStats.value = '编辑'addNewEmptyRow()
}const upRow = () => {formData.value.mouldData.push({index: 0,// versionNumber: null,state: '0', // 0默认1生效3失效rowState: 0, // 0时显示确认、取消,1时显示编辑、删除show: true, // true为编辑状态,false为表格行状态versionNumber: versionType.value})
}
//降序
const downOrder = () => {console.log('row', rowIndex.value)if (rowIndex.value == formData.value.mouldData.length - 1) {message.warning('已经是最后一条了')return}let data = formData.value.mouldDatalet temp = formData.value.mouldData[rowIndex.value]data[rowIndex.value] = data[rowIndex.value + 1]data[rowIndex.value + 1] = temprowIndex.value = rowIndex.value + 1formData.value.mouldData = data
}
//升序
const handleAscendingOrder = () => {if (rowIndex.value === 0) {message.warning('已经是第一条了')return}console.log('row', rowIndex.value)let data = formData.value.mouldDatalet temp = formData.value.mouldData[rowIndex.value]data[rowIndex.value] = data[rowIndex.value - 1]data[rowIndex.value - 1] = temprowIndex.value = rowIndex.value - 1formData.value.mouldData = data
}
const tableRowClassName = ({ row, rowIndex }) => {row.index = rowIndex
}
const handleAddClick = () => {console.log('row', rowIndex.value)addNewEmptyRow()
}
const handleCancle = () => {viewStats.value = '查看'init()
}
const handleRowClick = (row) => {console.log('handleRowClick', row)rowIndex.value = row.index
}const handleInput = (row) => {row.evaluationProject = row.evaluationProject.replace(/\s+/g, '');
}const handleOpenFormClick = async (index, row, type) => {switch (type) {case '保存':const valid = await formRef.value?.validate()if (valid) {row.show = false // 点击确定后,该行变为不可编辑状态row.rowState = 1 // 操作列变为编辑、删除}break// 取消时,已保存过的数据恢复原样,未保存的数据直接清空case '取消':// 假设存在数据库里的数据有的唯一标识id,若该行无id,则表示数据库未曾保存过,点击取消前端直接删除该数据row.show = falserow.rowState = 1breakcase '编辑':console.log('当前是编辑操作', row)row.show = truerow.rowState = 0breakcase '删除':handleDelete(row.id, index)break}
}
const handleDelete = async (id,index) => {if (!id) {// 检查是否是最后一条数据if (formData.value.mouldData.length > 1){formData.value.mouldData.splice(index, 1); // 删除指定索引的数据} else {message.warning('不能删除最后一条数据');}}else {if (formData.value.mouldData.length > 1) {await crmCustomerSatisfactionTemplateAPi.deleteSatisfactionTemplate(id)message.success('删除成功')await init()}else {message.warning('不能删除最后一条数据');}}
}const saveFirst = async () => {let sendData =formData.value.mouldData as unknown as crmCustomerSatisfactionTemplateAPi.CrmCustomerSatisfactionTemplateVOawait crmCustomerSatisfactionTemplateAPi.addTemplateList(sendData)console.log('sendData', sendData)message.success('保存成功')versionArray.value = []let versionList = await crmCustomerSatisfactionTemplateAPi.getVersionList()versionArray.value = versionListversionType.value = versionArray.value[0]['versionNumber']await init()}
const saveData = async () => {const valid = await formRef.value.validate()if (valid) {if (isFirst.value) {await saveFirst()} else {let sendData =formData.value.mouldData as unknown as                     templateAPi.CrmCustomerSatisfactionTemplateVOlet resposeData = await templateAPi.saveTemplateList(sendData)versionType.value = resposeData[0]['versionNumber']console.log('sendData', sendData)message.success('保存成功')// await getVersonList()await init()}}
}const saveDataRelease = async () => {const valid = await formRef.value.validate()if (!valid) returnawait message.delConfirm('发布后不允许修改,但可以升级!')for (let i = 0; i <  formData.value.mouldData.length; i++) {// 更改为1生效formData.value.mouldData[i]['state'] = '1'}if (isFirst.value) {await saveFirst()} else {let sendData =formData.value.mouldData as unknown as             templateAPi.CrmCustomerSatisfactionTemplateVOawait templateAPi.saveTemplateList(sendData)message.success('保存成功')await getVersonList()await init()}
}
const upgradeMould = async () => {/* // todo 获取最大版本的数据 状态为0 不允许升级let data = await templateAPi.getNewVersion('')if (data[0]['state'] == '0') {message.warning('最新版本尚未发布 请发布!')return}*/// await templateAPi.upgrade()// message.success('升级成功')// versionType.value = ''//await init()viewStats.value = '编辑'for (let i = 0; i <  formData.value.mouldData.length; i++) {formData.value.mouldData[i]['upgrade'] = '是'formData.value.mouldData[i]['id'] = ''formData.value.mouldData[i]['state'] = '0'}
}
</script>

三、CSS

<style scoped>
.bg {display: flex;justify-content: center;margin-top: 30%;
}.add {color: #2d8cf0;
}.top {display: flex;align-items: center;justify-content: space-around;width: 270px;margin-bottom: 10px;
}
.error {color: red;
}
</style>

 四、页面效果

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

ERA5下载数据-U850

ERA5更新后&#xff1a; 1. 升级新的cdsapirc Catalogue — 气候数据存储 --- Catalogue — Climate Data Store (copernicus.eu) ERA5下载数据页面&#xff0c;选择&#xff08;不是这个…………&#xff09; 是这个&#xff1a; ERA5 hourly data on pressure levels from…

分享 pdf 转 word 的免费平台

背景 找了很多 pdf 转 word 的平台都骗进去要会员&#xff0c;终于找到一个真正免费的&#xff0c;遂分享。 网址 PDF转Word转换器 - 100%免费市面上最优质的PDF转Word转换器 - 免费且易于使用。无附加水印 - 快速将PDF转成Word。https://smallpdf.com/cn/pdf-to-word

【Java入门 - 分支结构】第2关:if语句测试题

Java 中的 if 语句&#xff1a;灵活控制程序流程的利器 在 Java 编程中&#xff0c;if语句是一种基本但极其重要的控制结构&#xff0c;它允许我们根据特定的条件来决定程序的执行路径。本文将深入探讨 Java 中的if语句&#xff0c;介绍其语法、用法和一些常见的应用场景。 一…

iOS 18.1,未公开的新功能

童锦程祖师爷曾说过&#xff1a;“发誓可以&#xff0c;发朋友圈不行。”表面上看是渣男语录&#xff0c;实际上也说明了人们对隐私的看重。 在当今生活中&#xff0c;智能手机可能是最私密的电子产品&#xff0c;没有之一。不管是照片、联系人、短信、APP数据&#xff0c;甚至…

06.VSCODE:备战大项目,CMake专项配置

娇小灵活的简捷配置不过是年轻人谈情说爱的玩具&#xff0c;帝国大厦的构建&#xff0c;终归要交给CMake去母仪天下。一个没有使用 CMake 的 C 项目&#xff0c;就像未来世界里的一台相声表演&#xff0c;有了德纲却无谦&#xff0c;观众笑着遗憾。—— 语出《双城记》作者&…

基于 CentOS7.6 的 Docker 下载常用的容器(MySQLRedisMongoDB),解决拉取容器镜像失败问题

安装MySQL&Redis&MongoDB mysql选择是8版本&#xff0c;redis是选择4版本、mongoDB选择最新版&#xff0c;也可以根据自己的需要进行下载对应的版本&#xff0c;无非就是容器名:版本号 这样去拉去相关的容器镜像。如果你还不会在服务器中安装 docker&#xff0c;可以查…

Sping全面复习

Spring框架是一个功能强大且广泛使用的Java平台&#xff0c;它通过提供全面的基础设施支持&#xff0c;使得开发人员能够轻松构建高效、可移植、易于测试的代码。Spring的核心特性包括依赖注入&#xff08;DI&#xff09;、面向切面编程&#xff08;AOP&#xff09;和事件驱动模…

【Linux学习】【Ubuntu入门】1-3 ubuntu连接USB设备

1.打开VMware&#xff0c;打开新建的虚拟机&#xff0c;插入U盘&#xff0c;可在弹出对话框进行选择USB连接到主机或连接到虚拟机。&#xff08;长时间未操作默认连接主机&#xff09; 2.若USB在连接主机的情况下&#xff0c;可通过右键点击右下角进行连接到虚拟机。 3.若已连接…

炼码LintCode--数据库--基础语法--刷题笔记_01

目录 炼码LintCode数据库入门级别的笔记未完待续~~~ 炼码LintCode 数据库 入门级别的笔记 笔记如下&#xff0c;把所有涉及到的入门级别的知识点简单总结了一下。 以及一点点举一反三的写法。 增 INSERT INTO 表名 (列1, 列2, ...) VALUES (值1, 值2, ...);批量增 INSERT INT…

docker:docker: Get https://registry-1.docker.io/v2/: net/http: request canceled

无数次的拉镜像让人崩溃&#xff1a; rootnode11:~/ragflow/docker# more rag.sh #export HTTP_PROXYhttp://192.168.207.127:7890 #export HTTPS_PROXYhttp://192.168.207.127:7890 #export NO_PROXYlocalhost,127.0.0.1,.aliyun.com docker compose -f docker-compose-gpu-C…

Flutter:使用Future发送网络请求

pubspec.yaml配置http的SDK cupertino_icons: ^1.0.8 http: ^1.2.2请求数据的格式转换 // Map 转 json final chat {name: 张三,message: 吃饭了吗, }; final chatJson json.encode(chat); print(chatJson);// json转Map final newChat json.decode(chatJson); print(newCha…

llama-cpp模型轻量化部署与量化

一、定义 定义配置环境遇到的问题&#xff0c;交互模式下模型一直输出&#xff0c;不会停止模型量化Qwen1.5-7B 案例demo 二、实现 定义 主要应用与cpu 上的部署框架。由c完成。配置环境 https://github.com/ggerganov/llama.cpp https://github.com/echonoshy/cgft-llm/blo…

阅读《当代反无人机系统技术综述》笔记

目录 文献基本信息 序言 一、关键技术 1.1射频(RF)分析仪 1.2雷达 1.3视觉传感器和图像处理 1.4声学传感器 二、发展趋势 文献基本信息 题名&#xff1a;当代反无人机系统技术综述 作者&#xff1a;蒋罗婷 来源&#xff1a;电子质量 发表时间&#xff1a;2023-02-2…

【Lucene】倒排表和词典:提升搜索效率的关键数据结构

倒排表和词典&#xff1a;提升搜索效率的关键数据结构 倒排表&#xff08;Inverted Index&#xff09;和词典&#xff08;Term Dictionary&#xff09;是 Lucene 中用于加速搜索的关键数据结构&#xff0c;它们帮助系统在庞大的文档集合中快速定位包含特定关键词的文档。以下是…

RN开发遇到的坑

1 、 RN 启动崩溃 https://blog.csdn.net/qq_31915745/article/details/108125671 2、修改报红⻚ https://blog.csdn.net/weixin_43969056/article/details/104757926 3 、编译不过去提示 glog-0.3.5 有问题&#xff0c; 找到 / 项⽬ /node_modules/react-native/scripts/ io…

基于Multisim信号波形发生器电路正弦波方波三角波锯齿波(含仿真和报告)

【全套资料.zip】正弦方波三角波锯齿波方波占空比可调频率可调电路Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.设计一个能够产生多个信号输出的信号发生器&#xff0c; 要求输出波形…

GC9A01驱动移植(HALL库)

最近在做LVGL的移植&#xff0c;用到的屏幕驱动时GC9A01的&#xff0c;记录一下学习历程&#xff0c;防止日后遗忘。 这款屏幕我使用的是SPI协议&#xff0c;参考了部分稚辉菌大佬这个项目的程序&#xff1a; 【自制】我做了个能动的迷你电脑配件&#xff01;【软核】_哔哩哔…

PCIe板卡标准尺寸

一、板卡尺寸说明 两种PCIe外接卡的高度&#xff0c;即全高&#xff08;Standard height&#xff09;111.15 mm (4.376 inches)和半高&#xff08;half height&#xff09;68.90 mm (2.731 inches)&#xff1b; 两种PCIe外接卡的长度&#xff1a;全长&#xff08;full length&a…

docker 阿里云镜像加速

在阿里云首页点击产品-容器-容器镜像服务ACR 无需购买&#xff0c;直接进去控制台创建个人版 完成后点击镜像加速器 选择对应的系统&#xff0c;按照操作文档完成

KPaaS洞察|异构系统中用户角色与权限分类及管理解决方案

多个异构系统的使用已经成为企业常态。每个系统通常有自己独立的用户角色和权限设置&#xff0c;导致权限管理复杂且容易出现冲突。如何在多个异构系统中统一、有效地进行用户角色和权限管理&#xff0c;已成为企业保障数据安全和提升管理效率的关键挑战。通过集中式权限管理平…