ss-oa-manage-web/src/views/Finance/Salary/Comp/DialogSalary.vue

<template>
  <Dialog v-model="dialogVisible" :title="dialogTitle" style="width: 600px">
    <el-form :model="formData" ref="formRef" :rules="rules" label-width="80px">
      <el-form-item label="生效日期" prop="startDate">
        <el-date-picker
          v-model="formData.startDate"
          type="date"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          placeholder="选择日期时间"
        />
      </el-form-item>
      <el-divider direction="horizontal" content-position="left">应发</el-divider>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="基本工资" prop="baseSalary">
            <el-input-number v-model="formData.baseSalary" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="绩效(%)">
            <el-input-number v-model="formData.meritsRate" :min="0" :max="100" :controls="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="提成方案" prop="planId">
            <el-select v-model="formData.planId" placeholder="请选择" filterable clearable>
              <el-option
                v-for="item in planOptions"
                :key="item.percentageId"
                :label="item.percentageName"
                :disabled="item.status == 1"
                :value="item.percentageId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="补贴" prop="allowanceSalary">
            <el-input-number v-model="formData.allowanceSalary" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="满勤" prop="fullWorkSalary">
            <el-input-number v-model="formData.fullWorkSalary" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="奖金" prop="rewardSalary">
            <el-input-number v-model="formData.rewardSalary" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="其他应发" prop="extraSalary">
            <el-input-number v-model="formData.extraSalary" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-divider direction="horizontal" content-position="left">应扣</el-divider>
      <el-row :gutter="20">
        <!-- <el-col :span="12" :offset="0">
          <el-form-item label="绩效">
            <el-input placeholder="生成后录入" disabled />
          </el-form-item>
        </el-col> -->
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="社保" prop="socialDeduct">
            <el-input-number v-model="formData.socialDeduct" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="公积金" prop="accumulationFundDeduct">
            <el-input-number v-model="formData.accumulationFundDeduct" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="税额">
            <el-input placeholder="自动计算" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="考勤">
            <el-input placeholder="自动计算" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="其他应扣" prop="extraDeduct">
            <el-input-number v-model="formData.extraDeduct" :min="0" :controls="false" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <template #footer>
      <span>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button :disabled="formLoading" type="primary" @click="submitForm">保存</el-button>
      </span>
    </template>
  </Dialog>
</template>

<script setup name="DialogSalarySetting">
import * as SalaryApi from '@/api/finance/salary'
import { getPlanSimpleList } from '@/api/finance/plan'

const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('工资条设置')
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用

const formData = ref({})

const rules = {
  startDate: { required: true, message: '生效日期不可为空', trigger: 'blur, change' },
  baseSalary: { required: true, message: '基本工资不可为空', trigger: 'blur' }
}

/** 打开弹窗 */
const open = async (row) => {
  dialogVisible.value = true
  dialogTitle.value = `工资条设置-【${row.name}】`
  getOptions()
  formLoading.value = true
  try {
    const data = await SalaryApi.getSalaryDetail(row.id)
    if (!data) {
      resetForm(row.id)
    } else {
      formData.value = { ...data }
    }
  } finally {
    formLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

const planOptions = ref([])
function getOptions() {
  getPlanSimpleList().then((data) => {
    planOptions.value = data
  })
}

/** 重置表单 */
const resetForm = (id) => {
  formData.value = {
    employeeId: id,
    baseSalary: 0,
    planId: undefined,
    rewardSalary: 0,
    allowanceSalary: 0,
    fullWorkSalary: 0,
    extraSalary: 0,
    socialDeduct: 0,
    accumulationFundDeduct: 0,
    meritsSalary: 0,
    extraDeduct: 0,
    meritsRate: 0
  }
  formRef.value?.resetFields()
}

const emit = defineEmits(['success'])
const formRef = ref()
const submitForm = async () => {
  // 校验表单
  if (!formRef.value) return
  const valid = await formRef.value.validate()
  if (!valid) return
  // 提交请求
  formLoading.value = true
  try {
    const data = { ...formData.value }
    await SalaryApi.updateSalary(data)
    message.success('配置成功')
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}
</script>

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