Compare commits

...

2 Commits

Author SHA1 Message Date
fyy
f2a90584b2 Merge branch 'master' of http://47.109.37.87:3000/by2025/admin-vben5
All checks were successful
Gitea Actions Demo / Explore-Gitea-Actions (push) Successful in 6m3s
2025-06-26 09:34:01 +08:00
fyy
b5c47bc3f9 feat: 初始化绿植养护租赁管理页面 2025-06-26 09:33:34 +08:00
5 changed files with 603 additions and 4 deletions

View File

@ -0,0 +1,61 @@
import type { RentalPlanVO, RentalPlanForm, RentalPlanQuery } from './model';
import type { ID, IDS } from '#/api/common';
import type { PageResult } from '#/api/common';
import { commonExport } from '#/api/helper';
import { requestClient } from '#/api/request';
/**
* 绿-
* @param params
* @returns 绿-
*/
export function rentalPlanList(params?: RentalPlanQuery) {
return requestClient.get<PageResult<RentalPlanVO>>('/property/rentalPlan/list', { params });
}
/**
* 绿-
* @param params
* @returns 绿-
*/
export function rentalPlanExport(params?: RentalPlanQuery) {
return commonExport('/property/rentalPlan/export', params ?? {});
}
/**
* 绿-
* @param id id
* @returns 绿-
*/
export function rentalPlanInfo(id: ID) {
return requestClient.get<RentalPlanVO>(`/property/rentalPlan/${id}`);
}
/**
* 绿-
* @param data
* @returns void
*/
export function rentalPlanAdd(data: RentalPlanForm) {
return requestClient.postWithMsg<void>('/property/rentalPlan', data);
}
/**
* 绿-
* @param data
* @returns void
*/
export function rentalPlanUpdate(data: RentalPlanForm) {
return requestClient.putWithMsg<void>('/property/rentalPlan', data);
}
/**
* 绿-
* @param id id
* @returns void
*/
export function rentalPlanRemove(id: ID | IDS) {
return requestClient.deleteWithMsg<void>(`/property/rentalPlan/${id}`);
}

View File

@ -0,0 +1,114 @@
import type { PageQuery, BaseEntity } from '#/api/common';
export interface RentalPlanVO {
/**
*
*/
id: string | number;
/**
*
*/
planName: string;
/**
*
*/
rentalPeriod: number;
/**
*
*/
scene: string;
/**
*
*/
price: number;
/**
*
*/
state: number;
/**
*
*/
remarks: string;
}
export interface RentalPlanForm extends BaseEntity {
/**
*
*/
id?: string | number;
/**
*
*/
planName?: string;
/**
*
*/
rentalPeriod?: number;
/**
*
*/
scene?: string;
/**
*
*/
price?: number;
/**
*
*/
state?: number;
/**
*
*/
remarks?: string;
}
export interface RentalPlanQuery extends PageQuery {
/**
*
*/
planName?: string;
/**
*
*/
rentalPeriod?: number;
/**
*
*/
scene?: string;
/**
*
*/
price?: number;
/**
*
*/
state?: number;
/**
*
*/
remarks?: string;
/**
*
*/
params?: any;
}

View File

