260720
This commit is contained in:
892
pages/gxmu/form.vue
Normal file
892
pages/gxmu/form.vue
Normal file
@@ -0,0 +1,892 @@
|
||||
<template>
|
||||
<view v-if="formConfig" class="page">
|
||||
<scroll-view scroll-y class="page-scroll">
|
||||
<common-hero :title="pageTitle" :use-image-bg="true"></common-hero>
|
||||
<view class="hero-wrap">
|
||||
<view class="hero-card">
|
||||
<view class="hero-title">{{ pageTitle }}</view>
|
||||
<view class="hero-desc">{{ moduleMeta && moduleMeta.desc ? moduleMeta.desc : '按模块维护申报记录，支持新增、编辑和提交。' }}</view>
|
||||
<view class="hero-actions">
|
||||
<view class="hero-action" @tap="openCreate">立即申报</view>
|
||||
<view class="hero-action hero-action--secondary" @tap="loadData">刷新列表</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-if="loading" class="state-card">
|
||||
<view class="state-title">正在加载申报记录...</view>
|
||||
</view>
|
||||
<view v-else-if="!list.length" class="state-card">
|
||||
<view class="state-title">暂无申报记录</view>
|
||||
<view class="state-desc">点击上方“立即申报”开始填写当前模块。</view>
|
||||
</view>
|
||||
<view v-else class="card-list">
|
||||
<view v-for="item in list" :key="item.id" class="data-card" @tap="openEdit(item)">
|
||||
<view class="card-top">
|
||||
<view>
|
||||
<view class="card-title">{{ getRecordTitle(item) }}</view>
|
||||
<view class="card-subtitle">{{ getRecordSubtitle(item) }}</view>
|
||||
</view>
|
||||
<view class="card-year">{{ item.year || fixedYear || '-' }}</view>
|
||||
</view>
|
||||
<view class="meta-line">{{ getRecordMeta(item) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view v-if="showEdit" class="modal-mask" @tap="closeEdit">
|
||||
<view class="modal-panel" @tap.stop>
|
||||
<view class="modal-head">
|
||||
<view class="modal-title">{{ formData.id ? `编辑${pageTitle}` : `新增${pageTitle}` }}</view>
|
||||
<view class="modal-close" @tap="closeEdit">关闭</view>
|
||||
</view>
|
||||
|
||||
<scroll-view scroll-y class="modal-body">
|
||||
<view class="hero-meta hero-meta--form">
|
||||
<view class="meta-item meta-item--form">
|
||||
<view class="meta-label meta-label--form">申报年度</view>
|
||||
<view class="meta-value meta-value--form">{{ fixedYear || formData.year || '-' }}</view>
|
||||
</view>
|
||||
<view class="meta-item meta-item--form">
|
||||
<view class="meta-label meta-label--form">草稿状态</view>
|
||||
<view class="meta-value meta-value--form">{{ draftSavedAt ? '已保存' : '未保存' }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view v-for="section in formConfig.sections" :key="section.title" class="section-card">
|
||||
<view class="section-head">
|
||||
<view class="section-title">{{ section.title }}</view>
|
||||
</view>
|
||||
<view class="field-list">
|
||||
<view v-for="field in section.fields" :key="field.key" class="field-item">
|
||||
<view class="field-label">
|
||||
{{ field.label }}
|
||||
<text v-if="field.required" class="field-required">*</text>
|
||||
</view>
|
||||
|
||||
<textarea
|
||||
v-if="field.type === 'textarea'"
|
||||
class="field-textarea"
|
||||
:placeholder="field.placeholder"
|
||||
:maxlength="-1"
|
||||
:value="formData[field.key]"
|
||||
@input="handleInput(field, $event)"
|
||||
/>
|
||||
|
||||
<view
|
||||
v-else-if="isGenderField(field)"
|
||||
class="field-picker"
|
||||
@tap="openGenderPicker(field)"
|
||||
>
|
||||
<text :class="formData[field.key] ? 'field-value' : 'field-placeholder'">
|
||||
{{ formData[field.key] || field.placeholder }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-else-if="isNationField(field)"
|
||||
class="field-item-picker-wrap"
|
||||
>
|
||||
<picker
|
||||
mode="selector"
|
||||
:range="nationLabels"
|
||||
:value="getNationIndex(field)"
|
||||
:disabled="!nationOptions.length"
|
||||
@change="handleNationPickerChange(field, $event)"
|
||||
>
|
||||
<view class="field-picker" :class="{ 'field-picker--disabled': !nationOptions.length }">
|
||||
<text :class="formData[field.key] ? 'field-value' : 'field-placeholder'">
|
||||
{{ formData[field.key] || (nationOptions.length ? '请选择民族' : '民族加载中') }}
|
||||
</text>
|
||||
</view>
|
||||
</picker>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-else-if="isUvPickerField(field)"
|
||||
class="field-picker"
|
||||
:class="{ 'field-picker--disabled': isPickerFieldDisabled(field) }"
|
||||
@tap="openSelectPicker(field)"
|
||||
>
|
||||
<text :class="formData[field.key] ? 'field-value' : 'field-placeholder'">
|
||||
{{ getPickerDisplayText(field) }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<view
|
||||
v-else-if="isDateField(field)"
|
||||
class="field-picker"
|
||||
@tap="openDatePicker(field)"
|
||||
>
|
||||
<text :class="formData[field.key] ? 'field-value' : 'field-placeholder'">
|
||||
{{ formData[field.key] || getDatePlaceholder(field) }}
|
||||
</text>
|
||||
</view>
|
||||
|
||||
<uv-input
|
||||
v-else
|
||||
class="field-input"
|
||||
:modelValue="formData[field.key]"
|
||||
:type="getInputType(field)"
|
||||
:placeholder="field.placeholder"
|
||||
placeholder-style="color: #c0c4cc;"
|
||||
:maxlength="-1"
|
||||
@input="setFieldValue(field.key, $event)"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<view class="modal-actions">
|
||||
<view class="ghost-btn" @tap="saveDraft">保存草稿</view>
|
||||
<view class="primary-btn" @tap="submitForm">提交申报</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-else class="empty-page">
|
||||
<common-hero :title="pageTitle || '申报表'" :use-image-bg="true"></common-hero>
|
||||
<view class="empty-body">
|
||||
<view class="empty-title">未找到对应表单</view>
|
||||
<view class="empty-desc">请返回上一页重新选择申报模块。</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uv-picker
|
||||
ref="genderPicker"
|
||||
title="选择性别"
|
||||
:columns="genderPickerColumns"
|
||||
:defaultIndex="[genderPickerIndex]"
|
||||
keyName="text"
|
||||
@close="noop"
|
||||
@cancel="noop"
|
||||
@confirm="confirmGenderPicker"
|
||||
></uv-picker>
|
||||
|
||||
<uv-picker
|
||||
ref="selectPicker"
|
||||
:title="selectPickerTitle"
|
||||
:columns="selectPickerColumns"
|
||||
:defaultIndex="[selectPickerIndex]"
|
||||
keyName="text"
|
||||
@close="noop"
|
||||
@cancel="noop"
|
||||
@confirm="confirmSelectPicker"
|
||||
></uv-picker>
|
||||
|
||||
<uv-picker
|
||||
ref="datePicker"
|
||||
:title="datePickerTitle"
|
||||
:columns="datePickerColumns"
|
||||
:defaultIndex="datePickerIndexs"
|
||||
keyName="text"
|
||||
@change="handleDatePickerChange"
|
||||
@cancel="noop"
|
||||
@confirm="confirmDatePicker"
|
||||
></uv-picker>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import CommonHero from '../../components/common-hero/common-hero.vue'
|
||||
import { createInitialFormData, getFormConfig, getModuleMeta } from '../../utils/gxmu/config'
|
||||
import {
|
||||
addSjqnForm,
|
||||
addSjtbzbsjForm,
|
||||
addWshqtwForm,
|
||||
addWshqtzbForm,
|
||||
addYxgqtdgbForm,
|
||||
addYxgqtyForm,
|
||||
getSjqnForm,
|
||||
getSjtbzbsjForm,
|
||||
getWshqtwForm,
|
||||
getWshqtzbForm,
|
||||
getYxgqtdgbForm,
|
||||
getYxgqtyForm,
|
||||
listDictData,
|
||||
updateSjqnForm,
|
||||
updateSjtbzbsjForm,
|
||||
updateWshqtwForm,
|
||||
updateWshqtzbForm,
|
||||
updateYxgqtdgbForm,
|
||||
updateYxgqtyForm,
|
||||
userPageSjqnForm,
|
||||
userPageSjtbzbsjForm,
|
||||
userPageWshqtwForm,
|
||||
userPageWshqtzbForm,
|
||||
userPageYxgqtdgbForm,
|
||||
userPageYxgqtyForm
|
||||
} from './module-form-service'
|
||||
|
||||
const STORAGE_PREFIX = 'gxmu_form_draft_'
|
||||
const POLITICS_DICT_ID = 172
|
||||
const NATION_DICT_ID = 173
|
||||
const MODULE_API_MAP = {
|
||||
gxmu_sjqn: {
|
||||
get: getSjqnForm,
|
||||
add: addSjqnForm,
|
||||
update: updateSjqnForm,
|
||||
page: userPageSjqnForm
|
||||
},
|
||||
gxmu_sjtbzbsj: {
|
||||
get: getSjtbzbsjForm,
|
||||
add: addSjtbzbsjForm,
|
||||
update: updateSjtbzbsjForm,
|
||||
page: userPageSjtbzbsjForm
|
||||
},
|
||||
gxmu_wshqtw: {
|
||||
get: getWshqtwForm,
|
||||
add: addWshqtwForm,
|
||||
update: updateWshqtwForm,
|
||||
page: userPageWshqtwForm
|
||||
},
|
||||
gxmu_wshqtzb: {
|
||||
get: getWshqtzbForm,
|
||||
add: addWshqtzbForm,
|
||||
update: updateWshqtzbForm,
|
||||
page: userPageWshqtzbForm
|
||||
},
|
||||
gxmu_yxgqtdgb: {
|
||||
get: getYxgqtdgbForm,
|
||||
add: addYxgqtdgbForm,
|
||||
update: updateYxgqtdgbForm,
|
||||
page: userPageYxgqtdgbForm
|
||||
},
|
||||
gxmu_yxgqty: {
|
||||
get: getYxgqtyForm,
|
||||
add: addYxgqtyForm,
|
||||
update: updateYxgqtyForm,
|
||||
page: userPageYxgqtyForm
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
components: {
|
||||
CommonHero
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
moduleCode: '',
|
||||
moduleMeta: null,
|
||||
formConfig: null,
|
||||
formData: {},
|
||||
draftSavedAt: '',
|
||||
fixedYear: '',
|
||||
declareTitle: '',
|
||||
nationOptions: [],
|
||||
politicsOptions: [],
|
||||
recordId: '',
|
||||
loading: false,
|
||||
showEdit: false,
|
||||
list: [],
|
||||
genderFieldKey: '',
|
||||
genderPickerColumns: [[]],
|
||||
selectFieldKey: '',
|
||||
selectPickerTitle: '',
|
||||
selectPickerColumns: [[]],
|
||||
dateFieldKey: '',
|
||||
datePickerTitle: '',
|
||||
datePickerColumns: [[]],
|
||||
datePickerIndexs: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pageTitle() {
|
||||
return this.declareTitle || (this.formConfig ? this.formConfig.title : '申报表')
|
||||
},
|
||||
nationLabels() {
|
||||
return this.nationOptions
|
||||
},
|
||||
genderPickerIndex() {
|
||||
const options = (this.genderPickerColumns[0] || []).map((item) => item.value)
|
||||
const index = options.indexOf(this.formData[this.genderFieldKey])
|
||||
return index > -1 ? index : 0
|
||||
},
|
||||
selectPickerIndex() {
|
||||
const options = (this.selectPickerColumns[0] || []).map((item) => item.value)
|
||||
const index = options.indexOf(this.formData[this.selectFieldKey])
|
||||
return index > -1 ? index : 0
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
const code = options.code || ''
|
||||
const config = getFormConfig(code)
|
||||
const meta = getModuleMeta(code)
|
||||
const fixedYear = String(options.year || '').trim()
|
||||
const declareTitle = decodeURIComponent(options.declareTitle || '').trim()
|
||||
const recordId = String(options.id || '').trim()
|
||||
console.log('this.moduleMeta', meta)
|
||||
this.moduleCode = code
|
||||
this.formConfig = config || null
|
||||
this.moduleMeta = meta || null
|
||||
this.formData = createInitialFormData(code)
|
||||
this.fixedYear = fixedYear
|
||||
this.declareTitle = declareTitle
|
||||
this.recordId = recordId
|
||||
|
||||
if (config) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: declareTitle || (meta ? meta.title : '申报表')
|
||||
})
|
||||
this.loadDictOptions()
|
||||
this.setupPickerState()
|
||||
this.loadData()
|
||||
this.loadInitialDetail()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
getApiConfig() {
|
||||
return MODULE_API_MAP[this.moduleCode] || null
|
||||
},
|
||||
createFreshFormData() {
|
||||
const data = createInitialFormData(this.moduleCode)
|
||||
data.year = this.fixedYear || data.year || String(new Date().getFullYear())
|
||||
return data
|
||||
},
|
||||
async loadInitialDetail() {
|
||||
if (!this.recordId) {
|
||||
return
|
||||
}
|
||||
try {
|
||||
await this.loadRemoteRecord(this.recordId)
|
||||
this.showEdit = true
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: (error && error.message) || '表单详情加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
async loadRemoteRecord(id) {
|
||||
const api = this.getApiConfig()
|
||||
if (!api || !api.get || !id) {
|
||||
return
|
||||
}
|
||||
const detail = await api.get(id)
|
||||
if (!detail) {
|
||||
return
|
||||
}
|
||||
this.formData = {
|
||||
...this.createFreshFormData(),
|
||||
...detail
|
||||
}
|
||||
if (this.fixedYear) {
|
||||
this.formData.year = this.fixedYear
|
||||
}
|
||||
this.setupPickerState()
|
||||
},
|
||||
async loadData() {
|
||||
const api = this.getApiConfig()
|
||||
if (!api || !api.page) {
|
||||
this.list = []
|
||||
return
|
||||
}
|
||||
this.loading = true
|
||||
try {
|
||||
const result = await api.page({
|
||||
page: 1,
|
||||
limit: 50,
|
||||
year: this.fixedYear || undefined
|
||||
})
|
||||
this.list = Array.isArray(result && result.list) ? result.list : []
|
||||
} catch (error) {
|
||||
this.list = []
|
||||
uni.showToast({
|
||||
title: (error && error.message) || '加载失败',
|
||||
icon: 'none'
|
||||
})
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
openCreate() {
|
||||
this.formData = this.createFreshFormData()
|
||||
this.draftSavedAt = ''
|
||||
this.restoreDraft()
|
||||
this.setupPickerState()
|
||||
this.showEdit = true
|
||||
},
|
||||
async openEdit(item) {
|
||||
try {
|
||||
const id = item && item.id ? item.id : ''
|
||||
if (id) {
|
||||
await this.loadRemoteRecord(id)
|
||||
} else {
|
||||
this.formData = {
|
||||
...this.createFreshFormData(),
|
||||
...(item || {})
|
||||
}
|
||||
}
|
||||
this.showEdit = true
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: (error && error.message) || '加载详情失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
closeEdit() {
|
||||
this.showEdit = false
|
||||
},
|
||||
getRecordTitle(item) {
|
||||
if (!item) {
|
||||
return this.pageTitle
|
||||
}
|
||||
const fields = ['name', 'title', 'orgName', 'branchName', 'applyType']
|
||||
for (const key of fields) {
|
||||
const value = String(item[key] || '').trim()
|
||||
if (value) {
|
||||
return value
|
||||
}
|
||||
}
|
||||
return this.pageTitle
|
||||
},
|
||||
getRecordSubtitle(item) {
|
||||
const fields = ['applyType', 'unit', 'collegeClass', 'organization', 'secondOrg', 'branch', 'position']
|
||||
const parts = fields
|
||||
.map((key) => String((item && item[key]) || '').trim())
|
||||
.filter(Boolean)
|
||||
.slice(0, 1)
|
||||
return parts.length ? parts.join(' · ') : (this.moduleMeta && this.moduleMeta.group) || '申报记录'
|
||||
},
|
||||
getRecordMeta(item) {
|
||||
const pairs = [
|
||||
['政治面貌', item && item.politics],
|
||||
['联系方式', item && (item.contact || item.phone)],
|
||||
['民族', item && item.nation]
|
||||
]
|
||||
const matched = pairs.find((entry) => String(entry[1] || '').trim())
|
||||
if (matched) {
|
||||
return `${matched[0]}：${matched[1]}`
|
||||
}
|
||||
return `记录编号：${(item && item.id) || '-'}`
|
||||
},
|
||||
noop() {
|
||||
return
|
||||
},
|
||||
setupPickerState() {
|
||||
this.genderPickerColumns = [[
|
||||
{ text: '男', value: '男' },
|
||||
{ text: '女', value: '女' }
|
||||
]]
|
||||
},
|
||||
async loadDictOptions() {
|
||||
try {
|
||||
const [nationResult, politicsResult] = await Promise.all([
|
||||
listDictData({ dictId: NATION_DICT_ID }),
|
||||
listDictData({ dictId: POLITICS_DICT_ID })
|
||||
])
|
||||
const normalize = (result) =>
|
||||
(Array.isArray(result) ? result : [])
|
||||
.map((item) => String(item && (item.dictDataName || item.name || item.label || item.value) || '').trim())
|
||||
.filter(Boolean)
|
||||
this.nationOptions = normalize(nationResult)
|
||||
this.politicsOptions = normalize(politicsResult)
|
||||
} catch (error) {
|
||||
this.nationOptions = []
|
||||
this.politicsOptions = []
|
||||
}
|
||||
},
|
||||
getStorageKey() {
|
||||
return `${STORAGE_PREFIX}${this.moduleCode}_${this.fixedYear || 'default'}`
|
||||
},
|
||||
getLegacyStorageKey() {
|
||||
return `${STORAGE_PREFIX}${this.moduleCode}`
|
||||
},
|
||||
restoreDraft() {
|
||||
const draft =
|
||||
uni.getStorageSync(this.getStorageKey()) ||
|
||||
uni.getStorageSync(this.getLegacyStorageKey())
|
||||
if (!draft || !draft.formData) {
|
||||
return
|
||||
}
|
||||
this.formData = {
|
||||
...this.formData,
|
||||
...draft.formData
|
||||
}
|
||||
if (this.fixedYear) {
|
||||
this.formData.year = this.fixedYear
|
||||
}
|
||||
this.draftSavedAt = draft.savedAt || ''
|
||||
},
|
||||
handleInput(field, event) {
|
||||
const value = typeof event === 'string' ? event : (event.detail && event.detail.value) || ''
|
||||
this.formData[field.key] = value
|
||||
},
|
||||
setFieldValue(key, event) {
|
||||
const value = typeof event === 'string' ? event : (event.detail && event.detail.value) || ''
|
||||
this.formData[key] = value
|
||||
},
|
||||
findFieldByKey(key) {
|
||||
if (!this.formConfig || !Array.isArray(this.formConfig.sections)) {
|
||||
return null
|
||||
}
|
||||
for (const section of this.formConfig.sections) {
|
||||
const matched = (section.fields || []).find((field) => field.key === key)
|
||||
if (matched) {
|
||||
return matched
|
||||
}
|
||||
}
|
||||
return null
|
||||
},
|
||||
isGenderField(field) {
|
||||
return field && field.key === 'gender'
|
||||
},
|
||||
isPoliticsField(field) {
|
||||
return field && field.key === 'politics'
|
||||
},
|
||||
isNationField(field) {
|
||||
return field && field.key === 'nation'
|
||||
},
|
||||
isUvPickerField(field) {
|
||||
return field && (field.type === 'select' || this.isPoliticsField(field) || this.isNationField(field))
|
||||
},
|
||||
isPickerFieldDisabled(field) {
|
||||
return (this.isPoliticsField(field) || this.isNationField(field)) && !this.getSelectOptions(field).length
|
||||
},
|
||||
getPickerDisplayText(field) {
|
||||
if (this.formData[field.key]) {
|
||||
return this.formData[field.key]
|
||||
}
|
||||
if (this.isPoliticsField(field)) {
|
||||
return this.getSelectOptions(field).length ? '请选择政治面貌' : '政治面貌加载中'
|
||||
}
|
||||
if (this.isNationField(field)) {
|
||||
return this.getSelectOptions(field).length ? '请选择民族' : '民族加载中'
|
||||
}
|
||||
return field.placeholder
|
||||
},
|
||||
getSelectOptions(field) {
|
||||
if (this.isGenderField(field)) {
|
||||
return field.options || ['男', '女']
|
||||
}
|
||||
if (this.isPoliticsField(field)) {
|
||||
return this.politicsOptions.length ? this.politicsOptions : (field.options || [])
|
||||
}
|
||||
return field.options || []
|
||||
},
|
||||
getNationIndex(field) {
|
||||
const index = this.nationOptions.findIndex((item) => item === this.formData[field.key])
|
||||
return index > -1 ? index : 0
|
||||
},
|
||||
handleNationPickerChange(field, event) {
|
||||
const index = Number((event && event.detail && event.detail.value) || 0)
|
||||
this.formData[field.key] = this.nationOptions[index] || ''
|
||||
},
|
||||
openSelectPicker(field) {
|
||||
const options = this.getSelectOptions(field)
|
||||
if (!options.length) {
|
||||
return
|
||||
}
|
||||
this.selectFieldKey = field.key
|
||||
this.selectPickerTitle = `选择${field.label}`
|
||||
this.selectPickerColumns = [
|
||||
options.map((item) => ({ text: item, value: item }))
|
||||
]
|
||||
this.$nextTick(() => {
|
||||
this.$refs.selectPicker && this.$refs.selectPicker.open()
|
||||
})
|
||||
},
|
||||
confirmSelectPicker(event) {
|
||||
const value = (((event || {}).value || [])[0] || {}).value || ''
|
||||
if (this.selectFieldKey) {
|
||||
this.formData[this.selectFieldKey] = value
|
||||
}
|
||||
},
|
||||
openGenderPicker(field) {
|
||||
this.genderFieldKey = field.key
|
||||
this.genderPickerColumns = [
|
||||
this.getSelectOptions(field).map((item) => ({ text: item, value: item }))
|
||||
]
|
||||
this.$nextTick(() => {
|
||||
this.$refs.genderPicker && this.$refs.genderPicker.open()
|
||||
})
|
||||
},
|
||||
confirmGenderPicker(event) {
|
||||
const value = (((event || {}).value || [])[0] || {}).value || ''
|
||||
if (this.genderFieldKey) {
|
||||
this.formData[this.genderFieldKey] = value
|
||||
}
|
||||
},
|
||||
isDateField(field) {
|
||||
return ['year', 'month', 'date'].includes(field.type)
|
||||
},
|
||||
getDateRange(field) {
|
||||
const start = String(field.start || '2000-01-01').trim()
|
||||
const end = String(field.end || '2099-12-31').trim()
|
||||
return {
|
||||
startYear: Number(start.slice(0, 4)) || 2000,
|
||||
endYear: Number(end.slice(0, 4)) || 2099
|
||||
}
|
||||
},
|
||||
getDaysInMonth(year, month) {
|
||||
return new Date(year, month, 0).getDate()
|
||||
},
|
||||
buildDatePickerState(field, value, nextIndexs = []) {
|
||||
const { startYear, endYear } = this.getDateRange(field)
|
||||
const years = []
|
||||
for (let year = startYear; year <= endYear; year += 1) {
|
||||
years.push({ text: `${year}`, value: `${year}` })
|
||||
}
|
||||
const months = Array.from({ length: 12 }, (_, index) => {
|
||||
const month = String(index + 1).padStart(2, '0')
|
||||
return { text: month, value: month }
|
||||
})
|
||||
const safeValue = String(value || '').trim()
|
||||
let selectedYear = safeValue.slice(0, 4) || `${startYear}`
|
||||
let selectedMonth = safeValue.slice(5, 7) || '01'
|
||||
let selectedDay = safeValue.slice(8, 10) || '01'
|
||||
if (Array.isArray(nextIndexs) && nextIndexs.length) {
|
||||
if (typeof nextIndexs[0] === 'number' && years[nextIndexs[0]]) {
|
||||
selectedYear = years[nextIndexs[0]].value
|
||||
}
|
||||
if (typeof nextIndexs[1] === 'number' && months[nextIndexs[1]]) {
|
||||
selectedMonth = months[nextIndexs[1]].value
|
||||
}
|
||||
}
|
||||
const dayTotal = this.getDaysInMonth(Number(selectedYear), Number(selectedMonth))
|
||||
const days = Array.from({ length: dayTotal }, (_, index) => {
|
||||
const day = String(index + 1).padStart(2, '0')
|
||||
return { text: day, value: day }
|
||||
})
|
||||
if (Array.isArray(nextIndexs) && nextIndexs.length > 2 && typeof nextIndexs[2] === 'number' && days[nextIndexs[2]]) {
|
||||
selectedDay = days[nextIndexs[2]].value
|
||||
}
|
||||
const yearIndex = Math.max(0, years.findIndex((item) => item.value === selectedYear))
|
||||
const monthIndex = Math.max(0, months.findIndex((item) => item.value === selectedMonth))
|
||||
const dayIndex = Math.max(0, days.findIndex((item) => item.value === selectedDay))
|
||||
if (field.type === 'year') {
|
||||
return {
|
||||
columns: [years],
|
||||
indexs: [yearIndex]
|
||||
}
|
||||
}
|
||||
if (field.type === 'month') {
|
||||
return {
|
||||
columns: [years, months],
|
||||
indexs: [yearIndex, monthIndex]
|
||||
}
|
||||
}
|
||||
return {
|
||||
columns: [years, months, days],
|
||||
indexs: [yearIndex, monthIndex, dayIndex]
|
||||
}
|
||||
},
|
||||
openDatePicker(field) {
|
||||
this.dateFieldKey = field.key
|
||||
this.datePickerTitle = `选择${field.label}`
|
||||
const pickerState = this.buildDatePickerState(field, this.formData[field.key])
|
||||
this.datePickerColumns = pickerState.columns
|
||||
this.datePickerIndexs = pickerState.indexs
|
||||
this.$nextTick(() => {
|
||||
this.$refs.datePicker && this.$refs.datePicker.open()
|
||||
})
|
||||
},
|
||||
handleDatePickerChange(event) {
|
||||
const field = this.findFieldByKey(this.dateFieldKey)
|
||||
if (!field || field.type !== 'date') {
|
||||
this.datePickerIndexs = (event && event.indexs) || this.datePickerIndexs
|
||||
return
|
||||
}
|
||||
const nextIndexs = (event && event.indexs) || []
|
||||
const pickerState = this.buildDatePickerState(field, this.formData[field.key], nextIndexs)
|
||||
this.datePickerColumns = pickerState.columns
|
||||
this.datePickerIndexs = pickerState.indexs
|
||||
},
|
||||
formatDatePickerValue(values, field) {
|
||||
const year = (values[0] && values[0].value) || ''
|
||||
if (field.type === 'year') {
|
||||
return year
|
||||
}
|
||||
const month = (values[1] && values[1].value) || '01'
|
||||
if (field.type === 'month') {
|
||||
return `${year}-${month}`
|
||||
}
|
||||
const day = (values[2] && values[2].value) || '01'
|
||||
return `${year}-${month}-${day}`
|
||||
},
|
||||
confirmDatePicker(event) {
|
||||
const field = this.findFieldByKey(this.dateFieldKey)
|
||||
if (!field) {
|
||||
return
|
||||
}
|
||||
this.formData[field.key] = this.formatDatePickerValue((event && event.value) || [], field)
|
||||
this.datePickerIndexs = (event && event.indexs) || this.datePickerIndexs
|
||||
},
|
||||
getDatePlaceholder(field) {
|
||||
if (field.type === 'year') {
|
||||
return '请选择年份'
|
||||
}
|
||||
if (field.type === 'month') {
|
||||
return '请选择年月'
|
||||
}
|
||||
return '请选择日期'
|
||||
},
|
||||
getInputType(field) {
|
||||
if (field.type === 'number' || field.type === 'phone') {
|
||||
return 'number'
|
||||
}
|
||||
return 'text'
|
||||
},
|
||||
validateForm() {
|
||||
const requiredFields = []
|
||||
this.formConfig.sections.forEach((section) => {
|
||||
section.fields.forEach((field) => {
|
||||
if (field.required && !String(this.formData[field.key] || '').trim()) {
|
||||
requiredFields.push(field.label)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
if (!requiredFields.length) {
|
||||
return true
|
||||
}
|
||||
|
||||
uni.showToast({
|
||||
title: `请完善：${requiredFields[0]}`,
|
||||
icon: 'none'
|
||||
})
|
||||
return false
|
||||
},
|
||||
saveDraft() {
|
||||
const savedAt = this.formatNow()
|
||||
uni.setStorageSync(this.getStorageKey(), {
|
||||
moduleCode: this.moduleCode,
|
||||
formData: this.formData,
|
||||
savedAt
|
||||
})
|
||||
this.draftSavedAt = savedAt
|
||||
uni.showToast({
|
||||
title: '草稿已保存',
|
||||
icon: 'success'
|
||||
})
|
||||
},
|
||||
clearDraftStorage() {
|
||||
uni.removeStorageSync(this.getStorageKey())
|
||||
uni.removeStorageSync(this.getLegacyStorageKey())
|
||||
this.draftSavedAt = ''
|
||||
},
|
||||
async submitForm() {
|
||||
if (!this.validateForm()) {
|
||||
return
|
||||
}
|
||||
const api = this.getApiConfig()
|
||||
if (!api) {
|
||||
this.clearDraftStorage()
|
||||
uni.showModal({
|
||||
title: '提交成功',
|
||||
content: `${this.moduleMeta ? this.moduleMeta.title : '当前模块'}表单已提交，后续可继续接入后台接口。`,
|
||||
showCancel: false
|
||||
})
|
||||
return
|
||||
}
|
||||
try {
|
||||
const payload = {
|
||||
...this.formData,
|
||||
year: this.fixedYear || this.formData.year
|
||||
}
|
||||
const request = payload.id ? api.update : api.add
|
||||
await request({
|
||||
...payload,
|
||||
id: payload.id || undefined
|
||||
})
|
||||
this.clearDraftStorage()
|
||||
uni.showToast({
|
||||
title: '提交成功',
|
||||
icon: 'none'
|
||||
})
|
||||
this.closeEdit()
|
||||
this.loadData()
|
||||
} catch (error) {
|
||||
uni.showToast({
|
||||
title: (error && error.message) || '提交失败',
|
||||
icon: 'none'
|
||||
})
|
||||
}
|
||||
},
|
||||
formatNow() {
|
||||
const now = new Date()
|
||||
const pad = (value) => String(value).padStart(2, '0')
|
||||
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page { min-height: 100vh; background: linear-gradient(180deg, #f5fbff 0%, #eef7ff 100%); }
|
||||
.page-scroll { height: 100vh; box-sizing: border-box; }
|
||||
.hero-wrap{ padding:24rpx 24rpx 0; background: url("@/static/indexBg.jpg") no-repeat cover}
|
||||
.hero-card,.state-card,.data-card { border-radius: 28rpx; }
|
||||
.hero-card {
|
||||
padding: 34rpx 36rpx;
|
||||
background: rgba(255, 255, 255, 0.5);
|
||||
box-shadow: 0 4rpx 12rpx 0 rgba(174, 174, 174, 0.4);
|
||||
backdrop-filter: blur(24rpx);
|
||||
-webkit-backdrop-filter: blur(24rpx);
|
||||
border: 1rpx solid rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.hero-badge { display: inline-flex; padding: 10rpx 18rpx; border-radius: 999rpx; background: rgba(20,150,242,.1); font-size: 22rpx; color: #1496f2; }
|
||||
.hero-title {
|
||||
position: relative;
|
||||
margin-top: 8rpx;
|
||||
padding-left: 10rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 700;
|
||||
line-height: 1.35;
|
||||
color: #18a0f7;
|
||||
border-left: 5px solid #0f94ef;
|
||||
}
|
||||
//.hero-title::before {
|
||||
// content: '';
|
||||
// position: absolute;
|
||||
// left: 0;
|
||||
// top: 8rpx;
|
||||
// width: 8rpx;
|
||||
// height: 52rpx;
|
||||
// border-radius: 999rpx;
|
||||
// background: linear-gradient(180deg, #0f94ef 0%, #22b4ff 100%);
|
||||
//}
|
||||
.hero-desc { margin-top: 20rpx; font-size: 24rpx; line-height: 1.8; color: #7f7f7f; }
|
||||
.hero-actions { display: flex; gap: 16rpx; margin-top: 24rpx; }
|
||||
.hero-action { padding: 14rpx 24rpx; border-radius: 999rpx; background: rgba(20,150,242,.12); font-size: 24rpx; color: #1496f2; }
|
||||
.hero-action--secondary { background: rgba(31,35,41,.08); color: #5f6b76; }
|
||||
.state-card,.data-card { margin-top: 24rpx; padding: 24rpx; background: rgba(255,255,255,.96); box-shadow: 0 10rpx 28rpx rgba(34,94,142,.08); }
|
||||
.state-title,.card-title { font-size: 30rpx; font-weight: 700; color: #1f2329; }
|
||||
.state-desc,.card-subtitle,.meta-line { margin-top: 10rpx; font-size: 24rpx; line-height: 1.6; color: #786e69; }
|
||||
.card-list { padding: 0 24rpx; display: flex; flex-direction: column; gap: 16rpx; }
|
||||
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16rpx; }
|
||||
.card-year { padding: 10rpx 16rpx; border-radius: 999rpx; background: #eef5ff; color: #1554ad; font-size: 22rpx; }
|
||||
.modal-mask { position: fixed; inset: 0; background: rgba(15,23,42,.34); display: flex; align-items: flex-end; z-index: 99; }
|
||||
.modal-panel { width: 100%; max-height: 92vh; border-radius: 32rpx 32rpx 0 0; background: #fff; display: flex; flex-direction: column; }
|
||||
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 24rpx; border-bottom: 1rpx solid #eef1f4; }
|
||||
.modal-title { font-size: 30rpx; font-weight: 700; color: #1f2329; }
|
||||
.modal-close { font-size: 24rpx; color: #7c8a96; }
|
||||
.modal-body { max-height: 70vh; padding: 24rpx; box-sizing: border-box; }
|
||||
.hero-meta--form { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 20rpx; }
|
||||
.meta-item--form { background: #f3f7fd; }
|
||||
.meta-label--form { color: #6b7785; }
|
||||
.meta-value--form { color: #1f2329; }
|
||||
.section-card { margin-top: 24rpx; padding: 26rpx; border-radius: 30rpx; background: rgba(255,255,255,.94); border: 1rpx solid rgba(20,150,242,.08); box-shadow: 0 10rpx 28rpx rgba(34,94,142,.08); }
|
||||
.section-head { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 18rpx; }
|
||||
.section-title { font-size: 30rpx; font-weight: 700; color: #1f2329; }
|
||||
.field-list { display: flex; flex-direction: column; gap: 22rpx; }
|
||||
.field-label { margin-bottom: 12rpx; font-size: 25rpx; font-weight: 600; color: #2b3037; }
|
||||
.field-required { margin-left: 8rpx; color: #1496f2; }
|
||||
.field-textarea,.field-picker { width: 100%; box-sizing: border-box; padding: 22rpx 24rpx; border-radius: 22rpx; font-size: 24rpx; color: #2a2e35; }
|
||||
.field-textarea { background: #f8f4f1; border: 1rpx solid #eadfd7; }
|
||||
.field-picker { background: #F4FCFF; border: 1rpx solid rgba(220,220,220,1); }
|
||||
.field-picker--disabled { background: #f7f9fb; color: #aaafb7; }
|
||||
.field-textarea { min-height: 180rpx; }
|
||||
:deep(.field-input.uv-input) { width: 100%; min-height: 88rpx; padding: 0 24rpx; border-radius: 12rpx; border: 1px solid #dcdfe6; background: #ffffff; box-sizing: border-box; transition: border-color 0.2s ease; }
|
||||
:deep(.field-input.uv-input .uv-input__content__field-wrapper__field) { height: 88rpx; min-height: 88rpx; font-size: 28rpx; line-height: 88rpx; color: #303133; }
|
||||
.field-placeholder { color: #aa9f98; }
|
||||
.field-value { color: #2a2e35; }
|
||||
.modal-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16rpx; padding: 24rpx; border-top: 1rpx solid #eef1f4; }
|
||||
.ghost-btn,.primary-btn { height: 84rpx; line-height: 84rpx; border-radius: 22rpx; text-align: center; font-size: 26rpx; font-weight: 700; }
|
||||
.ghost-btn { background: #FFA2DA; color: #ffffff; border: none; border-radius: 999px; }
|
||||
.primary-btn { background: linear-gradient(147.22deg, rgba(0,180,255,1) 37.65%, rgba(88,206,255,1) 80.42%); color: #fff; border-radius: 999px; }
|
||||
.empty-page { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48rpx; text-align: center; }
|
||||
.empty-title { font-size: 30rpx; font-weight: 700; color: #1f2329; }
|
||||
.empty-desc { margin-top: 12rpx; font-size: 24rpx; line-height: 1.7; color: #7b8694; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user