业务画面：<template>
<div class="page-container">
<CustomForm class="project-form" @submit="submitForm">
<h1 class="page-title">项目管理</h1>
<div class="form-grid">
<CustomFormItem label="項目ID:" :error="errors.projectId">
<CustomInput
v-model="ruleForm.projectId"
:disabled="pageMode === 'view' || pageMode === 'edit'"
@blur="validateField('projectId')"
:maxlength="8"
/>
</CustomFormItem>
<CustomFormItem label="項目名称:" :error="errors.projectName">
<CustomInput
v-model="ruleForm.projectName"
:disabled="pageMode === 'view'"
@blur="validateField('projectName')"
:maxlength="10"
/>
</CustomFormItem>
<div class="date-row">
<CustomFormItem label="開始日:" :error="errors.startDate" class="date-item">
<CustomInputDate
v-model="ruleForm.startDate"
:disabled="pageMode === 'view'"
@blur="validateField('startDate')"
/>
</CustomFormItem>
<div class="date-separator">—</div>
<CustomFormItem label="終了日:" :error="errors.endDate" class="date-item">
<CustomInputDate
v-model="ruleForm.endDate"
:disabled="pageMode === 'view'"
@blur="validateField('endDate')"
/>
</CustomFormItem>
</div>
<CustomFormItem label="項目簡介:" :error="errors.projectDescribtion">
<CustomInputTextarea
v-model="ruleForm.projectDescribtion"
:disabled="pageMode === 'view'"
@blur="validateField('projectDescribtion')"
:maxlength="200"
:rows="3"
/>
</CustomFormItem>
</div>
<div class="form-actions">
<button v-if="pageMode === 'default'" type="submit">登録</button>
<button v-if="pageMode === 'edit'" type="submit">更新</button>
<button v-if="pageMode === 'edit' || pageMode === 'default'" type="button" @click="resetForm">重置</button>
</div>
</CustomForm>
</div>
</template>
<
script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import CustomForm from '@/components/zhangaipiao/customForm.vue'
import CustomFormItem from '@/components/zhangaipiao/customFormItem.vue'
import CustomInput from '@/components/zhangaipiao/inputText.vue'
import CustomInputDate from '@/components/zhangaipiao/customInputDate.vue'
import CustomInputTextarea from '@/components/zhangaipiao/customInputTextarea.vue'
import productApi from '@/api/products'
import useUserStore from '@/store/modules/user'
// 获取路由参数
const route = useRoute()
// 存储表单数据的响应式对象
const ruleForm = reactive({
projectId: '',
projectName: '',
projectDescribtion: '',
startDate: '',
endDate: '',
employeeId: '',
})
// 存储字段验证错误信息的响应式对象
const errors = reactive({
projectId: '',
projectName: '',
projectDescribtion: '',
startDate: '',
endDate: '',
})
// 页面模式
const pageMode = ref('default') // default, edit, view
// 单个字段校验函数
const validateField = (fieldName) => {
// 重置该字段的错误信息
errors[fieldName] = ''
switch (fieldName) {
case 'projectId':
if (!ruleForm.projectId) {
errors.projectId = '項目ID称は必須です'
} else if (ruleForm.projectId.length > 8) {
errors.projectId = '項目IDは8文字以内で入力してください'
}
break;
case 'projectName':
if (!ruleForm.projectName.trim()) {
errors.projectName = '項目名称は必須です'
} else if (ruleForm.projectName.trim().length > 10) {
errors.projectName = '項目名称は10文字以内で入力してください'
}
break;
case 'startDate':
if (!ruleForm.startDate) {
errors.startDate = '開始日を選択してください'
} else if (ruleForm.endDate && new Date(ruleForm.startDate) > new Date(ruleForm.endDate)) {
errors.startDate = '開始日は終了日より前でなければなりません'
}
break;
case 'endDate':
if (!ruleForm.endDate) {
errors.endDate = '終了日を選択してください'
} else if (ruleForm.startDate && new Date(ruleForm.endDate) < new Date(ruleForm.startDate)) {
errors.endDate = '終了日は開始日より後でなければなりません'
}
break;
case 'projectDescribtion':
if (!ruleForm.projectDescribtion.trim()) {
errors.projectDescribtion = '項目簡介を入力してください'
} else if (ruleForm.projectDescribtion.trim().length > 200) {
errors.projectDescribtion = '項目簡介は200文字以内で入力してください'
}
}
}
// 整体表单校验
const validateForm = () => {
let valid = true
// 校验所有字段
validateField('projectId')
validateField('projectName')
validateField('startDate')
validateField('endDate')
validateField('projectDescribtion')
// 检查是否有错误
Object.keys(errors).forEach(key => {
if (errors[key]) valid = false
})
return valid
}
// 格式化日期函数
const formatDate = (datetimeStr) => {
if (!datetimeStr) return ''
const date = new Date(datetimeStr)
return isNaN(date.getTime()) ? '' : date.toISOString().split('T')[0]
}
// 在组件挂载时加载数据
onMounted(async () => {
// const projectId = route.params.projectId || route.query.projectId
// const type = route.query.type
// if (type === 'view') {
// pageMode.value = 'view' // 查看模式：不显示按钮
// } else if (type === 'edit') {
// pageMode.value = 'edit' // 编辑模式：显示“更新”、“重置”
// } else {
// pageMode.value = 'default' // 默认模式：显示“登录”、“重置”
// }
const projectId = "123"
if ((pageMode.value === 'edit' || pageMode.value === 'view') && projectId) {
try {
const res = await productApi.getItem(projectId)
Object.assign(ruleForm, res.data) // 填充数据到 ruleForm
ruleForm.startDate = formatDate(res.data.startDate)
ruleForm.endDate = formatDate(res.data.endDate)
} catch (error) {
console.error('获取项目信息失败:', error)
alert('項目情報を取得できませんでした')
}
}
})
// 重置表单
const resetForm = () => {
Object.assign(ruleForm, {
projectId: '',
projectName: '',
projectDescribtion: '',
startDate: '',
endDate: '',
})
Object.keys(errors).forEach(key => errors[key] = '')
}
// 提交表单
const submitForm = async () => {
if (!validateForm()) return
try {
let response
// 获取用户名
const userStore = useUserStore()
const user = userStore.employeeId
ruleForm.employeeId = user
if (pageMode.value === 'edit') {
// 更新操作
response = await productApi.updateItem(ruleForm)
alert('更新成功')
} else {
// 新增操作
response = await productApi.addItem(ruleForm)
alert('登録成功')
}
console.log('API 响应:', response.data)
// 可选：提交成功后跳转页面
// router.push('/project/list')
} catch (error) {
console.error('API 请求失败:', error)
alert('提交失败，请检查网络或输入内容')
}
}
</
script>
<style scoped src="@/assets/styles.css"></style>
form组件：<template>
<div class="custom-card">
<form class="custom-form" @submit.prevent="$emit('submit')">
<slot></slot>
</form>
</div>
</template>
<
script>
export default {
emits: ['submit']
}
</
script>
<style scoped src="@/assets/styles.css"></style> formItem子组件：<template>
<div class="form-item">
<label v-if="label" class="form-label">{{ label }}</label>
<div>
<slot></slot>
<div v-if="error" class="error-message">
{{ error }}
</div>
</div>
</div>
</template>
<
script>
export default {
props: {
label: String,
error: String
}
}
</
script>
<style scoped src="@/assets/styles.css"></style>
input组件：<template>
<div class="input-wrapper">
<input
:type="inputType"
:value="modelValue"
@input="$emit('update:modelValue', $event.target.value)"
class="input-text"
:class="{ error: error }"
:placeholder="placeholder"
/>
<span
v-if="showPassword && type === 'password'"
class="password-toggle"
@click="togglePasswordVisibility"
>
{{ passwordVisible ? '隐藏' : '显示' }}
</span>
</div>
</template>
<
script>
import { ref, computed } from 'vue';
export default {
props: {
modelValue: String,
type: {
type: String,
default: 'text'
},
placeholder: String,
showPassword: Boolean,
error: Boolean
},
emits: ['update:modelValue'],
setup(props) {
const passwordVisible = ref(false);
const inputType = computed(() => {
if (props.type === 'password' && passwordVisible.value) {
return 'text';
}
return props.type;
});
const togglePasswordVisibility = () => {
passwordVisible.value = !passwordVisible.value;
};
return {
passwordVisible,
inputType,
togglePasswordVisibility
};
}
}
</
script>
<style scoped src="@/assets/styles.css"></style>
他们之间是怎么工作的
本文探讨了在HTML中使用<script>标签时，如何正确地使用多行注释以避免浏览器解析错误。通过在注释前添加//解决了兼容性问题。
扫一扫
139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
