重命名

src/views/SellTemplate/Workspace.vue

@@ -90,7 +90,7 @@
                                 <el-icon>
                                     <RefreshRight v-if="!datas.journeyAds.RefreshLoading" 
                                     @click="datas.journeyAds.RefreshLoading=true"/>
-                                    <Refresh v-else />
+                                    <Loading v-else />
                                 </el-icon>
                             </div>
                         </div>
@@ -109,7 +109,7 @@ import { ref,reactive,provide,inject } from 'vue';
 import SearchDocument from './components/SearchDocument.vue'
 import Example from './components/Example.vue'
 import journeyAds from './components/journeyAds.vue'
-import { Plus,ArrowDown,Clock,Star,Share,Picture,Management,Delete,RefreshRight,Refresh } from '@element-plus/icons-vue';
+import { Plus,ArrowDown,Clock,Star,Share,Picture,Management,Delete,RefreshRight,Refresh,Loading } from '@element-plus/icons-vue';
 
 import { injectKeyTemplate } from '@/types/injectKey'
 import { useSellTemplateStore, useScreenStore, useSlidesStore } from '@/store'
@@ -126,13 +126,13 @@ provide('journeyAds',datas.journeyAds)
 
 const searchData = ref({} as any)
 searchData.value = inject(injectKeyTemplate)
-
+searchData.value.currentMenu = currentMenu.value
 if(searchData.value.SellTemplateType){
     let current = 0
     if(searchData.value.SellTemplateType==1) current = 3
     if(searchData.value.SellTemplateType==2) current = 4
     currentMenu.value = current
-}
+}else currentMenu.value = searchData.value.currentMenu
 const SalesEditorStore = useSellTemplateStore()
 const marketStore = useScreenStore()
 
