请假扣款配置新增/删除按钮权限控制，请假类型下拉选择

liu

14 小时以前 602d3975198790f467d7c77d103902c7d3a218b7

请假扣款配置新增/删除按钮权限控制，请假类型下拉选择

 src/api/hrm/leave-type-config/index.ts

@@ -22,7 +22,17 @@
  );
}

/** 新增请假类型配置 */
export function createLeaveTypeConfig(data: HrmLeaveTypeConfigApi.LeaveTypeConfig) {
  return requestClient.post<number>('/hrm/leave-type-config/create', data);
}

/** 更新请假类型配置 */
export function updateLeaveTypeConfig(data: HrmLeaveTypeConfigApi.LeaveTypeConfig) {
  return requestClient.put('/hrm/leave-type-config/update', data);
}

/** 删除请假类型配置 */
export function deleteLeaveTypeConfig(id: number) {
  return requestClient.delete(`/hrm/leave-type-config/delete?id=${id}`);
}

 src/views/hrm/salary/leave-type-config/data.ts

@@ -3,7 +3,7 @@
import type { HrmLeaveTypeConfigApi } from '#/api/hrm/leave-type-config';

/** 表单类型 */
export type FormType = 'update';
export type FormType = 'create' | 'update';

/** 新增/修改请假扣款配置的表单 */
export function useFormSchema(): VbenFormSchema[] {
@@ -17,13 +17,29 @@
      },
    },
    {
      fieldName: 'name',
      fieldName: 'leaveType',
      label: '请假类型',
      component: 'Input',
      component: 'Select',
      componentProps: {
        disabled: true,
        placeholder: '',
        options: [
          { label: '事假', value: 1 },
          { label: '病假', value: 2 },
          { label: '年假', value: 3 },
          { label: '婚假', value: 4 },
          { label: '产假', value: 5 },
          { label: '丧假', value: 6 },
        ],
        placeholder: '请选择请假类型',
        style: { width: '100%' },
      },
      dependencies: {
        triggerFields: ['id'],
        // 编辑时不允许修改请假类型
        componentProps: (values: Record<string, unknown>) => ({
          disabled: Boolean(values.id),
        }),
      },
      rules: 'required',
      formItemClass: 'col-span-2',
    },
    {
@@ -47,6 +63,7 @@
      fieldName: 'status',
      label: '状态',
      component: 'RadioGroup',
      defaultValue: 0,
      componentProps: {
        options: [
          { label: '启用', value: 0 },

 src/views/hrm/salary/leave-type-config/index.vue

@@ -7,7 +7,10 @@
import { message, Tag } from 'ant-design-vue';

import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { getLeaveTypeConfigList } from '#/api/hrm/leave-type-config';
import {
  deleteLeaveTypeConfig,
  getLeaveTypeConfigList,
} from '#/api/hrm/leave-type-config';
import { $t } from '#/locales';

import { useGridColumns } from './data';
@@ -23,9 +26,21 @@
  gridApi.query();
}

/** 新增配置 */
function handleCreate() {
  formModalApi.setData({ formType: 'create' }).open();
}

/** 编辑配置 */
function handleEdit(row: HrmLeaveTypeConfigApi.LeaveTypeConfig) {
  formModalApi.setData({ id: row.id, row }).open();
  formModalApi.setData({ formType: 'update', row }).open();
}

/** 删除配置 */
async function handleDelete(row: HrmLeaveTypeConfigApi.LeaveTypeConfig) {
  await deleteLeaveTypeConfig(row.id!);
  message.success($t('ui.actionMessage.deleteSuccess', ['请假扣款配置']));
  handleRefresh();
}

const [Grid, gridApi] = useVbenVxeGrid({
@@ -56,6 +71,19 @@
  <Page auto-content-height>
    <FormModal @success="handleRefresh" />
    <Grid table-title="请假扣款配置列表">
      <template #toolbar-tools>
        <TableAction
          :actions="[
            {
              label: $t('ui.actionTitle.create', ['请假扣款配置']),
              type: 'primary',
              icon: ACTION_ICON.ADD,
              auth: ['hrm:leave-type-config:create'],
              onClick: handleCreate,
            },
          ]"
        />
      </template>
      <template #deductionRatio="{ row }">
        <Tag :color="row.deductionRatio === 0 ? 'success' : row.deductionRatio === 1 ? 'error' : 'warning'">
          {{ row.deductionRatio === 0 ? '不扣款' : `${(row.deductionRatio * 100).toFixed(0)}%` }}
@@ -76,6 +104,17 @@
              auth: ['hrm:leave-type-config:update'],
              onClick: handleEdit.bind(null, row),
            },
            {
              label: $t('common.delete'),
              type: 'link',
              danger: true,
              icon: ACTION_ICON.DELETE,
              auth: ['hrm:leave-type-config:delete'],
              popConfirm: {
                title: $t('ui.actionMessage.deleteConfirm', ['请假扣款配置']),
                confirm: handleDelete.bind(null, row),
              },
            },
          ]"
        />
      </template>

 src/views/hrm/salary/leave-type-config/modules/form.vue

@@ -1,19 +1,28 @@
<script lang="ts" setup>
import type { FormType } from '../data';
import type { HrmLeaveTypeConfigApi } from '#/api/hrm/leave-type-config';

import { ref } from 'vue';
import { computed, ref } from 'vue';

import { useVbenModal } from '#/packages/effects/common-ui/src';

import { message } from 'ant-design-vue';

import { useVbenForm } from '#/adapter/form';
import { updateLeaveTypeConfig } from '#/api/hrm/leave-type-config';
import {
  createLeaveTypeConfig,
  updateLeaveTypeConfig,
} from '#/api/hrm/leave-type-config';
import { $t } from '#/locales';

import { useFormSchema } from '../data';

const emit = defineEmits(['success']);
const formType = ref<FormType>('create');

const getTitle = computed(() =>
  formType.value === 'update' ? '编辑扣款比例' : '新增请假扣款配置',
);

const [Form, formApi] = useVbenForm({
  commonConfig: {
@@ -36,11 +45,35 @@
      return;
    }
    modalApi.lock();
    const data = await formApi.getValues();
    const data = (await formApi.getValues()) as HrmLeaveTypeConfigApi.LeaveTypeConfig;
    // 转换比例为小数
    data.deductionRatio = data.deductionRatio / 100;
    const deductionRatio = data.deductionRatio! / 100;
    try {
      await updateLeaveTypeConfig(data);
      if (formType.value === 'update') {
        await updateLeaveTypeConfig({
          id: data.id,
          deductionRatio,
          remark: data.remark,
          status: data.status,
        });
      } else {
        // 请假类型名称由所选类型自动带出，无需手动填写
        const NAME_MAP: Record<number, string> = {
          1: '事假',
          2: '病假',
          3: '年假',
          4: '婚假',
          5: '产假',
          6: '丧假',
        };
        await createLeaveTypeConfig({
          leaveType: data.leaveType,
          name: NAME_MAP[data.leaveType!] ?? '',
          deductionRatio,
          remark: data.remark,
          status: data.status,
        });
      }
      await modalApi.close();
      emit('success');
      message.success($t('ui.actionMessage.operationSuccess'));
@@ -52,16 +85,24 @@
    if (!isOpen) {
      return;
    }
    const data = modalApi.getData<{ id: number; row: HrmLeaveTypeConfigApi.LeaveTypeConfig }>();
    const data = modalApi.getData<{ formType: FormType; row: HrmLeaveTypeConfigApi.LeaveTypeConfig }>();
    formType.value = data.formType;
    if (data.formType === 'create' || !data.row) {
      await formApi.resetForm();
      return;
    }
    // 转换比例为百分比显示
    const row = { ...data.row, deductionRatio: (data.row.deductionRatio || 0) * 100 };
    const row = {
      ...data.row,
      deductionRatio: (data.row.deductionRatio || 0) * 100,
    };
    await formApi.setValues(row);
  },
});
</script>

<template>
  <Modal title="编辑扣款比例" class="w-[600px]">
  <Modal :title="getTitle" class="w-[600px]">
    <Form class="mx-4" />
  </Modal>
</template>