feat(scrm): add createDepartment

Author: Matrix-X

src/api/scrm/wecom/department/index.ts

@@ -34,6 +34,18 @@ export interface DepartmentNode {
   children?: DepartmentNode[];
 }
 
+export interface WeComDepartment {
+  id: number;
+  departmentLeader: null;
+  name: string;
+  nameEn: string;
+  order: number;
+  refDepartmentId: number;
+  weComDepId: number;
+  weComParentId: number;
+  children: WeComDepartment[];
+}
+
 export interface GetDepartmentTreeRequest {
   depId?: number;
 }
@@ -55,64 +67,56 @@ export function getDepartmentTree() {
   );
 }
 
-export interface CreateDepartmentRequest {
-  depName: string;
-  leaderId: number;
-  leaderIds: number[];
-  pId: number;
-  desc?: string;
-  phoneNumber?: string;
-  email?: string;
-  remark?: string;
+export type CreateWeComDepartmentRequest = WeComDepartment;
+
+export interface CreateWeComDepartmentReply {
+  success: boolean;
 }
 
-export interface CreateDepartmentReply {
+export function createWeComDepartment(request: CreateWeComDepartmentRequest) {
+  return axios.post<CreateWeComDepartmentReply>(
+    `${PrefixUriAdmin + UriWeComDepartment}`,
+    request,
+  );
+}
+
+export type PatchWeComDepartmentRequest = WeComDepartment;
+
+export interface PatchWeComDepartmentReply {
   id: number;
 }
 
-export function createDepartment(request: CreateDepartmentRequest) {
-  return axios.post<CreateDepartmentReply>(
-    '/api/v1/admin/department/departments',
+export function patchWeComDepartment(request: PatchWeComDepartmentRequest) {
+  return axios.patch<PatchWeComDepartmentReply>(
+    `${PrefixUriAdmin + UriWeComDepartment}`,
     request,
   );
 }
 
-export interface DeleteDepartmentRequest {
+export interface DeleteWeComDepartmentRequest {
   id: number;
 }
 
-export interface DeleteDepartmentReply {
+export interface DeleteWeComDepartmentReply {
   id: number;
 }
 
-export function deleteDepartment(request: DeleteDepartmentRequest) {
-  return axios.delete<DeleteDepartmentReply>(
-    `/api/v1/admin/department/departments/${request.id}`,
+export function deleteWeComDepartment(request: DeleteWeComDepartmentRequest) {
+  return axios.delete<DeleteWeComDepartmentReply>(
+    `${PrefixUriAdmin + UriWeComDepartment}/${request.id}`,
   );
 }
 
-export interface WeComDepartment {
-  id: number;
-  departmentLeader: null;
-  name: string;
-  nameEn: string;
-  order: number;
-  refDepartmentId: number;
-  weComDepId: number;
-  weComParentId: number;
-  children: WeComDepartment[];
-}
-
-export interface GetDepartmentRequest {
+export interface GetWeComDepartmentRequest {
   departmentId: number;
 }
 
-export interface GetDepartmentReply {
+export interface GetWeComDepartmentReply {
   department: WeComDepartment;
 }
 
-export function getDepartment(request: GetDepartmentRequest) {
-  return axios.post<GetDepartmentReply>(
+export function getWeComDepartment(request: GetWeComDepartmentRequest) {
+  return axios.post<GetWeComDepartmentReply>(
     `${PrefixUriAdmin + UriWeComDepartment}/tree`,
     request,
   );

src/store/modules/scrm/wecom/user.ts

@@ -1,5 +1,8 @@
 import { defineStore } from 'pinia';
-import { getDepartment, WeComDepartment } from '@/api/scrm/wecom/department';
+import {
+  getWeComDepartment,
+  WeComDepartment,
+} from '@/api/scrm/wecom/department';
 import { Message } from '@arco-design/web-vue';
 import { listUsersPage } from '@/api/scrm/wecom/user';
 
@@ -16,6 +19,7 @@ interface UserState {
   selectedDepartmentIds: number[];
   selectedTag: number | null;
   selectedViewType: ViewType;
+  showCreateDepartmentModal: boolean;
 }
 
 const useWeComUserStore = defineStore('weComUser', {
@@ -27,6 +31,7 @@ const useWeComUserStore = defineStore('weComUser', {
     selectedDepartmentIds: [],
     selectedTag: null,
     selectedViewType: 'department',
+    showCreateDepartmentModal: false,
   }),
   actions: {
     setDepartmentTree(tree: WeComDepartment) {
@@ -70,7 +75,7 @@ const useWeComUserStore = defineStore('weComUser', {
       this.selectedViewType = type;
     },
     async loadDepartmentTree(departmentId: number) {
-      const res = await getDepartment({ departmentId });
+      const res = await getWeComDepartment({ departmentId });
       if (res.data) {
         this.departmentTree = [res.data.department];
       } else {

src/views/scrm/wecom/organization/user/components/add-department/index.module.less

@@ -0,0 +1,3 @@
+.container{
+  
+}

src/views/scrm/wecom/organization/user/components/add-department/index.vue

@@ -0,0 +1,116 @@
+<script setup lang="ts">
+  import useWeComUserStore from '@/store/modules/scrm/wecom/user';
+  import { reactive, ref } from 'vue';
+  import { Message } from '@arco-design/web-vue';
+  import {
+    createWeComDepartment,
+    CreateWeComDepartmentRequest,
+  } from '@/api/scrm/wecom/department';
+  import useLoadingStore from '@/store/modules/loading';
+  import styles from './index.module.less';
+
+  const useWeComUser = useWeComUserStore();
+  const loadingStore = useLoadingStore();
+
+  const formRef = ref();
+  const form = reactive<{
+    name: string;
+    departmentId: number | null;
+  }>({
+    name: '',
+    departmentId: null,
+  });
+
+  const resetForm = () => {
+    form.name = '';
+    form.departmentId = null;
+  };
+
+  const handleBeforeOk = async (done: any) => {
+    const err = await formRef.value.validate();
+    if (err !== undefined) {
+      Message.warning({
+        content: '请检查表单输入',
+        duration: 5000,
+      });
+      done(false);
+      return;
+    }
+
+    loadingStore.setLoading(true);
+    try {
+      await createWeComDepartment({
+        name: form.name,
+        weComParentId: form.departmentId,
+        // order: 99990000,
+      } as CreateWeComDepartmentRequest);
+      useWeComUser.setSelectedDepartment(1);
+      Message.success(`${form.name} 部门已经创建成功`);
+      done(true);
+    } catch (e: any) {
+      Message.error(e.message);
+      done(false);
+    } finally {
+      loadingStore.setLoading(false);
+    }
+  };
+  const handleCancel = () => {
+    useWeComUser.showCreateDepartmentModal = false;
+  };
+
+  const handleDepartmentChange = (val: number) => {
+    form.departmentId = val;
+    formRef.value?.validateField?.('departmentId'); // 手动触发该字段的校验
+  };
+
+  const rules = {
+    name: [
+      {
+        required: true,
+        message: '部门名称是必填的',
+      },
+    ],
+    departmentId: [{ required: true, message: '请选择所属部门' }],
+  };
+
+  defineExpose({
+    resetForm,
+  });
+</script>
+
+<template>
+  <div :class="styles.container">
+    <a-modal
+      v-model:visible="useWeComUser.showCreateDepartmentModal"
+      title="新建部门"
+      @cancel="handleCancel"
+      @before-ok="handleBeforeOk"
+    >
+      <a-form ref="formRef" :rules="rules" :model="form">
+        <a-form-item field="name" label="部门名称" validate-trigger="blur">
+          <a-input v-model="form.name" />
+        </a-form-item>
+        <a-form-item
+          field="departmentId"
+          label="所属部门"
+          validate-trigger="blur"
+        >
+          <a-tree-select
+            v-model="form.departmentId"
+            :data="useWeComUser.departmentTree"
+            placeholder="选择所属部门"
+            :field-names="{
+              key: 'weComDepId',
+              title: 'name',
+              children: 'children',
+            }"
+            style="width: 300px"
+            @change="handleDepartmentChange"
+          ></a-tree-select>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
+</template>
+
+<style scoped></style>

src/views/scrm/wecom/organization/user/components/user-list/index.vue

@@ -116,6 +116,7 @@
       :loading="state.tableLoading"
       :row-selection="rowSelection"
       column-resizable
+      row-key="userId"
       scrollbar
       :class="styles.userTable"
       :pagination="pagination"

src/views/scrm/wecom/organization/user/index.vue

@@ -7,11 +7,13 @@
   import { pullSyncWeComDepartmentsAndUsers } from '@/api/scrm/wecom/user';
   import { Message } from '@arco-design/web-vue';
   import useLoadingStore from '@/store/modules/loading';
+  import AddDepartment from '@/views/scrm/wecom/organization/user/components/add-department/index.vue';
   import { consola } from 'consola';
   import styles from './index.module.less';
 
   const useWeComUser = useWeComUserStore();
   const loadingStore = useLoadingStore();
+  const addDepartmentRef = ref<InstanceType<typeof AddDepartment> | null>(null);
 
   const checkedViewType = ref('department');
   const handleDepartmentChange = (data: number) => {
@@ -26,8 +28,10 @@
   };
 
   const onAddDepartment = () => {
-    console.log('add department');
+    addDepartmentRef.value?.resetForm();
+    useWeComUser.showCreateDepartmentModal = true;
   };
+
   const onSyncWeComDepartments = async () => {
     loadingStore.setLoading(true);
     try {
@@ -113,6 +117,7 @@
       <UserList v-if="useWeComUser.selectedViewType === 'department'" />
       <TagUserList v-if="useWeComUser.selectedViewType === 'tag'" />
     </div>
+    <AddDepartment ref="addDepartmentRef" />
   </div>
 </template>