<script setup lang="tsx">
|
import type { DataTableColumns } from 'naive-ui'
|
import { onActivated } from 'vue'
|
import { useBoolean } from '@/hooks'
|
import { NButton, NSpace } from 'naive-ui'
|
import { deletePricing, getPricingList } from '@/service/api/transaction'
|
import SearchPanel from '@/components/custom/SearchPanel.vue'
|
import OperationLogModal from '@/components/custom/OperationLogModal.vue'
|
import TableModal from './components/TableModal.vue'
|
import { useRouter } from 'vue-router'
|
import dayjs from 'dayjs'
|
|
const router = useRouter()
|
|
const { bool: loading, setTrue: startLoading, setFalse: endLoading } = useBoolean(false)
|
// const { t } = useI18n()
|
const dialog = useDialog()
|
|
const initialModel = {
|
vehicleModel: '',
|
cityName: '',
|
}
|
const model = ref({ ...initialModel })
|
const pageParams = ref({
|
pageNum: 1,
|
pageSize: 10,
|
})
|
function handleResetSearch() {
|
model.value = { ...initialModel }
|
handleSearch()
|
}
|
function handleSearch() {
|
pageParams.value.pageNum = 1
|
getList()
|
}
|
|
const modalRef = ref()
|
const showOperationLogModal = ref(false)
|
|
function handleOpenOperationLog() {
|
showOperationLogModal.value = true
|
}
|
|
function delteteUser(id: number) {
|
deletePricing(id).then((res) => {
|
if (res.code === 200) {
|
window.$message.success('删除成功')
|
}
|
}).finally(() => {
|
getList()
|
})
|
}
|
|
const columns = computed<DataTableColumns<any>>(() => [
|
{
|
title: '序号',
|
key: 'serialNumber',
|
resizable: true,
|
width: 60,
|
},
|
{
|
title: '创建时间',
|
key: 'createTime',
|
ellipsis: true,
|
width: 200,
|
render: row => <span>{row.createTime ? dayjs(row.createTime).format('YYYY/MM/DD HH:mm') : '-'}</span>,
|
},
|
{
|
title: '车型',
|
key: 'vehicleModelName',
|
resizable: true,
|
width: 150,
|
},
|
{
|
title: '适用城市',
|
key: 'useCity',
|
resizable: true,
|
width: 220,
|
},
|
{
|
title: '渠道',
|
key: 'channel',
|
width: 100,
|
resizable: true,
|
},
|
{
|
title: '计费规则',
|
key: 'pricingType',
|
width: 100,
|
resizable: true,
|
render: (row) => {
|
return row.pricingType === 1 ? '动态计费' : '一口价'
|
},
|
},
|
{
|
title: '操作',
|
key: 'actions',
|
width: 240,
|
fixed: 'right',
|
render: (row) => {
|
return (
|
<NSpace>
|
<NButton
|
text
|
v-permission="6022"
|
type="primary"
|
onClick={() => router.push({ name: 'rules', query: { id: row.id } })}
|
>
|
计费规则
|
</NButton>
|
<NButton
|
text
|
v-permission="6023"
|
type="primary"
|
onClick={() => router.push({ name: 'setPrice', query: { id: row.id, type: 'add', category: row.pricingType } })}
|
>
|
设置价格
|
</NButton>
|
<NButton
|
text
|
v-permission="6024"
|
type="primary"
|
onClick={() => router.push({ name: 'pricingDetail', query: { id: row.id, type: 'view', category: row.pricingType } })}
|
>
|
详情
|
</NButton>
|
{/* <NButton
|
text
|
v-permission="6025"
|
type='primary'
|
onClick={() => modalRef.value.openModal('edit', row.id)}
|
>
|
编辑
|
</NButton> */}
|
<NButton
|
text
|
v-permission="6026"
|
type="primary"
|
onClick={() => {
|
dialog.create({
|
title: '是否确认删除数据？',
|
content: '确认删除该定价配置？删除后不可恢复。',
|
positiveText: '确定',
|
negativeText: '取消',
|
maskClosable: false,
|
autoFocus: false,
|
onPositiveClick: () => {
|
delteteUser(row.id!)
|
},
|
})
|
}}
|
>
|
删除
|
</NButton>
|
</NSpace>
|
)
|
},
|
},
|
])
|
|
const filterItems = computed(() => [
|
{
|
label: '车型',
|
path: 'vehicleModel',
|
render: () => <n-input v-model:value={model.value.vehicleModel} />,
|
},
|
{
|
label: '城市',
|
path: 'cityName',
|
render: () => <n-input v-model:value={model.value.cityName} />,
|
},
|
])
|
|
const count = ref(0)
|
const listData = ref<any[]>([])
|
|
async function getList() {
|
startLoading()
|
const params = {
|
...pageParams.value,
|
cityName: model.value.cityName,
|
vehicleModel: model.value.vehicleModel,
|
}
|
getPricingList(params).then((res) => {
|
listData.value = res.data.records || []
|
listData.value.forEach((item: any, index: number) => {
|
item.serialNumber = (pageParams.value.pageNum - 1) * pageParams.value.pageSize + index + 1
|
})
|
count.value = res.data.total || res.data.records?.length
|
}).finally(() => {
|
endLoading()
|
})
|
}
|
|
onMounted(() => {
|
getList()
|
})
|
|
onActivated(() => {
|
if (window.sessionStorage.getItem('pricingManagementNeedRefresh') === '1') {
|
window.sessionStorage.removeItem('pricingManagementNeedRefresh')
|
getList()
|
}
|
})
|
|
function changePage(page: number, size: number) {
|
pageParams.value.pageNum = page
|
pageParams.value.pageSize = size
|
getList()
|
}
|
</script>
|
|
<template>
|
<div class="roboTaxi w-full h-full">
|
<div class="roboTaxi-form-card mb-12px">
|
<n-form ref="formRef" :model="model" label-placement="left" inline :show-feedback="false">
|
<SearchPanel>
|
<n-gi v-for="item in filterItems" :key="item.path">
|
<n-form-item :label="item.label" :path="item.path">
|
<component :is="item.render" />
|
</n-form-item>
|
</n-gi>
|
<template #action>
|
<NButton @click="handleResetSearch">
|
{{ $t('common.reset') }}
|
</NButton>
|
<NButton type="primary" @click="handleSearch">
|
{{ $t('common.search') }}
|
</NButton>
|
</template>
|
</SearchPanel>
|
</n-form>
|
</div>
|
|
<n-card class="flex-1 robotaxi-table-card">
|
<template #header>
|
<n-flex justify="space-between">
|
<NButton v-permission="6027" @click="handleOpenOperationLog">
|
操作日志
|
</NButton>
|
<NButton v-permission="6021" type="primary" secondary @click="modalRef.openModal('add')">
|
新增
|
</NButton>
|
</n-flex>
|
</template>
|
<div class="flex-1 flex flex-col h-full">
|
<n-data-table
|
class="flex-1" :columns="columns" :data="listData" :loading="loading" flex-height
|
:bordered="false" :header-height="18" :row-height="18"
|
>
|
<template #empty>
|
<div class="flex-center">
|
<img src="/src/assets/element-img/no-data.png" style="width:123px;height:125px" @error="(e: any) => { e.target.src = 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/9bed493b-a6aa-4ef6-ac10-7f67f5c6adc5.png' }">
|
</div>
|
</template>
|
</n-data-table>
|
<Pagination
|
class="robotaxi-pagination mt-12px" :count="count" :page-size="pageParams.pageSize"
|
:page="pageParams.pageNum" @change="changePage"
|
/>
|
</div>
|
|
<TableModal ref="modalRef" modal-name="定价" @refresh="handleSearch" />
|
</n-card>
|
<OperationLogModal v-model:show="showOperationLogModal" />
|
</div>
|
</template>
|
