feat: 出入库记录模块,产品模块开发

This commit is contained in:
louis 2024-03-05 22:26:43 +08:00
parent 11f9c58ee1
commit 55884200da
20 changed files with 302 additions and 202 deletions

View File

@ -77,7 +77,7 @@ export async function unlinkAttachments(
} }
/** 更新原材料出入库记录 PUT /api/materials-in-out/${param0} */ /** 更新原材料出入库记录 PUT /api/materials-in-out/${param0} */
export async function MaterialsInOutUpdate( export async function materialsInOutUpdate(
// 叠加生成的Param类型 (非body参数swagger默认没有生成对象) // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
params: API.MaterialsInOutUpdateParams, params: API.MaterialsInOutUpdateParams,
body: API.MaterialsInOutUpdateDto, body: API.MaterialsInOutUpdateDto,

View File

@ -1,5 +1,7 @@
import { request, type RequestOptions } from '@/utils/request'; import { request, type RequestOptions } from '@/utils/request';
/** 获取产品列表 GET /api/product */ /** 获取产品列表 GET /api/product */
export async function productList(params: API.ProductParams, options?: RequestOptions) { export async function productList(params: API.ProductParams, options?: RequestOptions) {
return request<{ return request<{

View File

@ -1536,7 +1536,8 @@ declare namespace API {
type CompanyParams = { type CompanyParams = {
page?: number; page?: number;
pageSize?: number; pageSize?: number;
name?:string; name?: string;
productId?:number;
field?: string; field?: string;
order?: 'ASC' | 'DESC'; order?: 'ASC' | 'DESC';
_t?: number; _t?: number;
@ -1584,7 +1585,8 @@ declare namespace API {
type ProductParams = { type ProductParams = {
page?: number; page?: number;
pageSize?: number; pageSize?: number;
company?:string; company?: string;
name?: string;
field?: string; field?: string;
order?: 'ASC' | 'DESC'; order?: 'ASC' | 'DESC';
_t?: number; _t?: number;
@ -1609,6 +1611,7 @@ declare namespace API {
// Materials In out history // Materials In out history
type MaterialsInOutUpdateParams = { type MaterialsInOutUpdateParams = {
id: number; id: number;
fileIds?: number[];
}; };
type MaterialsInOutInfoParams = { type MaterialsInOutInfoParams = {
@ -1626,8 +1629,10 @@ declare namespace API {
type MaterialsInOutEntity = { type MaterialsInOutEntity = {
/** 公司名称 */ /** 公司名称 */
companyName: string; companyName: string;
/** 产品名称 */ /** 产品Id */
product: number; productId: number;
/** 产品信息 */
product?: ProductEntity;
/** 出库或入库 */ /** 出库或入库 */
inOrOut: number; inOrOut: number;
/** 单位(字典) */ /** 单位(字典) */
@ -1658,8 +1663,10 @@ declare namespace API {
type MaterialsInOutDto = { type MaterialsInOutDto = {
/** 公司名称 */ /** 公司名称 */
companyName: string; companyName: string;
/** 产品名称 */ /** 产品Id */
product: number; productId: number;
/** 产品信息 */
product?: ProductEntity;
/** 出库或入库 */ /** 出库或入库 */
inOrOut: number; inOrOut: number;
/** 单位(字典) */ /** 单位(字典) */
@ -1680,14 +1687,12 @@ declare namespace API {
project: string; project: string;
/** 备注 */ /** 备注 */
remark: string; remark: string;
/** 附件 */
files: StorageInfo[];
}; };
type MaterialsInOutUpdateDto = { type MaterialsInOutUpdateDto = {
/** 公司名称 */ /** 公司名称 */
companyName: string; companyName: string;
/** 产品名称 */ /** 产品Id */
product: number; productId: number;
/** 出库或入库 */ /** 出库或入库 */
inOrOut: number; inOrOut: number;
/** 单位(字典) */ /** 单位(字典) */
@ -1709,7 +1714,7 @@ declare namespace API {
/** 备注 */ /** 备注 */
remark: string; remark: string;
/** 附件 */ /** 附件 */
fileIds: number[]; fileIds?: number[];
}; };
type MaterialsInOutDeleteParams = { type MaterialsInOutDeleteParams = {
id: number; id: number;

View File

@ -3,6 +3,7 @@ import { columnKeyFlags } from '../types';
import type { DynamicTableProps } from '../dynamic-table'; import type { DynamicTableProps } from '../dynamic-table';
import type { TableMethods, TableState } from './index'; import type { TableMethods, TableState } from './index';
import { exportJson2Excel } from '@/utils/Export2Excel'; import { exportJson2Excel } from '@/utils/Export2Excel';
import { unref } from 'vue';
export type UseExportData2ExcelContext = { export type UseExportData2ExcelContext = {
state: TableState; state: TableState;
@ -23,7 +24,7 @@ export const useExportData2Excel = ({ props, state, methods }: UseExportData2Exc
const theaders = columns.filter((n) => { const theaders = columns.filter((n) => {
const key = getColumnKey(n); const key = getColumnKey(n);
return key && !columnKeyFlags.includes(key); return key && !columnKeyFlags.includes(key) && n.hideInExport !== true;
}); });
if (exportFormatter) { if (exportFormatter) {
@ -40,9 +41,20 @@ export const useExportData2Excel = ({ props, state, methods }: UseExportData2Exc
}); });
} }
} else { } else {
const data = tableData.value.map((v) =>
theaders.map((header) => {
const { customRender } = unref(header);
if (customRender) {
const renderParam: any = { record: v };
return customRender(renderParam);
} else {
return get(v, getColumnKey(header)!);
}
}),
);
exportJson2Excel({ exportJson2Excel({
header: theaders.map((n) => n.title as string), header: theaders.map((n) => n.title as string),
data: tableData.value.map((v) => theaders.map((header) => get(v, getColumnKey(header)!))), data,
filename: exportFileName, filename: exportFileName,
bookType: exportBookType, bookType: exportBookType,
autoWidth: exportAutoWidth, autoWidth: exportAutoWidth,

View File

@ -36,6 +36,8 @@ export type TableColumn<T extends object = Recordable> = ColumnType<T> & {
searchField?: string; searchField?: string;
/** 在查询表单中不展示此项 */ /** 在查询表单中不展示此项 */
hideInSearch?: boolean; hideInSearch?: boolean;
/** 在表格中不导出此列 */
hideInExport?: boolean;
/** 在 Table 中不展示此列 */ /** 在 Table 中不展示此列 */
hideInTable?: boolean; hideInTable?: boolean;
/** 传递给搜索表单 Form.Item 的配置,可以配置 rules */ /** 传递给搜索表单 Form.Item 的配置,可以配置 rules */

View File

@ -1,5 +1,5 @@
import dashboard from './dashboard'; import dashboard from './dashboard';
// import demos from './demos'; import demos from './demos';
import account from './account'; import account from './account';
export default [/* ...demos, */ ...dashboard, ...account]; export default [...demos, ...dashboard, ...account];

View File

@ -6,7 +6,7 @@ import { ACCESS_TOKEN_KEY } from '@/enums/cacheEnum';
import { Storage } from '@/utils/Storage'; import { Storage } from '@/utils/Storage';
import { ResultEnum } from '@/enums/httpEnum'; import { ResultEnum } from '@/enums/httpEnum';
import { useUserStore } from '@/store/modules/user'; import { useUserStore } from '@/store/modules/user';
import * as qs from 'qs';
export interface RequestOptions extends AxiosRequestConfig { export interface RequestOptions extends AxiosRequestConfig {
/** 是否直接将数据从响应中提取出,例如直接返回 res.data而忽略 res.code 等信息 */ /** 是否直接将数据从响应中提取出,例如直接返回 res.data而忽略 res.code 等信息 */
isReturnResult?: boolean; isReturnResult?: boolean;
@ -123,15 +123,20 @@ export async function request(_url: string | RequestOptions, _config: RequestOpt
try { try {
// 兼容 from data 文件上传的情况 // 兼容 from data 文件上传的情况
const { requestType, isReturnResult = true, ...rest } = config; const { requestType, isReturnResult = true, ...rest } = config;
// 修复query传递数组时time变成time[]的解析问题
const paramsSerializer = (params) => {
return qs.stringify(params, { arrayFormat: 'repeat' });
};
const response = (await service.request({ const response = (await service.request({
url, url,
...rest, ...rest,
paramsSerializer, //
headers: { headers: {
...rest.headers, ...rest.headers,
...(requestType === 'form' ? { 'Content-Type': 'multipart/form-data' } : {}), ...(requestType === 'form' ? { 'Content-Type': 'multipart/form-data' } : {}),
}, },
})) as AxiosResponse<BaseResponse>; })) as AxiosResponse<BaseResponse>;
const { data } = response; const { data } = response;
const { code, message } = data || {}; const { code, message } = data || {};

View File

@ -57,6 +57,7 @@ export const baseColumns: TableColumnItem[] = [
width: 120, width: 120,
align: 'center', align: 'center',
dataIndex: 'time', dataIndex: 'time',
formItemProps: { component: 'RangePicker' },
customRender: ({ record }) => { customRender: ({ record }) => {
return formatToDate(record.time); return formatToDate(record.time);
}, },
@ -78,6 +79,7 @@ export const baseColumns: TableColumnItem[] = [
width: 80, width: 80,
align: 'center', align: 'center',
dataIndex: 'amount', dataIndex: 'amount',
hideInSearch: true,
}, },
{ {
title: '经办人', title: '经办人',

View File

@ -0,0 +1,191 @@
import type { FormSchema } from '@/components/core/schema-form/';
import { ContractStatusEnum } from '@/enums/contractEnum';
import { formatStatus } from './columns';
import Api from '@/api';
import { debounce } from 'lodash-es';
import { MaterialsInOutEnum } from '@/enums/materialsInventoryEnum';
export const formSchemas: FormSchema<API.MaterialsInOutEntity>[] = [
{
field: 'productId',
component: 'Select',
label: '产品',
colProps: {
span: 16,
},
helpMessage:'如未找到对应产品,请先去产品管理添加产品。',
rules: [{ required: true, type: 'number' }],
componentProps: ({ formInstance, schema, formModel }) => ({
showSearch: true,
filterOption: false,
fieldNames: {
label: 'label',
value: 'value',
},
options: [],
getPopupContainer: () => document.body,
defaultActiveFirstOption: true,
onChange: async (value) => {
if (!value) {
const options = await getProductOptions();
const newSchema = {
field: schema.field,
componentProps: {
options,
},
};
formInstance?.updateSchema([newSchema]);
}
},
request: () => {
return getProductOptions();
},
onSearch: debounce(async (keyword) => {
schema.loading = true;
const newSchema = {
field: schema.field,
componentProps: {
options: [] as LabelValueOptions,
},
};
formInstance?.updateSchema([newSchema]);
const options = await getProductOptions(keyword).finally(() => (schema.loading = false));
newSchema.componentProps.options = options;
formInstance?.updateSchema([newSchema]);
}, 500),
}),
},
{
field: 'inOrOut',
component: 'Select',
label: '出入库',
rules: [{ required: true, type: 'number' }],
defaultValue: MaterialsInOutEnum.In,
colProps: {
span: 8,
},
componentProps: {
options: [
{ label: '出库', value: MaterialsInOutEnum.Out },
{ label: '入库', value: MaterialsInOutEnum.In },
],
},
},
// {
// 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',
// },
// },
// },
];
const getProductOptions = async (keyword?: string): Promise<LabelValueOptions> => {
const { items: result } = await Api.product.productList({ pageSize: 100, name: keyword });
return (
result?.map((item) => ({
label: `${item.name}` + (item.company?.name ? `(${item.company?.name})` : ''),
value: item.id,
})) || []
);
};
const getCompanyOptions = async ({ keyword, id }): Promise<LabelValueOptions> => {
const { items: result } = await Api.company.companyList({ pageSize: 100, name: keyword });
return (
result?.map((item) => ({
label: item.name,
value: item.id,
})) || []
);
};

View File

@ -30,6 +30,7 @@
import { onMounted, ref, type FunctionalComponent } from 'vue'; import { onMounted, ref, type FunctionalComponent } from 'vue';
import { useFormModal, useModal } from '@/hooks/useModal'; import { useFormModal, useModal } from '@/hooks/useModal';
import { Button } from 'ant-design-vue'; import { Button } from 'ant-design-vue';
import { formSchemas } from './formSchemas';
import AttachmentManage from '@/components/business/attachment-manage/index.vue'; import AttachmentManage from '@/components/business/attachment-manage/index.vue';
import AttachmentUpload from '@/components/business/attachment-upload/index.vue'; import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
defineOptions({ defineOptions({
@ -93,24 +94,24 @@
}); });
const openAttachmentUploadModal = async (record: TableListItem) => { const openAttachmentUploadModal = async (record: TableListItem) => {
// isUploadPopupVisiable.value = true; isUploadPopupVisiable.value = true;
// fnModal.show({ fnModal.show({
// width: 800, width: 800,
// title: `: ${record.contractNumber}`, title: `上传附件: ${record.id}`,
// content: () => { content: () => {
// return ( return (
// <AttachmentUpload <AttachmentUpload
// onClose={handleUploadClose} onClose={handleUploadClose}
// afterUploadCallback={(files) => { afterUploadCallback={(files) => {
// afterUploadCallback(files, record.id); afterUploadCallback(files, record.id);
// }} }}
// ></AttachmentUpload> ></AttachmentUpload>
// ); );
// }, },
// destroyOnClose: true, destroyOnClose: true,
// open: isUploadPopupVisiable.value, open: isUploadPopupVisiable.value,
// footer: null, footer: null,
// }); });
}; };
const handleUploadClose = (hasSuccess: boolean) => { const handleUploadClose = (hasSuccess: boolean) => {
fnModal.hide(); fnModal.hide();
@ -128,37 +129,36 @@
* @description 打开新增/编辑弹窗 * @description 打开新增/编辑弹窗
*/ */
const openEditModal = async (record: Partial<TableListItem>) => { const openEditModal = async (record: Partial<TableListItem>) => {
// const [formRef] = await showModal({ const [formRef] = await showModal({
// modalProps: { modalProps: {
// title: `${record.id ? '' : ''}`, title: `${record.id ? '编辑' : '新增'}出入库记录`,
// width: '50%', width: '50%',
// onFinish: async (values) => { onFinish: async (values) => {
// const params = { const params: API.MaterialsInOutUpdateDto = {
// ...values, ...values,
// signingDate: formatToDate(values.signingDate), // signingDate: formatToDate(values.signingDate),
// deliveryDeadline: formatToDate(values.deliveryDeadline), // deliveryDeadline: formatToDate(values.deliveryDeadline),
// }; };
// if (record.id) { if (record.id) {
// await Api.contract.contractUpdate({ id: record.id }, params); await Api.materialsInOut.materialsInOutUpdate({ id: record.id }, params);
// } else { } else {
// await Api.contract.contractCreate(params); await Api.materialsInOut.materialsInOutCreate(params);
// } }
// dynamicTableInstance?.reload(); dynamicTableInstance?.reload();
// }, },
// }, },
// formProps: { formProps: {
// labelWidth: 100, labelWidth: 100,
// schemas: contractSchemas(contractTypes.value), schemas: formSchemas,
// }, },
// }); });
//
// // if (record.id) {
// if (record.id) { const info = await Api.contract.contractInfo({ id: record.id });
// const info = await Api.contract.contractInfo({ id: record.id }); formRef?.setFieldsValue({
// formRef?.setFieldsValue({ ...info,
// ...info, });
// }); }
// }
}; };
const delRowConfirm = async (record) => { const delRowConfirm = async (record) => {
await Api.contract.contractDelete({ id: record }); await Api.contract.contractDelete({ id: record });

View File

@ -37,7 +37,7 @@
import AttachmentManage from '@/components/business/attachment-manage/index.vue'; import AttachmentManage from '@/components/business/attachment-manage/index.vue';
import AttachmentUpload from '@/components/business/attachment-upload/index.vue'; import AttachmentUpload from '@/components/business/attachment-upload/index.vue';
defineOptions({ defineOptions({
name: 'MeterialsInventory', name: 'MaterialsInventory',
}); });
const [DynamicTable, dynamicTableInstance] = useTable(); const [DynamicTable, dynamicTableInstance] = useTable();
const [showModal] = useFormModal(); const [showModal] = useFormModal();

View File

@ -16,12 +16,7 @@ export const formSchemas: FormSchema<API.ProductDto>[] = [
field: 'companyId', field: 'companyId',
component: 'Select', component: 'Select',
label: '所属公司', label: '所属公司',
// componentProps: { helpMessage: '如未找到对应公司,请先去公司管理添加公司。',
// request: async () => {
// const { items: result } = await Api.company.companyList({ pageSize: 100 });
// return result?.map((item) => ({ label: item.name, value: item.id }));
// },
// },
componentProps: ({ formInstance, schema }) => ({ componentProps: ({ formInstance, schema }) => ({
showSearch: true, showSearch: true,
filterOption: false, filterOption: false,
@ -32,24 +27,23 @@ export const formSchemas: FormSchema<API.ProductDto>[] = [
options: [], options: [],
getPopupContainer: () => document.body, getPopupContainer: () => document.body,
defaultActiveFirstOption: true, defaultActiveFirstOption: true,
onChange: async (value, option) => { onChange: async (value) => {
console.log('onChange'); console.log('onChange');
if (!value) { if (!value) {
formInstance?.setFieldsValue({ companyId: undefined }); formInstance?.setFieldsValue({ companyId: undefined });
const { items: result } = await Api.company.companyList({ pageSize: 100 }); const options = await getCompanyOptions();
const newSchema = { const newSchema = {
field: schema.field, field: schema.field,
componentProps: { componentProps: {
options: result?.map((item) => ({ label: item.name, value: item.id })), options,
}, },
}; };
formInstance?.updateSchema([newSchema]); formInstance?.updateSchema([newSchema]);
} }
}, },
request: () => { request: () => {
return getCompanyOptions(); return getCompanyOptions();
}, },
onSearch: debounce(async (keyword) => { onSearch: debounce(async (keyword) => {
schema.loading = true; schema.loading = true;
@ -60,23 +54,16 @@ export const formSchemas: FormSchema<API.ProductDto>[] = [
}, },
}; };
formInstance?.updateSchema([newSchema]); formInstance?.updateSchema([newSchema]);
const { items: result } = await Api.company const options = await getCompanyOptions(keyword).finally(() => (schema.loading = false));
.companyList({ pageSize: 100, name: keyword }) newSchema.componentProps.options = options;
.finally(() => (schema.loading = false));
if (result) {
newSchema.componentProps.options = result.map((item) => ({
value: item.id,
label: item.name,
}));
}
formInstance?.updateSchema([newSchema]); formInstance?.updateSchema([newSchema]);
}, 500), }, 500),
}), }),
}, },
]; ];
const getCompanyOptions = async (keyword?): Promise<LabelValueOptions> => { const getCompanyOptions = async (keyword?: string): Promise<LabelValueOptions> => {
const { items: result } = await Api.company.companyList({ pageSize: 100 }); const { items: result } = await Api.company.companyList({ pageSize: 100, name: keyword });
return ( return (
result?.map((item) => ({ result?.map((item) => ({
label: item.name, label: item.name,

View File

@ -6,6 +6,7 @@
title-tooltip="" title-tooltip=""
:data-request="Api.product.productList" :data-request="Api.product.productList"
:columns="columns" :columns="columns"
:exportFileName="'产品'"
bordered bordered
size="small" size="small"
> >
@ -23,7 +24,7 @@
</template> </template>
<script setup lang="tsx"> <script setup lang="tsx">
import { useTable, type LoadDataParams } from '@/components/core/dynamic-table'; import { useTable, type LoadDataParams, type TableColumn } from '@/components/core/dynamic-table';
import { baseColumns, type TableColumnItem, type TableListItem } from './columns'; import { baseColumns, type TableColumnItem, type TableListItem } from './columns';
import Api from '@/api/'; import Api from '@/api/';
import { useFormModal, useModal } from '@/hooks/useModal'; import { useFormModal, useModal } from '@/hooks/useModal';
@ -54,6 +55,9 @@
// }); // });
// return data; // return data;
// }; // };
const exportFormatter = (columns: TableColumn[], tableData: any[]) => {
return { header: columns.map((item) => item.title), data: [] };
};
onMounted(() => { onMounted(() => {
columns.value = [ columns.value = [
...baseColumns, ...baseColumns,
@ -62,6 +66,7 @@
width: 50, width: 50,
maxWidth: 50, maxWidth: 50,
hideInSearch: true, hideInSearch: true,
hideInExport: true,
dataIndex: 'files', dataIndex: 'files',
customRender: ({ record }) => <FilesRender {...record} />, customRender: ({ record }) => <FilesRender {...record} />,
}, },

View File

@ -1,111 +0,0 @@
import type { FormSchema } from '@/components/core/schema-form/';
import { ContractStatusEnum } from '@/enums/contractEnum';
import { formatStatus } from './columns';
export const formSchemas: 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',
// },
// },
// },
];