You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

153 lines
3.8 KiB

<template>
<div>
<vxe-modal
:z-index="zIndex"
:value="isShow"
show-footer
title="公共文件柜"
show-confirm-button
:width="600"
:height="400"
:fullscreen="$store.getters.device === 'mobile'"
esc-closable
@input="e => $emit('update:isShow',e)"
>
<el-form ref="elForm" :model="form" :rules="rules" label-position="top" label-width="100">
<el-form-item label="所属栏目" prop="document_menu_id" required>
<Treeselect
v-model="form.document_menu_id"
:options="list"
:multiple="false"
no-children-text="无子菜单"
:normalizer="node => ({
id: node.id,
label: node.name,
children: node.children,
isDefaultExpanded: true
})"
/>
</el-form-item>
<el-form-item label="名称" prop="name" required>
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="文件" prop="file_id">
<el-upload
:action="action"
:headers="{
Authorization: `Bearer ${getToken()}`
}"
:before-upload="beforeUpload"
:on-success="uploadSuccess"
multiple
:file-list="fileList">
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip">上传文件不超过10Mb</div>
</el-upload>
</el-form-item>
<el-form-item label="排序" prop="myindex">
<el-input-number v-model="form.myindex" :controls="false" :precision="0" />
</el-form-item>
</el-form>
<template #footer>
<el-button type="primary" :loading="loading" @click="submit">确认</el-button>
</template>
</vxe-modal>
</div>
</template>
<script>
import { getToken } from '@/utils/auth'
import { save } from '@/api/document'
import { PopupManager } from "element-ui/lib/utils/popup";
export default {
props: {
list: {
type: Array,
default: () => []
},
isShow: {
type: Boolean,
default: false,
required: true
},
users: {
type: Array,
default: () => []
}
},
data() {
return {
action: process.env.VUE_APP_UPLOAD_API,
fileList: [],
zIndex: PopupManager.nextZIndex(),
loading: false,
form: {
document_menu_id: '',
name: '',
file_id: '',
update_children_ids: '',
myindex: ''
},
rules: {
document_menu_id: [
{ required: true, message: '请选择栏目' }
],
name: [
{ required: true, message: '请输入名称' }
]
}
}
},
computed: {
},
watch: {
isShow(newVal) {
if(newVal) {
this.zIndex = PopupManager.nextZIndex()
}
}
},
methods: {
getToken,
beforeUpload(file) {
const isLt10M = file.size / 1024 / 1024 < 10
if (!isLt10M) {
this.$message.error('上传文件大小不能超过 10MB!')
}
return isLt10M
},
uploadSuccess(response, file, fileList) {
this.fileList = fileList
},
submit() {
this.$refs['elForm'].validate(async valid => {
if (valid) {
this.loading = true
try {
await Promise.all(this.fileList.map(i => save({
...this.form,
file_id: i.response?.data?.id
})))
// await save(this.form)
this.$message.success('新增成功')
this.$emit('refresh')
this.$emit('update:isShow', false)
this.loading = false
this.$refs['elForm'].resetFields()
} catch (err) {
this.loading = false
}
}
})
}
}
}
</script>
<style scoped lang="scss">
</style>