no message

src/api/staff/department/index.ts

@@ -1,20 +1,21 @@
 import { defHttp } from '/@/utils/http/axios'
-import { DepartmentModel, DepartmentPostModel } from '/@/api/staff/department/model'
 
 enum Api {
-  GetOrganizationDepartment = '/uec/user/get/organization-department',
-  SaveOrganizationDepartment = '/uec/user/save/organization-department',
+  GetOrganizationDepartment = '/dating-agency-uec/user/list/organization-department',
+  SaveOrganizationDepartment = '/dating-agency-uec/user/create/organization-department',
 }
 
 /**
  * 获取组织部门架构
  */
-export const getOrganizationDepartment = () =>
-  defHttp.get<DepartmentModel>({ url: Api.GetOrganizationDepartment })
+export const getOrganizationDepartment = (params: any) => defHttp.get<any>({ url: Api.GetOrganizationDepartment, params })
 
 /**
  * 用户修改组织部门信息
  * @param params
  */
-export const saveOrganizationDepartment = (params: DepartmentPostModel) =>
-  defHttp.get<DepartmentModel>({ url: Api.SaveOrganizationDepartment, params })
+export const saveOrganizationDepartment = (params: any) => defHttp.post<any>({ url: Api.SaveOrganizationDepartment, params })
+
+export const editOrganizationDepartment = (params: any) => defHttp.post<any>({ url: '/dating-agency-uec/user/edit/organization-department', params })
+
+export const deleteOrganizationDepartment = (id: string) => defHttp.post<any>({ url: '/dating-agency-uec/user/delete/organization-department', params: {id} })

src/api/staff/department/model.ts

@@ -1,37 +0,0 @@
-/**
- * 组织部门接口模型
- */
-export interface DepartmentModel {
-  childrenList: DepartmentModel[]
-  departmentName: string
-  departmentUserId: string
-  departmentUserName: string
-  id: string
-  level: number
-  organizationId: string
-  parentId: string
-  parentIds: string
-  organizationMemberList: OrganizationMemberModel[]
-  undistributedOrganizationMemberList: OrganizationMemberModel[]
-}
-
-/**
- * 组织成员接口模型
- */
-export interface OrganizationMemberModel {
-  id: string
-  joinedTime: string
-  nickName: string
-  orgId: string
-  phone: string
-  realName: string
-  status: number
-  userId: string
-}
-
-export interface DepartmentPostModel {
-  departmentName: string
-  departmentUserId: string
-  id: string
-  parentId: string
-}

src/locales/lang/zh-CN/routes/staff.ts

@@ -1,7 +1,7 @@
 export default {
   staff: '员工管理',
   auth: '权限管理',
-  staffList: '员工列表',
+  staffList: '员工管理',
   staffAudit: '员工审核',
   department: '部门管理',
 }

src/settings/projectSetting.ts

@@ -15,7 +15,7 @@ import { primaryColor } from '../../build/config/themeConfig'
 // ! You need to clear the browser cache after the change
 const setting: ProjectConfig = {
   // Whether to show the configuration button
-  showSettingButton: true,
+  showSettingButton: false,
 
   // Whether to show the theme switch button
   showDarkModeToggle: true,

src/views/staff/staff/data.ts

@@ -1,14 +1,15 @@
 import { BasicColumn, FormSchema } from '/@/components/Table'
 import { ref } from 'vue'
 import { getRoleListByPage } from '/@/api/sys/menu';
+import { getOrganizationDepartment } from '/@/api/staff/department'
 
 export const tableColumns: BasicColumn[] = [
   { title: '用户id', dataIndex: 'userId' },
-  { title: '姓名', dataIndex: 'realName' },
-  { title: '手机号', dataIndex: 'phone' },
+  { width: 100, title: '姓名', dataIndex: 'realName' },
+  { width: 120,title: '手机号', dataIndex: 'phone' },
   { title: '角色', dataIndex: 'role', slots: { customRender: 'role' }, },
   { title: '微信昵称', dataIndex: 'nickName' },
-  { title: '员工码', dataIndex: 'code' },
+  { width: 80, title: '员工码', dataIndex: 'code' },
   { title: '添加时间', dataIndex: 'joinedTime' },
 ]
 export const tableFormSchema: FormSchema[] = [
@@ -51,3 +52,25 @@ export const modalFormSchema: FormSchema[] = [
     },
   },
 ]
