EnterprisePersonnelManagement.vue

<template>
  <div class="enterprise-personnel-management">
    <!-- 操作栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <div class="search-wrapper">
          <el-input
            v-model="searchQuery"
            placeholder="请输入工号/手机号查询"
            class="search-input"
          />
        </div>
        <el-cascader
          v-if="hasProvincePermission"
          v-model="selectedRegion"
          :options="regionOptions"
          :props="{ checkStrictly: true, value: 'name', label: 'name' }"
          placeholder="所属区域筛选"
          clearable
          class="region-cascader"
        ></el-cascader>
        <el-select 
          v-else
          v-model="selectedRegionDistrict"
          placeholder="所属区域筛选"
          clearable
          class="region-select"
        >
          <el-option label="玄武区" value="玄武区"></el-option>
          <el-option label="秦淮区" value="秦淮区"></el-option>
          <el-option label="建邺区" value="建邺区"></el-option>
          <el-option label="鼓楼区" value="鼓楼区"></el-option>
        </el-select>
      </div>
      
      <div class="toolbar-right">
        <el-button @click="isAddDialogOpen = true" type="primary" size="small">
          <i class="el-icon-plus"></i>
          添加人员
        </el-button>
      </div>
    </div>

    <!-- 表格 -->
    <div class="personnel-table">
      <el-table :data="paginatedPersonnel" border>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="workId" label="工号" width="100"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="150"></el-table-column>
        <el-table-column prop="region" label="所属区域" width="250"></el-table-column>
        <el-table-column label="状态" width="120">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'enabled' ? 'success' : 'info'">
              {{ scope.row.status === 'enabled' ? '启用' : '关闭' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="220"></el-table-column>
        <el-table-column label="操作" min-width="120">
          <template slot-scope="scope">
            <el-button 
              type="text" 
              size="small" 
              @click="editPersonnel(scope.row)"
            >
              编辑
            </el-button>
            <el-button 
              type="text" 
              size="small" 
              @click="deletePersonnel(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[20, 50, 100]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="filteredPersonnel.length"
      >
      </el-pagination>
    </div>

    <!-- 添加/编辑人员对话框 -->
    <el-dialog
      :title="editingPersonnel ? '编辑政企业务营销人员' : '新增政企业务营销人员'"
      :visible.sync="isAddDialogOpen"
      width="600px"
    >
      <el-form :model="personnelForm" :rules="personnelRules" ref="personnelForm" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="姓名" prop="name">
              <el-input 
                v-model="personnelForm.name" 
                placeholder="请输入姓名"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="工号" prop="workId">
              <el-input 
                v-model="personnelForm.workId" 
                placeholder="请输入工号"
                :disabled="!!editingPersonnel"
              ></el-input>
              <p v-if="editingPersonnel" class="form-hint">工号添加后不可修改</p>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="手机号" prop="phone">
              <el-input 
                v-model="personnelForm.phone" 
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-form-item label="所属区域" prop="region">
          <el-cascader
            v-model="personnelForm.region"
            :options="regionOptions"
            :props="{ checkStrictly: true, value: 'name', label: 'name' }"
            placeholder="请选择区域"
            style="width: 100%;"
          ></el-cascader>
        </el-form-item>
        
        <el-form-item label="状态" prop="status">
          <el-select v-model="personnelForm.status" style="width: 100%;">
            <el-option label="启用" value="enabled"></el-option>
            <el-option label="关闭" value="disabled"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="submitPersonnelForm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

// 模拟政企业务营销人员数据
const mockEnterprisePersonnel = [
  { id: 'EP001', name: '刘政企', phone: '13912345678', workId: 'E001', type: '装维师傅', region: '江苏省-南京市-玄武区', gridName: 'A网格', associatedSales: 'SALE001', status: 'enabled', createTime: '2025-09-01 09:00:00' },
  { id: 'EP002', name: '赵政企', phone: '13923456789', workId: 'E002', type: '装维师傅', region: '江苏省-南京市-秦淮区', gridName: 'B网格', associatedSales: 'SALE002', status: 'enabled', createTime: '2025-09-02 10:00:00' },
  { id: 'EP003', name: '孙政企', phone: '13934567890', workId: 'E003', type: '装维师傅', region: '江苏省-南京市-建邺区', gridName: 'C网格', associatedSales: 'SALE003', status: 'disabled', createTime: '2025-09-03 11:00:00' },
  { id: 'EP004', name: '周政企', phone: '13945678901', workId: 'E004', type: '装维师傅', region: '江苏省-南京市-鼓楼区', gridName: 'D网格', associatedSales: 'SALE004', status: 'enabled', createTime: '2025-09-04 12:00:00' },
  { id: 'EP005', name: '吴政企', phone: '13956789012', workId: 'E005', type: '装维师傅', region: '江苏省-南京市-浦口区', gridName: 'E网格', associatedSales: 'SALE005', status: 'enabled', createTime: '2025-09-05 13:00:00' },
  { id: 'EP006', name: '郑政企', phone: '13967890123', workId: 'E006', type: '装维师傅', region: '江苏省-南通市-崇川区', gridName: 'F网格', associatedSales: 'SALE006', status: 'enabled', createTime: '2025-09-06 14:00:00' },
  { id: 'EP007', name: '王政企', phone: '13978901234', workId: 'E007', region: '江苏省-南通市-港闸区', status: 'disabled', createTime: '2025-09-07 15:00:00' },
  { id: 'EP008', name: '冯政企', phone: '13989012345', workId: 'E008', region: '江苏省-苏州市-姑苏区', status: 'enabled', createTime: '2025-09-08 16:00:00' },
  { id: 'EP009', name: '陈政企', phone: '13990123456', workId: 'E009', region: '江苏省-苏州市-虎丘区', status: 'enabled', createTime: '2025-09-09 17:00:00' },
  { id: 'EP010', name: '褚政企', phone: '13901234567', workId: 'E010', region: '江苏省-南京市-栖霞区', status: 'enabled', createTime: '2025-09-10 18:00:00' }
]

// 地区数据
const regionOptions = [
  {
    name: '江苏省',
    children: [
      {
        name: '南京市',
        children: [
          { name: '玄武区' },
          { name: '秦淮区' },
          { name: '建邺区' },
          { name: '鼓楼区' },
          { name: '浦口区' },
          { name: '栖霞区' },
          { name: '雨花台区' },
          { name: '江宁区' },
          { name: '六合区' },
          { name: '溧水区' },
          { name: '高淳区' }
        ]
      },
      {
        name: '南通市',
        children: [
          { name: '崇川区' },
          { name: '港闸区' }
        ]
      },
      {
        name: '苏州市',
        children: [
          { name: '姑苏区' },
          { name: '虎丘区' }
        ]
      }
    ]
  }
]

export default {
  name: 'EnterprisePersonnelManagement',
  data() {
    return {
      personnel: mockEnterprisePersonnel,
      searchQuery: '',
      selectedRegion: [],
      selectedRegionDistrict: '',
      isAddDialogOpen: false,
      editingPersonnel: null,
      currentPage: 1,
      pageSize: 20,
      personnelForm: {
        name: '',
        workId: '',
        phone: '',
        region: [],
        status: 'enabled'
      },
      personnelRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        workId: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择所属区域', trigger: 'change' }
        ]
      },
      regionOptions
    }
  },
  computed: {
    ...mapGetters(['user']),
    hasProvincePermission() {
      return this.user?.role === 'province_admin'
    },
    filteredPersonnel() {
      return this.personnel.filter(person => {
        const matchesQuery = !this.searchQuery || 
          person.workId.includes(this.searchQuery) || 
          person.phone.includes(this.searchQuery)
        
        // 区域筛选逻辑
        let matchesRegion = true
        if (this.hasProvincePermission && this.selectedRegion && this.selectedRegion.length > 0) {
          const selectedPath = this.selectedRegion.join('-')
          matchesRegion = person.region.startsWith(selectedPath)
        } else if (!this.hasProvincePermission && this.selectedRegionDistrict) {
          matchesRegion = person.region.includes(this.selectedRegionDistrict)
        }
        
        return matchesQuery && matchesRegion
      })
    },
    paginatedPersonnel() {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      return this.filteredPersonnel.slice(startIndex, endIndex)
    }
  },
  methods: {
    editPersonnel(person) {
      this.editingPersonnel = person
      // 分解区域路径为数组
      this.personnelForm = { 
        ...person,
        region: person.region.split('-')
      }
      this.isAddDialogOpen = true
    },
    deletePersonnel(id) {
      this.$confirm('确定要删除该营销人员吗？删除后该账号将无法登录。', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.personnel = this.personnel.filter(p => p.id !== id)
        this.$message.success('政企业务营销人员删除成功')
      }).catch(() => {
        // 用户取消删除
      })
    },
    submitPersonnelForm() {
      this.$refs.personnelForm.validate((valid) => {
        if (valid) {
          if (!this.personnelForm.name || !this.personnelForm.workId || !this.personnelForm.phone) {
            this.$message.error('请填写所有必填项')
            return
          }

          if (!this.personnelForm.region || this.personnelForm.region.length === 0) {
            this.$message.error('请选择所属区域')
            return
          }

          const region = this.personnelForm.region.join('-')
          
          if (this.editingPersonnel) {
            // 更新人员信息
            const index = this.personnel.findIndex(p => p.id === this.editingPersonnel.id)
            if (index !== -1) {
              this.$set(this.personnel, index, { 
                ...this.editingPersonnel, 
                ...this.personnelForm,
                region
              })
              this.$message.success('政企业务营销人员信息更新成功')
            }
          } else {
            // 添加新人员
            const newPersonnel = {
              ...this.personnelForm,
              id: `EP${Date.now()}`,
              region,
              createTime: new Date().toLocaleString('zh-CN')
            }
            this.personnel.push(newPersonnel)
            this.$message.success('政企业务营销人员添加成功')
          }
          
          // 重置表单和状态
          this.resetPersonnelForm()
          this.isAddDialogOpen = false
          this.editingPersonnel = null
        }
      })
    },
    resetPersonnelForm() {
      this.personnelForm = {
        name: '',
        workId: '',
        phone: '',
        region: [],
        status: 'enabled'
      }
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
    },
    handleCurrentChange(page) {
      this.currentPage = page
    }
  }
}
</script>

<style lang="scss" scoped>
.enterprise-personnel-management {
  .toolbar {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    
    .toolbar-left {
      display: flex;
      gap: 15px;
      
      .search-wrapper {
        position: relative;
        width: 220px;
        
        .search-icon {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #c0c4cc;
        }
        
        .search-input {
          padding-left: 30px;
        }
      }
      
      .region-cascader {
        width: 200px;
      }
      
      .region-select {
        width: 160px;
      }
    }
    
    .toolbar-right {
      display: flex;
      gap: 10px;
    }
  }
  
  .personnel-table {
    margin-bottom: 20px;
  }
  
  .form-hint {
    font-size: 12px;
    color: #909399;
    margin: 5px 0 0 0;
  }
}
</style>