fix:修改备注弄成添加字段json
This commit is contained in:
@@ -69,8 +69,46 @@
|
||||
<el-form-item label="过期时间" prop="expireTime">
|
||||
<el-date-picker v-model="form.expireTime" type="datetime" placeholder="选择过期时间" style="width: 100%" />
|
||||
</el-form-item>
|
||||
<el-form-item label="备注" prop="note">
|
||||
<el-input v-model="form.note" type="textarea" :rows="3" placeholder="请输入备注" />
|
||||
<el-form-item label="备注字段" prop="noteFields">
|
||||
<div class="note-fields-container">
|
||||
<el-button type="primary" size="small" @click="addNoteField" style="margin-bottom: 10px">+ 添加字段</el-button>
|
||||
<el-table :data="form.noteFields" border size="small" v-if="form.noteFields.length">
|
||||
<el-table-column label="字段Key" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.key" placeholder="key" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="显示名称" width="120">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.label" placeholder="名称" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="默认值" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-input v-model="row.defaultValue" placeholder="默认值" size="small" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="输入类型" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-select v-model="row.type" size="small">
|
||||
<el-option label="文本" value="text" />
|
||||
<el-option label="数字" value="number" />
|
||||
<el-option label="选择" value="select" />
|
||||
</el-select>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="必填" width="60" align="center">
|
||||
<template #default="{ row }">
|
||||
<el-checkbox v-model="row.required" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="60" align="center">
|
||||
<template #default="{ $index }">
|
||||
<el-button type="danger" size="small" link @click="removeNoteField($index)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
@@ -99,15 +137,24 @@ const isEdit = ref(false)
|
||||
const submitLoading = ref(false)
|
||||
const formRef = ref(null)
|
||||
|
||||
const form = reactive({ id: '', name: '', price: 0, renewPrice: 0, maxPerson: 5, tag: '', expireTime: null, note: '' })
|
||||
const form = reactive({ id: '', name: '', price: 0, renewPrice: 0, maxPerson: 5, tag: '', expireTime: null, noteFields: [] })
|
||||
const rules = {
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
|
||||
renewPrice: [{ required: true, message: '请输入续费价格', trigger: 'blur' }],
|
||||
maxPerson: [{ required: true, message: '请输入拼团人数', trigger: 'blur' }],
|
||||
tag: [{ required: true, message: '请选择标签', trigger: 'change' }],
|
||||
expireTime: [{ required: true, message: '请选择过期时间', trigger: 'change' }],
|
||||
note: [{ required: true, message: '请输入备注', trigger: 'blur' }]
|
||||
expireTime: [{ required: true, message: '请选择过期时间', trigger: 'change' }]
|
||||
}
|
||||
|
||||
// 添加备注字段
|
||||
const addNoteField = () => {
|
||||
form.noteFields.push({ key: '', label: '', defaultValue: '', type: 'text', required: false })
|
||||
}
|
||||
|
||||
// 删除备注字段
|
||||
const removeNoteField = (index) => {
|
||||
form.noteFields.splice(index, 1)
|
||||
}
|
||||
|
||||
const formatTime = (timeStr) => {
|
||||
@@ -156,13 +203,17 @@ const handleTagChange = (tag) => {
|
||||
|
||||
const handleAdd = () => {
|
||||
isEdit.value = false
|
||||
Object.assign(form, { id: '', name: '', price: 0, renewPrice: 0, maxPerson: 5, tag: '', expireTime: null, note: '' })
|
||||
Object.assign(form, { id: '', name: '', price: 0, renewPrice: 0, maxPerson: 5, tag: '', expireTime: null, noteFields: [] })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
const handleEdit = (row) => {
|
||||
isEdit.value = true
|
||||
Object.assign(form, { id: row.id, name: row.name, price: row.price, renewPrice: row.renewPrice, maxPerson: row.maxPerson, tag: row.tag || '', expireTime: row.expireTime || null, note: row.note || '' })
|
||||
let noteFields = []
|
||||
try {
|
||||
noteFields = row.note ? JSON.parse(row.note) : []
|
||||
} catch { noteFields = [] }
|
||||
Object.assign(form, { id: row.id, name: row.name, price: row.price, renewPrice: row.renewPrice, maxPerson: row.maxPerson, tag: row.tag || '', expireTime: row.expireTime || null, noteFields })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
@@ -172,6 +223,7 @@ const handleSubmit = async () => {
|
||||
if (!valid) return
|
||||
submitLoading.value = true
|
||||
try {
|
||||
const noteJson = JSON.stringify(form.noteFields.filter(f => f.key))
|
||||
const data = {
|
||||
name: form.name,
|
||||
price: String(form.price),
|
||||
@@ -179,7 +231,7 @@ const handleSubmit = async () => {
|
||||
max_person: String(form.maxPerson),
|
||||
tag: form.tag,
|
||||
expire_time: form.expireTime ? Math.floor(new Date(form.expireTime).getTime() / 1000) : 0,
|
||||
note: form.note
|
||||
note: noteJson
|
||||
}
|
||||
if (isEdit.value) data.id = String(form.id)
|
||||
const res = isEdit.value ? await updateGroupBuyType(data) : await addGroupBuyType(data)
|
||||
@@ -223,4 +275,5 @@ onMounted(() => { fetchTags() })
|
||||
.header-actions { display: flex; align-items: center; }
|
||||
.table-card { box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); }
|
||||
.pagination-wrapper { margin-top: 20px; display: flex; justify-content: flex-end; }
|
||||
.note-fields-container { width: 100%; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user