feat: 移动端新增项目添加项目编码和项目类型字段
This commit is contained in:
zhangjf
parent
ff9f4d05ad
commit
f87ee0b51d
@ -4,6 +4,15 @@
|
||||
|
||||
<van-form @submit="onSubmit">
|
||||
<van-cell-group inset>
|
||||
<van-field
|
||||
v-model="form.projectCode"
|
||||
name="projectCode"
|
||||
label="项目编码"
|
||||
placeholder="请输入项目编码"
|
||||
:rules="[{ required: true, message: '请输入项目编码' }]"
|
||||
required
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="form.projectName"
|
||||
name="projectName"
|
||||
@ -20,20 +29,22 @@
|
||||
name="customer"
|
||||
label="关联客户"
|
||||
placeholder="请选择客户"
|
||||
:rules="[{ required: true, message: '请选择客户' }]"
|
||||
required
|
||||
@click="showCustomerPicker = true"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="form.contractAmount"
|
||||
name="contractAmount"
|
||||
label="合同金额"
|
||||
type="number"
|
||||
placeholder="请输入合同金额"
|
||||
>
|
||||
<template #button>
|
||||
<span>元</span>
|
||||
</template>
|
||||
</van-field>
|
||||
v-model="projectTypeText"
|
||||
is-link
|
||||
readonly
|
||||
name="projectType"
|
||||
label="项目类型"
|
||||
placeholder="请选择类型"
|
||||
:rules="[{ required: true, message: '请选择项目类型' }]"
|
||||
required
|
||||
@click="showTypePicker = true"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="form.budgetAmount"
|
||||
@ -58,23 +69,30 @@
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="statusText"
|
||||
v-model="form.endDate"
|
||||
is-link
|
||||
readonly
|
||||
name="status"
|
||||
label="项目状态"
|
||||
placeholder="请选择状态"
|
||||
@click="showStatusPicker = true"
|
||||
name="endDate"
|
||||
label="结束日期"
|
||||
placeholder="请选择日期"
|
||||
@click="showEndPicker = true"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="form.description"
|
||||
name="description"
|
||||
label="项目描述"
|
||||
v-model="form.projectManager"
|
||||
name="projectManager"
|
||||
label="项目经理"
|
||||
placeholder="请输入项目经理"
|
||||
/>
|
||||
|
||||
<van-field
|
||||
v-model="form.remark"
|
||||
name="remark"
|
||||
label="备注"
|
||||
type="textarea"
|
||||
rows="2"
|
||||
autosize
|
||||
placeholder="请输入项目描述"
|
||||
placeholder="请输入备注"
|
||||
/>
|
||||
</van-cell-group>
|
||||
|
||||
@ -85,6 +103,15 @@
|
||||
</div>
|
||||
</van-form>
|
||||
|
||||
<!-- 项目类型选择器 -->
|
||||
<van-popup v-model:show="showTypePicker" position="bottom" round>
|
||||
<van-picker
|
||||
:columns="projectTypeOptions"
|
||||
@confirm="onTypeConfirm"
|
||||
@cancel="showTypePicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- 开始日期选择器 -->
|
||||
<van-popup v-model:show="showStartPicker" position="bottom" round>
|
||||
<van-date-picker
|
||||
@ -94,12 +121,12 @@
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
<!-- 状态选择器 -->
|
||||
<van-popup v-model:show="showStatusPicker" position="bottom" round>
|
||||
<van-picker
|
||||
:columns="statusOptions"
|
||||
@confirm="onStatusConfirm"
|
||||
@cancel="showStatusPicker = false"
|
||||
<!-- 结束日期选择器 -->
|
||||
<van-popup v-model:show="showEndPicker" position="bottom" round>
|
||||
<van-date-picker
|
||||
v-model="selectedEndDate"
|
||||
@confirm="onEndDateConfirm"
|
||||
@cancel="showEndPicker = false"
|
||||
/>
|
||||
</van-popup>
|
||||
|
||||
@ -123,18 +150,21 @@ import { createProject, getCustomerList } from '@/api'
|
||||
const router = useRouter()
|
||||
const submitting = ref(false)
|
||||
const showStartPicker = ref(false)
|
||||
const showStatusPicker = ref(false)
|
||||
const showEndPicker = ref(false)
|
||||
const showTypePicker = ref(false)
|
||||
const showCustomerPicker = ref(false)
|
||||
|
||||
const form = ref({
|
||||
projectCode: '',
|
||||
projectName: '',
|
||||
customerId: null as number | null,
|
||||
customerName: '',
|
||||
contractAmount: '',
|
||||
projectType: '',
|
||||
budgetAmount: '',
|
||||
startDate: '',
|
||||
status: 'preparing',
|
||||
description: ''
|
||||
endDate: '',
|
||||
projectManager: '',
|
||||
remark: ''
|
||||
})
|
||||
|
||||
const selectedStartDate = ref([
|
||||
@ -143,29 +173,40 @@ const selectedStartDate = ref([
|
||||
new Date().getDate().toString().padStart(2, '0')
|
||||
])
|
||||
|
||||
const statusOptions = [
|
||||
{ text: '筹备中', value: 'preparing' },
|
||||
{ text: '进行中', value: 'ongoing' },
|
||||
{ text: '已完成', value: 'completed' },
|
||||
{ text: '已归档', value: 'archived' },
|
||||
{ text: '已取消', value: 'cancelled' }
|
||||
const selectedEndDate = ref([
|
||||
new Date().getFullYear().toString(),
|
||||
(new Date().getMonth() + 1).toString().padStart(2, '0'),
|
||||
new Date().getDate().toString().padStart(2, '0')
|
||||
])
|
||||
|
||||
const projectTypeOptions = [
|
||||
{ text: '开发项目', value: '开发项目' },
|
||||
{ text: '运维项目', value: '运维项目' },
|
||||
{ text: '咨询项目', value: '咨询项目' },
|
||||
{ text: '集成项目', value: '集成项目' },
|
||||
{ text: '其他项目', value: '其他项目' }
|
||||
]
|
||||
|
||||
const statusText = computed(() => {
|
||||
const item = statusOptions.find(s => s.value === form.value.status)
|
||||
const projectTypeText = computed(() => {
|
||||
const item = projectTypeOptions.find(t => t.value === form.value.projectType)
|
||||
return item?.text || ''
|
||||
})
|
||||
|
||||
const customerOptions = ref<{ text: string; value: number }[]>([])
|
||||
|
||||
const onTypeConfirm = ({ selectedOptions }: any) => {
|
||||
form.value.projectType = selectedOptions[0].value
|
||||
showTypePicker.value = false
|
||||
}
|
||||
|
||||
const onStartDateConfirm = ({ selectedValues }: any) => {
|
||||
form.value.startDate = selectedValues.join('-')
|
||||
showStartPicker.value = false
|
||||
}
|
||||
|
||||
const onStatusConfirm = ({ selectedOptions }: any) => {
|
||||
form.value.status = selectedOptions[0].value
|
||||
showStatusPicker.value = false
|
||||
const onEndDateConfirm = ({ selectedValues }: any) => {
|
||||
form.value.endDate = selectedValues.join('-')
|
||||
showEndPicker.value = false
|
||||
}
|
||||
|
||||
const onCustomerConfirm = ({ selectedOptions }: any) => {
|
||||
@ -187,21 +228,35 @@ const loadOptions = async () => {
|
||||
}
|
||||
|
||||
const onSubmit = async () => {
|
||||
if (!form.value.projectCode) {
|
||||
showFailToast('请输入项目编码')
|
||||
return
|
||||
}
|
||||
if (!form.value.projectName) {
|
||||
showFailToast('请输入项目名称')
|
||||
return
|
||||
}
|
||||
if (!form.value.customerId) {
|
||||
showFailToast('请选择客户')
|
||||
return
|
||||
}
|
||||
if (!form.value.projectType) {
|
||||
showFailToast('请选择项目类型')
|
||||
return
|
||||
}
|
||||
|
||||
submitting.value = true
|
||||
try {
|
||||
await createProject({
|
||||
projectCode: form.value.projectCode,
|
||||
projectName: form.value.projectName,
|
||||
customerId: form.value.customerId,
|
||||
contractAmount: form.value.contractAmount ? parseFloat(form.value.contractAmount) : null,
|
||||
projectType: form.value.projectType,
|
||||
budgetAmount: form.value.budgetAmount ? parseFloat(form.value.budgetAmount) : null,
|
||||
startDate: form.value.startDate || null,
|
||||
status: form.value.status,
|
||||
description: form.value.description
|
||||
endDate: form.value.endDate || null,
|
||||
projectManager: form.value.projectManager || null,
|
||||
remark: form.value.remark || null
|
||||
})
|
||||
showSuccessToast('提交成功')
|
||||
router.back()
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user