Industrial-image-management-system---web/src/views/performance/components/RuleDrawer.vue

<template>
  <a-drawer
    v-model:visible="visible"
    :title="isUpdate ? '编辑细则' : '新增细则'"
    :width="480"
    @before-ok="handleSave"
    @cancel="reset"
  >
    <a-form ref="formRef" :model="form" auto-label-width>
      <a-form-item label="所属维度" field="dimensionId" required>
        <a-select v-model="form.dimensionId" placeholder="请选择维度">
          <a-option
            v-for="item in dimensionOptions"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          />
        </a-select>
      </a-form-item>

      <a-form-item label="细则名称" field="name" required>
        <a-input v-model="form.name" placeholder="如：持有基础资质证书" />
      </a-form-item>

      <a-form-item label="评分规则描述" field="ruleDesc" required>
        <a-textarea
          v-model="form.ruleDesc"
          :rows="4"
          placeholder="详细说明评分标准"
        />
      </a-form-item>

      <a-form-item label="满分" field="score" required>
        <a-input-number v-model="form.score" :min="0" :precision="0" />
      </a-form-item>

      <a-form-item label="权重" field="weight" required>
        <a-input-number v-model="form.weight" :min="0" :max="100" />
      </a-form-item>

      <a-form-item label="是否加分项" field="isExtra">
        <a-switch v-model="form.isExtra" />
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref } from 'vue'
import { Message } from '@arco-design/web-vue'
import {
  addRule,
  getDimensionList,
  getRuleDetail,
  updateRule,
} from '@/apis/performance'
import type { DimensionResp, RuleAddReq, RuleUpdateReq } from '@/apis/performance/type'

const emit = defineEmits<{
  (e: 'success'): void
}>()

const visible = ref(false)
const isUpdate = ref(false)
const id = ref('')
const formRef = ref()
const dimensionOptions = ref<DimensionResp[]>([])

const form = reactive<RuleAddReq>({
  dimensionId: '',
  name: '',
  ruleDesc: '',
  score: 100,
  weight: 10,
  isExtra: false,
})

const reset = () => {
  formRef.value?.resetFields()
  Object.assign(form, {
    dimensionId: '',
    name: '',
    ruleDesc: '',
    score: 100,
    weight: 10,
    isExtra: false,
  })
  id.value = ''
}

const openAdd = () => {
  reset()
  isUpdate.value = false
  visible.value = true
}

const openUpdate = async (ruleId: string) => {
  reset()
  isUpdate.value = true
  id.value = ruleId
  const detail = await getRuleDetail(ruleId)
  Object.assign(form, detail)
  visible.value = true
}

const handleSave = async () => {
  const ok = await formRef.value?.validate()
  if (ok) return false

  try {
    if (isUpdate.value) {
      await updateRule(id.value, form as RuleUpdateReq)
      Message.success('细则已更新')
    } else {
      await addRule(form)
      Message.success('细则已新增')
    }
    visible.value = false
    emit('success')
    return true
  } catch {
    return false
  }
}

onMounted(async () => {
  dimensionOptions.value = await getDimensionList()
})

defineExpose({ openAdd, openUpdate })
</script>