新增折叠功能

解润东
20220104

src/views/checked/index.vue

@@ -25,10 +25,15 @@
             <div>检查编号：{{item.no}}</div>
             <div>检查名称：{{item.name}}</div>
             <div>检查类型：{{item.type}}</div>
-            <div>开始时间：{{item.planStartTime}}</div>
-            <div>结束时间：{{item.planEndTime}}</div>
-            <div>检查地点：{{item.address}}</div>
-            <div>是否提交：{{item.finish?'已提交':'未提交'}}</div>
+            <div v-show="item.isOpen">
+                <div>开始时间：{{item.planStartTime}}</div>
+                <div>结束时间：{{item.planEndTime}}</div>
+                <div>检查地点：{{item.address}}</div>
+                <div>是否提交：{{item.finish?'已提交':'未提交'}}</div>
+            </div>
+            <div class="more" @click.stop="toggle(item)">
+                {{ item.OpenText }}
+            </div>
         </div>
         <tab-bar :index="1"></tab-bar>
     </div>
@@ -65,9 +70,13 @@ export default {
                 loadingType: 'spinner',
                 duration: 0
             })
-            getFun('check/carry/user/list').then((Response)=>{
+            getFun('check/carry/user/list',{name:this.value}).then((Response)=>{
                 this.$toast.clear()
                 this.checkedList=Response.data
+                this.checkedList.forEach((item)=>{
+                    item.isOpen=false
+                    item.OpenText="展开 ▼";
+                })
             }).catch(()=>{
                 this.$toast.clear()
                 this.$toast.fail('加载失败,请稍后再试')
@@ -75,14 +84,24 @@ export default {
         },
         /* 搜索查询列表接口 */
         onSearch(){
-            getFun('check/carry/user/list',{name:this.value}).then((Response)=>{
-                this.checkedList=Response.data
-            })
+            this.list()
         },
         cardLocation(item){
             sessionStorage.setItem('id',item.id)
             sessionStorage.setItem('finish',item.finish)
             this.$router.push({name:'problem',params:{id:item.id}})//此id来判断是否加载问题上报新数据
+        },
+        //切换显示内容
+        toggle(item){
+            item.isOpen = !item.isOpen;
+            if (item.isOpen) {
+                //   显示所有数据
+                item.OpenText = "收起 ▲";
+            } else {
+                item.OpenText = "展开 ▼";
+                // 只显示第一个数据
+            }
+            this.$forceUpdate()
         }
     }
 }
@@ -93,6 +112,7 @@ export default {
         box-shadow: 0px 0px 10px 2px #F3F3F3;
         padding: 0.25rem;
         margin:0.4rem auto;
+        position: relative;
         background: white;
         border-radius: 4%;
     }
@@ -100,4 +120,12 @@ export default {
         font-size: 0.4rem;
         line-height: 0.8rem;
     }
+    .more{
+        position: absolute;
+        bottom: 0.25rem;
+        right: 15px;
+        color: #2a80f7;
+        font-weight: none;
+        z-index: 99;
+    }
 </style>

src/views/checked/problem/note/detail/index.vue

@@ -17,7 +17,13 @@
             <div>问题描述：{{list.context}}</div>
             <div>法律依据：{{list.checkBasis}}</div>
             <div>图片展示：<van-uploader multiple :deletable="false" :show-upload="false"  v-model="list.pictures" /></div>
-            <div>视频展示：<van-uploader multiple :deletable="false" :show-upload="false" :disabled="true" v-model="list.videos" /></div>
+            <div>视频展示：
+                <van-uploader  multiple :deletable="false" :show-upload="false"  v-model="list.videos" >
+                    <template #preview-cover="{ url }">
+                        <video muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"></video>
+                    </template>
+                </van-uploader>
+            </div>
         </div>
         <tab-bar :index="1"></tab-bar>
     </div>
@@ -64,7 +70,6 @@ export default {
                         url:item
                     })
                 });
-                
             })
         }
     }

src/views/checked/problem/note/edit/index.vue

