当前位置： 首页 > article >正文

黑马智数Day4-1

article 2024/11/17 14:19:45

新增月卡

配置路由完成跳转

{
  path: '/cardAdd',
  component: () => import('@/views/car/car-card/add-card')
}

<el-button type="primary" @click="$router.push('/cardAdd')">添加月卡</el-button>

车辆信息表单验证

<el-form :model="carInfoForm" :rules="carInfoRules" label-width="100px">
  <el-form-item label="车主姓名" prop="personName">
    <el-input v-model="carInfoForm.personName" />
  </el-form-item>
  <el-form-item label="联系方式" prop="phoneNumber">
    <el-input v-model="carInfoForm.phoneNumber" />
  </el-form-item>
  <el-form-item label="车辆号码" prop="carNumber">
    <el-input v-model="carInfoForm.carNumber" />
  </el-form-item>
  <el-form-item label="车辆品牌" prop="carBrand">
    <el-input v-model="carInfoForm.carBrand" />
  </el-form-item>
</el-form>

data() {
    return {
      // 车辆信息表单
      carInfoForm: {
        personName: '', // 车主姓名
        phoneNumber: '', // 联系方式
        carNumber: '', // 车牌号码
        carBrand: '' // 车辆品牌
      },
      carInfoRules: {
        personName: [
          {
            required: true, message: '请输入车主姓名', trigger: 'blur'
          }
        ],
        phoneNumber: [
          {
            required: true, message: '请输入联系方式', trigger: 'blur'
          }
        ],
        carNumber: [
          {
            required: true, message: '请输入车辆号码', trigger: 'blur'
          }
        ],
        carBrand: [
          {
            required: true, message: '请输入车辆品牌', trigger: 'blur'
          }
        ]
      }
    }
  }

车牌号单独校验

 data() {
    const validaeCarNumber = (rule, value, callback) => {
      // value:表单中的数据
      // callback:放行函数 必须调用 校验通过直接调用 未通过callback(new Error('错误提示语'))
      const plateNumberRegex = /^[\u4E00-\u9FA5][\da-zA-Z]{6}$/
      if (plateNumberRegex.test(value)) {
        callback()
      } else {
        callback(new Error('请输入正确的车牌号'))
      }
    }
    return {
      carInfoRules: {
        carNumber: [
          {
            required: true, message: '请输入车辆号码', trigger: 'blur'
          },
          {
            validator: validaeCarNumber, trigger: 'blur'
          }
        ]
      }
    }
  }

缴费信息表单校验

 

<el-date-picker v-model="feeForm.payTime" type="daterange" range-separator="至"
           start-placeholder="开始日期" end-placeholder="结束日期">
</el-date-picker>
<el-form :model="feeForm" :rules="feeFormRules" label-width="100px">
    <el-form-item label="有效日期" prop="payTime">
      <el-date-picker
        v-model="feeForm.payTime"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      />
    </el-form-item>
    <el-form-item label="支付金额" prop="paymentAmount">
      <el-input v-model="feeForm.paymentAmount" />
    </el-form-item>
    <el-form-item label="支付方式" prop="paymentMethod">
      <el-select v-model="feeForm.paymentMethod">
        <el-option
          v-for="item in payMethodList"
          :key="item.id"
          :value="item.id"
          :label="item.name"
        />
      </el-select>
    </el-form-item>
  </el-form>


  data() {
    return {
      // 缴费信息表单
      feeForm: {
        payTime: '', // 支付时间
        paymentAmount: null, // 支付金额
        paymentMethod: '' // 支付方式
      },
      // 缴费规则
      feeFormRules: {
        payTime: [
          {
            required: true,
            message: '请选择支付时间'
          }
        ],
        paymentAmount: [
          {
            required: true,
            message: '请输入支付金额',
            trigger: 'blur'
          }
        ],
        paymentMethod: [
          {
            required: true,
            message: '请选择支付方式',
            trigger: 'change'
          }
        ]
      },
      // 支付方式列表
      payMethodList: [
        {
          id: 'Alipay',
          name: '支付宝'
        },
        {
          id: 'WeChat',
          name: '微信'
        },
        {
          id: 'Cash',
          name: '线下'
        }
      ]
    }
  }

统一校验俩个表单

<el-form ref="carInfoForm"></el-form>
<el-form ref="feeForm"></el-form>


methods: {
  confirmAdd() {
    this.$refs.carInfoForm.validate(valid => {
      if (valid) {
        this.$refs.feeForm.validate(valid => {
          if (valid) {
            // 全部校验通过
            // TODO 确定
          }
        })
      }
    })
  }
}

收集表单确认提交

封装接口

export function createCardAPI(data) {
  return request({
    url: '/parking/card',
    method: 'POST',
    data
  })
}

处理表单数据提交

methods: {
  confirmAdd() {
    this.$refs.carInfoForm.validate(valid => {
      if (valid) {
        this.$refs.feeForm.validate(valid => {
          if (valid) {
            // 全部校验通过
            // TODO 确定
             // 参数处理
            const payload = {
              ...this.feeForm,
              ...this.carInfoForm,
              // 单独处理时间
              cardStartDate: this.feeForm.payTime[0],
              cardEndDate: this.feeForm.payTime[1]
            }
            // 删掉多余字段
            delete payload.payTime
            await createCardAPI(payload)
            this.$router.back()
          }
        })
      }
    })
  }
}

