Commit 5dae942f authored by zhengke's avatar zhengke

优化组件

parent c768b0b9
......@@ -46,7 +46,7 @@
<td class="text-light text-5B5D62"><span>{{item.FileSize}}KB</span></td>
<td class="text-light">
<span :class="[item.NewTitle?'active':'text-5B5D62']">
{{item.NewTitle?item.NewTitle:item.Title}}</span>
{{item.NewTitle?item.NewTitle:''}}</span>
</td>
<td class="text-center">
<span class="hoverShow">
......@@ -56,7 +56,7 @@
<template #dropdown>
<el-dropdown-menu class="q-pa-md" @click.stop="OffEdit">
<el-dropdown-item icon="Promotion" @click.stop="clickControls(item,1)">另存</el-dropdown-item>
<el-dropdown-item icon="Switch" @click.stop="clickControls(item,2)">替换</el-dropdown-item>
<el-dropdown-item v-if="!item.NewTitle" icon="Switch" @click.stop="clickControls(item,2)">替换</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
......@@ -126,6 +126,7 @@ import CopyFile from "./CopyFile.vue";
const loading = ref(true)
const HistoricalVersion = ref<any>()
const copyDataList = ref([] as Array<any>);
const deleteLoading = ref<any>(null);
const queryObj = reactive({
pageIndex: 1,
pageSize: 30,
......@@ -139,15 +140,62 @@ import CopyFile from "./CopyFile.vue";
const clickControls = (row:any,type:any) => {
if(type){
datas.type = type
journeyAdsDetails.value = row
isCopyTo.value = true
if(type==1){
isCopyTo.value = true
datas.type = type
}else{
ElMessageBox.confirm(
`此操作将替换到当前版本,是否确定?`,
"提示",
{
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}
)
.then(async () => {
try {
SaveOverlay()
} catch (error) { }
})
.catch(() => { });
}
}else {
let param = query()
const url = `${process.env.VUE_APP_SHARE_URL}/?uid=${param.uid}&sellId=${row.FileId}&LogId=${row.LogId}&ViewSlideshow=1`
window.open(url);
}
}
const SaveOverlay = async () => {
let queryMsg = {
LogId: journeyAdsDetails.value.LogId,
FileId: journeyAdsDetails.value.FileId,
UpdateType: 2,
FolderId: '',
};
deleteLoading.value = ElLoading.service({
lock: true,
text: "正在处理",
});
let pageRes = await ConfigService.UpdateOtherByHistory(queryMsg);
if (pageRes.data.resultCode == ApiResult.SUCCESS) {
ElMessage({
showClose: true,
message: `替换文件${props.details.FileType ? "" : "夹"}成功`,
type: "success",
});
refreshHandler()
} else {
ElMessage({
showClose: true,
message: `替换文件${props.details.FileType ? "" : "夹"}失败`,
type: "warning",
});
}
deleteLoading.value.close();
deleteLoading.value = null;
};
const closedhandler=()=>{
emit('close')
}
......
<template>
<div style="min-width: '700px';height: 100%;" ref="currentRootDom">
<table class="text-small" style="width: 100%">
<tr @click="OffEdit">
<th class="text-left" :style="{width: currentMenu==3||currentMenu==4?'20px':'0px'}">
<el-checkbox v-if="currentMenu==3||currentMenu==4"
size="sm"
class="SelectAllBox"
v-model="datas.selectAll"
@click="clickSelectAll"
:indeterminate="isIndeterminate"
/>
</th>
<th colspan="2" class="text-light">
<div class="row items-center">
<div class="text-left q-pl-md">文档名称</div>
<div>
<el-popover :width="200" trigger="click" @before-enter="()=>filterFileNameStatus=true"
@before-leave="()=>filterFileNameStatus=false">
<template #reference>
<el-icon size="14px" class="q-ml-md cusor-pointer">
<ArrowDown v-if="!filterFileNameStatus"/>
<ArrowUp v-else/>
</el-icon>
</template>
<el-input v-model="queryObj.FileName" placeholder="请输入文档关键字" size="mini" class="full-width" />
<div class="q-mt-md text-right">
<el-button link class="q-mr-sm">
<span class="text-bolder pingfangr" @click="setFilterNameHandler(0)">重置</span>
</el-button>
<el-button link type="primary">
<span class="text-bolder pingfangr" @click="setFilterNameHandler(1)">确认</span>
</el-button>
<el-table class="sample-table" :data="dataList" style="width: 100%" height="100%"
@sort-change="sortHandler" :default-sort="{ prop: 'CreateTime', order: 'descending' }"
@selection-change="handleSelectionChange">
<el-table-column type="selection" width="20" v-if="currentMenu==3||currentMenu==4"/>
<el-table-column className="indentLeft">
<template #header>
<div class="row items-center">
<span>文档名称</span>
<el-popover :width="200" trigger="click" @before-enter="()=>filterFileNameStatus=true" @before-leave="()=>filterFileNameStatus=false">
<template #reference>
<el-icon size="14px" class="q-ml-md cusor-pointer" :class="{'text-el-primary':queryObj.FileName}">
<ArrowDown v-if="!filterFileNameStatus"/>
<ArrowUp v-else/>
</el-icon>
</template>
<el-input v-model="queryObj.FileName" placeholder="请输入文档关键字" size="mini" class="full-width" />
<div class="q-mt-md text-right">
<el-button link class="q-mr-sm">
<span class="text-bolder pingfangr" @click="setFilterNameHandler(0)">重置</span>
</el-button>
<el-button link type="primary">
<span class="text-bolder pingfangr" @click="setFilterNameHandler(1)">确认</span>
</el-button>
</div>
</el-popover>
</div>
</el-popover>
</div>
</div>
</th>
<th class="text-light" style="min-width: 150px; width: 150px">
<div class="row items-center just-center pointer" @click.stop="currentMenu!=-1?clickSort():''">
<span>
<template v-if="currentMenu==0">最近修改</template>
<template v-if="currentMenu==1">收藏时间</template>
<template v-if="currentMenu==3||currentMenu==4">最近修改</template>
<template v-if="currentMenu==-1">删除时间</template>
</span>
<span class="column">
<el-icon class="reactive"
style="top: 3px" :class="[queryObj.OrderByType==1?'active':'']"><CaretTop /></el-icon>
<el-icon class="reactive"
style="top:-3px" :class="[queryObj.OrderByType==2?'active':'']"><CaretBottom /></el-icon>
</span>
</div>
</th>
<th class="text-light" style="min-width: 100px; width: 100px">
创建者
</th>
<th class="text-light" style="min-width: 120px; width: 120px">
操作
</th>
</tr>
<tr class="text-5B5D62 journeyAdsple-table pointer" v-for="(item,index) in dataList">
<td @click.stop="item.FileType?OffEdit():editDelete(item,2)">
<div v-if="currentMenu==3||currentMenu==4" class="row items-center hoverShow"
:style="{'opacity':item.singleChoice?1:''}">
<el-checkbox size="sm" class="SelectAllBox" v-model="item.singleChoice"
@click.stop="singleChoice(item)"/></div>
</td>
<td style="width: 30px;" @click.stop="item.FileType?OffEdit():editDelete(item,2)" valign="middle" >
<div :class="{'share-icon-box':item.IsShare}" style="display: inline-block;">
<img v-if="item.FileType" class="q-px-md " :src="item.FileType==1?datas.pdfImg:datas.adsImg" style="height: 25px;" />
<img v-else class="q-px-md" src="@/assets/img/file.png" style="height: 23px;" />
</div>
</td>
<td class="journeyAds-title wrap row">
<div class="col" v-if="!item.editTitle" @click.stop="item.FileType?OffEdit():editDelete(item,2)">
<div class="row flex-center">
<el-tooltip
placement="top-start">
<template #content><div style="max-width: 600px;">{{item.FileName}}</div></template>
<div class="journeyAds-TitleCenter">{{item.FileName}}
<span v-if="item.FileName.length>70">...</span>
</template>
<template #default="scope">
<div class="row items-center full-width" style="padding-left: 12px;">
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708337830000_43.png" height="25" v-if="scope.row.FileType==1" @click.stop="scope.row.FileType?OffEdit():editDelete(scope.row,2)"/>
<img src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1708250377000_777.png" height="25" v-else-if="scope.row.FileType==2" @click.stop="scope.row.FileType?OffEdit():editDelete(scope.row,2)"/>
<img src="@/assets/img/file.png" height="25" v-else @click.stop="scope.row.FileType?OffEdit():editDelete(scope.row,2)"/>
<div class="temp-tr col q-ml-md file-name" :class="{'cusor-pointer':scope.row.FileType==0}">
<el-tooltip v-if="!scope.row.editTitle" effect="dark" :content="scope.row.FileName">
<div @click.stop="scope.row.FileType?OffEdit():editDelete(scope.row,2)">
{{ scope.row.FileName }}
</div>
</el-tooltip>
<el-input
class="journeyAds-Input"
v-model="scope.row.FileName"
autosize
type="textarea"
placeholder="Please input"
maxlength="500"
size="small"
v-if="scope.row.editTitle"
@blur="handleUpdateTitle(scope.row)"/>
</div>
</div>
</el-tooltip>
</div>
</div>
<el-input
class="journeyAds-Input"
v-model="item.FileName"
autosize
type="textarea"
placeholder="Please input"
maxlength="500"
size="small"
v-if="item.editTitle"
@blur="handleUpdateTitle(item)"
/></td>
<td class="text-center" @click.stop="item.FileType?OffEdit():editDelete(item,2)"><span>{{formatDateTimeToRead(item.UpdateTime&&item.UpdateTime!=''?item.UpdateTime:item.CreateTime)}}</span></td>
<td class="text-center" @click.stop="item.FileType?OffEdit():editDelete(item,2)"><span>{{item.CreateName}}</span></td>
<td class="text-center">
<div class="hoverShow row items-center just-center q-pt-sm">
<el-button v-if="currentMenu!=-1" type="primary" :icon="Edit" size="small" @click.stop="editDelete(item)">编辑</el-button>
<el-button v-else type="primary" icon="Position" size="small" @click.stop="recover(item)">恢复</el-button>
<el-dropdown v-if="currentMenu!=-1" class="q-pl-md" trigger="click">
<el-icon size="16" color="#b1b7cf"><MoreFilled /></el-icon>
<template #dropdown>
<el-dropdown-menu class="q-pa-md" @click.stop="OffEdit">
<el-dropdown-item v-if="item.FileType" icon="EditPen" @click.stop="startEditTitle(item)">重命名</el-dropdown-item>
<el-dropdown-item v-if="item.FileType" icon="Clock" @click.stop="history(item)">历史版本</el-dropdown-item>
<el-dropdown-item icon="Position" @click.stop="()=>setFileShareHandler(item)">分享</el-dropdown-item>
<el-dropdown-item v-if="item.IsShare" icon="Hide" @click.stop="removeShareHandler(item)">取消分享</el-dropdown-item>
<el-dropdown-item v-if="currentMenu==3||currentMenu==4" icon="Expand" @click.stop="MoveFile(item)">移动至</el-dropdown-item>
<el-dropdown-item v-if="item.FileType" @click.stop="CollectHandler(item)">
<!-- :style="{color:item.IsCollect?'#FCC525':'#65676B'}" -->
<span class="row items-center">
<el-icon :color="item.IsCollect?'#FCC525':'#65676B'" size="14"><Star /></el-icon>
<span>{{item.IsCollect?'取消收藏':'收藏'}}</span>
</span>
</el-dropdown-item>
<el-dropdown-item v-if="item.FileType" icon="CopyDocument" @click.stop="CopyTo(item)">复制到</el-dropdown-item>
<el-dropdown-item icon="Delete" @click="editDelete(item,1)">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</td>
</tr>
</table>
</el-table-column>
<el-table-column :label="datas.Title" width="150" sortable="custom" prop="">
<template #default="scope">
{{ formatDateTimeToRead(scope.row.UpdateTime&&scope.row.UpdateTime!=''?scope.row.UpdateTime:scope.row.CreateTime) }}
</template>
</el-table-column>
<el-table-column label="分享人" prop="CreateName" width="100" />
<el-table-column label="操作" width="120">
<template #default="scope">
<div class="row items-center" :class="{'hover':showItemId!=scope.row.FileId}">
<el-button v-if="currentMenu!=-1" type="primary" :icon="Edit" size="small" @click.stop="editDelete(scope.row)">编辑</el-button>
<el-button v-else type="primary" icon="Position" size="small" @click.stop="recover(scope.row)">恢复</el-button>
<el-dropdown v-if="currentMenu!=-1" class="q-pl-md" trigger="click" @visible-change="(val:boolean)=>dropdownChange(val,scope.row.FileId)">
<el-icon size="16" color="#b1b7cf"><MoreFilled /></el-icon>
<template #dropdown>
<el-dropdown-menu class="q-pa-md" @click.stop="OffEdit">
<el-dropdown-item v-if="scope.row.FileType" icon="EditPen" @click.stop="startEditTitle(scope.row)">重命名</el-dropdown-item>
<el-dropdown-item v-if="scope.row.FileType" icon="Clock" @click.stop="history(scope.row)">历史版本</el-dropdown-item>
<el-dropdown-item icon="Position" @click.stop="()=>setFileShareHandler(scope.row)">分享</el-dropdown-item>
<el-dropdown-item v-if="scope.row.IsShare" icon="Hide" @click.stop="removeShareHandler(scope.row)">取消分享</el-dropdown-item>
<el-dropdown-item v-if="currentMenu==3||currentMenu==4" icon="Expand" @click.stop="MoveFile(scope.row)">移动至</el-dropdown-item>
<el-dropdown-item v-if="scope.row.FileType" @click.stop="CollectHandler(scope.row)">
<!-- :style="{color:item.IsCollect?'#FCC525':'#65676B'}" -->
<span class="row items-center">
<el-icon :color="scope.row.IsCollect?'#FCC525':'#65676B'" size="14">
<Star /></el-icon>
<span>{{scope.row.IsCollect?'取消收藏':'收藏'}}</span>
</span>
</el-dropdown-item>
<el-dropdown-item v-if="scope.row.FileType" icon="CopyDocument" @click.stop="CopyTo(scope.row)">复制到</el-dropdown-item>
<el-dropdown-item icon="Delete" @click="editDelete(scope.row,1)">删除</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
<!--
<el-button type="primary" icon="View" size="small" @click.stop="openFileDocument(scope.row)" v-if="scope.row.FileType!=0">查看</el-button>
<el-dropdown class="q-pl-md cusor-pointer" trigger="click" @visible-change="(val:boolean)=>dropdownChange(val,scope.row.FileId)">
<el-icon size="16" color="#b1b7cf"><MoreFilled /></el-icon>
<template #dropdown>
<el-dropdown-menu class="q-pa-md">
<el-dropdown-item v-if="scope.row.IsEdit && scope.row.FileType!=0" icon="EditPen" @click="editorFileHandler(scope.row)">编辑</el-dropdown-item>
<el-dropdown-item v-if="scope.row.IsDownload && scope.row.FileType!=0" icon="Download" @click="exportDocument(scope.row)">导出</el-dropdown-item>
<el-dropdown-item icon="Copy" v-if="scope.row.IsView" @click="openCopyHandler(scope.row)">复制到</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown> -->
</div>
</template>
</el-table-column>
<template #empty>
<el-empty :image-size="150" v-if="(!dataList || dataList.length==0) && !loading"
:description="(queryObj.FileId==0?'没有文档':'文件夹里没有文件')" />
</template>
</el-table>
</div>
<ShareForm
:id="shareId"
......@@ -152,17 +131,12 @@
<TreeFile v-if="isTreeFile"
:details="journeyAdsDetails"
:selected-datas="datas.selectedDatas"
:set-file-list="datas.setFileList"
:file-type="journeyAdsDetails.FileType"
:file-id="queryObj.FileId"
@close="() => {journeyAdsDetails = '';isTreeFile=false}"
@success="() => {
journeyAdsDetails = '';
isTreeFile=false;
datas.selectAll=false;
isIndeterminate=false;
datas.selectedDatas=[];
emit('success')}"></TreeFile>
<CopyFile v-if="isCopyTo"
......@@ -220,10 +194,6 @@ import CopyFile from "./CopyFile.vue";
type:Array,
required:[]
},
selectedDatas:{
type:Array,
required:[]
},
navigations:{
type:Array,
required:[]
......@@ -242,7 +212,7 @@ import CopyFile from "./CopyFile.vue";
type: number;
}>({ id: -1, name: "", parentId: 0, number: 1 });
const datas = reactive({
selectedDatas: [] as Array,
Title: '',
selectAll: false as any,
journeyAds: { RefreshLoading: false } as any,
fileList: [] as any,
......@@ -277,7 +247,21 @@ import CopyFile from "./CopyFile.vue";
const editObj = reactive({});
const filterFileNameStatus = ref(false)
const currentRootDom = ref()
const showItemId = ref(0)
if(props.currentMenu==0)datas.Title = '最近浏览'
else if(props.currentMenu==1) datas.Title = '收藏时间'
else if(props.currentMenu==3||props.currentMenu==4) datas.Title = '最近修改'
else if(props.currentMenu==-1) datas.Title = '删除时间'
const handleSelectionChange = (val: []) =>{
let obj = {
selectedDatas: val.map(x=>{return x.FileId}),
}
emit('UpdateData',obj)
}
const dropdownChange = (val:boolean,id:number) => {
showItemId.value = val?id:0
}
const setFilterNameHandler = (t:0|1)=>{
filterFileNameStatus.value = false
if(!t) queryObj.FileName=''
......@@ -293,6 +277,13 @@ import CopyFile from "./CopyFile.vue";
}
emit('refreshHandler',obj)
}
const sortHandler = (val:any)=>{
queryObj.OrderByType = val=='descending'?2:1
let obj = {
OrderByType: queryObj.OrderByType
}
emit('refreshHandler',obj)
}
// 恢复文件
const recover = async (row:any) => {
journeyAdsDetails.value = row
......@@ -444,61 +435,7 @@ import CopyFile from "./CopyFile.vue";
removeShareLoading.value.close();
removeShareLoading.value = null;
}
// 全选按钮
const clickSelectAll = () => {
setTimeout(() => {
for (let i = 0; i < dataList.value.length; i++) {
if (datas.selectAll == true) {
datas.selectedDatas.push(dataList.value[i].FileId)
dataList.value[i].singleChoice = true;
}
else {
datas.selectedDatas = [];
isIndeterminate.value = false;
dataList.value[i].singleChoice = false;
}
}
let obj = {
selectedDatas: datas.selectedDatas,
}
emit('UpdateData',obj)
}, 100);
};
const singleChoice = (row: any) => {
isIndeterminate.value = false;
if (!row.singleChoice) {
datas.selectedDatas.push(row.FileId);
} else {
let index;
for (let i = 0; i < datas.selectedDatas.length; i++) {
if (datas.selectedDatas[i] == row.FileId) index = i;
}
datas.selectedDatas.splice(index, 1);
if(datas.selectedDatas.length>0) isIndeterminate.value = true;
}
getSelectBox()
let obj = {
selectedDatas: datas.selectedDatas,
list: dataList.value,
}
emit('UpdateData',obj)
};
const getSelectBox = () => {
isIndeterminate.value = false;
let checkedCount = datas.selectedDatas.length;
let datasList = dataList.value.length;
if (checkedCount > 0 && datasList == checkedCount) {
datas.selectAll = true
};
if (checkedCount > 0&& (datasList > checkedCount||datasList < checkedCount)) {
datas.selectAll = ""
isIndeterminate.value = true;
}
if (checkedCount == 0) {
datas.selectAll = ""
isIndeterminate.value = false;
};
}
const DeleteFile = async (item: any) => {
ElMessageBox.confirm("此操作将删除该文件夹及其下的文件,是否确定?", "提示", {
confirmButtonText: "确定",
......@@ -651,48 +588,17 @@ import CopyFile from "./CopyFile.vue";
if (props.list) {
nextTick(() => {
dataList.value = props.list
datas.selectAll = false
isIndeterminate.value = false
datas.selectedDatas = []
})
}
})
watch(() => props.navigations, (n,o) => {
Navigations.value = n
for (let index = 0; index < dataList.value.length; index++) {
const element = dataList.value[index];
element.singleChoice = false
}
datas.selectAll = false
datas.selectedDatas = []
isIndeterminate.value = false
let obj = {
selectedDatas: datas.selectedDatas,
}
emit('UpdateData',obj)
})
</script>
<style lang="scss" scoped>
.journeyAds-title {
}
.journeyAds-TitleCenter {
width: 100%;
height: 18px;
margin-bottom: 3px;
overflow: hidden; /* 隐藏超出部分 */
text-overflow: ellipsis; /* 显示省略号 */
white-space: wrap; /* 不换行 */
position: relative;
padding-right: 20px;
}
.journeyAds-TitleCenter span {
position: absolute;
right: 16px;
top: 0px;
}
.journeyAds-Input {
<style>
.journeyAds-Input {
padding-right: 20px;
position: relative;
margin-bottom: 2px;
......@@ -701,61 +607,61 @@ import CopyFile from "./CopyFile.vue";
background: #f5f5f5;
}
}
.journeyAds-container {
position: relative;
overflow: auto;
}
.journeyAds-container th {
background: #fff;
position: sticky;
top: 0px;
z-index: 2;
.sample-table{
font-size: 12px !important;
font-family: microsoft yahei !important;
}
.journeyAdsple-table td > div {
display: flex;
}
.journeyAdsple-table td {
border-bottom: 1px solid #f6f6f6;
}
.journeyAds-container th {
border-bottom: 1px solid #f6f6f6;
color: #A8ABB2;
.sample-table .el-table-column--selection{
border: none !important;
}
.journeyAds-container th:first-child {
border: 0;
.sample-table .el-table-column--selection .cell{
padding: 0 !important;
padding-right: 5px !important;
padding-left: 5px !important;
}
.journeyAdsple-table td:first-child,
.journeyAdsple-table td:nth-child(2) {
border: 0;
}
.journeyAdsple-table td {
padding-bottom: 6px;
}
.journeyAdsple-table td:nth-child(2) {
padding-bottom: 0;
}
.hoverShow {
opacity: 0;
}
.journeyAdsple-table:hover .hoverShow {
opacity: 1;
}
.share-icon-box{
position: relative;
}
.share-icon-box::after{
display: block;
position: absolute;
bottom: -4px;
right: 6px;
content: " ";
background: url('../../../assets/img/share.png');
width: 14px;
height: 14px;
z-index: 2;
}
.active {
color: $themeColor;
.sample-table th .cell{
font-weight: normal !important;
}
.sample-table td, .sample-table th {
border-bottom: 1px solid #f6f6f6 !important;
}
.sample-table td{
/* color:#000; */
}
.sample-table tr td .el-checkbox,
.sample-table tr td .hover{
visibility: hidden !important;
}
.sample-table tr:hover td .el-checkbox,
.sample-table tr td .is-checked,
.sample-table tr:hover td .hover{
visibility: visible !important;
}
.sample-table .indentLeft{
border:none !important;
padding: 0 !important;
}
.sample-table .indentLeft .cell{
padding: 0 !important;
}
.sample-table .temp-tr,
.sample-table th.indentLeft{
border-bottom: 1px solid #f6f6f6 !important;
padding: 8px 0 !important;
}
.sample-table th.indentLeft .cell{
padding: 0 12px !important;
}
.sample-table .file-name{
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
width: 0;
}
.el-table .caret-wrapper{
height: 12px !important;
}
/* .sample-table th:nth-child(2) .cell{
padding-left: 0 !important;
} */
</style>
\ No newline at end of file
......@@ -81,6 +81,7 @@
@UpdateData="UpdateData"
@success="success"
@refreshHandler="refreshHandler"></journeyAdsList>
<!--
<div
v-if="dataList.length == 0 && !loading"
class="q-mt-lg bg-white rounded"
......@@ -104,7 +105,7 @@
background="transparent"
v-loading="loading"
element-loading-text="正在加载中"
></div>
></div> -->
</el-scrollbar>
</div>
<Folder
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment