Merge remote-tracking branch 'origin/personal/pjq/organization' into merge/1

# Conflicts:
#	src/components/HelloWorld.vue
#	src/router/authentication.js

package-lock.json

@@ -1960,7 +1960,7 @@
     },
     "node_modules/vue-router": {
       "version": "4.4.0",
-      "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-4.4.0.tgz",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.4.0.tgz",
       "integrity": "sha512-HB+t2p611aIZraV2aPSRNXf0Z/oLZFrlygJm+sZbdJaW6lcFqEDQwnzUBXn+DApw+/QzDU/I9TeWx9izEjTmsA==",
       "dependencies": {
         "@vue/devtools-api": "^6.5.1"

src/router/organizationManagement.js

@@ -1,9 +1,7 @@
-// import OrganizationList from '../views/organization-management/OrganizationList.vue'
+import Organization_main from '../views/organization-management/Organization_main.vue'
-// import OrganizationDetail from '../views/organization-management/OrganizationDetail.vue'
-// import OrganizationEdit from '../views/organization-management/OrganizationEdit.vue'
 
 export default [
-    // { path: '/organizations', component: OrganizationList },
+    { path: '/organizations', component: Organization_main},
     // { path: '/organizations/:id', component: OrganizationDetail },
     // { path: '/organizations/:id/edit', component: OrganizationEdit }
 ]

src/services/organizationService.js

@@ -0,0 +1,24 @@
+import axios  from "axios";
+
+export default {
+    getAllOrganizations() {
+        return axios.get('api/organizations/listAll').then(response => {
+            return response.data;
+        });
+    },
+    addOrganization(organization) {
+        return axios.post('api/organizations/addOrganization', organization).then(response => {
+            return response.data;
+        });
+    },
+    deleteOrganization(organizationId) {
+        return axios.post('api/organizations/deleteOrganization' , {organizationId:organizationId},{headers: {
+            'Content-Type': 'application/json' // 设置 Content-Type 为 application/json
+        }}).then(response => {
+            return response.data;
+        });
+    },
+    getOrganizationByName(organizationName){
+        return axios.get('api/organizations/getByOrganizationName?')
+    }
+}

src/views/organization-management/Organization_main.vue

@@ -0,0 +1,354 @@
+<template>
+  <div class="department-management" v-if="showTable">
+      <el-row :gutter="20" class="toolbar">
+        <el-col :span="4">
+          <el-input v-model="search.name" placeholder="请输入部门名称"></el-input>
+        </el-col>
+        <el-col :span="4">
+          <el-select v-model="search.status" placeholder="部门状态">
+            <el-option label="正常" value=true></el-option>
+            <el-option label="停用" value=false></el-option>
+            <el-option label="全部" value=""></el-option>
+          </el-select>
+        </el-col>
+        <el-col :span="4">
+          <el-button type="primary" @click="handleSearch">搜索</el-button>
+          <el-button @click="handleReset">重置</el-button>
+        </el-col>
+      </el-row>
+      <el-button type="primary" @click="showDialogAdd = true">添加部门</el-button>
+    <el-table
+      :data="tableData"
+      style="width: 100%; margin-bottom: 20px"
+      row-key="organizationId"
+      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+      border
+      default-expand-all
+    >
+    <el-table-column prop="organizationId" label="部门ID" width="180" />
+    <el-table-column prop="parentOrganization.organizationName" label="上级部门" width="180">
+      <template #default="{ row }">
+        {{ row.parentOrganization ? row.parentOrganization.organizationName : '无' }}
+      </template>
+    </el-table-column>
+    <el-table-column prop="organizationName" label="部门名称" width="180" />
+    <el-table-column prop="leader" label="负责人" width="180" />
+    <el-table-column prop="contactPhone" label="负责人联系电话" width="180" />
+    <el-table-column prop="email" label="负责人邮箱" width="180" />
+    <el-table-column prop="organizationStatus" label="部门状态" width="180">
+      <template #default="{ row }">
+        <span v-if="row.organizationStatus">
+           <el-text type="success">正常</el-text>
+        </span>
+        <span v-else>
+          <el-text type="danger">停用</el-text>
+        </span>
+      </template>
+    </el-table-column>
+        <el-table-column label="操作" width="180">
+          <template #default="scope" >
+            <el-button  type="danger" text @click="deleteOrganization(scope.row.organizationId)">删除</el-button>
+            <el-button  type="danger" text @click="handleUpdate(scope.row.organizationId)">修改</el-button>
+          </template>
+        </el-table-column>
+  </el-table>
+  </div>
+<!--  添加表单-->
+  <el-dialog v-model="showDialogAdd" title="填写信息" width="80%">
+    <el-form :model="dialogFormAdd" :rules="rules">
+      <el-form-item label="上级部门" :label-width="formLabelWidth">
+        <el-select v-model="dialogFormAdd.parentOrganization">
+          <el-option
+              v-for="item in originTableData"
+              :key="item.organizationId"
+              :label="item.organizationName"
+              :value="item.organizationId"
+          >
+            {{item.organizationName}}
+          </el-option>
+          <el-option label="无" value=0></el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item prop="organizationName" label="部门名称" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.organizationName"></el-input>
+      </el-form-item>
+      <el-form-item prop="displayOrder" label="显示排列" :label-width="formLabelWidth">
+        <el-input-number v-model="dialogFormAdd.displayOrder" :min=1 :max="100"></el-input-number>
+      </el-form-item>
+      <el-form-item prop="leader" label="负责人" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.leader"></el-input>
+      </el-form-item>
+      <el-form-item prop="contactPhone" label="联系电话" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.contactPhone"></el-input>
+      </el-form-item>
+      <el-form-item prop="email" label="邮箱" :label-width="formLabelWidth">
+        <el-input v-model="dialogFormAdd.email"></el-input>
+      </el-form-item>
+      <el-form-item label="部门状态" :label-width="formLabelWidth">
+        <el-switch v-model="dialogFormAdd.organizationStatus" active-value="true" active-text="启用" inactive-value="false" inactive-text="禁用"></el-switch>
+      </el-form-item>
+    </el-form>
+    <div class="dialog-footer">
+    <span slot="footer">
+        <el-button @click="showDialogAdd = false">取消</el-button>
+        <el-button type="primary" @click="submitForm">提交</el-button>
+      </span>
+    </div>
+  </el-dialog>
+
+</template>
+
+<script lang="ts">
+import {ref, onMounted, defineComponent} from 'vue';
+import organizationService from '../../services/organizationService';
+import {useStore} from 'vuex';
+import {ElMessage, ElMessageBox} from "element-plus";
+
+
+interface Organization {
+  organizationId: number;
+  parentOrganization: Organization | null;
+  organizationName: string;
+  leader: string;
+  contactPhone: string;
+  email: string;
+  displayOrder: number;
+  organizationStatus: boolean;
+  children?: Organization[]; // 子组织数组
+  hasChildren: boolean; // 是否有子组织
+}
+
+export default defineComponent({
+  setup() {
+    const store = useStore();
+    const showTable = ref(true);
+    const show = ref(false);
+    const showDialogAdd = ref(false);
+    const formLabelWidth = ref('120px');
+
+    const dialogFormAdd = ref(
+        {
+          organizationId:0,
+          parentOrganization: 0,
+          organizationName: '',
+          displayOrder: 0,
+          leader: '',
+          contactPhone: '',
+          email: '',
+          organizationStatus: true,
+        }
+    );
+    const dialogFormPerson = ref({
+
+    });
+
+    const originTableData = ref<Organization[]>([]);
+    const tableData = ref<Organization[]>([]);
+    const treeData = ref();
+    const noChildrenData = ref();
+    const fetchData = async () => {
+      try {
+        tableData.value=[];
+        const data = await organizationService.getAllOrganizations();
+        if(data.lenth===1){
+
+        }
+        console.log('获取到的部门信息', data);
+        originTableData.value = data;
+        console.log(originTableData.value);
+        //buildTree 负责构建树形结构
+        treeData.value = buildTree(originTableData.value);
+        console.log('树形结构数据', treeData);
+        noChildrenData.value = originTableData.value.map(item => ({
+          ...item,
+          children: []  // 将 children 设置为空数组
+        }));
+        console.log('无子组织数据', noChildrenData);
+        tableData.value = treeData.value;
+      } catch (error) {
+        console.error('Error fetching organization:', error);
+      }
+    };
+
+    const buildTree = (flatData: Organization[]): Organization[] => {
+      const map: Record<number, Organization> = {};
+      const roots: Organization[] = [];
+
+      flatData.forEach(org => {
+        map[org.organizationId] = org;
+        org.children = [];
+      });
+
+      flatData.forEach(org => {
+        if (org.parentOrganization?.organizationId && map[org.parentOrganization.organizationId]) {
+          map[org.parentOrganization.organizationId].children.push(org);
+          map[org.parentOrganization.organizationId].hasChildren = false;
+          // map[org.organizationId].hasChildren = true; // 标记是否有子组织
+        } else {
+          roots.push(org);
+        }
+      });
+
+      const sortTree = (nodes: Organization[]) => {
+        nodes.sort((a, b) => a.displayOrder - b.displayOrder);
+        nodes.forEach(node => {
+          if (node.children && node.children.length > 0) {
+            sortTree(node.children);
+          }
+        });
+      };
+
+      sortTree(roots);
+
+      console.log('roots:', roots);
+      return roots;
+    };
+
+
+
+    const submitForm = () => {
+      console.log('提交表单' , dialogFormAdd.value);
+      organizationService.addOrganization(dialogFormAdd.value);
+      ElMessage({
+        type: 'success',
+        message: `添加成功`,
+      })
+      showDialogAdd.value = false;
+
+      dialogFormAdd.value = {
+        organizationId:0,
+        parentOrganization: 0,
+        organizationName: '',
+        displayOrder: 0,
+        leader: '',
+        contactPhone: '',
+        email: '',
+        organizationStatus: true,
+      };
+
+    }
+
+    const deleteOrganization = (organizationId:number) => {
+      ElMessageBox.confirm(
+          '将删除该部门，确定？',
+          '注意！！！',
+          {
+            confirmButtonText: '确认',
+            cancelButtonText: '取消',
+            type: 'warning',
+            center: true,
+          }
+      )
+          .then(() => {
+            organizationService.deleteOrganization(organizationId);
+            fetchData();
+            ElMessage({
+              type: 'success',
+              message: '删除成功',
+
+            })
+          })
+          .catch(() => {
+            ElMessage({
+              type: 'info',
+              message: 'Delete canceled',
+            })
+          })
+
+    }
+
+    const handleUpdate = (organizationId:number) => {
+      console.log('编辑部门', organizationId);
+      const organization = originTableData.value.find((item) => item.organizationId === organizationId);
+      console.log('organization', organization);
+      dialogFormAdd.value = {
+        organizationId:organization?.organizationId,
+        parentOrganization: organization?.parentOrganization?.organizationId || 0,
+        organizationName: organization?.organizationName,
+        displayOrder: organization?.displayOrder,
+        leader: organization?.leader,
+        contactPhone: organization?.contactPhone,
+        email: organization?.email,
+        organizationStatus: organization?.organizationStatus,
+      }
+      console.log('dialogFormAdd', dialogFormAdd.value);
+      showDialogAdd.value = true;
+
+    }
+
+    const search = ref({
+      name:'',
+      status:''
+    })
+    const handleSearch = () => {
+      console.log('搜索', search.value);
+      // if(search.value.name != ''){
+        tableData.value = noChildrenData.value.filter(
+            (data) => {
+              const isNameValid = search.value && search.value.name;
+              const isStatusValid = search.value && search.value.status;
+
+              return (!isNameValid || data.organizationName.toLowerCase().includes(search.value.name.toLowerCase())) &&
+                  (!isStatusValid || data.organizationStatus === JSON.parse(search.value.status));
+            }
+        );
+    }
+    const handleReset = () => {
+      search.value.name = '';
+      search.value.status = '';
+      fetchData();
+    }
+
+    onMounted(() => {
+      fetchData();
+    });
+
+    return {
+      originTableData,
+      tableData,
+      showDialogAdd,
+      showTable,
+      show,
+      dialogFormAdd,
+      submitForm,
+      formLabelWidth,
+      deleteOrganization,
+      handleUpdate,
+      search,
+      handleSearch,
+      handleReset,
+    };
+  },
+  data() {
+    return {
+      rules: {
+        organizationName:[{
+          required: true, message: '请输入部门名称', trigger: 'blur'
+        }],
+        leader:[{
+          required: true, message: '请输入负责人名称', trigger: 'blur'
+        }],
+        contactPhone:[{
+          type:'text',required:true,message:'请输入联系电话',trigger:'blur'
+        }],
+        email: [{
+          pattern:/^([a-zA-Z0-9]+[-_\.]?)+@[a-zA-Z0-9]+\.[a-z]+$/ ,required: true ,message: '输入邮箱', trigger: 'blur'
+        }],
+      }
+    };
+  },
+});
+</script>
+
+<style scoped>
+.department-management {
+  padding: 20px;
+}
+
+.toolbar {
+  margin-bottom: 20px;
+}
+.dialog-footer{
+  text-align: right;
+}
+</style>