4 changed files with 1899 additions and 1974 deletions
File diff suppressed because it is too large
@ -1,414 +1,368 @@ |
|||
<template> |
|||
<div> |
|||
<Row class="operation" v-if="!showOnly"> |
|||
<Button @click="add" type="primary" icon="md-add">添加文件夹</Button> |
|||
<Dropdown @on-click="handleTreeDropdown"> |
|||
<Button> |
|||
更多操作 |
|||
<Icon type="md-arrow-dropdown" /> |
|||
</Button> |
|||
<DropdownMenu slot="list"> |
|||
<DropdownItem |
|||
name="edit" |
|||
:disabled="selectNode.id == 0 || selectNode.id == -1" |
|||
>编辑文件夹</DropdownItem |
|||
> |
|||
<DropdownItem |
|||
name="del" |
|||
:disabled="selectNode.id == 0 || selectNode.id == -1" |
|||
>删除文件夹</DropdownItem |
|||
> |
|||
<DropdownItem name="refresh">刷新</DropdownItem> |
|||
</DropdownMenu> |
|||
</Dropdown> |
|||
</Row> |
|||
<Alert show-icon v-if="!showOnly"> |
|||
当前选择： |
|||
<span class="select-title">{{ editTitle }}</span> |
|||
<a |
|||
class="select-clear" |
|||
v-if="editTitle && selectNode.id != '0'" |
|||
@click="cancelEdit" |
|||
>取消选择</a |
|||
> |
|||
</Alert> |
|||
<Input |
|||
v-model="searchKey" |
|||
suffix="ios-search" |
|||
@on-change="search" |
|||
placeholder="输入搜索文件夹名称" |
|||
clearable |
|||
/> |
|||
<div style="position: relative"> |
|||
<div class="tree-bar" :style="{ maxHeight: maxHeight }"> |
|||
<Tree |
|||
ref="tree" |
|||
:data="data" |
|||
:load-data="loadData" |
|||
:render="renderContent" |
|||
@on-check-change="changeSelect" |
|||
@on-select-change="selectTree" |
|||
></Tree> |
|||
</div> |
|||
<Spin size="large" fix v-if="loading"></Spin> |
|||
</div> |
|||
<div> |
|||
<Row class="operation" v-if="!showOnly"> |
|||
<Button @click="add" type="primary" icon="md-add">添加文件夹</Button> |
|||
<Dropdown @on-click="handleTreeDropdown"> |
|||
<Button> |
|||
更多操作 |
|||
<Icon type="md-arrow-dropdown" /> |
|||
</Button> |
|||
<DropdownMenu slot="list"> |
|||
<DropdownItem name="edit" :disabled="selectNode.id == 0 || selectNode.id == -1">编辑文件夹</DropdownItem> |
|||
<DropdownItem name="del" :disabled="selectNode.id == 0 || selectNode.id == -1">删除文件夹</DropdownItem> |
|||
<DropdownItem name="refresh">刷新</DropdownItem> |
|||
</DropdownMenu> |
|||
</Dropdown> |
|||
</Row> |
|||
<Alert show-icon v-if="!showOnly"> |
|||
当前选择： |
|||
<span class="select-title">{{ editTitle }}</span> |
|||
<a class="select-clear" v-if="editTitle && selectNode.id != '0'" @click="cancelEdit">取消选择</a> |
|||
</Alert> |
|||
<Input v-model="searchKey" suffix="ios-search" @on-change="search" placeholder="输入搜索文件夹名称" clearable /> |
|||
<div style="position: relative"> |
|||
<div class="tree-bar" :style="{ maxHeight: maxHeight }"> |
|||
<Tree ref="tree" :data="data" :load-data="loadData" :render="renderContent" |
|||
@on-check-change="changeSelect" @on-select-change="selectTree"></Tree> |
|||
</div> |
|||
<Spin size="large" fix v-if="loading"></Spin> |
|||
</div> |
|||
|
|||
<Modal |
|||
:title="modalTitle" |
|||
v-model="modalVisible" |
|||
:mask-closable="false" |
|||
:width="500" |
|||
> |
|||
<Form ref="form" :model="form" :label-width="85" :rules="formValidate"> |
|||
<FormItem label="上级节点：" |
|||
>{{ form.parentTitle }} |
|||
<Tooltip |
|||
:content=" |
|||
<Modal :title="modalTitle" v-model="modalVisible" :mask-closable="false" :width="500"> |
|||
<Form ref="form" :model="form" :label-width="85" :rules="formValidate"> |
|||
<FormItem label="上级节点：">{{ form.parentTitle }} |
|||
<Tooltip :content=" |
|||
selectNode.id == '0' |
|||
? '若需添加子目录，请先点击选择一个文件夹' |
|||
: '若需添加一级目录，请先取消选择当前文目录' |
|||
" |
|||
placement="right" |
|||
transfer |
|||
max-width="290" |
|||
style="display: inline-block !important" |
|||
> |
|||
<Icon |
|||
type="md-help-circle" |
|||
size="20" |
|||
color="#c5c5c5" |
|||
style="margin-left: 10px; cursor: pointer" |
|||
/> |
|||
</Tooltip> |
|||
</FormItem> |
|||
<FormItem label="文件夹名" prop="title"> |
|||
<Input v-model="form.title" /> |
|||
</FormItem> |
|||
<FormItem label="排序值" prop="sortOrder"> |
|||
<Tooltip |
|||
trigger="hover" |
|||
placement="right" |
|||
content="值越小越靠前，支持小数" |
|||
> |
|||
<InputNumber |
|||
:max="1000" |
|||
:min="0" |
|||
v-model="form.sortOrder" |
|||
></InputNumber> |
|||
</Tooltip> |
|||
</FormItem> |
|||
</Form> |
|||
<div slot="footer"> |
|||
<Button type="text" @click="modalVisible = false">取消</Button> |
|||
<Button type="primary" :loading="submitLoading" @click="handelSubmit" |
|||
>提交</Button |
|||
> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
" placement="right" transfer max-width="290" style="display: inline-block !important"> |
|||
<Icon type="md-help-circle" size="20" color="#c5c5c5" |
|||
style="margin-left: 10px; cursor: pointer" /> |
|||
</Tooltip> |
|||
</FormItem> |
|||
<FormItem label="文件夹名" prop="title"> |
|||
<Input v-model="form.title" /> |
|||
</FormItem> |
|||
<FormItem label="排序值" prop="sortOrder"> |
|||
<Tooltip trigger="hover" placement="right" content="值越小越靠前，支持小数"> |
|||
<InputNumber :max="1000" :min="0" v-model="form.sortOrder"></InputNumber> |
|||
</Tooltip> |
|||
</FormItem> |
|||
</Form> |
|||
<div slot="footer"> |
|||
<Button type="text" @click="modalVisible = false">取消</Button> |
|||
<Button type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button> |
|||
</div> |
|||
</Modal> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getFileCate, |
|||
addFileCate, |
|||
editFileCate, |
|||
trashFileCate, |
|||
searchFileCate, |
|||
} from "@/api/index"; |
|||
export default { |
|||
name: "fileCategory", |
|||
props: { |
|||
showOnly: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, // 树加载状态 |
|||
maxHeight: "500px", |
|||
searchKey: "", // 搜索树 |
|||
selectNode: {}, |
|||
selectList: [], // 多选数据 |
|||
modalVisible: false, |
|||
modalTitle: "", |
|||
editTitle: "", |
|||
submitLoading: false, |
|||
form: { |
|||
title: "", |
|||
sortOrder: 0, |
|||
parentId: 0, |
|||
}, |
|||
formValidate: { |
|||
// 表单验证规则 |
|||
title: [{ required: true, message: "请输入", trigger: "blur" }], |
|||
sortOrder: [ |
|||
{ |
|||
required: true, |
|||
type: "number", |
|||
message: "请输入排序值", |
|||
trigger: "change", |
|||
}, |
|||
], |
|||
}, |
|||
data: [], |
|||
editData: {}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getParentList(); |
|||
this.editTitle = "未归档"; |
|||
this.selectNode = { |
|||
id: "0", |
|||
title: "未归档", |
|||
}; |
|||
this.$emit("on-select", this.selectNode); |
|||
}, |
|||
renderContent(h, { root, node, data }) { |
|||
let icon = "md-folder-open"; |
|||
if (data.id == "0") { |
|||
icon = "md-pricetags"; |
|||
} else if (data.id == "-1") { |
|||
icon = "md-star-outline"; |
|||
} |
|||
return h("span", [ |
|||
h( |
|||
"span", |
|||
import { |
|||
getFileCate, |
|||
addFileCate, |
|||
editFileCate, |
|||
trashFileCate, |
|||
searchFileCate, |
|||
} from "@/api/index"; |
|||
export default { |
|||
name: "fileCategory", |
|||
props: { |
|||
showOnly: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
loading: false, // 树加载状态 |
|||
maxHeight: "500px", |
|||
searchKey: "", // 搜索树 |
|||
selectNode: {}, |
|||
selectList: [], // 多选数据 |
|||
modalVisible: false, |
|||
modalTitle: "", |
|||
editTitle: "", |
|||
submitLoading: false, |
|||
form: { |
|||
title: "", |
|||
sortOrder: 0, |
|||
parentId: 0, |
|||
}, |
|||
formValidate: { |
|||
// 表单验证规则 |
|||
title: [{ |
|||
required: true, |
|||
message: "请输入", |
|||
trigger: "blur" |
|||
}], |
|||
sortOrder: [{ |
|||
required: true, |
|||
type: "number", |
|||
message: "请输入排序值", |
|||
trigger: "change", |
|||
}, ], |
|||
}, |
|||
data: [], |
|||
editData: {}, |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getParentList(); |
|||
this.editTitle = "未归档"; |
|||
this.selectNode = { |
|||
id: "0", |
|||
title: "未归档", |
|||
}; |
|||
this.$emit("on-select", this.selectNode); |
|||
}, |
|||
renderContent(h, { |
|||
root, |
|||
node, |
|||
data |
|||
}) { |
|||
let icon = "md-folder-open"; |
|||
if (data.id == "0") { |
|||
icon = "md-pricetags"; |
|||
} else if (data.id == "-1") { |
|||
icon = "md-star-outline"; |
|||
} |
|||
return h("span", [ |
|||
h( |
|||
"span", |
|||
|
|||
[ |
|||
h("Icon", { |
|||
props: { |
|||
type: icon, |
|||
size: 16, |
|||
}, |
|||
style: { |
|||
"margin-right": "8px", |
|||
}, |
|||
}), |
|||
h("span", data.title), |
|||
] |
|||
), |
|||
]); |
|||
}, |
|||
getParentList() { |
|||
this.loading = true; |
|||
let param = { |
|||
parentId: 0, |
|||
delFlag: 0, |
|||
}; |
|||
getFileCate(param).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
res.result.forEach(function (e) { |
|||
if (e.isParent) { |
|||
e.loading = false; |
|||
e.children = []; |
|||
e._loading = false; |
|||
} |
|||
}); |
|||
this.data = res.result; |
|||
this.data.unshift( |
|||
{ |
|||
id: "0", |
|||
title: "未归档", |
|||
selected: true, |
|||
}, |
|||
{ |
|||
id: "-1", |
|||
title: "收藏夹", |
|||
selected: false, |
|||
} |
|||
); |
|||
} |
|||
}); |
|||
}, |
|||
loadData(item, callback) { |
|||
let param = { |
|||
parentId: item.id, |
|||
delFlag: 0, |
|||
}; |
|||
getFileCate(param).then((res) => { |
|||
if (res.success) { |
|||
res.result.forEach(function (e) { |
|||
if (e.isParent) { |
|||
e.loading = false; |
|||
e.children = []; |
|||
e._loading = false; |
|||
} |
|||
}); |
|||
callback(res.result); |
|||
} |
|||
}); |
|||
}, |
|||
search() { |
|||
// 搜索树 |
|||
if (this.searchKey) { |
|||
this.loading = true; |
|||
searchFileCate({ title: this.searchKey }).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
this.data = res.result; |
|||
} |
|||
}); |
|||
} else { |
|||
// 为空重新加载 |
|||
this.getParentList(); |
|||
} |
|||
}, |
|||
selectTree(v) { |
|||
if (v.length > 0) { |
|||
this.$refs.form.resetFields(); |
|||
// 转换null为"" |
|||
for (let attr in v[0]) { |
|||
if (v[0][attr] == null) { |
|||
v[0][attr] = ""; |
|||
} |
|||
} |
|||
let str = JSON.stringify(v[0]); |
|||
let data = JSON.parse(str); |
|||
this.selectNode = data; |
|||
this.form = data; |
|||
this.editData = data; |
|||
this.editTitle = data.title; |
|||
this.$emit("on-select", this.selectNode); |
|||
} else { |
|||
this.cancelEdit(); |
|||
} |
|||
}, |
|||
cancelEdit() { |
|||
if (this.selectNode.id == "0") { |
|||
this.data[0].selected = true; |
|||
return; |
|||
} |
|||
let data = this.$refs.tree.getSelectedNodes()[0]; |
|||
if (data) { |
|||
data.selected = false; |
|||
} |
|||
this.$refs.form.resetFields(); |
|||
this.editData = {}; |
|||
// 取消选择后获取全部数据 |
|||
this.selectNode = { |
|||
id: "0", |
|||
title: "未归档", |
|||
}; |
|||
this.editTitle = "未归档"; |
|||
this.data[0].selected = true; |
|||
this.$emit("on-select", this.selectNode); |
|||
}, |
|||
changeSelect(v) { |
|||
this.selectList = v; |
|||
}, |
|||
handleTreeDropdown(name) { |
|||
if (name == "edit") { |
|||
this.edit(); |
|||
} else if (name == "del") { |
|||
this.del(); |
|||
} else if (name == "refresh") { |
|||
this.init(); |
|||
} |
|||
}, |
|||
add() { |
|||
this.modalType = 0; |
|||
if (this.selectNode.id == "0" || this.selectNode.id == "-1") { |
|||
// 一级目录 |
|||
this.modalTitle = "添加一级文件夹"; |
|||
this.form = { |
|||
parentId: "0", |
|||
parentTitle: "一级目录", |
|||
sortOrder: this.data.length + 1, |
|||
}; |
|||
} else { |
|||
// 子目录 |
|||
this.modalTitle = "添加子文件夹"; |
|||
if (!this.form.children) { |
|||
this.form.children = []; |
|||
} |
|||
this.form = { |
|||
parentId: this.selectNode.id, |
|||
parentTitle: this.selectNode.title, |
|||
sortOrder: this.form.children.length + 1, |
|||
}; |
|||
} |
|||
this.modalVisible = true; |
|||
}, |
|||
edit() { |
|||
if (this.selectNode.id == "0" || this.selectNode.id == "-1") { |
|||
this.$Message.warning("您还未选择要编辑的文件夹"); |
|||
return; |
|||
} |
|||
if (this.editData) { |
|||
this.form = this.editData; |
|||
} |
|||
this.modalType = 1; |
|||
this.modalTitle = "编辑文件夹"; |
|||
this.modalVisible = true; |
|||
}, |
|||
handelSubmit() { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
this.submitLoading = true; |
|||
if (this.modalType == 0) { |
|||
// 添加 避免编辑后传入id等数据 记得删除 |
|||
delete this.form.id; |
|||
addFileCate(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.getParentList(); |
|||
this.modalVisible = false; |
|||
} |
|||
}); |
|||
} else if (this.modalType == 1) { |
|||
// 编辑 |
|||
editFileCate(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.editTitle = this.form.title; |
|||
this.$Message.success("操作成功"); |
|||
this.getParentList(); |
|||
this.modalVisible = false; |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
del() { |
|||
if (this.selectNode.id == "0" || this.selectNode.id == "-1") { |
|||
this.$Message.warning("您还未选择要删除的文件夹"); |
|||
return; |
|||
} |
|||
this.$Modal.confirm({ |
|||
title: "确认删除", |
|||
loading: true, |
|||
content: |
|||
"您确认要将文件夹 " + |
|||
this.selectNode.title + |
|||
" 及其所有文件移入回收站， 7天内后自动彻底删除", |
|||
onOk: () => { |
|||
// 删除 |
|||
trashFileCate({ id: this.selectNode.id }).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.init(); |
|||
} |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// 计算高度 |
|||
let height = document.documentElement.clientHeight; |
|||
this.maxHeight = Number(height - 287) + "px"; |
|||
this.init(); |
|||
}, |
|||
}; |
|||
[ |
|||
h("Icon", { |
|||
props: { |
|||
type: icon, |
|||
size: 16, |
|||
}, |
|||
style: { |
|||
"margin-right": "8px", |
|||
}, |
|||
}), |
|||
h("span", data.title), |
|||
] |
|||
), |
|||
]); |
|||
}, |
|||
getParentList() { |
|||
this.loading = true; |
|||
let param = { |
|||
parentId: 0, |
|||
delFlag: 0, |
|||
}; |
|||
getFileCate(param).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
res.result.forEach(function(e) { |
|||
if (e.isParent) { |
|||
e.loading = false; |
|||
e.children = []; |
|||
e._loading = false; |
|||
} |
|||
}); |
|||
this.data = res.result; |
|||
this.data.unshift({ |
|||
id: "0", |
|||
title: "未归档", |
|||
selected: true, |
|||
}, { |
|||
id: "-1", |
|||
title: "收藏夹", |
|||
selected: false, |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
loadData(item, callback) { |
|||
let param = { |
|||
parentId: item.id, |
|||
delFlag: 0, |
|||
}; |
|||
getFileCate(param).then((res) => { |
|||
if (res.success) { |
|||
res.result.forEach(function(e) { |
|||
if (e.isParent) { |
|||
e.loading = false; |
|||
e.children = []; |
|||
e._loading = false; |
|||
} |
|||
}); |
|||
callback(res.result); |
|||
} |
|||
}); |
|||
}, |
|||
search() { |
|||
// 搜索树 |
|||
if (this.searchKey) { |
|||
this.loading = true; |
|||
searchFileCate({ |
|||
title: this.searchKey |
|||
}).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
this.data = res.result; |
|||
} |
|||
}); |
|||
} else { |
|||
// 为空重新加载 |
|||
this.getParentList(); |
|||
} |
|||
}, |
|||
selectTree(v) { |
|||
if (v.length > 0) { |
|||
this.$refs.form.resetFields(); |
|||
// 转换null为"" |
|||
for (let attr in v[0]) { |
|||
if (v[0][attr] == null) { |
|||
v[0][attr] = ""; |
|||
} |
|||
} |
|||
let str = JSON.stringify(v[0]); |
|||
let data = JSON.parse(str); |
|||
this.selectNode = data; |
|||
this.form = data; |
|||
this.editData = data; |
|||
this.editTitle = data.title; |
|||
this.$emit("on-select", this.selectNode); |
|||
} else { |
|||
this.cancelEdit(); |
|||
} |
|||
}, |
|||
cancelEdit() { |
|||
if (this.selectNode.id == "0") { |
|||
this.data[0].selected = true; |
|||
return; |
|||
} |
|||
let data = this.$refs.tree.getSelectedNodes()[0]; |
|||
if (data) { |
|||
data.selected = false; |
|||
} |
|||
this.$refs.form.resetFields(); |
|||
this.editData = {}; |
|||
// 取消选择后获取全部数据 |
|||
this.selectNode = { |
|||
id: "0", |
|||
title: "未归档", |
|||
}; |
|||
this.editTitle = "未归档"; |
|||
this.data[0].selected = true; |
|||
this.$emit("on-select", this.selectNode); |
|||
}, |
|||
changeSelect(v) { |
|||
this.selectList = v; |
|||
}, |
|||
handleTreeDropdown(name) { |
|||
if (name == "edit") { |
|||
this.edit(); |
|||
} else if (name == "del") { |
|||
this.del(); |
|||
} else if (name == "refresh") { |
|||
this.init(); |
|||
} |
|||
}, |
|||
add() { |
|||
this.modalType = 0; |
|||
if (this.selectNode.id == "0" || this.selectNode.id == "-1") { |
|||
// 一级目录 |
|||
this.modalTitle = "添加一级文件夹"; |
|||
this.form = { |
|||
parentId: "0", |
|||
parentTitle: "一级目录", |
|||
sortOrder: this.data.length + 1, |
|||
}; |
|||
} else { |
|||
// 子目录 |
|||
this.modalTitle = "添加子文件夹"; |
|||
if (!this.form.children) { |
|||
this.form.children = []; |
|||
} |
|||
this.form = { |
|||
parentId: this.selectNode.id, |
|||
parentTitle: this.selectNode.title, |
|||
sortOrder: this.form.children.length + 1, |
|||
}; |
|||
} |
|||
this.modalVisible = true; |
|||
}, |
|||
edit() { |
|||
if (this.selectNode.id == "0" || this.selectNode.id == "-1") { |
|||
this.$Message.warning("您还未选择要编辑的文件夹"); |
|||
return; |
|||
} |
|||
if (this.editData) { |
|||
this.form = this.editData; |
|||
} |
|||
this.modalType = 1; |
|||
this.modalTitle = "编辑文件夹"; |
|||
this.modalVisible = true; |
|||
}, |
|||
handelSubmit() { |
|||
this.$refs.form.validate((valid) => { |
|||
if (valid) { |
|||
this.submitLoading = true; |
|||
if (this.modalType == 0) { |
|||
// 添加 避免编辑后传入id等数据 记得删除 |
|||
delete this.form.id; |
|||
addFileCate(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.getParentList(); |
|||
this.modalVisible = false; |
|||
} |
|||
}); |
|||
} else if (this.modalType == 1) { |
|||
// 编辑 |
|||
editFileCate(this.form).then((res) => { |
|||
this.submitLoading = false; |
|||
if (res.success) { |
|||
this.editTitle = this.form.title; |
|||
this.$Message.success("操作成功"); |
|||
this.getParentList(); |
|||
this.modalVisible = false; |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
del() { |
|||
if (this.selectNode.id == "0" || this.selectNode.id == "-1") { |
|||
this.$Message.warning("您还未选择要删除的文件夹"); |
|||
return; |
|||
} |
|||
this.$Modal.confirm({ |
|||
title: "确认删除", |
|||
loading: true, |
|||
content: "您确认要将文件夹 " + |
|||
this.selectNode.title + |
|||
" 及其所有文件移入回收站， 7天内后自动彻底删除", |
|||
onOk: () => { |
|||
// 删除 |
|||
trashFileCate({ |
|||
id: this.selectNode.id |
|||
}).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.$Message.success("操作成功"); |
|||
this.init(); |
|||
} |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
// 计算高度 |
|||
let height = document.documentElement.clientHeight; |
|||
this.maxHeight = Number(height - 287) + "px"; |
|||
this.init(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
</style> |
|||
|
|||
</style> |
|||
@ -1,403 +1,373 @@ |
|||
<style lang="less"> |
|||
@import "@/styles/single-common.less"; |
|||
@import "@/styles/single-common.less"; |
|||
</style> |
|||
<template> |
|||
<div> |
|||
<Card> |
|||
<div slot="title"> |
|||
<div class="edit-head"> |
|||
<a @click="close" class="back-title"> |
|||
<Icon type="ios-arrow-back" />返回 |
|||
</a> |
|||
<div class="head-name">回收站</div> |
|||
<span></span> |
|||
<a @click="close" class="window-close"> |
|||
<Icon type="ios-close" size="31" class="ivu-icon-ios-close" /> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<Row class="operation" align="middle" justify="space-between"> |
|||
<div class="br"> |
|||
<Button @click="clear" type="error" icon="md-trash" |
|||
>清空回收站</Button |
|||
> |
|||
<Input |
|||
v-model="searchForm.title" |
|||
suffix="ios-search" |
|||
@on-change="getDataList" |
|||
placeholder="输入文件名搜索" |
|||
clearable |
|||
style="width: 250px" |
|||
/> |
|||
</div> |
|||
<div class="icons"> |
|||
<Tooltip content="刷新" placement="top" transfer> |
|||
<Icon |
|||
type="md-refresh" |
|||
size="18" |
|||
class="item" |
|||
@click="getDataList" |
|||
/> |
|||
</Tooltip> |
|||
<Tooltip |
|||
:content="openTip ? '关闭提示' : '开启提示'" |
|||
placement="top" |
|||
transfer |
|||
> |
|||
<Icon |
|||
type="md-bulb" |
|||
size="18" |
|||
class="item tip" |
|||
@click="openTip = !openTip" |
|||
/> |
|||
</Tooltip> |
|||
</div> |
|||
</Row> |
|||
<Alert show-icon v-show="openTip"> |
|||
已选择 |
|||
<span class="select-count">{{ selectList.length }}</span> 项 |
|||
<a class="select-clear" @click="clearSelectAll">清空</a> |
|||
</Alert> |
|||
<Table |
|||
:loading="loading" |
|||
border |
|||
:columns="columns" |
|||
:data="data" |
|||
ref="table" |
|||
sortable="custom" |
|||
@on-sort-change="changeSort" |
|||
@on-selection-change="changeSelect" |
|||
></Table> |
|||
<Row type="flex" justify="end" class="page"> |
|||
<Page |
|||
:current="searchForm.pageNumber" |
|||
:total="total" |
|||
:page-size="searchForm.pageSize" |
|||
@on-change="changePage" |
|||
size="small" |
|||
show-total |
|||
show-elevator |
|||
></Page> |
|||
</Row> |
|||
</Card> |
|||
</div> |
|||
<div> |
|||
<Card> |
|||
<div slot="title"> |
|||
<div class="edit-head"> |
|||
<a @click="close" class="back-title"> |
|||
<Icon type="ios-arrow-back" />返回 |
|||
</a> |
|||
<div class="head-name">回收站</div> |
|||
<span></span> |
|||
<a @click="close" class="window-close"> |
|||
<Icon type="ios-close" size="31" class="ivu-icon-ios-close" /> |
|||
</a> |
|||
</div> |
|||
</div> |
|||
<Row class="operation" align="middle" justify="space-between"> |
|||
<div class="br"> |
|||
<Button @click="clear" type="error" icon="md-trash">清空回收站</Button> |
|||
<Input v-model="searchForm.title" suffix="ios-search" @on-change="getDataList" placeholder="输入文件名搜索" |
|||
clearable style="width: 250px" /> |
|||
</div> |
|||
<div class="icons"> |
|||
<Tooltip content="刷新" placement="top" transfer> |
|||
<Icon type="md-refresh" size="18" class="item" @click="getDataList" /> |
|||
</Tooltip> |
|||
<Tooltip :content="openTip ? '关闭提示' : '开启提示'" placement="top" transfer> |
|||
<Icon type="md-bulb" size="18" class="item tip" @click="openTip = !openTip" /> |
|||
</Tooltip> |
|||
</div> |
|||
</Row> |
|||
<Alert show-icon v-show="openTip"> |
|||
已选择 |
|||
<span class="select-count">{{ selectList.length }}</span> 项 |
|||
<a class="select-clear" @click="clearSelectAll">清空</a> |
|||
</Alert> |
|||
<Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" |
|||
@on-sort-change="changeSort" @on-selection-change="changeSelect"></Table> |
|||
<Row type="flex" justify="end" class="page"> |
|||
<Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" |
|||
@on-change="changePage" size="small" show-total show-elevator></Page> |
|||
</Row> |
|||
</Card> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getFileCate, |
|||
getUserFileListData, |
|||
trashFileCate, |
|||
trashFile, |
|||
deleteUserFile, |
|||
clearTrashFile, |
|||
deleteFileCate, |
|||
clearTrashFileCate, |
|||
} from "@/api/index"; |
|||
import { vi } from "date-fns/locale"; |
|||
export default { |
|||
name: "trash", |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
openTip: true, |
|||
selectList: [], |
|||
searchForm: { |
|||
// 搜索框对应data对象 |
|||
title: "", |
|||
pageNumber: 1, // 当前页数 |
|||
pageSize: 10, // 页面大小 |
|||
sort: "updateTime", // 默认排序字段 |
|||
order: "desc", // 默认排序方式 |
|||
delFlag: 2, |
|||
}, |
|||
columns: [ |
|||
// 表头 |
|||
{ |
|||
type: "selection", |
|||
width: 60, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
type: "index", |
|||
width: 60, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "文件名", |
|||
key: "title", |
|||
minWidth: 150, |
|||
sortable: true, |
|||
render: (h, params) => { |
|||
return h( |
|||
"div", |
|||
{ |
|||
style: { |
|||
display: "flex", |
|||
"align-items": "center", |
|||
}, |
|||
}, |
|||
[ |
|||
h("img", { |
|||
attrs: { |
|||
src: this.getFileIcon(params.row), |
|||
}, |
|||
style: { |
|||
width: "30px", |
|||
height: "40px", |
|||
margin: "0 10px 0 0", |
|||
"object-fit": "contain", |
|||
}, |
|||
}), |
|||
h("span", params.row.title), |
|||
] |
|||
); |
|||
}, |
|||
}, |
|||
{ |
|||
title: "文件类型", |
|||
key: "type", |
|||
width: 120, |
|||
sortable: true, |
|||
tooltip: true, |
|||
}, |
|||
{ |
|||
title: "文件大小", |
|||
key: "size", |
|||
width: 120, |
|||
align: "center", |
|||
sortable: true, |
|||
render: (h, params) => { |
|||
if (!params.row.isFolder) { |
|||
let m = this.util.getFileSize(params.row.size); |
|||
return h("span", m); |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
title: "创建时间", |
|||
key: "createTime", |
|||
width: 180, |
|||
sortable: true, |
|||
}, |
|||
{ |
|||
title: "更新时间", |
|||
key: "createTime", |
|||
width: 180, |
|||
sortable: true, |
|||
sortType: "desc", |
|||
}, |
|||
{ |
|||
title: "剩余时间", |
|||
key: "restDelTime", |
|||
width: 150, |
|||
sortable: true, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
key: "action", |
|||
align: "center", |
|||
fixed: "right", |
|||
width: 170, |
|||
render: (h, params) => { |
|||
return h("div", [ |
|||
h( |
|||
"a", |
|||
{ |
|||
on: { |
|||
click: () => { |
|||
this.revert(params.row); |
|||
}, |
|||
}, |
|||
}, |
|||
"恢复" |
|||
), |
|||
h("Divider", { |
|||
props: { |
|||
type: "vertical", |
|||
}, |
|||
}), |
|||
h( |
|||
"a", |
|||
{ |
|||
on: { |
|||
click: () => { |
|||
this.delete(params.row); |
|||
}, |
|||
}, |
|||
}, |
|||
"彻底删除" |
|||
), |
|||
]); |
|||
}, |
|||
}, |
|||
], |
|||
data: [], // 表单数据 |
|||
total: 0, // 表单数据总数 |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getDataList(); |
|||
}, |
|||
getDataList() { |
|||
this.loading = true; |
|||
getFileCate(this.searchForm).then((res) => { |
|||
if (res.success) { |
|||
res.result.forEach((e) => { |
|||
e.isFolder = true; |
|||
e.type = "文件夹"; |
|||
}); |
|||
this.data = res.result; |
|||
let totalElements = res.result.length; |
|||
getUserFileListData(this.searchForm).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
this.data = this.data.concat(res.result.content); |
|||
this.total = totalElements + res.result.totalElements; |
|||
if (this.data.length == 0 && this.searchForm.pageNumber > 1) { |
|||
this.searchForm.pageNumber -= 1; |
|||
this.getDataList(); |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
this.loading = false; |
|||
} |
|||
}); |
|||
}, |
|||
getFileIcon(v) { |
|||
if (!v) { |
|||
return ""; |
|||
} |
|||
if (v.isFolder) { |
|||
return require("@/assets/icon/folder.png"); |
|||
} |
|||
let url = ""; |
|||
if (!v.type) { |
|||
url = require("@/assets/icon/file-unknown.png"); |
|||
} else if (v.type.indexOf("image") >= 0) { |
|||
url = v.url; |
|||
} else if (v.type.indexOf("video") >= 0) { |
|||
url = require("@/assets/icon/file-video.png"); |
|||
} else if (v.type.indexOf("audio") >= 0) { |
|||
url = require("@/assets/icon/mp3.png"); |
|||
} else if (v.type.indexOf("pdf") >= 0) { |
|||
url = require("@/assets/icon/pdf.png"); |
|||
} else if (v.type.indexOf("word") >= 0) { |
|||
url = require("@/assets/icon/word.png"); |
|||
} else if ( |
|||
v.type.indexOf("sheet") >= 0 || |
|||
v.fkey.indexOf(".xlsx") >= 0 || |
|||
v.fkey.indexOf(".xls") >= 0 |
|||
) { |
|||
url = require("@/assets/icon/xls.png"); |
|||
} else if (v.type.indexOf("presentation") >= 0) { |
|||
url = require("@/assets/icon/ppt.png"); |
|||
} else if ( |
|||
v.type.indexOf("zip") >= 0 || |
|||
v.type.indexOf("rar") >= 0 || |
|||
v.type.indexOf("7z") >= 0 |
|||
) { |
|||
url = require("@/assets/icon/zip.png"); |
|||
} else if (v.type.indexOf("text") >= 0 || v.type.indexOf("octet") >= 0) { |
|||
url = require("@/assets/icon/file.png"); |
|||
} else { |
|||
url = require("@/assets/icon/file.png"); |
|||
} |
|||
return url; |
|||
}, |
|||
clearSelectAll() { |
|||
this.$refs.table.selectAll(false); |
|||
}, |
|||
changePage(v) { |
|||
this.searchForm.pageNumber = v; |
|||
this.getDataList(); |
|||
this.clearSelectAll(); |
|||
}, |
|||
changeSort(e) { |
|||
this.searchForm.sort = e.key; |
|||
this.searchForm.order = e.order; |
|||
if (e.order == "normal") { |
|||
this.searchForm.order = ""; |
|||
} |
|||
this.getDataList(); |
|||
}, |
|||
clear() { |
|||
this.$Modal.confirm({ |
|||
title: "请谨慎进行此操作！", |
|||
content: "确认彻底清空回收站所有文件？", |
|||
loading: true, |
|||
onOk: () => { |
|||
clearTrashFile().then((res) => { |
|||
if (res.success) { |
|||
clearTrashFileCate().then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("清空回收站成功"); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
revert(v) { |
|||
if (!v.isFolder) { |
|||
trashFile({ ids: v.id }).then((res) => { |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("操作成功"); |
|||
} |
|||
}); |
|||
} else { |
|||
trashFileCate({ id: v.id }).then((res) => { |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("操作成功"); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
delete(v) { |
|||
this.$Modal.confirm({ |
|||
title: "确认彻底删除", |
|||
content: v.isFolder |
|||
? "确定彻底删除文件夹 " + v.title |
|||
: "确定彻底删除文件 " + v.title, |
|||
loading: true, |
|||
onOk: () => { |
|||
if (!v.isFolder) { |
|||
deleteUserFile({ ids: v.id }).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("删除文件 " + v.title + " 成功"); |
|||
} |
|||
}); |
|||
} else { |
|||
deleteFileCate({ ids: v.id }).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("删除文件夹 " + v.title + " 成功"); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
close() { |
|||
this.$emit("close", true); |
|||
}, |
|||
submited() { |
|||
this.$emit("submited", true); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
}; |
|||
import { |
|||
getFileCate, |
|||
getUserFileListData, |
|||
trashFileCate, |
|||
trashFile, |
|||
deleteUserFile, |
|||
clearTrashFile, |
|||
deleteFileCate, |
|||
clearTrashFileCate, |
|||
} from "@/api/index"; |
|||
import { |
|||
vi |
|||
} from "date-fns/locale"; |
|||
export default { |
|||
name: "trash", |
|||
data() { |
|||
return { |
|||
loading: false, |
|||
openTip: true, |
|||
selectList: [], |
|||
searchForm: { |
|||
// 搜索框对应data对象 |
|||
title: "", |
|||
pageNumber: 1, // 当前页数 |
|||
pageSize: 10, // 页面大小 |
|||
sort: "updateTime", // 默认排序字段 |
|||
order: "desc", // 默认排序方式 |
|||
delFlag: 2, |
|||
}, |
|||
columns: [ |
|||
// 表头 |
|||
{ |
|||
type: "selection", |
|||
width: 60, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
type: "index", |
|||
width: 60, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "文件名", |
|||
key: "title", |
|||
minWidth: 150, |
|||
sortable: true, |
|||
render: (h, params) => { |
|||
return h( |
|||
"div", { |
|||
style: { |
|||
display: "flex", |
|||
"align-items": "center", |
|||
}, |
|||
}, |
|||
[ |
|||
h("img", { |
|||
attrs: { |
|||
src: this.getFileIcon(params.row), |
|||
}, |
|||
style: { |
|||
width: "30px", |
|||
height: "40px", |
|||
margin: "0 10px 0 0", |
|||
"object-fit": "contain", |
|||
}, |
|||
}), |
|||
h("span", params.row.title), |
|||
] |
|||
); |
|||
}, |
|||
}, |
|||
{ |
|||
title: "文件类型", |
|||
key: "type", |
|||
width: 120, |
|||
sortable: true, |
|||
tooltip: true, |
|||
}, |
|||
{ |
|||
title: "文件大小", |
|||
key: "size", |
|||
width: 120, |
|||
align: "center", |
|||
sortable: true, |
|||
render: (h, params) => { |
|||
if (!params.row.isFolder) { |
|||
let m = this.util.getFileSize(params.row.size); |
|||
return h("span", m); |
|||
} |
|||
}, |
|||
}, |
|||
{ |
|||
title: "创建时间", |
|||
key: "createTime", |
|||
width: 180, |
|||
sortable: true, |
|||
}, |
|||
{ |
|||
title: "更新时间", |
|||
key: "createTime", |
|||
width: 180, |
|||
sortable: true, |
|||
sortType: "desc", |
|||
}, |
|||
{ |
|||
title: "剩余时间", |
|||
key: "restDelTime", |
|||
width: 150, |
|||
sortable: true, |
|||
align: "center", |
|||
}, |
|||
{ |
|||
title: "操作", |
|||
key: "action", |
|||
align: "center", |
|||
fixed: "right", |
|||
width: 170, |
|||
render: (h, params) => { |
|||
return h("div", [ |
|||
h( |
|||
"a", { |
|||
on: { |
|||
click: () => { |
|||
this.revert(params.row); |
|||
}, |
|||
}, |
|||
}, |
|||
"恢复" |
|||
), |
|||
h("Divider", { |
|||
props: { |
|||
type: "vertical", |
|||
}, |
|||
}), |
|||
h( |
|||
"a", { |
|||
on: { |
|||
click: () => { |
|||
this.delete(params.row); |
|||
}, |
|||
}, |
|||
}, |
|||
"彻底删除" |
|||
), |
|||
]); |
|||
}, |
|||
}, |
|||
], |
|||
data: [], // 表单数据 |
|||
total: 0, // 表单数据总数 |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.getDataList(); |
|||
}, |
|||
getDataList() { |
|||
this.loading = true; |
|||
getFileCate(this.searchForm).then((res) => { |
|||
if (res.success) { |
|||
res.result.forEach((e) => { |
|||
e.isFolder = true; |
|||
e.type = "文件夹"; |
|||
}); |
|||
this.data = res.result; |
|||
let totalElements = res.result.length; |
|||
getUserFileListData(this.searchForm).then((res) => { |
|||
this.loading = false; |
|||
if (res.success) { |
|||
this.data = this.data.concat(res.result.content); |
|||
this.total = totalElements + res.result.totalElements; |
|||
if (this.data.length == 0 && this.searchForm.pageNumber > 1) { |
|||
this.searchForm.pageNumber -= 1; |
|||
this.getDataList(); |
|||
} |
|||
} |
|||
}); |
|||
} else { |
|||
this.loading = false; |
|||
} |
|||
}); |
|||
}, |
|||
getFileIcon(v) { |
|||
if (!v) { |
|||
return ""; |
|||
} |
|||
if (v.isFolder) { |
|||
return require("@/assets/icon/folder.png"); |
|||
} |
|||
let url = ""; |
|||
if (!v.type) { |
|||
url = require("@/assets/icon/file-unknown.png"); |
|||
} else if (v.type.indexOf("image") >= 0) { |
|||
url = v.url; |
|||
} else if (v.type.indexOf("video") >= 0) { |
|||
url = require("@/assets/icon/file-video.png"); |
|||
} else if (v.type.indexOf("audio") >= 0) { |
|||
url = require("@/assets/icon/mp3.png"); |
|||
} else if (v.type.indexOf("pdf") >= 0) { |
|||
url = require("@/assets/icon/pdf.png"); |
|||
} else if (v.type.indexOf("word") >= 0) { |
|||
url = require("@/assets/icon/word.png"); |
|||
} else if ( |
|||
v.type.indexOf("sheet") >= 0 || |
|||
v.fkey.indexOf(".xlsx") >= 0 || |
|||
v.fkey.indexOf(".xls") >= 0 |
|||
) { |
|||
url = require("@/assets/icon/xls.png"); |
|||
} else if (v.type.indexOf("presentation") >= 0) { |
|||
url = require("@/assets/icon/ppt.png"); |
|||
} else if ( |
|||
v.type.indexOf("zip") >= 0 || |
|||
v.type.indexOf("rar") >= 0 || |
|||
v.type.indexOf("7z") >= 0 |
|||
) { |
|||
url = require("@/assets/icon/zip.png"); |
|||
} else if (v.type.indexOf("text") >= 0 || v.type.indexOf("octet") >= 0) { |
|||
url = require("@/assets/icon/file.png"); |
|||
} else { |
|||
url = require("@/assets/icon/file.png"); |
|||
} |
|||
return url; |
|||
}, |
|||
clearSelectAll() { |
|||
this.$refs.table.selectAll(false); |
|||
}, |
|||
changePage(v) { |
|||
this.searchForm.pageNumber = v; |
|||
this.getDataList(); |
|||
this.clearSelectAll(); |
|||
}, |
|||
changeSort(e) { |
|||
this.searchForm.sort = e.key; |
|||
this.searchForm.order = e.order; |
|||
if (e.order == "normal") { |
|||
this.searchForm.order = ""; |
|||
} |
|||
this.getDataList(); |
|||
}, |
|||
clear() { |
|||
this.$Modal.confirm({ |
|||
title: "请谨慎进行此操作！", |
|||
content: "确认彻底清空回收站所有文件？", |
|||
loading: true, |
|||
onOk: () => { |
|||
clearTrashFile().then((res) => { |
|||
if (res.success) { |
|||
clearTrashFileCate().then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("清空回收站成功"); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
revert(v) { |
|||
if (!v.isFolder) { |
|||
trashFile({ |
|||
ids: v.id |
|||
}).then((res) => { |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("操作成功"); |
|||
} |
|||
}); |
|||
} else { |
|||
trashFileCate({ |
|||
id: v.id |
|||
}).then((res) => { |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("操作成功"); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
delete(v) { |
|||
this.$Modal.confirm({ |
|||
title: "确认彻底删除", |
|||
content: v.isFolder ? |
|||
"确定彻底删除文件夹 " + v.title : |
|||
"确定彻底删除文件 " + v.title, |
|||
loading: true, |
|||
onOk: () => { |
|||
if (!v.isFolder) { |
|||
deleteUserFile({ |
|||
ids: v.id |
|||
}).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("删除文件 " + v.title + " 成功"); |
|||
} |
|||
}); |
|||
} else { |
|||
deleteFileCate({ |
|||
ids: v.id |
|||
}).then((res) => { |
|||
this.$Modal.remove(); |
|||
if (res.success) { |
|||
this.getDataList(); |
|||
this.$Message.success("删除文件夹 " + v.title + " 成功"); |
|||
} |
|||
}); |
|||
} |
|||
}, |
|||
}); |
|||
}, |
|||
close() { |
|||
this.$emit("close", true); |
|||
}, |
|||
submited() { |
|||
this.$emit("submited", true); |
|||
}, |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
}; |
|||
</script> |
|||
@ -0,0 +1,102 @@ |
|||
<template> |
|||
<div > |
|||
<Upload :action="uploadFileUrl" :headers="accessToken" :data="uploadData" :on-success="handleSuccess" |
|||
:on-error="handleError" :max-size="100000000" :before-upload="beforeUpload" |
|||
multiple type="drag" ref="up"> |
|||
<div style="padding: 20px 0"> |
|||
<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon> |
|||
<p>点击这里或将文件拖拽到这里上传</p> |
|||
</div> |
|||
</Upload> |
|||
<Form ref="form" :model="form" :label-width="85" :rules="formValidate"> |
|||
<FormItem label="版本号" prop="title"> |
|||
<Input v-model="form.version" /> |
|||
</FormItem> |
|||
</Form> |
|||
<div slot="footer"> |
|||
<Button type="primary" :loading="submitLoading" @click="handelSubmit">提交</Button> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import { |
|||
getFileCate, |
|||
addFileCate, |
|||
editFileCate, |
|||
uploadFile, |
|||
trashFileCate, |
|||
searchFileCate, |
|||
checkOssSet, |
|||
} from "@/api/index"; |
|||
export default { |
|||
name: "fileCategory", |
|||
props: { |
|||
showOnly: { |
|||
type: Boolean, |
|||
default: false, |
|||
}, |
|||
}, |
|||
data() { |
|||
return { |
|||
uploadFileUrl: uploadFile, |
|||
submitLoading: false, |
|||
accessToken: {}, |
|||
uploadData: {}, |
|||
form:{ |
|||
path:'', |
|||
version:'' |
|||
} |
|||
}; |
|||
}, |
|||
methods: { |
|||
init() { |
|||
this.accessToken = { |
|||
accessToken: this.getStore("accessToken"), |
|||
}; |
|||
checkOssSet().then((res) => { |
|||
if (!res.success) { |
|||
this.$Modal.confirm({ |
|||
title: "系统还未配置OSS", |
|||
content: "管理员还未配置第三方OSS服务，是否现在立即去配置?", |
|||
onOk: () => { |
|||
this.$router.push({ |
|||
name: "setting", |
|||
query: { |
|||
name: "oss" |
|||
}, |
|||
}); |
|||
}, |
|||
}); |
|||
} |
|||
}); |
|||
}, |
|||
beforeUpload() { |
|||
return true; |
|||
}, |
|||
handleSuccess(res, file, fileList) { |
|||
if (res.success) { |
|||
this.$Message.success("上传文件 " + file.name + " 成功"); |
|||
this.form.path = res.result |
|||
} else { |
|||
file.percentage = 0; |
|||
file.status = "fail"; |
|||
file.name += "（上传失败）"; |
|||
this.$Message.error(res.message); |
|||
} |
|||
}, |
|||
handleError(error, file, fileList) { |
|||
this.$Message.error(error.toString()); |
|||
}, |
|||
handelSubmit() { |
|||
console.log(this.form) |
|||
} |
|||
}, |
|||
mounted() { |
|||
this.init(); |
|||
}, |
|||
}; |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
</style> |
|||
Loading…
Reference in new issue