yixr
/
oa_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 原材料出入库模块

This commit is contained in:
louis 2024-03-04 17:31:39 +08:00
parent b5ccfe5e0e
commit b491933e4b
18 changed files with 1055 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/api/backend/api/index.ts
View File

@ -28,7 +28,8 @@ import * as businessTodo from './businessTodo';
import * as contract from './contract'; import * as contract from './contract';
import * as materialsInventory from './materialsInventory'; import * as materialsInventory from './materialsInventory';
import * as company from './company'; import * as company from './company';
import * as product from './product';
import * as materialsInOut from './materialsInOut';
export default { export default {
auth, auth,
account, account,
@ -56,4 +57,6 @@ export default {
contract, contract,
materialsInventory, materialsInventory,
company, company,
product,
materialsInOut,
}; };

110
src/api/backend/api/materialsInOut.ts Normal file
View File

@ -0,0 +1,110 @@
import { request, type RequestOptions } from '@/utils/request';
/** 获取原材料出入库记录列表 GET /api/materials-in-out */
export async function materialsInOutList(
params: API.MaterialsInOutListParams,
options?: RequestOptions,
) {
return request<{
items?: API.MaterialsInOutEntity[];
meta?: {
itemCount?: number;
totalItems?: number;
itemsPerPage?: number;
totalPages?: number;
currentPage?: number;
};
}>('/api/materials-in-out', {
method: 'GET',
params: {
// page has a default value: 1
page: '1',
// pageSize has a default value: 10
pageSize: '10',
...params,
},
...(options || {}),
});
}
/** 新增原材料出入库记录 POST /api/materials-in-out */
export async function materialsInOutCreate(
body: API.MaterialsInOutDto,
options?: RequestOptions,
) {
return request<any>('/api/materials-in-out', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || { successMsg: '创建成功' }),
});
}
/** 获取原材料出入库记录信息 GET /api/materials-in-out/${param0} */
export async function materialsInOutInfo(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.MaterialsInOutInfoParams,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<API.MaterialsInOutEntity>(`/api/contract/${param0}`, {
method: 'GET',
params: { ...queryParams },
...(options || {}),
});
}
/** 解除原材料出入库记录和附件关联 PUT /api/materials-in-out/unlink-attachments/${param0} */
export async function unlinkAttachments(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.MaterialsInOutUpdateParams,
body: API.MaterialsInOutDto,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<any>(`/api/materials-in-out/unlink-attachments/${param0}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
params: { ...queryParams },
data: body,
...options,
});
}
/** 更新原材料出入库记录 PUT /api/materials-in-out/${param0} */
export async function MaterialsInOutUpdate(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.MaterialsInOutUpdateParams,
body: API.MaterialsInOutUpdateDto,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<any>(`/api/materials-in-out/${param0}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
params: { ...queryParams },
data: body,
...(options || { successMsg: '更新成功' }),
});
}
/** 删除原材料出入库记录 DELETE /api/materials-in-out/${param0} */
export async function materialsInOutDelete(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.MaterialsInOutDeleteParams,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<any>(`/api/materials-in-out/${param0}`, {
method: 'DELETE',
params: { ...queryParams },
...(options || { successMsg: '删除成功' }),
});
}

104
src/api/backend/api/product.ts Normal file
View File

