2.点位管理开发(续)及设计思路——帝可得后台管理系统

目录

  • 前言
  • 一、页面原型
  • 二、修改
    • 1、页面展示
    • 2、新增
  • 3 、总结思路

前言

提示：本篇继续点位管理的改造

一、页面原型

  1. 页面展示页面原型
  2. 新增
    在这里插入图片描述

二、修改

1、页面展示

页面修改：修改标签换行、顺序顺序、地址过长时换行问题；

<el-table v-loading="loading" :data="nodeList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="序号" type="index" align="center" prop="id" width="50" /><el-table-column label="点位名称" align="center" prop="nodeName" /><el-table-column label="所在区域" align="center" prop="regionId" /><el-table-column label="商圈类型" align="center" prop="businessType"><template #default="scope"><dict-tag :options="business_type" :value="scope.row.businessType" /></template></el-table-column><el-table-column label="合作商ID" align="center" prop="partnerId" /><el-table-column label="详细地址" align="left" prop="address"  show-overflow-tooltip /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template #default="scope"><el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['manage:node:edit']">修改</el-button><el-button link type="primary" @click="handleDelete(scope.row)"v-hasPermi="['manage:node:remove']">删除</el-button></template></el-table-column></el-table>

新增表单修改：

  <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px"><el-form-item label="点位名称" prop="nodeName"><el-input v-model="queryParams.nodeName" placeholder="请输入点位名称" clearable @keyup.enter="handleQuery" /></el-form-item><el-form-item label="区域搜索" prop="regionId"><el-select v-model="queryParams.regionId" placeholder="请选择区域" clearable @change="handleQuery"><el-option v-for="item in regionOptions" :key="item.id" :label="item.regionName" :value="item.id" /></el-select></el-form-item>  <!-- <el-form-item label="合作商" prop="partnerId"><el-inputv-model="queryParams.partnerId"placeholder="请输入合作商ID"clearable@keyup.enter="handleQuery"/></el-form-item> --><el-form-item><el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button><el-button icon="Refresh" @click="resetQuery">重置</el-button></el-form-item></el-form><el-row :gutter="10" class="mb8"><el-col :span="1.5"><el-button type="primary" plain icon="Plus" @click="handleAdd" v-hasPermi="['manage:node:add']">新增</el-button></el-col><el-col :span="1.5"><el-button type="success" plain icon="Edit" :disabled="single" @click="handleUpdate"v-hasPermi="['manage:node:edit']">修改</el-button></el-col><el-col :span="1.5"><el-button type="danger" plain icon="Delete" :disabled="multiple" @click="handleDelete"v-hasPermi="['manage:node:remove']">删除</el-button></el-col><el-col :span="1.5"><el-button type="warning" plain icon="Download" @click="handleExport"v-hasPermi="['manage:node:export']">导出</el-button></el-col><right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar></el-row><el-table v-loading="loading" :data="nodeList" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55" align="center" /><el-table-column label="序号" type="index" align="center" prop="id" width="50" /><el-table-column label="点位名称" align="center" prop="nodeName" /><el-table-column label="所在区域" align="center" prop="regionId" /><el-table-column label="商圈类型" align="center" prop="businessType"><template #default="scope"><dict-tag :options="business_type" :value="scope.row.businessType" /></template></el-table-column><el-table-column label="合作商ID" align="center" prop="partnerId" /><el-table-column label="详细地址" align="center" prop="address" /><el-table-column label="操作" align="center" class-name="small-padding fixed-width"><template #default="scope"><el-button link type="primary" @click="handleUpdate(scope.row)" v-hasPermi="['manage:node:edit']">修改</el-button><el-button link type="primary" @click="handleDelete(scope.row)"v-hasPermi="['manage:node:remove']">删除</el-button></template></el-table-column></el-table>

