当前位置: 首页 > ops >正文

家政维修平台实战11搭建服务规格

目前首页的功能我们已经搭建好了,当用户点击某个服务内容的时候要跳转到详情页,详情页需要展示服务的各类信息,难点是在规格切换的时候价格也要跟上有变化。
在这里插入图片描述

在数据源设计部分我们还没有考虑规格的问题,本篇我们介绍一下服务规格功能的一个具体搭建的过程。

1 调整数据模型

目前服务项目表只是搭建了基础字段,还没有和规格进行关联。一个服务项目可能会有多种规格,可以考虑在服务内容下增加一个子表,叫服务规格表

创建我们的表,创建第一个字段,服务内容ID,类型选择关联关系,关联到我们的服务项目表

在这里插入图片描述
创建第二个字段,规格类型
在这里插入图片描述
创建第三个字段,规格值
在这里插入图片描述
依次添加其余字段
在这里插入图片描述

2 搭建后台功能

表创建好之后,需要提供后台维护数据的功能。打开我们的后台应用,点击创建页面的图标
在这里插入图片描述
选择表格与表单页模板,选择我们的服务规格表,选择左侧导航布局
在这里插入图片描述
切换到页面布局
在这里插入图片描述
切换到左侧导航布局,在属性面板点击添加平级菜单
在这里插入图片描述
选择服务规格列表
在这里插入图片描述
调整服务规格的菜单名称和图标
在这里插入图片描述

3 和服务项目联动

我们的服务规格是从服务项目里添加的,需要获取到从服务项目传递的数据标识,因此需要创建一个URL参数来进行接收。

选择页面组件,创建URL参数
在这里插入图片描述
在这里插入图片描述
选中数据表格,设置筛选条件,然我们的服务项目ID等于我们的URL参数
在这里插入图片描述
排序字段设置为规格类型,升序
在这里插入图片描述
筛选器勾选规格类型、规格值、状态
在这里插入图片描述

4 配置服务内容操作列

规格功能搭建好之后,需要给服务内容的操作列增加一个按钮,叫服务规格,按钮的类型选择链接
在这里插入图片描述
设置点击事件,打开我们的服务规格列表页面
在这里插入图片描述
在这里插入图片描述
打开我们的服务规格列表页,并且传入当前表格所在行的数据标识
在这里插入图片描述

5 搭建新建服务规格页面

当我们在服务规格列表页面点击新建的时候,默认的功能是继续打开新建页面,这样跳转的就比较多了,我们通过弹窗进行替代

选中页面组件,添加弹窗
在这里插入图片描述
在弹窗内容下添加表单容器,右侧数据模型选择服务规格
在这里插入图片描述
选择服务项目ID,设置选中值
在这里插入图片描述
绑定为我们的的URL参数,这样新建的时候就会默认选中传入的服务项目的数据
在这里插入图片描述
关闭弹窗的默认打开状态
在这里插入图片描述
选择新建按钮,配置点击事件,修改为打开弹窗
在这里插入图片描述

6 整体效果

点击服务项目菜单,可以看到操作列多了一个服务规格的按钮

在这里插入图片描述
点击服务规格进入服务规格列表页面
在这里插入图片描述
点击新建,打开弹窗
在这里插入图片描述
自动填充了服务项目ID,可以录入具体的规格信息

总结

本篇我们讲解了服务规格的搭建过程,主要体现了数据设计的表拆分原则,将不同的信息拆分到不同的表中,方便数据维护和扩展。

http://www.xdnf.cn/news/10404.html

相关文章:

  • 力扣题解106:从中序与后序遍历序列构造二叉树
  • esp-idf ubuntu环境配置
  • C++多重继承详解与实战解析
  • C++ —— STL容器——string类
  • xdma 驱动测试与分析
  • Launcher3体系化之路
  • Spring Boot对一些技术框架进行了统一版本号管理
  • vue3常用组件有哪些
  • 【STM32F1标准库】理论——外部中断
  • YOLOv5 环境配置指南
  • 高速串行通信解惑说明
  • 数据结构-排序-排序的七种算法(2)
  • Java流【全】
  • vscode + cmake + ninja+ gcc 搭建MCU开发环境
  • 6v6-导航收录:2025年网站自动引流终极方案 - 提升SEO排名新策略
  • PCIe—TS1/TS2 之Polling.Active(一)
  • Java异步编程:CompletionStage接口详解
  • rv1126b sdk移植
  • QT中更新或添加组件时出现“”qt操作至少需要一个处于启用状态的有效资料档案库“解决方法”
  • 深入理解设计模式之观察者模式
  • 59、干系人概述
  • Windows系统时间怎么设置
  • Centos7 中Gunicorn的安装配置
  • Docker 在云环境中的部署:AWS/ECS 与 Azure/AKS 的实践对比
  • 自动驾驶系统研发系列—激光雷达感知延迟:自动驾驶安全的隐形隐患?
  • opencv使用经典bug
  • OD 算法题 B卷【文件目录大小】
  • 基于ssm+mysql的大创项目申报管理系统(含LW+PPT+源码+系统演示视频+安装说明)
  • 历年中山大学计算机保研上机真题
  • java swing 晃动鼠标改变背景颜色