初始化移动端提交
This commit is contained in:
202
pages/app/democontract/form.vue
Normal file
202
pages/app/democontract/form.vue
Normal 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>
|
||||
192
pages/app/democontract/index.vue
Normal file
192
pages/app/democontract/index.vue
Normal 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>
|
||||
Reference in New Issue
Block a user