revive 4年前
コミット
20cd0036d5
3個のファイルの変更90行の追加5行の削除
  1. +56
    -5
      src/views/main_web/workspace/components/file-item.vue
  2. +7
    -0
      src/views/main_web/workspace/service.js
  3. +27
    -0
      src/views/main_web/workspace/workspace.new.vue

+ 56
- 5
src/views/main_web/workspace/components/file-item.vue ファイルの表示

@@ -15,14 +15,14 @@
:class="`${file.extension}-mid ${ :class="`${file.extension}-mid ${
fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask ? 'toumin' : '' fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask ? 'toumin' : ''
}`" }`"
@contextmenu.prevent.stop="rightShowMenu($event, file, 1)"
@contextmenu.prevent.stop="fileRightBtnClick"
/> />
<!-- 图片文件图标 --> <!-- 图片文件图标 -->
<div <div
v-else v-else
class="defultImage-mid img_bg-mid" class="defultImage-mid img_bg-mid"
:class=" fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask ? 'toumin' : ''" :class=" fileIsLoading || (isInWorkFolder && otherUserIsWorking) || showDownloadMask ? 'toumin' : ''"
@contextmenu.prevent.stop="rightShowMenu($event, file, 1)"
@contextmenu.prevent.stop="fileRightBtnClick"
> >
<div class="file_Im gbox-mid"> <div class="file_Im gbox-mid">
<img v-lazy="file.alias" alt class="file_Img" /> <img v-lazy="file.alias" alt class="file_Img" />
@@ -41,7 +41,7 @@
<!-- 如果不在工作中 且上一次的修改者不是自己说明文件已经被更新 本地需要下载 --> <!-- 如果不在工作中 且上一次的修改者不是自己说明文件已经被更新 本地需要下载 -->
<!-- 待下载 状态蒙板 --> <!-- 待下载 状态蒙板 -->
<div <div
@contextmenu.prevent.stop="rightShowMenu($event, file, 1)"
@contextmenu.prevent.stop="fileRightBtnClick($event), rightShowMenu($event, file, 1)"
class="downloadIcon" class="downloadIcon"
@click="clientDownLoad(file, 1)" @click="clientDownLoad(file, 1)"
v-if="showDownloadMask" v-if="showDownloadMask"
@@ -63,7 +63,7 @@
</div> </div>
<!-- 上传中 状态蒙板 todo: 调整样式--> <!-- 上传中 状态蒙板 todo: 调整样式-->
<div <div
@contextmenu.prevent.stop="rightShowMenu($event, file, 1)"
@contextmenu.prevent.stop="fileRightBtnClick($event), rightShowMenu($event, file, 1)"
class="downloadIcon" class="downloadIcon"
v-if="loadingState.type === UPLOADING" v-if="loadingState.type === UPLOADING"
> >
@@ -129,6 +129,17 @@
</template> </template>
</template> </template>


<!-- 右键菜单 -->
<div class="contextmenu" v-show="isFileRightMenuVisible"
:style="{ top: fileRightMenuTop + 'px', left: fileRightMenuLeft + 'px'}"
>
<ul class="rightMenu fileRightMenu">
<li v-if="fileInLocal" @click.stop="openfileBtnClick">打开</li>
<li v-else class="function-disabled" title="请先下载文件再打开">打开</li>
<li @click.stop="copyFileBtnClick">创建文件副本</li>
</ul>
</div>

