146 lines
3.8 KiB
Vue
146 lines
3.8 KiB
Vue
<template>
|
|
<view class="form-page">
|
|
<view class="form-nav">
|
|
<van-nav-bar
|
|
:title="mode === 'create' ? '新增业务' : '编辑业务'"
|
|
left-arrow
|
|
:border="false"
|
|
@click-left="goBack"
|
|
/>
|
|
</view>
|
|
|
|
<view class="form-section-title">基础信息</view>
|
|
<van-cell-group inset>
|
|
<van-field
|
|
v-model="form.name"
|
|
label="名称"
|
|
placeholder="请输入名称"
|
|
required
|
|
/>
|
|
<van-field
|
|
v-model="form.code"
|
|
label="业务单号"
|
|
placeholder="系统自动生成或手工录入"
|
|
/>
|
|
<van-field
|
|
v-model="form.typeLabel"
|
|
label="类型"
|
|
placeholder="请选择类型"
|
|
is-link
|
|
readonly
|
|
@click="showType = true"
|
|
/>
|
|
<van-cell title="加急">
|
|
<template #right-icon>
|
|
<van-switch v-model="form.urgent" size="20px" active-color="#22c55e" />
|
|
</template>
|
|
</van-cell>
|
|
</van-cell-group>
|
|
|
|
<view class="form-section-title">业务详情</view>
|
|
<van-cell-group inset>
|
|
<van-field v-model="form.owner" label="负责人" placeholder="请输入负责人" />
|
|
<van-field v-model="form.date" label="业务日期" placeholder="YYYY-MM-DD" />
|
|
<van-field
|
|
v-model="form.amount"
|
|
type="digit"
|
|
label="金额"
|
|
placeholder="0.00"
|
|
/>
|
|
<van-field
|
|
v-model="form.remark"
|
|
label="备注"
|
|
type="textarea"
|
|
placeholder="选填，最多 200 字"
|
|
maxlength="200"
|
|
show-word-limit
|
|
autosize
|
|
/>
|
|
</van-cell-group>
|
|
|
|
<view class="form-tip">必填项校验失败时 Toast 提示。底栏固定「取消 / 保存」。</view>
|
|
|
|
<view class="form-footer">
|
|
<van-button class="btn-flex" plain hairline type="default" @click="goBack">取消</van-button>
|
|
<van-button class="btn-flex" type="primary" color="#22c55e" round @click="onSave">
|
|
保存
|
|
</van-button>
|
|
</view>
|
|
|
|
<van-action-sheet
|
|
v-model:show="showType"
|
|
:actions="typeActions"
|
|
cancel-text="取消"
|
|
@select="onTypeSelect"
|
|
@cancel="showType = false"
|
|
/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { getById } from '../../utils/biz-mock.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
mode: 'create',
|
|
showType: false,
|
|
typeActions: [
|
|
{ name: '采集协议' },
|
|
{ name: '样本接收' },
|
|
{ name: '质检工单' },
|
|
{ name: '出库申请' }
|
|
],
|
|
form: {
|
|
name: '',
|
|
code: '',
|
|
typeLabel: '',
|
|
urgent: false,
|
|
owner: '张三',
|
|
date: '',
|
|
amount: '',
|
|
remark: ''
|
|
}
|
|
}
|
|
},
|
|
onLoad(query) {
|
|
this.mode = query.mode === 'edit' ? 'edit' : 'create'
|
|
if (this.mode === 'edit' && query.id) {
|
|
const item = getById(query.id)
|
|
this.form = {
|
|
name: item.title,
|
|
code: item.code,
|
|
typeLabel: item.typeLabel,
|
|
urgent: item.tagType === 'danger',
|
|
owner: item.owner,
|
|
date: '2026-08-10',
|
|
amount: (item.amount || '').replace(/,/g, ''),
|
|
remark: item.desc
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
goBack() {
|
|
uni.navigateBack({
|
|
fail: () => uni.reLaunch({ url: '/pages/demo/list' })
|
|
})
|
|
},
|
|
onTypeSelect(action) {
|
|
this.form.typeLabel = action.name
|
|
this.showType = false
|
|
},
|
|
onSave() {
|
|
if (!this.form.name || !String(this.form.name).trim()) {
|
|
uni.showToast({ title: '请填写名称', icon: 'none' })
|
|
return
|
|
}
|
|
uni.showToast({
|
|
title: this.mode === 'create' ? '已保存（新增）' : '已保存（编辑）',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(() => this.goBack(), 500)
|
|
}
|
|
}
|
|
}
|
|
</script>
|