src/views/personnelManagement/analytics/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,698 @@
<template>
  <div class="app-container analytics-container">

    <!-- å…³é”®æŒ‡æ ‡å¡ç‰‡ -->
    <el-row :gutter="20" class="metrics-cards">
      <el-col :span="6" v-for="(item, index) in keyMetrics" :key="index">
        <el-card class="metric-card" :class="item.type">
          <div class="card-content">
            <div class="card-icon">
              <el-icon :size="32">
                <component :is="item.icon" />
              </el-icon>
            </div>
            <div class="card-info">
              <div class="card-number">
                <el-skeleton-item v-if="loading" variant="text" style="width: 60px; height: 32px;" />
                <span v-else>{{ item.value }}{{ item.unit }}</span>
              </div>
              <div class="card-label">{{ item.label }}</div>
              <div class="card-trend" :class="item.trend > 0 ? 'positive' : 'negative'">
                <el-icon>
                  <component :is="item.trend > 0 ? 'ArrowUp' : 'ArrowDown'" />
                </el-icon>
                {{ Math.abs(item.trend) }}%
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- å›¾è¡¨åŒºåŸŸ -->
    <el-row :gutter="20" class="charts-section">
      <!-- å‘˜å·¥æµåŠ¨çŽ‡è¶‹åŠ¿å›¾ -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>员工流动率趋势</span>
              <el-tag type="info">近12个月</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="turnoverChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>

      <!-- éƒ¨é—¨äººå‘˜åˆ†å¸ƒ -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>部门人员分布</span>
              <el-tag type="success">当前状态</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="departmentChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- ç¬¬äºŒè¡Œå›¾è¡¨ -->
    <el-row :gutter="20" class="charts-section">
      <!-- ç¼–制达成率 -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>编制达成率</span>
              <el-tag type="warning">各部门对比</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="staffingChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>

      <!-- å‘˜å·¥æµå¤±åŽŸå› åˆ†æž -->
      <el-col :span="12">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>员工流失原因分析</span>
              <el-tag type="danger">年度统计</el-tag>
            </div>
          </template>
          <div class="chart-container">
            <div ref="attritionChartRef" class="chart"></div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Refresh, 
  User, 
  TrendCharts, 
  DataAnalysis, 
  PieChart,
  ArrowUp,
  ArrowDown
} from '@element-plus/icons-vue'
import * as echarts from 'echarts'

// å“åº”式数据
const loading = ref(false)
const autoRefreshEnabled = ref(true)
const autoRefreshInterval = ref(null)

// å›¾è¡¨å¼•ç”¨
const turnoverChartRef = ref(null)
const departmentChartRef = ref(null)
const staffingChartRef = ref(null)
const attritionChartRef = ref(null)

// å›¾è¡¨å®žä¾‹
let turnoverChart = null
let departmentChart = null
let staffingChart = null
let attritionChart = null

// è‡ªåŠ¨æ›´æ–°é—´éš”（10分钟）
const AUTO_REFRESH_INTERVAL = 10 * 60 * 1000

// å…³é”®æŒ‡æ ‡æ•°æ®
const keyMetrics = ref([
  {
    label: '员工流动率',
    value: 0,
    unit: '%',
    icon: 'TrendCharts',
    type: 'primary',
    trend: 0
  },
  {
    label: '员工流失率',
    value: 0,
    unit: '%',
    icon: 'User',
    type: 'danger',
    trend: 0
  },
  {
    label: '编制达成率',
    value: 0,
    unit: '%',
    icon: 'DataAnalysis',
    type: 'success',
    trend: 0
  },
  {
    label: '在职员工数',
    value: 0,
    unit: '人',
    icon: 'PieChart',
    type: 'warning',
    trend: 0
  }
])

// éƒ¨é—¨æ•°æ®
const departmentData = ref([])

// å¯åŠ¨è‡ªåŠ¨åˆ·æ–°
const startAutoRefresh = () => {
  if (autoRefreshInterval.value) {
    clearInterval(autoRefreshInterval.value)
  }
  if (autoRefreshEnabled.value) {
    autoRefreshInterval.value = setInterval(() => {
      refreshData()
    }, AUTO_REFRESH_INTERVAL)
  }
}

// åœæ­¢è‡ªåŠ¨åˆ·æ–°
const stopAutoRefresh = () => {
  if (autoRefreshInterval.value) {
    clearInterval(autoRefreshInterval.value)
    autoRefreshInterval.value = null
  }
}

// åˆ‡æ¢è‡ªåŠ¨åˆ·æ–°çŠ¶æ€
const toggleAutoRefresh = (value) => {
  if (value) {
    startAutoRefresh()
  } else {
    stopAutoRefresh()
  }
}