@@ -145,10 +145,11 @@ const sellAdd = (type:number) =>{
 
 const setCurrentMenuHandler=(i:number)=>{
     currentMenu.value=i
-    let TemplateType = 1
+    searchData.value.currentMenu=i
+    let TemplateType = 0
     if(i==3) TemplateType = 1
     if(i==4) TemplateType = 2
-    if(TemplateType) searchData.value.SellTemplateType = TemplateType
+    searchData.value.SellTemplateType = TemplateType
 }
 </script>
 <style scoped>

src/views/SellTemplate/components/journeyAds.vue

 <template>
-    <div ref="SellTemplateRef" class="journeyAds-container" style="height: 100%;overflow: auto;">
+    <div ref="SellTemplateRef" class="journeyAds-container">
         <el-scrollbar @scroll="scrollingHandler" height="100%" class="q-px-md">
             <pre style="min-width:700px;">
                 <table class="text-small" style="width: 100%">
-                    <tr>
-                        <th class="text-left" style="width: 20px;"><el-checkbox size="sm" v-model="datas.selectAll"
+                    <tr @click.stop="OffEdit">
+                        <th class="text-left" style="width: 20px;"><el-checkbox class="SelectAllBox" size="sm" v-model="datas.selectAll"
                             @click="clickSelectAll"
                             :indeterminate="isIndeterminate"/></th>
                         <th colspan="2" class="text-light"><div class="text-left q-pl-md">文档名称</div></th>
-                        <th class="text-light">最近修改</th>
+                        <th style="width: 100px;" class="text-light">最近修改</th>
                         <th class="text-light">创建者</th>
-                        <th width="150" class="text-light">操作</th>
+                        <th width="120" class="text-light">操作</th>
                     </tr>
                     <template v-for="(item,index) in dataList">
-                        <tr class="text-5B5D62 journeyAdsple-table pointer">
-                            <td class=""><div class="row items-center hoverShow"
+                        <tr class="text-5B5D62 journeyAds-table pointer">
+                            <td class="" @click.stop="OffEdit"><div class="row items-center hoverShow"
                                 :style="{'opacity':item.singleChoice?1:''}">
-                                <el-checkbox size="sm" v-model="item.singleChoice"
+                                <el-checkbox class="SelectAllBox" size="sm" v-model="item.singleChoice"
                                 @click="singleChoice(item)"/></div></td>
-                            <td class="" style="width: 30px;"><img class="q-px-md" :src="item.TemplateType==1?datas.pdfImg:datas.adsImg" 
+                            <td class="" style="width: 30px;" @click.stop="OffEdit"><img class="q-px-md" :src="item.TemplateType==1?datas.pdfImg:datas.adsImg" 
                                 style="height: 25px;" /></td>
-                            <td class="journeyAdsple-title wrap"><span>{{item.Title}}</span></td>
-                            <td class="text-center"><span>{{item.Day?item.Day+'天前':item.UpdateTime}}</span></td>
-                            <td class="text-center"><span>{{item.CreateByName}}</span></td>
-                            <td class="text-center"><div class="hoverShow row items-center just-center q-pt-sm"><el-button type="primary" :icon="Edit" size="small" @click="editDelete(item)">编辑</el-button><el-dropdown class="q-pl-md" trigger="click"><el-icon size="16" color="#b1b7cf"><MoreFilled /></el-icon>
+                            <td class="journeyAds-title wrap"><div v-if="!item.editTitle" @click.stop="OffEdit"><el-tooltip
+                                style="max-width: 600px;"
+                                placement="top-start"
+                              ><template #content><div style="max-width: 600px;">{{item.Title}}</div></template><span class="journeyAds-TitleCenter">{{item.Title}}</span> </el-tooltip></div><el-input
+                                class="journeyAds-Input"
+                                v-model="item.Title"
+                                autosize
+                                type="textarea"
+                                placeholder="Please input"
+                                maxlength="500"
+                                size="small"
+                                v-if="item.editTitle"
+                                @blur="handleUpdateTitle(item)"
+                              /></td>
+                            <td class="text-center" @click.stop="OffEdit"><span>{{item.Day?item.Day+'天前':item.UpdateTime}}</span></td>
+                            <td class="text-center" @click.stop="OffEdit"><span>{{item.CreateByName}}</span></td>
+                            <td class="text-center" @click.stop="OffEdit"><div class="hoverShow row items-center just-center q-pt-sm"><el-button type="primary" :icon="Edit" size="small" @click="editDelete(item)">编辑</el-button><el-dropdown class="q-pl-md" trigger="click"><el-icon size="16" color="#b1b7cf"><MoreFilled /></el-icon>
                                   <template #dropdown>
                                    <el-dropdown-menu class="q-pa-md">
-                                    <el-dropdown-item icon="EditPen">重命名</el-dropdown-item>
+                                    <el-dropdown-item icon="EditPen" @click.stop="startEditTitle(item)">重命名</el-dropdown-item>
                                     <el-dropdown-item icon="Clock">历史版本</el-dropdown-item>
-                                    <el-dropdown-item icon="Position" @click="()=>shareId=item.Id">分享</el-dropdown-item>
-                                    <el-dropdown-item icon="Delete" @click="editDelete(item,1)">删除</el-dropdown-item>
+                                    <el-dropdown-item icon="Position" @click.stop="()=>shareId=item.Id">分享</el-dropdown-item>
+                                    <el-dropdown-item icon="Delete" @click.stop="editDelete(item,1)">删除</el-dropdown-item>
                                    </el-dropdown-menu>
                                   </template>
                                  </el-dropdown></div></td>
@@ -65,7 +78,7 @@
 
     const PopoverVisibleControls = ref(false)
     const shareId = ref(0)
-    const isIndeterminate = ref(true)
+    const isIndeterminate = ref(false)
     const dataList = ref([] as Array < any > )
     const searchData = ref({} as any)
     searchData.value = inject(injectKeyTemplate)
@@ -89,10 +102,92 @@
         pageCount: 0, //总页数
         TemplateType: TemplateType,
     })
+    const editObj = reactive({})
     datas.journeyAds = inject('journeyAds')
     const loading = ref(false as any)
+    const deleteLoading = ref<any>(null)
     const SellTemplateRef = ref<any>()
 
