xiaoyi
5 天以前 27c8277d717b34b55f3ea967027b53b067f77df3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<script lang="ts" setup>
import type { HrmPerformanceAppraiseApi } from '#/api/hrm/performance-appraise';
 
import { ref } from 'vue';
 
import { useVbenModal } from '@vben/common-ui';
 
import { message } from 'ant-design-vue';
 
import {
  getAppraiseItemList,
  saveAppraiseItems,
} from '#/api/hrm/performance-appraise';
 
const emit = defineEmits(['success']);
 
const appraiseId = ref<number>();
const items = ref<HrmPerformanceAppraiseApi.AppraiseItem[]>([]);
 
const SCORER_TYPE_OPTIONS = [
  { label: '自评', value: 1 },
  { label: '上级评', value: 2 },
];
 
function addRow() {
  items.value.push({
    itemName: '',
    weight: undefined,
    scoringStandard: '',
    scorerType: 1,
    sort: items.value.length + 1,
  });
}
 
function removeRow(index: number) {
  items.value.splice(index, 1);
  items.value.forEach((item, idx) => {
    item.sort = idx + 1;
  });
}
 
const [Modal, modalApi] = useVbenModal({
  async onConfirm() {
    // 校验:指标名称与权重必填
    const invalid = items.value.some(
      (item) => !item.itemName || item.weight == null,
    );
    if (invalid) {
      message.warning('请填写完整的指标名称与权重');
      return;
    }
    modalApi.lock();
    try {
      await saveAppraiseItems({ appraiseId: appraiseId.value!, items: items.value });
      await modalApi.close();
      emit('success');
      message.success('指标保存成功');
    } finally {
      modalApi.unlock();
    }
  },
  async onOpenChange(isOpen: boolean) {
    if (!isOpen) {
      appraiseId.value = undefined;
      items.value = [];
      return;
    }
    const data = modalApi.getData<{ id: number }>();
    appraiseId.value = data?.id;
    modalApi.lock();
    try {
      items.value = await getAppraiseItemList(appraiseId.value!);
    } finally {
      modalApi.unlock();
    }
  },
});
</script>
 
<template>
  <Modal title="配置考核指标" class="w-3/4">
    <div class="mb-3 flex items-center justify-between">
      <span class="text-sm text-gray-500">设置考核指标名称、权重与评分标准,权重合计建议 100</span>
      <a-button type="primary" @click="addRow">添加指标</a-button>
    </div>
    <a-table
      :data-source="items"
      :pagination="false"
      :scroll="{ y: 360 }"
      bordered
      row-key="sort"
      size="small"
    >
      <a-table-column title="指标名称" width="220">
        <template #default="{ record }">
          <a-input
            v-model:value="record.itemName"
            placeholder="请输入指标名称"
          />
        </template>
      </a-table-column>
      <a-table-column title="权重" width="120">
        <template #default="{ record }">
          <a-input-number
            v-model:value="record.weight"
            :min="0"
            :precision="2"
            class="!w-full"
            placeholder="权重"
          />
        </template>
      </a-table-column>
      <a-table-column title="评分标准" min-width="220">
        <template #default="{ record }">
          <a-input
            v-model:value="record.scoringStandard"
            placeholder="请输入评分标准"
          />
        </template>
      </a-table-column>
      <a-table-column title="评分人" width="120">
        <template #default="{ record }">
          <a-select
            v-model:value="record.scorerType"
            :options="SCORER_TYPE_OPTIONS"
            class="!w-full"
          />
        </template>
      </a-table-column>
      <a-table-column title="排序" width="90">
        <template #default="{ record }">
          <a-input-number
            v-model:value="record.sort"
            :min="1"
            :precision="0"
            class="!w-full"
          />
        </template>
      </a-table-column>
      <a-table-column title="操作" width="80" align="center">
        <template #default="{ index }">
          <a-button type="link" danger @click="removeRow(index)">删除</a-button>
        </template>
      </a-table-column>
    </a-table>
  </Modal>
</template>