2、新增

  1. 修改标签名称
 <!-- 添加或修改点位管理对话框 --><el-dialog :title="title" v-model="open" width="500px" append-to-body><el-form ref="nodeRef" :model="form" :rules="rules" label-width="80px"><el-form-item label="点位名称" prop="nodeName"><el-input v-model="form.nodeName" placeholder="请输入点位名称" /></el-form-item><el-form-item label="所在区域" prop="regionId"><el-select v-model="form.regionId" placeholder="请选择区域"><el-option v-for="item in regionOptions" :key="item.id" :label="item.regionName" :value="item.id" /></el-select></el-form-item><el-form-item label="商圈类型" prop="businessType"><el-select v-model="form.businessType" placeholder="请选择商圈类型"><el-option v-for="dict in business_type" :key="dict.value" :label="dict.label":value="parseInt(dict.value)"></el-option></el-select></el-form-item><el-form-item label="合作商" prop="partnerId"><el-select v-model="form.partnerId" placeholder="请选择合作商" filterable><el-optionv-for="item in partnerOptions":key="item.id":label="item.partnerName":value="item.id"/></el-select></el-form-item><el-form-item label="详细地址" prop="address"><el-input v-model="form.address" placeholder="请输入详细地址" /></el-form-item><el-form-item label="备注" prop="remark"><el-input v-model="form.remark" type="textarea" placeholder="请输入内容" /></el-form-item></el-form><template #footer><div class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></template></el-dialog>
  1. 将新增表单中所在区域改为下拉框
import { listRegion } from "@/api/manage/region";const regionOptions = ref([]);/** 获取区域列表 */
function getRegionList() {listRegion({pageNum: 1,pageSize: 10000}).then(response => {regionOptions.value = response.rows});
}// 在组件挂载时获取区域列表
onMounted(() => {getRegionList();
});

     <el-form-item label="所在区域" prop="regionId"><el-select v-model="form.regionId" placeholder="请选择区域"><el-option v-for="item in regionOptions" :key="item.id" :label="item.regionName" :value="item.id" /></el-select></el-form-item>
  1. 将新增表单中归属合作商改为下拉框
import{listPartner}from"@/api/manage/partner";
const partnerOptions = ref([]);/** 获取合作商列表 */
function getPartnerList() {listPartner({pageNum: 1,pageSize: 10000}).then(response => {partnerOptions.value = response.rows;});
}// 在组件挂载时获取合作商列表
onMounted(() => {getPartnerList();
});

   <el-form-item label="合作商" prop="partnerId"><el-select v-model="form.partnerId" placeholder="请选择合作商" filterable><el-optionv-for="item in partnerOptions":key="item.id":label="item.partnerName":value="item.id"/></el-select></el-form-item>
  1. 将搜索栏修改为区域搜索，并使用下拉框展示
    标签改为下拉框
    <el-form-item label="区域搜索" prop="regionId"><el-select v-model="queryParams.regionId" placeholder="请选择区域" clearable @change="handleQuery"><el-option v-for="item in regionOptions" :key="item.id" :label="item.regionName" :value="item.id" /></el-select></el-form-item>

调用API、JS

import { listRegion } from "@/api/manage/region";const regionOptions = ref([]);/** 获取区域列表 */
function getRegionList() {listRegion({pageNum: 1,pageSize: 10000}).then(response => {regionOptions.value = response.rows});
}// 在组件挂载时获取区域列表
onMounted(() => {getRegionList();
});

3 、总结思路

通过本篇，我们学会将修改表单、输入框改为下拉框的通用思路
思路：
0. 所涉及的文件：通常是api中所在模块的js文件和view中所在模块vue文件(包含了页面显示的组件和JS函数)
在这里插入图片描述

我们以合作商的下拉框为例：

  1. 调用前端API
    想要将输入框变为下拉框并展示数据，我们就要考虑如何从后端获取数据；
    在合作商的JS文件中，我们看到有一个可以查询合作商列表的函数，该函数使用get向后端 /manage/partner/list发起请求；
    在这里插入图片描述
    后端 /manage/partner/list 收到请求后会查询合作商列表，并发起响应
    在这里插入图片描述

  2. 创建调用函数
    设置partnerOPptions用来接收整个后端传来的数据；
    listPartner是刚刚API函数，想像它已经获得了后端传来的数据，接着拿到10000条数据(本质是想获得所有数据)，并将其中rows数据交给刚刚创建的partnerOptions，用来稍后使用；
    在这里插入图片描述

/** 获取合作商列表 */
function getPartnerList() {listPartner({pageNum: 1,pageSize: 10000}).then(response => {partnerOptions.value = response.rows;});
}// 在组件挂载时获取合作商列表
onMounted(() => {getPartnerList();
});
  1. 修改表单

为了展示partnerOptions中的合作商名称数据，使用下拉框；value代表获取数据中的id字段值，key代表获取数据中的id字段作为标识，label代表最终展示的值为数据中的合作商名称；

   <el-form-item label="合作商" prop="partnerId"><el-select v-model="form.partnerId" placeholder="请选择合作商" filterable><el-optionv-for="item in partnerOptions":key="item.id":label="item.partnerName":value="item.id"/></el-select></el-form-item>

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

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

