Files
im-uniapp/pages/workbench/feedback/create.vue
2025-08-20 13:44:05 +08:00

161 lines
3.2 KiB
Vue

<template>
<view class="message-add-page">
<button class="save-btn" @click="handleAddFeedback">
<text>保存</text>
</button>
<!-- 表单内容 -->
<view class="form-container">
<uni-forms
ref="formRef"
:model="form"
:rules="rules"
labelPosition="left"
>
<uni-forms-item
label="标题"
name="title"
required
>
<uni-easyinput
v-model="form.title"
placeholder="请输入标题"
></uni-easyinput>
</uni-forms-item>
<uni-forms-item
label="项目"
name="projectId"
>
<oa-project-select
v-model="form.projectId"
></oa-project-select>
</uni-forms-item>
<uni-forms-item
label="内容"
name="content"
required
>
<uni-easyinput
v-model="form.content"
type="textarea"
placeholder="请输入反馈内容"
:height="200"
></uni-easyinput>
</uni-forms-item>
</uni-forms>
</view>
</view>
</template>
<script>
import { addFeedback } from "@/api/oa/feedback";
export default {
data() {
return {
// 表单数据
form: {
title: "",
content: "",
projectId: null,
},
// 表单校验规则
rules: {
title: [
{ required: true, message: "请输入标题", trigger: "blur" },
{ min: 2, max: 50, message: "标题长度在 2 到 50 个字符", trigger: "blur" },
],
content: [
{ required: true, message: "请输入反馈内容", trigger: "blur" },
],
}
};
},
methods: {
// 提交新增反馈
handleAddFeedback() {
this.$refs.formRef.validate().then(() => {
addFeedback(this.form)
.then(() => {
uni.showToast({
title: "反馈新增成功!",
icon: "success"
});
// 返回列表页
setTimeout(() => {
uni.navigateBack();
}, 1500);
})
.catch(err => {
uni.showToast({
title: err.message || "新增失败",
icon: "none"
});
});
}).catch(err => {
console.log('表单验证失败:', err);
});
},
// 返回上一页
navigateBack() {
uni.navigateBack();
}
}
};
</script>
<style scoped>
.message-add-page {
background-color: #f5f5f5;
min-height: 100vh;
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
height: 44px;
padding: 0 15px;
background-color: #3e7bfa;
color: #fff;
}
.back-btn {
background-color: transparent;
border: none;
color: #fff;
padding: 5px 10px;
}
.title {
font-size: 18px;
font-weight: bold;
}
.save-btn {
background-color: transparent;
border: none;
color: #fff;
padding: 5px 10px;
font-size: 16px;
}
.form-container {
padding: 15px;
background-color: #fff;
margin: 10px;
border-radius: 8px;
}
.uni-forms {
--label-width: 80px;
}
.uni-forms-item {
margin-bottom: 15px;
}
</style>