comit

src/api/ppt.js

@@ -27,6 +27,16 @@ export function apiPPTCatalogueDel(params){
     return post('/pptv2/group/delete',params)
 }
 
+/**
+ * ppt目录重命名
+ * @param GroupId 目录id
+ * @param GroupName:目录名称
+ */
+export function apiPPTCatalogueRename(params){
+    return post('/pptv2/group/rename',params)
+}
+
+
 /**
  * 删除ppt
  * @param PptId pptid
@@ -35,6 +45,23 @@ export function apiPPTDel(params){
     return post('/pptv2/delete',params)
 }
 
+/**
+ * 共享/取消共享ppt
+ * @param PptId
+ */
+export function apiPPTShare(params){
+    return post('/pptv2/share',params)
+}
+
+/**
+ * 复制ppt到目录
+ * @param PptId 
+ * @param GroupId
+ */
+export function apiPPTCopy(params){
+    return post('/pptv2/copy')
+}
+
 /**
  * 获取ppt详情
  * @param PptId

src/assets/styles/common.scss

@@ -17,4 +17,10 @@ html,body{
 
 div{
     box-sizing: border-box;
+}
+
+input{
+    display: block;
+    border: none;
+    box-sizing: border-box;
 }

src/views/ppt/components/MobileClassifyWrap.vue

@@ -4,14 +4,21 @@ import {useClassify} from '../hooks/useClassify'
 const {
     classifyState,
     getPPTClassifyData,
+
     fileOptState,
     handleShowFileOpt,
     handlePPTCatalogueCopy,
     handlePPTCatalogueDel,
+    handlePPTCatalogueReName,
     
     PPTOptState,
     handleShowPPTOpt,
-    handlePPTDel
+    handlePPTDel,
+    handlePPTShare,
+    handleShowPPTCopy,
+    handlePPTCopy,
+
+    goPPTDetail
 }=useClassify()
 
 getPPTClassifyData()
@@ -45,6 +52,7 @@ getPPTClassifyData()
                             class="ppt-item"
                             v-for="_item in item.PptList" 
                             :key="_item.GroupId"
+                            @click.stop="goPPTDetail(_item)"
                         >
                             <span>{{ _item.Title }}</span>
                             <img @click.stop="handleShowPPTOpt(_item)" class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
@@ -67,13 +75,13 @@ getPPTClassifyData()
                             <div class="title-second">
                                 <img src="@/assets/imgs/ppt/ppt_icon_file.png" alt="">
                                 <span>{{item.GroupName}}</span>
-                                <!-- <img class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt=""> -->
                             </div>
                         </template>
                         <div 
                             class="ppt-item"
                             v-for="_item in item.PptList" 
                             :key="_item.GroupId"
+                            @click.stop="goPPTDetail(_item)"
                         >
                             <span>{{ _item.Title }}</span>
                             <img class="menu-icon" src="@/assets/imgs/ppt/ppt_icon_menu.png" alt="">
@@ -99,7 +107,7 @@ getPPTClassifyData()
                 <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
                 <span>复制</span>
             </div>
-            <div class="item border blue">
+            <div class="item border blue" @click="fileOptState.showReName=true">
                 <img src="@/assets/imgs/ppt/ppt_icon_write.png" alt="">
                 <span>重命名</span>
             </div>
@@ -109,6 +117,19 @@ getPPTClassifyData()
             </div>
         </div>
     </van-popup>
+    <!-- 目录重命名 -->
+    <van-dialog 
+        v-model:show="fileOptState.showReName" 
+        title="重命名" 
+        show-cancel-button
+        confirmButtonText="保存"
+        @confirm="handlePPTCatalogueReName"
+    >
+        <div class="file-rename-wrap">
+            <span>目录名称</span>
+            <input type="text" placeholder="请输入目录名" v-model="fileOptState.reNameVal">
+        </div>
+    </van-dialog>
 
     <!-- ppt编辑弹窗 -->
     <van-popup 
@@ -131,20 +152,41 @@ getPPTClassifyData()
                 </div>
                 <div class="flex">
                     <span style="margin-right:4px">公开</span>
-                    <van-switch size="22px" v-model="PPTOptState.data.IsSingleShareBoolean"/>
+                    <van-switch 
+                        size="22px" 
+                        :model-value="PPTOptState.data.IsSingleShareBoolean"
+                        @update:model-value="handlePPTShare"
+                    />
                 </div>
                 
             </div>
-            <div class="item border blue" @click="handlePPTCatalogueCopy">
+            <div class="item border blue" @click="handleShowPPTCopy">
                 <img src="@/assets/imgs/ppt/ppt_icon_copy.png" alt="">
                 <span>复制</span>
             </div>
-            <div class="item border red" @click="handlePPTCatalogueDel">
+            <div class="item border red" @click="handlePPTDel">
                 <img src="@/assets/imgs/icon_del.png" alt="">
                 <span>删除</span>
             </div>
         </div>
     </van-popup>
+    <!-- ppt复制弹窗 -->
+    <van-dialog 
+        v-model:show="PPTOptState.showCopy" 
+        title="PPT目录" 
+        show-cancel-button
+        confirmButtonText="保存"
+        @confirm="handlePPTCopy"
+    >
+        <div class="ppt-copy-wrap">
+            <span>选择目录</span>
+            <van-popover :actions="PPTOptState.copyActions" @select="e=>PPTOptState.copySelectData=e">
+                <template #reference>
+                    <span class="select-value-box">{{PPTOptState.copySelectData.GroupName||'请选择目录'}}</span>
+                </template>
+            </van-popover>
+        </div>
+    </van-dialog>
 </template>
 
 <style lang="scss">
@@ -232,6 +274,24 @@ getPPTClassifyData()
     }
 }
 
+.file-rename-wrap{
+    display: flex;
+    align-items: center;
+    padding: 50px 30px;
+    span{
+        flex-shrink: 0;
+        margin-right: 20px;
+    }
+    input{
+        flex: 1;
+        line-height: 70px;
+        padding: 0 30px;
+        border-radius: 70px;
+        border: 1px solid $border-color;
+        width: 150px;
+    }
+}
+
 .ppt-opt-wrap{
     .top-box{
         display: flex;
@@ -251,6 +311,27 @@ getPPTClassifyData()
     }
 }
 
+.ppt-copy-wrap{
+    display: flex;
+    align-items: center;
+    padding: 50px 30px;
+    span{
+        flex-shrink: 0;
+        margin-right: 20px;
+    }
+    :deep(.van-popover__wrapper){
+        flex: 1;
+    }
+    .select-value-box{
+        display: block;
+        height: 70px;
+        line-height: 70px;
+        padding: 0 30px;
+        border-radius: 70px;
+        border: 1px solid $border-color;
+        min-width: 150px;
+    }
+}
 
 
 </style>

src/views/ppt/hooks/useClassify.js

@@ -1,16 +1,24 @@
 //ppt分类模块
 
 import {ref,reactive} from 'vue'
-import { showToast,showDialog } from 'vant';
+import { useRouter } from 'vue-router';
+import { showToast,showDialog,Dialog  } from 'vant';
 import {
     apiPPTClassify,
     apiPPTCatalogueCopy,
     apiPPTCatalogueDel,
-    apiPPTDel
+    apiPPTCatalogueRename,
+    apiPPTDel,
+    apiPPTShare,
+    apiPPTCopy
 } from '@/api/ppt'
 
 
+
+
+
 export function useClassify(){
+    const router=useRouter()
     // ppt分类数据
     const classifyState = reactive({
         privateList:[],
@@ -25,7 +33,7 @@ export function useClassify(){
         if(res.Ret===200){
             const temPriArr=res.Data.PrivateList||[]
             classifyState.privateList=temPriArr.map(item=>{
-                 item.PptList=item.PptList.map(_item=>{
+                 item.PptList=item.PptList?.map(_item=>{
                     return {
                         ..._item,
                         IsSingleShareBoolean:_item.IsSingleShare?true:false
@@ -44,9 +52,12 @@ export function useClassify(){
     const fileOptState=reactive({
         show:false,
         data:{},//当前点击的目录数据
+        showReName:false,//显示重命名弹窗
+        reNameVal:"",
     })
     const handleShowFileOpt=e=>{
         fileOptState.data=e
+        fileOptState.reNameVal=e.GroupName
         fileOptState.show=true
     }
     // 复制ppt目录
@@ -66,6 +77,7 @@ export function useClassify(){
         showDialog({
             title: '提示',
             message: '删除操作不可恢复，确认删除吗？',
+            showCancelButton:true
         }).then(() => {
             // on close
             apiPPTCatalogueDel({GroupId:fileOptState.data.GroupId}).then(res=>{
@@ -76,11 +88,28 @@ export function useClassify(){
             })
         });
     }
+    // 目录重命名
+    const handlePPTCatalogueReName=async ()=>{
+        if(!fileOptState.reNameVal){
+            showToast('请填写目录名称');
+            return
+        }
+        const res=await apiPPTCatalogueRename({
+            GroupId:fileOptState.data.GroupId,
+            GroupName:fileOptState.reNameVal
+        })
+        if(res.Ret===200){
+            getPPTClassifyData()
+        }
+    }
 
     // 显示ppt录编辑弹窗
     const PPTOptState=reactive({
         show:false,
-        data:{}
+        data:{},
+        showCopy:false,//显示选择复制到目录的弹窗
+        copyActions:[],//选择复制到目录数
+        copySelectData:{},//复制选择的目录
     })
     const handleShowPPTOpt=(e)=>{
         PPTOptState.data=e
@@ -91,16 +120,61 @@ export function useClassify(){
         showDialog({
             title: '提示',
             message: '删除操作不可恢复，若该PPT被共享，则同步删除共享PPT，确认删除吗？',
+            showCancelButton:true
         }).then(() => {
             // on close
-            apiPPTDel({GroupId:PPTOptState.data.PptId}).then(res=>{
+            apiPPTDel({PptId:PPTOptState.data.PptId}).then(res=>{
                 if(res.Ret===200){
                     getPPTClassifyData()
                     PPTOptState.show=false
                 }
-            })
+            }).catch(()=>{})
         });
     }
+    //设置ppt是否共享
+    const handlePPTShare=async (e)=>{
+        const res=await apiPPTShare({
+            PptId:PPTOptState.data.PptId
+        })
+        if(res.Ret===200){
+            getPPTClassifyData()
+            PPTOptState.data.IsSingleShareBoolean=e
+        }
+    }
+    // 显示复制ppt选择目录弹窗
+    const handleShowPPTCopy=()=>{
+        PPTOptState.copyActions=classifyState.privateList.map(item=>{
+            return {
+                text:item.GroupName,
+                ...item
+            }
+        })
+        PPTOptState.showCopy=true
+    }
+    // 保存 复制ppt
+    const handlePPTCopy=()=>{
+        apiPPTCopy({
+            PptId:PPTOptState.data.PptId,
+            GroupId:PPTOptState.copySelectData.GroupId
+        }).then(res=>{
+            if(res.Ret===200){
+                getPPTClassifyData()
+                PPTOptState.showCopy=false
+            }
+        })
+    }
+
+
+    // 跳转ppt详情
+    const goPPTDetail=(e)=>{
+        console.log(e);
+        router.push({
+            path:"/ppt/detail",
+            query:{
+                id:e.PptId
+            }
+        })
+    }
 
 
     return {
@@ -111,9 +185,15 @@ export function useClassify(){
         handleShowFileOpt,
         handlePPTCatalogueCopy,
         handlePPTCatalogueDel,
+        handlePPTCatalogueReName,
 
         PPTOptState,
         handleShowPPTOpt,
-        handlePPTDel
+        handlePPTDel,
+        handlePPTShare,
+        handleShowPPTCopy,
+        handlePPTCopy,
+
+        goPPTDetail
     }
 }

src/views/ppt/style/common.scss

@@ -1,5 +1,5 @@
-$pptItemW:1000px;
-$pptItemH:700px;
+$pptItemW:1000PX;
+$pptItemH:700PX;
 
 .ppt-item-box{
     width: $pptItemW;
@@ -7,7 +7,7 @@ $pptItemH:700px;
     background: url('https://hzstatic.hzinsights.com/static/ppt_m/pptitem_bg.png');
     background-size: cover;
     background-repeat: no-repeat;
-    margin-top: 10px;
+    margin-top: 10PX;
     position: relative;
     overflow: hidden;
     .ppt-title-box{
@@ -18,7 +18,7 @@ $pptItemH:700px;
         left: 10%;
         z-index: 100;
         display: flex;
-        font-size: 24px;
+        font-size: 24PX;
         color: #333;
         align-items: center;
         transform-origin: 0 0;