132 lines
3.5 KiB
Vue
132 lines
3.5 KiB
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> |