重置表单

  1. 清空输入数据

  2. 清空校验错误

resetForm() {
  this.$refs.feeForm.resetFields()
  this.$refs.carInfoForm.resetFields()
}

编辑月卡

编辑功能的通用实现流程

携带id跳转并缓存id

scope 作用域插槽

scope.row -> 当前行的数据对象

<el-button size="mini" type="text" @click="editCard(scope.row.id)">编辑</el-button>
  
editCard(id) {
  this.$router.push({
    path: '/cardAdd',
    query: {
      id
    }
  })
}

回填数据

封装接口

export function getCardDetailAPI(id) {
  return request({
    url: `/parking/card/detail/${id}`
  })
}

根据id获取详情

// 获取详情
async getDetail() {
  const res = await getCardDetailAPI(this.id)
  // 回填车辆信息表单
  const { carInfoId, personName, phoneNumber, carNumber, carBrand } = res.data
  this.carInfoForm = {
    personName, phoneNumber, carNumber, carBrand, carInfoId
  }

  // 回填缴费信息表单
  const { rechargeId, cardStartDate, cardEndDate, paymentAmount, paymentMethod } = res.data
  this.feeForm = {
    rechargeId,
    paymentAmount,
    paymentMethod,
    payTime: [cardStartDate, cardEndDate]
  }
}

mounted() {
  if (this.id) {
    this.getDetail()
  }
}

根据id做接口适配

methods: {
  confirmAdd() {
    this.$refs.carInfoForm.validate(valid => {
      if (valid) {
        this.$refs.feeForm.validate(valid => {
          if (valid) {
            // 全部校验通过
            // TODO 确定
             // 参数处理
            const payload = {
              ...this.feeForm,
              ...this.carInfoForm,
              cardStartDate: this.feeForm.payTime[0],
              cardEndDate: this.feeForm.payTime[1]
            }
            delete payload.payTime
            if (this.id) {
              // 编辑
              await updateCardAPI(payload)
            } else {
              // 新增
              await createCardAPI(payload)
            }
            this.$router.back()
          }
        })
      }
    })
  }
}

删除功能实现

export function delCardAPI(id) {
  return request({
    url: `/parking/card/${id}`,
    method: 'DELETE'
  })
}
// 绑定事件
<el-button size="mini" type="text" @click="delCard(scope.row.id)">删除</el-button>

// 导入接口
import { delCardAPI } from '@/apis/card'

// 删除逻辑
delCard(id) {
  this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async() => {
    await delCardAPI(id)
    this.getCardList()
    this.$message({
      type: 'success',
      message: '删除成功!'
    })
  }).catch((error) => {
    console.log(error)
  })
}

批量删除

收集用户选择行

<el-table style="width: 100%" 
  :data="cardList" 
  @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
    />
    <!-- 省略 -->
</el-table>

data() {
  return {
    // 已选择列表
    selectedCarList: []
  }
}

methods:{
  handleSelectionChange(rowList) {
    console.log(rowList)
    this.selectedCarList = rowList
  }
}

处理数据调用接口

export function delCardListAPI(idList) {
  return request({
    url: `/parking/card/${idList.join(',')}`,
    method: 'DELETE'
  })
}


delCartList() {
  this.$confirm('此操作将永久删除选择的月卡, 是否继续?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async() => {
    // 处理id
    await delCardListAPI(this.selectedCarList.map(item => item.id))
    this.getCardList()
    this.$message({
      type: 'success',
      message: '删除成功!'
    })
  }).catch((error) => {
    console.log(error)
  })
}


http://www.kler.cn/a/323070.html

相关文章：

  • SpringSecurity 鉴权认证入门讲解
  • 六自由度双足机器人运动控制
  • daos集群部署（单机）
  • CC6学习记录
  • 机器学习day5-随机森林和线性代数1
  • 政务数据治理专栏开搞！
  • Opencv第十一章——视频处理
  • 数据结构：二叉树（定义 特性 存储）
  • 开发提效的工具tabby快速入门
  • hrnet训练的pt模型结合目标检测进行关键点识别的更准确前向推理
  • PHP视频活体检测API接口示例-视频活体检测引领身份验证新潮流
  • mysql索引 -- 全文索引介绍(如何创建,使用),explain关键字
  • C#中NModbus4中常用的方法
  • 解决Mac 默认设置 wps不能双面打印的问题
  • DevExpress WPF中文教程：如何解决编辑单元格值的常见问题？
  • 1.6 物理层
  • 每天学习一个技术栈 ——【Django Channels】篇（1）
  • 《深度学习》—— 神经网络中的数据增强
  • PHP中如何使用三元条件运算符
  • 智能PPT行业赋能用户画像
  • Kafka系列之：安装部署CMAK，CMAK管理大型Kafka集群参数调优
  • 实现org.springframework.beans.factory.InitializingBean 接口--初始化bean
  • 渲染太慢？Maya云渲染教程
  • 转行大模型的必要性与未来前景：迎接智能时代的浪潮
  • 阅读CVPR论文——mPLUG-Owl2：革命性的多模态大语言模型与模态协作
  • 复杂网络（Complex Network）社团数据可视化分析（gephi）实验