You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
129 lines
3.1 KiB
129 lines
3.1 KiB
<template>
|
|
<div>
|
|
<h1>{{ menuTitle }}</h1>
|
|
<div class="space"/>
|
|
<a-space>
|
|
<a-button type="primary" @click="load">{{ action.refresh }}</a-button>
|
|
<a-button @click="currentTitle=addTitle;showDrawer()">{{ action.add }}</a-button>
|
|
</a-space>
|
|
<div class="space"/>
|
|
<a-row>
|
|
<a-col :span="6">
|
|
<a-input-search :placeholder="keywordPlaceHolder" @search="load" v-model="keyword"/>
|
|
</a-col>
|
|
</a-row>
|
|
<div class="space"/>
|
|
<a-spin :spinning="spinning" :delay="500">
|
|
<List v-on:onEdit="onEdit"
|
|
v-on:onDelete="onDelete"
|
|
v-on:load="load"
|
|
:data="data"
|
|
/>
|
|
</a-spin>
|
|
<a-drawer
|
|
:title="action.edit"
|
|
placement="right"
|
|
:closable="false"
|
|
:visible="visible"
|
|
@close="onClose"
|
|
>
|
|
<Edit v-if="visible" :action="currentTitle" :form="currentForm"
|
|
v-on:close="onClose"
|
|
v-on:onAdd="onAdd"/>
|
|
</a-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import Edit from "./components/edit";
|
|
import List from "./components/list"
|
|
import Mock from "mockjs";
|
|
|
|
export default {
|
|
name: "index.vue",
|
|
components: {List, Edit},
|
|
data() {
|
|
return {
|
|
//数据加载动画显示状态
|
|
spinning: false,
|
|
modelName: '活动记录',
|
|
//抽屉布局显示状态
|
|
visible: false,
|
|
//表格数据
|
|
data: [],
|
|
action: {
|
|
add: '新增',
|
|
edit: '编辑',
|
|
delete: '删除',
|
|
refresh: '刷新'
|
|
},
|
|
menuTitle: '这是一个活动模块Demo',
|
|
currentForm: {},
|
|
currentIndex: -1,
|
|
currentTitle: null,
|
|
//关键字搜索
|
|
keyword: '',
|
|
keywordPlaceHolder: '输入主题关键字'
|
|
}
|
|
},
|
|
methods: {
|
|
showDrawer() {
|
|
this.visible = true;
|
|
},
|
|
onClose() {
|
|
this.visible = false;
|
|
this.currentForm = {}
|
|
this.currentIndex = -1
|
|
this.currentTitle = null
|
|
},
|
|
onDelete(id) {
|
|
this.data = this.data.filter(item => item.id !== id);
|
|
},
|
|
onEdit(record, index) {
|
|
console.info('编辑记录：%o', record)
|
|
this.currentForm = record
|
|
this.currentIndex = index
|
|
this.currentTitle = this.editTitle
|
|
this.showDrawer()
|
|
},
|
|
onAdd() {
|
|
console.info('新增记录:%o', this.currentForm)
|
|
this.data.push({...this.currentForm, ...{id: Mock.Random.id()}})
|
|
this.onClose()
|
|
},
|
|
load() {
|
|
this.spinning = true
|
|
let that = this
|
|
this.$api.customer.getActivityList().then(res => {
|
|
if (res.errCode === 0) {
|
|
that.data = res.data.filter(item => that.keyword === '' || item.subject.includes(that.keyword))
|
|
} else {
|
|
console.error('无法解析列表数据：%o', res)
|
|
}
|
|
}
|
|
).catch(err => {
|
|
console.error(err)
|
|
}).finally(() => this.spinning = false)
|
|
}
|
|
},
|
|
computed: {
|
|
editTitle: function () {
|
|
return this.action.edit + this.modelName
|
|
},
|
|
addTitle: function () {
|
|
return this.action.add + this.modelName
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.space {
|
|
height: 10px;
|
|
}
|
|
|
|
.ant-table td {
|
|
white-space: nowrap;
|
|
}
|
|
</style> |