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

一、添加视图

        在根目录下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.mzph.cn/news/886316.shtml

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

相关文章

【WPF】Prism库学习(一)

Prism介绍 1. Prism框架概述&#xff1a; Prism是一个用于构建松耦合、可维护和可测试的XAML应用程序的框架。它支持WPF、.NET MAUI、Uno Platform和Xamarin Forms等多个平台。对于每个平台&#xff0c;Prism都有单独的发布版本&#xff0c;并且它们在不同的时间线上独立开发。…

The Planets: Earth -- 练习

环境搭建 该靶场环境来自Vulnhub -------- Difficulty: Easy 靶机与Kali的IP地址只需要在同一局域网即可&#xff08;同一个网段,即两虚拟机处于同一网络模式&#xff09;&#xff0c;所以需要调整KALI和靶场的网络模式&#xff0c;为了方便测试本地采用NAT模式。 注意&…

C/C++语言基础--initializer_list表达式、tuple元组、pair对组简介

本专栏目的 更新C/C的基础语法&#xff0c;包括C的一些新特性 前言 initializer_list表达式、tuple元组、pair对组再C日常还是比较常用的&#xff0c;尤其是对组在刷算法还是挺好用的&#xff0c;这里做一个简介&#xff1b;这三个语法结合C17的结构化绑定会更好用&#xff…

『VUE』27. 透传属性与inheritAttrs(详细图文注释)

目录 什么是透传属性&#xff08;Forwarding Attributes&#xff09;使用条件唯一根节点禁用透传属性继承总结 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 欢迎关注 『VUE』 专栏&#xff0c;持续更新中 什么是透传属性&#xff08;Forwarding Attributes&#xff09; 在 V…

演员王子辰—专注革命题材 《前行者》后再出发

2021年10月22日在北京卫视播出的由张鲁一、聂远等人主演的电视剧《前行者》&#xff0c;讲述了在二十世纪三十年代初&#xff0c;因叛徒出卖&#xff0c;我上海地下党组织遭到严重破坏&#xff0c;革命事业陷入一片白色恐怖之中。我党情报员马天目刚从法国归来&#xff0c;临危…

【电脑】解决DiskGenius调整分区大小时报错“文件使用的簇被标记为空闲或与其它文件有交叉”

【电脑】解决DiskGenius调整分区大小时报错“文件使用的簇被标记为空闲或与其它文件有交叉” 零、报错 在使用DiskGenius对磁盘分区进行调整时&#xff0c;DiskGenius检查出磁盘报错&#xff0c;报错信息&#xff1a;文件使用的簇被标记为空闲或与其它文件有交叉&#xff0c;…

远程控制步骤

当远在千里之外的朋友想求助你帮他找到他电脑上的文件、或者是给他安装软件时。但是你给他说了他又找不到&#xff0c;那么这时你就可以通过控制对方的电脑去做一系列的操作。 如何远程控制对方的电脑非常关键。 方法一&#xff08;Windows自带远程桌面功能&#xff09;&#…

蓝桥杯——数组

