初始化移动端提交

This commit is contained in:
chenbowen
2025-09-30 00:08:23 +08:00
parent 08784ca8f3
commit f2ffc65094
406 changed files with 55626 additions and 93 deletions

View File

@@ -0,0 +1,202 @@
<template>
<view class="form-container">
<u-form :model="formData" ref="formRef" :rules="rules" label-width="180rpx">
<u-form-item label="合同编号" prop="code">
<u-input v-model="formData.code" placeholder="请输入合同编号" />
</u-form-item>
<u-form-item label="合同名称" prop="name">
<u-input v-model="formData.name" placeholder="请输入合同名称" />
</u-form-item>
<u-form-item label="合同状态" prop="status">
<u-picker
v-model="formData.status"
:range="statusOptions"
range-key="text"
@change="onStatusChange"
>
<u-input
v-model="statusText"
disabled
placeholder="请选择合同状态"
suffix-icon="arrow-down"
/>
</u-picker>
</u-form-item>
<u-form-item label="签订日期" prop="signDate">
<uni-datetime-picker v-model="formData.signDate" type="date" />
</u-form-item>
<u-form-item label="合同开始日期" prop="startDate">
<uni-datetime-picker v-model="formData.startDate" type="date" />
</u-form-item>
<u-form-item label="合同结束日期" prop="endDate">
<uni-datetime-picker v-model="formData.endDate" type="date" />
</u-form-item>
<u-form-item label="合同金额" prop="amount">
<u-input v-model="formData.amount" placeholder="请输入合同金额" type="number" />
</u-form-item>
<u-form-item label="备注" prop="remark">
<u-textarea v-model="formData.remark" placeholder="请输入备注" />
</u-form-item>
<u-form-item label="岗位ID" prop="postId">
<u-input v-model="formData.postId" placeholder="请输入岗位ID" />
</u-form-item>
<!-- TODO: 附件上传 -->
</u-form>
<u-button
type="primary"
@click="submit"
class="submit-btn"
:loading="submitting"
:disabled="submitting"
>提交</u-button>
</view>
</template>
<script setup>
import { ref, reactive, computed, toRaw } from 'vue'
import DemoContractApi from '@/sheep/api/infra/democontract'
import { onLoad } from '@dcloudio/uni-app'
const formType = ref('create')
const formData = reactive({
id: undefined,
code: '',
name: '',
status: 0,
signDate: '',
startDate: '',
endDate: '',
amount: undefined,
remark: '',
postId: ''
})
const statusOptions = [
{ value: 0, text: '草稿' },
{ value: 1, text: '审核中' },
{ value: 2, text: '已通过' },
{ value: 3, text: '已拒绝' }
]
const statusText = computed(() => {
const option = statusOptions.find(item => item.value === formData.status)
return option ? option.text : '请选择合同状态'
})
const rules = {
code: [{ required: true, message: '合同编号不能为空', trigger: 'blur' }],
name: [{ required: true, message: '合同名称不能为空', trigger: 'blur' }],
amount: [{ required: true, message: '合同金额不能为空', trigger: 'blur' }],
postId: [{ required: true, message: '岗位ID不能为空', trigger: 'blur' }]
}
const formRef = ref(null)
const submitting = ref(false)
const formTitle = computed(() => {
return formType.value === 'create' ? '新增合同' : '修改合同'
})
onLoad((options) => {
if (options.type) {
formType.value = options.type
}
if (options.id) {
getDemo(options.id)
}
})
const getDemo = async (id) => {
const res = await DemoContractApi.getDemoContract(id)
if (!res || res.code !== 0) {
return
}
const data = res.data || {}
formData.id = data.id
formData.code = data.code || ''
formData.name = data.name || ''
formData.status = Number.isNaN(Number(data.status)) ? 0 : Number(data.status)
formData.signDate = data.signDate || ''
formData.startDate = data.startDate || ''
formData.endDate = data.endDate || ''
formData.amount = data.amount !== undefined && data.amount !== null ? String(data.amount) : ''
formData.remark = data.remark || ''
formData.postId = data.postId !== undefined && data.postId !== null ? String(data.postId) : ''
}
const onStatusChange = (e) => {
formData.status = statusOptions[e.detail.value].value
}
const validateForm = async () => {
if (!formRef.value || typeof formRef.value.validate !== 'function') {
throw new Error('表单未准备就绪')
}
try {
await formRef.value.validate()
return true
} catch (error) {
throw error
}
}
const buildPayload = () => {
const raw = toRaw(formData)
const payload = {
...raw,
status: Number(raw.status)
}
if (Number.isNaN(payload.status)) {
payload.status = 0
}
if (payload.amount !== undefined && payload.amount !== null && payload.amount !== '') {
const amountNumber = Number(payload.amount)
payload.amount = Number.isNaN(amountNumber) ? payload.amount : amountNumber
}
if (formType.value === 'create') {
delete payload.id
}
return payload
}
const submit = async () => {
if (submitting.value) {
return
}
try {
await validateForm()
} catch (error) {
return
}
const payload = buildPayload()
const apiFn = formType.value === 'create' ? DemoContractApi.createDemoContract : DemoContractApi.updateDemoContract
submitting.value = true
try {
const result = await apiFn(payload)
if (!result || result.code !== 0) {
return
}
uni.showToast({
title: formType.value === 'create' ? '新增成功' : '修改成功',
icon: 'success'
})
setTimeout(() => {
uni.navigateBack()
}, 600)
} finally {
submitting.value = false
}
}
</script>
<style lang="scss" scoped>
.form-container {
padding: 30rpx;
background: #fff;
}
.submit-btn {
margin-top: 30rpx;
}
</style>