@@ -61,11 +61,13 @@
             <van-field name="uploader2" label="视频上传" >
                 <template #input>
                     <van-uploader  :before-read="beforeReadVideo" accept="video/*" multiple :max-count="5" upload-text="最多上传五个" v-model="editObj.videos" >
-                    <template #preview-cover="{ file,content }">
-                        <div v-if="file.type.indexOf('video') !== -1" >
+                    <template #preview-cover="{ file,content ,url}">
+                        <div v-if="file?file.type.indexOf('video') !== -1:''" >
                             <video muted autoplay :src="content" style="width:80px;height:80px;object-fit:cover;"></video>
                         </div>
-                        <div v-else></div>
+                        <div v-else>
+                            <video muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"></video>
+                        </div>
                     </template>
                 </van-uploader>
                 </template>

src/views/checkedConfirm/confirmNote/detail/index.vue

@@ -17,7 +17,13 @@
             <div>问题描述：{{list.context}}</div>
             <div>法律依据：{{list.checkBasis}}</div>
             <div>图片展示：<van-uploader multiple :deletable="false" :show-upload="false"  v-model="list.pictures" /></div>
-            <div>视频展示：<van-uploader multiple :deletable="false" :show-upload="false" :disabled="true" v-model="list.videos" /></div>
+            <div>视频展示：
+                <van-uploader  multiple :deletable="false" :show-upload="false"  v-model="list.videos" >
+                    <template #preview-cover="{ url }">
+                        <video muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"></video>
+                    </template>
+                </van-uploader>
+            </div>
         </div>
         <tab-bar :index="1"></tab-bar>
     </div>

src/views/checkedConfirm/index.vue

@@ -15,10 +15,15 @@
             <div>负责人：{{item.name}}</div>
             <div>部门名称：{{item.realName}}</div>
             <div>开始时间：{{item.planStartTime}}</div>
-            <div>结束时间：{{item.planEndTime}}</div>
-            <div>检查地点：{{item.address}}</div>
-            <div>检查类型：{{item.type}}</div>
+            <div v-show="item.isOpen">
+                <div>结束时间：{{item.planEndTime}}</div>
+                <div>检查地点：{{item.address}}</div>
+                <div>检查类型：{{item.type}}</div>
+            </div>
         </div>
+        <div class="more" @click.stop="toggle(item)">
+                {{ item.OpenText }}
+            </div>
         <tab-bar :index="1"></tab-bar>
     </div>
 </template>
@@ -54,6 +59,10 @@ export default {
             })
             getFun('check/confirm/list').then((Response)=>{
                 this.checkedConfirmList=Response.data
+                this.checkedConfirmList.forEach((item)=>{
+                    item.isOpen=false
+                    item.OpenText="展开 ▼";
+                })
                 this.$toast.clear()
             }).catch(()=>{
                 this.$toast.clear()
@@ -64,6 +73,18 @@ export default {
             sessionStorage.setItem('ConfirmFinish',item.finish)
             sessionStorage.setItem('ConfirmId',item.id)
             this.$router.push({name:'confirmNote',params:{name:'checkedConfirm',id:item.id}})//此id来判断是否加载问题上报新数据
+        },
+        //切换显示内容
+        toggle(item){
+            item.isOpen = !item.isOpen;
+            if (item.isOpen) {
+                //   显示所有数据
+                item.OpenText = "收起 ▲";
+            } else {
+                item.OpenText = "展开 ▼";
+                // 只显示第一个数据
+            }
+            this.$forceUpdate()
         }
     }
 }
@@ -75,10 +96,19 @@ export default {
         padding: 0.25rem;
         margin:0.4rem auto;
         background: white;
+        position: relative;
         border-radius: 4%;
     }
     .card div{
         font-size: 0.4rem;
         line-height: 0.8rem;
     }
+    .more{
+        position: absolute;
+        bottom: 0.25rem;
+        right: 15px;
+        color: #2a80f7;
+        font-weight: none;
+        z-index: 99;
+    }
 </style>

src/views/notice/index.vue

@@ -15,11 +15,16 @@
             <div>负责人姓名：{{item.realName}}</div>
             <div>检查名称：{{item.name}}</div>
             <div>检查类型：{{item.type}}</div>