@ -0,0 +1,104 @@
import { request, type RequestOptions } from '@/utils/request';
/** 获取产品列表 GET /api/product */
export async function productList(params: API.ProductParams, options?: RequestOptions) {
return request<{
items?: API.ProductEntity[];
meta?: {
itemCount?: number;
totalItems?: number;
itemsPerPage?: number;
totalPages?: number;
currentPage?: number;
};
}>('/api/product', {
method: 'GET',
params: {
// page has a default value: 1
page: '1',
// pageSize has a default value: 10
pageSize: '10',
...params,
},
...(options || {}),
});
}
/** 新增产品 POST /api/product */
export async function productCreate(body: API.ProductDto, options?: RequestOptions) {
return request<any>('/api/product', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
data: body,
...(options || { successMsg: '创建成功' }),
});
}
/** 获取产品信息 GET /api/product/${param0} */
export async function productInfo(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.ProductInfoParams,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<API.ProductEntity>(`/api/product/${param0}`, {
method: 'GET',
params: { ...queryParams },
...(options || {}),
});
}
/** 解除产品和附件关联 PUT /api/product/unlink-attachments/${param0} */
export async function unlinkAttachments(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.ProductUpdateParams,
body: API.ProductUpdateDto,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<any>(`/api/product/unlink-attachments/${param0}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
params: { ...queryParams },
data: body,
...options,
});
}
/** 更新产品 PUT /api/product/${param0} */
export async function productUpdate(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.ProductUpdateParams,
body: API.ProductUpdateDto,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<any>(`/api/product/${param0}`, {
method: 'PUT',
headers: {
'Content-Type': 'application/json',
},
params: { ...queryParams },
data: body,
...(options || { successMsg: '更新成功' }),
});
}
/** 删除产品 DELETE /api/product/${param0} */
export async function productDelete(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.ProductDeleteParams,
options?: RequestOptions,
) {
const { id: param0, ...queryParams } = params;
return request<any>(`/api/product/${param0}`, {
method: 'DELETE',
params: { ...queryParams },
...(options || { successMsg: '删除成功' }),
});
}

150
src/api/backend/api/typings.d.ts vendored
View File

@ -1356,7 +1356,7 @@ declare namespace API {
type ContractInfoParams = { type ContractInfoParams = {
id: number; id: number;
}; };
// Materials Inventory
type MaterialsInventoryUpdateParams = { type MaterialsInventoryUpdateParams = {
id: number; id: number;
}; };
@ -1513,6 +1513,7 @@ declare namespace API {
type MaterialsInventoryDeleteParams = { type MaterialsInventoryDeleteParams = {
id: number; id: number;
}; };
// Company
type CompanyEntity = { type CompanyEntity = {
/** 公司名称 */ /** 公司名称 */
name: string; name: string;
@ -1551,5 +1552,152 @@ declare namespace API {
type CompanyDeleteParams = { type CompanyDeleteParams = {
id: number; id: number;
}; };
// Product
type ProductEntity = {
/** 产品名称 */
name: string;
/** 是否删除 */
isDelete: string;
/** 附件 */
files?: StorageInfo[];
id: number;
createdAt: string;
updatedAt: string;
};
type ProductDto = {
/** 产品名称 */
name: string;
fileIds?: number[];
};
type ProductUpdateParams = {
id: number;
};
type ProductParams = {
page?: number;
pageSize?: number;
field?: string;
order?: 'ASC' | 'DESC';
_t?: number;
};
type ProductInfoParams = {
id: number;
};
type ProductUpdateDto = {
/** 产品名称 */
name?: string;
/** 附件 */
fileIds?: number[];
};
type ProductDeleteParams = {
id: number;
};
// Materials In out history
type MaterialsInOutUpdateParams = {
id: number;
};
type MaterialsInOutInfoParams = {
id: number;
};
type MaterialsInOutListParams = {
page?: number;
pageSize?: number;
field?: string;
order?: 'ASC' | 'DESC';
_t?: number;
};
type MaterialsInOutEntity = {
/** 公司名称 */
companyName: string;
/** 产品名称 */
product: number;
/** 出库或入库 */
inOrOut: number;
/** 单位(字典) */
unit: number;
/** 时间 */
time: Date;
/** 数量 */
quantity: number;
/** 单价 */
unitPrice: number;
/** 金额 */
amount: number;
/** 经办人 */
agent: string;
/** 领料单号 */
issuanceNumber?: number;
/** 项目 */
project: string;
/** 备注 */
remark: string;
/** 附件 */
files: StorageInfo[];
id: number;
createdAt: string;
updatedAt: string;
};
type MaterialsInOutDto = {
/** 公司名称 */
companyName: string;
/** 产品名称 */
product: number;
/** 出库或入库 */
inOrOut: number;
/** 单位(字典) */
unit: number;
/** 时间 */
time: Date;
/** 数量 */
quantity: number;
/** 单价 */
unitPrice: number;
/** 金额 */
amount: number;
/** 经办人 */
agent: string;
/** 领料单号 */
issuanceNumber?: number;
/** 项目 */
project: string;
/** 备注 */
remark: string;
/** 附件 */
files: StorageInfo[];
};
type MaterialsInOutUpdateDto = {
/** 公司名称 */
companyName: string;
/** 产品名称 */
product: number;
/** 出库或入库 */
inOrOut: number;
/** 单位(字典) */
unit: number;
/** 时间 */
time: Date;
/** 数量 */
quantity: number;
/** 单价 */
unitPrice: number;
/** 金额 */
amount: number;
/** 经办人 */
agent: string;
/** 领料单号 */
issuanceNumber?: number;
/** 项目 */
project: string;
/** 备注 */
remark: string;
/** 附件 */
fileIds: number[];
};
type MaterialsInOutDeleteParams = {
id: number;
};
} }

4
src/enums/materialsInventoryEnum.ts Normal file
View File

@ -0,0 +1,4 @@
export enum MaterialsInOutEnum {
In = 0, // 入库
Out = 1, // 出库
}

7
src/permission/permCode.ts
View File

@ -84,7 +84,12 @@ const permissions = [
"app:company:read", "app:company:read",
"app:company:create", "app:company:create",
"app:company:update", "app:company:update",
"app:company:delete" "app:company:delete",
"app:product:list",
"app:product:read",
"app:product:create",
"app:product:update",
"app:product:delete"
] as const; ] as const;
export type PermissionType = (typeof permissions)[number]; export type PermissionType = (typeof permissions)[number];

0
src/views/company/columns.tsx → src/views/meterials-inventory/company/columns.tsx
View File

0
src/views/company/formSchemas.ts → src/views/meterials-inventory/company/formSchemas.ts
View File

0
src/views/company/index.vue → src/views/meterials-inventory/company/index.vue
View File

131
src/views/meterials-inventory/in-out/columns.tsx Normal file
View File

@ -0,0 +1,131 @@
import type { TableColumn } from '@/components/core/dynamic-table';
import { ContractStatusEnum } from '@/enums/contractEnum';
import { DictEnum } from '@/enums/dictEnum';
import { MaterialsInOutEnum } from '@/enums/materialsInventoryEnum';
import { useDictStore } from '@/store/modules/dict';
import { formatToDate } from '@/utils/dateUtil';
import { Tag } from 'ant-design-vue';
export type TableListItem = API.MaterialsInOutEntity;
export type TableColumnItem = TableColumn<TableListItem>;
const dictStore = useDictStore();
export const baseColumns: TableColumnItem[] = [
{
title: '产品名称',
width: 180,
dataIndex: 'product',
},
{
title: '单位',
width: 60,
hideInSearch: true,
dataIndex: 'unit',
formItemProps: {
component: 'Select',
componentProps: {
options: dictStore
.getDictItemsByCode(DictEnum.Unit)
.map(({ label, id }) => ({ value: id, label })),
},
},
customRender: ({ record }) => {
return dictStore.getDictItemsByCode(DictEnum.Unit)?.length
? dictStore.getDictItemsByCode(DictEnum.Unit).find((item) => item.id === record.unit)
?.label || ''
: '';
},
},
{
title: '入库/出库',
width: 80,
dataIndex: 'inOrOut',
fixed: 'right',
formItemProps: {
component: 'Select',
componentProps: {
options: Object.values(MaterialsInOutEnum)
.filter((value) => typeof value === 'number')
.map((item) => formatStatus(item as MaterialsInOutEnum)),
},
},
customRender: ({ record }) => {
const { color, label } = formatStatus(record.inOrOut);
return <Tag color={color}>{label}</Tag>;
},
},
{
title: '时间',
width: 120,
align: 'center',
dataIndex: 'time',
customRender: ({ record }) => {
return formatToDate(record.time);
},
},
{
title: '数量',
hideInSearch: true,
width: 80,
dataIndex: 'quantity',
},
{
title: '单价',
hideInSearch: true,
width: 80,
dataIndex: 'unitPrice',
},
{
title: '金额',
width: 80,
align: 'center',
dataIndex: 'amount',
},
{
title: '经办人',
width: 80,
dataIndex: 'agent',
},
{
title: '领料单号',
width: 80,
dataIndex: 'issuanceNumber',
},
{
title: '项目',
width: 80,
dataIndex: 'project',
},
{
title: '备注',
width: 80,
dataIndex: 'remark',
},
];
export function formatStatus(status: MaterialsInOutEnum): {
color: string;
label: string;
value: number;
} {
switch (status) {
case MaterialsInOutEnum.In:
return {
color: 'green',
label: '入库',
value: MaterialsInOutEnum.In,
};
case MaterialsInOutEnum.Out:
return {
color: 'red',
label: '出库',
value: MaterialsInOutEnum.Out,
};
default:
return {
color: 'green',
label: '入库',
value: MaterialsInOutEnum.In,
};
}
}

115
src/views/meterials-inventory/in-out/formSchemas.ts Normal file
View File

@ -0,0 +1,115 @@
import type { FormSchema } from '@/components/core/schema-form/';
import { ContractStatusEnum } from '@/enums/contractEnum';
import { formatStatus } from './columns';
export const contractSchemas = (
contractTypes: API.DictItemEntity[],
): FormSchema<API.ContractEntity>[] => [
// {
// field: 'contractNumber',
// component: 'Input',
// label: '合同编号',
// rules: [{ required: true, type: 'string' }],
// colProps: {
// span: 12,
// },
// },
// {
// field: 'title',
// component: 'Input',
// label: '合同标题',
// rules: [{ required: true, type: 'string' }],
// colProps: {
// span: 12,
// },
// },
// {
// field: 'partyA',
// component: 'Input',
// label: '甲方',
// rules: [{ required: true, type: 'string' }],
// colProps: {
// span: 12,
// },
// },
// {
// field: 'partyB',
// component: 'Input',
// label: '乙方',
// rules: [{ required: true, type: 'string' }],
// colProps: {
// span: 12,
// },
// },
// {
// field: 'signingDate',
// label: '签订时间',
// component: 'DatePicker',
// // defaultValue: new Date(),
// colProps: { span: 12 },
// componentProps: {},
// },
// {
// field: 'deliveryDeadline',
// label: '交付期限',
// component: 'DatePicker',
// // defaultValue: new Date(),
// colProps: { span: 12 },
// },
// {
// field: 'type',
// label: '合同类型',
// component: 'Select',
// required: true,
// colProps: {
// span: 12,
// },
// componentProps: {
// options: contractTypes.map(({ label, id }) => ({ value: id, label })),
// },
// },
// {
// field: 'status',
// label: '审核结果',
// component: 'Select',
// required:true,
// defaultValue: 0,
// colProps: {
// span: 12,
// },
// componentProps: {
// allowClear: false,
// options: Object.values(ContractStatusEnum)
// .filter((value) => typeof value === 'number')
// .map((item) => formatStatus(item as ContractStatusEnum)),
// },
// },
// {
// field: 'remark',
// component: 'InputTextArea',
// label: '备注',
// },
// {
// field: 'menuIds',
// component: 'Tree',
// label: '菜单权限',
// componentProps: {
// checkable: true,
// vModelKey: 'checkedKeys',
// fieldNames: {
// title: 'name',
// key: 'id',
// },
// style: {
// height: '350px',
// paddingTop: '5px',
// overflow: 'auto',
// borderRadius: '6px',
// border: '1px solid #dcdfe6',
// resize: 'vertical',
// },
// },
// },
];

206
src/views/meterials-inventory/in-out/index.vue Normal file
View File

@ -0,0 +1,206 @@
<template>
<div v-if="columns?.length">
<DynamicTable
row-key="id"
header-title="原材料盘点"
title-tooltip=""
:data-request="Api.materialsInOut.materialsInOutList"
:columns="columns"
bordered
:scroll="{ x: 1920 }"
size="small"
>
<template #toolbar>
<a-button
type="primary"
:disabled="!$auth('system:role:create')"
@click="openEditModal({})"
>
新增
</a-button>
</template>
</DynamicTable>
</div>
</template>
<script setup lang="tsx">
import { useTable } from '@/components/core/dynamic-table';
import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
import Api from '@/api/';
import { onMounted, ref, type FunctionalComponent } from 'vue';
import { useFormModal, useModal } from '@/hooks/useModal';
import { Button } from 'ant-design-vue';
import AttachmentManage from '@/components/business/attachment-manage/index.vue';
import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
defineOptions({
name: 'MaterialsInOut',
});
const [DynamicTable, dynamicTableInstance] = useTable();
const [showModal] = useFormModal();
const [fnModal] = useModal();
const isUploadPopupVisiable = ref(false);
// contractList;
let columns = ref<TableColumnItem[]>();
onMounted(() => {
columns.value = [
...baseColumns,
{
title: '附件',
width: 50,
maxWidth: 50,
hideInSearch: true,
fixed: 'right',
dataIndex: 'files',
customRender: ({ record }) => <FilesRender {...record} />,
},
{
title: '操作',
maxWidth: 150,
width: 150,
minWidth: 150,
dataIndex: 'ACTION',
hideInSearch: true,
fixed: 'right',
actions: ({ record }) => [
{
icon: 'ant-design:edit-outlined',
tooltip: '编辑',
auth: {
perm: 'app:contract:update',
effect: 'disable',
},
onClick: () => openEditModal(record),
},
{
icon: 'ant-design:delete-outlined',
color: 'red',
tooltip: '删除此记录',
auth: 'app:contract:delete',
popConfirm: {
title: '你确定要删除吗？',
placement: 'left',
onConfirm: () => delRowConfirm(record.id),
},
},
{
icon: 'ant-design:cloud-upload-outlined',
tooltip: '上传附件',
onClick: () => openAttachmentUploadModal(record),
},
],
},
];
});
const openAttachmentUploadModal = async (record: TableListItem) => {
// isUploadPopupVisiable.value = true;
// fnModal.show({
// width: 800,
// title: `记录编号: ${record.contractNumber}`,
// content: () => {
// return (
// <AttachmentUpload
// onClose={handleUploadClose}
// afterUploadCallback={(files) => {
// afterUploadCallback(files, record.id);
// }}
// ></AttachmentUpload>
// );
// },
// destroyOnClose: true,
// open: isUploadPopupVisiable.value,
// footer: null,
// });
};
const handleUploadClose = (hasSuccess: boolean) => {
fnModal.hide();
isUploadPopupVisiable.value = false;
};
const afterUploadCallback = async (
files: { filename: { path: string; id: number } }[],
id: number,
) => {
await Api.contract.contractUpdate({ id }, { fileIds: files.map((item) => item.filename.id) });
dynamicTableInstance?.reload();
};
/**
* @description 打开新增/编辑弹窗
*/
const openEditModal = async (record: Partial<TableListItem>) => {
// const [formRef] = await showModal({
// modalProps: {
// title: `${record.id ? '编辑' : '新增'}盘点记录`,
// width: '50%',
// onFinish: async (values) => {
// const params = {
// ...values,
// signingDate: formatToDate(values.signingDate),
// deliveryDeadline: formatToDate(values.deliveryDeadline),
// };
// if (record.id) {
// await Api.contract.contractUpdate({ id: record.id }, params);
// } else {
// await Api.contract.contractCreate(params);
// }
// dynamicTableInstance?.reload();
// },
// },
// formProps: {
// labelWidth: 100,
// schemas: contractSchemas(contractTypes.value),
// },
// });
// // 如果是编辑的话，需要获取角色详情
// if (record.id) {
// const info = await Api.contract.contractInfo({ id: record.id });
// formRef?.setFieldsValue({
// ...info,
// });
// }
};
const delRowConfirm = async (record) => {
await Api.contract.contractDelete({ id: record });
dynamicTableInstance?.reload();
};
const FilesRender: FunctionalComponent<TableListItem> = (contract: TableListItem) => {
const [fnModal] = useModal();
return (
<Button
type="link"
onClick={() => {
openFilesManageModal(fnModal, contract);
}}
>
{contract.files?.length || 0}
</Button>
);
};
const openFilesManageModal = (fnModal, contract: TableListItem) => {
// const fileIds = contract.files?.map((item) => item.id) || [];
// fnModal.show({
// width: 1200,
// title: `附件管理`,
// content: () => {
// return (
// <AttachmentManage
// fileIds={fileIds}
// onDelete={(unlinkIds) => unlinkAttachments(contract.id, unlinkIds)}
// ></AttachmentManage>
// );
// },
// destroyOnClose: true,
// footer: null,
// });
};
const unlinkAttachments = async (id: number, unlinkIds: number[]) => {
await Api.contract.unlinkAttachments({ id }, { fileIds: unlinkIds });
dynamicTableInstance?.reload();
};
</script>
<style lang="less" scoped></style>

0
src/views/meterials-inventory/columns.tsx → src/views/meterials-inventory/inventory-check/columns.tsx
View File

0
src/views/meterials-inventory/formSchemas.ts → src/views/meterials-inventory/inventory-check/formSchemas.ts
View File

6
src/views/meterials-inventory/index.vue → src/views/meterials-inventory/inventory-check/index.vue
View File

@ -60,9 +60,9 @@
}, },
{ {
title: '操作', title: '操作',
maxWidth: 80, maxWidth: 150,
width: 80, width: 150,
minWidth: 80, minWidth: 150,
dataIndex: 'ACTION', dataIndex: 'ACTION',
hideInSearch: true, hideInSearch: true,
fixed: 'right', fixed: 'right',

10
src/views/meterials-inventory/product/columns.tsx Normal file
View File

@ -0,0 +1,10 @@
import type { TableColumn } from '@/components/core/dynamic-table';
export type TableListItem = API.ProductEntity;
export type TableColumnItem = TableColumn<TableListItem>;
export const baseColumns: TableColumnItem[] = [
{
title: '产品名称',
dataIndex: 'name',
},
];

12
src/views/meterials-inventory/product/formSchemas.ts Normal file
View File

@ -0,0 +1,12 @@
import type { FormSchema } from '@/components/core/schema-form/';
export const formSchemas: FormSchema<API.CompanyEntity>[] = [
{
field: 'name',
component: 'Input',
label: '产品名称',
rules: [{ required: true, type: 'string' }],
colProps: {
span: 12,
},
},
];

201
src/views/meterials-inventory/product/index.vue Normal file
View File

@ -0,0 +1,201 @@
<template>
<div v-if="columns?.length">
<DynamicTable
row-key="id"
header-title="产品管理"
title-tooltip=""
:data-request="Api.product.productList"
:columns="columns"
bordered
size="small"
>
<template #toolbar>
<a-button
type="primary"
:disabled="!$auth('system:role:create')"
@click="openEditModal({})"
>
新增
</a-button>
</template>
</DynamicTable>
</div>
</template>
<script setup lang="tsx">
import { useTable } from '@/components/core/dynamic-table';
import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
import Api from '@/api/';
import { useFormModal, useModal } from '@/hooks/useModal';
import { formSchemas } from './formSchemas';
import { Button } from 'ant-design-vue';
import AttachmentManage from '@/components/business/attachment-manage/index.vue';
import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
import { ref, onMounted, type FunctionalComponent } from 'vue';
import { useDictStore } from '@/store/modules/dict';
defineOptions({
name: 'Product',
});
const [DynamicTable, dynamicTableInstance] = useTable();
const [showModal] = useFormModal();
const [fnModal] = useModal();
const isUploadPopupVisiable = ref(false);
const dictStore = useDictStore();
// productList;
let columns = ref<TableColumnItem[]>();
onMounted(() => {
columns.value = [
...baseColumns,
{
title: '附件',
width: 50,
maxWidth: 50,
hideInSearch: true,
dataIndex: 'files',
customRender: ({ record }) => <FilesRender {...record} />,
},
{
title: '操作',
maxWidth: 150,
width: 150,
minWidth: 150,
fixed:'right',
dataIndex: 'ACTION',
hideInSearch: true,
actions: ({ record }) => [
{
icon: 'ant-design:edit-outlined',
tooltip: '编辑',
auth: {
perm: 'app:product:update',
effect: 'disable',
},
onClick: () => openEditModal(record),
},
{
icon: 'ant-design:delete-outlined',
color: 'red',
tooltip: '删除此产品',
auth: 'app:product:delete',
popConfirm: {
title: '你确定要删除吗？',
placement: 'left',
onConfirm: () => delRowConfirm(record.id),
},
},
{
icon: 'ant-design:cloud-upload-outlined',
tooltip: '上传附件',
onClick: () => openAttachmentUploadModal(record),
},
],
},
];
});
const openAttachmentUploadModal = async (record: TableListItem) => {
isUploadPopupVisiable.value = true;
fnModal.show({
width: 800,
title: `产品: ${record.name}`,
content: () => {
return (
<AttachmentUpload
onClose={handleUploadClose}
afterUploadCallback={(files) => {
afterUploadCallback(files, record.id);
}}
></AttachmentUpload>
);
},
destroyOnClose: true,
open: isUploadPopupVisiable.value,
footer: null,
});
};
const handleUploadClose = (hasSuccess: boolean) => {
fnModal.hide();
isUploadPopupVisiable.value = false;
};
const afterUploadCallback = async (
files: { filename: { path: string; id: number } }[],
id: number,
) => {
await Api.product.productUpdate({ id }, { fileIds: files.map((item) => item.filename.id) });
dynamicTableInstance?.reload();
};
/**
* @description 打开新增/编辑弹窗
*/
const openEditModal = async (record: Partial<TableListItem>) => {
const [formRef] = await showModal({
modalProps: {
title: `${record.id ? '编辑' : '新增'}产品`,
width: '50%',
onFinish: async (values) => {
if (record.id) {
await Api.product.productUpdate({ id: record.id }, values);
} else {
await Api.product.productCreate(values);
}
dynamicTableInstance?.reload();
},
},
formProps: {
labelWidth: 100,
schemas: formSchemas,
},
});
// 如果是编辑的话，需要获取角色详情
if (record.id) {
const info = await Api.product.productInfo({ id: record.id });
formRef?.setFieldsValue({
...info,
});
}
};
const delRowConfirm = async (record) => {
await Api.product.productDelete({ id: record });
dynamicTableInstance?.reload();
};
const FilesRender: FunctionalComponent<TableListItem> = (product: TableListItem) => {
const [fnModal] = useModal();
return (
<Button
type="link"
onClick={() => {
openFilesManageModal(fnModal, product);
}}
>
{product.files?.length || 0}
</Button>
);
};
const openFilesManageModal = (fnModal, product: TableListItem) => {
const fileIds = product.files?.map((item) => item.id) || [];
fnModal.show({
width: 1200,
title: `附件管理`,
content: () => {
return (
<AttachmentManage
fileIds={fileIds}
onDelete={(unlinkIds) => unlinkAttachments(product.id, unlinkIds)}
></AttachmentManage>
);
},
destroyOnClose: true,
footer: null,
});
};
const unlinkAttachments = async (id: number, unlinkIds: number[]) => {
await Api.product.unlinkAttachments({ id }, { fileIds: unlinkIds });
dynamicTableInstance?.reload();
};
</script>
<style lang="less" scoped></style>