Skip to content

Commit d281f49

Browse files
sendyasendya
committed
feat: global dialog
1 parent ac0bdd9 commit d281f49

File tree

5 files changed

+195
-48
lines changed

5 files changed

+195
-48
lines changed

‎src/components/Dialog.js

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import Modal from 'ant-design-vue/es/modal'
2+
export default (Vue) => {
3+
function dialog (component, componentProps, modalProps) {
4+
const _vm = this
5+
modalProps = modalProps || {}
6+
if (!_vm || !_vm._isVue) {
7+
return
8+
}
9+
let dialogDiv = document.querySelector('body>div[type=dialog]')
10+
if (!dialogDiv) {
11+
dialogDiv = document.createElement('div')
12+
dialogDiv.setAttribute('type', 'dialog')
13+
document.body.appendChild(dialogDiv)
14+
}
15+
16+
const handle = function (checkFunction, afterHandel) {
17+
if (checkFunction instanceof Function) {
18+
const res = checkFunction()
19+
if (res instanceof Promise) {
20+
res.then(c => {
21+
c && afterHandel()
22+
})
23+
} else {
24+
res && afterHandel()
25+
}
26+
} else {
27+
// checkFunction && afterHandel()
28+
checkFunction || afterHandel()
29+
}
30+
}
31+
32+
const dialogInstance = new Vue({
33+
data () {
34+
return {
35+
visible: true
36+
}
37+
},
38+
router: _vm.$router,
39+
store: _vm.$store,
40+
mounted () {
41+
this.$on('close', (v) => {
42+
this.handleClose()
43+
})
44+
},
45+
methods: {
46+
handleClose () {
47+
handle(this.$refs._component.onCancel, () => {
48+
this.visible = false
49+
this.$refs._component.$emit('close')
50+
this.$refs._component.$emit('cancel')
51+
dialogInstance.$destroy()
52+
})
53+
},
54+
handleOk () {
55+
handle(this.$refs._component.onOK || this.$refs._component.onOk, () => {
56+
this.visible = false
57+
this.$refs._component.$emit('close')
58+
this.$refs._component.$emit('ok')
59+
dialogInstance.$destroy()
60+
})
61+
}
62+
},
63+
render: function (h) {
64+
const that = this
65+
const modalModel = modalProps && modalProps.model
66+
if (modalModel) {
67+
delete modalProps.model
68+
}
69+
const ModalProps = Object.assign({}, modalModel && { model: modalModel } || {}, {
70+
attrs: Object.assign({}, {
71+
...(modalProps.attrs || modalProps)
72+
}, {
73+
visible: this.visible
74+
}),
75+
on: Object.assign({}, {
76+
...(modalProps.on || modalProps)
77+
}, {
78+
ok: () => {
79+
that.handleOk()
80+
},
81+
cancel: () => {
82+
that.handleClose()
83+
}
84+
})
85+
})
86+
87+
const componentModel = componentProps && componentProps.model
88+
if (componentModel) {
89+
delete componentProps.model
90+
}
91+
const ComponentProps = Object.assign({}, componentModel && { model: componentModel } || {}, {
92+
ref: '_component',
93+
attrs: Object.assign({}, {
94+
...((componentProps && componentProps.attrs) || componentProps)
95+
}),
96+
on: Object.assign({}, {
97+
...((componentProps && componentProps.on) || componentProps)
98+
})
99+
})
100+
101+
return h(Modal, ModalProps, [h(component, ComponentProps)])
102+
}
103+
}).$mount(dialogDiv)
104+
}
105+
106+
Object.defineProperty(Vue.prototype, '$dialog', {
107+
get: () => {
108+
return function () {
109+
dialog.apply(this, arguments)
110+
}
111+
}
112+
})
113+
}

‎src/components/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@ import ExceptionPage from '@/components/Exception'
2929
import StandardFormRow from '@/components/StandardFormRow'
3030
import ArticleListContent from '@/components/ArticleListContent'
3131