相关文章

大厂笔试现已经禁用本地IDE怎么看

大厂笔试现已经禁用本地IDE怎么看

如果我说本来面试做题这种事情就是反人类你相信吗&#xff1f; 这个罪恶的源头就是 Google&#xff0c;说是为了选择高素质的计算机编程水平的人才&#xff0c;然后把面试就变成了考试&#xff0c;最大的受益者当然是印度人了。 当把一个考察过程变成标准化的考试过程&#x…
阅读更多...
前后端传输文件（图片）

前后端传输文件（图片）

前端&#xff1a;Vue | 后端&#xff1a;.NET&#xff08;ASP.NET Core&#xff09; 情况1&#xff1a;前端>后端 前端&#xff1a; 1.设置 header 为 multipart/form-data 2.将数据封装为 FormData 类型 const formData new FormData() ......获取数据并通过append函数…
阅读更多...
PHP__sleep和__wakeup有什么区别

PHP__sleep和__wakeup有什么区别

在PHP中&#xff0c;__sleep 和 __wakeup 是两个魔术方法&#xff08;Magic Methods&#xff09;&#xff0c;它们与对象的序列化和反序列化过程紧密相关。这两个方法允许开发者在对象被序列化&#xff08;存储或传输&#xff09;和反序列化&#xff08;恢复&#xff09;时执行…
阅读更多...
电脑失声，一招搞定

电脑失声，一招搞定

早已习惯了Edge浏览器的“大声朗读”功能&#xff0c;今天值班&#xff0c;值班室用的两台电脑只配有耳机&#xff0c;没有音箱&#xff0c;顿时感觉不适。 先找了一个带功放的老音箱&#xff0c;发现少了电箱到功放的音频线。 一顿搜索&#xff0c;在找到音频线的同时&#…
阅读更多...
【案例】平面云

【案例】平面云

教程案例视频&#xff1a;Unity Shader Graph - 云教程 开发平台&#xff1a;Unity 2022 开发工具&#xff1a;Unity ShaderGraph   一、效果展示 二、ShaderGraph 路线图 三、案例分析 核心思路&#xff1a;使用 Noise&#xff08;噪声&#xff09;模拟云层状态   3.1 说明…
阅读更多...
Chat登录时出现SSO信息出错的解决方法

Chat登录时出现SSO信息出错的解决方法

目录 1. 问题所示2. 问题所示3. 解决方法 1. 问题所示 此贴主要是总结回顾&#xff0c;对此放置在运维专栏 出现如下问题&#xff0c;很懵&#xff0c;以为是节点挂了还是网址蹦了 一直刷新&#xff0c;登录之后就出现这个问题 2. 问题所示 对于SSO&#xff0c;也就是单点登…
阅读更多...
负载均衡--相关面试题（六）

负载均衡--相关面试题（六）

在负载均衡的面试中&#xff0c;可能会遇到一系列涉及概念、原理、实践应用以及技术细节的问题。以下是一些常见的负载均衡面试题及其详细解答&#xff1a; 一、什么是负载均衡&#xff1f; 回答&#xff1a;负载均衡是一种将网络请求或数据传输工作分配给多个服务器或网络资源…
阅读更多...
详解JavaScript函数属性、方法和构造函数

详解JavaScript函数属性、方法和构造函数

函数属性、方法和构造函数 JS中&#xff0c;函数是值&#xff0c;对函数执行typeof运算会返回function&#xff0c;但是函数是JS中特殊的对象&#xff0c;也可以拥有属性和方法。 length属性 函数体里面&#xff0c;arguments.length表示传入函数的实参个数&#xff0c;而函…
阅读更多...
2024年优化苹果免签封装APP H5站打包苹果APP 绿标-永不掉千（永久使用）

2024年优化苹果免签封装APP H5站打包苹果APP 绿标-永不掉千（永久使用）

大家都知道苹果手机做APP签名很贵&#xff0c; 这个程序就是吧您的H5网站 一切网页可以打开的&#xff0c;封装成app 苹果手机上可以直接安装使用 永久可用&#xff01;&#xff01;很简单&#xff0c;可以看视频教程来安装使用&#xff0c; 视频教程&#xff1a; https://ww…
阅读更多...
修改Anaconda虚拟环境默认安装路径(Linux系统)

修改Anaconda虚拟环境默认安装路径(Linux系统)