+
+
+export const modalFormSchema1: FormSchema[] = [
+  {
+    label: '部门名称',
+    required: true,
+    field: 'departmentName',
+    component: 'Input',
+  },
+  {
+    label: '负责人姓名',
+    required: true,
+    field: 'chargePersonName',
+    component: 'Input',
+  },
+  {
+    label: '负责人手机',
+    required: true,
+    field: 'chargePersonPhone',
+    component: 'Input',
+  },
+]

src/views/staff/staff/index.vue

@@ -1,31 +1,58 @@
 <template>
-  <div class="staff-audit">
-    <!--    系统管理-员工管理-->
-    <BasicTable @register="registerTable">
-      <template #toolbar>
-        <Button :type="'primary'" @click="handleAdd">添加员工</Button>
-      </template>
-      <template #role="{ text, record }">
-        <span v-for="(item, index) in record.organizationRoleList" :key="item.id">{{index > 0 ? ';' : ''}}{{ item.name }}</span>
-      </template>
-      <template #action="{ record }">
-        <TableAction
-          :actions="[
-            {
-              label: '编辑',
-              onClick: handleEdit.bind(null, record),
-            },
-            {
-              label: '移除',
-              color: 'error',
-              onClick: handleRemove.bind(null, record['id']),
-            },
-          ]"
-        />
-      </template>
-    </BasicTable>
-
+  <div class="flex-row" style="width: 100%;height: 100%;">
+    <div class="staff-audit" style="width: 360px;padding: 16px 0px 16px 16px;">
+      <div class="flex-col" style="width: 100%;height: 100%;background-color: white;">
+        <div class="flex-row-center-start" style="border-bottom: 1px solid #eee;padding: 12px;">
+          <Input v-model:value="departmentName" placeholder="输入部门名称" />
+          <Button type="primary" @click="fetchDepartment" style="margin: 0 12px;">查询</Button>
+          <Button @click="handleAdd1">添加部门</Button>
+        </div>
+        <Spin :spinning="spinning" style="width: 100%;height: 100%;">
+          <Result subTitle="暂无数据" v-if="departmentList.length == 0 && !spinning"></Result>
+          <div class="flex-row" style="width: 100%;padding: 10px 4px 10px 16px;border-bottom: 1px solid #eee;cursor:pointer;" :style="{background: departmentId == item.id ? '#eee' : 'white'}" v-for="item in departmentList" :key="item.id" @click="selectDepartment(item)">
+            <div class="flex-row-center-start" style="flex: 1;">
+              <span style="color: #333;font-size: 16px;">{{item.departmentName}}</span>
+              <span style="color: #999;font-size: 14px;margin-left: 4px;">({{item.chargePersonName}})</span>
+            </div>
+            <div class="flex-row-center-start">
+              <Button type="link" @click.stop="handleEdit1(item)">编辑</Button>
+              <span style="color: #999;">|</span>
+              <Button type="link" danger @click.stop="handleRemove1(item)">删除</Button>
+            </div>
+          </div> 
+        </Spin>
+      </div>
+    </div>
+    <div class="staff-audit" style="flex: 1;">
+      <BasicTable @register="registerTable">
+        <template #toolbar>
+          <div style="width: 100%; padding: 2px" class="flex-row-center-space">
+            <span style="color: #333;font-size: 16px;padding-left: 8px;">{{name}}</span>
+            <Button :type="'primary'" @click="handleAdd">添加员工</Button>
+          </div> 
+        </template>
+        <template #role="{ text, record }">
+          <span v-for="(item, index) in record.organizationRoleList" :key="item.id">{{index > 0 ? ';' : ''}}{{ item.name }}</span>
+        </template>
+        <template #action="{ record }">
+          <TableAction
+            :actions="[
+              {
+                label: '编辑',
+                onClick: handleEdit.bind(null, record),
+              },
+              {
+                label: '移除',
+                color: 'error',
+                onClick: handleRemove.bind(null, record['id']),
+              },
+            ]"
+          />
+        </template>
+      </BasicTable>
+    </div>
     <StaffEditModal @register="registerEditModal" @success="handleSuccess" />
+    <DepartmentModal @register="registerModal" @success="handleSuccess1" />
   </div>
 </template>
 
@@ -35,26 +62,87 @@
   }
 </script>
 <script setup lang="ts">
-  import { Button } from 'ant-design-vue'
+  import { onMounted, ref, nextTick } from 'vue'
+  import { Button, Input, Spin, Result } from 'ant-design-vue'
   import StaffEditModal from './modal.vue'
+  import DepartmentModal from './modal1.vue'
   import { useModal } from '/@/components/Modal'
   import { useMessage } from '/@/hooks/web/useMessage'
   import { tableColumns, tableFormSchema } from './data'
   import { BasicTable, useTable, TableAction } from '/@/components/Table'
