Files
onlyoffice-front/src/views/modules/AddFileModal.vue
T
2023-09-16 17:53:11 +08:00

89 lines
2.1 KiB
Vue

<template>
<a-modal
:title="title"
:visible="visible"
:confirm-loading="confirmLoading"
ok-text="确定"
cancel-text="取消"
@ok="handleOk"
@cancel="handleCancel">
<a-spin :spinning="confirmLoading">
<a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 18 }">
<a-form-item label="文档名称">
<a-input v-decorator="['model', validatorRules.model]" :maxLength="50" />
</a-form-item>
</a-form>
</a-spin>
</a-modal>
</template>
<script>
import { addFile } from '../../api/fileApi.js'
export default {
name: 'AddFileModal',
data () {
return {
title: '新增',
visible: false,
confirmLoading: false,
form: this.$form.createForm(this),
validatorRules: {
model: {
rules: [{ required: true, message: '请输入文档名称' }],
validateTrigger: 'blur'
}
},
model: {}
}
},
methods: {
add () {
this.visible = true
},
handleOk () {
this.form.validateFields((errors, values) => {
if (!errors) {
const formData = Object.assign(this.model, values)
this.confirmLoading = true
addFile(formData).then(res => {
if (res.success) {
const data = res.result || {}
this.$message.success(res.message)
this.$emit('ok')
this.close()
const { href } = this.$router.resolve({
path: '/editor',
query: {
filePath: data.editFilePath,
fileName: data.fileName,
fileType: 'docx',
fileId: data.id,
key: data.id
}
})
window.open(href, '_blank')
} else {
this.$message.warn(res.message)
}
}).finally(() => {
this.confirmLoading = false
})
}
})
},
handleCancel () {
this.close()
},
close () {
this.visible = false
this.form.resetFields()
}
}
}
</script>
<style scoped>
</style>