1、移动数组元素 package day3;import java.util.Arrays;public class Demo1 {public static void main(String[] args) {int[] arr {1,2,3,4,5,6};int k 2;int[] arr_new f(arr,k);for (int i : arr_new) {System.out.print(i",");}//或System.out.println();St…

【大数据技术基础 | 实验十】Hive实验:部署Hive

文章目录 一、实验目的二、实验要求三、实验原理四、实验环境五、实验内容和步骤&#xff08;一&#xff09;安装部署&#xff08;二&#xff09;配置HDFS&#xff08;三&#xff09;启动Hive 六、实验结果&#xff08;一&#xff09;启动结果&#xff08;二&#xff09;Hive基…

MQTT从入门到精通之MQTT Dashboard

MQTT Dashboard 1 Dashboard简介 EMQX 提供了一个内置的管理控制台&#xff0c;即 EMQX Dashboard。方便用户通过 Web 页面就能轻松管理和监控 EMQX 集群&#xff0c;并配置和使用所需的各项功能。 访问地址&#xff1a;http://ip:18083 首次登录访问账号&#xff1a;admin…

[Codesys]常用功能块应用分享-BMOV功能块功能介绍及其使用实例说明

官方说明 功能说明 参数 类型 功能 pbyDataSrcPOINTER TO BYTE指向源数组指针uiSizeUINT要移动数据的BYTE数pbyDataDesPOINTER TO BYTE指向目标数组指针 实例应用-ST IF SYSTEM_CLOCK.AlwaysTrue THENCASE iAutoState OF0: //读写完成信号在下次读写信号的上升沿或复位信号…

推荐一款流程图和图表绘制工具:WizFlow Flowcharter Pro

WizFlow Flowcharter是一款易于使用、功能丰富的Windows流程图和图表绘制工具。它允许用户使用超过一百种预定义的形状和箭头定义形状“样式”。您可以将自己的样式保存在图表模板中&#xff0c;以建立自己的绘图方法。WizFlow附带了完整的流程图模板&#xff0c;以帮助您入门。…

Java集合 List——针对实习面试

目录 Java集合 ListJava List的三种主要实现是什么&#xff1f;它们各自的特点是什么&#xff1f;Java List和Array&#xff08;数组&#xff09;的区别&#xff1f;Java List和Set有什么区别&#xff1f;ArrayList和Vector有什么区别&#xff1f;什么是LinkedList&#xff1f;…

数据结构 -- 二叉搜索树

二叉搜索树 概念 二叉搜索树又称为二叉排序树&#xff0c;它或为空树&#xff0c;或为具有以下性质的二叉树&#xff1a; 若它的左子树不为空&#xff0c;则左子树上所有节点的值都小于等于根节点的值。若它的右子树不为空&#xff0c;则右子树上所有节点的值都大于等于根节…

D3 可以加载的数据格式有哪些?(12种)

D3.js 支持多种数据格式&#xff0c;这些格式涵盖了从简单的表格数据到复杂的地理数据。以下是一些常见的数据格式及其加载方法&#xff1a; D3.js 数据加载方法 d3.blob(input, init) 用途: 加载二进制数据&#xff0c;返回一个 Blob 对象。参数: input: 数据源 URL。init: …

stm32在linux环境下的开发与调试

环境安装 注&#xff1a;文末提供一键脚本 下载安装stm32cubeclt 下载地址为&#xff1a;https://www.st.com/en/development-tools/stm32cubeclt.html 选择 linux版本下载安装 安装好后默认在家目录st下 > $ ls ~/st/stm32cubeclt_1.16.0 …

【从零开始的LeetCode-算法】3270. 求出数字答案

给你三个 正 整数 num1 &#xff0c;num2 和 num3 。 数字 num1 &#xff0c;num2 和 num3 的数字答案 key 是一个四位数&#xff0c;定义如下&#xff1a; 一开始&#xff0c;如果有数字 少于 四位数&#xff0c;给它补 前导 0 。答案 key 的第 i 个数位&#xff08;1 < …

蓝桥杯每日真题 - 第12天

题目&#xff1a;&#xff08;数三角&#xff09; 题目描述&#xff08;14届 C&C B组E题&#xff09; 解题思路&#xff1a; 给定 n 个点的坐标&#xff0c;计算其中可以组成 等腰三角形 的三点组合数量。 核心条件&#xff1a;等腰三角形的定义是三角形的三条边中至少有…

项目技术栈-解决方案-注册中心

项目技术栈-解决方案-注册中心 ZookeeperEureka、Nacos、Consul和Etcd参考文章 服务注册中心&#xff08;Registry&#xff09;&#xff1a;用于保存 RPC Server 的注册信息&#xff0c;当 RPC Server 节点发生变更时&#xff0c;Registry 会同步变更&#xff0c;RPC Client 感…

uniapp适配暗黑模式配置plus.nativeUI.setUIStyle适配DarkMode配置

uniapp适配暗黑模式配置 目录 uniapp适配暗黑模式配置setUIStyleDarkMode 适配app-plus manifest.json配置theme.json配置pages.json配置页面切换代码实现同步手机暗黑配置额外适配 参考官方文档&#xff1a;https://uniapp.dcloud.net.cn/tutorial/darkmode.html 主要用到api…