feat: 项目模块和表单校验的bug修复

.vscode/settings.json

@@ -0,0 +1,8 @@
+{
+    "typescript.tsdk": "node_modules\\typescript\\lib",
+    "i18n-ally.localesPaths": [
+        "src/locales",
+        "src/locales/lang",
+        "src/components/basic/tinymce/langs"
+    ]
+}

src/api/backend/api/index.ts

@@ -27,6 +27,7 @@ import * as netDiskOverview from './netDiskOverview';
 import * as businessTodo from './businessTodo';
 import * as contract from './contract';
 import * as materialsInventory from './materialsInventory';
+import * as project from './project';
 import * as company from './company';
 import * as product from './product';
 import * as materialsInOut from './materialsInOut';
@@ -59,4 +60,5 @@ export default {
   company,
   product,
   materialsInOut,
+  project,
 };

src/api/backend/api/project.ts

@@ -0,0 +1,104 @@
+import { request, type RequestOptions } from '@/utils/request';
+
+/** 获取项目列表 GET /api/project */
+export async function projectList(params: API.ProjectParams, options?: RequestOptions) {
+  return request<{
+    items?: API.ProjectEntity[];
+    meta?: {
+      itemCount?: number;
+      totalItems?: number;
+      itemsPerPage?: number;
+      totalPages?: number;
+      currentPage?: number;
+    };
+  }>('/api/project', {
+    method: 'GET',
+    params: {
+      // page has a default value: 1
+      page: '1',
+      // pageSize has a default value: 10
+      pageSize: '10',
+
+      ...params,
+    },
+    ...(options || {}),
+  });
+}
+
+/** 新增项目 POST /api/project */
+export async function projectCreate(body: API.ProjectDto, options?: RequestOptions) {
+  return request<any>('/api/project', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    data: body,
+    ...(options || { successMsg: '创建成功' }),
+  });
+}
+
+/** 获取项目信息 GET /api/project/${param0} */
+export async function projectInfo(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.ProjectInfoParams,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<API.ProjectEntity>(`/api/project/${param0}`, {
+    method: 'GET',
+    params: { ...queryParams },
+    ...(options || {}),
+  });
+}
+
+/** 解除项目和附件关联 PUT /api/project/unlink-attachments/${param0} */
+export async function unlinkAttachments(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.ProjectUpdateParams,
+  body: API.ProjectUpdateDto,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<any>(`/api/project/unlink-attachments/${param0}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    params: { ...queryParams },
+    data: body,
+    ...options,
+  });
+}
+
+/** 更新项目 PUT /api/project/${param0} */
+export async function projectUpdate(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.ProjectUpdateParams,
+  body: API.ProjectUpdateDto,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<any>(`/api/project/${param0}`, {
+    method: 'PUT',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    params: { ...queryParams },
+    data: body,
+    ...(options || { successMsg: '更新成功' }),
+  });
+}
+
+/** 删除项目 DELETE /api/project/${param0} */
+export async function projectDelete(
+  // 叠加生成的Param类型 (非body参数swagger默认没有生成对象)
+  params: API.ProjectDeleteParams,
+  options?: RequestOptions,
+) {
+  const { id: param0, ...queryParams } = params;
+  return request<any>(`/api/project/${param0}`, {
+    method: 'DELETE',
+    params: { ...queryParams },
+    ...(options || { successMsg: '删除成功' }),
+  });
+}

src/api/backend/api/typings.d.ts

@@ -1413,7 +1413,7 @@ declare namespace API {
     /** 领料单号 */
     issuanceNumber?: number;
     /** 项目 */
-    project: string;
+    project: ProjectEntity;
     /** 备注 */
     remark: string;
     /** 附件 */
@@ -1513,6 +1513,49 @@ declare namespace API {
   type MaterialsInventoryDeleteParams = {
     id: number;
   };
+
+  // Project
+  type ProjectEntity = {
+    /** 项目名称 */
+    name: string;
+    /** 是否删除 */
+    isDelete: string;
+    /** 附件 */
+    files?: StorageInfo[];
+    id: number;
+    createdAt: string;
+    updatedAt: string;
+  };
+  type ProjectDto = {
+    /** 项目名称 */
+    name: string;
+    fileIds?: number[];
+  };
+  type ProjectUpdateParams = {
+    id: number;
+  };
+  type ProjectParams = {
+    page?: number;
+    pageSize?: number;
+    name?: string;
+    productId?: number;
+    field?: string;
+    order?: 'ASC' | 'DESC';
+    _t?: number;
+  };
+  type ProjectInfoParams = {
+    id: number;
+  };
+  type ProjectUpdateDto = {
+    /** 项目名称 */
+    name?: string;
+    /** 附件 */
+    fileIds?: number[];
+  };
+  type ProjectDeleteParams = {
+    id: number;
+  };
+
   // Company
   type CompanyEntity = {
     /** 公司名称 */
@@ -1624,6 +1667,7 @@ declare namespace API {
     time?: string;
     inventoryNumber?: string;
     isCreateOut?: boolean;
+    project?:string;
     field?: string;
     order?: 'ASC' | 'DESC';
     _t?: number;
@@ -1655,7 +1699,9 @@ declare namespace API {
     /** 领料单号 */
     issuanceNumber?: number;
     /** 项目 */
-    project: string;
+    project: ProjectEntity;
+    /** 项目ID */
+    projectId?:number;
     /** 备注 */
     remark: string;
     /** 附件 */
@@ -1685,7 +1731,7 @@ declare namespace API {
     /** 领料单号 */
     issuanceNumber?: number;
     /** 项目 */
-    project?: string;
+    projectId?: number;
     /** 备注 */
     remark?: string;
     /** 附件 */
@@ -1709,7 +1755,7 @@ declare namespace API {
     /** 领料单号 */
     issuanceNumber?: number;
     /** 项目 */
-    project?: string;
+    projectId?:number;
     /** 备注 */
     remark?: string;
     /** 附件 */

src/components/core/schema-form/src/hooks/useFormEvents.ts

@@ -6,7 +6,7 @@ import type { UnwrapFormSchema } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import type { FormState, FormMethods } from './index';
 import type { SchemaFormEmitFn } from '../schema-form';
-import { isArray, isFunction, isObject, isString } from '@/utils/is';
+import { isArray, isEmpty, isFunction, isObject, isString } from '@/utils/is';
 import { deepMerge } from '@/utils';
 
 type UseFormActionContext = FormState & {
@@ -250,10 +250,12 @@ export function useFormEvents(formActionContext: UseFormActionContext) {
   }
 
   async function validateFields(nameList?: NamePath[] | undefined) {
+    if (isEmpty(nameList)) return {};
     return schemaFormRef.value?.validateFields(nameList);
   }
 
   async function validate(nameList?: NamePath[] | undefined) {
+    if (isEmpty(nameList)) return {};
     return await schemaFormRef.value?.validate(nameList)!;
   }
 

src/components/core/schema-form/src/schema-form-item.vue

@@ -238,28 +238,34 @@
   /**
    * @description 表单组件props
    */
-  const getComponentProps = computed(() => {
+  const getComponentProps = computed<ComponentProps>(() => {
     const { schema } = props;
     let { componentProps = {}, component } = schema;
-
+    let finalComponentProps: ComponentProps = {};
     if (isFunction(componentProps)) {
-      componentProps = componentProps(unref(getValues)) ?? {};
+      finalComponentProps = { ...(componentProps(unref(getValues)) ?? {}) };
+    } else {
+      finalComponentProps = { ...componentProps };
     }
 
     if (component !== 'RangePicker' && isString(component)) {
-      componentProps.placeholder ??= createPlaceholderMessage(component, getLabel.value);
+      finalComponentProps = {
+        ...finalComponentProps,
+        placeholder:
+          finalComponentProps.placeholder ?? createPlaceholderMessage(component, getLabel.value),
+      };
     }
     if (schema.component === 'Divider') {
-      componentProps = Object.assign({ type: 'horizontal' }, componentProps, {
+      finalComponentProps = Object.assign({ type: 'horizontal' }, finalComponentProps, {
         orientation: 'left',
         plain: true,
       });
     }
     if (isVNode(getComponent.value)) {
-      Object.assign(componentProps, getComponent.value.props);
+      finalComponentProps = Object.assign({}, finalComponentProps, getComponent.value.props);
     }
 
-    return componentProps;
+    return finalComponentProps;
   });
 
   /**
@@ -408,8 +414,8 @@
           options: [],
         } as ComponentProps,
       });
-      // const componentProps = newSchema.componentProps as ComponentProps;
        updateSchema(newSchema);
+      //会报表单校验的错误;
       // @ts-ignore
       const result = await request({ ...unref(getValues), schema: newSchema });
       if (['Select', 'RadioGroup', 'CheckBoxGroup'].some((n) => n === component)) {
@@ -443,6 +449,7 @@
           }, wait),
           {
             ...options,
+            // immediate: false,
           },
         );
       }

src/permission/permCode.ts

@@ -90,9 +90,16 @@ const permissions = [
   'app:product:create',
   'app:product:update',
   'app:product:delete',
-  'materials_inventory:history_in_out:export'
+  'materials_inventory:history_in_out:export',
+  'app:materials_inventory:list',
+  'app:project:list',
+  'app:project:create',
+  'app:project:update',
+  'app:project:delete',
+  'app:project:read',
 ] as const;
 
 export type PermissionType = string;
+// export type PermissionType = (typeof permissions)[number]; 目前添加这个类型判断会影响vscode的性能，暂时注释掉
 
 // console.log('permissions', permissions);

src/views/materials-inventory/in-out/columns.tsx

@@ -19,6 +19,14 @@ export const baseColumns: TableColumnItem[] = [
       labelWidth: 120,
     },
   },
+  {
+    title: '项目',
+    width: 80,
+    dataIndex: 'project',
+    customRender: ({ record }) => {
+      return record?.project?.name || '';
+    },
+  },
   {
     title: '所属公司',
     width: 100,
@@ -113,11 +121,7 @@ export const baseColumns: TableColumnItem[] = [
     width: 80,
     dataIndex: 'issuanceNumber',
   },
-  {
+
-    title: '项目',
-    width: 80,
-    dataIndex: 'project',
-  },
   {
     title: '备注',
     width: 80,

src/views/materials-inventory/in-out/formSchemas.ts

@@ -134,6 +134,52 @@ export const formSchemas = (isEdit?: boolean): FormSchema<API.MaterialsInOutEnti
       }, 500),
     }),
   },
+  {
+    field: 'projectId',
+    component: 'Select',
+    label: '项目',
+    colProps: {
+      span: 12,
+    },
+    helpMessage: '如未找到对应项目，请先去项目管理添加项目。',
+    componentProps: ({ formInstance, schema, formModel }) => ({
+      showSearch: true,
+      filterOption: false,
+      fieldNames: {
+        label: 'label',
+        value: 'value',
+      },
+      getPopupContainer: () => document.body,
+      defaultActiveFirstOption: true,
+      onClear: async () => {
+        const newSchema = {
+          field: schema.field,
+          componentProps: {
+            options: [] as LabelValueOptions,
+          },
+        };
+        const options = await getProjectOptions().finally(() => (schema.loading = false));
+        newSchema.componentProps.options = options;
+        formInstance?.updateSchema([newSchema]);
+      },
+      request: () => {
+        return getProjectOptions();
+      },
+      onSearch: debounce(async (keyword) => {
+        schema.loading = true;
+        const newSchema = {
+          field: schema.field,
+          componentProps: {
+            options: [] as LabelValueOptions,
+          },
+        };
+        formInstance?.updateSchema([newSchema]);
+        const options = await getProjectOptions(keyword).finally(() => (schema.loading = false));
+        newSchema.componentProps.options = options;
+        formInstance?.updateSchema([newSchema]);
+      }, 500),
+    }),
+  },
   {
     label: '时间',
     field: 'time',
@@ -183,14 +229,7 @@ export const formSchemas = (isEdit?: boolean): FormSchema<API.MaterialsInOutEnti
       span: 12,
     },
   },
-  {
+
-    label: '项目',
-    field: 'project',
-    component: 'Input',
-    colProps: {
-      span: 12,
-    },
-  },
   {
     label: '备注',
     field: 'remark',
@@ -198,6 +237,16 @@ export const formSchemas = (isEdit?: boolean): FormSchema<API.MaterialsInOutEnti
   },
 ];
 
+const getProjectOptions = async (keyword?: string): Promise<LabelValueOptions> => {
+  const { items: result } = await Api.project.projectList({ pageSize: 100, name: keyword });
+  return (
+    result?.map((item) => ({
+      label: `${item.name}`,
+      value: item.id,
+    })) || []
+  );
+};
+
 const getProductOptions = async (keyword?: string): Promise<LabelValueOptions> => {
   const { items: result } = await Api.product.productList({ pageSize: 100, name: keyword });
   return (

src/views/materials-inventory/in-out/index.vue

@@ -153,7 +153,6 @@
   const openEditModal = async (record: Partial<TableListItem>) => {
     const [formRef] = await showModal({
       modalProps: {
-        
         title: `${record.id ? '编辑' : '新增'}出入库记录`,
         width: '50%',
         onFinish: async (values) => {

src/views/materials-inventory/product/formSchemas.ts

@@ -18,6 +18,9 @@ export const formSchemas: FormSchema<API.ProductDto>[] = [
     label: '单位',
     component: 'Select',
     field: 'unitId',
+    colProps: {
+      span: 12,
+    },
     componentProps: ({ formInstance, schema, formModel }) => ({
       showSearch: true,
       filterOption: (input: string, option: any) => {

src/views/materials-inventory/project/columns.tsx

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

src/views/materials-inventory/project/formSchemas.ts

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

src/views/materials-inventory/project/index.vue

@@ -0,0 +1,201 @@
+<template>
+  <div v-if="columns?.length">
+    <DynamicTable
+      row-key="id"
+      header-title="项目管理"
+      title-tooltip=""
+      :data-request="Api.project.projectList"
+      :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: 'Project',
+  });
+  const [DynamicTable, dynamicTableInstance] = useTable();
+  const [showModal] = useFormModal();
+  const [fnModal] = useModal();
+  const isUploadPopupVisiable = ref(false);
+  const dictStore = useDictStore();
+  // projectList;
+  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:project:update',
+              effect: 'disable',
+            },
+            onClick: () => openEditModal(record),
+          },
+          {
+            icon: 'ant-design:delete-outlined',
+            color: 'red',
+            tooltip: '删除此项目',
+            auth: 'app:project: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.project.projectUpdate({ 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.project.projectUpdate({ id: record.id }, values);
+          } else {
+            await Api.project.projectCreate(values);
+          }
+          dynamicTableInstance?.reload();
+        },
+      },
+      formProps: {
+        labelWidth: 100,
+        schemas: formSchemas,
+      },
+    });
+
+    // 如果是编辑的话，需要获取角色详情
+    if (record.id) {
+      const info = await Api.project.projectInfo({ id: record.id });
+      formRef?.setFieldsValue({
+        ...info,
+      });
+    }
+  };
+  const delRowConfirm = async (record) => {
+    await Api.project.projectDelete({ id: record });
+    dynamicTableInstance?.reload();
+  };
+
+  const FilesRender: FunctionalComponent<TableListItem> = (project: TableListItem) => {
+    const [fnModal] = useModal();
+    return (
+      <Button
+        type="link"
+        onClick={() => {
+          openFilesManageModal(fnModal, project);
+        }}
+      >
+        {project.files?.length || 0}
+      </Button>
+    );
+  };
+
+  const openFilesManageModal = (fnModal, project: TableListItem) => {
+    const fileIds = project.files?.map((item) => item.id) || [];
+    fnModal.show({
+      width: 1200,
+      title: `附件管理`,
+      content: () => {
+        return (
+          <AttachmentManage
+            fileIds={fileIds}
+            onDelete={(unlinkIds) => unlinkAttachments(project.id, unlinkIds)}
+          ></AttachmentManage>
+        );
+      },
+      destroyOnClose: true,
+      footer: null,
+    });
+  };
+  const unlinkAttachments = async (id: number, unlinkIds: number[]) => {
+    await Api.project.unlinkAttachments({ id }, { fileIds: unlinkIds });
+    dynamicTableInstance?.reload();
+  };
+</script>
+
+<style lang="less" scoped></style>