ss-oa-manage-web/src/views/Kpi/Score/index.vue

<template>
  <div>
    <!-- 搜索工作栏 -->
    <el-form :model="searchForm" inline label-width="0">
      <el-form-item>
        <el-date-picker
          v-model="searchForm.peroid"
          type="month"
          format="YYYY-MM"
          value-format="YYYY-MM"
          :clearable="false"
          style="width: 100%"
        />
      </el-form-item>
      <el-form-item>
        <el-button @click="getList" v-hasPermi="['kpi:score:search']"> 搜索</el-button>
      </el-form-item>
    </el-form>
    <el-tabs v-model="searchForm.employeeId" @tab-click="getList">
      <el-tab-pane
        v-for="item in employeeOptions"
        :key="item.id"
        :label="item.name"
        :name="item.id"
      >
        <div class="mb-10px">
          <el-tag v-if="peroidSaved" type="danger"> 当前周期已封存，不可修改当月绩效考核 </el-tag>
          <el-tag v-else type="warning">
            当前周期未封存，可选择修改当月绩效考核，两秒内不操作将自动保存考核结果
          </el-tag>
        </div>

        <el-table
          v-loading="loading"
          :data="list"
          border
          show-summary
          :summary-method="getSummaries"
        >
          <el-table-column prop="name" label="考核指标" width="180" />
          <el-table-column prop="rate" label="权重%" width="90" />
          <el-table-column label="考核内容">
            <template #default="{ row }">
              <div v-dompurify-html="row.kaoheneirong"></div>
            </template>
          </el-table-column>
          <el-table-column label="考核规则" prop="kaoheguize">
            <template #default="{ row }">
              <div v-dompurify-html="row.kaoheguize"></div>
            </template>
          </el-table-column>
          <el-table-column label="评分上限" prop="maxScore" width="90" />
          <el-table-column label="考核评分" width="120">
            <template #default="{ row }">
              <div v-if="peroidSaved">{{ row.score }}</div>
              <el-input-number
                v-else
                v-model="row.score"
                :min="0"
                :max="row.maxScore"
                :step="1"
                :controls="false"
                size="small"
                style="width: 100%"
                @input="handleSave(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="评分备注" width="200">
            <template #default="{ row }">
              <div v-if="peroidSaved">{{ row.remark }}</div>
              <el-input
                v-else
                v-model="row.remark"
                type="textarea"
                :rows="3"
                size="small"
                style="width: 100%"
                @input="handleSave(row)"
              />
            </template>
          </el-table-column>
          <el-table-column label="加权得分" prop="jiaquandefen" width="90" />
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup name="KpiScore">
import { formatDate } from '@/utils/formatTime'

const message = useMessage() // 消息弹窗
const loading = ref(false) // 列表的加载中
const list = ref() // 列表的数据
const searchForm = ref({
  peroid: undefined,
  employeeId: undefined
})

const peroidSaved = ref(true)

const employeeOptions = ref([
  { id: 1, name: '武大郎' },
  { id: 2, name: '李二郎' },
  { id: 3, name: '拼命三郎' },
  { id: 4, name: '杨四郎' }
  // { id: 11, name: '武大郎' },
  // { id: 21, name: '李二郎' },
  // { id: 31, name: '拼命三郎' },
  // { id: 41, name: '杨四郎' },
  // { id: 12, name: '武大郎' },
  // { id: 22, name: '李二郎' },
  // { id: 32, name: '拼命三郎' },
  // { id: 42, name: '杨四郎' },
  // { id: 13, name: '武大郎' },
  // { id: 23, name: '李二郎' },
  // { id: 33, name: '拼命三郎' },
  // { id: 43, name: '杨四郎' }
])

onMounted(() => {
  // 取上个月
  const today = new Date()
  searchForm.value.peroid = formatDate(
    new Date(today.getFullYear(), today.getMonth() - 1),
    'YYYY-MM'
  )
  if (employeeOptions.value.length > 0) {
    searchForm.value.employeeId = employeeOptions.value[0].id
  }

  getList()
})

async function getList() {
  if (!searchForm.value.employeeId) {
    message.error('当月无待考核员工！！！')
    return
  }

  loading.value = true
  try {
    const data = [
      {
        name: '纳税申报',
        rate: 40,
        kaoheneirong:
          '<p>1、每个月13号之前在柠檬云财税把上个月的财务数据录入系统出具财务报表；</p><p>2、社保和公积金及时增减人员，做好核定工作，及时申报缴纳；</p><p>3、按照税务局规定时间把自己所负责的公司增指税、附加税、所得税以及其他税种申报完成</p>',
        kaoheguize: `当天处理完今日线索，连续2天未处理完，一次扣2分，最多扣5分`,
        maxScore: 20,
        score: 10,
        checkEmployees: [1, 3, 4],
        jiaquandefen: 4
      },
      {
        name: '数据统计',
        rate: 20,
        kaoheneirong:
          '<p>1、每个月13号之前在柠檬云财税把上个月的财务数据录入系统出具财务报表；</p><p>2、社保和公积金及时增减人员，做好核定工作，及时申报缴纳；</p><p>3、按照税务局规定时间把自己所负责的公司增指税、附加税、所得税以及其他税种申报完成</p>',
        kaoheguize: `当天处理完今日线索，连续2天未处理完，一次扣2分，最多扣5分`,
        maxScore: 10,
        score: 8,
        checkEmployees: [1, 3, 4],
        jiaquandefen: 1.6
      }
    ]
    list.value = data
    peroidSaved.value = !peroidSaved.value
  } finally {
    loading.value = false
  }
}

let timer = ref(null)
function handleSave() {
  clearTimeout(timer.value)
  timer.value = setTimeout(() => {
    message.success('正在保存数据，请稍后')
  }, 2000)
}

function getSummaries({ columns, data }) {
  let sums = []
  columns.forEach((column, index) => {
    if (index == 0) {
      sums[index] = '考核总分'
      return
    }
    const values = data.map((item) => Number(item[column.property]))
    if (!values.every((value) => Number.isNaN(value))) {
      if (column.property == 'jiaquandefen') {
        sums[index] = 5.6
      } else {
        sums[index] = ''
      }
    } else {
      sums[index] = ''
    }
  })
  return sums
}
</script>

<style lang="scss" scoped></style>