文章目录 修改Anaconda虚拟环境默认安装路径(Linux系统)1.方法一&#xff1a;使用--prefix参数2.方法二&#xff1a;配置conda环境的默认安装位置 修改Anaconda虚拟环境默认安装路径(Linux系统) 1.方法一&#xff1a;使用--prefix参数 在创建虚拟环境时&#xff0c;使用--pre…
阅读更多...
macOS编译和运行prometheus2.54

macOS编译和运行prometheus2.54

欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码)&#xff1a;https://github.com/zq2599/blog_demos 本篇概览 本文详述了在macOS(M2芯片)上编译和运行prometheus2.54版本的过程&#xff0c;以及安装node_exporter和grafana并使用prometheus指标进行展示 本地…
阅读更多...
wzoissb的博客网（感谢CSDN支持）

wzoissb的博客网（感谢CSDN支持）

感谢CSDN提供技术支持&#xff01;&#xff01;&#xff01; wzoissb的博客网站&#xff01;&#xff01;&#xff01;今天发布&#xff01;&#xff01;&#xff01; 我的主页 wzoi账号不公布 LUOGU 账号 其余网络账号…
阅读更多...
vue3导入本地图片2种实现方法

vue3导入本地图片2种实现方法

在<script setup>中使用import语法&#xff1a; <template><img :src"logo" alt"Logo"> </template><script setup> import logo from ./assets/logo.png; </script> 使用Vue的ref来动态地在<script setup>中…
阅读更多...
openpnp - 底部相机高级校正的参数设置

openpnp - 底部相机高级校正的参数设置

文章目录 openpnp - 底部相机高级校正的参数设置概述笔记修改 “Radial Lines Per Calibration Z” 的方法不同 “Radial Lines Per Calibration Z”的校验结果不同 “Radial Lines Per Calibration Z”的设备校验动作的比较总结备注END openpnp - 底部相机高级校正的参数设置 …
阅读更多...
根据给定的相机和镜头参数，估算相机的内参。

根据给定的相机和镜头参数，估算相机的内参。

1. 相机分辨率和传感器尺寸 最高分辨率&#xff1a;6000 4000 像素传感器尺寸&#xff1a;22.3 mm 14.9 mm 2. 计算像素大小 需要计算每个像素对应的实际尺寸&#xff08;mm/pixel&#xff09;&#xff1a; 水平方向像素大小&#xff1a; 垂直方向像素大小&#xff1a; …
阅读更多...
JAVA实现大写金额转小写金额

JAVA实现大写金额转小写金额

在金融行业中经常需要把大写金额转成小写金额&#xff0c;之前在一次开发中有个类似的需求&#xff0c;翻阅了好多博文&#xff0c;都没找到合适的&#xff0c;故没办法&#xff0c;就花了点时间研究并实现! 实现代码如下: private static final Character ZERO 零;private s…
阅读更多...
国外电商系统开发-运维系统批量添加服务器

国外电商系统开发-运维系统批量添加服务器

您可以把您准备的txt文件&#xff0c;安装要求的格式&#xff0c;复制粘贴到里面就可以了。注意格式&#xff01; 如果是“#” 开头的&#xff0c;则表示注释&#xff01;
阅读更多...
Linux篇之IO多路复用

Linux篇之IO多路复用

文章目录 前言流IO操作IO阻塞多路IO多个流的IO请求处理水平触发边缘触发最后 前言 你好&#xff0c;我是醉墨居士&#xff0c;今天介绍一下Linux中的IO多路复用机制 流 流是一种用于在程序与外部数据源&#xff08;如文件、网络连接、内存等&#xff09;之间传输数据的机制&…
阅读更多...
在掌控板中加载人教版信息科技教学指南中的educore库

在掌控板中加载人教版信息科技教学指南中的educore库

掌控板中加载educore库 人教信息科技数字资源平台&#xff08;https://ebook.mypep.cn/free&#xff09;中的《信息科技教学指南硬件编程代码说明》文件中提到“本程序说明主要供教学参考。需要可编程主控板须支持运行MicroPython 脚本程序。希望有更多的主控板在固件中支持ed…
阅读更多...
AppointmentController

AppointmentController

目录 1、 AppointmentController 1.1、 保存主页面信息 1.1.1、 //预约表 1.1.2、 维修明细表 1.1.3、 //配件明细表 1.1.4、 1.1.5、 //从某集合中删除其与另一个集合中相同的项&#xff1b;其实这个说简单点就是某集合中独有的元素(差集) 1.1.6、 //删除 1…
阅读更多...
最新文章

Copyright @ 2022~2023