行程 广告排序方式

src/views/SellTemplate/Workspace.vue

@@ -76,27 +76,8 @@
                     </div>
                 </div>
                 <div class="col">
-                    <!-- <div class="q-px-md q-pt-lg">
-                        <div class="q-pl-lg row q-pb-sm">
-                            <h5 class="q-pl-md">
-                                <template v-if="!currentMenu">最近</template>
-                                <template v-else-if="currentMenu==1">星标</template>
-                                <template v-else-if="currentMenu==2">共享</template>
-                                <template v-else-if="currentMenu==3">行程文档</template>
-                                <template v-else-if="currentMenu==4">广告图</template>
-                                <template v-else-if="currentMenu==-1">回收站</template>
-                            </h5>
-                            <div class="select-btn row items-center q-pl-lg pointer">
-                                <el-icon>
-                                    <RefreshRight v-if="!datas.journeyAds.RefreshLoading" 
-                                    @click="datas.journeyAds.RefreshLoading=true"/>
-                                    <Loading v-else />
-                                </el-icon>
-                            </div>
-                        </div>
-                    </div> -->
                     <!-- <Example></Example> -->
-                    <journeyAds v-if="currentMenu==3||currentMenu==4"></journeyAds>
+                    <journeyAds :current-menu="currentMenu" v-if="currentMenu==3||currentMenu==4"></journeyAds>
                 </div>
             </div>
         </div>

src/views/SellTemplate/components/HistoricalVersion.vue

 <template>
     <el-dialog v-model="show" v-loading="loading" :show-close="false" 
     :close-on-press-escape="false" :close-on-click-modal="false" 
-    style="max-width:1000px;min-width: 600px;">
+    style="width: 500px;">
         <template #header>
             <div class="row overflow-hide">
                 <div>
@@ -44,7 +44,7 @@
                                 <span>{{item.CreateByName}}</span>
                             </td>
                             <td class="text-light"><span>{{item.FileSize}}KB</span></td>
-                            <td class="text-light"><span>{{}}-</span></td>
+                            <td class="text-light"><span>{{item.Title}}</span></td>
                             <!-- <td class="text-center"></td> -->
                         </tr>
                     </template>

src/views/SellTemplate/components/TreeFile.vue

 <template>
     <el-dialog v-model="show" v-loading="loading" :show-close="false" 
     :close-on-press-escape="false" :close-on-click-modal="false" 
-    style="max-width:1000px;min-width: 600px;">
+    style="width: 350px;">
         <template #header>
             <div class="row overflow-hide">
                 <div>
@@ -13,10 +13,10 @@
                         style="height: 43px;" />
                 </div>
                 <div class="q-pl-md col">
-                    <div>
+                    <div class="row flex-center">
                         <el-tooltip
                         placement="top-start">
-                            <template #content><div style="max-width: 600px;">{{details.FileName}}</div></template>
+                            <template #content><div class="text-center" style="width: 200px;">{{details.FileName}}</div></template>
                             <div class="TreeFile-Title pointer">{{details.FileName}}</div>
                         </el-tooltip>
                     </div>
@@ -24,9 +24,14 @@
                         <template v-if="details">
                             创建者：{{details.CreateName}}
                         </template>
-                        <template v-else>
-                            移动文件 {{selectedDatas.join(',')}}
-                        </template>
+                        <div v-else class="row items-center">
+                            <el-tooltip
+                                placement="top-start">
+                                <template #content><div class="text-center" style="width: 200px;">移动文件 {{selectedDatas.join(',')}}</div></template>
+                                <div class="TreeFile-Title text-sm pointer">移动文件 {{selectedDatas.join(',')}}</div>
+                            </el-tooltip>
+                            
+                        </div>
                     </div>
                 </div>
             </div>
@@ -243,6 +248,9 @@ import FolderService from "@/services/FolderService";
         font-size: 15px;
         position: relative;
     }
