panqihua
3 years ago
parent
3832db6fa9
commit
580440ffa1
@ -0,0 +1,65 @@ |
|||||||
|
<template> |
||||||
|
<div> |
||||||
|
<h1>{{ action }}</h1> |
||||||
|
<a-form-model ref="ruleForm" :model="editData" :rules="rules" > |
||||||
|
<a-form-model-item label="主题" prop="subject"> |
||||||
|
<a-input v-model="editData.subject"/> |
||||||
|
</a-form-model-item> |
||||||
|
<a-form-model-item label="交易" prop="deal"> |
||||||
|
<a-input v-model="editData.deal"/> |
||||||
|
</a-form-model-item> |
||||||
|
<a-form-model-item> |
||||||
|
<a-button type="primary" @click="onSubmit">确认</a-button> |
||||||
|
</a-form-model-item> |
||||||
|
</a-form-model> |
||||||
|
</div> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
import {Modal} from "ant-design-vue"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: "edit", |
||||||
|
data() { |
||||||
|
return { |
||||||
|
rules: { |
||||||
|
subject: [ |
||||||
|
{ required: true, message: '请输入主题', trigger: 'change' } |
||||||
|
], |
||||||
|
deal: [ |
||||||
|
{ required: true, message: '请输入交易', trigger: 'change' } |
||||||
|
] |
||||||
|
}, |
||||||
|
editData:this.form |
||||||
|
} |
||||||
|
}, |
||||||
|
methods:{ |
||||||
|
onSubmit:function (){ |
||||||
|
let that=this |
||||||
|
this.$refs.ruleForm.validate(valid => { |
||||||
|
if (valid) { |
||||||
|
if(this.action.includes('编辑')) { |
||||||
|
that.$emit('close') |
||||||
|
}else{ |
||||||
|
that.$emit('onAdd') |
||||||
|
} |
||||||
|
} else { |
||||||
|
Modal.error({ |
||||||
|
title:'错误提示', |
||||||
|
content:'表单校验失败' |
||||||
|
}) |
||||||
|
return false; |
||||||
|
} |
||||||
|
}); |
||||||
|
} |
||||||
|
}, |
||||||
|
props: { |
||||||
|
action: String, |
||||||
|
form: Object, |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -0,0 +1,96 @@ |
|||||||
|
<template> |
||||||
|
<a-table :columns="columns" :data-source="data" rowKey="id" :scroll="{x:true}"> |
||||||
|
<template slot="finish" slot-scope="text, record"> |
||||||
|
<a-checkbox :default-checked="record.finish"/> |
||||||
|
</template> |
||||||
|
<template slot="action" slot-scope="text, record,index"> |
||||||
|
<a-space> |
||||||
|
<a-button @click="$emit('onEdit',record,index)">{{ action.edit }}</a-button> |
||||||
|
|
||||||
|
<a-popconfirm |
||||||
|
v-if="data.length" |
||||||
|
:title="deleteTip" |
||||||
|
@confirm="() => $emit('onDelete',record.id)" |
||||||
|
> |
||||||
|
<a-button type="danger">{{ action.delete }}</a-button> |
||||||
|
</a-popconfirm> |
||||||
|
</a-space> |
||||||
|
</template> |
||||||
|
</a-table> |
||||||
|
</template> |
||||||
|
|
||||||
|
<script> |
||||||
|
const columns = [ |
||||||
|
{ |
||||||
|
title: '完成', |
||||||
|
dataIndex: 'finish', |
||||||
|
scopedSlots: {customRender: 'finish'} |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '主题', |
||||||
|
dataIndex: 'subject' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '交易', |
||||||
|
dataIndex: 'deal' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '联络人', |
||||||
|
dataIndex: 'participants' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '电子邮件', |
||||||
|
dataIndex: 'email' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '电话', |
||||||
|
dataIndex: 'phone' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '组织', |
||||||
|
dataIndex: 'organization' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '到期日', |
||||||
|
dataIndex: 'date' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '期间', |
||||||
|
dataIndex: 'time' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '指派给使用者', |
||||||
|
dataIndex: 'user' |
||||||
|
}, |
||||||
|
{ |
||||||
|
title: '操作', |
||||||
|
dataIndex: 'action', |
||||||
|
scopedSlots: {customRender: 'action'} |
||||||
|
} |
||||||
|
] |
||||||
|
export default { |
||||||
|
name: "list", |
||||||
|
props:{ |
||||||
|
data:Array |
||||||
|
}, |
||||||
|
data() { |
||||||
|
return { |
||||||
|
//表格列 |
||||||
|
columns, |
||||||
|
action: { |
||||||
|
edit: '编辑', |
||||||
|
delete: '删除', |
||||||
|
refresh: '刷新' |
||||||
|
}, |
||||||
|
deleteTip: '确认删除此活动记录?', |
||||||
|
} |
||||||
|
}, |
||||||
|
mounted() { |
||||||
|
this.$emit('load') |
||||||
|
} |
||||||
|
} |
||||||
|
</script> |
||||||
|
|
||||||
|
<style scoped> |
||||||
|
|
||||||
|
</style> |
||||||
@ -1,13 +1,129 @@ |
|||||||
<template> |
<template> |
||||||
<h1>这是一个活动模块Demo</h1> |
<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> |
</template> |
||||||
|
|
||||||
<script> |
<script> |
||||||
|
|
||||||
|
import Edit from "./components/edit"; |
||||||
|
import List from "./components/list" |
||||||
|
import Mock from "mockjs"; |
||||||
|
|
||||||
export default { |
export default { |
||||||
name: "index.vue" |
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> |
</script> |
||||||
|
|
||||||
<style scoped> |
<style scoped> |
||||||
|
.space { |
||||||
|
height: 10px; |
||||||
|
} |
||||||
|
|
||||||
|
.ant-table td { |
||||||
|
white-space: nowrap; |
||||||
|
} |
||||||
</style> |
</style> |
||||||
Loading…
Reference in new issue