@ -0,0 +1,146 @@
import type { FormSchemaGetter } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { getDictOptions } from '#/utils/dict';
import { renderDict } from '#/utils/render';
export const querySchema: FormSchemaGetter = () => [
{
component: 'Input',
fieldName: 'planName',
label: '方案名称',
},
{
component: 'Select',
fieldName: 'rentalPeriod',
label: '租赁周期',
componentProps: {
options:[
{ label: '月', value: 0 },
{ label: '季度', value: 1 },
{ label: '年', value: 2 },
]
},
},
{
component: 'Select',
componentProps: {
// 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
options: getDictOptions('wy_kg'),
},
fieldName: 'state',
label: '状态',
},
];
// 需要使用i18n注意这里要改成getter形式 否则切换语言不会刷新
// export const columns: () => VxeGridProps['columns'] = () => [
export const columns: VxeGridProps['columns'] = [
{
title: '序号',
field: 'id',
},
{
title: '方案名称',
field: 'planName',
},
{
title: '租赁周期',
field: 'rentalPeriod',
},
{
title: '适用场景',
field: 'scene',
},
{
title: '植物组合包',
field: 'scene',
},
{
title: '基础服务项',
field: 'scene',
},
{
title: '价格',
field: 'price',
},
{
title: '状态',
field: 'state',
slots: {
default: ({ row }) => {
// 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
return renderDict(row.state, 'wy_kg');
},
},
},
{
title: '备注',
field: 'remarks',
},
{
field: 'action',
fixed: 'right',
slots: { default: 'action' },
title: '操作',
width: 180,
},
];
export const modalSchema: FormSchemaGetter = () => [
{
label: '方案名称',
fieldName: 'planName',
component: 'Input',
rules: 'required',
},
{
label: '租赁周期',
fieldName: 'rentalPeriod',
component: 'Select',
rules: 'required',
componentProps: {
options:[
{ label: '月', value: 0 },
{ label: '季度', value: 1 },
{ label: '年', value: 2 },
]
},
},
{
label: '适用场景',
fieldName: 'scene',
component: 'Input',
rules: 'required',
},
{
label: '价格体系',
fieldName: 'price',
component: 'Input',
},
{
label: '基础服务项',
fieldName: 'price',
component: 'Select',
},
{
label: '优惠活动',
fieldName: 'price',
component: 'Input',
},
{
label: '状态',
fieldName: 'state',
component: 'Select',
componentProps: {
// 可选从DictEnum中获取 DictEnum.WY_KG 便于维护
options: getDictOptions('wy_kg'),
},
rules: 'selectRequired',
},
{
label: '备注',
fieldName: 'remarks',
component: 'Input',
},
];

View File

@ -1,5 +1,182 @@
<script setup lang="ts">
import type { Recordable } from '@vben/types';
import { ref } from 'vue';
import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui';
import { getVxePopupContainer } from '@vben/utils';
import { Modal, Popconfirm, Space } from 'ant-design-vue';
import dayjs from 'dayjs';
import {
useVbenVxeGrid,
vxeCheckboxChecked,
type VxeGridProps
} from '#/adapter/vxe-table';
import {
rentalPlanExport,
rentalPlanList,
rentalPlanRemove,
} from '#/api/property/rentalPlan';
import type { RentalPlanForm } from '#/api/property/rentalPlan/model';
import { commonDownloadExcel } from '#/utils/file/download';
import rentalPlanModal from './rentalPlan-modal.vue';
import { columns, querySchema } from './data';
const formOptions: VbenFormProps = {
commonConfig: {
labelWidth: 80,
componentProps: {
allowClear: true,
},
},
schema: querySchema(),
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
// RangePicker /
//
// fieldMappingTime: [
// [
// 'createTime',
// ['params[beginTime]', 'params[endTime]'],
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
// ],
// ],
};
const gridOptions: VxeGridProps = {
checkboxConfig: {
//
highlight: true,
//
reserve: true,
//
// trigger: 'row',
},
// 使i18ngetter
// columns: columns(),
columns,
height: 'auto',
keepSource: true,
pagerConfig: {},
proxyConfig: {
ajax: {
query: async ({ page }, formValues = {}) => {
return await rentalPlanList({
pageNum: page.currentPage,
pageSize: page.pageSize,
...formValues,
});
},
},
},
rowConfig: {
keyField: 'id',
},
//
id: 'property-rentalPlan-index'
};
const [BasicTable, tableApi] = useVbenVxeGrid({
formOptions,
gridOptions,
});
const [RentalPlanModal, modalApi] = useVbenModal({
connectedComponent: rentalPlanModal,
});
function handleAdd() {
modalApi.setData({});
modalApi.open();
}
async function handleEdit(row: Required<RentalPlanForm>) {
modalApi.setData({ id: row.id });
modalApi.open();
}
async function handleDelete(row: Required<RentalPlanForm>) {
await rentalPlanRemove(row.id);
await tableApi.query();
}
function handleMultiDelete() {
const rows = tableApi.grid.getCheckboxRecords();
const ids = rows.map((row: Required<RentalPlanForm>) => row.id);
Modal.confirm({
title: '提示',
okType: 'danger',
content: `确认删除选中的${ids.length}条记录吗?`,
onOk: async () => {
await rentalPlanRemove(ids);
await tableApi.query();
},
});
}
function handleDownloadExcel() {
commonDownloadExcel(rentalPlanExport, '绿植租赁-租赁方案数据', tableApi.formApi.form.values, {
fieldMappingTime: formOptions.fieldMappingTime,
});
}
</script>
<template>
<div>
租赁方案管理
</div>
<Page :auto-content-height="true">
<BasicTable table-title="绿植租赁-租赁方案列表">
<template #toolbar-tools>
<Space>
<a-button
v-access:code="['property:rentalPlan:export']"
@click="handleDownloadExcel"
>
{{ $t('pages.common.export') }}
</a-button>
<a-button
:disabled="!vxeCheckboxChecked(tableApi)"
danger
type="primary"
v-access:code="['property:rentalPlan:remove']"
@click="handleMultiDelete">
{{ $t('pages.common.delete') }}
</a-button>
<a-button
type="primary"
v-access:code="['property:rentalPlan:add']"
@click="handleAdd"
>
{{ $t('pages.common.add') }}
</a-button>
</Space>
</template>
<template #action="{ row }">
<Space>
<ghost-button
v-access:code="['property:rentalPlan:edit']"
@click.stop="handleEdit(row)"
>
{{ $t('pages.common.edit') }}
</ghost-button>
<Popconfirm
:get-popup-container="getVxePopupContainer"
placement="left"
title="确认删除?"
@confirm="handleDelete(row)"
>
<ghost-button
danger
v-access:code="['property:rentalPlan:remove']"
@click.stop=""
>
{{ $t('pages.common.delete') }}
</ghost-button>
</Popconfirm>
</Space>
</template>
</BasicTable>
<RentalPlanModal @reload="tableApi.query()" />
</Page>
</template>

