sc

src/views/Kpi/Appraise/Components/DialogAppraise.vue

@@ -0,0 +1,183 @@
+<template>
+  <Dialog :title="title" v-model="show" width="800px">
+    <el-form v-loading="formLoading" :model="form" ref="formRef" :rules="rules" label-width="80px">
+      <el-row :gutter="20">
+        <el-col :span="24" :offset="0">
+          <el-form-item label="考核指标" prop="name">
+            <el-input v-model="form.name" placeholder="请输入" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="12" :offset="0">
+          <el-form-item label="权重" prop="rate">
+            <el-input-number v-model="form.rate" :min="0" :step="1" :controls="false" />
+          </el-form-item>
+        </el-col>
+        <el-col :span="12" :offset="0">
+          <el-form-item label="评分上限" prop="maxScore">
+            <el-input-number v-model="form.maxScore" :min="0" :step="1" :controls="false" />
+          </el-form-item>
+        </el-col>
+      </el-row>
+
+      <el-row :gutter="20">
+        <el-col :span="24" :offset="0">
+          <el-form-item label="考核内容" prop="kaoheneirong">
+            <Editor
+              v-model:modelValue="form.kaoheneirong"
+              height="150px"
+              :toolbarConfig="{
+                toolbarKeys: []
+              }"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24" :offset="0">
+          <el-form-item label="考核规则" prop="kaoheguize">
+            <Editor
+              v-model:modelValue="form.kaoheguize"
+              height="150px"
+              :toolbarConfig="{ toolbarKeys: [] }"
+              style="width: 100%"
+            />
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
+        <el-col :span="24" :offset="0">
+          <el-form-item label="考核员工" prop="checkEmployees">
+            <div>
+              <el-checkbox
+                v-model="checkAll"
+                :indeterminate="isIndeterminate"
+                @change="handleCheckAllChange"
+              >
+                全选
+              </el-checkbox>
+              <el-checkbox-group v-model="form.checkEmployees" @change="handleCheckedChange">
+                <el-checkbox
+                  v-for="item in employeeOptions"
+                  :key="item.id"
+                  :label="item.id"
+                  :value="item.id"
+                >
+                  {{ item.name }}
+                </el-checkbox>
+              </el-checkbox-group>
+            </div>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <template #footer>
+      <span>
+        <el-button @click="show = false">取 消</el-button>
+        <el-button type="primary" :disabled="formLoading" @click="handleSave">保 存</el-button>
+      </span>
+    </template>
+  </Dialog>
+</template>
+
+<script setup name="DialogAppraise">
+import * as ResourceApi from '@/api/system/library/resource'
+
+const { t } = useI18n() // 国际化
+const message = useMessage() // 消息弹窗
+
+const show = ref(false)
+const title = ref('')
+const formType = ref('create')
+
+const form = ref({})
+const formLoading = ref(false)
+const rules = ref({
+  name: { required: true, message: '标题不可为空', trigger: 'blur' },
+  kaoheneirong: { required: true, message: '标题不可为空', trigger: 'blur' },
+  kaoheguize: { required: true, message: '标题不可为空', trigger: 'blur' }
+})
+
+async function open(type, val) {
+  show.value = true
+  title.value = type == 'update' ? '修改考核项' : '新增考核项'
+  formType.value = type
+  resetForm()
+  if (val?.id) {
+    formLoading.value = true
+    try {
+      form.value = await ResourceApi.getResource(id)
+    } finally {
+      formLoading.value = false
+    }
+  } else if (val.name) {
+    form.value = { ...val }
+  }
+  const checkedCount = form.value.checkEmployees?.length || 0
+  isIndeterminate.value = checkedCount > 0 && checkedCount < employeeOptions.value.length
+}
+
+function resetForm() {
+  form.value = {
+    name: '',
+    rate: 0,
+    kaoheneirong: ``,
+    kaoheguize: ``,
+    maxScore: 5,
+    checkEmployees: []
+  }
+}
+
+defineExpose({ open }) // 提供 open 方法，用于打开弹窗
+
+const formRef = ref()
+
+/** 提交表单 */
+const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
+async function handleSave() {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    if (formType.value === 'create') {
+      // await ResourceApi.createResource(form.value)
+      message.success(t('common.createSuccess'))
+    } else {
+      // await ResourceApi.updateResource(form.value)
+      message.success(t('common.updateSuccess'))
+    }
+    show.value = false
+    // 发送操作成功的事件
+    emit('success', form.value)
+  } finally {
+    formLoading.value = false
+  }
+}
+
+const checkAll = ref(false)
+const isIndeterminate = ref(false)
+const employeeOptions = ref([
+  { id: 1, name: '武大郎' },
+  { id: 2, name: '李二郎' },
+  { id: 3, name: '拼命三郎' },
+  { id: 4, name: '杨四郎' }
+])
+
+function handleCheckAllChange(val) {
+  form.value.checkEmployees = val ? employeeOptions.value.map((it) => it.id) : []
+  isIndeterminate.value = false
+}
+
+function handleCheckedChange(value) {
+  const checkedCount = value.length
+  checkAll.value = checkedCount === employeeOptions.value.length
+  isIndeterminate.value = checkedCount > 0 && checkedCount < employeeOptions.value.length
+}
+</script>
+
+<style lang="scss" scoped></style>