32+
import Dialog from '@/components/Dialog'
33+
3234
export {
3335
AvatarList,
3436
Bar,
@@ -58,5 +60,7 @@ export {
5860
IconSelector,
5961
TagSelect,
6062
StandardFormRow,
61-
ArticleListContent
63+
ArticleListContent,
64+
65+
Dialog
6266
}

‎src/main.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,13 @@ import './core/lazy_use'
1717
import './permission' // permission control
1818
import './utils/filter' // global filter
1919
import './components/global.less'
20+
import { Dialog } from '@/components'
2021

2122
Vue.config.productionTip = false
2223

2324
// mount axios Vue.$http and this.$http
2425
Vue.use(VueAxios)
26+
Vue.use(Dialog)
2527

2628
new Vue({
2729
router,

‎src/views/list/StandardList.vue

Lines changed: 21 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@
3939
<a slot="title">{{ item.title }}</a>
4040
</a-list-item-meta>
4141
<div slot="actions">
42-
<a>编辑</a>
42+
<a @click="edit(item)">编辑</a>
4343
</div>
4444
<div slot="actions">
4545
<a-dropdown>
@@ -65,8 +65,6 @@
6565
</div>
6666
</a-list-item>
6767
</a-list>
68-
69-
<task-form ref="taskForm" />
7068
</a-card>
7169
</div>
7270
</template>
@@ -139,6 +137,26 @@ export default {
139137
data,
140138
status: 'all'
141139
}
140+
},
141+
methods: {
142+
edit (record) {
143+
console.log('record', record)
144+
// mockdata
145+
record.taskName = '测试'
146+
// mockend
147+
this.$dialog(TaskForm,
148+
// component props
149+
{
150+
record
151+
},
152+
// modal props
153+
{
154+
title: '操作',
155+
width: 700,
156+
centered: true,
157+
maskClosable: false
158+
})
159+
}
142160
}
143161
}
144162
</script>

‎src/views/list/modules/TaskForm.vue

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,50 @@
11
<template>
2-
<a-modal :width="640" :visible="visible" title="任务添加" @ok="handleSubmit" @cancel="visible = false">
3-
<a-form @submit="handleSubmit" :form="form">
4-
<a-form-item
5-
label="任务名称"
6-
:labelCol="labelCol"
7-
:wrapperCol="wrapperCol"
8-
>
9-
<a-input v-decorator="['taskName', {rules:[{required: true, message: '请输入任务名称'}]}]" />
10-
</a-form-item>
11-
<a-form-item
12-
label="开始时间"
13-
:labelCol="labelCol"
14-
:wrapperCol="wrapperCol"
15-
>
16-
<a-date-picker style="width: 100%" v-decorator="['startTime', {rules:[{required: true, message: '请选择开始时间'}]}]" />
17-
</a-form-item>
18-
<a-form-item
19-
label="任务负责人"
20-
:labelCol="labelCol"
21-
:wrapperCol="wrapperCol"
22-
>
23-
<a-select v-decorator="['owner', {rules:[{required: true, message: '请选择开始时间'}]}]">
24-
<a-select-option :value="0">付晓晓</a-select-option>
25-
<a-select-option :value="1">周毛毛</a-select-option>
26-
</a-select>
27-
</a-form-item>
28-
<a-form-item
29-
label="产品描述"
30-
:labelCol="labelCol"
31-
:wrapperCol="wrapperCol"
32-
>
33-
<a-textarea v-decorator="['desc']"></a-textarea>
34-
</a-form-item>
35-
</a-form>
36-
</a-modal>
2+
<a-form @submit="handleSubmit" :form="form">
3+
<a-form-item
4+
label="任务名称"
5+
:labelCol="labelCol"
6+
:wrapperCol="wrapperCol"
7+
>
8+
<a-input v-decorator="['taskName', {rules:[{required: true, message: '请输入任务名称'}]}]" />
9+
</a-form-item>
10+
<a-form-item
11+
label="开始时间"
12+
:labelCol="labelCol"
13+
:wrapperCol="wrapperCol"
14+
>
15+
<a-date-picker style="width: 100%" v-decorator="['startTime', {rules:[{required: true, message: '请选择开始时间'}]}]" />
16+
</a-form-item>
17+
<a-form-item
18+
label="任务负责人"
19+
:labelCol="labelCol"
20+
:wrapperCol="wrapperCol"
21+
>
22+
<a-select v-decorator="['owner', {rules:[{required: true, message: '请选择开始时间'}]}]">
23+
<a-select-option :value="0">付晓晓</a-select-option>
24+
<a-select-option :value="1">周毛毛</a-select-option>
25+
</a-select>
26+
</a-form-item>
27+
<a-form-item
28+
label="产品描述"
29+
:labelCol="labelCol"
30+
:wrapperCol="wrapperCol"
31+
>
32+
<a-textarea v-decorator="['desc']"></a-textarea>
33+
</a-form-item>
34+
</a-form>
3735
</template>
3836

3937
<script>
38+
import pick from 'lodash.pick'
39+
4040
export default {
4141
name: 'TaskForm',
42+
props: {
43+
record: {
44+
type: Object,
45+
default: null
46+
}
47+
},
4248
data () {
4349
return {
4450
labelCol: {
@@ -49,20 +55,24 @@ export default {
4955
xs: { span: 24 },
5056
sm: { span: 13 }
5157
},
52-
53-
visible: false,
5458
form: this.$form.createForm(this)
5559
}
5660
},
61+
mounted () {
62+
console.log('this.', this.record)
63+
if (this.record) {
64+
this.form.setFieldsValue(pick(this.record, ['taskName']))
65+
}
66+
},
5767
methods: {
58-
add () {
59-
this.visible = true
68+
onOk () {
69+
return new Promise(resolve => {
70+
resolve(true)
71+
})
6072
},
61-
edit (record) {
62-
const { form: { setFieldsValue } } = this
63-
this.visible = true
64-
this.$nextTick(() => {
65-
setFieldsValue({ taskName: 'test' })
73+
onCancel () {
74+
return new Promise(resolve => {
75+
resolve(true)
6676
})
6777
},
6878
handleSubmit () {

0 commit comments

Comments
 (0)