<!-- 右上设置按钮 --> <!-- 右上设置按钮 -->
<!-- 下拉列表 --> <!-- 下拉列表 -->
<div class="top_optionBar" v-show="false"> <div class="top_optionBar" v-show="false">
@@ -229,7 +240,10 @@ export default {
WORKING, NOT_WORKING, WORKING, NOT_WORKING,
DOWNLOADING, DOWNLOADING,
UPLOADING, UPLOADING,
imgExtensionList
imgExtensionList,
isFileRightMenuVisible: false,//控制文件右键菜单显示与隐藏
fileRightMenuLeft: 0,//文件右键菜单位置
fileRightMenuTop: 0,
}; };
}, },
computed: { computed: {
@@ -283,7 +297,32 @@ export default {
}, },
methods: { methods: {
oneOf, oneOf,
fileRightBtnClick(e) {
this.isFileRightMenuVisible = true;
this.fileRightMenuLeft = e.offsetX;
this.fileRightMenuTop = e.offsetY;
},
closeFileRightMenu() {
this.isFileRightMenuVisible = false;
},
openfileBtnClick() {
this.isFileRightMenuVisible = false;
this.$emit('openfileBtnClick', this.file);
},
copyFileBtnClick() {
this.isFileRightMenuVisible = false;
this.$emit('copyFileBtnClick', this.file);
}
}, },
watch: {
isFileRightMenuVisible(value) {
if (value) {
document.body.addEventListener("click", this.closeFileRightMenu);
} else {
document.body.removeEventListener("click", this.closeFileRightMenu);
}
},
}
}; };
</script> </script>


@@ -318,4 +357,16 @@ export default {
.have-modified-icon { .have-modified-icon {
background-color: #cccdd7; background-color: #cccdd7;
} }
.fileRightMenu li {
white-space: nowrap;
}
.function-disabled {
color: rgb(216,216,216);
}
.function-disabled:hover {
cursor: not-allowed;
background-color: #ecf5ff;
color:rgb(167,168,183);
}

</style> </style>

+ 7
- 0
src/views/main_web/workspace/service.js ファイルの表示

@@ -78,4 +78,11 @@ export async function changeFileWorkStatus(fileId, workStatus) {
export async function queryFileExchange(currentTemplateId, currentNodeId, nestedNodeId){ export async function queryFileExchange(currentTemplateId, currentNodeId, nestedNodeId){
const res = await fetchApi('template/queryFileExchange', { currentTemplateId, currentNodeId, nestedNodeId }); const res = await fetchApi('template/queryFileExchange', { currentTemplateId, currentNodeId, nestedNodeId });
return wrapErrorHint(res); return wrapErrorHint(res);
}
/**
* addFile 复制文件副本
*/
export async function addFile(file) {
const res = await fetchApi('file/addFile', file);
return res;
} }

+ 27
- 0
src/views/main_web/workspace/workspace.new.vue ファイルの表示

@@ -98,6 +98,8 @@
:currentFolder="currentFolder" :currentFolder="currentFolder"
:commitFile="commitFile" :commitFile="commitFile"
@dblclick.native="fileClick(file)" @dblclick.native="fileClick(file)"
@openfileBtnClick="fileClick(file)"
@copyFileBtnClick="copyWorkFileBtnClick(file)"
:localFileHashMap="localFileHashMap" :localFileHashMap="localFileHashMap"
:loadingState="localFileLoadStateMap[file.id]" :loadingState="localFileLoadStateMap[file.id]"
/> />
@@ -1046,6 +1048,31 @@ export default {
this.neibianju = "neibianju"; this.neibianju = "neibianju";
this.closepageH = ""; this.closepageH = "";
}, },
/**
* 点击了复制文件副本的按钮
*/
async copyWorkFileBtnClick(targetFile) {
const copyFile = {...targetFile};
let nowNum = 1, tempName = "";

//先添加 - 副本字样 再判断是否重复 如果重复就修改版本信息
tempName = targetFile.archName + ' - 副本';
let isExists = this.workFileList.find(file => file.archName === tempName);
while(isExists) {
// - 副本存在 -》修改为 -副本(x) 的字样
tempName = targetFile.archName + ` - 副本(${ ++ nowNum})`;
isExists = this.workFileList.find(file => file.archName === tempName);
}
copyFile.archName = tempName;
copyFile.modifyUserId = sessionStorage.userId;
copyFile.modifyTime = new Date();
copyFile.createUserId = sessionStorage.userId;
copyFile.createTime = new Date();
console.log(copyFile);

const addFileRes = await services.addFile(copyFile);
this.fetchFolderFiles();
},
}, },
watch: { watch: {
rightMenuvisible(value) { rightMenuvisible(value) {


読み込み中…
キャンセル
保存