feat: 项目管理调整

apps/web-antd/src/api/license/project/index.ts

@@ -8,13 +8,13 @@ export namespace ProjectApi {
   /** 项目信息 */
   export interface Project {
     id: number; // 主键
-    customerId?: number; // 客户ID
+    projectId?: number; // 项目ID
     name?: string; // 项目名称
     code?: string; // 项目编号
     contractCode?: string; // 合同编号
     businessStatus: number; // 商务状态
     businessOwner?: number; // 业务负责人
-    customerOwner?: number; // 客户对接人
+    projectOwner?: number; // 项目对接人
     technicalOwnerA?: number; // 技术负责人1
     technicalOwnerB: number; // 技术负责人2
     technicalOwnerC: number; // 技术负责人3
@@ -59,3 +59,28 @@ export function deleteProject(id: number) {
 export function exportProject(params: any) {
   return requestClient.download('/license/project/export-excel', params);
 }
+
+/** 项目名称是否唯一 */
+export async function isProjectNameUnique(
+  name: string,
+  id?: ProjectApi.Project['id'],
+) {
+  return requestClient.get<boolean>('/license/project/name-unique', {
+    params: { id, name },
+  });
+}
+
+/** 项目编号是否唯一 */
+export async function isProjectCodeUnique(
+  code: number,
+  id?: ProjectApi.Project['id'],
+) {
+  return requestClient.get<boolean>('/license/project/code-unique', {
+    params: { id, code },
+  });
+}
+
+/** 查询当前最大sn */
+export async function getMaxSn() {
+  return requestClient.get<boolean>('/license/project/max-sn');
+}

apps/web-antd/src/locales/langs/en-US/project.json

@@ -0,0 +1,22 @@
+{
+  "project": "Project",
+  "operation": "Operation",
+  "creationTime": "Creation Time",
+  "remarks": "Remarks",
+  "envInfo": "Environment Info",
+  "status": "Project Status",
+  "endTime": "Project End Time",
+  "startTime": "Project Start Time",
+  "technicalOwnerC": "Technical Owner 3",
+  "technicalOwnerB": "Technical Owner 2",
+  "technicalOwnerA": "Technical Owner 1",
+  "customerOwner": "Customer Contact",
+  "businessOwner": "Business Owner",
+  "businessStatus": "Business Status",
+  "contractCode": "Contract Code",
+  "belongCustomer": "Belonging Customer",
+  "code": "Project Code",
+  "name": "Project Name",
+  "envInfoFile": "Environment Info Attachment",
+  "list": "Project List"
+}

apps/web-antd/src/locales/langs/zh-CN/project.json

@@ -0,0 +1,22 @@
+{
+  "project": "项目",
+  "operation": "操作",
+  "creationTime": "创建时间",
+  "remarks": "备注",
+  "envInfo": "环境信息",
+  "status": "项目状态",
+  "endTime": "项目结束时间",
+  "startTime": "项目开始时间",
+  "technicalOwnerC": "技术负责人3",
+  "technicalOwnerB": "技术负责人2",
+  "technicalOwnerA": "技术负责人1",
+  "customerOwner": "客户对接人",
+  "businessOwner": "业务负责人",
+  "businessStatus": "商务状态",
+  "contractCode": "合同编号",
+  "belongCustomer": "所属客户",
+  "code": "项目编号",
+  "name": "项目名称",
+  "envInfoFile": "环境信息附件",
+  "list": "项目列表"
+}

apps/web-antd/src/views/license/project/data.ts

@@ -2,14 +2,25 @@ import type { VbenFormSchema } from '#/adapter/form';
 import type { OnActionClickFn, VxeTableGridOptions } from '#/adapter/vxe-table';
 import type { ProjectApi } from '#/api/license/project';
 
+import { ref } from 'vue';
+
 import { useAccess } from '@vben/access';
 
+import { z } from '#/adapter/form';
 import { getCustomerList } from '#/api/license/customer';
+import {
+  isProjectCodeUnique,
+  isProjectNameUnique,
+} from '#/api/license/project';
 import { getSimpleUserList } from '#/api/system/user';
+import { $t } from '#/locales';
 import { DICT_TYPE, getDictOptions, getRangePickerDefaultProps } from '#/utils';
 
 const { hasAccessByCodes } = useAccess();
 
+const userList = await getSimpleUserList();
+
+export const formData = ref<ProjectApi.Project>();
 /** 新增/修改的表单 */
 export function useFormSchema(): VbenFormSchema[] {
   return [
@@ -23,25 +34,54 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'name',
-      label: '项目名称',
+      label: $t('project.name'),
-      rules: 'required',
       component: 'Input',
-      componentProps: {
+      rules: z
-        placeholder: '请输入项目名称',
+        .string()
+        .min(1, $t('ui.formRules.required', [$t('project.name')]))
+        .max(60, $t('ui.formRules.maxLength', [$t('project.name'), 60]))
+        .refine(
+          async (value: string) => {
+            return await isProjectNameUnique(value, formData.value?.id);
           },
+          (value) => ({
+            message: $t('ui.formRules.alreadyExists', [
+              $t('project.name'),
+              value,
+            ]),
+          }),
+        ),
     },
     {
       fieldName: 'code',
-      label: '项目编号',
+      label: $t('project.code'),
-      rules: 'required',
+      component: 'InputNumber',
-      component: 'Input',
+      rules: z
-      componentProps: {
+        .number()
-        placeholder: '请输入项目编号',
+        .min(2000, $t('ui.formRules.range', [$t('project.code'), 2000, 9999]))
+        .max(9999, $t('ui.formRules.range', [$t('project.code'), 2000, 9999]))
+        .refine(
+          async (value: number) => {
+            return await isProjectCodeUnique(value, formData.value?.id);
           },
+          (value) => ({
+            message: $t('ui.formRules.alreadyExists', [
+              $t('project.code'),
+              value,
+            ]),
+          }),
+        )
+        .nullable()
+        .refine(
+          (value: null | number) => {
+            return value;
+          },
+          { message: $t('ui.formRules.required', [$t('project.code')]) },
+        ),
     },
     {
       fieldName: 'customerId',
-      label: '所属客户',
+      label: $t('project.belongCustomer'),
       rules: 'required',
       component: 'ApiSelect',
       componentProps: {
@@ -60,104 +100,104 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'contractCode',
-      label: '合同编号',
+      label: $t('project.contractCode'),
       rules: 'required',
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入合同编号',
-      },
     },
     {
       fieldName: 'businessStatus',
-      label: '商务状态',
+      label: $t('project.businessStatus'),
       rules: 'required',
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.LIC_BUSINESS_STATUS, 'number'),
-        placeholder: '请选择商务状态',
       },
     },
     {
       fieldName: 'status',
-      label: '项目状态',
+      label: $t('project.status'),
       rules: 'required',
       component: 'Select',
       componentProps: {
         options: getDictOptions(DICT_TYPE.LIC_PROJECT_STATUS, 'number'),
-        placeholder: '请选择项目状态',
       },
     },
     {
       fieldName: 'businessOwner',
-      label: '业务负责人',
+      label: $t('project.businessOwner'),
       rules: 'required',
-      component: 'ApiSelect',
+      component: 'Select',
       componentProps: {
-        api: getSimpleUserList,
+        options: userList,
-        labelField: 'nickname',
+        allowClear: true,
-        valueField: 'id',
         showSearch: true,
-        filterOption: (input: string, option: any) =>
+        fieldNames: { label: 'nickname', value: 'id' },
-          option.label.toLowerCase().includes(input.toLowerCase()),
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'customerOwner',
-      label: '客户对接人',
+      label: $t('project.customerOwner'),
       rules: 'required',
-      component: 'ApiSelect',
+      component: 'Select',
       componentProps: {
-        api: getSimpleUserList,
+        options: userList,
-        labelField: 'nickname',
+        allowClear: true,
-        valueField: 'id',
         showSearch: true,
-        filterOption: (input: string, option: any) =>
+        fieldNames: { label: 'nickname', value: 'id' },
-          option.label.toLowerCase().includes(input.toLowerCase()),
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'technicalOwnerA',
-      label: '技术负责人1',
+      label: $t('project.technicalOwnerA'),
       rules: 'required',
-      component: 'ApiSelect',
+      component: 'Select',
       componentProps: {
-        api: getSimpleUserList,
+        options: userList,
-        labelField: 'nickname',
+        allowClear: true,
-        valueField: 'id',
         showSearch: true,
-        filterOption: (input: string, option: any) =>
+        fieldNames: { label: 'nickname', value: 'id' },
-          option.label.toLowerCase().includes(input.toLowerCase()),
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'technicalOwnerB',
-      label: '技术负责人2',
+      label: $t('project.technicalOwnerB'),
-      component: 'ApiSelect',
+      component: 'Select',
       componentProps: {
-        api: getSimpleUserList,
+        options: userList,
-        labelField: 'nickname',
+        allowClear: true,
-        valueField: 'id',
         showSearch: true,
-        filterOption: (input: string, option: any) =>
+        fieldNames: { label: 'nickname', value: 'id' },
-          option.label.toLowerCase().includes(input.toLowerCase()),
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'technicalOwnerC',
-      label: '技术负责人3',
+      label: $t('project.technicalOwnerC'),
-      component: 'ApiSelect',
+      component: 'Select',
       componentProps: {
-        api: getSimpleUserList,
+        options: userList,
-        labelField: 'nickname',
+        allowClear: true,
-        valueField: 'id',
         showSearch: true,
-        filterOption: (input: string, option: any) =>
+        fieldNames: { label: 'nickname', value: 'id' },
-          option.label.toLowerCase().includes(input.toLowerCase()),
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'startTime',
-      label: '项目开始时间',
+      label: $t('project.startTime'),
       component: 'DatePicker',
       componentProps: {
         showTime: true,
@@ -167,7 +207,7 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'endTime',
-      label: '项目结束时间',
+      label: $t('project.endTime'),
       component: 'DatePicker',
       componentProps: {
         showTime: true,
@@ -177,27 +217,18 @@ export function useFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'envInfo',
-      label: '环境信息',
+      label: $t('project.envInfo'),
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入环境信息',
-      },
     },
     {
       fieldName: 'envFileId',
-      label: '环境信息附件id',
+      label: $t('project.envInfoFile'),
       component: 'Input',
-      componentProps: {
-        placeholder: '请输入环境信息附件id',
-      },
     },
     {
       fieldName: 'remark',
-      label: '备注',
+      label: $t('project.remarks'),
       component: 'Textarea',
-      componentProps: {
-        placeholder: '请输入备注',
-      },
     },
   ];
 }
@@ -207,94 +238,110 @@ export function useGridFormSchema(): VbenFormSchema[] {
   return [
     {
       fieldName: 'name',
-      label: '项目名称',
+      label: $t('project.name'),
       component: 'Input',
       componentProps: {
         allowClear: true,
-        placeholder: '请输入项目名称',
       },
     },
     {
       fieldName: 'code',
-      label: '项目编号',
+      label: $t('project.code'),
       component: 'Input',
       componentProps: {
         allowClear: true,
-        placeholder: '请输入项目编号',
       },
     },
     {
       fieldName: 'contractCode',
-      label: '合同编号',
+      label: $t('project.contractCode'),
       component: 'Input',
       componentProps: {
         allowClear: true,
-        placeholder: '请输入合同编号',
       },
     },
     {
       fieldName: 'businessStatus',
-      label: '商务状态',
+      label: $t('project.businessStatus'),
       component: 'Select',
       componentProps: {
         allowClear: true,
         options: getDictOptions(DICT_TYPE.LIC_BUSINESS_STATUS, 'number'),
-        placeholder: '请选择商务状态',
       },
     },
     {
       fieldName: 'businessOwner',
-      label: '业务负责人',
+      label: $t('project.businessOwner'),
       component: 'Select',
       componentProps: {
+        options: userList,
         allowClear: true,
-        options: [],
+        showSearch: true,
-        placeholder: '请选择业务负责人',
+        fieldNames: { label: 'nickname', value: 'id' },
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'customerOwner',
-      label: '客户对接人',
+      label: $t('project.customerOwner'),
       component: 'Select',
       componentProps: {
+        options: userList,
         allowClear: true,
-        options: [],
+        showSearch: true,
-        placeholder: '请选择客户对接人',
+        fieldNames: { label: 'nickname', value: 'id' },
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'technicalOwnerA',
-      label: '技术负责人1',
+      label: $t('project.technicalOwnerA'),
       component: 'Select',
       componentProps: {
+        options: userList,
         allowClear: true,
-        options: [],
+        showSearch: true,
-        placeholder: '请选择技术负责人1',
+        fieldNames: { label: 'nickname', value: 'id' },
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'technicalOwnerB',
-      label: '技术负责人2',
+      label: $t('project.technicalOwnerB'),
       component: 'Select',
       componentProps: {
+        options: userList,
         allowClear: true,
-        options: [],
+        showSearch: true,
-        placeholder: '请选择技术负责人2',
+        fieldNames: { label: 'nickname', value: 'id' },
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'technicalOwnerC',
-      label: '技术负责人3',
+      label: $t('project.technicalOwnerC'),
       component: 'Select',
       componentProps: {
+        options: userList,
         allowClear: true,
-        options: [],
+        showSearch: true,
-        placeholder: '请选择技术负责人3',
+        fieldNames: { label: 'nickname', value: 'id' },
+        filterOption: (input: string, option: any) => {
+          return option.nickname.toLowerCase().includes(input.toLowerCase());
+        },
       },
     },
     {
       fieldName: 'startTime',
-      label: '项目开始时间',
+      label: $t('project.startTime'),
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
@@ -303,7 +350,7 @@ export function useGridFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'endTime',
-      label: '项目结束时间',
+      label: $t('project.endTime'),
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
@@ -312,26 +359,24 @@ export function useGridFormSchema(): VbenFormSchema[] {
     },
     {
       fieldName: 'status',
-      label: '项目状态',
+      label: $t('project.status'),
       component: 'Select',
       componentProps: {
         allowClear: true,
         options: getDictOptions(DICT_TYPE.LIC_PROJECT_STATUS, 'number'),
-        placeholder: '请选择项目状态',
       },
     },
     {
       fieldName: 'envInfo',
-      label: '环境信息',
+      label: $t('project.envInfo'),
       component: 'Input',
       componentProps: {
         allowClear: true,
-        placeholder: '请输入环境信息',
       },
     },
     {
       fieldName: 'createTime',
-      label: '创建时间',
+      label: $t('project.creationTime'),
       component: 'RangePicker',
       componentProps: {
         ...getRangePickerDefaultProps(),
@@ -348,27 +393,27 @@ export function useGridColumns(
   return [
     {
       field: 'name',
-      title: '项目名称',
+      title: $t('project.name'),
       minWidth: 120,
     },
     {
       field: 'code',
-      title: '项目编号',
+      title: $t('project.code'),
       minWidth: 120,
     },
     {
       field: 'customerName',
-      title: '所属客户',
+      title: $t('project.belongCustomer'),
       minWidth: 120,
     },
     {
       field: 'contractCode',
-      title: '合同编号',
+      title: $t('project.contractCode'),
       minWidth: 120,
     },
     {
       field: 'businessStatus',
-      title: '商务状态',
+      title: $t('project.businessStatus'),
       minWidth: 120,
       cellRender: {
         name: 'CellDict',
@@ -377,44 +422,44 @@ export function useGridColumns(
     },
     {
       field: 'businessOwnerName',
-      title: '业务负责人',
+      title: $t('project.businessOwner'),
       minWidth: 120,
     },
     {
       field: 'customerOwnerName',
-      title: '客户对接人',
+      title: $t('project.customerOwner'),
       minWidth: 120,
     },
     {
       field: 'technicalOwnerAName',
-      title: '技术负责人1',
+      title: $t('project.technicalOwnerA'),
       minWidth: 120,
     },
     {
       field: 'technicalOwnerBName',
-      title: '技术负责人2',
+      title: $t('project.technicalOwnerB'),
       minWidth: 120,
     },
     {
       field: 'technicalOwnerCName',
-      title: '技术负责人3',
+      title: $t('project.technicalOwnerC'),
       minWidth: 120,
     },
     {
       field: 'startTime',
-      title: '项目开始时间',
+      title: $t('project.startTime'),
       minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'endTime',
-      title: '项目结束时间',
+      title: $t('project.endTime'),
       minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'status',
-      title: '项目状态',
+      title: $t('project.status'),
       minWidth: 120,
       cellRender: {
         name: 'CellDict',
@@ -423,23 +468,23 @@ export function useGridColumns(
     },
     {
       field: 'envInfo',
-      title: '环境信息',
+      title: $t('project.envInfo'),
       minWidth: 120,
     },
     {
       field: 'remark',
-      title: '备注',
+      title: $t('project.remarks'),
       minWidth: 120,
     },
     {
       field: 'createTime',
-      title: '创建时间',
+      title: $t('project.creationTime'),
       minWidth: 120,
       formatter: 'formatDateTime',
     },
     {
       field: 'operation',
-      title: '操作',
+      title: $t('project.operation'),
       minWidth: 200,
       align: 'center',
       fixed: 'right',
@@ -448,7 +493,7 @@ export function useGridColumns(
       cellRender: {
         attrs: {
           nameField: 'id',
-          nameTitle: '项目',
+          nameTitle: $t('project.project'),
           onClick: onActionClick,
         },
         name: 'CellOperation',

apps/web-antd/src/views/license/project/index.vue

@@ -63,7 +63,10 @@ async function onDelete(row: ProjectApi.Project) {
 /** 导出表格 */
 async function onExport() {
   const data = await exportProject(await gridApi.formApi.getValues());
-  downloadFileFromBlobPart({ fileName: '项目.xls', source: data });
+  downloadFileFromBlobPart({
+    fileName: `${$t('project.project')}.xls`,
+    source: data,
+  });
 }
 
 /** 表格操作按钮的回调函数 */
@@ -82,6 +85,8 @@ function onActionClick({ code, row }: OnActionClickParams<ProjectApi.Project>) {
 
 const [Grid, gridApi] = useVbenVxeGrid({
   formOptions: {
+    collapsed: true,
+    collapsedRows: 2,
     schema: useGridFormSchema(),
   },
   gridOptions: {
@@ -117,7 +122,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
   <Page auto-content-height>
     <FormModal @success="onRefresh" />
 
-    <Grid table-title="项目列表">
+    <Grid :table-title="$t('project.list')">
       <template #toolbar-tools>
         <Button
           :icon="h(Plus)"
@@ -125,7 +130,7 @@ const [Grid, gridApi] = useVbenVxeGrid({
           @click="onCreate"
           v-access:code="['license:project:create']"
         >
-          {{ $t('ui.actionTitle.create', ['项目']) }}
+          {{ $t('ui.actionTitle.create', [$t('project.project')]) }}
         </Button>
         <Button
           :icon="h(Download)"

apps/web-antd/src/views/license/project/modules/form.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { ProjectApi } from '#/api/license/project';
 
-import { computed, ref } from 'vue';
+import { computed } from 'vue';
 
 import { useVbenModal } from '@vben/common-ui';
 
@@ -10,19 +10,19 @@ import { message } from 'ant-design-vue';
 import { useVbenForm } from '#/adapter/form';
 import {
   createProject,
+  getMaxSn,
   getProject,
   updateProject,
 } from '#/api/license/project';
 import { $t } from '#/locales';
 
-import { useFormSchema } from '../data';
+import { formData, useFormSchema } from '../data';
 
 const emit = defineEmits(['success']);
-const formData = ref<ProjectApi.Project>();
 const getTitle = computed(() => {
   return formData.value?.id
-    ? $t('ui.actionTitle.edit', ['项目'])
+    ? $t('ui.actionTitle.edit', [$t('project.project')])
-    : $t('ui.actionTitle.create', ['项目']);
+    : $t('ui.actionTitle.create', [$t('project.project')]);
 });
 
 const [Form, formApi] = useVbenForm({
@@ -30,12 +30,14 @@ const [Form, formApi] = useVbenForm({
     componentProps: {
       class: 'w-full',
     },
-    formItemClass: 'col-span-2',
+    // formItemClass: 'col-span-2',
     labelWidth: 80,
   },
   layout: 'horizontal',
   schema: useFormSchema(),
   showDefaultActions: false,
+  // 大屏一行显示3个，中屏一行显示2个，小屏一行显示1个
+  wrapperClass: 'grid-cols-1 md:grid-cols-2',
 });
 
 const [Modal, modalApi] = useVbenModal({
@@ -78,12 +80,18 @@ const [Modal, modalApi] = useVbenModal({
     // 设置到 values
     formData.value = data;
     await formApi.setValues(formData.value);
+
+    // 设置最大SN
+    const maxSn = await getMaxSn();
+    if (!formData.value?.code) {
+      formApi.setFieldValue('code', maxSn);
+    }
   },
 });
 </script>
 
 <template>
-  <Modal :title="getTitle">
+  <Modal :title="getTitle" class="w-[800px]">
     <Form class="mx-4" />
   </Modal>
 </template>