-            <div>检查开始时间：{{item.planStartTime}}</div>
-            <div>检查结束时间：{{item.planEndTime}}</div>
-            <div>检查地点：{{item.address}}</div>
-            <div>是否完成检查：{{item.finish?'是':'否'}}</div>
-            <div>问题数量：{{item.troubleNumber}}</div>
+            <div v-show="item.isOpen">
+                <div>检查开始时间：{{item.planStartTime}}</div>
+                <div>检查结束时间：{{item.planEndTime}}</div>
+                <div>检查地点：{{item.address}}</div>
+                <div>是否完成检查：{{item.finish?'是':'否'}}</div>
+                <div>问题数量：{{item.troubleNumber}}</div>
+            </div>
+            <div class="more" @click.stop="toggle(item)">
+                {{ item.OpenText }}
+            </div>
         </div>
         <tab-bar :index="1"></tab-bar>
     </div>
@@ -57,6 +62,10 @@ export default {
             getFun('check/notify/list').then((Response)=>{
                 this.$toast.clear()
                 this.noticeList=Response.data
+                this.noticeList.forEach((item)=>{
+                    item.isOpen=false
+                    item.OpenText="展开 ▼";
+                })
             })
         },
         cardLocation(item){
@@ -70,6 +79,18 @@ export default {
                     id:item.id
                 }
             })
+        },
+        //切换显示内容
+        toggle(item){
+            item.isOpen = !item.isOpen;
+            if (item.isOpen) {
+                //   显示所有数据
+                item.OpenText = "收起 ▲";
+            } else {
+                item.OpenText = "展开 ▼";
+                // 只显示第一个数据
+            }
+            this.$forceUpdate()
         }
     }
 }
@@ -81,10 +102,19 @@ export default {
         padding: 0.25rem;
         margin:0.4rem auto;
         background: white;
+        position: relative;
         border-radius: 4%;
     }
     .card div{
         font-size: 0.4rem;
         line-height: 0.8rem;
     }
+    .more{
+        position: absolute;
+        bottom: 0.25rem;
+        right: 15px;
+        color: #2a80f7;
+        font-weight: none;
+        z-index: 99;
+    }
 </style>

src/views/notice/noticeList/detail/index.vue

@@ -17,7 +17,13 @@
             <div>问题描述：{{list.context}}</div>
             <div>法律依据：{{list.checkBasis}}</div>
             <div>图片展示：<van-uploader multiple :deletable="false" :show-upload="false"  v-model="list.pictures" /></div>
-            <div>视频展示：<van-uploader multiple :deletable="false" :show-upload="false" :disabled="true" v-model="list.videos" /></div>
+            <div>视频展示：
+                <van-uploader  multiple :deletable="false" :show-upload="false" v-model="list.videos" >
+                    <template #preview-cover="{ url }">
+                        <video muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"></video>
+                    </template>
+                </van-uploader>
+            </div>
         </div>
         <tab-bar :index="1"></tab-bar>
     </div>

src/views/notice/noticeList/edit/index.vue

@@ -61,11 +61,13 @@
             <van-field name="uploader2" label="视频上传">
                 <template #input>
                     <van-uploader :before-read="beforeReadVideo" accept="video/*" multiple :max-count="5" upload-text="最多上传五个" v-model="editObj.videos" >
-                    <template #preview-cover="{ file,content }">
-                        <div v-if="file.type.indexOf('video') !== -1" >
+                    <template #preview-cover="{ file,content ,url}">
+                        <div v-if="file?file.type.indexOf('video') !== -1:''" >
                             <video muted autoplay :src="content" style="width:80px;height:80px;object-fit:cover;"></video>
                         </div>
-                        <div v-else></div>
+                        <div v-else>
+                            <video muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"></video>
+                        </div>
                     </template>
                 </van-uploader>
                 </template>

src/views/notice/noticeList/index.vue

@@ -298,6 +298,7 @@ export default {
                 })
                 /* ----详情---- */
                 if(this.isFinish){
+                    this.person=Response.data.userName
                     //获取选中状态数组
                     this.noticeQuestionList.forEach((item)=>{
                         if(item.checkSubmitId){