PersonnelManagement.vue

<template>
  <div class="personnel-management">
    <!-- 操作栏 -->
    <div class="toolbar">
      <div class="toolbar-left">
        <div class="search-wrapper">
          <i class="el-icon-search search-icon"></i>
          <el-input
            v-model="searchTerm"
            placeholder="请输入工号查询..."
            class="search-input"
          />
        </div>
        <el-select v-model="filterType" placeholder="人员类型" class="filter-select">
          <el-option label="全部类型" value="all"></el-option>
          <el-option label="装维师傅" value="installer"></el-option>
          <el-option label="营销人员" value="sales"></el-option>
        </el-select>
        <el-select v-model="filterRegion" placeholder="所在区域筛选" class="filter-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-option label="鼓楼区" value="鼓楼区"></el-option>
        </el-select>
      </div>
      
      <div class="toolbar-right">
        <el-button @click="handleExport" type="default" size="small">
          <i class="el-icon-upload2"></i>
          导出
        </el-button>
        <el-button @click="isImportDialogOpen = true" type="default" size="small">
          <i class="el-icon-download"></i>
          批量导入
        </el-button>
        <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" style="width: 100%">
        <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="120"></el-table-column>
        <el-table-column label="人员类型" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.type === 'installer' ? 'info' : 'primary'">
              {{ personnelTypeMap[scope.row.type].label }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="region" label="所属区域" width="150"></el-table-column>
        <el-table-column prop="gridName" label="网格" width="100"></el-table-column>
        <el-table-column label="关联营销人员" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 'installer'">
              <span v-if="getAssociatedSalesPerson(scope.row.associatedSales)">
                {{ getAssociatedSalesPerson(scope.row.associatedSales).workId }}
              </span>
              <span v-else class="text-muted">未关联</span>
            </span>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status === 'active' ? 'success' : 'info'">
              {{ scope.row.status === 'active' ? '启用' : '禁用' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="150"></el-table-column>
        <el-table-column label="操作" 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>
            </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-col :span="12">
            <el-form-item label="人员类型" prop="type">
              <el-select v-model="personnelForm.type" @change="handlePersonnelTypeChange" style="width: 100%;">
                <el-option label="装维师傅" value="installer"></el-option>
                <el-option label="营销人员" value="sales"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="所属区域" prop="region">
              <el-input v-model="personnelForm.region" placeholder="如：南京市玄武区"></el-input>
            </el-form-item>
          </el-col>
          
          <!-- 当选择装维师傅时显示关联营销人员字段 -->
          <el-col :span="12" v-if="personnelForm.type === 'installer'">
            <el-form-item label="关联营销人员" prop="associatedSales">
              <el-select v-model="personnelForm.associatedSales" placeholder="请选择营销人员" style="width: 100%;">
                <el-option 
                  v-for="salesPerson in activeSalesPersons" 
                  :key="salesPerson.id"
                  :label="`${salesPerson.name} (${salesPerson.workId})`"
                  :value="salesPerson.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          
          <!-- 当选择营销人员时显示网格名称 -->
          <el-col :span="12" v-else>
            <el-form-item label="网格名称" prop="gridName">
              <el-input v-model="personnelForm.gridName" placeholder="如：A网格"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 网格名称 + 状态 -->
        <el-row :gutter="20" v-if="personnelForm.type === 'installer'">
          <el-col :span="12">
            <el-form-item label="网格名称" prop="gridName">
              <el-input v-model="personnelForm.gridName" placeholder="如：A网格"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="personnelForm.status" style="width: 100%;">
                <el-option label="启用" value="active"></el-option>
                <el-option label="禁用" value="inactive"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <!-- 当选择营销人员时，状态单独一行 -->
        <el-row :gutter="20" v-if="personnelForm.type === 'sales'">
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-select v-model="personnelForm.status" style="width: 100%;">
                <el-option label="启用" value="active"></el-option>
                <el-option label="禁用" value="inactive"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </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>

    <!-- 批量导入对话框 -->
    <el-dialog
      title="批量导入人员"
      :visible.sync="isImportDialogOpen"
      width="600px"
    >
      <div class="import-content">
        <div class="import-section">
          <h4>选择导入文件</h4>
          <div class="file-upload">
            <input 
              type="file" 
              ref="fileInput" 
              accept=".xlsx,.xls" 
              @change="handleFileSelect"
              style="display: none;"
            >
            <el-button @click="$refs.fileInput.click()" type="primary">
              <i class="el-icon-upload2"></i>
              选择文件
            </el-button>
            <el-button @click="downloadTemplate('installer')" type="default">
              <i class="el-icon-download"></i>
              装维师傅模板
            </el-button>
            <el-button @click="downloadTemplate('sales')" type="default">
              <i class="el-icon-download"></i>
              营销人员模板
            </el-button>
          </div>
          
          <div class="file-info" v-if="selectedFile">
            <span class="file-name">{{ selectedFile.name }}</span>
            <el-button 
              type="text" 
              icon="el-icon-close" 
              @click="selectedFile = null"
            ></el-button>
          </div>
          <div class="file-info file-placeholder" v-else>
            未选择任何文件
          </div>
        </div>
      </div>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="isImportDialogOpen = false">取消</el-button>
        <el-button type="primary" @click="handleBatchImport">确认导入</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 人员类型映射
const personnelTypeMap = {
  installer: { label: '装维师傅' },
  sales: { label: '营销人员' }
}

// 模拟数据
const mockPersonnel = [
  { id: 'INS001', name: '王师傅', phone: '13987654321', workId: 'W001', type: 'installer', region: '南京市玄武区', gridName: 'A网格', status: 'active', createTime: '2025-09-01 09:00:00', associatedSales: 'SALE001' },
  { id: 'INS002', name: '李师傅', phone: '13876543210', workId: 'W002', type: 'installer', region: '南京市玄武区', gridName: 'B网格', status: 'active', createTime: '2025-09-01 09:00:00', associatedSales: 'SALE002' },
  { id: 'INS003', name: '张师傅', phone: '13765432109', workId: 'W003', type: 'installer', region: '南京市秦淮区', gridName: 'C网格', status: 'active', createTime: '2025-09-02 10:00:00', associatedSales: 'SALE003' },
  { id: 'INS004', name: '刘师傅', phone: '13654321098', workId: 'W004', type: 'installer', region: '南京市建邺区', gridName: 'D网格', status: 'active', createTime: '2025-09-03 11:00:00', associatedSales: 'SALE004' },
  { id: 'INS005', name: '陈师傅', phone: '13543210987', workId: 'W005', type: 'installer', region: '南京市鼓楼区', gridName: 'E网格', status: 'inactive', createTime: '2025-09-04 12:00:00', associatedSales: 'SALE005' },
  { id: 'INS006', name: '赵师傅', phone: '13432109876', workId: 'W006', type: 'installer', region: '南京市浦口区', gridName: 'F网格', status: 'active', createTime: '2025-09-05 13:00:00', associatedSales: 'SALE006' },
  { id: 'INS007', name: '孙师傅', phone: '13321098765', workId: 'W007', type: 'installer', region: '南京市栖霞区', gridName: 'G网格', status: 'active', createTime: '2025-09-06 14:00:00', associatedSales: 'SALE007' },
  { id: 'INS008', name: '周师傅', phone: '13210987654', workId: 'W008', type: 'installer', region: '南京市雨花台区', gridName: 'H网格', status: 'active', createTime: '2025-09-07 15:00:00', associatedSales: 'SALE008' },
  { id: 'INS009', name: '吴师傅', phone: '13109876543', workId: 'W009', type: 'installer', region: '南京市江宁区', gridName: 'I网格', status: 'active', createTime: '2025-09-08 16:00:00', associatedSales: 'SALE009' },
  { id: 'INS010', name: '郑师傅', phone: '13098765432', workId: 'W010', type: 'installer', region: '南京市六合区', gridName: 'J网格', status: 'inactive', createTime: '2025-09-09 17:00:00', associatedSales: 'SALE010' },
  { id: 'SALE001', name: '张营销', phone: '13912345678', workId: 'S001', type: 'sales', region: '南京市玄武区', gridName: 'A网格', status: 'active', createTime: '2025-09-01 09:00:00' },
  { id: 'SALE002', name: '陈营销', phone: '13923456789', workId: 'S002', type: 'sales', region: '南京市玄武区', gridName: 'B网格', status: 'active', createTime: '2025-09-01 09:00:00' },
  { id: 'SALE003', name: '杨营销', phone: '13934567890', workId: 'S003', type: 'sales', region: '南京市秦淮区', gridName: 'C网格', status: 'active', createTime: '2025-09-02 10:00:00' },
  { id: 'SALE004', name: '黄营销', phone: '13945678901', workId: 'S004', type: 'sales', region: '南京市建邺区', gridName: 'D网格', status: 'active', createTime: '2025-09-03 11:00:00' },
  { id: 'SALE005', name: '徐营销', phone: '13956789012', workId: 'S005', type: 'sales', region: '南京市鼓楼区', gridName: 'E网格', status: 'active', createTime: '2025-09-04 12:00:00' },
  { id: 'SALE006', name: '朱营销', phone: '13967890123', workId: 'S006', type: 'sales', region: '南京市浦口区', gridName: 'F网格', status: 'active', createTime: '2025-09-05 13:00:00' },
  { id: 'SALE007', name: '林营销', phone: '13978901234', workId: 'S007', type: 'sales', region: '南京市栖霞区', gridName: 'G网格', status: 'inactive', createTime: '2025-09-06 14:00:00' },
  { id: 'SALE008', name: '何营销', phone: '13989012345', workId: 'S008', type: 'sales', region: '南京市雨花台区', gridName: 'H网格', status: 'active', createTime: '2025-09-07 15:00:00' },
  { id: 'SALE009', name: '罗营销', phone: '13990123456', workId: 'S009', type: 'sales', region: '南京市江宁区', gridName: 'I网格', status: 'active', createTime: '2025-09-08 16:00:00' },
  { id: 'SALE010', name: '郭营销', phone: '13901234567', workId: 'S010', type: 'sales', region: '南京市六合区', gridName: 'J网格', status: 'active', createTime: '2025-09-09 17:00:00' },
  { id: 'INS011', name: '冯师傅', phone: '13812345678', workId: 'W011', type: 'installer', region: '南京市溧水区', gridName: 'K网格', status: 'active', createTime: '2025-09-10 18:00:00' },
  { id: 'INS012', name: '钱师傅', phone: '13823456789', workId: 'W012', type: 'installer', region: '南京市高淳区', gridName: 'L网格', status: 'active', createTime: '2025-09-11 19:00:00' },
  { id: 'SALE011', name: '宋营销', phone: '13834567890', workId: 'S011', type: 'sales', region: '南京市溧水区', gridName: 'K网格', status: 'active', createTime: '2025-09-10 18:00:00' },
  { id: 'SALE012', name: '梁营销', phone: '13845678901', workId: 'S012', type: 'sales', region: '南京市高淳区', gridName: 'L网格', status: 'inactive', createTime: '2025-09-11 19:00:00' }
]

export default {
  name: 'PersonnelManagement',
  data() {
    return {
      personnelTypeMap,
      personnel: mockPersonnel,
      searchTerm: '',
      filterType: 'all',
      filterRegion: '',
      isAddDialogOpen: false,
      isImportDialogOpen: false,
      editingPersonnel: null,
      selectedFile: null,
      currentPage: 1,
      pageSize: 20,
      personnelForm: {
        name: '',
        workId: '',
        phone: '',
        type: 'installer',
        region: '',
        gridName: '',
        status: 'active',
        associatedSales: ''
      },
      personnelRules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        workId: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入手机号', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请输入所属区域', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    filteredPersonnel() {
      return this.personnel.filter(person => {
        const matchesSearch = !this.searchTerm || 
          person.name.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
          person.workId.toLowerCase().includes(this.searchTerm.toLowerCase()) ||
          person.phone.includes(this.searchTerm)
        
        const matchesType = !this.filterType || this.filterType === 'all' || person.type === this.filterType
        
        // 区域筛选逻辑 - 只按区县筛选
        const matchesRegion = !this.filterRegion || person.region.includes(this.filterRegion)
        
        return matchesSearch && matchesType && matchesRegion
      })
    },
    paginatedPersonnel() {
      const startIndex = (this.currentPage - 1) * this.pageSize
      const endIndex = startIndex + this.pageSize
      return this.filteredPersonnel.slice(startIndex, endIndex)
    },
    activeSalesPersons() {
      return this.personnel.filter(person => person.type === 'sales' && person.status === 'active')
    }
  },
  methods: {
    handlePersonnelTypeChange(value) {
      // 当人员类型改变时，重置关联字段
      if (value === 'sales') {
        this.personnelForm.associatedSales = ''
      } else {
        this.personnelForm.gridName = ''
      }
    },
    editPersonnel(person) {
      this.editingPersonnel = person
      this.personnelForm = { ...person }
      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.editingPersonnel) {
            // 更新人员信息
            const index = this.personnel.findIndex(p => p.id === this.editingPersonnel.id)
            if (index !== -1) {
              this.$set(this.personnel, index, { ...this.editingPersonnel, ...this.personnelForm })
              this.$message.success('人员信息更新成功')
            }
          } else {
            // 添加新人员
            const newPersonnel = {
              ...this.personnelForm,
              id: `NEW${Date.now()}`,
              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: '',
        type: 'installer',
        region: '',
        gridName: '',
        status: 'active',
        associatedSales: ''
      }
    },
    handleFileSelect(event) {
      const file = event.target.files[0]
      if (file) {
        this.selectedFile = file
      }
    },
    downloadTemplate(type) {
      // 创建Excel模板数据
      const headers = type === 'installer' 
        ? ['工号', '手机号', '姓名', '网格名称', '对应营销人员工号', '对应营销人员手机号', '对应营销人员姓名']
        : ['工号', '手机号', '姓名', '网格名称']
      
      const sampleData = type === 'installer'
        ? [
            ['IF001', '13812345678', '张师傅', '玄武区A网格', 'SA001', '13898765432', '李营销'],
            ['IF002', '13887654321', '王师傅', '秦淮区B网格', 'SA002', '13876543210', '赵营销']
          ]
        : [
            ['SA001', '13898765432', '李营销', '玄武区A网格'],
            ['SA002', '13876543210', '赵营销', '秦淮区B网格']
          ]

      // 创建Excel格式内容（HTML表格格式，Excel能正确识别）
      const excelContent = `
        <html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">
        <head>
          <meta charset="utf-8">
          <!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>Sheet1</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]-->
        </head>
        <body>
          <table>
            <tr>
              ${headers.map(header => `<th style="background-color: #f0f0f0; font-weight: bold; border: 1px solid #ccc; padding: 8px;">${header}</th>`).join('')}
            </tr>
            ${sampleData.map(row => 
              `<tr>
                ${row.map(cell => `<td style="border: 1px solid #ccc; padding: 8px;">${cell}</td>`).join('')}
              </tr>`
            ).join('')}
          </table>
        </body>
        </html>
      `

      // 创建Blob并下载
      const blob = new Blob([excelContent], { 
        type: 'application/vnd.ms-excel;charset=utf-8;' 
      })
      
      // 下载文件
      const link = document.createElement('a')
      if (link.download !== undefined) {
        const url = URL.createObjectURL(blob)
        link.setAttribute('href', url)
        link.setAttribute('download', `${type === 'installer' ? '装维师傅' : '营销人员'}导入模板.xls`)
        link.style.visibility = 'hidden'
        document.body.appendChild(link)
        link.click()
        document.body.removeChild(link)
        URL.revokeObjectURL(url)
      }
      
      this.$message.success(`${type === 'installer' ? '装维师傅' : '营销人员'}模板下载成功`)
    },
    handleBatchImport() {
      if (!this.selectedFile) {
        this.$message.warning('请先选择要导入的文件')
        return
      }
      
      // 模拟批量导入
      this.$message.success('人员批量导入成功，共导入 15 人')
      this.isImportDialogOpen = false
      this.selectedFile = null
    },
    handleExport() {
      this.$message.success('人员数据导出成功')
    },
    getAssociatedSalesPerson(associatedSalesId) {
      if (!associatedSalesId) return null
      return this.personnel.find(p => p.id === associatedSalesId)
    },
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
    },
    handleCurrentChange(page) {
      this.currentPage = page
    }
  }
}
</script>

<style lang="scss" scoped>
.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;
        }
      }
      
      .filter-select {
        width: 160px;
      }
    }
    
    .toolbar-right {
      display: flex;
      gap: 10px;
    }
  }
  
  .personnel-table {
    margin-bottom: 20px;
  }
  
  .import-content {
    .import-section {
      margin-bottom: 20px;
      
      h4 {
        margin: 0 0 10px 0;
        font-weight: normal;
      }
      
      .file-upload {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
      }
      
      .file-info {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 15px;
        background-color: #f5f7fa;
        border-radius: 4px;
        
        &.file-placeholder {
          color: #909399;
        }
        
        .file-name {
          flex: 1;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
    }
  }
  
  .text-muted {
    color: #909399;
  }
}
</style>