ss-oa-manage-web/src/views/Kpi/Appraise/Components/DialogAppraise.vue

<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>