|
|
@@ -1,245 +1,357 @@
|
|
|
<template>
|
|
|
<div>
|
|
|
<el-form inline>
|
|
|
- <el-form-item>
|
|
|
- <el-input placeholder="请输入车辆类型" v-model="getPricingData.vehicle_type" />
|
|
|
+ <el-form-item label="车辆类型">
|
|
|
+ <el-select
|
|
|
+ v-model="getPricingData.vehicle_type_id"
|
|
|
+ placeholder="全部"
|
|
|
+ clearable
|
|
|
+ style="width: 180px"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in vehicleTypeList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.ID"
|
|
|
+ />
|
|
|
+ </el-select>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" icon="Search" @click="getPricingList">搜索</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="Search"
|
|
|
+ @click="getPricingList"
|
|
|
+ >搜索</el-button>
|
|
|
</el-form-item>
|
|
|
<el-form-item>
|
|
|
- <el-button type="primary" icon="Plus" @click="openPricing('新增收费配置','')">新增</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ icon="Plus"
|
|
|
+ @click="openPricing('新增收费配置','')"
|
|
|
+ >新增</el-button>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
- <el-table :data="pricingList" height="605">
|
|
|
- <el-table-column label="车辆类型" align="center" width="180" prop="vehicle_type"></el-table-column>
|
|
|
- <el-table-column label="初始费用" align="center" width="180" prop="start_fee"></el-table-column>
|
|
|
- <el-table-column label="单位费用" align="center" width="180" prop="unit_fee"></el-table-column>
|
|
|
- <el-table-column label="是否为VIP" align="center" width="180">
|
|
|
+
|
|
|
+ <el-table
|
|
|
+ :data="pricingList"
|
|
|
+ height="605"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="车辆类型"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ prop="vehicle_type.name"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="初始费用"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ prop="start_fee"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="单位费用"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ prop="unit_fee"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="是否为VIP免费"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
- <el-button :type="scope.row.is_vip_free ? 'success' : 'danger'" plain>
|
|
|
- {{scope.row.is_vip_free ? '已成为vip' : '未成为vip'}}
|
|
|
+ <el-button
|
|
|
+ :type="scope.row.is_vip_free ? 'success' : 'danger'"
|
|
|
+ plain
|
|
|
+ >
|
|
|
+ {{ scope.row.is_vip_free ? 'VIP免费' : 'VIP不免费' }}
|
|
|
</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
- <el-table-column label="每日最大费用" align="center" width="180" prop="daily_max_fee"></el-table-column>
|
|
|
- <el-table-column label="vip折扣" align="center" width="180" prop="vip_discount"></el-table-column>
|
|
|
- <el-table-column label="操作" align="center">
|
|
|
+ <el-table-column
|
|
|
+ label="每日最大费用"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ prop="daily_max_fee"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="vip折扣"
|
|
|
+ align="center"
|
|
|
+ width="180"
|
|
|
+ prop="vip_discount"
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="操作"
|
|
|
+ align="center"
|
|
|
+ >
|
|
|
<template #default="scope">
|
|
|
- <el-tooltip :content="scope.row.description" placement="top" effect="light">
|
|
|
- <el-button text type="primary" icon="MessageBox">备注</el-button>
|
|
|
+ <el-tooltip
|
|
|
+ :content="scope.row.description"
|
|
|
+ placement="top"
|
|
|
+ effect="light"
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ text
|
|
|
+ type="primary"
|
|
|
+ icon="MessageBox"
|
|
|
+ >备注</el-button>
|
|
|
</el-tooltip>
|
|
|
- <el-button @click="openPricing('编辑收费配置', scope.row)" icon="edit" text type="primary">编辑</el-button>
|
|
|
- <el-button @click="deletePricing(scope.row)" icon="delete" text type="primary">删除</el-button>
|
|
|
+ <el-button
|
|
|
+ icon="edit"
|
|
|
+ text
|
|
|
+ type="primary"
|
|
|
+ @click="openPricing('编辑收费配置', scope.row)"
|
|
|
+ >编辑</el-button>
|
|
|
+ <el-button
|
|
|
+ icon="delete"
|
|
|
+ text
|
|
|
+ type="primary"
|
|
|
+ @click="deletePricing(scope.row)"
|
|
|
+ >删除</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
|
+
|
|
|
<div style="width: 100%;display: flex;justify-content: end">
|
|
|
<el-pagination
|
|
|
- :current-page="getPricingData.page"
|
|
|
- :page-size="getPricingData.page_size"
|
|
|
- :page-sizes="[10, 30, 50, 100]"
|
|
|
- :total="pricingTotal"
|
|
|
- layout="total, sizes, prev, pager, next, jumper"
|
|
|
- @current-change="handleCurrentChange"
|
|
|
- @size-change="handleSizeChange"
|
|
|
- style="padding-right: 10px"
|
|
|
+ :current-page="getPricingData.page"
|
|
|
+ :page-size="getPricingData.page_size"
|
|
|
+ :page-sizes="[10, 30, 50, 100]"
|
|
|
+ :total="pricingTotal"
|
|
|
+ layout="total, sizes, prev, pager, next, jumper"
|
|
|
+ style="padding-right: 10px"
|
|
|
+ @current-change="handleCurrentChange"
|
|
|
+ @size-change="handleSizeChange"
|
|
|
/>
|
|
|
</div>
|
|
|
- <el-dialog v-model="pricingShow" :title="pricingTitle" width="650">
|
|
|
- <el-form label-width="120" size="large">
|
|
|
+
|
|
|
+ <el-dialog
|
|
|
+ v-model="pricingShow"
|
|
|
+ :title="pricingTitle"
|
|
|
+ width="650"
|
|
|
+ >
|
|
|
+ <el-form
|
|
|
+ label-width="120"
|
|
|
+ size="large"
|
|
|
+ >
|
|
|
<el-form-item label="车辆类型:">
|
|
|
- <el-select v-model="pricingData.vehicle_type">
|
|
|
- <el-option label="月租车" value="月租车"></el-option>
|
|
|
- <el-option label="临时车" value="临时车"></el-option>
|
|
|
+ <el-select
|
|
|
+ v-model="pricingData.vehicle_type_id"
|
|
|
+ placeholder="请选择车辆类型"
|
|
|
+ >
|
|
|
+ <el-option
|
|
|
+ v-for="item in vehicleTypeList"
|
|
|
+ :key="item.ID"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.ID"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="开始时间:">
|
|
|
+ <el-form-item label="免费时长(分钟):">
|
|
|
<el-input
|
|
|
- v-model="pricingData.start_time"
|
|
|
- @input="pricingData.start_time = pricingData.start_time.replace(/[^\d]/g, '')"
|
|
|
+ v-model.number="pricingData.start_time"
|
|
|
+ type="number"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="起始费用:">
|
|
|
- <el-input v-model="pricingData.start_fee" type="number"/>
|
|
|
+ <el-form-item label="起步费用:">
|
|
|
+ <el-input
|
|
|
+ v-model.number="pricingData.start_fee"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="单位费用:">
|
|
|
- <el-input v-model="pricingData.unit_fee" type="number"/>
|
|
|
+ <el-form-item label="单位时间(分钟):">
|
|
|
+ <el-input
|
|
|
+ v-model.number="pricingData.unit_time"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="单位时间:">
|
|
|
+ <el-form-item label="单位费用:">
|
|
|
<el-input
|
|
|
- v-model="pricingData.unit_time"
|
|
|
- @input="pricingData.start_time = pricingData.start_time.replace(/[^\d]/g, '')"
|
|
|
+ v-model.number="pricingData.unit_fee"
|
|
|
+ type="number"
|
|
|
/>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="每日最大费用:">
|
|
|
- <el-input v-model="pricingData.daily_max_fee" type="number"/>
|
|
|
+ <el-input
|
|
|
+ v-model.number="pricingData.daily_max_fee"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
- <el-form-item label="是否为vip免费:">
|
|
|
- <el-radio-group v-model="pricingData.is_vip_free" size="large" fill="#409eff">
|
|
|
- <el-radio-button label="否" :value="false" />
|
|
|
- <el-radio-button label="是" :value="true" />
|
|
|
+ <el-form-item label="是否vip免费:">
|
|
|
+ <el-radio-group v-model="pricingData.is_vip_free">
|
|
|
+ <el-radio-button :label="false">否</el-radio-button>
|
|
|
+ <el-radio-button :label="true">是</el-radio-button>
|
|
|
</el-radio-group>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="vip折扣:">
|
|
|
- <el-input v-model="pricingData.vip_discount" type="number"/>
|
|
|
+ <el-input
|
|
|
+ v-model.number="pricingData.vip_discount"
|
|
|
+ type="number"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
<el-form-item label="描述:">
|
|
|
- <el-input v-model="pricingData.description"></el-input>
|
|
|
+ <el-input
|
|
|
+ v-model="pricingData.description"
|
|
|
+ type="textarea"
|
|
|
+ rows="3"
|
|
|
+ />
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
|
<template #footer>
|
|
|
- <el-button @click="pricingShow = false" size="large">取消</el-button>
|
|
|
- <el-button @click="pricingOperation" type="primary" size="large">确认</el-button>
|
|
|
+ <el-button
|
|
|
+ size="large"
|
|
|
+ @click="pricingShow = false"
|
|
|
+ >取消</el-button>
|
|
|
+ <el-button
|
|
|
+ type="primary"
|
|
|
+ size="large"
|
|
|
+ @click="pricingOperation"
|
|
|
+ >确认</el-button>
|
|
|
</template>
|
|
|
</el-dialog>
|
|
|
-
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
import { obtainPricingList, addPricing, editPricing, removePricing } from '@/api/pricing'
|
|
|
+import { getAllVehicleTypes } from '@/api/vehicle'
|
|
|
import { onMounted, reactive, ref } from 'vue'
|
|
|
import { ElMessage, ElMessageBox } from 'element-plus'
|
|
|
-const pricingList = reactive([1])
|
|
|
+
|
|
|
+const pricingList = ref([])
|
|
|
const pricingShow = ref(false)
|
|
|
const pricingTitle = ref('')
|
|
|
+const vehicleTypeList = ref([])
|
|
|
+const pricingTotal = ref(0)
|
|
|
+
|
|
|
+// 查询条件
|
|
|
+const getPricingData = reactive({
|
|
|
+ vehicle_type_id: '',
|
|
|
+ page: 1,
|
|
|
+ page_size: 10
|
|
|
+})
|
|
|
+
|
|
|
+// 表单数据
|
|
|
const pricingData = reactive({
|
|
|
id: 0,
|
|
|
- vehicle_type: '',
|
|
|
+ vehicle_type_id: '',
|
|
|
start_time: 0,
|
|
|
start_fee: 0,
|
|
|
unit_time: 0,
|
|
|
unit_fee: 0,
|
|
|
daily_max_fee: 0,
|
|
|
is_vip_free: false,
|
|
|
- vip_discount: 0,
|
|
|
+ vip_discount: 1.0,
|
|
|
description: ''
|
|
|
})
|
|
|
-const pricingTotal = ref(0)
|
|
|
-
|
|
|
-const getPricingData = reactive({
|
|
|
- vehicle_type: '',
|
|
|
- page: 1,
|
|
|
- page_size: 10
|
|
|
-})
|
|
|
|
|
|
-const handleCurrentChange = (val) => {
|
|
|
- getPricingData.page = val
|
|
|
- getPricingList()
|
|
|
+// 获取车辆类型下拉
|
|
|
+const loadVehicleTypes = async() => {
|
|
|
+ const res = await getAllVehicleTypes()
|
|
|
+ if (res.code === 0) {
|
|
|
+ vehicleTypeList.value = res.data
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
-const handleSizeChange = (val) => {
|
|
|
- getPricingData.page_size = val
|
|
|
- getPricingList()
|
|
|
-}
|
|
|
+// 获取收费配置列表
|
|
|
const getPricingList = () => {
|
|
|
obtainPricingList(getPricingData).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- console.log('收费数据', res.data)
|
|
|
- pricingList.length = 0
|
|
|
- pricingList.push(...res.data.list)
|
|
|
+ pricingList.value = res.data.list
|
|
|
pricingTotal.value = res.data.total
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+// 删除
|
|
|
const deletePricing = (data) => {
|
|
|
- ElMessageBox.confirm(
|
|
|
- '确定要删除该收费配置吗?',
|
|
|
- '提示',
|
|
|
- {
|
|
|
- confirmButtonText: '确认',
|
|
|
- cancelButtonText: '取消',
|
|
|
- type: 'warning',
|
|
|
+ ElMessageBox.confirm('确定删除?', '提示', { type: 'warning' }).then(() => {
|
|
|
+ removePricing(data.ID).then(res => {
|
|
|
+ if (res.code === 0) {
|
|
|
+ ElMessage.success('删除成功')
|
|
|
+ getPricingList()
|
|
|
}
|
|
|
- )
|
|
|
- .then(() => {
|
|
|
- removePricing(data.ID).then(res => {
|
|
|
- if (res.code === 0) {
|
|
|
- ElMessage({
|
|
|
- type: 'success',
|
|
|
- message: '删除成功',
|
|
|
- })
|
|
|
- getPricingList()
|
|
|
- } else {
|
|
|
- ElMessage({
|
|
|
- type: 'error',
|
|
|
- message: '删除失败',
|
|
|
- })
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- ElMessage({
|
|
|
- type: 'info',
|
|
|
- message: '取消删除',
|
|
|
- })
|
|
|
- })
|
|
|
+ })
|
|
|
+ })
|
|
|
}
|
|
|
|
|
|
-const openPricing = (head, data) => {
|
|
|
+// 打开新增/编辑
|
|
|
+const openPricing = (title, data) => {
|
|
|
pricingShow.value = true
|
|
|
- pricingTitle.value = head
|
|
|
- if (head === '新增车费配置') {
|
|
|
- pricingData.vehicle_type = ''
|
|
|
- pricingData.start_time = 0
|
|
|
- pricingData.start_fee = 0
|
|
|
- pricingData.unit_time = 0
|
|
|
- pricingData.unit_fee = 0
|
|
|
- pricingData.daily_max_fee = 0
|
|
|
- pricingData.vip_discount = 0
|
|
|
- pricingData.is_vip_free = false
|
|
|
- pricingData.description = ''
|
|
|
+ pricingTitle.value = title
|
|
|
+ if (title === '新增收费配置') {
|
|
|
+ Object.assign(pricingData, {
|
|
|
+ id: 0,
|
|
|
+ vehicle_type_id: '',
|
|
|
+ start_time: 0,
|
|
|
+ start_fee: 0,
|
|
|
+ unit_time: 0,
|
|
|
+ unit_fee: 0,
|
|
|
+ daily_max_fee: 0,
|
|
|
+ is_vip_free: false,
|
|
|
+ vip_discount: 1.0,
|
|
|
+ description: ''
|
|
|
+ })
|
|
|
} else {
|
|
|
- pricingData.id = data.ID
|
|
|
- pricingData.vehicle_type = data.vehicle_type
|
|
|
- pricingData.start_time = data.start_time
|
|
|
- pricingData.start_fee = data.start_fee
|
|
|
- pricingData.unit_time = data.unit_time
|
|
|
- pricingData.unit_fee = data.unit_fee
|
|
|
- pricingData.daily_max_fee = data.daily_max_fee
|
|
|
- pricingData.vip_discount = data.vip_discount
|
|
|
- pricingData.is_vip_free = data.is_vip_free
|
|
|
- pricingData.description = data.description
|
|
|
+ Object.assign(pricingData, data)
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-const pricingOperation = async () => {
|
|
|
- pricingData.start_time = Number(pricingData.start_time)
|
|
|
- pricingData.start_fee = Number(pricingData.start_fee)
|
|
|
- pricingData.unit_time = Number(pricingData.unit_time)
|
|
|
- pricingData.unit_fee = Number(pricingData.unit_fee)
|
|
|
- pricingData.daily_max_fee = Number(pricingData.daily_max_fee)
|
|
|
- pricingData.vip_discount = Number(pricingData.vip_discount)
|
|
|
+// 提交
|
|
|
+const pricingOperation = async() => {
|
|
|
+ if (!pricingData.vehicle_type_id) {
|
|
|
+ ElMessage.warning('请选择车辆类型')
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 关键:提交前强制转数字
|
|
|
+ const params = {
|
|
|
+ id: pricingData.id,
|
|
|
+ vehicle_type_id: pricingData.vehicle_type_id,
|
|
|
+ start_time: Number(pricingData.start_time),
|
|
|
+ start_fee: Number(pricingData.start_fee),
|
|
|
+ unit_time: Number(pricingData.unit_time),
|
|
|
+ unit_fee: Number(pricingData.unit_fee),
|
|
|
+ daily_max_fee: Number(pricingData.daily_max_fee),
|
|
|
+ is_vip_free: pricingData.is_vip_free,
|
|
|
+ vip_discount: Number(pricingData.vip_discount),
|
|
|
+ description: pricingData.description
|
|
|
+ }
|
|
|
+
|
|
|
if (pricingTitle.value === '新增收费配置') {
|
|
|
- await addPricing(pricingData).then(res => {
|
|
|
- console.log(res)
|
|
|
+ await addPricing(params).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- ElMessage.success('添加成功')
|
|
|
+ ElMessage.success('新增成功')
|
|
|
pricingShow.value = false
|
|
|
getPricingList()
|
|
|
- } else {
|
|
|
- ElMessage.error('添加失败')
|
|
|
}
|
|
|
})
|
|
|
} else {
|
|
|
- await editPricing(pricingData).then(res => {
|
|
|
+ await editPricing(params).then(res => {
|
|
|
if (res.code === 0) {
|
|
|
- ElMessage.success('更新成功')
|
|
|
+ ElMessage.success('修改成功')
|
|
|
pricingShow.value = false
|
|
|
getPricingList()
|
|
|
- } else {
|
|
|
- ElMessage.error('更新失败')
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
+const handleCurrentChange = (val) => {
|
|
|
+ getPricingData.page = val
|
|
|
+ getPricingList()
|
|
|
+}
|
|
|
+
|
|
|
+const handleSizeChange = (val) => {
|
|
|
+ getPricingData.page_size = val
|
|
|
+ getPricingList()
|
|
|
+}
|
|
|
+
|
|
|
onMounted(() => {
|
|
|
+ loadVehicleTypes()
|
|
|
getPricingList()
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
-
|
|
|
</style>
|