+    .TreeFile-Title.text-sm{
+        font-size: 12px;
+    }
     .TreeFile-container th{
         padding: 0 10px 5px 10px;
         border-bottom: 1px solid #f6f6f6;

src/views/SellTemplate/components/breadPeeling.vue

 <template>
-    <span><span class="text-info q-ml-sm">/</span> {{datas.Navigation}} </span>
+    <span class="pointer" v-for="(item,index) in navigations"
+    @click="goInquire(item.FileId,index)">
+        <span class="text-info q-ml-sm">/</span> 
+        {{item.FileName}} 
+    </span>
 </template>
 <script setup lang="ts">
 import { ApiResult } from '@/configs/axios';
@@ -9,89 +13,22 @@ import { View,Download,EditPen,Delete } from '@element-plus/icons-vue';
 import FolderService from "@/services/FolderService";
 
     const props = defineProps({
-        folderId:{
-            type: Number,
-            required: 1
+        navigations:{
+            type: Array,
+            required: []
         },
-        fileType: {
-            type:Number,
-            required: 1
-        }
     })
     const emit = defineEmits<{
-        (event: 'close'): void,
-        (event: 'success'): void
+        (event: 'Inquire'): void
     }>()
 
     const datas = reactive({
-        fileList: [] as Tree[],
-        Navigation: '' as String,
-        ParentFileId: 0,
-        ParentFile: [] as Array
-    })
-    const dataList=ref([])
-
-    const getFile = async () => {
-        let querys = {
-            FileType: props.fileType
-        }
-        let pageRes = await FolderService.GetMyFolderTree(querys);
-        if (pageRes.data.resultCode == 1) {
-            dataList.value = pageRes.data.data
-            datas.Navigation = ''
-            recursive(dataList.value)
-            
-        }
-    }
-
         
-    const recursive = (arrs:Array) =>{
-        if(arrs.length>0) arrs.forEach(x => {
-            if(x.FileId==props.folderId){
-                datas.Navigation = x.FileName
-                datas.ParentFileId = x.ParentFileId
-            }
-            if(x.ChildList.length>0){
-                recursionChild(x)
-            }
     })
-    }
-    const recursionChild = (arrs:any,ParentFileId:any) => {
-        if(arrs&&arrs.ChildList.length>0) {
-            recursive(arrs.ChildList)
-        }
-    }
-
-    const recursiveTitle = (arrs:any,ParentFileId:any) => {
-        console.log(ParentFileId,'-----ParentFileId')
-        if(arrs.length>0) arrs.forEach(x => {
-            if(x.FileId==ParentFileId||x.ParentFileId==ParentFileId){
-                datas.ParentFiles.push(x.FileName)
-                console.log(datas.ParentFiles,'====datas.ParentFiles    ')
-            }
-            if(x.ChildList.length>0){
-                recursionChild(x)
-            }
-        })
-    }
 
-    const recursionChildTitle = (arrs:any,ParentFileId:any) => {
-        if(arrs&&arrs.ChildList.length>0) {
-            recursiveTitle(arrs.ChildList,ParentFileId)
+    const goInquire = (FileId:Number,index:Number) => {
+        emit('Inquire',FileId,index) 
     }
-    }
-
-    watch(props, (val) => {
-        getFile()
-    })
-    watch(datas, (val) => {
-        if(datas.ParentFileId){
-            datas.ParentFiles = []
-            // console.log(val.ParentFiles,'=====0000000')
-            recursiveTitle(dataList.value,datas.ParentFileId)
-        }
-    })
-    getFile()
 </script>
 <style scoped>
     

src/views/SellTemplate/components/journeyAds.vue

@@ -5,33 +5,19 @@
         <h5 class="row items-center">
           <span
             class="pointer"
-            @click="
-              () => {
-                queryObj.FileId = 0;
-                datas.selectAll = false;
-                datas.selectedDatas = [];
-                refreshHandler();
-              }
-            "
+            @click="BackInquire"
             ><el-icon class="q-pt-md" v-if="queryObj.FileId > 0" size="20"
               ><ArrowLeft /></el-icon
           ></span>
           <span class="q-pl-md"
           :class="[queryObj.FileId == 0?'':'row items-center']">
-            <span>
+            <span class="pointer" @click="queryObj.FileId=0,refreshHandler()">
               <template v-if="currentMenu == 3">行程文档</template>
               <template v-else-if="currentMenu == 4">广告图</template>
             </span>
-            <breadPeeling v-if="queryObj.FileId" :folder-id="queryObj.FileId" :file-type="queryObj.FileType"></breadPeeling>
+            <breadPeeling v-if="queryObj.FileId" :navigations="Navigations" 
+            @Inquire="breadPeelingInquire"></breadPeeling>
           </span>
-          
-          <!-- <span v-else class="q-pl-md row items-center">
-            <span>
-              <template v-if="currentMenu == 3">行程文档</template>
-              <template v-else-if="currentMenu == 4">广告图</template>
-            </span>
-            <span><span class="text-info q-ml-sm">/</span> {{ Navigation.FileName }}</span>
-          </span> -->
         </h5>
         <div class="select-btn q-pl-lg pointer q-mt-sm">
           <el-icon>
@@ -100,7 +86,15 @@
                   <div class="text-left q-pl-md">文档名称</div>
                 </th>
                 <th class="text-light" style="min-width: 150px; width: 150px">
-                  最近修改
+                  <div class="row items-center just-center pointer" @click.stop="clickSort">
+                    <span>最近修改 </span>
+                    <span class="column">
+                      <el-icon class="reactive" 
+                      style="top: 3px" :class="[datas.Sort==2?'active':'']"><CaretTop /></el-icon>
+                      <el-icon class="reactive" 
+                      style="top:-3px" :class="[datas.Sort==1?'active':'']"><CaretBottom /></el-icon>
+                    </span>
+                  </div>
                 </th>
                 <th class="text-light" style="min-width: 100px; width: 100px">
                   创建者
@@ -231,7 +225,7 @@
 <script setup lang="ts">
 import { ref, reactive, provide, watch, inject, onMounted } from "vue";
 import { ElLoading, ElMessage, ElMessageBox } from "element-plus";
-import { MoreFilled, Edit, ArrowLeft,CopyDocument } from "@element-plus/icons-vue";
+import { MoreFilled, Edit, ArrowLeft,CopyDocument,DCaret,CaretTop,CaretBottom } from "@element-plus/icons-vue";
 import ConfigService from "@/services/ConfigService";
 import FolderService from "@/services/FolderService";
 import { injectKeyTemplate } from "@/types/injectKey";
@@ -257,14 +251,17 @@ const shareId = ref(0);
 const journeyAdsDetails = ref('');
 const isHistoricalVersion = ref(false);
 const isTreeFile = ref(false)
-const Navigation = ref({});
+const Navigations = ref([] as Array<any>);
 const showHistory = ref(true);
 const isIndeterminate = ref(false);
 const dataList = ref([] as Array<any>);
+const copyDataList = ref([] as Array<any>);
+const NewDataList = ref([] as Array<any>);
 const searchData = ref({} as any);
 searchData.value = inject(injectKeyTemplate);
 const deleteLoading = ref<any>(null);
 const datas = reactive({
+  Sort: 0,
   selectedDatas: [] as Array,
   selectAll: false as any,
   journeyAds: { RefreshLoading: false } as any,
@@ -297,6 +294,65 @@ const editObj = reactive({});
 //datas.journeyAds = inject('journeyAds')
 const loading = ref(false as any);
 const SellTemplateRef = ref<any>();
+
+const clickSort = (type:any) =>{
+  if(datas.Sort==0) copyDataList.value = JSON.parse(JSON.stringify(dataList.value))
+  // 1降序 2升序
+  if(datas.Sort==2) datas.Sort=0
+  else datas.Sort++
+  getSort()
+}
+
+const getSort = () => {
+  let list = JSON.parse(JSON.stringify(dataList.value))
+  for (let i=0;i<list.length;i++){
+      for (let j=i;j<list.length;j++){
+        let time
+        if(datas.Sort==1) time = new Date(list[i].UpdateTime.replace(/-/,'/'))-new Date(list[j].UpdateTime.replace(/-/,'/'))
+        if(datas.Sort==2) time = new Date(list[j].UpdateTime.replace(/-/,'/'))-new Date(list[i].UpdateTime.replace(/-/,'/'))
+        if(time>0){
+            let listObj=list[i];
+            list[i]=list[j];
+            list[j]=listObj;
+        }
+      }
+  }
+  dataList.value = datas.Sort?list:JSON.parse(JSON.stringify(copyDataList.value))
+  for(let i=0;i<dataList.value.length;i++) {
+    if (datas.selectAll) {
+      dataList.value[i].singleChoice = true;
+      datas.selectedDatas.push(dataList.value[i].FileId);
+    } else if (
+      datas.selectedDatas.length > 0 &&
+      datas.selectedDatas.indexOf(dataList.value[i].FileId) != -1
+    )  dataList.value[i].singleChoice = true;
+  }
+}
+
+// 导航
+const BackInquire = () => {
+  datas.selectAll = false;
+  datas.selectedDatas = [];
+  let  Navigation = Navigations.value[Navigations.value.length-2]
+  if(Navigation&&Navigation.FileId){
+    breadPeelingInquire(Navigation.FileId,Navigations.value.length-2)
+  }else breadPeelingInquire(0,0)
+}
+
+const breadPeelingInquire = (FileId:number,index:number)=> {
+  datas.selectAll = false;
+  datas.selectedDatas = [];
+  Navigations.value.splice(index+1, Navigations.value.length-1)
+  queryObj.FileId = FileId
+  refreshHandler()
+}
+const sellAdd = (type:number) =>{
+    searchData.value.sellId = 0
+    searchData.value.sellTempId = 0
+    SalesEditorStore.setSalesEditor(type)
+    marketStore.setMarket(true)
+}
+
 // 移动到文件夹
 const MoveFile = (item:any) => {
   if(item) journeyAdsDetails.value = item
@@ -386,6 +442,7 @@ const clickSelectAll = () => {
   }, 100);
 };
 const singleChoice = (row: any) => {
+  isIndeterminate.value = false;
   if (!row.singleChoice) {
     datas.selectedDatas.push(row.FileId);
   } else {
@@ -394,8 +451,8 @@ const singleChoice = (row: any) => {
       if (datas.selectedDatas[i] == row.FileId) index = i;
     }
     datas.selectedDatas.splice(index, 1);
+    isIndeterminate.value = true;
   }
-  isIndeterminate.value = false;
   let checkedCount = datas.selectedDatas.length;
   let datasList = dataList.value.length;
   if (datasList > 0 && checkedCount > 0 && datasList == checkedCount)
@@ -510,8 +567,15 @@ const editDelete = async (row: any, type: Number) => {
     } else {
       // 2文件夹详情
       if (type == 2) {
+        console.log(row.FileId,row.ParentFileId)
         queryObj.FileId = row.FileId;
-        Navigation.value = row;
+        Navigations.value.push(
+          {
+            FileId: row.FileId,
+            FileName: row.FileName,
+            ParentFileId: row.ParentFileId
+          }
+        );
         datas.selectAll = false
         datas.selectedDatas = []
         isIndeterminate.value = false
@@ -552,7 +616,9 @@ const querySearchHandler = async () => {
       arrList(pageRes.data.data.pageData);
       datas.selectedDatas = Array.from(new Set(datas.selectedDatas))
       dataList.value = dataList.value.concat(pageRes.data.data.pageData);
+      copyDataList.value = dataList.value
       queryObj.pageCount = pageRes.data.data.pageCount;
+      getSort()
     }
     loading.value = false;
     datas.journeyAds.RefreshLoading = false;
@@ -598,6 +664,11 @@ watch(
   }
 );
 
+watch(() => queryObj.FileId,(n, o) => {
+    if(!n) Navigations.value = []
+  }
+);
+
 onMounted(() => {});
 
 querySearchHandler();
@@ -669,4 +740,7 @@ querySearchHandler();
 .journeyAdsple-table:hover .hoverShow {
   opacity: 1;
 }
+.active {
+  color: $themeColor;
+}
 </style>