Skip to content

Z
zys-ui
提交 4658d31e authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

上传、下载接口联调；模板管理功能调试

上级 5f04d733
隐藏空白字符变更
内嵌 并排
正在显示 包含 513 行增加 和 60 行删除
src/components/common/FileTable.vue
浏览文件 @ 4658d31e
......@@ -301,27 +301,27 @@ export default {
*/
filePath() {
this.clearSelectedTable();
this.$nextTick(() => {
if (this.$refs.multipleTable) {
this.$refs.multipleTable.clearSort();
});
}
},
/**
* 文件类型变化时清空表格已选行
*/
fileType() {
this.clearSelectedTable();
this.$nextTick(() => {
if (this.$refs.multipleTable) {
this.$refs.multipleTable.clearSort();
});
}
},
/**
* 文件列表变化时清空表格已选行
*/
fileList() {
this.clearSelectedTable();
this.$nextTick(() => {
if (this.$refs.multipleTable) {
this.$refs.multipleTable.clearSort();
});
}
this.sortedFileList = this.fileList;
},
},
......@@ -356,9 +356,9 @@ export default {
domEvent: event,
})
.then((res) => {
this.$nextTick(() => {
this.$refs.multipleTable.setCurrentRow(row); // 选中当前行
});
if (this.$refs.multipleTable) {
this.$refs.multipleTable.setCurrentRow(row);
}
if (res === "confirm") {
this.$emit("getTableDataByType"); // 刷新文件列表
// this.$store.dispatch("showStorage"); // 刷新存储容量
......@@ -371,10 +371,9 @@ export default {
* @description 用于父组件调用 | 本组件调用，请勿删除
*/
clearSelectedTable() {
this.$nextTick(() => {
console.log("this.$refs.multipleTable", this.$refs.multipleTable);
if (this.$refs.multipleTable) {
this.$refs.multipleTable.clearSelection();
});
}
},
/**
* 表格选择项发生变化时的回调函数
......
src/components/file/FileList.vue
浏览文件 @ 4658d31e
......@@ -116,6 +116,10 @@ export default {
},
// 当前所在路径
filePath() {
console.log(
"-------------this.$route.query.filePath-------------",
this.$route.query.filePath
);
return this.$route.query.filePath
? this.$route.query.filePath
: "/我的创作";
......@@ -201,46 +205,50 @@ export default {
*/
getTableDataByType() {
this.loading = true;
console.log("type:", this.fileType);
this.showFileList();
// console.log("type:", this.fileType);
// 分类型
if (Number(this.fileType)) {
switch (Number(this.fileType)) {
case 6: {
this.showFileRecovery(); // 回收站
break;
}
case 8: {
this.showMyShareFile(); // 我的分享
break;
}
case 10: {
this.showMyCreateFile(); // 我的创作
break;
}
case 11: {
this.showMyFavoriteFile(); // 我的收藏
break;
}
case 12: {
this.showMyNoteFile(); // 我的笔记
break;
}
default: {
this.showFileList();
break;
}
}
} else {
// 全部文件
this.showFileList();
}
// if (Number(this.fileType)) {
// switch (Number(this.fileType)) {
// case 6: {
// this.showFileRecovery(); // 回收站
// break;
// }
// case 8: {
// this.showMyShareFile(); // 我的分享
// break;
// }
// case 10: {
// this.showMyCreateFile(); // 我的创作
// break;
// }
// case 11: {
// this.showMyFavoriteFile(); // 模板管理
// break;
// }
// case 11: {
// this.showMyFavoriteFile(); // 我的收藏
// break;
// }
// case 12: {
// this.showMyNoteFile(); // 我的笔记
// break;
// }
// default: {
// this.showFileList();
// break;
// }
// }
// } else {
// // 全部文件
// this.showFileList();
// }
// this.$store.dispatch("showStorage");
},
/**
* 表格数据获取相关事件 | 获取当前路径下的文件列表
*/
showFileList() {
console.log("showFileList");
let data = {
fileType: this.fileType,
filePath: this.filePath,
......@@ -254,6 +262,7 @@ export default {
}
getFileListByPath(params).then((res) => {
if (res.code == 200) {
console.log("res.data", res.data);
this.fileList = res.data.records;
this.pageData.total = res.data.total;
this.loading = false;
......@@ -293,7 +302,6 @@ export default {
* 表格数据获取相关事件 | 获取我的创作文件列表
*/
showMyCreateFile() {
console.log("showMyCreateFile");
let data = {
fileType: this.fileType,
filePath: this.filePath,
......@@ -310,7 +318,6 @@ export default {
this.fileList = res.data.records;
this.pageData.total = res.data.total;
this.loading = false;
console.log("200");
} else {
this.$message.error(res.msg);
}
......
src/components/file/box/contextMenu/Box.vue
浏览文件 @ 4658d31e
......@@ -151,15 +151,18 @@
<li class="right-menu-item" @click="handleClickAddFolderBtn">
<i class="el-icon-folder-add"></i> 新建文件夹
</li>
<li class="right-menu-item" @click="handleCreateFile('docx')">
<img :src="wordImg" />新建 Word 文档
<!-- <li class="right-menu-item" @click="handleCreateFile('docx')">
<img :src="wordImg" />新建 Word 空白文档
</li> -->
<li class="right-menu-item" @click="handleCreateFileByTemplate('docx')">
<img :src="wordImg" />新建Word文档
</li>
<li class="right-menu-item" @click="handleCreateFile('xlsx')">
<!-- <li class="right-menu-item" @click="handleCreateFile('xlsx')">
<img :src="excelImg" />新建 Excel 工作表
</li>
<li class="right-menu-item" @click="handleCreateFile('pptx')">
<img :src="pptImg" />新建 PPT 演示文稿
</li>
</li> -->
<el-divider />
<li class="right-menu-item" @click="handleUploadFileBtnClick(1)">
<i class="el-icon-upload2"></i> 上传文件
......@@ -557,6 +560,22 @@ export default {
this.callback(res);
});
},
/**
* 新建 office 文件——通过模板导入
* @description 调用新建 office 文件服务，并在弹窗确认回调事件中刷新文件列表
* @param {string} 文件扩展名 docx xlsx pptx
*/
handleCreateFileByTemplate(extendName) {
this.$openDialog
.addFileByTemplate({
extendName: extendName,
})
.then((res) => {
this.callback(res);
});
},
/**
* 上传文件按钮点击事件
* @description 通过Bus通信，开启全局上传文件流程
......
src/components/file/components/OperationMenu.vue
浏览文件 @ 4658d31e
......@@ -47,8 +47,14 @@
<el-dropdown-item @click.native="handleClickAddFolderBtn">
<div class="img-text-wrapper"><img :src="dirImg" /> 新建文件夹</div>
</el-dropdown-item>
<el-dropdown-item divided @click.native="handleCreateFile('docx')">
<div class="img-text-wrapper"><img :src="wordImg" />Word 文档</div>
<el-dropdown-item
v-if="fileType == 10"
divided
@click.native="handleCreateFileByTemplate('docx')"
>
<div class="img-text-wrapper">
<img :src="wordImg" />新建Word 文档
</div>
</el-dropdown-item>
<!-- <el-dropdown-item @click.native="handleCreateFile('xlsx')">
<div class="img-text-wrapper">
......@@ -226,7 +232,7 @@ import { mapState } from "vuex";
export default {
name: "OperationMenu",
props: {
// 文件类型
// 文件类型(10-我的创作 11-模板管理)
fileType: {
required: true,
type: Number,
......@@ -363,6 +369,40 @@ export default {
}
});
},
/**
* 新建 office 文件(支持可通过模板)
* @description 调用新建 office 文件服务，并在弹窗确认回调事件中刷新文件列表
* @param {string} 文件扩展名 docx xlsx pptx
*/
handleCreateFileByTemplate(extendName) {
this.$openDialog
.addFileByTemplate({
extendName: extendName,
})
.then((res) => {
if (res === "confirm") {
this.$emit("getTableDataByType");
}
});
},
/**
* 新建 office 文件(支持可通过模板)
* @description 调用新建 office 文件服务，并在弹窗确认回调事件中刷新文件列表
* @param {string} 文件扩展名 docx xlsx pptx
*/
handleCreateFileByTemplate(extendName) {
this.$openDialog
.addFileByTemplate({
extendName: extendName,
})
.then((res) => {
if (res === "confirm") {
this.$emit("getTableDataByType");
}
});
},
/**
* 上传文件按钮点击事件
* @description 通过Bus通信，开启全局上传文件流程
......
src/components/file/dialog/addFile/Dialog.vue
浏览文件 @ 4658d31e
......@@ -39,7 +39,7 @@
</template>
<script>
import { createOfficeFile } from "@/api/qwFile";
import { newfile } from "@/api/wps";
export default {
name: "AddFileDialog",
......@@ -76,11 +76,19 @@ export default {
this.sureBtnLoading = true;
this.$refs[formName].validate((valid) => {
if (valid) {
createOfficeFile({
extendName: this.extendName,
filePath: this.filePath,
fileName: this.form.fileName,
})
const formData = new FormData();
let fileType = "w";
const WORD = ["docx", "doc"]; //暂时只考虑新建word的情况
// const PDF = ["pdf", "doc"];
// const EXCEL = ["xlsx", "xls"];
if (WORD.includes(this.extendName)) {
fileType = "w";
}
formData.append("filetype", fileType);
formData.append("extendName", this.extendName);
formData.append("filePath", this.filePath);
formData.append("fileName", this.form.fileName);
newfile(formData)
.then((res) => {
this.sureBtnLoading = false;
if (res.code == 200) {
......@@ -101,6 +109,40 @@ export default {
}
});
},
// /**
// * 新建文件对话框 | 确定按钮点击事件(奇文-已弃用)
// * @description 校验表单，校验通过后调用新建文件接口
// * @param {string} formName 表单ref值
// */
// handleDialogSure(formName) {
// this.sureBtnLoading = true;
// this.$refs[formName].validate((valid) => {
// if (valid) {
// createOfficeFile({
// extendName: this.extendName,
// filePath: this.filePath,
// fileName: this.form.fileName,
// })
// .then((res) => {
// this.sureBtnLoading = false;
// if (res.code == 200) {
// this.$message.success("文件创建成功");
// this.$refs[formName].resetFields();
// this.visible = false;
// this.callback("confirm");
// } else {
// this.$message.warning(res.message);
// }
// })
// .catch(() => {
// this.sureBtnLoading = false;
// });
// } else {
// this.sureBtnLoading = false;
// return false;
// }
// });
// },
},
};
</script>
src/components/file/dialog/addFileByTemplate/Dialog.vue 0 → 100644
浏览文件 @ 4658d31e
<template>
<!-- 新建文件ByTemplate对话框（可以新增模板） -->
<el-dialog
title="新建文档"
:visible.sync="visible"
:close-on-click-modal="false"
width="550px"
@close="handleDialogClose"
>
<el-form
class="add-file-form"
:model="form"
:rules="formRules"
ref="addFileForm"
label-width="100px"
label-position="top"
>
<el-form-item label="选择新建方式" prop="addNewFileWay">
<el-radio-group v-model="form.addNewFileWay">
<el-radio label="1">新建空白文档</el-radio>
<el-radio label="2">从模板导入</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item
label="选择模板"
prop="template"
v-if="form.addNewFileWay == 2"
style="width: 100%"
>
<el-select
v-model="templateId"
placeholder="请选择"
v-if="templateList.w_list && templateList.w_list.length > 0"
>
<el-option
v-for="item in templateList.w_list"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<div class="empty">暂无模板，如要添加请联系管理员</div>
</el-form-item>
<el-form-item label="文件名称" prop="fileName">
<el-input
v-model="form.fileName"
placeholder="请输入文件名称"
type="textarea"
autosize
maxlength="255"
show-word-limit
></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="handleDialogClose">取 消</el-button>
<el-button
type="primary"
:loading="sureBtnLoading"
@click="handleDialogSure('addFileForm')"
>确 定</el-button
>
</div>
</el-dialog>
</template>
<script>
import { newfile, getTemplateList } from "@/api/wps";
export default {
name: "AddFileDialog",
data() {
return {
visible: false, // 对话框是否可见
form: {
addNewFileWay: "1", //新建文件的方式，1-新建空白文件 2-从模板导入
fileName: "",
templateId: "", //模板ID
},
templateList: {}, //模板文件对象，包含p_list（PPT模板）/s_list（表格模板）/w_list（文档模板）三个数组，暂时只用文档模板
formRules: {
fileName: [
{ required: true, message: "请输入文件名称", trigger: "blur" },
],
},
sureBtnLoading: false,
};
},
watch: {
"form.addNewFileWay"(value) {
console.log("form.addNewFileWay", this.form.addNewFileWay);
if (value == 2) {
this.loadTemplateList();
}
},
},
methods: {
/**
* 新建文件对话框 | 对话框关闭的回调
* @description 关闭对话框，重置表单
*/
handleDialogClose() {
this.$refs["addFileForm"].resetFields();
this.visible = false;
this.callback("cancel");
},
/**
* 新建文件对话框 | 确定按钮点击事件
* @description 校验表单，校验通过后调用新建文件接口
* @param {string} formName 表单ref值
*/
handleDialogSure(formName) {
this.sureBtnLoading = true;
this.$refs[formName].validate((valid) => {
if (valid) {
const formData = new FormData();
let fileType = "w";
const WORD = ["docx", "doc"]; //暂时只考虑新建word的情况
// const PDF = ["pdf", "doc"];
// const EXCEL = ["xlsx", "xls"];
if (WORD.includes(this.extendName)) {
fileType = "w";
}
formData.append("filetype", fileType);
formData.append("extendName", this.extendName);
formData.append("filePath", this.filePath);
formData.append("fileName", this.form.fileName);
newfile(formData)
.then((res) => {
this.sureBtnLoading = false;
if (res.code == 200) {
this.$message.success("文件创建成功");
this.$refs[formName].resetFields();
this.visible = false;
this.callback("confirm");
} else {
this.$message.warning(res.message);
}
})
.catch(() => {
this.sureBtnLoading = false;
});
} else {
this.sureBtnLoading = false;
return false;
}
});
},
async loadTemplateList() {
// 如果已经加载过了不用再次加载
if (this.templateList.length > 0) {
return;
}
let res = await getTemplateList();
if (res.code == 200) {
this.templateList = res.data;
}
},
// /**
// * 新建文件对话框 | 确定按钮点击事件(奇文-已弃用)
// * @description 校验表单，校验通过后调用新建文件接口
// * @param {string} formName 表单ref值
// */
// handleDialogSure(formName) {
// this.sureBtnLoading = true;
// this.$refs[formName].validate((valid) => {
// if (valid) {
// createOfficeFile({
// extendName: this.extendName,
// filePath: this.filePath,
// fileName: this.form.fileName,
// })
// .then((res) => {
// this.sureBtnLoading = false;
// if (res.code == 200) {
// this.$message.success("文件创建成功");
// this.$refs[formName].resetFields();
// this.visible = false;
// this.callback("confirm");
// } else {
// this.$message.warning(res.message);
// }
// })
// .catch(() => {
// this.sureBtnLoading = false;
// });
// } else {
// this.sureBtnLoading = false;
// return false;
// }
// });
// },
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-select {
width: 100%;
}
.empty {
display: flex;
justify-content: center;
font-size: 14px;
color: #999;
}
</style>
src/components/file/dialog/addFileByTemplate/index.js 0 → 100644
浏览文件 @ 4658d31e
import Vue from 'vue'
import router from '@/router/index.js'
// 导入组件
import AddFileByTemplateDialog from './Dialog.vue'
// 使用基础 Vue 构造器，创建一个“子类”
const AddFileConstructor = Vue.extend(AddFileByTemplateDialog)
let addFileByTemplateInstance = null
/**
* 初始化新建文件实例
* @param {string} extendName office 文件扩展名
* @param {string} filePath 新建文件夹的父路径
*/
const initInstanceAddFileByTemplate = (
extendName,
filePath = router.currentRoute.query.filePath || '/'
) => {
addFileByTemplateInstance = new AddFileConstructor({
el: document.createElement('div'),
data() {
return {
extendName,
filePath
}
}
})
}
/**
* 新建文件 Promise 函数
* @returns {Promise} 抛出确认和取消回调函数
*/
const showAddFileByTemplateDialog = (obj) => {
// 非首次调用服务时，在 DOM 中移除上个实例
if (addFileByTemplateInstance !== null) {
document.body.removeChild(addFileByTemplateInstance.$el)
}
let { extendName, filePath } = obj
return new Promise((reslove) => {
initInstanceAddFileByTemplate(extendName, filePath)
addFileByTemplateInstance.callback = (res) => {
reslove(res)
// 服务取消时卸载 DOM
if (res === 'cancel' && addFileByTemplateInstance !== null) {
document.body.removeChild(addFileByTemplateInstance.$el)
addFileByTemplateInstance = null
}
}
document.body.appendChild(addFileByTemplateInstance.$el) // 挂载 DOM
Vue.nextTick(() => {
addFileByTemplateInstance.visible = true // 打开对话框
})
})
}
export default showAddFileByTemplateDialog
src/router/staticRoute.js
浏览文件 @ 4658d31e
......@@ -129,6 +129,42 @@ export const staticRouters = [
}
]
},
{
path: '/manage',
component: Layout,
redirect: 'templateManage',
name: 'Manage',
meta: {
title: '后台管理',
icon: 'dashboard',
noCache: false,
affix: false
},
children: [
{
path: 'templateManage',
component: () => import('@/views/manage/templateManage/index.vue'),
name: 'TemplateManage',
meta: {
title: '模板管理',
icon: 'dashboard',
noCache: false,
affix: false
}
},
{
path: 'shareManage',
component: () => import('@/views/manage/shareManage/index.vue'),
name: 'ShareManage',
meta: {
title: '共享管理',
icon: 'dashboard',
noCache: false,
affix: false
}
},
]
},
{
path: '/wpsReader',
name: 'WpsReader',
......
src/views/manage/shareManage/index.vue 0 → 100644
浏览文件 @ 4658d31e
<template>
<div>共享管理</div>
</template>
<script>
export default {};
</script>
<style></style>
src/views/manage/templateManage/index.vue 0 → 100644
浏览文件 @ 4658d31e
<template>
<div>
<FileList />
</div>
</template>
<script>
import FileList from "@/components/file/FileList.vue";
export default {
components: {
FileList,
},
data() {
return {
isInit: false,
};
},
mounted() {
this.isInit = false;
// 读取当前的查询参数
const currentQueryParams = this.$route.query;
// 修改查询参数，例如，给 "filePath" 参数设置新的值
// 10-我的创作 11-模板管理
const newFileType = 11;
const newFilePath = "/模板管理";
const newQueryParams = {
...currentQueryParams,
fileType: newFileType,
filePath: newFilePath,
};
// 使用 this.$router.push() 导航到当前路由，并传递新的查询参数
this.$router.push({ query: newQueryParams });
this.isInit = true;
},
};
</script>
<style lang="scss"></style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论