业务画面：<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="model
Value"
@input="$emit('update:model
Value', $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: {
model
Value: String,
type: {
type: String,
default: 'text'
},
placeholder: String,
showPassword: Boolean,
error: Boolean
},
emits: ['update:model
Value'],
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>
他们之间是怎么工作的
本文探讨了.NET中值类型(value type)与引用类型(reference type)的共同点及不同之处。两者均可通过gcnew分配在CLR堆上，也能声明于栈中。然而，特定的.NET内置引用类型如String不能直接声明于栈上。此外，值类型拥有默认的复制构造函数，而引用类型则没有，并且值类型仅能继承接口，引用类型则可以继承接口与其他引用类型。
扫一扫
778
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
