fix: edit button permission issue
This commit is contained in:
louis
parent
6f0f34a33c
commit
c0df1d704a
|
|
@ -1637,7 +1637,7 @@ declare namespace API {
|
|||
/** 产品名称 */
|
||||
name?: string;
|
||||
/** 产品规格 */
|
||||
productSpecification: string;
|
||||
productSpecification?: string;
|
||||
/** 所属公司 */
|
||||
companyId?: number;
|
||||
/** 单位 */
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<template #toolbar>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!$auth('system:role:create')"
|
||||
:disabled="!$auth('app:company:create')"
|
||||
@click="openEditModal({})"
|
||||
>
|
||||
新增
|
||||
|
|
|
|||
|
|
@ -1,21 +1,17 @@
|
|||
<template>
|
||||
<div v-if="columns?.length">
|
||||
<DynamicTable
|
||||
row-key="id"
|
||||
<DynamicTable row-key="id"
|
||||
header-title="产品管理"
|
||||
title-tooltip=""
|
||||
:data-request="Api.product.productList"
|
||||
:columns="columns"
|
||||
:exportFileName="'产品'"
|
||||
bordered
|
||||
size="small"
|
||||
>
|
||||
size="small">
|
||||
<template #toolbar>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!$auth('system:role:create')"
|
||||
@click="openEditModal({})"
|
||||
>
|
||||
<a-button type="primary"
|
||||
:disabled="!$auth('app:product:create')"
|
||||
@click="openEditModal({})">
|
||||
新增
|
||||
</a-button>
|
||||
</template>
|
||||
|
|
@ -24,180 +20,180 @@
|
|||
</template>
|
||||
|
||||
<script setup lang="tsx">
|
||||
import { useTable, type LoadDataParams, type TableColumn } 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({ formProps: { autoSubmitOnEnter: true } });
|
||||
const [showModal] = useFormModal();
|
||||
const [fnModal] = useModal();
|
||||
const isUploadPopupVisiable = ref(false);
|
||||
let columns = ref<TableColumnItem[]>();
|
||||
onMounted(() => {
|
||||
columns.value = [
|
||||
...baseColumns,
|
||||
{
|
||||
title: '附件',
|
||||
width: 50,
|
||||
maxWidth: 50,
|
||||
hideInSearch: true,
|
||||
hideInExport: 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),
|
||||
import { useTable, type LoadDataParams, type TableColumn } 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({ formProps: { autoSubmitOnEnter: true } });
|
||||
const [showModal] = useFormModal();
|
||||
const [fnModal] = useModal();
|
||||
const isUploadPopupVisiable = ref(false);
|
||||
let columns = ref<TableColumnItem[]>();
|
||||
onMounted(() => {
|
||||
columns.value = [
|
||||
...baseColumns,
|
||||
{
|
||||
title: '附件',
|
||||
width: 50,
|
||||
maxWidth: 50,
|
||||
hideInSearch: true,
|
||||
hideInExport: 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',
|
||||
},
|
||||
{
|
||||
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
|
||||
bussinessModule="product"
|
||||
bussinessRecordId={record.id}
|
||||
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();
|
||||
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
|
||||
bussinessModule="product"
|
||||
bussinessRecordId={record.id}
|
||||
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,
|
||||
},
|
||||
},
|
||||
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();
|
||||
};
|
||||
|
||||
// 如果是编辑的话，需要获取角色详情
|
||||
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 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();
|
||||
};
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<template #toolbar>
|
||||
<a-button
|
||||
type="primary"
|
||||
:disabled="!$auth('system:role:create')"
|
||||
:disabled="!$auth('app:project:create')"
|
||||
@click="openEditModal({})"
|
||||
>
|
||||
新增
|
||||
|
|
|
|||
|
|
@ -43,9 +43,9 @@
|
|||
if (!isJpgOrPng) {
|
||||
message.error('You can only upload JPG/PNG file!');
|
||||
}
|
||||
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||
const isLt2M = file.size / 1024 / 1024 < 30;
|
||||
if (!isLt2M) {
|
||||
message.error('Image must smaller than 2MB!');
|
||||
message.error('Image must smaller than 30MB!');
|
||||
}
|
||||
|
||||
return isJpgOrPng && isLt2M;
|
||||
|
|
|
|||
Loading…
Reference in New Issue