lufaneng
/
lift-drawing-wechat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

需求管理加字段

Browse Source
main
Lufaneng 9 months ago
parent 953df000d0
commit 4056ce6bb6
1 changed files with 183 additions and 67 deletions
Show Stats Download Patch File Download Diff File

216
pagesA/add-requirement/add-requirement.vue
Unescape View File

@ -42,7 +42,54 @@
@input="onDescriptionInput" @input="onDescriptionInput"
></uv-textarea> ></uv-textarea>
<view class="char-count">{{ formData.description.length }}/500</view> <view class="char-count">{{ formData.description.length }}/500</view>
<view class="error-text" v-if="errors.description">{{ errors.description }}</view> <view class="error-text" v-if="errors.description">
{{ errors.description }}
</view>
</view>
<view class="form-item">
<view class="form-label">
邮箱
<text class="required">*</text>
</view>
<uv-input
v-model="formData.email"
placeholder="请输入邮箱地址"
:clearable="true"
type="email"
@input="onEmailInput"
></uv-input>
<view class="error-text" v-if="errors.email">{{ errors.email }}</view>
</view>
<view class="form-item">
<view class="form-label">
手机
<text class="required">*</text>
</view>
<uv-input
v-model="formData.phone"
placeholder="请输入手机号"
:clearable="true"
type="number"
:maxlength="11"
@input="onPhoneInput"
></uv-input>
<view class="error-text" v-if="errors.phone">{{ errors.phone }}</view>
</view>
<view class="form-item">
<view class="form-label">联系厂家</view>
<uv-input
v-model="formData.vendor_contact"
placeholder="请输入联系厂家（选填）"
:clearable="true"
:maxlength="100"
@input="onVendorContactInput"
></uv-input>
<view class="error-text" v-if="errors.vendor_contact">
{{ errors.vendor_contact }}
</view>
</view> </view>
</view> </view>
@ -61,117 +108,186 @@
</template> </template>
<script setup> <script setup>
import { ref, computed } from 'vue' import { ref, computed } from "vue";
import { useUserStore } from '@/store' import { useUserStore } from "@/store";
import RPC from '@/utils/request' import RPC from "@/utils/request";
const userStore = useUserStore() const userStore = useUserStore();
// 表单数据 // 表单数据
const formData = ref({ const formData = ref({
name: '', name: "",
description: '' description: "",
}) email: "",
phone: "",
vendor_contact: "",
});
// 错误信息 // 错误信息
const errors = ref({ const errors = ref({
name: '', name: "",
description: '' description: "",
}) email: "",
phone: "",
vendor_contact: "",
});
// 提交状态 // 提交状态
const submitLoading = ref(false) const submitLoading = ref(false);
// 邮箱验证
const validateEmail = (email) => {
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailRegex.test(email);
};
// 手机号验证
const validatePhone = (phone) => {
const phoneRegex = /^1[3-9]\d{9}$/;
return phoneRegex.test(phone);
};
// 表单验证 // 表单验证
const isFormValid = computed(() => { const isFormValid = computed(() => {
return formData.value.name.trim() && formData.value.description.trim() return (
}) formData.value.name.trim() &&
formData.value.description.trim() &&
formData.value.email.trim() &&
formData.value.phone.trim()
);
});
// 输入事件处理 // 输入事件处理
const onNameInput = () => { const onNameInput = () => {
if (errors.value.name) { if (errors.value.name) {
errors.value.name = '' errors.value.name = "";
} }
} };
const onDescriptionInput = () => { const onDescriptionInput = () => {
if (errors.value.description) { if (errors.value.description) {
errors.value.description = '' errors.value.description = "";
} }
} };
const onEmailInput = () => {
if (errors.value.email) {
errors.value.email = "";
}
};
const onPhoneInput = () => {
if (errors.value.phone) {
errors.value.phone = "";
}
};
const onVendorContactInput = () => {
if (errors.value.vendor_contact) {
errors.value.vendor_contact = "";
}
};
// 表单验证函数 // 表单验证函数
const validateForm = () => { const validateForm = () => {
let isValid = true let isValid = true;
// 验证需求名称 // 验证需求名称
if (!formData.value.name.trim()) { if (!formData.value.name.trim()) {
errors.value.name = '请输入需求名称' errors.value.name = "请输入需求名称";
isValid = false isValid = false;
} }
// 验证需求描述 // 验证需求描述
if (!formData.value.description.trim()) { if (!formData.value.description.trim()) {
errors.value.description = '请输入需求描述' errors.value.description = "请输入需求描述";
isValid = false isValid = false;
} }
return isValid // 验证邮箱
} if (!formData.value.email.trim()) {
errors.value.email = "请输入邮箱地址";
isValid = false;
} else if (!validateEmail(formData.value.email.trim())) {
errors.value.email = "请输入正确的邮箱格式";
isValid = false;
}
// 验证手机号
if (!formData.value.phone.trim()) {
errors.value.phone = "请输入手机号";
isValid = false;
} else if (!validatePhone(formData.value.phone.trim())) {
errors.value.phone = "请输入正确的手机号格式";
isValid = false;
}
return isValid;
};
// 提交需求 // 提交需求
const submitRequirement = async () => { const submitRequirement = async () => {
if (!validateForm()) { if (!validateForm()) {
return return;
} }
submitLoading.value = true submitLoading.value = true;
try { try {
const response = await RPC.post('/requirement/create', { const response = await RPC.post("/requirement/create", {
proposer_id: userStore.userInfo.id, proposer_id: userStore.userInfo.id,
proposer: userStore.userInfo.username, proposer: userStore.userInfo.username,
name: formData.value.name.trim(), name: formData.value.name.trim(),
description: formData.value.description.trim() description: formData.value.description.trim(),
}) email: formData.value.email.trim(),
phone: formData.value.phone.trim(),
vendor_contact: formData.value.vendor_contact.trim(),
category:'需求新增'
});
uni.showToast({ uni.showToast({
title: '需求提交成功', title: "需求提交成功",
icon: 'success' icon: "success",
}) });
// 延迟返回上一页 // 延迟返回上一页
setTimeout(() => { setTimeout(() => {
uni.navigateBack() uni.navigateBack();
}, 1500) }, 1500);
} catch (error) { } catch (error) {
console.error('提交需求失败:', error) console.error("提交需求失败:", error);
uni.showToast({ uni.showToast({
title: error.message || '提交失败，请重试', title: error.message || "提交失败，请重试",
icon: 'none' icon: "none",
}) });
} finally { } finally {
submitLoading.value = false submitLoading.value = false;
} }
} };
// 返回上一页 // 返回上一页
const goBack = () => { const goBack = () => {
if (formData.value.name.trim() || formData.value.description.trim()) { const hasContent =
formData.value.name.trim() ||
formData.value.description.trim() ||
formData.value.email.trim() ||
formData.value.phone.trim() ||
formData.value.vendor_contact.trim();
if (hasContent) {
uni.showModal({ uni.showModal({
title: '提示', title: "提示",
content: '您有未保存的内容，确定要离开吗？', content: "您有未保存的内容，确定要离开吗？",
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
uni.navigateBack() uni.navigateBack();
} }
} },
}) });
} else { } else {
uni.navigateBack() uni.navigateBack();
} }
} };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

Write Preview
Loading…
Cancel
Save