重命名

src/assets/styles/common.css

@@ -93,6 +93,12 @@ page {
 .bg-waring{
 	background-color: #f89c53 !important;
 }
+.bg-f5{
+	background-color: #f5f5f5 !important;
+}
+.bg-23{
+	background-color: #232323 !important;
+}
 .text-waring{
 	color: #f89c53;
 }

src/views/SellTemplate/components/journeyAds.vue

@@ -30,38 +30,63 @@
     </div>
     <div ref="SellTemplateRef" class="journeyAds-container" style="height: 100%;overflow: auto;">
         <el-scrollbar @scroll="scrollingHandler" height="100%" class="q-px-md">
-            <div 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"
+            <div style="min-width:'700px';overflow-x: scroll;">
+                <table class="text-small" style="width: 100%;">
+                    <tr @click.stop="OffEdit">
+                        <th class="text-left" style="width: 20px;"><el-checkbox size="sm" class="SelectAllBox" 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 class="text-light">创建者</th>
-                        <th width="150" class="text-light">操作</th>
+                        <th class="text-light" style="min-width: 100px;width: 110px;">最近修改</th>
+                        <th class="text-light" style="min-width: 100px;width: 100px;">创建者</th>
+                        <th class="text-light" style="min-width: 120px;width: 120px;">操作</th>
                     </tr>
                     <template v-for="(item,index) in dataList">
                         <tr class="text-5B5D62 journeyAdsple-table pointer">
-                            <td class=""><div class="row items-center hoverShow"
+                            <td @click.stop="OffEdit"><div class="row items-center hoverShow"
                                 :style="{'opacity':item.singleChoice?1:''}">
-                                <el-checkbox size="sm" v-model="item.singleChoice"
+                                <el-checkbox size="sm" class="SelectAllBox" 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 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>
+                                    <el-tooltip v-if="!item.editTitle" @click.stop="OffEdit"
+                                    placement="top-start">
+                                        <template #content><div style="max-width: 600px;">{{item.Title}}</div></template>
+                                        <div class="journeyAds-TitleCenter">{{item.Title}}
+                                            <span v-if="item.Title.length>70">...</span>
+                                        </div>
+                                    </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">
+                                <div class="hoverShow row items-center just-center q-pt-sm">
+                                    <el-button type="primary" :icon="Edit" size="small" @click.stop="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-menu class="q-pa-md" @click.stop="OffEdit">
+                                    <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-menu>
                                   </template>
-                                 </el-dropdown></div></td>
+                                 </el-dropdown>
+                                </div></td>
                         </tr>
                     </template>
                 </table>
@@ -102,7 +127,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)
@@ -116,10 +141,7 @@
     const folderObj = ref<{id:number,name:string,parentId:number}>({id:-1,name:'',parentId:0})
     let TemplateType = 0
     if(searchData.value.SellTemplateType) TemplateType = searchData.value.SellTemplateType
-    // if(searchData.value.journeyAds) {
-    //     if(searchData.value.SellTemplateType==3) TemplateType = 1
-    //     else TemplateType = 2
-    // }
+
     const queryObj = reactive({
         Title: '',
         pageIndex: 1,
@@ -127,9 +149,89 @@
         pageCount: 0, //总页数
         TemplateType: TemplateType,
     })
+    const editObj = reactive({})
     //datas.journeyAds = inject('journeyAds')
     const loading = ref(false as any)
     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 = () => {
@@ -137,7 +239,11 @@
             datas.selectedDatas = dataList.value.map(x=>{
                 return x.Id
             })
-        }else datas.selectedDatas = []
+        }else {
+            datas.selectedDatas = []
+            isIndeterminate.value = false
+        }
+        
         setTimeout(()=>{
             for(let i=0;i<dataList.value.length;i++){
                 if(datas.selectAll==true) dataList.value[i].singleChoice = true
@@ -169,7 +275,6 @@
         }
         if(datasList==0&&checkedCount==0) datas.selectAll = ''
 
-        console.log(datas.selectedDatas,'----')
     }
     const setTemplateType = (Id:number) => {
         queryObj.pageIndex = 1
@@ -249,6 +354,10 @@
                     list.forEach(x => {
                         x.show = false
                         x.singleChoice = false
+                        if(datas.selectAll) {
+                            x.singleChoice = true
+                            datas.selectedDatas.push(x.Id)
+                        }else if(datas.selectedDatas.length>0&&datas.selectedDatas.indexOf(x.Id)!=-1) x.singleChoice = true
                         const date1 = new Date();
                         const date2 = new Date(x.UpdateTime);
                         x.Day = getDaysBetween(date1, date2)
@@ -288,22 +397,49 @@
 
     watch(() => searchData.value.SellTemplateType, (n,o) => {
         isIndeterminate.value = false
+        datas.selectAll = false
+        datas.selectedDatas = []
         setTemplateType(n)
     })
-    watch(() => datas.journeyAds.RefreshLoading, (n,o) => {
-        if(!n) return
-        queryObj.pageIndex = 1
-        querySearchHandler()
-    })
 
     onMounted(()=>{
-        // SellTemplateRef.value.addEventListener("scroll", scrollingHandler);
+        
     })
 
     querySearchHandler()
 </script>
 <style lang="scss" scoped>
      @import url('../../../assets/styles/common.css');
+     .SelectAllBox{
+        position: relative;
+        top: 3px;
+     }
+     .journeyAds-title{
+        
+     }
+     .journeyAds-TitleCenter{
+        max-width: 1000px;
+        height: 18px;
+        overflow: hidden; /* 隐藏超出部分 */
+        text-overflow: ellipsis; /* 显示省略号 */
+        white-space: wrap; /* 不换行 */
+        position: relative;
+        padding-right: 20px;
+     }
+     .journeyAds-TitleCenter span{
+        position: absolute;
+        right: 10px;
+        top: -4px;
+     }
+     .journeyAds-Input{
+        padding-right: 20px;
+        position: relative;
+        margin-bottom: 2px;
+        ::v-deep(.el-textarea__inner){
+            padding: 5px;
+            background: #f5f5f5;
+        }
+     }
      .journeyAds-container {
         position: relative;
         overflow: auto ;
@@ -315,8 +451,8 @@
         top: 0px; 
         z-index: 2;
     }
-     .journeyAdsple-table{
-        
+     .journeyAdsple-table td>div{
+        display: flex;
      }
      .journeyAdsple-table td,.journeyAds-container th{
         border-bottom: 1px solid #F6F6F6;