fix: 加工费管理
This commit is contained in:
58
apps/web-antd/src/views/system/process/api/index.ts
Normal file
58
apps/web-antd/src/views/system/process/api/index.ts
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
import { requestClient } from '#/api/request';
|
||||||
|
|
||||||
|
const prefix = 'process/';
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getProcessList(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}list`, { params: data });
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function getProcessOption(data: any) {
|
||||||
|
return requestClient.get<any>(`${prefix}option`, { params: data });
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 分页查询用户列表
|
||||||
|
*/
|
||||||
|
export async function getProcessOptionPidApi() {
|
||||||
|
return requestClient.get<any>(`${prefix}option`, { params: {
|
||||||
|
pid: 0,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取加工费详情
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export async function getProcessInfo(id: number) {
|
||||||
|
return requestClient.get<any>(`${prefix}detail`, { params: { id } });
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增加工费
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function createProcess(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}create`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑加工费
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function updateProcess(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}update`, data);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 删除加工费
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export async function deleteProcess(data: Record<string, any>) {
|
||||||
|
return requestClient.post<any>(`${prefix}delete`, data);
|
||||||
|
}
|
||||||
62
apps/web-antd/src/views/system/process/components/modal.vue
Normal file
62
apps/web-antd/src/views/system/process/components/modal.vue
Normal file
@@ -0,0 +1,62 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenForm } from '#/adapter/form';
|
||||||
|
import { createProcess, updateProcess } from '#/views/system/process/api';
|
||||||
|
import { modalFormProps } from '#/views/system/process/config/form';
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'FormModelDemo',
|
||||||
|
});
|
||||||
|
|
||||||
|
const isUpdate = ref(false);
|
||||||
|
const gridApi = ref();
|
||||||
|
|
||||||
|
const [Form, formApi] = useVbenForm(modalFormProps);
|
||||||
|
|
||||||
|
const [Modal, modalApi] = useVbenModal({
|
||||||
|
fullscreenButton: false,
|
||||||
|
draggable: true,
|
||||||
|
onCancel() {
|
||||||
|
modalApi.close();
|
||||||
|
},
|
||||||
|
onConfirm: async () => {
|
||||||
|
formApi.validate().then(async (e: any) => {
|
||||||
|
if (e.valid) {
|
||||||
|
const values = await formApi.getValues();
|
||||||
|
modalApi.setState({ loading: true, confirmLoading: true });
|
||||||
|
const submitApi = isUpdate.value ? updateProcess : createProcess;
|
||||||
|
submitApi(values)
|
||||||
|
.then(() => {
|
||||||
|
message.success('保存成功');
|
||||||
|
gridApi.value?.reload();
|
||||||
|
modalApi.close();
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
modalApi.setState({ loading: false, confirmLoading: false });
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
await formApi.validateAndSubmitForm();
|
||||||
|
},
|
||||||
|
onOpenChange(isOpen: boolean) {
|
||||||
|
gridApi.value = isOpen ? modalApi.getData()?.gridApi : null;
|
||||||
|
if (isOpen) {
|
||||||
|
const { values, update } = modalApi.getData<Record<string, any>>();
|
||||||
|
if (values) {
|
||||||
|
isUpdate.value = update;
|
||||||
|
formApi.setValues(values);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Modal :title="`${isUpdate === true ? '编辑' : '新增'}加工费`" class="w-[30%]">
|
||||||
|
<Form />
|
||||||
|
</Modal>
|
||||||
|
</template>
|
||||||
117
apps/web-antd/src/views/system/process/config/form.ts
Normal file
117
apps/web-antd/src/views/system/process/config/form.ts
Normal file
@@ -0,0 +1,117 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
import {getProcessOptionPidApi} from "#/views/system/process/api";
|
||||||
|
|
||||||
|
export const modalFormProps: VbenFormProps = {
|
||||||
|
wrapperClass: 'grid-cols-12', // 24栅格,
|
||||||
|
commonConfig: {
|
||||||
|
formItemClass: 'col-span-12',
|
||||||
|
// 所有表单项
|
||||||
|
componentProps: {
|
||||||
|
class: 'w-full',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
// handleSubmit: onSubmit,
|
||||||
|
layout: 'horizontal',
|
||||||
|
schema: [
|
||||||
|
// {
|
||||||
|
// fieldName: 'baseinfo',
|
||||||
|
// component: 'Divider',
|
||||||
|
// label: '基础信息',
|
||||||
|
// formItemClass: 'col-span-12',
|
||||||
|
// componentProps: {},
|
||||||
|
// hideLabel: true,
|
||||||
|
// renderComponentContent: () => {
|
||||||
|
// return {
|
||||||
|
// default: () => {
|
||||||
|
// return '基础信息';
|
||||||
|
// },
|
||||||
|
// };
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
fieldName: 'id',
|
||||||
|
label: 'ID',
|
||||||
|
formItemClass: 'col-span-6',
|
||||||
|
dependencies: {
|
||||||
|
show: false,
|
||||||
|
triggerFields: ['id'],
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入加工费昵称',
|
||||||
|
},
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '加工费名称',
|
||||||
|
rules: 'required',
|
||||||
|
},
|
||||||
|
// calc_method '计算方式 1固定价格 2贴数 3克数',
|
||||||
|
{
|
||||||
|
component: 'VbenSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择计算方式',
|
||||||
|
options: [
|
||||||
|
{
|
||||||
|
label: '固定价格',
|
||||||
|
value: 1,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '贴数',
|
||||||
|
value: 2,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '克数',
|
||||||
|
value: 3,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
fieldName: 'calc_method',
|
||||||
|
label: '计算方式',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'ApiSelect',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请选择计算方式',
|
||||||
|
api: getProcessOptionPidApi,
|
||||||
|
filterOption: (input: string, option: any) => {
|
||||||
|
// 自定义过滤逻辑，确保可以根据 name 进行搜索
|
||||||
|
return option?.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
|
||||||
|
},
|
||||||
|
showSearch: true,
|
||||||
|
// 菜单接口转options格式
|
||||||
|
afterFetch: (data: { id: number; name: string }[]) => {
|
||||||
|
// 在开头插入value = 0 的选项
|
||||||
|
data.unshift({
|
||||||
|
name: '一级分类',
|
||||||
|
id: 0,
|
||||||
|
});
|
||||||
|
return data.map((item: any) => ({
|
||||||
|
label: item.name,
|
||||||
|
value: item.id,
|
||||||
|
}));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
fieldName: 'pid',
|
||||||
|
label: '父级',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'InputNumber',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入计算价格',
|
||||||
|
},
|
||||||
|
fieldName: 'price',
|
||||||
|
label: '计算价格',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '请输入计算单位',
|
||||||
|
},
|
||||||
|
fieldName: 'unit',
|
||||||
|
label: '计算单位',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
showDefaultActions: false,
|
||||||
|
};
|
||||||
37
apps/web-antd/src/views/system/process/config/search.ts
Normal file
37
apps/web-antd/src/views/system/process/config/search.ts
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
|
|
||||||
|
// import dayjs from 'dayjs';
|
||||||
|
|
||||||
|
export const formOptions: VbenFormProps = {
|
||||||
|
// 默认展开
|
||||||
|
collapsed: false,
|
||||||
|
schema: [
|
||||||
|
{
|
||||||
|
component: 'VbenInput',
|
||||||
|
componentProps: {
|
||||||
|
placeholder: '输入名称',
|
||||||
|
},
|
||||||
|
defaultValue: '',
|
||||||
|
fieldName: 'name',
|
||||||
|
label: '加工费名称',
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// component: 'RangePicker',
|
||||||
|
// componentProps: {
|
||||||
|
// format: 'YYYY-MM-DD', // 确保格式与你需要的一致
|
||||||
|
// },
|
||||||
|
// // defaultValue: [dayjs().startOf('month'), dayjs()],
|
||||||
|
// fieldName: 'search_time',
|
||||||
|
// label: '时间范围',
|
||||||
|
// },
|
||||||
|
],
|
||||||
|
// 控制表单是否显示折叠按钮
|
||||||
|
showCollapseButton: true,
|
||||||
|
submitButtonOptions: {
|
||||||
|
content: '查询',
|
||||||
|
},
|
||||||
|
// 是否在字段值改变时提交表单
|
||||||
|
submitOnChange: false,
|
||||||
|
// 按下回车时是否提交表单
|
||||||
|
submitOnEnter: false,
|
||||||
|
};
|
||||||
67
apps/web-antd/src/views/system/process/config/table.ts
Normal file
67
apps/web-antd/src/views/system/process/config/table.ts
Normal file
@@ -0,0 +1,67 @@
|
|||||||
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { getProcessList } from '#/views/system/process/api';
|
||||||
|
|
||||||
|
export const gridOptions: VxeGridProps = {
|
||||||
|
checkboxConfig: {
|
||||||
|
highlight: true,
|
||||||
|
labelField: '',
|
||||||
|
},
|
||||||
|
columnConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
rowConfig: {
|
||||||
|
useKey: true,
|
||||||
|
},
|
||||||
|
columns: [
|
||||||
|
{ type: 'checkbox', width: 60 },
|
||||||
|
{ width: 60, treeNode: true },
|
||||||
|
{ field: 'id', align: 'left', title: 'ID', width: 100 },
|
||||||
|
{ field: 'name', title: '加工费名称' },
|
||||||
|
{ field: 'calc_method', title: '计算方式' },
|
||||||
|
{ field: 'price', title: '计算价格' },
|
||||||
|
{ field: 'unit', title: '计算单位' },
|
||||||
|
{ field: 'created_at', title: '注册时间' },
|
||||||
|
{ type: 'html', title: '操作', slots: { default: 'action' } },
|
||||||
|
],
|
||||||
|
keepSource: true,
|
||||||
|
pagerConfig: {},
|
||||||
|
proxyConfig: {
|
||||||
|
ajax: {
|
||||||
|
// 请求后端接口方法
|
||||||
|
query: async ({ page }, formValues) => {
|
||||||
|
return await getProcessList({
|
||||||
|
page: page.currentPage,
|
||||||
|
pageSize: page.pageSize,
|
||||||
|
...formValues,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
treeConfig: {
|
||||||
|
parentField: 'pid',
|
||||||
|
rowField: 'id',
|
||||||
|
transform: true,
|
||||||
|
expandAll: false,
|
||||||
|
},
|
||||||
|
height: 'auto',
|
||||||
|
border: false,
|
||||||
|
toolbarConfig: {
|
||||||
|
// 是否显示搜索表单控制按钮
|
||||||
|
// @ts-ignore 正式环境时有完整的类型声明
|
||||||
|
search: true,
|
||||||
|
refresh: true, // 刷新
|
||||||
|
print: false, // 打印
|
||||||
|
export: false, // 导出
|
||||||
|
// custom: true, // 自定义列
|
||||||
|
zoom: true, // 最大化最小化
|
||||||
|
slots: {
|
||||||
|
buttons: 'toolbar-buttons',
|
||||||
|
},
|
||||||
|
custom: {
|
||||||
|
// 自定义列-图标
|
||||||
|
icon: 'vxe-icon-menu',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
showOverflow: false,
|
||||||
|
};
|
||||||
187
apps/web-antd/src/views/system/process/index.vue
Normal file
187
apps/web-antd/src/views/system/process/index.vue
Normal file
@@ -0,0 +1,187 @@
|
|||||||
|
<script lang="ts" setup>
|
||||||
|
import type { VxeGridListeners } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
|
import { ref } from 'vue';
|
||||||
|
|
||||||
|
import { Page, useVbenModal } from '@vben/common-ui';
|
||||||
|
|
||||||
|
import { Button, Image, message } from 'ant-design-vue';
|
||||||
|
|
||||||
|
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||||
|
import { TableAction } from '#/components/table-action';
|
||||||
|
|
||||||
|
import { deleteProcess } from './api';
|
||||||
|
import FormModalDemo from './components/modal.vue';
|
||||||
|
import { formOptions } from './config/search';
|
||||||
|
import { gridOptions } from './config/table';
|
||||||
|
|
||||||
|
const hasTopTableDropDownActions = ref(false);
|
||||||
|
|
||||||
|
const gridEvents: VxeGridListeners<any> = {
|
||||||
|
checkboxChange() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
checkboxAll() {
|
||||||
|
// eslint-disable-next-line no-use-before-define
|
||||||
|
const records = gridApi.grid.getCheckboxRecords();
|
||||||
|
hasTopTableDropDownActions.value = records.length > 0;
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const [Grid, gridApi] = useVbenVxeGrid({
|
||||||
|
formOptions,
|
||||||
|
gridOptions,
|
||||||
|
gridEvents,
|
||||||
|
});
|
||||||
|
|
||||||
|
const [FormModal, formModalApi] = useVbenModal({
|
||||||
|
connectedComponent: FormModalDemo,
|
||||||
|
});
|
||||||
|
|
||||||
|
const showModal = (data = {}, isUpdate = false) => {
|
||||||
|
formModalApi.setData({
|
||||||
|
// 表单值
|
||||||
|
values: data,
|
||||||
|
update: isUpdate,
|
||||||
|
gridApi,
|
||||||
|
});
|
||||||
|
formModalApi.open();
|
||||||
|
};
|
||||||
|
|
||||||
|
const deleteApi = (row: any) => {
|
||||||
|
let ids = [];
|
||||||
|
if (row) {
|
||||||
|
ids.push(row);
|
||||||
|
} else {
|
||||||
|
ids = gridApi.grid.getCheckboxRecords().map((item) => item.id);
|
||||||
|
}
|
||||||
|
deleteProcess({ ids }).then(() => {
|
||||||
|
message.success('删除成功!');
|
||||||
|
gridApi.reload();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const expandAll = () => {
|
||||||
|
gridApi.grid?.setAllTreeExpand(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const collapseAll = () => {
|
||||||
|
gridApi.grid?.setAllTreeExpand(false);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<Page auto-content-height title="加工费管理">
|
||||||
|
<FormModal />
|
||||||
|
<Grid>
|
||||||
|
<template #toolbar-buttons>
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '新增',
|
||||||
|
type: 'primary',
|
||||||
|
icon: 'ant-design:plus-outlined',
|
||||||
|
// auth: ['超级加工费', 'sys:user:save'],
|
||||||
|
onClick: showModal.bind(null),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '展开全部',
|
||||||
|
type: 'primary',
|
||||||
|
// auth: ['超级菜单', 'sys:user:save'],
|
||||||
|
onClick: expandAll.bind(null),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '收起全部',
|
||||||
|
type: 'primary',
|
||||||
|
// auth: ['超级菜单', 'sys:user:save'],
|
||||||
|
onClick: collapseAll.bind(null),
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
icon: 'ant-design:delete-outlined',
|
||||||
|
ifShow: hasTopTableDropDownActions,
|
||||||
|
// auth: ['超级加工费', 'sys:user:save'],
|
||||||
|
popConfirm: {
|
||||||
|
title: '确定删除吗？',
|
||||||
|
confirm: deleteApi.bind(null, false),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<template #more>
|
||||||
|
<Button style="margin-left: 16px">
|
||||||
|
批量操作
|
||||||
|
<Icon icon="ant-design:down-outlined" />
|
||||||
|
</Button>
|
||||||
|
</template>
|
||||||
|
</TableAction>
|
||||||
|
</template>
|
||||||
|
<template #logo="{ row }">
|
||||||
|
<Image :src="row.logo" height="30" width="30" />
|
||||||
|
</template>
|
||||||
|
<template #open_business_license="{ row }">
|
||||||
|
<Image :src="row.open_business_license" height="30" width="30" />
|
||||||
|
</template>
|
||||||
|
<template #business_license="{ row }">
|
||||||
|
<Image :src="row.business_license" height="30" width="30" />
|
||||||
|
</template>
|
||||||
|
<template #product_registration_certificate="{ row }">
|
||||||
|
<Image
|
||||||
|
:src="row.product_registration_certificate"
|
||||||
|
height="30"
|
||||||
|
width="30"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
<template #toolbar-tools></template>
|
||||||
|
<template #action="{ row }">
|
||||||
|
<TableAction
|
||||||
|
:actions="[
|
||||||
|
{
|
||||||
|
label: '编辑',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'uil:edit',
|
||||||
|
size: 'small',
|
||||||
|
// auth: ['process', 'sys:role:detail'],
|
||||||
|
onClick: showModal.bind(null, row, true),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '删除',
|
||||||
|
type: 'link',
|
||||||
|
icon: 'ant-design:delete-outlined',
|
||||||
|
size: 'small',
|
||||||
|
// auth: ['process', 'sys:role:detail'],
|
||||||
|
popConfirm: {
|
||||||
|
title: '确定删除吗？',
|
||||||
|
confirm: deleteApi.bind(null, row.id),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]"
|
||||||
|
:drop-down-actions="[
|
||||||
|
// {
|
||||||
|
// label: '编辑',
|
||||||
|
// type: 'link',
|
||||||
|
// icon: 'ant-design:delete-outlined',
|
||||||
|
// size: 'small',
|
||||||
|
// // auth: ['process', 'sys:role:detail'],
|
||||||
|
// onClick: showModal.bind(null, row, true),
|
||||||
|
// },
|
||||||
|
// {
|
||||||
|
// label: '删除',
|
||||||
|
// type: 'link',
|
||||||
|
// icon: 'ant-design:delete-outlined',
|
||||||
|
// size: 'small',
|
||||||
|
// // auth: ['process', 'sys:role:detail'],
|
||||||
|
// popConfirm: {
|
||||||
|
// title: '确定删除吗？',
|
||||||
|
// confirm: deleteApi.bind(null, row.id),
|
||||||
|
// },
|
||||||
|
// },
|
||||||
|
]"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</Grid>
|
||||||
|
</Page>
|
||||||
|
</template>
|
||||||
Reference in New Issue
Block a user