// ç”Ÿæˆæ¨¡æ‹Ÿæ•°æ®
const generateMockData = () => {
  // ç”Ÿæˆå…³é”®æŒ‡æ ‡æ•°æ®
  keyMetrics.value[0].value = (Math.random() * 5 + 2).toFixed(1)
  keyMetrics.value[0].trend = (Math.random() * 3 - 1.5).toFixed(1)
  
  keyMetrics.value[1].value = (Math.random() * 3 + 1).toFixed(1)
  keyMetrics.value[1].trend = (Math.random() * 2 - 1).toFixed(1)
  
  keyMetrics.value[2].value = (Math.random() * 15 + 85).toFixed(1)
  keyMetrics.value[2].trend = (Math.random() * 3 - 1.5).toFixed(1)
  
  keyMetrics.value[3].value = Math.floor(Math.random() * 50 + 200)
  keyMetrics.value[3].trend = (Math.random() * 2 - 1).toFixed(1)

  // ç”Ÿæˆéƒ¨é—¨æ•°æ®
  const departments = ['技术部', '销售部', '人事部', '财务部', '生产部', '市场部']
  departmentData.value = departments.map(dept => ({
    department: dept,
    currentStaff: Math.floor(Math.random() * 30 + 20),
    plannedStaff: Math.floor(Math.random() * 10 + 35),
    staffingRate: Math.floor(Math.random() * 20 + 80),
    turnoverRate: (Math.random() * 4 + 1).toFixed(1),
    attritionRate: (Math.random() * 2 + 0.5).toFixed(1),
    newHires: Math.floor(Math.random() * 5 + 1),
    resignations: Math.floor(Math.random() * 3 + 1),
    status: Math.random() > 0.7 ? '异常' : '正常'
  }))
}

// åˆ·æ–°æ•°æ®
const refreshData = async () => {
  loading.value = true
  try {
    // æ¨¡æ‹ŸAPI调用延迟
    await new Promise(resolve => setTimeout(resolve, 500))
    
    generateMockData()
    renderAllCharts()
    
    if (!autoRefreshEnabled.value) {
      ElMessage.success('数据刷新成功')
    }
  } catch (error) {
    console.error('刷新数据失败:', error)
    ElMessage.error('刷新数据失败')
  } finally {
    loading.value = false
  }
}

// åˆå§‹åŒ–图表
const initCharts = () => {
  setTimeout(() => {
    if (turnoverChartRef.value) {
      turnoverChart = echarts.init(turnoverChartRef.value)
    }
    if (departmentChartRef.value) {
      departmentChart = echarts.init(departmentChartRef.value)
    }
    if (staffingChartRef.value) {
      staffingChart = echarts.init(staffingChartRef.value)
    }
    if (attritionChartRef.value) {
      attritionChart = echarts.init(attritionChartRef.value)
    }
    
    renderAllCharts()
  }, 300)
}

// æ¸²æŸ“所有图表
const renderAllCharts = () => {
  renderTurnoverChart()
  renderDepartmentChart()
  renderStaffingChart()
  renderAttritionChart()
}

// æ¸²æŸ“员工流动率趋势图
const renderTurnoverChart = () => {
  if (!turnoverChart) return
  
  const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  const turnoverData = months.map(() => (Math.random() * 5 + 2).toFixed(1))
  const attritionData = months.map(() => (Math.random() * 3 + 1).toFixed(1))
  
  const option = {
    title: {
      text: '员工流动率趋势',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' }
    },
    legend: {
      data: ['流动率', '流失率'],
      bottom: 10
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: months,
      boundaryGap: false
    },
    yAxis: {
      type: 'value',
      axisLabel: { formatter: '{value}%' }
    },
    series: [
      {
        name: '流动率',
        type: 'line',
        data: turnoverData,
        smooth: true,
        lineStyle: { color: '#409EFF' },
        itemStyle: { color: '#409EFF' }
      },
      {
        name: '流失率',
        type: 'line',
        data: attritionData,
        smooth: true,
        lineStyle: { color: '#F56C6C' },
        itemStyle: { color: '#F56C6C' }
      }
    ]
  }
  
  turnoverChart.setOption(option)
}

// æ¸²æŸ“部门人员分布图
const renderDepartmentChart = () => {
  if (!departmentChart) return
  
  const data = departmentData.value.map(item => ({
    name: item.department,
    value: item.currentStaff
  }))
  
  const option = {
    title: {
      text: '部门人员分布',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [
      {
        name: '人员数量',
        type: 'pie',
        radius: ['40%', '70%'],
        center: ['60%', '50%'],
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  departmentChart.setOption(option)
}

// æ¸²æŸ“编制达成率图
const renderStaffingChart = () => {
  if (!staffingChart) return
  
  const departments = departmentData.value.map(item => item.department)
  const rates = departmentData.value.map(item => item.staffingRate)
  
  const option = {
    title: {
      text: '编制达成率',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'shadow' }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '15%',
      top: '15%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: departments,
      axisLabel: { rotate: 45 }
    },
    yAxis: {
      type: 'value',
      axisLabel: { formatter: '{value}%' },
      max: 100
    },
    series: [
      {
        name: '达成率',
        type: 'bar',
        data: rates,
        itemStyle: {
          color: function(params) {
            const value = params.value
            if (value >= 90) return '#67C23A'
            if (value >= 80) return '#E6A23C'
            return '#F56C6C'
          }
        }
      }
    ]
  }
  
  staffingChart.setOption(option)
}

// æ¸²æŸ“员工流失原因分析图
const renderAttritionChart = () => {
  if (!attritionChart) return
  
  const reasons = ['薪资待遇', '职业发展', '工作环境', '个人原因', '其他']
  const data = reasons.map(() => Math.floor(Math.random() * 20 + 5))
  
  const option = {
    title: {
      text: '员工流失原因分析',
      left: 'center',
      textStyle: { fontSize: 16, fontWeight: 'normal' }
    },
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}人 ({d}%)'
    },
    legend: {
      orient: 'vertical',
      left: 'left',
      top: 'middle'
    },
    series: [
      {
        name: '流失人数',
        type: 'pie',
        radius: '50%',
        center: ['60%', '50%'],
        data: reasons.map((reason, index) => ({
          name: reason,
          value: data[index]
        })),
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }
    ]
  }
  
  attritionChart.setOption(option)
}
 
// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  generateMockData()
  initCharts()
  startAutoRefresh()
})

