Industrial-image-management-system---web/src/views/system/post/PostAddModal.vue

<template>
  <a-modal
    v-model:visible="visible"
    :title="title"
    :mask-closable="false"
    @before-ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-align="right"
      :label-col-props="{ span: 6 }"
      :wrapper-col-props="{ span: 18 }"
      :disabled="loading"
    >
      <a-form-item field="postName" label="岗位名称" :rules="[{ required: true, message: '请输入岗位名称' }]">
        <a-input v-model="formData.postName" placeholder="请输入岗位名称" allow-clear />
      </a-form-item>
      <a-form-item field="postSort" label="岗位排序" :rules="[{ required: true, message: '请输入岗位排序' }]">
        <a-input-number v-model="formData.postSort" placeholder="请输入岗位排序" allow-clear :min="0" :max="9999" style="width: 100%" />
      </a-form-item>
      <a-form-item field="status" label="岗位状态" :rules="[{ required: true, message: '请选择岗位状态' }]">
        <a-radio-group v-model="formData.status">
          <a-radio :value="1">正常</a-radio>
          <a-radio :value="0">停用</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item field="remark" label="备注">
        <a-textarea v-model="formData.remark" placeholder="请输入备注" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
import { Message } from '@arco-design/web-vue'
import type { Form as FormInstance } from '@arco-design/web-vue'
import { addPost, getPostDetail, updatePost } from '@/apis/system/post'
import type { PostAddReq, PostUpdateReq } from '@/apis/system/type'
import { useLoading } from '@/hooks'

defineOptions({ name: 'PostAddModal' })

const emit = defineEmits(['saveSuccess'])

const title = ref('添加岗位')
const visible = ref(false)
const { loading, setLoading } = useLoading()
const formRef = ref<FormInstance>()
const postId = ref('')

const formData = reactive<PostAddReq | PostUpdateReq>({
  postName: '',
  postSort: 0,
  remark: '',
  status: 1
})

const rules = {
  postName: [{ required: true, message: '请输入岗位名称' }],
  postSort: [{ required: true, message: '请输入岗位排序' }],
  status: [{ required: true, message: '请选择岗位状态' }]
}

// 获取详情
const getDetail = async (id: string) => {
  try {
    setLoading(true)
    const { data } = await getPostDetail(id)
    if (data) {
      Object.assign(formData, {
        ...data,
        status: Number(data.status)
      })
    }
  } finally {
    setLoading(false)
  }
}

// 保存
const handleSubmit = async () => {
  setLoading(true)
  try {
    await formRef.value?.validate()
    if (postId.value) {
      await updatePost(postId.value, formData as PostUpdateReq)
      Message.success('修改成功')
    } else {
      await addPost(formData as PostAddReq)
      Message.success('添加成功')
    }
    handleCancel()
    emit('saveSuccess')
    return Promise.resolve(true)
  } catch (error) {
    return Promise.reject(error)
  } finally {
    setLoading(false)
  }
}

// 取消
const handleCancel = () => {
  formRef.value?.resetFields()
  visible.value = false
  postId.value = ''
}

// 添加
const onAdd = () => {
  title.value = '添加岗位'
  visible.value = true
  postId.value = ''
  formData.status = 1
}

// 修改
const onUpdate = async (id: string) => {
  title.value = '修改岗位'
  visible.value = true
  postId.value = id
  await getDetail(id)
}

defineExpose({
  onAdd,
  onUpdate,
})
</script>