panqihua
2 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> |
||||
<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> |
||||
|
||||
<script> |
||||
|
||||
import Edit from "./components/edit"; |
||||
import List from "./components/list" |
||||
import Mock from "mockjs"; |
||||
|
||||
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> |
||||
|
||||
<style scoped> |
||||
.space { |
||||
height: 10px; |
||||
} |
||||
|
||||
.ant-table td { |
||||
white-space: nowrap; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue