feat: 组织更新

src/api/interface/system/org.ts

@@ -17,8 +17,9 @@ export interface OrgVO extends BaseEntity {
   name: string
   orderNum: number
   leader: string
-  phone: string
-  email: string
+  phone?: string
+  remark?: string
+  email?: string
   status: string
   delFlag: string
   ancestors: string
@@ -47,18 +48,17 @@ export interface OrgTreeVO extends BaseEntity {
 /**
  * 组织表单类型
  */
-export interface OrgForm {
-  parentName?: string
-  parentId?: number | string
-  children?: OrgForm[]
-  deptId?: number | string
-  deptName?: string
-  orderNum?: number
-  leader?: string
+export interface OrgFormBo {
+  orgId: number | string
+  parentName: string
+  parentId: number | string
+  name: string
+  orderNum: number
+  leader: string
   phone?: string
+  remark?: string
   email?: string
-  status?: string
-  version?: number
-  delFlag?: string
-  ancestors?: string
+  status: string
+  delFlag: string
+  ancestors: string
 }

src/api/module/system/org.ts

@@ -17,5 +17,20 @@ class OrgApi {
   static page = (params: OrgQuery): Promise<ResultData<any>> => {
     return http.get<OrgVO>({ url: '/system/org/page', params })
   }
+
+  /**
+   * @name 添加组织列表
+   * @returns returns
+   */
+  static add = (data: OrgVO): Promise<ResultData<any>> => {
+    return http.post({ url: '/system/org/add', data })
+  }
+  /**
+   * @name 更新组织列表
+   * @returns returns
+   */
+  static edit = (data: OrgVO): Promise<ResultData<any>> => {
+    return http.post({ url: '/system/org/edit', data })
+  }
 }
 export default OrgApi

src/axios/config.ts

@@ -16,6 +16,9 @@ const defaultResponseInterceptors = (response: AxiosResponse) => {
     return response
   } else if (code === ResultEnum.SUCCESS) {
     return response.data
+  } else if (code === ResultEnum.FORBIDDEN) {
+    ElMessage.error('无权限')
+    return response.data
   } else {
     console.error(msg)
     ElMessage.error(msg)

src/components/EcoDrawer/index.vue

@@ -24,8 +24,6 @@
 <script setup lang="ts" name="EcoDrawer">
 import { DrawerProps } from 'element-plus'
 
-defineOptions({ name: 'WorkDrawer' })
-
 interface EcoDrawerProps {
   title?: string // 顶部标题
   fullscreen?: boolean // 是否默认全屏，默认 false

src/enums/HttpEnum.ts

@@ -5,6 +5,7 @@ export enum ResultEnum {
   SUCCESS = 200,
   ERROR = 500,
   OVERDUE = 401,
+  FORBIDDEN = 403,
   TIMEOUT = 30000,
   TYPE = 'success'
 }

src/types/auto-components.d.ts

@@ -20,10 +20,12 @@ declare module 'vue' {
     EcoDialog: typeof import('./../components/EcoDialog/index.vue')['default']
     EcoDialogForm: typeof import('./../components/EcoDialogForm/index.vue')['default']
     EcoDrawer: typeof import('./../components/EcoDrawer/index.vue')['default']
+    EcoDrawerForm: typeof import('./../components/EcoDrawerForm/index.vue')['default']
     EcoForm: typeof import('./../components/EcoForm/index.vue')['default']
     EcoItem: typeof import('./../components/EcoForm/components/EcoItem.vue')['default']
     ElAvatar: typeof import('element-plus/es')['ElAvatar']
     ElButton: typeof import('element-plus/es')['ElButton']
+    ElCol: typeof import('element-plus/es')['ElCol']
     ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
     ElContainer: typeof import('element-plus/es')['ElContainer']
     ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -36,11 +38,13 @@ declare module 'vue' {
     ElHeader: typeof import('element-plus/es')['ElHeader']
     ElIcon: typeof import('element-plus/es')['ElIcon']
     ElInput: typeof import('element-plus/es')['ElInput']
+    ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
     ElMain: typeof import('element-plus/es')['ElMain']
     ElMenu: typeof import('element-plus/es')['ElMenu']
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElPagination: typeof import('element-plus/es')['ElPagination']
     ElRadio: typeof import('element-plus/es')['ElRadio']
+    ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
     ElSpace: typeof import('element-plus/es')['ElSpace']
     ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
@@ -52,6 +56,7 @@ declare module 'vue' {
     ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     ElTree: typeof import('element-plus/es')['ElTree']
+    ElTreeSelect: typeof import('element-plus/es')['ElTreeSelect']
     Form: typeof import('./../views/system/org/components/form.vue')['default']
     Grid: typeof import('./../components/Grid/index.vue')['default']
     GridItem: typeof import('./../components/Grid/GridItem.vue')['default']
@@ -60,6 +65,7 @@ declare module 'vue' {
     LoginForm: typeof import('./../views/login/components/LoginForm.vue')['default']
     MenuItem: typeof import('./../layouts/components/AppMenu/MenuItem.vue')['default']
     MoreButton: typeof import('./../layouts/components/AppTabs/MoreButton.vue')['default']
+    OrgDrawer: typeof import('./../views/system/org/components/OrgDrawer.vue')['default']
     OrgForm: typeof import('./../views/system/org/components/orgForm.vue')['default']
     Pagination: typeof import('./../components/ProTable/Pagination.vue')['default']
     ProTable: typeof import('./../components/ProTable/index.vue')['default']

src/views/system/org/components/OrgDrawer.vue

@@ -0,0 +1,111 @@
+<template>
+  <ElDrawer ref="elDrawerRef" v-model="drawerVisible" :title="drawerProps.title" v-bind="$attrs">
+    <template #header="scope">
+      <slot name="header" v-bind="scope">
+        <div style="display: flex">
+          <slot name="title">
+            <span style="flex: 1">{{ drawerProps.title }}</span>
+          </slot>
+        </div>
+      </slot>
+    </template>
+
+    <el-form ref="ruleFormRef" label-width="140px" label-suffix=" :" :rules="rules" :model="drawerProps.row" @submit.enter.prevent="handleConfirm">
+      <el-form-item label="上级部门" prop="parentId">
+        <el-tree-select
+          v-model="drawerProps.row.parentId"
+          :data="treeData"
+          check-strictly
+          placeholder="请选择上级"
+          :render-after-expand="false"
+          clearable
+          :default-expand-all="true"
+          :props="treeProps" />
+      </el-form-item>
+      <el-form-item label="组织名称" prop="name">
+        <el-input v-model="drawerProps.row.name" placeholder="请填写部门名称" clearable />
+      </el-form-item>
+      <el-form-item label="排序" prop="sort">
+        <el-input-number v-model="drawerProps.row.orderNum" :precision="0" :min="1" :max="999999" />
+      </el-form-item>
+      <el-form-item label="备注" prop="remark">
+        <el-input v-model="drawerProps.row.remark" placeholder="请填写备注" clearable />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <slot name="footer">
+        <ElButton @Click="drawerVisible = false">取 消</ElButton>
+        <ElButton type="primary" @click="handleConfirm()">确 定</ElButton>
+      </slot>
+    </template>
+  </ElDrawer>
+</template>
+
+<script setup lang="ts" name="OrgForm">
+import { OrgTreeVO, OrgFormBo } from '@/api/interface/system/org'
+import OrgApi from '@/api/module/system/org'
+
+import { FormInstance } from 'element-plus'
+const rules = reactive({
+  name: [{ required: true, message: '请填写组织名称' }],
+  parentId: [{ required: true, message: '请选择上级' }]
+})
+
+interface EcoDrawerProps {
+  api?: (params: any) => Promise<any> // 调用接口
+  title: string // 顶部标题
+  isView: boolean
+  row: Partial<OrgFormBo>
+  getTableList?: () => void
+}
+
+const treeData = ref<OrgTreeVO[]>([])
+const treeProps = {
+  label: 'name',
+  value: 'id'
+}
+
+const drawerVisible = ref(false)
+const drawerProps = ref<EcoDrawerProps>({
+  isView: false,
+  title: '',
+  row: {}
+})
+
+// 接收父组件传过来的参数
+const acceptParams = (params: EcoDrawerProps) => {
+  drawerProps.value = params
+  drawerVisible.value = true
+  loadTree()
+  console.log('params', params)
+}
+
+const loadTree = () => {
+  OrgApi.tree().then(res => {
+    treeData.value = res.data
+  })
+}
+
+// 提交数据（新增/编辑）
+const ruleFormRef = ref<FormInstance>()
+const handleConfirm = () => {
+  ruleFormRef.value!.validate(async valid => {
+    if (!valid) return
+    try {
+      await drawerProps.value.api!(drawerProps.value.row)
+      ElMessage.success({ message: `${drawerProps.value.title}用户成功！` })
+      drawerProps.value.getTableList!()
+      drawerVisible.value = false
+    } catch (error) {
+      console.log(error)
+    }
+  })
+}
+
+defineExpose({
+  acceptParams
+})
+</script>
+
+<style scoped lang="scss"></style>

src/views/system/org/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="main-box">
     <TreeFilter title="组织架构" :request-api="OrgApi.tree" label="name" :default-value="initParam.orgId" @change="changeTree" />
-
     <div class="table-box">
       <ProTable
         ref="proTableRef"
@@ -14,23 +13,25 @@
         :request-api="getTableList">
         <!-- 表格 header 按钮 -->
         <template #tableHeader="scope">
-          <el-button type="primary" icon="CirclePlus"> 新增组织 </el-button>
+          <el-button type="primary" icon="CirclePlus" @click="openDrawer('新增')"> 新增组织 </el-button>
           <el-button type="danger" icon="Delete" plain :disabled="!scope.isSelected"> 批量删除 </el-button>
         </template>
 
         <template #operation="{ row }">
-          <el-button type="primary" link icon="EditPen"> 编辑 </el-button>
+          <el-button type="primary" link icon="EditPen" @click="openDrawer('编辑', row)"> 编辑 </el-button>
           <el-button v-if="row.id !== 1" type="primary" link icon="Delete"> 删除 </el-button>
         </template>
       </ProTable>
     </div>
+    <OrgDrawer ref="drawerRef" />
   </div>
 </template>
 <script lang="tsx" setup name="OrgManage">
 import { RoleInfo, RoleQuery } from '@/api/interface/system/role'
 import OrgApi from '@/api/module/system/org'
+import OrgDrawer from './components/OrgDrawer.vue'
 import { ColumnProps, ProTableInstance, SearchProps } from '@/components/ProTable/interface'
-
+import { OrgFormBo } from '@/api/interface/system/org'
 const initParam = reactive({ orgId: '', parentId: '' })
 
 const selectTreeId = ref<string>('')
@@ -60,4 +61,17 @@ const searchColumns: SearchProps[] = [{ prop: 'name', label: '组织名称', el:
 
 // 获取table列表
 const getTableList = (params: RoleQuery) => OrgApi.page(params)
+
+// 打开 drawer(新增、查看、编辑)
+const drawerRef = ref<InstanceType<typeof OrgDrawer> | null>(null)
+const openDrawer = (title: string, row: Partial<OrgFormBo> = {}) => {
+  const params = {
+    title,
+    row: row ? { ...row } : { parentId: selectTreeId.value },
+    isView: title === '查看',
+    api: title === '新增' ? OrgApi.add : title === '编辑' ? OrgApi.edit : undefined,
+    getTableList: proTableRef.value?.getTableList
+  }
+  drawerRef.value?.acceptParams(params)
+}
 </script>