58c383e05d
Former-commit-id: 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 6de284ac144ef2dc9add34aa16502109485a16d2 [formerly 99351410cdef9041c1acbcd105ab7f02e23c4db1 [formerly d70ea9b6ea91dec0463c7e925a8eaab9c1990a6d]]]]] Former-commit-id: 88212ee98bd64a47532ce9dac84a572f55248a87 Former-commit-id: 017b329b1b91a670b85398e771d34504cc027f26 Former-commit-id: 9d4254f31c10c6e1cc65c65b42847d91e3645566 [formerly b0c0b3fa63225f698741d26af019cee2c9e9258c] Former-commit-id: 4a4e25525dd02ec2f4a566716a04d5751dc836f8 Former-commit-id: 32994d19e44dd945d144c72134c4aec7b0bc5b13 Former-commit-id: 625b25670c37b0fd33826ddfa845802f1a8e5533 Former-commit-id: ac609aa4a8a3284e927f6b704ccda7786c7df8a6 Former-commit-id: 47d02c0e39e0a6fcba7dfdc98782045193e40c6b
112 lines
3.7 KiB
Vue
112 lines
3.7 KiB
Vue
<template>
|
|
<d2-container>
|
|
<el-alert
|
|
slot="header"
|
|
type="success"
|
|
:closable="false"
|
|
title="下面的表单来自 Element 的表单示例，
|
|
在 D2Admin 的本页示例中你可以随意填写这个表单，
|
|
表单内容会自动实时持久化，
|
|
无论是切换标签页、重新打开标签页、刷新浏览器、重开浏览器、重开浏览器标签页等，
|
|
该页面数据都会自动恢复到上次填写的状态，
|
|
这些都只需要你使用 D2Admin 提供的两个方法，
|
|
总共只需要多写十几行代码"/>
|
|
<el-form ref="form" :model="form" label-width="80px" style="max-width: 600px; margin: 0px auto;">
|
|
<el-form-item label="活动名称">
|
|
<el-input v-model="form.name"></el-input>
|
|
</el-form-item>
|
|
<el-form-item label="活动区域">
|
|
<el-select v-model="form.region" placeholder="请选择活动区域">
|
|
<el-option label="区域一" value="shanghai"></el-option>
|
|
<el-option label="区域二" value="beijing"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="活动时间">
|
|
<el-col :span="11">
|
|
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
|
|
</el-col>
|
|
<el-col :span="2" style="text-align: center;">-</el-col>
|
|
<el-col :span="11">
|
|
<el-time-picker type="fixed-time" placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
|
|
</el-col>
|
|
</el-form-item>
|
|
<el-form-item label="即时配送">
|
|
<el-switch v-model="form.delivery"></el-switch>
|
|
</el-form-item>
|
|
<el-form-item label="活动性质">
|
|
<el-checkbox-group v-model="form.type">
|
|
<el-checkbox label="线上活动" name="type"></el-checkbox>
|
|
<el-checkbox label="地推活动" name="type"></el-checkbox>
|
|
<el-checkbox label="线下活动" name="type"></el-checkbox>
|
|
<el-checkbox label="品牌曝光" name="type"></el-checkbox>
|
|
</el-checkbox-group>
|
|
</el-form-item>
|
|
<el-form-item label="特殊资源">
|
|
<el-radio-group v-model="form.resource">
|
|
<el-radio label="线上品牌商赞助"></el-radio>
|
|
<el-radio label="线下场地免费"></el-radio>
|
|
</el-radio-group>
|
|
</el-form-item>
|
|
<el-form-item label="活动形式">
|
|
<el-input type="textarea" v-model="form.desc"></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary">立即创建</el-button>
|
|
<el-button>取消</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
<el-button
|
|
slot="footer"
|
|
type="danger"
|
|
@click="handleClear">
|
|
<d2-icon name="trash-o"/>
|
|
删除当前页面快照
|
|
</el-button>
|
|
</d2-container>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapActions } from 'vuex'
|
|
export default {
|
|
data () {
|
|
return {
|
|
form: {
|
|
name: '',
|
|
region: '',
|
|
date1: '',
|
|
date2: '',
|
|
delivery: false,
|
|
type: [],
|
|
resource: '',
|
|
desc: ''
|
|
}
|
|
}
|
|
},
|
|
async created () {
|
|
const data = await this.pageLoad({ vm: this })
|
|
for (const key in data) {
|
|
if (data.hasOwnProperty(key)) this[key] = data[key]
|
|
}
|
|
},
|
|
watch: {
|
|
$data: {
|
|
handler () {
|
|
this.pageSet({ vm: this })
|
|
},
|
|
deep: true
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions('d2admin/db', [
|
|
'pageSet',
|
|
'pageLoad',
|
|
'pageClear'
|
|
]),
|
|
async handleClear () {
|
|
await this.pageClear({ vm: this })
|
|
this.$message.success('此页面快照已经删除，请重新进入该页面或者关闭选项卡重新打开')
|
|
}
|
|
}
|
|
}
|
|
</script>
|