feat: add process drawer

Author: fit2cloudwxx

frontend/packages/web/src/components/business/crm-approval-popover/useApprovalPopoverDetail.ts

@@ -6,7 +6,7 @@ import { ApproverItem } from '@/components/business/crm-approver-avatar-list/ind
 
 export type ApprovalPopoverFormKeyType =
   | FormDesignKeyEnum.CONTRACT
-  | FormDesignKeyEnum.CONTRACT_INVOICE
+  | FormDesignKeyEnum.INVOICE
   | FormDesignKeyEnum.OPPORTUNITY_QUOTATION
   | FormDesignKeyEnum.ORDER;
 
@@ -26,7 +26,7 @@ const detailApiMap: Record<ApprovalPopoverFormKeyType, (sourceId: string) => Pro
       approveUserList: [],
       resourceId: '',
     }),
-  [FormDesignKeyEnum.CONTRACT_INVOICE]: (sourceId: string) =>
+  [FormDesignKeyEnum.INVOICE]: (sourceId: string) =>
     Promise.resolve({
       approveStatus: ProcessStatusEnum.NONE,
       approveUserList: [],

frontend/packages/web/src/components/business/crm-approver-avatar-list/index.vue

@@ -104,14 +104,15 @@
     display: flex;
     padding: 8px 2px;
     flex-wrap: wrap;
-    gap: 8px;
+    gap: 4px;
   }
   .crm-approver-avatar-list__item {
     display: flex;
     align-items: center;
     min-width: 0;
     max-width: 100%;
-    gap: 8px;
+    column-gap: 8px;
+    row-gap: 4px;
     cursor: pointer;
   }
   .crm-approver-avatar-list__avatar-wrap {
@@ -125,7 +126,7 @@
     transition: box-shadow 0.18s ease;
     @apply flex flex-shrink-0 items-center justify-between;
     &--active {
-      box-shadow: 0 0 0 0.5px var(--primary-8);
+      box-shadow: 0 0 0 1px var(--primary-8);
     }
   }
   .crm-approver-avatar-list__item:hover {

frontend/packages/web/src/components/business/crm-editable-text/index.vue

@@ -5,17 +5,23 @@
     v-model:value="inputValue"
     :maxlength="255"
     clearable
+    @update-value="handleInput"
     @keydown.enter="confirmEdit"
     @blur="handleBlur"
   />
-  <div v-else class="flex items-center gap-[8px]">
+  <div
+    v-else
+    class="crm-editable-text-view flex min-w-0 max-w-full items-center gap-[8px]"
+    :class="{ 'cursor-pointer': props.clickToEdit }"
+    @click="props.clickToEdit ? enableEditMode() : undefined"
+  >
     <slot>{{ value }} </slot>
     <CrmIcon
       v-permission="props.permission"
       class="table-row-edit cursor-pointer text-[var(--text-n4)]"
       type="iconicon_edit"
       :size="16"
-      @click="enableEditMode"
+      @click.stop="enableEditMode"
     />
   </div>
 </template>
@@ -28,10 +34,14 @@
   const props = defineProps<{
     value: string;
     permission: string[];
+    clickToEdit?: boolean;
+    emptyTextTip?: string;
   }>();
 
   const emit = defineEmits<{
     (e: 'handleEdit', value: string, done?: () => void): void;
+    (e: 'input', value: string): void;
+    (e: 'cancel'): void;
   }>();
 
   const { t } = useI18n();
@@ -51,7 +61,7 @@
 
   function confirmEdit() {
     if (!inputValue.value.trim().length) {
-      Message.warning(t('common.value.notNull'));
+      Message.warning(props.emptyTextTip ?? t('common.value.notNull'));
       return;
     }
     emit('handleEdit', inputValue.value, () => {
@@ -61,10 +71,19 @@
 
   function handleBlur() {
     isEditing.value = false;
+    emit('cancel');
+  }
+
+  function handleInput(value: string) {
+    emit('input', value);
   }
 </script>
 
 <style lang="less">
+  .crm-editable-text-view {
+    min-width: 0;
+    max-width: 100%;
+  }
   .n-data-table {
     .table-row-edit {
       @apply invisible;

frontend/packages/web/src/components/business/crm-process-drawer/index.vue

@@ -12,19 +12,21 @@
   >
     <template #header>
       <div class="crm-process-drawer-header-content">
-        <div class="crm-process-drawer-header-item flex items-center">
+        <div class="crm-process-drawer-header-item crm-process-drawer-header-item--title flex items-center">
           <n-button text class="mr-[4px] w-[32px]" @click="handleCancel">
             <n-icon size="16">
               <ChevronBackOutline />
             </n-icon>
           </n-button>
-          <div class="one-line-text flex flex-1 items-center gap-[8px]">
-            <n-tooltip trigger="hover" :delay="300" :disabled="!props.title">
-              <template #trigger>
-                <div class="one-line-text !leading-[20px]"> {{ props.title ?? '-' }}</div>
-              </template>
-              {{ props.title ?? '-' }}
-            </n-tooltip>
+          <div class="crm-process-drawer-title-wrap flex flex-1 items-center gap-[8px]">
+            <slot name="title">
+              <n-tooltip trigger="hover" :delay="300" :disabled="!props.title">
+                <template #trigger>
+                  <div class="one-line-text !leading-[20px]"> {{ props.title ?? '-' }}</div>
+                </template>
+                {{ props.title ?? '-' }}
+              </n-tooltip>
+            </slot>
           </div>
         </div>
         <div class="flex justify-center">
@@ -111,10 +113,21 @@
 <style scoped lang="less">
   .crm-process-drawer-header-content {
     padding: 8px;
+    gap: 24px;
     box-sizing: border-box;
     @apply flex items-center;
     .crm-process-drawer-header-item {
       @apply flex flex-1;
+
+      min-width: 0;
+    }
+    .crm-process-drawer-header-item--title {
+      flex: 1 1 0;
+      min-width: 0;
+    }
+    .crm-process-drawer-title-wrap {
+      overflow: hidden;
+      min-width: 0;
     }
   }
 </style>

frontend/packages/web/src/config/process.ts

@@ -1,3 +1,4 @@
+import { FormDesignKeyEnum } from '@lib/shared/enums/formDesignEnum';
 import { ProcessStatusEnum } from '@lib/shared/enums/process';
 import { useI18n } from '@lib/shared/hooks/useI18n';
 import { ProcessStatusType } from '@lib/shared/models/system/process';
@@ -43,3 +44,17 @@ export const processStatusOptions = Object.entries(processStatusMap).map(([key,
   label: value.label,
   value: key,
 }));
+
+export const defaultBasicForm = {
+  businessType: FormDesignKeyEnum.OPPORTUNITY_QUOTATION,
+  name: '',
+  executionTiming: ['CREATE'],
+  description: '',
+};
+
+export const defaultMoreConfig = {
+  submitterAuthority: true,
+  approverAuthority: [],
+  autoApproval: 'firstNodeApproval',
+  approvalOpinion: false,
+};

frontend/packages/web/src/router/routes/modules/system.ts

@@ -17,6 +17,7 @@ const system: AppRouteRecordRaw = {
       'SYSTEM_NOTICE:READ',
       'SYSTEM_SETTING:READ',
       'OPERATION_LOG:READ',
+      'APPROVAL_FLOW:READ',
     ],
     icon: 'iconicon_set_up',
     collapsedLocale: 'menu.collapsedSettings',
@@ -65,7 +66,7 @@ const system: AppRouteRecordRaw = {
       meta: {
         hideChildrenInMenu: true,
         locale: 'menu.settings.processSetting',
-        permissions: [], // todo xinxinwu
+        permissions: ['APPROVAL_FLOW:READ'],
       },
       children: [
         {
@@ -75,7 +76,7 @@ const system: AppRouteRecordRaw = {
           meta: {
             locale: 'menu.settings.approvalFlow',
             isTopMenu: true,
-            permissions: [], // todo xinxinwu
+            permissions: ['APPROVAL_FLOW:READ'],
           },
         },
         // todo 这个版本不上工作流

frontend/packages/web/src/views/contract/invoice/components/invoiceTable.vue

@@ -459,7 +459,7 @@
       approvalStatus: (row: ContractInvoiceItem) =>
         h(CrmApprovalPopover, {
           status: row.approvalStatus,
-          formKey: FormDesignKeyEnum.CONTRACT_INVOICE,
+          formKey: FormDesignKeyEnum.INVOICE,
           sourceId: row.id,
           disabled: row.approvalStatus !== ProcessStatusEnum.UNAPPROVED,
           onMore: () => {

frontend/packages/web/src/views/system/process/locale/en-US.ts

@@ -31,4 +31,8 @@ export default {
   'process.process.approvalAuthority.allowAddSign': 'Allow adding signatory',
   'process.process.approvalAuthority.allowAddTempApprover':
     'When checked, approver can add temporary approver in the approval flow',
+  'process.process.processName': 'Process Name',
+  'process.process.basic.businessType': 'Business Type',
+  'process.process.basic.executionTiming': 'Execution timing',
+  'process.process.basic.description': 'Description',
 };

frontend/packages/web/src/views/system/process/locale/zh-CN.ts

@@ -28,4 +28,8 @@ export default {
   'process.process.approvalAuthority.addTempApprover': '勾选后，审批人可在审批流程中增加临时审批人',
   'process.process.approvalAuthority.allowAddSign': '允许加签',
   'process.process.approvalAuthority.allowAddTempApprover': '勾选后，审批人可在审批流程中增加临时审批人',
+  'process.process.processName': '流程名称',
+  'process.process.basic.businessType': '业务类型',
+  'process.process.basic.executionTiming': '执行时机',
+  'process.process.basic.description': '描述信息',
 };

frontend/packages/web/src/views/system/process/process/components/addProcessDrawer.vue

@@ -7,23 +7,50 @@
     @next-step="handleNextStep"
     @cancel="() => emit('cancel')"
   >
+    <template #title>
+      <div class="process-name-header flex max-w-full flex-1 overflow-hidden">
+        <CrmEditableText
+          :status="errorStatus"
+          size="small"
+          :value="form.basicConfig.name"
+          :permission="['APPROVAL_FLOW:UPDATE']"
+          click-to-edit
+          :emptyTextTip="t('common.notNull', { value: t('process.process.processName') })"
+          @handle-edit="handleEditName"
+          @input="handleInput"
+          @cancel="handleCancelEditName"
+        >
+          <n-tooltip trigger="hover" :delay="300" :disabled="!form.basicConfig.name">
+            <template #trigger>
+              <div class="process-name one-line-text">
+                {{ form.basicConfig.name ?? '-' }}
+              </div>
+            </template>
+            {{ form.basicConfig.name ?? '-' }}
+          </n-tooltip>
+        </CrmEditableText>
+      </div>
+    </template>
     <template v-if="visible">
-      <ApprovalFlowDesign v-if="activeTab === 'process'" />
-      <moreSetting v-if="activeTab === 'moreSetting'" />
+      <ApprovalFlowDesign v-if="activeTab === 'process'" v-model:basicConfig="form.basicConfig" />
+      <moreSetting v-if="activeTab === 'moreSetting'" v-model:moreConfig="form.moreConfig" />
     </template>
   </CrmProcessDrawer>
 </template>
 
 <script setup lang="ts">
   import { ref } from 'vue';
-  import { useMessage } from 'naive-ui';
+  import { NTooltip } from 'naive-ui';
 
   import { useI18n } from '@lib/shared/hooks/useI18n';
 
+  import CrmEditableText from '@/components/business/crm-editable-text/index.vue';
   import CrmProcessDrawer from '@/components/business/crm-process-drawer/index.vue';
   import ApprovalFlowDesign from './approvalFlowDesign.vue';
   import moreSetting from './moreSetting.vue';
 
+  import { defaultBasicForm, defaultMoreConfig } from '@/config/process';
+
   const { t } = useI18n();
 
   const props = defineProps<{
@@ -40,6 +67,13 @@
 
   const activeTab = ref('process');
 
+  const form = ref({
+    basicConfig: defaultBasicForm,
+    moreConfig: defaultMoreConfig,
+  });
+
+  const editingName = ref('');
+
   const tabList = [
     {
       name: 'process',
@@ -60,6 +94,49 @@
   }
 
   function handleSave() {}
+
+  function handleEditName(value: string, done?: () => void) {
+    form.value.basicConfig.name = value;
+    editingName.value = value;
+    done?.();
+  }
+
+  function handleCancelEditName() {
+    editingName.value = form.value.basicConfig.name ?? '';
+  }
+
+  const errorStatus = computed(() => (editingName.value.trim().length ? '' : 'error'));
+  function handleInput(value: string) {
+    editingName.value = value;
+  }
 </script>
 
-<style scoped></style>
+<style lang="less">
+  .process-name-header {
+    min-width: 0;
+    > * {
+      min-width: 0;
+      max-width: 100%;
+      flex: 1 1 auto;
+    }
+    .table-row-edit {
+      @apply invisible;
+    }
+    &:hover {
+      .table-row-edit {
+        color: var(--primary-8);
+        @apply visible;
+      }
+    }
+    .process-name {
+      overflow: hidden;
+      min-width: 0;
+      max-width: 100%;
+      font-size: 14px;
+      font-weight: 400;
+      border-bottom: 2px solid var(--text-n6);
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+</style>