+  import { getOrganizationDepartment, deleteOrganizationDepartment } from '/@/api/staff/department'
   import { pageOrganizationMember, deleteOrganizationMember } from '/@/api/staff/staff'
 
+  const spinning = ref<boolean>(false)
+  const departmentName = ref<string>('')
+  const name = ref<string>('')
+  const departmentId = ref<string>('')
+  const departmentList = ref<any[]>([]);
+  onMounted(() => {
+    fetchDepartment()
+  })
+
+  async function fetchDepartment() {
+      spinning.value = true
+      departmentList.value = await getOrganizationDepartment({departmentName: departmentName.value})
+      console.log(departmentList.value)
+      spinning.value = false
+  }
+
+  const [registerModal, { openModal: openDepartmentModal, closeModal: closeDepartmentModal }] = useModal()
+  function handleAdd1() {
+    openDepartmentModal(true, { ifUpdate: false, })
+  }
+  function handleEdit1(item) {
+    openDepartmentModal(true, { item, ifUpdate: true, })
+  }
+  function handleSuccess1() {
+    closeDepartmentModal()
+    fetchDepartment()
+  }
+  function selectDepartment(record){
+    if(departmentId.value === record.id){
+      departmentId.value = ''
+      name.value = ''
+    } else {
+      departmentId.value = record.id
+      name.value = record.departmentName
+    }
+    reload()
+  }
+  function handleRemove1(item) {
+    const { createConfirm } = useMessage()
+    createConfirm({
+      title: '提示',
+      iconType: 'warning',
+      content: `是否确定移除${item.departmentName}？`,
+      onOk: () => {
+        deleteOrganizationDepartment(item.id).then(() => {
+          createMessage.success('移除成功！')
+          departmentId.value = ''
+          name.value = ''
+          fetchDepartment()
+          reload()
+        })
+      },
+    })
+  }
+
   const [registerTable, { reload }] = useTable({
     bordered: true,
-    scroll: { x: 1500 },
     useSearchForm: true,
     columns: tableColumns,
     showIndexColumn: true,
     showTableSetting: false,
     api: pageOrganizationMember,
+    canResize: true,
     formConfig: {
       labelWidth: 120,
       schemas: tableFormSchema,
     },
+    beforeFetch: (arg) => {
+      arg.departmentId = departmentId.value
+    },
     actionColumn: {
       width: 150,
       title: '操作',

src/views/staff/staff/modal1.vue

@@ -0,0 +1,59 @@
+<template>
+  <BasicModal v-bind="$attrs" @ok="handleOk" @register="registerModal">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
+</template>
+
+<script setup lang="ts">
+  import { ref, unref } from 'vue'
+  import { modalFormSchema1 } from './data'
+  import { useMessage } from '/@/hooks/web/useMessage'
+  import { BasicForm, useForm } from '/@/components/Form'
+  import { BasicModal, useModalInner } from '/@/components/Modal'
+  import { saveOrganizationDepartment, editOrganizationDepartment } from '/@/api/staff/department'
+
+  const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
+    labelWidth: 100,
+    schemas: modalFormSchema1,
+    baseColProps: { span: 22 },
+    showActionButtonGroup: false,
+  })
+
+  const postModel = ref<any>({})
+  const ifUpdate = ref<boolean>(false)
+  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
+    await resetFields()
+    ifUpdate.value = !!data.ifUpdate
+    setModalProps({
+      confirmLoading: false,
+      title: ifUpdate.value ? '编辑部门' : '添加部门',
+    })
+    if (unref(ifUpdate)) {
+      await setFieldsValue({ ...data.item })
+    }
+    const { id, parentId } = data.item || {}
+    postModel.value = {
+      id: ifUpdate.value ? id : null,
+      parentId: ifUpdate.value ? parentId : null,
+    }
+    // 编辑操作，不可修改所属部门名称
+    await updateSchema({ field: 'departmentName', componentProps: { disabled: ifUpdate.value } })
+  })
+
+  const { createMessage } = useMessage()
+  const emits = defineEmits(['success'])
+  async function handleOk() {
+    try {
+      const values = await validate()
+      const model = { ...values, ...postModel.value }
+      console.log('model.............', model)
+      setModalProps({ confirmLoading: true })
+      const fun = unref(ifUpdate) ? editOrganizationDepartment : saveOrganizationDepartment
+      await fun(model)
+      createMessage.success(`${unref(ifUpdate) ? '编辑' : '新增'}成功！`)
+      emits('success')
+    } finally {
+      setModalProps({ confirmLoading: false })
+    }
+  }
+</script>