View File

@ -0,0 +1,101 @@
<script setup lang="ts">
import { computed, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { useVbenForm } from '#/adapter/form';
import { rentalPlanAdd, rentalPlanInfo, rentalPlanUpdate } from '#/api/property/rentalPlan';
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
import { modalSchema } from './data';
const emit = defineEmits<{ reload: [] }>();
const isUpdate = ref(false);
const title = computed(() => {
return isUpdate.value ? $t('pages.common.edit') : $t('pages.common.add');
});
const [BasicForm, formApi] = useVbenForm({
commonConfig: {
//
formItemClass: 'col-span-2',
// label px
labelWidth: 80,
//
componentProps: {
class: 'w-full',
}
},
schema: modalSchema(),
showDefaultActions: false,
wrapperClass: 'grid-cols-2',
});
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
{
initializedGetter: defaultFormValueGetter(formApi),
currentGetter: defaultFormValueGetter(formApi),
},
);
const [BasicModal, modalApi] = useVbenModal({
//
class: 'w-[550px]',
fullscreenButton: false,
onBeforeClose,
onClosed: handleClosed,
onConfirm: handleConfirm,
onOpenChange: async (isOpen) => {
if (!isOpen) {
return null;
}
modalApi.modalLoading(true);
const { id } = modalApi.getData() as { id?: number | string };
isUpdate.value = !!id;
if (isUpdate.value && id) {
const record = await rentalPlanInfo(id);
await formApi.setValues(record);
}
await markInitialized();
modalApi.modalLoading(false);
},
});
async function handleConfirm() {
try {
modalApi.lock(true);
const { valid } = await formApi.validate();
if (!valid) {
return;
}
// getValuesreadonly
const data = cloneDeep(await formApi.getValues());
await (isUpdate.value ? rentalPlanUpdate(data) : rentalPlanAdd(data));
resetInitialized();
emit('reload');
modalApi.close();
} catch (error) {
console.error(error);
} finally {
modalApi.lock(false);
}
}
async function handleClosed() {
await formApi.resetForm();
resetInitialized();
}
</script>
<template>
<BasicModal :title="title">
<BasicForm />
</BasicModal>
</template>