群控系统服务端开发模式-应用开发-前端图片格式功能开发

一、添加视图

        在根目录下src文件夹下views文件夹下param文件夹下grade文件夹下,新建index.vue,代码如下

<template><div class="app-container"><div class="filter-container" style="float:left;"><el-form :inline="true" :model="searchParams" class="demo-form-inline"><el-form-item><el-input v-model="searchParams.id" style="width: 160px;" placeholder="请输入ID" clearable /></el-form-item><el-form-item><el-input v-model="searchParams.title" style="width: 180px;" placeholder="请输入格式名称" clearable /></el-form-item><el-form-item><el-button class="search-btn el-button--infoSearch" type="primary" @click="search()">搜索</el-button><el-button class="search-btn el-button--infoSearch" style="background:#F2F6FC;" @click="clearSearch">重置</el-button></el-form-item></el-form></div><div class="filter-container" style="float:right;"><el-button v-if="$store.getters.butts.includes('ParamImageIndexAdd')" class="filter-item" style="margin-left: 10px;" type="primary" @click="handleAdd">添加</el-button><el-button class="filter-item" style="margin-left: 10px;" @click="search(currentPage)">刷新</el-button><el-button v-if="$store.getters.butts.includes('ParamImageIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(1)" type="success">启用</el-button><el-button v-if="$store.getters.butts.includes('ParamImageIndexTostatus')" class="filter-item" style="margin-left: 10px;" @click="handleStatus(0)" type="warning">禁用</el-button><el-button v-if="$store.getters.butts.includes('ParamImageIndexDelete')" class="filter-item" @click="handleDelete" type="danger">删除</el-button></div><el-tableref="resTable"v-loading="listLoading":data="list"row-key="id"highlight-current-rowmax-height="750"default-expand-allstyle="width: 100%;margin-top:10px;"border:default-sort="{prop: 'id', order: 'descending'}"><el-table-column type="selection" width="50" align="center" /><el-table-column align="center" label="ID" sortable prop="id"><template slot-scope="{row}"><span>{{ row.id }}</span></template></el-table-column><el-table-column align="center" label="格式名称"><template slot-scope="{row}"><span>{{ row.title }}</span></template></el-table-column><el-table-column align="center" label="是否被使用"><template slot-scope="{row}"><el-tag type="warning" v-if="row.is_use === 1">是</el-tag><el-tag type="success" v-if="row.is_use === 0">否</el-tag></template></el-table-column><el-table-column align="center" label="状态"><template slot-scope="{row}"><el-tag type="success" v-if="row.status === 1">启用</el-tag><el-tag type="warning" v-if="row.status === 0">禁用</el-tag></template></el-table-column><el-table-column align="center" label="添加时间"><template slot-scope="{row}"><span>{{ row.create_time }}</span></template></el-table-column><el-table-column align="center" label="修改时间"><template slot-scope="{row}"><span>{{ row.update_time }}</span></template></el-table-column><el-table-column align="center" label="操作"><template slot-scope="{row}"><el-button v-if="$store.getters.butts.includes('ParamImageIndexDetails')" size="mini" @click="handleDetails(row.id)" type="info">详情</el-button><el-button v-if="$store.getters.butts.includes('ParamImageIndexEdit')" type="primary" size="mini" @click="handleEdit(row.id)">编辑</el-button><el-button v-if="$store.getters.butts.includes('ParamImageIndexDelete')" size="mini" @click="handleDelete(row.id)" type="danger">删除</el-button></template></el-table-column></el-table><div class="block"><el-pagination:hide-on-single-page="true":current-page="currentPage":page-sizes="pageSizes":page-size="currentSize"layout="total, sizes, prev, pager, next, jumper":total="dataTotal"@size-change="handleSizeChange"@current-change="handleCurrentChange"/></div><transition name="dialog-fade"><el-dialog :visible.sync="dialogVisible" :title="resTemp.id === 0 ? '添加' : '编辑'" :close-on-click-modal="false" :close-on-press-escape="false"><el-form ref="resForm" :rules="formRules" :model="resTemp" label-position="right" label-width="100px"><el-form-item label="格式名称" prop="title"><el-input v-model="resTemp.title" placeholder="请填写格式名称" /></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible=false">取消</el-button><el-button v-if="$store.getters.butts.includes('ParamImageIndexSave')" type="primary" @click="saveInfo()">提交</el-button></div></el-dialog></transition><transition name="dialog-fade"><el-dialog :visible.sync="dialogDetails" title="详情" :close-on-click-modal="false" :close-on-press-escape="false"><el-form ref="resForm" :model="resTemp" label-position="right" label-width="100px"><el-form-item label="格式名称"><el-input v-model="resTemp.title" placeholder="请填写格式名称" disabled /></el-form-item><el-form-item label="状态"><el-switchv-model="resTemp.status"active-value="1"inactive-value="0"disabled/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogDetails=false">取消</el-button></div></el-dialog></transition></div>
</template>
<script>import { succ, warn, err } from '@/utils/message'import { getInfo, getList, saveInfo, deleteInfo, statusInfo } from '@/api/param/image'export default {name: 'ParamImageIndex', // 名空间// 初始化数据data() {return {list: [], // 初始化管理员列表pageSizes: [10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 200, 300, 400, 500],currentPage: 1, // 当前页数currentSize: 10, // 每页条数dataTotal: 0, // 总数据searchParams: {id: '',title: ''},// 要提交数据resTemp: {id: 0, // 0 添加 >0 编辑title: '',status: '1'},// 要验证数据formRules: {title: [{ required: true, trigger: 'blur', message: '格式名称必须填写' },{ min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }]},listLoading: true, // 显示list加载框dialogVisible: false, // 初始化弹窗是否显示dialogDetails: false}},// 初始化执行的created() {this.getList()// 获取管理员数据},// 所有的方法都需要放到这个里面methods: {// 搜索search() {this.getList(1)},// 管理员数据 --异步async getList(page = 0) {this.listLoading = trueconst params = {currentPage: page === 0 ? this.currentPage : page,currentSize: this.currentSize,...this.searchParams}await getList(params).then(res => {this.list = res.data.listthis.dataTotal = res.data.meat.total * 1})// 延时setTimeout(() => {this.listLoading = false}, 0.5 * 1000)},// 清除搜索功能clearSearch() {this.searchParams = {id: '',title: ''}this.getList()},// 重置表单数据 ---添加时候需要使用resetTemp() {this.resTemp = {id: 0, // 0 添加 >0 编辑title: '',status: '1'}},// 添加方法handleAdd() {this.resetTemp()this.dialogVisible = truethis.$nextTick(() => {this.$refs['resForm'].clearValidate()})},// 编辑方法handleEdit(id) {getInfo({ id: id }).then(res => {const row = res.datathis.resTemp = Object.assign({}, row)this.resTemp.status = row.status + ''// 将数字强行转换成字符串this.dialogVisible = truethis.$nextTick(() => {this.$refs['resForm'].clearValidate()})})},// 详情handleDetails(id){getInfo({ id: id }).then(res => {const row = res.datathis.resTemp = Object.assign({}, row)this.resTemp.status = row.status + ''// 将数字强行转换成字符串this.dialogDetails = truethis.$nextTick(() => {this.$refs['resForm'].clearValidate()})})},// 新建保存数据async saveInfo() {this.$refs.resForm.validate(valid => {if (valid) {this.loading = truesaveInfo(this.resTemp).then(res => {this.loading = falsesucc(res.message)this.getList()this.dialogVisible = false})} else {return false}})},// 删除handleDelete(id) {this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(async() => {const ids = []if (id > 0) { // 单个删除ids.push(id)} else { // 批量删除const select = this.$refs.resTable.selectionif (select.length === 0) {warn('批量删除必须选择指定产品')return false}// 组合数据select.forEach(item => {ids.push(item.id)})}// 删除deleteInfo({ id: ids }).then(res => {this.getList()// 更新列表succ(res.message)// 提示结果})}).catch(err => {err(err.message)return false})},// 启禁用handleStatus(status){let statusText = status == 1 ? '启用' : '禁用';this.$confirm('此操作将永久'+ statusText +'该产品, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(async() => {const ids = []const select = this.$refs.resTable.selectionif (select.length === 0) {warn('批量'+ statusText +'必须选择指定产品')return false}// 组合数据select.forEach(item => {ids.push(item.id)})// 删除statusInfo({ id: ids, status:status }).then(res => {this.getList()//更新列表succ(res.message)// 提示结果})}).catch(err => {err(err.message)return false})},// 每页条数切换handleSizeChange(val) {this.currentSize = valthis.getList()},// 页数切换handleCurrentChange(val) {this.currentPage = valthis.getList()}}}
</script>
<style lang="scss" scoped>.app-container {padding:10px;.roles-table {margin-top: 30px;}.permission-tree {margin-bottom: 30px;}}.el-image-viewer__close{color: #fff;}.roleId .el-select{width:100%;}
</style>

二、添加ajax请求

        在根目录下src文件夹下api文件夹下param文件夹下image.js,代码如下

import request from '@/utils/request'
// 列表
export function getList(params) {return request({url: '/param/image/get_list',method: 'get',params:params})
}
// 所有
export function getAll() {return request({url: '/param/image/get_all',method: 'post'})
}
// 获取
export function getInfo(data) {return request({url: '/param/image/get_info',method: 'post',data})
}
// 保存
export function saveInfo(data) {return request({url: '/param/image/save_info',method: 'post',data})
}
// 删除
export function deleteInfo(data) {return request({url: '/param/image/delete_info',method: 'post',data})
}
// 启禁用
export function statusInfo(data) {return request({url: '/param/image/status_info',method: 'post',data})
}

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

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

相关文章

创建vue+electron项目流程

一个vue3和electron最基本的环境搭建步骤如下&#xff1a;// 安装 vite vue3 vite-plugin-vue-setup-extend less normalize.css mitt pinia vue-router npm create vuelatest npm i vite-plugin-vue-setup-extend -D npm i less -D npm i normalize.css -S &#xff0…

Android Studio 控制台输出的中文显示乱码

1. Android Studio 控制台输出的中文显示乱码 1.1. 问题 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。…

常见的测试方法

软件测试是软件⽣命周期中的⼀个重要环节&#xff0c;具有较⾼的复杂性&#xff0c;对于软件测试&#xff0c;可以从不同的⻆度加以分类&#xff0c;使开发者在软件开发过程中的不同层次、不同阶段对测试⼯作进⾏更好的执⾏和管理测试的分类⽅法。 按照测试目标分类 界面测试…

Linux驱动开发第2步_“物理内存”和“虚拟内存”的映射

“新字符设备的GPIO驱动”和“设备树下的GPIO驱动”都要用到寄存器地址&#xff0c;使用“物理内存”和“虚拟内存”映射时&#xff0c;非常不方便&#xff0c;而pinctrl和gpio子系统的GPIO驱动&#xff0c;非常简化。因此&#xff0c;要重点学习pinctrl和gpio子系统下的GPIO驱…

【0x001C】HCI_Write_Page_Scan_Activity详解

目录 一、命令概述 二、命令格式和参数说明 2.1. HCI_Write_Page_Scan_Activity命令格式 2.2. Page_Scan_Interval 2.3. Page_Scan_Window 三、响应事件及参数说明 3.1. HCI_Command_Complete事件 3.2. Status 3.3. 示例 四、命令执行流程 4.1. 命令发起阶段(主机端…

【AI图像生成网站Golang】雪花算法

AI图像生成网站 目录 一、项目介绍 二、雪花算法 三、JWT认证与令牌桶算法 四、项目架构(等待更新) 五、图床上传与图像生成API搭建(等待更新) 六、项目测试与调试(等待更新) 雪花算法 雪花算法 (Snowflake) 是一种高效、可扩展的分布式唯一ID生成算法&#xff0c;最早…

JMeter与大模型融合应用之JMeter日志分析服务化实战应用

JMeter与大模型融合应用之JMeter日志分析服务化 引言 在当今的互联网时代,网站和应用程序的性能直接影响到用户的体验和业务的成功。为了保证系统的稳定性和高效性,性能测试成为了软件开发过程中的一个重要环节。在这其中,Apache JMeter作为一款开源的性能测试工具,凭借其…

Docker环境搭建Cloudreve网盘服务(附shell脚本一键搭建)

Docker搭建Cloudreve Cloudreve介绍&#xff1a; Cloudreve 是一个基于 ThinkPHP 框架构建的开源网盘系统&#xff0c;旨在帮助用户以较低的成本快速搭建起既能满足个人也能满足企业需求的网盘服务。Cloudreve 支持多种存储介质&#xff0c;包括但不限于本地存储、阿里云OSS、…

浪浪云轻量服务器搭建vulfocus网络安全靶场

什么是网络安全靶场 网络安全靶场是一个模拟真实网络环境的训练平台&#xff0c;旨在为网络安全专业人员提供一个安全的环境来测试和提高他们的技能。靶场通常包括各种网络设备、操作系统、应用程序和安全工具&#xff0c;允许用户在其中进行攻击和防御练习。以下是网络安全靶…

对称加密算法DES的实现

一、实验目的 1、了解对称密码体制基本原理 2、掌握编程语言实现对称加密、解密 二、实验原理 DES 使用一个 56 位的密钥以及附加的 8 位奇偶校验位&#xff0c;产生最大 64 位的分组大小。这是一个迭代的分组密码&#xff0c;使用称为 Feistel 的技术&#xff0c;其中将加密…

【linux学习指南】VSCode部署Ubantu云服务器,与Xshell进行本地通信文件编写

文章目录 &#x1f4dd;前言&#x1f320; 步骤&#x1f309;测试同步 &#x1f6a9;总结 &#x1f4dd;前言 本文目的是讲使用Vscode连接Ubantu,与本地Xshell建立通信同步文件编写。 查看本机系统相关信息&#xff1a; cat /etc/lsb*DISTRIB_IDUbuntu: 表示这是 Ubuntu 发行…

实战:一文讲透模糊匹配的三种方式的区别

在 SQL 查询中,模糊查询是我们常用的工具之一。LIKE 关键字配合 % 符号,可以实现前缀匹配、后缀匹配和包含匹配等多种查询方式。然而,不同的匹配方式对查询性能会有显著影响。本文将详细探讨在 SQL 查询中,字符串前后加 % 与只在后面加 % 的性能差异及其应用场景。 一、SQL…

利用Blackbox AI让编程更轻松

引言 随着人工智能技术的发展&#xff0c;AI已经成为工作中不可缺少的工具之一。俗话讲“术业有专攻”&#xff0c;对AI来说当然也是如此。由于训练集、调教等方面的差别&#xff0c;不同的AI适用的工作也不尽相同。在编程辅助方面&#xff0c;已经有一系列比较成熟的平台&…

Vue学习记录03

响应式基础 声明响应式状态 ref() 在组合式API中&#xff0c;推荐使用ref()函数来声明响应式状态&#xff1a; import { ref } from vueconst count ref(0) ref()接收参数&#xff0c;并将其包裹在一个带有.value属性的ref对象中返回&#xff1a; const count ref(0)con…

排序排序的概念及其运用和选择排序

排序排序的概念及其运用和选择排序 7. 排序7.1 排序的概念及其运用7.2 选择排序算法——直接选择排序选择排序基本思想&#xff1a;直接选择排序选择排序原理参考程序 如何交换数据直接选择排序的特性总结&#xff1a; 7. 排序 7.1 排序的概念及其运用 排序&#xff1a;所谓排…

【目标检测】用YOLOv8-Segment训练语义分割数据集(保姆级教学)

前言 这篇教程会手把手带你用 YOLOv8-Segment 搭建一个属于自己的分割任务项目。从环境配置到数据集准备&#xff0c;再到模型训练和测试&#xff0c;所有步骤都有详细说明&#xff0c;适合初学者使用。你将学会如何安装必要的软件&#xff0c;标注自己的数据&#xff0c;并使…

爬虫开发工具与环境搭建——开发工具介绍

第二章&#xff1a;爬虫开发工具与环境搭建 第一节 开发工具介绍 爬虫开发需要一些合适的工具和框架来高效地抓取网页数据。在这节中&#xff0c;我们将介绍常用的开发工具&#xff0c;帮助开发者快速搭建爬虫开发环境。 1. Python与爬虫框架选择 Python因其简洁、易学的语法…

类和对象——拷贝构造函数,赋值运算符重载(C++)

1.拷⻉构造函数 如果⼀个构造函数的第⼀个参数是自身类类型的引用&#xff0c;且任何额外的参数都有默认值&#xff0c;则此构造函数也叫做拷贝构造函数&#xff0c;也就是说拷贝构造是⼀个特殊的构造函数。 // 拷贝构造函数//d2(d1) Date(const Date& d) {_year d._yea…

高级数据结构——hash表与布隆过滤器

文章目录 hash表与布隆过滤器1. hash函数2. 选择hash函数3. 散列冲突3.1 负载因子3.2 冲突解决3. STL中的散列表 4. 布隆过滤器4.1 背景1. 应用场景2. 常见的处理场景&#xff1a; 4.2 布隆过滤器构成4.3 原理4.4 应用分析4.5 要点 5. 分布式一致性hash5.1 缓存失效问题 6. 大数…

xcode-select: error: tool ‘xcodebuild‘ requires Xcode, but active developer

打开 .sh 文件所在的终端窗口&#xff0c;执行终端命令&#xff1a;sh 文件名.sh&#xff0c;出现如下错误&#xff1a; 解决办法&#xff1a;