+    // 重命名
+    const OffEdit = () => {
+        for(let i=0;i<dataList.value.length;i++){
+            dataList.value[i].editTitle = false
+            if(editObj.value&&editObj.value.Id
+            &&dataList.value[i].Id==editObj.value.Id) {
+                dataList.value[i].Title = editObj.value.Title
+            }
+        }
+    }
+    const handleUpdateTitle = (row:any) => {
+        if(!row.Title) return ElMessage({
+                                    showClose: true,
+                                    message: '文档名称不能为空',
+                                    type: 'warning',
+                                })
+        row.editTitle = false
+        if(row.Title!=editObj.value.Title) {
+            editObj.value.Title = row.Title
+            SetSellTemplate(row)
+        }
+    }
+    const startEditTitle = (row:any) => {
+        for(let i=0;i<dataList.value.length;i++){
+            dataList.value[i].editTitle = false
+            if(dataList.value[i].Id==row.Id) {
+                row.editTitle = true
+                sellGetTripTemplate(row)
+            }
+        }
+        
+    }
+    // 销售模版数据
+    const sellGetTripTemplate = async (row:any) =>{
+        try {
+            let queryMsg = {
+                Id: row.Id
+            }
+            let dataRes = await ConfigService.sellGetTemplateDetails(queryMsg);
+            if (dataRes.data.resultCode == 1) {
+                editObj.value = dataRes.data.data
+            }
+        } catch (error) {
+            
+        }
+    }
+    // 保存重命名
+    const SetSellTemplate = async (row:any) => {
+        try {
+            let TempId = row.TempId
+            let Id = row.Id
+            let queryMsg = {
+                Id: Id,
+                TempId: TempId,
+                TempData: editObj.value.TempData,
+                Title: editObj.value.Title,
+                OWidth: 0,
+                OHeight: 0,
+            }
+            if(editObj.value.TemplateType==2){
+                queryMsg.OWidth = editObj.value.Width
+                queryMsg.OHeight = editObj.value.Height
+            }
+            let TemplateRes = await ConfigService.sellSetTemplate(queryMsg);
+            if (TemplateRes.data.resultCode == 1) {
+                ElMessage({
+                    showClose: true,
+                    message: '重命名成功',
+                    type: 'success',
+                })
+            }else{
+                ElMessage({
+                    showClose: true,
+                    message: '重命名失败',
+                    type: 'warning',
+                })
+            }
+        } catch (error) {}
+    }
+
     // 全选按钮
     const clickSelectAll = () => {
         if(datas.selectAll) {
@@ -130,8 +225,6 @@
             isIndeterminate.value = true
         }
         if(datasList==0&&checkedCount==0) datas.selectAll = ''
-
-        console.log(datas.selectedDatas,'----')
     }
     const setTemplateType = (Id:number) => {
         queryObj.pageIndex = 1
@@ -209,8 +302,12 @@
             if (pageRes.data.resultCode == 1) {
                 let arrList = function(list){
                     list.forEach(x => {
-                        x.show = false
+                        x.editTitle = false
                         x.singleChoice = false
+                        if(datas.selectedDatas.length>0){
+                            let find = datas.selectedDatas.find(y=>{ return y==x.Id })
+                            if(find) x.singleChoice = true
+                        }
                         const date1 = new Date();
                         const date2 = new Date(x.UpdateTime);
                         x.Day = getDaysBetween(date1, date2)
@@ -241,6 +338,7 @@
 
     watch(() => searchData.value.SellTemplateType, (n,o) => {
         isIndeterminate.value = false
+        datas.selectedDatas = []
         setTemplateType(n)
     })
     watch(() => datas.journeyAds.RefreshLoading, (n,o) => {
@@ -257,38 +355,65 @@
 </script>
 <style lang="scss" scoped>
      @import url('../../../assets/styles/common.css');
+     .SelectAllBox{
+        position: relative;
+        top: 3px;
+     }
+     .journeyAds-title{
+        max-width: 600px;
+     }
+     .journeyAds-TitleCenter{
+        display: block; /* 将元素转化为块级元素 */
+        overflow: hidden; /* 隐藏超出部分 */
+        text-overflow: ellipsis; /* 显示省略号 */
+        white-space: nowrap; /* 不换行 */
+        -webkit-box-orient: vertical; /* 水平布局改为垂直布局 */
+        -webkit-line-clamp: 1; /* 只显示两行文本 */
+        padding-right: 20px;
+     }
+     .journeyAds-Input{
+        padding-right: 20px;
+        position: relative;
+        top: 6px;
+        ::v-deep(.el-textarea__inner){
+            padding: 5px;
+            background: #f5f5f5;
+        }
+     }
      .journeyAds-container {
         position: relative;
         overflow: auto ; 
-        
+        height: 100%;
+        overflow: auto;
     }
+
     .journeyAds-container th {
         background: #fff;
         position: sticky;
         top: 0px; 
         z-index: 2;
     }
-     .journeyAdsple-table{
+     .journeyAds-table{
         
      }
-     .journeyAdsple-table td,.journeyAds-container th{
+     .journeyAds-table td,.journeyAds-container th{
         border-bottom: 1px solid #F6F6F6;
      }
-     .journeyAdsple-table td:first-child,
-     .journeyAdsple-table td:nth-child(2),
+     .journeyAds-table td:first-child,
+     .journeyAds-table td:nth-child(2),
      .journeyAds-container th:first-child{
         border: 0;      
      }
-     .journeyAdsple-table td{
+     .journeyAds-table td{
         padding-bottom: 6px;
      }
-     .journeyAdsple-table td:nth-child(2){
+     .journeyAds-table td:nth-child(2){
         padding-bottom: 0;
      }
      .hoverShow{
         opacity: 0;
      }
-     .journeyAdsple-table:hover .hoverShow{
+     .journeyAds-table:hover .hoverShow{
         opacity: 1;
      }