onUnmounted(() => {
  stopAutoRefresh()
})
</script>

<style scoped>
.analytics-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-header h2 {
  color: white;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0 0 15px 0;
}

.header-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.refresh-btn {
  margin-left: 20px;
}

.metrics-cards {
  margin-bottom: 30px;
}

.metric-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: none;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.metric-card.primary {
  border-left: 4px solid #409EFF;
  background: linear-gradient(135deg, #409EFF 0%, #36a3f7 100%);
}

.metric-card.danger {
  border-left: 4px solid #F56C6C;
  background: linear-gradient(135deg, #F56C6C 0%, #f78989 100%);
}

.metric-card.success {
  border-left: 4px solid #67C23A;
  background: linear-gradient(135deg, #67C23A 0%, #85ce61 100%);
}

.metric-card.warning {
  border-left: 4px solid #E6A23C;
  background: linear-gradient(135deg, #E6A23C 0%, #ebb563 100%);
}

.card-content {
  display: flex;
  align-items: center;
  padding: 20px;
}

.card-icon {
  margin-right: 20px;
  color: white;
}

.card-info {
  flex: 1;
}

.card-number {
  font-size: 32px;
  font-weight: 600;
  color: white;
  margin-bottom: 5px;
}

.card-label {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 5px;
}

.card-trend {
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-trend.positive {
  color: #67C23A;
}

.card-trend.negative {
  color: #F56C6C;
}

.charts-section {
  margin-bottom: 30px;
}

.chart-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #303133;
  padding: 15px 20px;
  border-bottom: 1px solid #ebeef5;
}

.chart-container {
  height: 350px;
  padding: 20px;
}

.chart {
  width: 100%;
  height: 100%;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .analytics-container {
    padding: 10px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .header-controls {
    flex-direction: column;
    gap: 15px;
  }
  
  .refresh-btn {
    margin-left: 0;
  }
  
  .metrics-cards .el-col {
    margin-bottom: 15px;
  }
  
  .charts-section .el-col {
    margin-bottom: 20px;
  }
  
  .chart-container {
    height: 300px;
  }
}

@media (max-width: 480px) {
  .page-header h2 {
    font-size: 20px;
  }
  
  .card-number {
    font-size: 24px;
  }
  
  .chart-container {
    height: 250px;
  }
}
</style>

 src/views/personnelManagement/scheduling/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,634 @@
<template>
  <div class="app-container scheduling-container">
    <!-- ç­›é€‰åŒºåŸŸ -->
    <div class="filter-section">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="员工姓名：">
          <el-input
            v-model="filterForm.employeeName"
            placeholder="请输入员工姓名"
            clearable
            style="width: 150px"
          />
        </el-form-item>
        <el-form-item label="班次类型：">
          <el-select v-model="filterForm.shiftType" placeholder="请选择班次" clearable style="width: 120px">
            <el-option label="早班" value="早班" />
            <el-option label="中班" value="中班" />
            <el-option label="晚班" value="晚班" />
            <el-option label="夜班" value="夜班" />
          </el-select>
        </el-form-item>
        <el-form-item label="日期范围：">
          <el-date-picker
            v-model="filterForm.dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 250px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleFilter">
            <el-icon><Search /></el-icon>
            ç­›é€‰
          </el-button>
          <el-button @click="resetFilter">
            <el-icon><Refresh /></el-icon>
            é‡ç½®
          </el-button>
          <el-button type="primary" @click="openScheduleDialog('add')">
          <el-icon><Plus /></el-icon>
          æ–°å¢žæŽ’班
        </el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- æŽ’班表格 -->
    <div class="table-section">
      <el-table
        :data="filteredScheduleList"
        border
        stripe
        style="width: 100%"
        height="calc(100vh - 18.5em)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column prop="employeeName" label="员工姓名" width="120" />
        <el-table-column prop="employeeId" label="员工工号" width="100" />
        <el-table-column prop="department" label="部门" width="120" />
        <el-table-column prop="shiftType" label="班次类型" width="100">
          <template #default="scope">
            <el-tag :type="getShiftTagType(scope.row.shiftType)">
              {{ scope.row.shiftType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="workDate" label="工作日期" width="120" />
        <el-table-column prop="startTime" label="开始时间" width="100" />
        <el-table-column prop="endTime" label="结束时间" width="100" />
        <el-table-column prop="workHours" label="工作时长" width="100">
          <template #default="scope">
            {{ scope.row.workHours }}小时
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusTagType(scope.row.status)">
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" min-width="150" />
        <el-table-column label="操作" width="200" fixed="right">
          <template #default="scope">
            <el-button
              type="primary"
              size="small"
              @click="openScheduleDialog('edit', scope.row)"
            >
              ç¼–辑
            </el-button>
            <el-button
              type="danger"
              size="small"
              @click="handleDelete(scope.row)"
            >
              åˆ é™¤
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- æ‰¹é‡æ“ä½œ -->
    <div class="batch-actions" v-if="selectedRows.length > 0">
      <el-button
        type="danger"
        @click="handleBatchDelete"
        :disabled="selectedRows.length === 0"
      >
        æ‰¹é‡åˆ é™¤ ({{ selectedRows.length }})
      </el-button>
    </div>

    <!-- æŽ’班新增/编辑对话框 -->
    <el-dialog
      v-model="scheduleDialog"
      :title="dialogType === 'add' ? '新增排班' : '编辑排班'"
      width="700px"
      @close="closeScheduleDialog"
    >
      <el-form
        :model="scheduleForm"
        :rules="scheduleRules"
        ref="scheduleFormRef"
        label-width="120px"
      >
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="员工姓名：" prop="employeeName">
              <el-input v-model="scheduleForm.employeeName" placeholder="请输入员工姓名" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工工号：" prop="employeeId">
              <el-input v-model="scheduleForm.employeeId" placeholder="请输入员工工号" />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="部门：" prop="department">
              <el-select v-model="scheduleForm.department" placeholder="请选择部门" style="width: 100%">
                <el-option label="技术部" value="技术部" />
                <el-option label="销售部" value="销售部" />
                <el-option label="人事部" value="人事部" />
                <el-option label="财务部" value="财务部" />
                <el-option label="生产部" value="生产部" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="班次类型：" prop="shiftType">
              <el-select v-model="scheduleForm.shiftType" placeholder="请选择班次" style="width: 100%">
                <el-option label="早班" value="早班" />
                <el-option label="中班" value="中班" />
                <el-option label="晚班" value="晚班" />
                <el-option label="夜班" value="夜班" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="工作日期：" prop="workDate">
              <el-date-picker
                v-model="scheduleForm.workDate"
                type="date"
                placeholder="选择工作日期"
                style="width: 100%"
                format="YYYY-MM-DD"
                value-format="YYYY-MM-DD"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态：" prop="status">
              <el-select v-model="scheduleForm.status" placeholder="请选择状态" style="width: 100%">
                <el-option label="已安排" value="已安排" />
                <el-option label="已确认" value="已确认" />
                <el-option label="已完成" value="已完成" />
                <el-option label="已取消" value="已取消" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="开始时间：" prop="startTime">
              <el-time-picker
                v-model="scheduleForm.startTime"
                placeholder="选择开始时间"
                style="width: 100%"
                format="HH:mm"
                value-format="HH:mm"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间：" prop="endTime">
              <el-time-picker
                v-model="scheduleForm.endTime"
                placeholder="选择结束时间"
                style="width: 100%"
                format="HH:mm"
                value-format="HH:mm"
              />
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="备注：" prop="remark">
              <el-input
                v-model="scheduleForm.remark"
                type="textarea"
                :rows="3"
                placeholder="请输入备注信息"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitScheduleForm">确认</el-button>
          <el-button @click="closeScheduleDialog">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Download, Search, Refresh } from '@element-plus/icons-vue'

// å“åº”式数据
const scheduleDialog = ref(false)
const dialogType = ref('add')
const selectedRows = ref([])
const scheduleFormRef = ref()

// ç­›é€‰è¡¨å•
const filterForm = reactive({
  employeeName: '',
  shiftType: '',
  dateRange: []
})

// æŽ’班表单
const scheduleForm = reactive({
  id: '',
  employeeName: '',
  employeeId: '',
  department: '',
  shiftType: '',
  workDate: '',
  startTime: '',
  endTime: '',
  workHours: 0,
  status: '已安排',
  remark: ''
})

// è¡¨å•éªŒè¯è§„则
const scheduleRules = reactive({
  employeeName: [{ required: true, message: '请输入员工姓名', trigger: 'blur' }],
  employeeId: [{ required: true, message: '请输入员工工号', trigger: 'blur' }],
  department: [{ required: true, message: '请选择部门', trigger: 'change' }],
  shiftType: [{ required: true, message: '请选择班次类型', trigger: 'change' }],
  workDate: [{ required: true, message: '请选择工作日期', trigger: 'change' }],
  startTime: [{ required: true, message: '请选择开始时间', trigger: 'change' }],
  endTime: [{ required: true, message: '请选择结束时间', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
})

// æ¨¡æ‹ŸæŽ’班数据
const scheduleList = ref([
  {
    id: 1,
    employeeName: '张海洋',
    employeeId: 'EMP001',
    department: '技术部',
    shiftType: '早班',
    workDate: '2024-01-15',
    startTime: '08:00',
    endTime: '17:00',
    workHours: 9,
    status: '已安排',
    remark: '正常排班'
  },
  {
    id: 2,
    employeeName: '李超',
    employeeId: 'EMP002',
    department: '销售部',
    shiftType: '中班',
    workDate: '2024-01-15',
    startTime: '14:00',
    endTime: '22:00',
    workHours: 8,
    status: '已确认',
    remark: '客户会议'
  },
  {
    id: 3,
    employeeName: '王杰',
    employeeId: 'EMP003',
    department: '生产部',
    shiftType: '晚班',
    workDate: '2024-01-15',
    startTime: '22:00',
    endTime: '06:00',
    workHours: 8,
    status: '已安排',
    remark: '夜班生产'
  }
])

// è®¡ç®—属性：筛选后的排班列表
const filteredScheduleList = computed(() => {
  let result = scheduleList.value

  if (filterForm.employeeName) {
    result = result.filter(item => 
      item.employeeName.includes(filterForm.employeeName)
    )
  }

  if (filterForm.shiftType) {
    result = result.filter(item => item.shiftType === filterForm.shiftType)
  }

  if (filterForm.dateRange && filterForm.dateRange.length === 2) {
    result = result.filter(item => {
      const workDate = new Date(item.workDate)
      const startDate = new Date(filterForm.dateRange[0])
      const endDate = new Date(filterForm.dateRange[1])
      return workDate >= startDate && workDate <= endDate
    })
  }

  return result
})

// èŽ·å–班次标签类型
const getShiftTagType = (shiftType) => {
  const typeMap = {
    '早班': 'success',
    '中班': 'warning',
    '晚班': 'info',
    '夜班': 'danger'
  }
  return typeMap[shiftType] || 'info'
}

// èŽ·å–状态标签类型
const getStatusTagType = (status) => {
  const typeMap = {
    '已安排': 'info',
    '已确认': 'warning',
    '已完成': 'success',
    '已取消': 'danger'
  }
  return typeMap[status] || 'info'
}

// ç­›é€‰
const handleFilter = () => {
  // ç­›é€‰é€»è¾‘已在计算属性中实现
}

// é‡ç½®ç­›é€‰
const resetFilter = () => {
  filterForm.employeeName = ''
  filterForm.shiftType = ''
  filterForm.dateRange = []
}

// æ‰“开排班对话框
const openScheduleDialog = (type, data) => {
  dialogType.value = type
  scheduleDialog.value = true
  
  if (type === 'edit' && data) {
    // ç¼–辑模式，复制数据
    Object.assign(scheduleForm, { ...data })
  } else {
    // æ–°å¢žæ¨¡å¼ï¼Œé‡ç½®è¡¨å•
    Object.keys(scheduleForm).forEach(key => {
      scheduleForm[key] = ''
    })
    scheduleForm.status = '已安排'
    scheduleForm.workDate = new Date().toISOString().split('T')[0]
  }
}

// å…³é—­æŽ’班对话框
const closeScheduleDialog = () => {
  scheduleFormRef.value?.resetFields()
  scheduleDialog.value = false
}

// è®¡ç®—工作时长
const calculateWorkHours = () => {
  if (scheduleForm.startTime && scheduleForm.endTime) {
    const start = new Date(`2000-01-01 ${scheduleForm.startTime}`)
    const end = new Date(`2000-01-01 ${scheduleForm.endTime}`)
    
    if (end < start) {
      // è·¨å¤©çš„情况
      end.setDate(end.getDate() + 1)
    }
    
    const diffMs = end - start
    const diffHours = diffMs / (1000 * 60 * 60)
    scheduleForm.workHours = Math.round(diffHours * 100) / 100
  }
}

// æäº¤æŽ’班表单
const submitScheduleForm = () => {
  scheduleFormRef.value.validate((valid) => {
    if (valid) {
      // è®¡ç®—工作时长
      calculateWorkHours()
      
      if (dialogType.value === 'add') {
        // æ–°å¢ž
        const newSchedule = {
          ...scheduleForm,
          id: Date.now() // ä½¿ç”¨æ—¶é—´æˆ³ä½œä¸ºä¸´æ—¶ID
        }
        scheduleList.value.push(newSchedule)
        ElMessage.success('新增排班成功')
      } else {
        // ç¼–辑
        const index = scheduleList.value.findIndex(item => item.id === scheduleForm.id)
        if (index !== -1) {
          scheduleList.value[index] = { ...scheduleForm }
          ElMessage.success('编辑排班成功')
        }
      }
      
      closeScheduleDialog()
    }
  })
}

// åˆ é™¤æŽ’班
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除 ${row.employeeName} çš„排班记录吗？`,
    '删除提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const index = scheduleList.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      scheduleList.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// æ‰¹é‡åˆ é™¤
const handleBatchDelete = () => {
  if (selectedRows.value.length === 0) {
    ElMessage.warning('请选择要删除的记录')
    return
  }
  
  ElMessageBox.confirm(
    `确定要删除选中的 ${selectedRows.value.length} æ¡æŽ’班记录吗？`,
    '批量删除提示',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    const selectedIds = selectedRows.value.map(row => row.id)
    scheduleList.value = scheduleList.value.filter(item => !selectedIds.includes(item.id))
    selectedRows.value = []
    ElMessage.success('批量删除成功')
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// é€‰æ‹©å˜åŒ–事件
const handleSelectionChange = (selection) => {
  selectedRows.value = selection
}

// ç›‘听时间变化，自动计算工作时长
const watchTimeChange = () => {
  if (scheduleForm.startTime && scheduleForm.endTime) {
    calculateWorkHours()
  }
}

// ç”Ÿå‘½å‘¨æœŸ
onMounted(() => {
  // é¡µé¢åˆå§‹åŒ–
})
</script>

<style scoped>
.scheduling-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-header h2 {
  color: white;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0 0 15px 0;
}

.header-controls {
  display: flex;
  justify-content: center;
  gap: 15px;
}

.filter-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-form {
  margin: 0;
}

.table-section {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

.batch-actions {
  background: white;
  padding: 15px 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dialog-footer {
  text-align: right;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #303133;
}

:deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

:deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px #c0c4cc inset;
}

:deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .scheduling-container {
    padding: 10px;
  }
  
  .page-header {
    padding: 15px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
  
  .header-controls {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .filter-form .el-form-item {
    margin-bottom: 10px;
  }
}
</style>

 src/views/personnelManagement/selfService/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,525 @@
<template>
  <div class="app-container self-service-container">

    <!-- åŠŸèƒ½å¯¼èˆªå¡ç‰‡ -->
    <el-row :gutter="20" class="nav-cards">
      <el-col :span="6" v-for="(item, index) in navItems" :key="index">
        <el-card class="nav-card" @click="handleNavClick(item.type)">
          <div class="nav-content">
            <el-icon :size="40" class="nav-icon">
              <component :is="item.icon" />
            </el-icon>
            <h3>{{ item.title }}</h3>
            <p>{{ item.desc }}</p>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- ä¸»è¦å†…容区域 -->
    <div class="main-content">
      <!-- è€ƒå‹¤è®°å½• -->
      <el-card v-if="currentView === 'attendance'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>个人考勤记录</span>
            <el-button type="primary" @click="addAttendanceRecord">新增记录</el-button>
          </div>
        </template>
        <el-table :data="attendanceData" style="width: 100%">
          <el-table-column prop="date" label="日期"  />
          <el-table-column prop="checkIn" label="签到时间"  />
          <el-table-column prop="checkOut" label="签退时间"  />
          <el-table-column prop="workHours" label="工作时长" width="100" />
          <el-table-column prop="status" label="状态" width="100">
            <template #default="scope">
              <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editAttendanceRecord(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteAttendanceRecord(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- è–ªèµ„单 -->
      <el-card v-if="currentView === 'salary'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>薪资单查询</span>
            <el-date-picker v-model="salaryMonth" type="month" placeholder="选择月份" />
          </div>
        </template>
        <el-table :data="salaryData" style="width: 100%">
          <el-table-column prop="month" label="月份"  />
          <el-table-column prop="basicSalary" label="基本工资"  />
          <el-table-column prop="bonus" label="奖金"  />
          <el-table-column prop="deduction" label="扣款"  />
          <el-table-column prop="total" label="实发工资"  />
          <el-table-column prop="status" label="状态" >
            <template #default="scope">
              <el-tag :type="scope.row.status === '已发放' ? 'success' : 'warning'">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- å‡æœŸç”³è¯· -->
      <el-card v-if="currentView === 'leave'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>假期申请管理</span>
            <el-button type="primary" @click="showLeaveDialog = true">申请假期</el-button>
          </div>
        </template>
        <el-table :data="leaveData" style="width: 100%">
          <el-table-column prop="type" label="假期类型"  />
          <el-table-column prop="startDate" label="开始日期"  />
          <el-table-column prop="endDate" label="结束日期"  />
          <el-table-column prop="days" label="天数" width="80" />
          <el-table-column prop="reason" label="申请原因" />
          <el-table-column prop="status" label="审批状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusType(scope.row.status)">
                {{ scope.row.status }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button size="small" @click="editLeaveRecord(scope.row)">编辑</el-button>
              <el-button size="small" type="danger" @click="deleteLeaveRecord(scope.$index)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>

      <!-- ä¸ªäººä¿¡æ¯ -->
      <el-card v-if="currentView === 'profile'" class="content-card">
        <template #header>
          <div class="card-header">
            <span>个人信息维护</span>
            <el-button type="primary" @click="editProfile = true">编辑信息</el-button>
          </div>
        </template>
        <el-descriptions :column="2" border>
          <el-descriptions-item label="姓名">{{ profile.name }}</el-descriptions-item>
          <el-descriptions-item label="工号">{{ profile.employeeId }}</el-descriptions-item>
          <el-descriptions-item label="部门">{{ profile.department }}</el-descriptions-item>
          <el-descriptions-item label="职位">{{ profile.position }}</el-descriptions-item>
          <el-descriptions-item label="入职日期">{{ profile.hireDate }}</el-descriptions-item>
          <el-descriptions-item label="联系电话">{{ profile.phone }}</el-descriptions-item>
          <el-descriptions-item label="邮箱">{{ profile.email }}</el-descriptions-item>
          <el-descriptions-item label="地址">{{ profile.address }}</el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>

    <!-- å‡æœŸç”³è¯·å¼¹çª— -->
    <el-dialog v-model="showLeaveDialog" title="申请假期" width="500px">
      <el-form :model="leaveForm" label-width="100px">
        <el-form-item label="假期类型">
          <el-select v-model="leaveForm.type" placeholder="请选择假期类型">
            <el-option label="年假" value="年假" />
            <el-option label="病假" value="病假" />
            <el-option label="调休" value="调休" />
            <el-option label="事假" value="事假" />
          </el-select>
        </el-form-item>
        <el-form-item label="开始日期">
          <el-date-picker v-model="leaveForm.startDate" type="date" placeholder="选择开始日期" />
        </el-form-item>
        <el-form-item label="结束日期">
          <el-date-picker v-model="leaveForm.endDate" type="date" placeholder="选择结束日期" />
        </el-form-item>
        <el-form-item label="申请原因">
          <el-input v-model="leaveForm.reason" type="textarea" rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showLeaveDialog = false">取消</el-button>
        <el-button type="primary" @click="submitLeaveApplication">提交申请</el-button>
      </template>
    </el-dialog>

    <!-- æ–°å¢žè€ƒå‹¤è®°å½•å¼¹çª— -->
    <el-dialog v-model="showAttendanceDialog" title="新增考勤记录" width="500px">
      <el-form :model="attendanceForm" :rules="attendanceRules" ref="attendanceFormRef" label-width="100px">
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="attendanceForm.date" type="date" placeholder="选择日期" />
        </el-form-item>
        <el-form-item label="签到时间" prop="checkIn">
          <el-time-picker v-model="attendanceForm.checkIn" placeholder="选择签到时间" format="HH:mm" value-format="HH:mm" />
        </el-form-item>
        <el-form-item label="签退时间" prop="checkOut">
          <el-time-picker v-model="attendanceForm.checkOut" placeholder="选择签退时间" format="HH:mm" value-format="HH:mm" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="attendanceForm.status" placeholder="请选择状态">
            <el-option label="正常" value="正常" />
            <el-option label="迟到" value="迟到" />
            <el-option label="早退" value="早退" />
            <el-option label="缺勤" value="缺勤" />
          </el-select>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="showAttendanceDialog = false">取消</el-button>
        <el-button type="primary" @click="submitAttendance">提交</el-button>
      </template>
    </el-dialog>

    <!-- ä¸ªäººä¿¡æ¯ç¼–辑弹窗 -->
    <el-dialog v-model="editProfile" title="编辑个人信息" width="500px">
      <el-form :model="profileForm" label-width="100px">
        <el-form-item label="姓名">
          <el-input v-model="profileForm.name" />
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="profileForm.phone" />
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="profileForm.email" />
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="profileForm.address" type="textarea" rows="2" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editProfile = false">取消</el-button>
        <el-button type="primary" @click="saveProfile">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Calendar, 
  Money, 
  Clock, 
  User
} from '@element-plus/icons-vue'

// å½“前视图
const currentView = ref('attendance')

// å¯¼èˆªé¡¹
const navItems = [
  { type: 'attendance', title: '考勤记录', desc: '查询个人考勤信息', icon: 'Calendar' },
  { type: 'salary', title: '薪资单', desc: '查看薪资发放记录', icon: 'Money' },
  { type: 'leave', title: '假期申请', desc: '在线申请各类假期', icon: 'Clock' },
  { type: 'profile', title: '个人信息', desc: '维护个人基本信息', icon: 'User' }
]

// è€ƒå‹¤æ•°æ®
const attendanceData = ref([
  { date: '2024-01-15', checkIn: '09:00', checkOut: '18:00', workHours: '9小时', status: '正常' },
  { date: '2024-01-16', checkIn: '08:55', checkOut: '18:05', workHours: '9小时10分', status: '正常' },
  { date: '2024-01-17', checkIn: '09:15', checkOut: '18:00', workHours: '8小时45分', status: '迟到' }
])

// è–ªèµ„数据
const salaryData = ref([
  { month: '2024-01', basicSalary: 8000, bonus: 1000, deduction: 200, total: 8800, status: '已发放' },
  { month: '2023-12', basicSalary: 8000, bonus: 800, deduction: 150, total: 8650, status: '已发放' }
])

// å‡æœŸæ•°æ®
const leaveData = ref([
  { type: '年假', startDate: '2024-02-01', endDate: '2024-02-03', days: 3, reason: '春节回家', status: '已通过' },
  { type: '病假', startDate: '2024-01-20', endDate: '2024-01-21', days: 2, reason: '感冒发烧', status: '审批中' }
])

// ä¸ªäººä¿¡æ¯
const profile = ref({
  name: '张海洋',
  employeeId: 'EMP001',
  department: '技术部',
  position: '软件工程师',
  hireDate: '2023-03-01',
  phone: '13800138000',
  email: 'zhangsan@company.com',
  address: '北京市朝阳区xxx街道xxx号'
})

// å¼¹çª—控制
const showLeaveDialog = ref(false)
const editProfile = ref(false)
const salaryMonth = ref('')

// è¡¨å•æ•°æ®
const leaveForm = reactive({
  type: '',
  startDate: '',
  endDate: '',
  reason: ''
})

const profileForm = reactive({
  name: '',
  phone: '',
  email: '',
  address: ''
})

// æ–°å¢žè€ƒå‹¤è®°å½•ï¼šå¼¹çª—与表单
const showAttendanceDialog = ref(false)
const attendanceFormRef = ref(null)
const attendanceForm = reactive({
  date: '',
  checkIn: '',
  checkOut: '',
  status: '正常'
})
const attendanceRules = {
  date: [{ required: true, message: '请选择日期', trigger: 'change' }],
  checkIn: [{ required: true, message: '请选择签到时间', trigger: 'change' }],
  checkOut: [{ required: true, message: '请选择签退时间', trigger: 'change' }],
  status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// å¤„理导航点击
const handleNavClick = (type) => {
  currentView.value = type
}

// èŽ·å–状态类型
const getStatusType = (status) => {
  const types = {
    '已通过': 'success',
    '审批中': 'warning',
    '已拒绝': 'danger'
  }
  return types[status] || 'info'
}

// æ–°å¢žè€ƒå‹¤è®°å½•ï¼ˆæ‰“开弹窗并预填默认值）
const addAttendanceRecord = () => {
  attendanceForm.date = new Date().toISOString().split('T')[0]
  attendanceForm.checkIn = '09:00'
  attendanceForm.checkOut = '18:00'
  attendanceForm.status = '正常'
  showAttendanceDialog.value = true
}

// è®¡ç®—工时
const computeWorkHours = (inStr, outStr) => {
  const [inH, inM] = inStr.split(':').map(n => parseInt(n, 10))
  const [outH, outM] = outStr.split(':').map(n => parseInt(n, 10))
  const inMin = inH * 60 + inM
  const outMin = outH * 60 + outM
  const diff = Math.max(0, outMin - inMin)
  const h = Math.floor(diff / 60)
  const m = diff % 60
  return m === 0 ? `${h}小时` : `${h}小时${m}分`
}

// æäº¤æ–°å¢žè€ƒå‹¤è®°å½•
const submitAttendance = () => {
  if (!attendanceFormRef.value) return
  attendanceFormRef.value.validate((valid) => {
    if (!valid) return
    const workHours = computeWorkHours(attendanceForm.checkIn, attendanceForm.checkOut)
    const newRecord = {
      date: attendanceForm.date,
      checkIn: attendanceForm.checkIn,
      checkOut: attendanceForm.checkOut,
      workHours,
      status: attendanceForm.status
    }
    attendanceData.value.unshift(newRecord)
    showAttendanceDialog.value = false
    // é‡ç½®è¡¨å•
    attendanceForm.date = ''
    attendanceForm.checkIn = ''
    attendanceForm.checkOut = ''
    attendanceForm.status = '正常'
    ElMessage.success('考勤记录添加成功')
  })
}

// ç¼–辑考勤记录
const editAttendanceRecord = (row) => {
  ElMessage.info('编辑功能开发中...')
}

// åˆ é™¤è€ƒå‹¤è®°å½•
const deleteAttendanceRecord = (index) => {
  attendanceData.value.splice(index, 1)
  ElMessage.success('考勤记录删除成功')
}

// ç¼–辑假期记录
const editLeaveRecord = (row) => {
  ElMessage.info('编辑功能开发中...')
}

// åˆ é™¤å‡æœŸè®°å½•
const deleteLeaveRecord = (index) => {
  leaveData.value.splice(index, 1)
  ElMessage.success('假期记录删除成功')
}

// æäº¤å‡æœŸç”³è¯·
const submitLeaveApplication = () => {
  if (!leaveForm.type || !leaveForm.startDate || !leaveForm.endDate || !leaveForm.reason) {
    ElMessage.warning('请填写完整信息')
    return
  }
  
  const newLeave = {
    type: leaveForm.type,
    startDate: leaveForm.startDate,
    endDate: leaveForm.endDate,
    days: 3, // ç®€å•è®¡ç®—
    reason: leaveForm.reason,
    status: '审批中'
  }
  
  leaveData.value.unshift(newLeave)
  showLeaveDialog.value = false
  
  // é‡ç½®è¡¨å•
  Object.keys(leaveForm).forEach(key => {
    leaveForm[key] = ''
  })
  
  ElMessage.success('假期申请提交成功')
}

// ä¿å­˜ä¸ªäººä¿¡æ¯
const saveProfile = () => {
  Object.assign(profile.value, profileForm)
  editProfile.value = false
  ElMessage.success('个人信息保存成功')
}

// åˆå§‹åŒ–个人信息表单
const initProfileForm = () => {
  Object.assign(profileForm, {
    name: profile.value.name,
    phone: profile.value.phone,
    email: profile.value.email,
    address: profile.value.address
  })
}

// ç›‘听编辑个人信息弹窗
watch(editProfile, (val) => {
  if (val) {
    initProfileForm()
  }
})
</script>

<style scoped>
.self-service-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  color: white;
}

.page-header h2 {
  color: white;
  margin-bottom: 10px;
  font-size: 28px;
  font-weight: 600;
}

.page-header p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 14px;
  margin: 0;
}

.nav-cards {
  margin-bottom: 30px;
}

.nav-card {
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 12px;
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.nav-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.nav-content {
  text-align: center;
  padding: 20px;
}

.nav-icon {
  color: #409EFF;
  margin-bottom: 15px;
}

.nav-content h3 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 18px;
}

.nav-content p {
  margin: 0;
  color: #909399;
  font-size: 14px;
}

.main-content {
  margin-bottom: 30px;
}

.content-card {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border: none;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #303133;
}

/* å“åº”式设计 */
@media (max-width: 768px) {
  .self-service-container {
    padding: 10px;
  }
  
  .nav-cards .el-col {
    margin-bottom: 15px;
  }
  
  .page-header h2 {
    font-size: 24px;
  }
}
</style>