create-koa-boot 1.0.0

package/templates/example/frontend/src/views/system/department/index.vue

@@ -0,0 +1,528 @@
+<template>
+  <div class="department-management">
+    <el-card shadow="hover">
+      <template #header>
+        <div class="card-header">
+          <span>部门管理</span>
+          <div class="header-buttons">
+            <el-button type="primary" @click="handleAddDepartment">
+              <el-icon><Plus /></el-icon>
+              新增部门
+            </el-button>
+            <el-button @click="handleRefresh">
+              <el-icon><Refresh /></el-icon>
+              刷新
+            </el-button>
+          </div>
+        </div>
+      </template>
+      
+      <div class="department-content">
+        <div class="department-tree">
+          <el-tree
+            :data="departmentTree"
+            show-checkbox
+            node-key="id"
+            default-expand-all
+            :expand-on-click-node="false"
+            @node-click="handleNodeClick"
+          >
+            <template #default="{ data }">
+              <div class="tree-node">
+                <!-- <el-icon class="department-icon"><OfficeBuilding /></el-icon> -->
+                <span class="department-name">{{ data.name }}</span>
+                <span class="department-code">{{ data.code }}</span>
+                <span class="department-status">
+                  <el-tag size="small" :type="data.status === 'active' ? 'success' : 'danger'" effect="plain">
+                    {{ data.status === 'active' ? '启用' : '禁用' }}
+                  </el-tag>
+                </span>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+        
+        <div class="department-detail" v-if="selectedDepartment">
+          <el-card shadow="hover" class="detail-card">
+            <template #header>
+              <div class="detail-header">
+                <span>部门详情</span>
+                <div class="detail-actions">
+                  <el-button type="primary" size="small" @click="handleEditDepartment(selectedDepartment)">
+                    <el-icon><Edit /></el-icon>
+                    编辑
+                  </el-button>
+                  <el-button type="danger" size="small" @click="handleDeleteDepartment(selectedDepartment.id)">
+                    <el-icon><Delete /></el-icon>
+                    删除
+                  </el-button>
+                  <el-switch
+                    v-model="selectedDepartment.status"
+                    active-value="active"
+                    inactive-value="inactive"
+                    @change="handleStatusChange(selectedDepartment)"
+                    class="status-switch"
+                  />
+                </div>
+              </div>
+            </template>
+            
+            <el-form :model="selectedDepartment" label-width="120px" class="detail-form">
+              <el-form-item label="部门名称">
+                <span>{{ selectedDepartment.name }}</span>
+              </el-form-item>
+              <el-form-item label="部门编码">
+                <span>{{ selectedDepartment.code }}</span>
+              </el-form-item>
+              <el-form-item label="上级部门">
+                <span>{{ getParentName(selectedDepartment.parentId) }}</span>
+              </el-form-item>
+              <el-form-item label="部门负责人">
+                <span>{{ getLeaderName(selectedDepartment.leaderId) }}</span>
+              </el-form-item>
+              <el-form-item label="联系电话">
+                <span>{{ selectedDepartment.phone || '-' }}</span>
+              </el-form-item>
+              <el-form-item label="排序">
+                <span>{{ selectedDepartment.sort }}</span>
+              </el-form-item>
+              <el-form-item label="创建时间">
+                <span>{{ formatDate(selectedDepartment.createdAt) }}</span>
+              </el-form-item>
+              <el-form-item label="更新时间">
+                <span>{{ formatDate(selectedDepartment.updatedAt) }}</span>
+              </el-form-item>
+            </el-form>
+          </el-card>
+        </div>
+        
+        <div class="empty-state" v-else>
+          <el-empty description="请选择一个部门节点查看详情" />
+        </div>
+      </div>
+    </el-card>
+    
+    <el-dialog
+      v-model="dialogVisible"
+      :title="dialogType === 'add' ? '新增部门' : '编辑部门'"
+      width="500px"
+    >
+      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
+        <el-form-item label="部门名称" prop="name">
+          <el-input v-model="form.name" placeholder="请输入部门名称" />
+        </el-form-item>
+        <el-form-item label="部门编码" prop="code">
+          <el-input v-model="form.code" placeholder="请输入部门编码" />
+        </el-form-item>
+        <el-form-item label="上级部门" prop="parentId">
+          <el-select v-model="form.parentId" placeholder="请选择上级部门">
+            <el-option label="无（顶级部门）" value="" />
+            <template v-for="dept in flattenDepartments" :key="dept.id">
+              <el-option
+                :label="dept.name"
+                :value="dept.id"
+                :disabled="dialogType === 'edit' && dept.id === form.id"
+              />
+            </template>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="部门负责人" prop="leaderId">
+          <el-select v-model="form.leaderId" placeholder="请选择负责人">
+            <el-option
+              v-for="user in userList"
+              :key="user.id"
+              :label="user.name"
+              :value="user.id"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="联系电话" prop="phone">
+          <el-input v-model="form.phone" placeholder="请输入联系电话" />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input-number v-model="form.sort" :min="0" :max="999" />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select v-model="form.status" placeholder="请选择状态">
+            <el-option label="启用" value="active" />
+            <el-option label="禁用" value="inactive" />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <span class="dialog-footer">
+          <el-button @click="dialogVisible = false">取消</el-button>
+          <el-button type="primary" @click="handleSubmit">确定</el-button>
+        </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import {
+  getDepartmentTree,
+  createDepartment,
+  updateDepartment,
+  deleteDepartment
+} from '../../../api/system/department'
+import type { DepartmentInfo } from '../../../api/system/department'
+import { ElMessage } from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
+import { getUserList, type UserInfo } from '../../../api/system/user'
+import { Plus, Refresh, Edit, Delete } from '@element-plus/icons-vue'
+
+const departmentTree = ref<DepartmentInfo[]>([])
+
+const flattenDepartments = computed(() => {
+  const flatten = (departments: DepartmentInfo[], result: DepartmentInfo[] = []): DepartmentInfo[] => {
+    departments.forEach(dept => {
+      result.push(dept)
+      if (dept.children && dept.children.length > 0) {
+        flatten(dept.children, result)
+      }
+    })
+    return result
+  }
+  return flatten(departmentTree.value)
+})
+
+const userList = ref<UserInfo[]>([])
+
+const selectedDepartment = ref<DepartmentInfo | null>(null)
+
+const dialogVisible = ref(false)
+const dialogType = ref<'add' | 'edit'>('add')
+
+const form = reactive({
+  id: '',
+  name: '',
+  code: '',
+  parentId: '',
+  leaderId: '',
+  phone: '',
+  sort: 0,
+  status: 'active'
+})
+
+const formRef = ref<FormInstance>()
+
+const rules = reactive<FormRules>({
+  name: [
+    { required: true, message: '请输入部门名称', trigger: 'blur' }
+  ],
+  code: [
+    { required: true, message: '请输入部门编码', trigger: 'blur' }
+  ],
+  leaderId: [
+    { required: true, message: '请选择负责人', trigger: 'change' }
+  ],
+  sort: [
+    { required: true, message: '请输入排序', trigger: 'blur' }
+  ],
+  status: [
+    { required: true, message: '请选择状态', trigger: 'change' }
+  ]
+})
+
+const fetchDepartmentTree = async () => {
+  try {
+    const response = await getDepartmentTree()
+    departmentTree.value = response.data.data
+  } catch (error) {
+    console.error('获取部门树失败:', error)
+    departmentTree.value = [
+      {
+        id: '1',
+        name: '总公司',
+        code: 'company',
+        parentId: '',
+        leaderId: '1',
+        phone: '010-12345678',
+        sort: 0,
+        status: 'active',
+        createdAt: new Date().toISOString(),
+        updatedAt: new Date().toISOString(),
+        children: [
+          {
+            id: '2',
+            name: '技术部',
+            code: 'tech',
+            parentId: '1',
+            leaderId: '2',
+            phone: '010-12345679',
+            sort: 1,
+            status: 'active',
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+          },
+          {
+            id: '3',
+            name: '销售部',
+            code: 'sales',
+            parentId: '1',
+            leaderId: '3',
+            phone: '010-12345680',
+            sort: 2,
+            status: 'active',
+            createdAt: new Date().toISOString(),
+            updatedAt: new Date().toISOString()
+          }
+        ]
+      }
+    ]
+  }
+}
+
+const fetchUserList = async () => {
+  try {
+    const response = await getUserList({ page: 1, pageSize: 100 })
+    userList.value = response.data.data.list
+  } catch (error) {
+    console.error('获取用户列表失败:', error)
+    userList.value = [
+      { id: '1', username: 'admin', name: '管理员', phone: '13800138000', email: '', avatar: '', departmentId: '', status: 'active', createdAt: '', updatedAt: '', roles: [] },
+      { id: '2', username: 'tech', name: '技术负责人', phone: '13800138001', email: '', avatar: '', departmentId: '', status: 'active', createdAt: '', updatedAt: '', roles: [] },
+      { id: '3', username: 'sales', name: '销售负责人', phone: '13800138002', email: '', avatar: '', departmentId: '', status: 'active', createdAt: '', updatedAt: '', roles: [] }
+    ]
+  }
+}
+
+const handleNodeClick = (data: DepartmentInfo) => {
+  selectedDepartment.value = data
+}
+
+const handleRefresh = () => {
+  fetchDepartmentTree()
+  selectedDepartment.value = null
+}
+
+const handleAddDepartment = () => {
+  dialogType.value = 'add'
+  Object.assign(form, {
+    id: '',
+    name: '',
+    code: '',
+    parentId: '',
+    leaderId: '',
+    phone: '',
+    sort: 0,
+    status: 'active'
+  })
+  dialogVisible.value = true
+}
+
+const handleEditDepartment = (department: DepartmentInfo) => {
+  dialogType.value = 'edit'
+  Object.assign(form, {
+    id: department.id,
+    name: department.name,
+    code: department.code,
+    parentId: department.parentId,
+    leaderId: department.leaderId,
+    phone: department.phone,
+    sort: department.sort,
+    status: department.status
+  })
+  dialogVisible.value = true
+}
+
+const handleSubmit = async () => {
+  if (!formRef.value) return
+  
+  try {
+    await formRef.value.validate()
+    
+    if (dialogType.value === 'add') {
+      await createDepartment(form)
+      ElMessage.success('部门创建成功')
+    } else {
+      await updateDepartment(form.id, form)
+      ElMessage.success('部门更新成功')
+    }
+    
+    dialogVisible.value = false
+    fetchDepartmentTree()
+    selectedDepartment.value = null
+  } catch (error) {
+    console.error('提交失败:', error)
+  }
+}
+
+const handleDeleteDepartment = async (id: string) => {
+  try {
+    await deleteDepartment(id)
+    ElMessage.success('部门删除成功')
+    fetchDepartmentTree()
+    selectedDepartment.value = null
+  } catch (error) {
+    console.error('删除部门失败:', error)
+    ElMessage.error('删除部门失败')
+  }
+}
+
+const handleStatusChange = async (department: DepartmentInfo) => {
+  try {
+    await updateDepartment(department.id, { status: department.status })
+    ElMessage.success('状态更新成功')
+  } catch (error) {
+    console.error('状态更新失败:', error)
+    ElMessage.error('状态更新失败')
+    department.status = department.status === 'active' ? 'inactive' : 'active'
+  }
+}
+
+const getParentName = (parentId: string): string => {
+  if (!parentId) return '无（顶级部门）'
+  const parent = flattenDepartments.value.find(dept => dept.id === parentId)
+  return parent ? parent.name : '未知'
+}
+
+const getLeaderName = (leaderId: string): string => {
+  const leader = userList.value.find(user => user.id === leaderId)
+  return leader ? leader.name : '未知'
+}
+
+const formatDate = (dateString: string): string => {
+  if (!dateString) return ''
+  return new Date(dateString).toLocaleString('zh-CN')
+}
+
+onMounted(() => {
+  fetchDepartmentTree()
+  fetchUserList()
+})
+</script>
+
+<style scoped>
+.department-management {
+  padding: 0;
+}
+
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.header-buttons {
+  display: flex;
+  gap: 10px;
+}
+
+.department-content {
+  display: flex;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.department-tree {
+  flex: 1;
+  min-width: 300px;
+  max-width: 400px;
+  border: 1px solid #e4e7ed;
+  border-radius: 4px;
+  padding: 10px;
+  background-color: #f9fafc;
+}
+
+.department-detail {
+  flex: 2;
+  min-width: 400px;
+}
+
+.empty-state {
+  flex: 2;
+  min-width: 400px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #f9fafc;
+  border: 1px dashed #dcdfe6;
+  border-radius: 4px;
+  height: 400px;
+}
+
+.tree-node {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.department-icon {
+  margin-right: 8px;
+  font-size: 14px;
+}
+
+.department-name {
+  flex: 1;
+  margin-right: 10px;
+}
+
+.department-code {
+  font-size: 12px;
+  color: #909399;
+  margin-right: 10px;
+}
+
+.department-status {
+  margin-left: 10px;
+}
+
+.detail-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.detail-actions {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.status-switch {
+  margin-left: 10px;
+}
+
+.detail-form {
+  margin-top: 20px;
+}
+
+.dialog-footer {
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+}
+
+@media (max-width: 768px) {
+  .department-content {
+    flex-direction: column;
+  }
+  
+  .department-tree {
+    max-width: 100%;
+  }
+  
+  .department-detail {
+    min-width: 100%;
+  }
+  
+  .empty-state {
+    min-width: 100%;
+  }
+  
+  .card-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+  }
+  
+  .header-buttons {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+</style>