新增月卡
配置路由完成跳转
{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-pickerv-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-optionv-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.payTimeawait createCardAPI(payload)this.$router.back()}})}})}
}重置表单
-
清空输入数据
-
清空校验错误
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.datathis.carInfoForm = {personName, phoneNumber, carNumber, carBrand, carInfoId}// 回填缴费信息表单const { rechargeId, cardStartDate, cardEndDate, paymentAmount, paymentMethod } = res.datathis.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.payTimeif (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-columntype="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() => {// 处理idawait delCardListAPI(this.selectedCarList.map(item => item.id))this.getCardList()this.$message({type: 'success',message: '删除成功!'})}).catch((error) => {console.log(error)})
}
