feat(dept): 新增部门管理

public/platform-config.json

@@ -1,6 +1,6 @@
 {
   "Version": "5.2.0",
-  "Title": "科派腾牛群系统",
+  "Title": "科湃腾牛群系统",
   "FixedHeader": true,
   "HiddenSideBar": false,
   "MultiTagsCache": false,

src/api/system.ts

@@ -2,7 +2,8 @@ import { http } from "@/utils/http";
 import { baseUrlApi } from "./utils";
 
 type Result = {
-  success: boolean;
+  code: number;
+  msg: string;
   data?: Array<any>;
 };
 
@@ -49,6 +50,19 @@ export const getMenuList = (data?: object) => {
 export const getDeptList = (data?: object) => {
   return http.request<Result>("post", baseUrlApi("system/dept/list"), { data });
 };
+/** 系统管理-部门管理删除 */
+export const deptDelete = (id: number) => {
+  return http.request<Result>("delete", baseUrlApi(`system/dept/${id}`));
+};
+
+/** 系统管理-部门管理新增或修改 */
+export const deptCreateOrUpdate = (data?: object) => {
+  return http.request<Result>(
+    "post",
+    baseUrlApi(`system/dept/createOrUpdate`),
+    { data }
+  );
+};
 
 /** 获取系统监控-在线用户列表 */
 export const getOnlineLogsList = (data?: object) => {

src/utils/http/index.ts

@@ -13,8 +13,9 @@ import { stringify } from "qs";
 import NProgress from "../progress";
 import { getToken, formatToken } from "@/utils/auth";
 import { useUserStoreHook } from "@/store/modules/user";
-/* import { log } from "console";
-import { message } from "../message"; */
+/* import { message } from "../message";
+import router from "@/router";
+import { log } from "console"; */
 
 // 相关配置请参考：www.axios-js.com/zh-cn/docs/#axios-request-config-1
 const defaultConfig: AxiosRequestConfig = {

src/utils/tree.ts

@@ -146,7 +146,7 @@ export const handleTree = (
   }
   const config = {
     id: id || "id",
-    parentId: parentId || "parentId",
+    parentId: parentId || "parent_id",
     childrenList: children || "children"
   };
 

src/views/system/dept/form.vue

@@ -8,14 +8,13 @@ import { usePublicHooks } from "../hooks";
 const props = withDefaults(defineProps<FormProps>(), {
   formInline: () => ({
     higherDeptOptions: [],
-    parentId: 0,
+    id: 0,
+    parent_id: 0,
     name: "",
-    principal: "",
-    phone: "",
-    email: "",
+    leader_id: "",
     sort: 0,
-    status: 1,
-    remark: ""
+    is_show: 1,
+    remarks: ""
   })
 });
 
@@ -38,10 +37,11 @@ defineExpose({ getRef });
     label-width="82px"
   >
     <el-row :gutter="30">
+      <re-col v-show="false"><el-input v-model="newFormInline.id" /></re-col>
       <re-col>
         <el-form-item label="上级部门">
           <el-cascader
-            v-model="newFormInline.parentId"
+            v-model="newFormInline.parent_id"
             class="w-full"
             :options="newFormInline.higherDeptOptions"
             :props="{
@@ -74,14 +74,14 @@ defineExpose({ getRef });
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="部门负责人">
           <el-input
-            v-model="newFormInline.principal"
+            v-model="newFormInline.leader_id"
             clearable
             placeholder="请输入部门负责人"
           />
         </el-form-item>
       </re-col>
 
-      <re-col :value="12" :xs="24" :sm="24">
+      <!-- <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="手机号" prop="phone">
           <el-input
             v-model="newFormInline.phone"
@@ -98,7 +98,7 @@ defineExpose({ getRef });
             placeholder="请输入邮箱"
           />
         </el-form-item>
-      </re-col>
+      </re-col> -->
 
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="排序">
@@ -114,10 +114,10 @@ defineExpose({ getRef });
       <re-col :value="12" :xs="24" :sm="24">
         <el-form-item label="部门状态">
           <el-switch
-            v-model="newFormInline.status"
+            v-model="newFormInline.is_show"
             inline-prompt
             :active-value="1"
-            :inactive-value="0"
+            :inactive-value="2"
             active-text="启用"
             inactive-text="停用"
             :style="switchStyle"
@@ -128,7 +128,7 @@ defineExpose({ getRef });
       <re-col>
         <el-form-item label="备注">
           <el-input
-            v-model="newFormInline.remark"
+            v-model="newFormInline.remarks"
             placeholder="请输入备注信息"
             type="textarea"
           />

src/views/system/dept/index.vue

@@ -46,13 +46,13 @@ const {
       </el-form-item>
       <el-form-item label="状态：" prop="status">
         <el-select
-          v-model="form.status"
+          v-model="form.is_show"
           placeholder="请选择状态"
           clearable
           class="!w-[180px]"
         >
           <el-option label="启用" :value="1" />
-          <el-option label="停用" :value="0" />
+          <el-option label="停用" :value="2" />
         </el-select>
       </el-form-item>
       <el-form-item>

src/views/system/dept/utils/hook.tsx

@@ -2,18 +2,17 @@ import dayjs from "dayjs";
 import editForm from "../form.vue";
 import { handleTree } from "@/utils/tree";
 import { message } from "@/utils/message";
-import { getDeptList } from "@/api/system";
+import { deptDelete, getDeptList, deptCreateOrUpdate } from "@/api/system";
 import { usePublicHooks } from "../../hooks";
 import { addDialog } from "@/components/ReDialog";
 import { reactive, ref, onMounted, h } from "vue";
 import type { FormItemProps } from "../utils/types";
-import { cloneDeep, isAllEmpty, deviceDetection } from "@pureadmin/utils";
-/* import { da } from "element-plus/es/locale"; */
+import { cloneDeep, deviceDetection } from "@pureadmin/utils";
 
 export function useDept() {
   const form = reactive({
     name: "",
-    status: null
+    is_show: null
   });
 
   const formRef = ref();
@@ -22,6 +21,12 @@ export function useDept() {
   const { tagStyle } = usePublicHooks();
 
   const columns: TableColumnList = [
+    {
+      label: "序号",
+      prop: "id",
+      width: 180,
+      align: "left"
+    },
     {
       label: "部门名称",
       prop: "name",
@@ -35,25 +40,32 @@ export function useDept() {
     },
     {
       label: "状态",
-      prop: "status",
+      prop: "is_show",
       minWidth: 100,
       cellRenderer: ({ row, props }) => (
-        <el-tag size={props.size} style={tagStyle.value(row.status)}>
-          {row.status === 1 ? "启用" : "停用"}
+        <el-tag size={props.size} style={tagStyle.value(row.is_show)}>
+          {row.is_show === 1 ? "启用" : "停用"}
         </el-tag>
       )
     },
+    {
+      label: "备注",
+      prop: "remarks",
+      minWidth: 320
+    },
     {
       label: "创建时间",
       minWidth: 200,
-      prop: "createTime",
-      formatter: ({ createTime }) =>
-        dayjs(createTime).format("YYYY-MM-DD HH:mm:ss")
+      prop: "created_at_format",
+      formatter: ({ created_at_format }) =>
+        dayjs(created_at_format).format("YYYY-MM-DD HH:mm:ss")
     },
     {
-      label: "备注",
-      prop: "remark",
-      minWidth: 320
+      label: "更新时间",
+      minWidth: 200,
+      prop: "updated_at_format",
+      formatter: ({ updated_at_format }) =>
+        dayjs(updated_at_format).format("YYYY-MM-DD HH:mm:ss")
     },
     {
       label: "操作",
@@ -67,24 +79,20 @@ export function useDept() {
     console.log("handleSelectionChange", val);
   }
 
+  // todo is_show字段没有重置
   function resetForm(formEl) {
     if (!formEl) return;
     formEl.resetFields();
     onSearch();
   }
-
   async function onSearch() {
     loading.value = true;
-    const { data } = await getDeptList(); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
+    const { data } = await getDeptList(form); // 这里是返回一维数组结构，前端自行处理成树结构，返回格式要求：唯一id加父节点parentId，parentId取父节点id
 
     let newData = data;
-    if (!isAllEmpty(form.name)) {
-      // 前端搜索部门名称
-      newData = newData.filter(item => item.name.includes(form.name));
-    }
-    if (!isAllEmpty(form.status)) {
-      // 前端搜索状态
-      newData = newData.filter(item => item.status === form.status);
+    if (!newData || newData.length <= 0) {
+      loading.value = false;
+      return;
     }
     dataList.value = handleTree(newData); // 处理成树结构
     setTimeout(() => {
@@ -97,7 +105,7 @@ export function useDept() {
     if (!treeList || !treeList.length) return;
     const newTreeList = [];
     for (let i = 0; i < treeList.length; i++) {
-      treeList[i].disabled = treeList[i].status === 0 ? true : false;
+      treeList[i].disabled = treeList[i].status === 1 ? true : false;
       formatHigherDeptOptions(treeList[i].children);
       newTreeList.push(treeList[i]);
     }
@@ -110,14 +118,13 @@ export function useDept() {
       props: {
         formInline: {
           higherDeptOptions: formatHigherDeptOptions(cloneDeep(dataList.value)),
-          parentId: row?.parentId ?? 0,
+          parent_id: row?.parent_id ?? 0,
+          id: row?.id ?? 0,
           name: row?.name ?? "",
-          principal: row?.principal ?? "",
-          phone: row?.phone ?? "",
-          email: row?.email ?? "",
+          leader_id: row?.leader_id ?? "",
           sort: row?.sort ?? 0,
-          status: row?.status ?? 1,
-          remark: row?.remark ?? ""
+          is_show: row?.is_show ?? 1,
+          remarks: row?.remarks ?? ""
         }
       },
       width: "40%",
@@ -130,15 +137,10 @@ export function useDept() {
         const FormRef = formRef.value.getRef();
         const curData = options.props.formInline as FormItemProps;
         function chores() {
-          message(`您${title}了部门名称为${curData.name}的这条数据`, {
-            type: "success"
-          });
-          done(); // 关闭弹框
-          onSearch(); // 刷新表格数据
+          handleCreateOrUpdate(title, curData, done);
         }
         FormRef.validate(valid => {
           if (valid) {
-            console.log("curData", curData);
             // 表单规则校验通过
             if (title === "新增") {
               // 实际开发先调用新增接口，再进行下面操作
@@ -153,7 +155,31 @@ export function useDept() {
     });
   }
 
-  function handleDelete(row) {
+  async function handleCreateOrUpdate(
+    title: string,
+    params: FormItemProps,
+    done: Function
+  ) {
+    const { code } = await deptCreateOrUpdate(params);
+    if (code !== 200) {
+      loading.value = false;
+      message(`删除失败`, { type: "error" });
+      return;
+    }
+    message(`您${title}了部门名称为${params.name}的这条数据`, {
+      type: "success"
+    });
+    done(); // 关闭弹框
+    onSearch(); // 刷新表格数据
+  }
+
+  async function handleDelete(row) {
+    const { code } = await deptDelete(row.id);
+    if (code !== 200) {
+      loading.value = false;
+      message(`删除失败`, { type: "error" });
+      return;
+    }
     message(`您删除了部门名称为${row.name}的这条数据`, { type: "success" });
     onSearch();
   }

src/views/system/dept/utils/types.ts

@@ -1,13 +1,12 @@
 interface FormItemProps {
   higherDeptOptions: Record<string, unknown>[];
-  parentId: number;
+  id: number;
+  parent_id: number;
   name: string;
-  principal: string;
-  phone: string | number;
-  email: string;
+  leader_id: string;
   sort: number;
-  status: number;
-  remark: string;
+  is_show: number;
+  remarks: string;
 }
 interface FormProps {
   formInline: FormItemProps;