Skip to content
This repository has been archived by the owner on Jan 21, 2024. It is now read-only.

pref: created ReactiveButton component. #216

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@

<body>
<noscript>
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to
<strong>We're sorry but halo admin client doesn't work properly without JavaScript enabled. Please enable it to
continue.</strong>
</noscript>
<div id="app">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Attachment/AttachmentSelectDrawer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
align="middle"
>
<a-input-search
placeholder="搜索附件"
placeholder="搜索"
v-model="queryParam.keyword"
@search="handleQuery()"
enterButton
Expand Down
89 changes: 89 additions & 0 deletions src/components/Button/ReactiveButton.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
<template>
<a-button
:type="computedType"
@click="handleClick"
:icon="computedIcon"
:loading="loading"
>{{ computedText }}</a-button>
</template>
<script>
export default {
name: 'ReactiveButton',
props: {
type: {
type: String,
default: 'primary'
},
icon: {
type: String,
default: null
},
loading: {
type: Boolean,
default: false
},
errored: {
type: Boolean,
default: false
},
text: {
type: String,
default: ''
},
loadedText: {
type: String,
default: ''
},
erroredText: {
type: String,
default: ''
}
},
data() {
return {
loaded: false,
hasError: false
}
},
watch: {
loading(value) {
if (!value) {
this.loaded = true
if (this.errored) {
this.hasError = true
}
setTimeout(() => {
this.loaded = false
this.hasError = false
this.$emit('callback')
}, 800)
}
}
},
computed: {
computedType() {
if (this.loaded) {
return this.hasError ? 'danger' : this.type
}
return this.type
},
computedIcon() {
if (this.loaded) {
return this.hasError ? 'close-circle' : 'check-circle'
}
return this.icon
},
computedText() {
if (this.loaded) {
return this.hasError ? this.erroredText : this.loadedText
}
return this.text
}
},
methods: {
handleClick() {
this.$emit('click')
}
}
}
</script>
1 change: 0 additions & 1 deletion src/components/Editor/MarkdownEditor.vue
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,6 @@ export default {
var responseObject = response.data
var HaloEditor = this.$refs.md
HaloEditor.$img2Url(pos, encodeURI(responseObject.data.path))
this.$message.success('图片上传成功!')
})
},
handleSaveDraft() {
Expand Down
2 changes: 1 addition & 1 deletion src/components/SettingDrawer/setting.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const updateTheme = primaryColor => {
javascriptEnabled: true
};
`
lessScriptNode.src = 'https://cdnjs.loli.net/ajax/libs/less.js/3.8.1/less.min.js'
lessScriptNode.src = 'https://cdn.jsdelivr.net/npm/less@3.8.1/dist/less.min.js'
lessScriptNode.async = true
lessScriptNode.onload = () => {
buildIt()
Expand Down
30 changes: 24 additions & 6 deletions src/components/Upload/FilePondUpload.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,9 +7,9 @@
:allow-multiple="multiple"
:allowRevert="false"
:accepted-file-types="accept"
:maxParallelUploads="loadOptions?options.attachment_upload_max_parallel_uploads:1"
:allowImagePreview="loadOptions?options.attachment_upload_image_preview_enable:false"
:maxFiles="loadOptions?options.attachment_upload_max_files:1"
:maxParallelUploads="maxParallelUploads"
:allowImagePreview="allowImagePreview"
:maxFiles="maxFiles"
labelFileProcessing="上传中"
labelFileProcessingComplete="上传完成"
labelFileProcessingAborted="取消上传"
Expand Down Expand Up @@ -77,6 +77,27 @@ export default {
default: true
}
},
computed: {
...mapGetters(['options']),
maxParallelUploads() {
if (this.options && this.options.length > 0) {
return this.options.attachment_upload_max_parallel_uploads
}
return 1
},
allowImagePreview() {
if (this.options && this.options.length > 0) {
return this.options.attachment_upload_image_preview_enable
}
return false
},
maxFiles() {
if (this.options && this.options.length > 0) {
return this.options.attachment_upload_max_files
}
return 1
}
},
data: function() {
return {
server: {
Expand Down Expand Up @@ -120,9 +141,6 @@ export default {
fileList: []
}
},
computed: {
...mapGetters(['options'])
},
methods: {
handleFilePondInit() {
this.$log.debug('FilePond has initialized')
Expand Down
4 changes: 3 additions & 1 deletion src/components/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,14 @@ import Ellipsis from '@/components/Ellipsis'
import FooterToolbar from '@/components/FooterToolbar'
import FilePondUpload from '@/components/Upload/FilePondUpload'
import AttachmentSelectDrawer from './Attachment/AttachmentSelectDrawer'
import ReactiveButton from './Button/ReactiveButton'

const _components = {
Ellipsis,
FooterToolbar,
FilePondUpload,
AttachmentSelectDrawer
AttachmentSelectDrawer,
ReactiveButton
}

const components = {}
Expand Down
4 changes: 4 additions & 0 deletions src/utils/util.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,3 +40,7 @@ export function timeAgo(time) {
export function isObject(value) {
return value && typeof value === 'object' && value.constructor === Object
}

export function datetimeFormat(value, pattern = 'YYYY-MM-DD HH:mm') {
return moment(value).format(pattern)
}
3 changes: 2 additions & 1 deletion src/views/attachment/AttachmentList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -327,7 +327,7 @@ export default {
this.$contextmenu({
items: [
{
label: '复制图片链接',
label: `${this.handleJudgeMediaType(item) ? '复制图片链接' : '复制文件链接'}`,
onClick: () => {
const text = `${encodeURI(item.path)}`
this.$copyText(text)
Expand All @@ -343,6 +343,7 @@ export default {
divided: true
},
{
disabled: !this.handleJudgeMediaType(item),
label: '复制 Markdown 格式链接',
onClick: () => {
const text = `![${item.name}](${encodeURI(item.path)})`
Expand Down
33 changes: 27 additions & 6 deletions src/views/attachment/components/AttachmentDetailDrawer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,15 @@
okText="确定"
cancelText="取消"
>
<a-button type="danger">删除</a-button>
<ReactiveButton
type="danger"
@callback="handleDeletedCallback"
:loading="deleting"
:errored="deleteErrored"
text="删除"
loadedText="删除成功"
erroredText="删除失败"
></ReactiveButton>
</a-popconfirm>
</div>
</a-drawer>
Expand Down Expand Up @@ -173,6 +181,8 @@ export default {
videoPreviewVisible: false,
nonsupportPreviewVisible: false,
player: {},
deleting: false,
deleteErrored: false,
videoOptions: {
lang: 'zh-cn',
video: {
Expand Down Expand Up @@ -214,11 +224,22 @@ export default {
},
methods: {
handleDeleteAttachment() {
attachmentApi.delete(this.attachment.id).then(response => {
this.$message.success('删除成功!')
this.$emit('delete', this.attachment)
this.onClose()
})
this.deleting = true
attachmentApi
.delete(this.attachment.id)
.catch(() => {
this.deleteErrored = true
})
.finally(() => {
setTimeout(() => {
this.deleting = false
}, 400)
})
},
handleDeletedCallback() {
this.$emit('delete', this.attachment)
this.deleteErrored = false
this.onClose()
},
doUpdateAttachment() {
if (!this.attachment.name) {
Expand Down
75 changes: 48 additions & 27 deletions src/views/comment/components/CommentTab.vue
Original file line number Diff line number Diff line change
Expand Up @@ -402,23 +402,31 @@
destroyOnClose
>
<template slot="footer">
<a-button
key="submit"
<ReactiveButton
type="primary"
@click="handleCreateClick"
>
回复
</a-button>
@callback="handleRepliedCallback"
:loading="replying"
:errored="replyErrored"
text="回复"
loadedText="回复成功"
erroredText="回复失败"
></ReactiveButton>
</template>
<a-form layout="vertical">
<a-form-item>
<a-form-model
ref="replyCommentForm"
:model="replyComment"
:rules="replyCommentRules"
layout="vertical"
>
<a-form-model-item prop="content">
<a-input
type="textarea"
:autoSize="{ minRows: 8 }"
v-model.trim="replyComment.content"
/>
</a-form-item>
</a-form>
</a-form-model-item>
</a-form-model>
</a-modal>
<!-- <CommentDetail
v-model="commentDetailVisible"
Expand Down Expand Up @@ -551,9 +559,14 @@ export default {
comments: [],
selectedComment: {},
replyComment: {},
replyCommentRules: {
content: [{ required: true, message: '* 内容不能为空', trigger: ['change', 'blur'] }]
},
loading: false,
commentStatus: commentApi.commentStatus,
commentDetailVisible: false
commentDetailVisible: false,
replying: false,
replyErrored: false
}
},
created() {
Expand Down Expand Up @@ -625,24 +638,32 @@ export default {
}
},
handleCreateClick() {
if (!this.replyComment.content) {
this.$notification['error']({
message: '提示',
description: '评论内容不能为空!'
})
return
const _this = this
_this.$refs.replyCommentForm.validate(valid => {
if (valid) {
_this.replying = true
commentApi
.create(_this.type, _this.replyComment)
.catch(() => {
_this.replyErrored = true
})
.finally(() => {
setTimeout(() => {
_this.replying = false
}, 400)
})
}
})
},
handleRepliedCallback() {
if (this.replyErrored) {
this.replyErrored = false
} else {
this.replyComment = {}
this.selectedComment = {}
this.replyCommentVisible = false
this.handleListComments()
}
commentApi
.create(this.type, this.replyComment)
.then(response => {
this.$message.success('回复成功!')
this.replyComment = {}
this.selectedComment = {}
this.replyCommentVisible = false
})
.finally(() => {
this.handleListComments()
})
},
handlePaginationChange(page, pageSize) {
this.$log.debug(`Current: ${page}, PageSize: ${pageSize}`)
Expand Down
Loading