View File

@@ -0,0 +1,192 @@
<template>
<view class="app-container">
<!-- 搜索工作栏 -->
<view class="search-section">
<u-search
placeholder="请输入合同名称"
v-model="queryParams.name"
:show-action="true"
action-text="搜索"
@custom="handleQuery"
@search="handleQuery"
></u-search>
<!-- 高级搜索 -->
<view class="advanced-search" v-if="showAdvanced">
<u-form :model="queryParams" label-width="120rpx">
<u-form-item label="合同编号">
<u-input v-model="queryParams.code" placeholder="请输入合同编号" />
</u-form-item>
<u-form-item label="合同金额">
<u-input v-model="queryParams.amount" placeholder="请输入合同金额" type="number" />
</u-form-item>
</u-form>
</view>
<view class="search-toggle">
<u-button type="info" size="small" @click="showAdvanced = !showAdvanced">
{{ showAdvanced ? '收起' : '高级搜索' }}
</u-button>
</view>
</view>
<!-- 操作工具栏 -->
<view class="action-bar">
<u-button type="primary" icon="plus" text="新增" @click="openForm('create')"></u-button>
</view>
<!-- 列表 -->
<u-list @scrolltolower="scrolltolower">
<u-list-item v-for="item in list" :key="item.id">
<u-cell :title="item.name" :label="item.code">
<template #value>
<view class="item-info">
<text class="info-text">状态: {{ getStatusText(item.status) }}</text>
<text class="info-text">金额: ¥{{ item.amount || 0 }}</text>
<text class="info-text" v-if="item.signDate">签订: {{ sheep.$helper.timeFormat(item.signDate, 'yyyy-mm-dd') }}</text>
</view>
</template>
<template #right-icon>
<view class="action-buttons">
<u-button type="primary" size="mini" @click="openForm('update', item.id)">编辑</u-button>
<u-button type="error" size="mini" @click="handleDelete(item.id)">删除</u-button>
</view>
</template>
</u-cell>
</u-list-item>
<u-loadmore :status="status" />
</u-list>
</view>
</template>
<script setup>
import sheep from '@/sheep'
import { ref, reactive, onMounted } from 'vue'
import DemoContractApi from '@/sheep/api/infra/democontract'
import { onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
const loading = ref(false)
const total = ref(0)
const list = ref([])
const showAdvanced = ref(false)
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
code: '',
name: '',
status: '',
signDate: [],
startDate: [],
endDate: [],
amount: '',
remark: '',
postId: ''
})
const status = ref('loadmore')
const getList = async () => {
loading.value = true
status.value = 'loading'
try {
const { data } = await DemoContractApi.getDemoContractPage(queryParams)
if (queryParams.pageNo === 1) {
list.value = data.list
} else {
list.value = list.value.concat(data.list)
}
total.value = data.total
if (list.value.length >= total.value) {
status.value = 'nomore'
} else {
status.value = 'loadmore'
}
} finally {
loading.value = false
uni.stopPullDownRefresh()
}
}
const handleQuery = () => {
queryParams.pageNo = 1
getList()
}
const openForm = (type, id) => {
let url = `/pages/app/democontract/form?type=${type}`
if (id) {
url += `&id=${id}`
}
uni.navigateTo({ url })
}
const handleDelete = async (id) => {
const [err, res] = await uni.showModal({
title: '提示',
content: '确定要删除吗?'
})
if (res && res.confirm) {
await DemoContractApi.deleteDemoContract(id)
uni.showToast({ title: '删除成功' })
handleQuery() // 重新加载列表
}
}
const getStatusText = (status) => {
// 根据实际状态值进行映射,这里需要根据字典或枚举值调整
const statusMap = {
0: '草稿',
1: '审核中',
2: '已通过',
3: '已拒绝'
}
return statusMap[status] || '未知'
}
const scrolltolower = () => {
if (status.value === 'loadmore') {
queryParams.pageNo++
getList()
}
}
onMounted(() => {
getList()
})
onPullDownRefresh(() => {
handleQuery()
})
onReachBottom(() => {
scrolltolower()
})
</script>
<style lang="scss" scoped>
.search-wrap {
padding: 20rpx;
background: #fff;
}
.action-bar {
padding: 20rpx;
}
.list-wrap {
.list-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20rpx;
background: #fff;
border-bottom: 1rpx solid #eee;
}
.item-title {
font-size: 30rpx;
font-weight: bold;
}
.item-desc {
font-size: 26rpx;
color: #999;
margin-top: 10rpx;
}
}
</style>