新增月卡
配置路由完成跳转
{
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()
}
})
}
})
}
}重置表单
-
清空输入数据
-
清空校验错误
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)
})
}
