wms-antdvue/src/views/system/user/sendMsg.vue
2024-12-19 15:33:04 +08:00

80 lines
2.0 KiB
Vue

<template>
<a-modal v-model:visible="props.visible" title="发送消息" width="600px" @cancel="dialogClose">
<a-form :model="formData" :label-col="{ style: { width: '10-0px' } }" ref="formRef">
<a-form-item
label="消息内容"
name="message"
:rules="{ required: true, message: '请输入消息内容', trigger: 'blur' }"
>
<a-textarea v-model:value="formData.message" rows="4" />
</a-form-item>
</a-form>
<template #footer>
<span class="dialog-footer">
<a-button @click="dialogClose">取消</a-button>
<a-button :loading="subLoading" type="primary" @click="submit"> 确定 </a-button>
</span>
</template>
</a-modal>
</template>
<script lang="ts" setup>
import { sendMsg } from '@/api/system/user';
import { useUserStore } from '@/store/modules/user';
import { onMounted, reactive, ref } from 'vue';
import { useLockFn } from '@/utils/useLockFn';
import { message } from 'ant-design-vue';
/**
* 定义参数
*/
const userStore = useUserStore();
const userInfo: object = userStore.getUserInfo || {};
const emit = defineEmits(['update:visible']);
const formRef = ref();
/**
* 定义接收的参数
*/
const props = defineProps({
visible: {
type: Boolean,
required: true,
default: false,
},
receiveId: {
type: String,
default: '',
},
});
/**
* 定义表单参数
*/
const formData = reactive({
message: '',
});
/**
* 关闭窗体
*/
const dialogClose = () => {
emit('update:visible', false);
};
/**
* 执行提交表单数据
*/
const handleSubmit = async () => {
await formRef.value?.validate();
await sendMsg({
formId: userInfo.id,
receiveId: props.receiveId,
message: formData.message,
});
message.success('发送成功');
emit('update:visible', false);
};
const { isLock: subLoading, lockFn: submit } = useLockFn(handleSubmit);
</script>