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