FileCollect/pages/admin-center/dept-management/dept-management.vue

<template>
  <view class="dept-management">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="navigateBack">
        <u-icon name="arrow-left" size="24" color="#606266"></u-icon>
      </view>
      <view class="nav-title">部门管理</view>
      <view class="nav-right">
        <u-button type="text" @click="addDepartment">添加</u-button>
      </view>
    </view>

    <!-- 搜索框 -->
    <view class="search-box">
      <u-search placeholder="搜索部门名称" v-model="searchKeyword"></u-search>
    </view>

    <!-- 部门列表 -->
    <view class="dept-list">
      <u-cell-group v-if="filteredDepartments.length > 0">
        <u-cell 
          v-for="dept in filteredDepartments" 
          :key="dept.id"
          :title="dept.name"
          :label="dept.description ? `描述：${dept.description}` : '暂无描述'"
          :right-text="dept.leader ? dept.leader : '未分配负责人'"
          :right-icon="'arrow-right'"
          is-link
          @click="editDepartment(dept)"
        >
        </u-cell>
      </u-cell-group>
      <u-empty v-else text="暂无部门数据"></u-empty>
    </view>

    <!-- 添加/编辑部门弹窗 -->
    <u-popup v-model="showDeptModal" mode="bottom" :round="true" :closeable="true">
      <view class="modal-content">
        <view class="modal-title">{{ isEditing ? '编辑部门' : '添加部门' }}</view>
        <u-form :model="formData" ref="uForm">
          <u-form-item label="部门名称">
            <u-input v-model="formData.name" placeholder="请输入部门名称"></u-input>
          </u-form-item>
          <u-form-item label="部门描述">
            <u-input v-model="formData.description" type="textarea" placeholder="请输入部门描述"></u-input>
          </u-form-item>
          <u-form-item label="部门负责人">
            <u-picker 
              mode="selector" 
              :range="managers" 
              :rangeKey="'name'"
              v-model="formData.leaderIndex"
              placeholder="请选择部门负责人"
            ></u-picker>
          </u-form-item>
        </u-form>
        <view class="modal-buttons">
          <u-button @click="showDeptModal = false" style="flex: 1; margin-right: 20rpx;">取消</u-button>
          <u-button type="primary" @click="submitForm" style="flex: 1;">确定</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        searchKeyword: '',
        showDeptModal: false,
        isEditing: false,
        editDeptId: '',
        formData: {
          name: '',
          description: '',
          leaderIndex: 0
        },
        // 模拟的部门负责人数据（部门负责人和管理员）
        managers: [
          { id: 1, name: '张三' },
          { id: 2, name: '李四' },
          { id: 3, name: '王五' },
          { id: 6, name: '孙八' }
        ],
        departments: [
          { id: 1, name: '技术部', description: '负责系统开发和维护', leader: '张三' },
          { id: 2, name: '市场部', description: '负责市场推广和销售', leader: '李四' },
          { id: 3, name: '财务部', description: '负责财务管理和核算', leader: '王五' },
          { id: 4, name: '人力资源部', description: '负责人事招聘和管理', leader: '' },
          { id: 5, name: '行政部', description: '负责公司日常行政事务', leader: '孙八' }
        ]
      }
    },
    computed: {
      filteredDepartments() {
        if (!this.searchKeyword) {
          return this.departments
        }
        return this.departments.filter(dept => 
          dept.name.includes(this.searchKeyword) || 
          (dept.description && dept.description.includes(this.searchKeyword))
        )
      }
    },
    methods: {
      navigateBack() {
        uni.navigateBack()
      },
      addDepartment() {
        this.isEditing = false
        this.formData = {
          name: '',
          description: '',
          leaderIndex: 0
        }
        this.showDeptModal = true
      },
      editDepartment(dept) {
        this.isEditing = true
        this.editDeptId = dept.id
        const leaderIndex = this.managers.findIndex(m => m.name === dept.leader)
        this.formData = {
          name: dept.name,
          description: dept.description || '',
          leaderIndex: leaderIndex !== -1 ? leaderIndex : 0
        }
        this.showDeptModal = true
      },
      submitForm() {
        if (!this.formData.name) {
          uni.showToast({ title: '请输入部门名称', icon: 'none' })
          return
        }

        const deptData = {
          name: this.formData.name,
          description: this.formData.description,
          leader: this.managers[this.formData.leaderIndex]?.name || ''
        }

        if (this.isEditing) {
          // 编辑部门
          const index = this.departments.findIndex(d => d.id === this.editDeptId)
          if (index !== -1) {
            this.departments[index] = { ...this.departments[index], ...deptData }
            uni.showToast({ title: '编辑成功', icon: 'success' })
          }
        } else {
          // 添加部门
          const newId = Math.max(...this.departments.map(d => d.id), 0) + 1
          this.departments.push({ id: newId, ...deptData })
          uni.showToast({ title: '添加成功', icon: 'success' })
        }

        this.showDeptModal = false
      }
    }
  }
</script>

<style lang="scss">
  .dept-management {
    padding-bottom: 20rpx;
    background-color: #f5f5f5;

    .nav-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 88rpx;
      padding: 0 30rpx;
      background-color: #fff;
      box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

      .nav-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
      }
    }

    .search-box {
      padding: 20rpx;
      background-color: #fff;
    }

    .dept-list {
      margin-top: 20rpx;
      padding: 0 20rpx;
    }

    .modal-content {
      padding: 30rpx;

      .modal-title {
        font-size: 36rpx;
        font-weight: bold;
        text-align: center;
        margin-bottom: 30rpx;
        color: #333;
      }

      .modal-buttons {
        display: flex;
        margin-top: 30rpx;
      }
    }
  }
</style>